HTML5 y CSS3

Conociendo las novedades, ventajas y nuevos elementos que nos ofrece esta versión de HTML. Además veremos algunos ejemplos prácticos de cómo usar estos nuevos elementos de desarrollo web.

Transcript

1. Néstor Ramírez Salas nramirez@businesstech.pe
2. AGENDA HTML5 1. Qué es 2. Novedades 3. Ventajas 4. Elementos para web semántica 5. Elementos para gráficos y multimedia 6. Elementos para formularios CSS3 1. Bordes 2. Sombras 3. Transparencias 4. Texto, transformaciones 5. Texto, tratamientos 6. Texto, 3D 7. Fondos 8. Pseudo elementos 9. Selectores 10. Filtros
3. HTML5 • Es la nueva versión del lenguaje de marcación HTML para desarrollo de páginas web. • También es un término que agrupa el uso de diversos conceptos relacionados al desarrollo web, como por ejemplo: animaciones, css3, jquery, multimedia, ajax, etc. Cuando vemos un sitio bonito, moderno, elegante, con animaciones, sonido, video, etc… seguro que decimos: “Eso está en html5”. Ejemplo: animación en página web 1. QUÉ ES http://www.southmountain.com.ar/
4. HTML5 • Mejora en la Estructura, con etiquetas que representan partes típicas de un página web. • Etiquetas para contenido específico como: Video, Audio, Input (mail). • Canvas, dibujo y animaciones sin flash. • Nuevas APIs para interfaz de usuario, el famoso “drag and drop” (arrastrar y soltar). Ejemplo: drag and drop 2. NOVEDADES http://www.thisshell.com/
5. HTML5 • Visualización de contenidos sin plugin. • Reproducción de juegos y gráficos directamente en el navegador. • Compatibilidad con dispositivos móviles. • Interacción con contenidos fuera de línea. • Presentación mejorada de contenido multimedia. • Mejora en la semántica de programación y en el uso de javascript y css3. Ejemplo: juego basketball 3. VENTAJAS http://www.f-i.com/html5/basketball/
6. HTML5 • <header> Define la cabecera de la página. • <nav> Define la sección para el menú principal. • <section> Define una sección en la página. • <article> Especifica un contenido específico. • <aside> Define una sección para contenido secundario. Columna lateral. • <footer> Define la sección final de una página o una sección. 4. WEB SEMÁNTICA
7. HTML5 4. WEB SEMÁNTICA • <header> • <nav> • <section> • <article> • <aside> • <footer> Ejemplo: ver estructura web [1]
8. HTML5 • <video> <video src="movie.mp4" type="video/mp4" width="420" controls> </video> <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> </video> • <audio> <audio src="music.mp3" preload="auto" controls> </audio>  controls : Muestra los controles estándar de HTML5 para audio.  autoplay : Hace que el audio se reproduzca automáticamente.  loop : Hace que el audio se repita automáticamente. 5. GRÁFICOS Y MULTIMEDIA
9. HTML5 • <input> nuevos tipos – Search • <input type="search"> – Tel • <input type="tel" pattern="\S{5,10}"> – Number • <input required type="number"> – Color • <input type="color"> 6. FORMULARIOS
10. HTML5 • <input> nuevos tipos – Range • <input type="range"> – Url • <input type="url"> – Email • <input required type="email"> 6. FORMULARIOS
11. HTML5 • <input> nuevos tipos – Datetime / Date • <input type="datetime" name="fechahora"> • <input type="date" name="fecha"> – Month • <input type="month" name="mes"> – Week • <input type="week" name="semana"> 6. FORMULARIOS
12. CSS3 • Fondos • Pseudo elementos • Selectores • Filtros • Bordes • Sombras • Transparencias • Texto, transformaciones • Texto, tratamientos • Texto, 3D
13. ¿QUIÉN ES? http://evolutionofweb.appspot.com/ http://es.wikipedia.org/wiki/Tim_Berners-Lee
14. GRACIAS Néstor Ramírez Salas nramirez@businesstech.pe nramirezsalas@outlook.com.pe @nramirezsalas (f)nramirezsalas