html5, introducción
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 2012TRANSCRIPT
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