Embed Size (px)
Citation preview
Diseño Web con
Ing. Yuri Rodríguez Alva
Agenda a tratar:
¿Qué es HTML5 y sus novedades?
¿Porqué utilizar HTML5 y CSS3?
Ejemplos prácticos con HTML
¿Qué es HTML5?
• HTML 5 es la quinta revisión más importante que se hace al lenguaje
HTML y cuya intención es eliminar el abuso excesivo de los famosos DIVS.
• HTML5 comienzan añadiendo semántica y accesibilidad implícitas,
especificando cada detalle y borrando cualquier ambigüedad en el
contenido
• El HTML5 nos brinda varios elementos que perfeccionan esta
estructuración estableciendo qué es cada sección, eliminando así DIV
innecesarios.
• Este cambio en la semántica hace que la estructura de la web sea más
coherente y fácil de entender por otras personas y los navegadores podrán
darle más importancia a según qué secciones de la web, facilitándole
además la tarea a los buscadores, así como cualquier otra aplicación que
interprete sitios web.
Estructura comparativa entre HTML5 y HTML tradicional
Un ejemplo de página añadiendo estos elementos semánticos sería:
<!DOCTYPE html> <html lang="es"><head><title>Elementos semánticos del HTML5</title> </head> <body>
<header> <h1>Encabezado de la página</h1> </header>
<nav> <p>enlaces de navegación</p> </nav>
<section> <p>Sección 1</p> </section>
<section> <p>Sección 2</p> </section>
<aside> <p>Publicidad</p> </aside>
<footer> <p>Pié de página</p> </footer>
</body> </html>
Novedades de HTML5
• Mejora en diseño y validación de Formularios.
• Incorporación de <Audio> y <Video>
• Incrustación de Flash con <embed>
• Elemento <canvas> el cual es usado por Google Maps y permitirá a
los desarrolladores crear aplicaciones o dibujar o generar gráficos en su
interior.
• Aplicaciones Offline que funcionen sin conexión a internet.
• Geolocalización, poder ubicar en forma inmediata.
• Almacenamiento de Datos en BD locales con tablas y registros del
lado del cliente.
¿Porqué utilizar HTML5 y no las versiones anteriores?
✔ Lograr que la información, y la forma de presentarla estén
lo más separadas posible.
✔ Resumir, simplificar y hacer más sencillo el código utilizado.
✔ Un lenguaje que haga las páginas compatibles con todos los
navegadores web, incluyendo los de los teléfonos móviles y
otros dispositivos modernos usados en la actualidad para
navegar en Internet.
✔ Y, principalmente; simular aplicaciones tradicionales de
escritorio a nivel web, como por ejemplo los ERPs Webs.
EJEMPLO PRACTICO CON HTML5
http://pritesh.info/vivid-photo-2/
PAGINAS WEB FLUIDAS HTML5
http://andreagandino.com/
http://clearleft.com/
http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
