Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5, Introducción

730 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5, Introducción

  1. 1. Curso de Desarrollo Web ¡Bienvenidos! Noviembre, 2012domingo, 9 de diciembre de 12
  2. 2. Acerca de mí Juan Manuel Padilla Carmona Ingeniero en sistemas Computacionales UNIVAC Maestro en Redes de Computadoras y Tecnologías Web UNINTER Líder de Proyectos ROC @mannuelpadillac Manuel Padilla /manuelpadillacdomingo, 9 de diciembre de 12
  3. 3. Curso de Desarrollo Webdomingo, 9 de diciembre de 12
  4. 4. Curso de Desarrollo Web How To Meet Ladiesdomingo, 9 de diciembre de 12
  5. 5. <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
  6. 6. <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
  7. 7. <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
  8. 8. <h1>Introducción</h1> <h2>La Tecnología</h2>domingo, 9 de diciembre de 12
  9. 9. <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
  10. 10. <h1>Navegadores y Herramientas</h1> <h2>Navegadores</h2> Maxthon Chrome Opera Safari Firefox Internet Esplorerdomingo, 9 de diciembre de 12
  11. 11. <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
  12. 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
  13. 13. <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
  14. 14. <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
  15. 15. Let´s play a gamedomingo, 9 de diciembre de 12

×