HTML5, Introducción

Post on 12-Jun-2015

423 views 0 download

description

Breve introducción a HTML5 para el curso de Desarrollo Web, impartido por el I.S.C Juan Manuel Padilla Carmona en UNIVAC. Cuernavaca Morelos, México. Noviembre 2012

Transcript of HTML5, Introducción

Curso de Desarrollo Web

¡Bienvenidos!

Noviembre, 2012

domingo, 9 de diciembre de 12

Acerca de mí

Juan Manuel Padilla CarmonaIngeniero en sistemas ComputacionalesUNIVAC

Maestro en Redes de Computadoras y Tecnologías WebUNINTER

Líder de ProyectosROC

@mannuelpadillac Manuel Padilla /manuelpadillac

domingo, 9 de diciembre de 12

Curso de Desarrollo Web

domingo, 9 de diciembre de 12

Curso de Desarrollo Web

How To Meet Ladies

domingo, 9 de diciembre de 12

<h1>Agenda</h1>

<ol class=”agendaHTML”><li>Introducción</li>

<li>El presente es HTML5</li>

<li>Navegadores y Herramientas</li>

<li>Elementos y Atributos</li>

<li>Formularios</li>

<li>Multimedia</li></ol>

domingo, 9 de diciembre de 12

<h1>Introducción</h1>

<h2>¿Qué es HTML</h2>

<p>HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto... HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>)... puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.</p>

<span class=”fuenteDefinicion”> Wikipedia </span>

domingo, 9 de diciembre de 12

<h1>Introducción</h1>

<h2>¿Qué me ofrece HTML5?</h2>

<ul class=”HTML5Oferta”><li>Una mejor plataforma de desarrollo web.</li><li>Más demarcado descriptivo.</li><li>Multimedia con menos Plug-ins.</li><li>Mejores Aplicaciones.</li><li>Mejores interfaces.</li><li>Mejores formularios.</li><li>Almacenamiento del lado del cliente.</li><li>Accesibilidad Mejorada</li><li>Y muchas otras cosas buenas más</li>

</ul>

domingo, 9 de diciembre de 12

<h1>Introducción</h1>

<h2>La Tecnología</h2>

domingo, 9 de diciembre de 12

<h1>El presente es HTML5</h1>

<h2>HTML5</h2>

<p>Las grandes empresas, las mejores páginas y aplicaciones web hoy en día son desarrolladas en HTML5; algunos ejemplos de ello son</p>

<ul class=”ejemplosHTML5”><li>www.brandongenerator.com/</li><li>www.astrid.com/</li><li>www.twitter.com/</li><li>www.decoracionpdi.com/</li><li>www.woodlandsrealtypros.com/</li>

</ul>

domingo, 9 de diciembre de 12

<h1>Navegadores y Herramientas</h1>

<h2>Navegadores</h2>

Maxthon Chrome Opera

Safari Firefox Internet Esplorerdomingo, 9 de diciembre de 12

<h1>Navegadores y Herramientas</h1>

<h2>Herramientas</h2>

<ul class=”herramientasDesarrollo”><li>Editor de Código</li><li>Editor de Imágenes</li><li>Navegadores Web</li><li>Extensiones de Navegadores</li>

</ul>

domingo, 9 de diciembre de 12

<h1>Elementos y Atributos</h1>

<h2>Etiquetas Descontinuadas</h2>

<ul class=”etiquetasDescontinudas”><li>basefont</li><li>big</li><li>center</li><li>font</li><li>s</li><li>strike</li><li>u</li><li>y muchas otras más</li>

</ul>

domingo, 9 de diciembre de 12

<h1>Elementos y Atributos</h1>

<h2>Todo comienza con un DOCTYPE</h2>

Antes de HTML5

<!DOCTYPE html PUBLIC “-//W3C//DTD 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

En HTML5

<!DOCTYPE html>

domingo, 9 de diciembre de 12

<h1>Elementos y Atributos</h1>

<h2>Nuevas etiquetas estructurales</h2>

<header> Define una cabecera en una página o sección.

<footer>Define un pie de pagina o sección..

<nav>Define una región de navegación en una pagina o sección.

<section>Define una región lógica para agrupar contenido.

<article>Define un articulo o una pieza completa de contenido.

domingo, 9 de diciembre de 12

Let´s play a gamedomingo, 9 de diciembre de 12