Introducción HTML5 y CSS3
33
Néstor Ramírez Salas [email protected]
-
Upload
nestor-ramirez-salas -
Category
Technology
-
view
5.123 -
download
0
Transcript of Introducción HTML5 y CSS3
AGENDA
HTML51. Qué es
2. Novedades
3. Ventajas
4. Elementos para la web semántica
5. Elementos para multimedia
6. Elementos para formularios
7. Enlaces de interés
CSS3• Bordes
• Sombras
• Transparencias
• Texto, transformaciones
• Texto, tratamientos
• Texto, 3D
• Fondos
• Pseudo elementos
• Selectores
• Filtros
HTML51. Qué es
2. Novedades
3. Ventajas
4. Elementos para la web semántica
5. Elementos para multimedia
6. Elementos para formularios
7. Enlaces de interés
AGENDA
HTML5
• Es la nueva versión del lenguaje de marcación HTML para desarrollo de páginas web.
• 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 pensamos: “Eso es html5”.
Ejemplo: animación en página web
1. QUÉ ES
http://www.southmountain.com.ar/
HTML51. Qué es
2. Novedades
3. Ventajas
4. Elementos para la web semántica
5. Elementos para multimedia
6. Elementos para formularios
7. Enlaces de interés
AGENDA
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”, geolocalización, etc.
Ejemplo: rompecabeza
2. NOVEDADES
http://www.thisshell.com/
HTML51. Qué es
2. Novedades
3. Ventajas
4. Elementos para la web semántica
5. Elementos para multimedia
6. Elementos para formularios
7. Enlaces de interés
AGENDA
HTML5
• Reproducción de juegos directamente en el navegador.
• Compatibilidad con dispositivos móviles.
• Mejora en la web semántica, programación y en el uso de javascript y CSS3.
• Presentación mejorada de contenido multimedia, sin plugin NO flash :)
Ejemplo: juegos
3. VENTAJAS
http://www.f-i.com/html5/basketball/
http://buzz.jaysalvat.com/demo/
¿Cuántos han visto este mensaje?
¿Y este mensaje?
Y por último… :(
HTML51. Qué es
2. Novedades
3. Ventajas
4. Elementos para la web semántica
5. Elementos para multimedia
6. Elementos para formularios
7. Enlaces de interés
AGENDA
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
HTML5
4. WEB SEMÁNTICA
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
HTML5
4. WEB SEMÁNTICA
HTML5
4. WEB SEMÁNTICA
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
HTML51. Qué es
2. Novedades
3. Ventajas
4. Elementos para la web semántica
5. Elementos para multimedia
6. Elementos para formularios
7. Enlaces de interés
AGENDA
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. MULTIMEDIA
HTML5
• <canvas>
<canvas id="b" width="300" height="225">function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
</canvas>
Ejemplo
https://developer.mozilla.org/en-US/demos/detail/ghostwriter-art-studio/launch
Info
http://diveintohtml5.info/canvas.html
5. MULTIMEDIA
HTML51. Qué es
2. Novedades
3. Ventajas
4. Elementos para la web semántica
5. Elementos para multimedia
6. Elementos para formularios
7. Enlaces de interés
AGENDA
HTML5
nuevos tipos <input>
• Search
<input type="search">
• Tel
<input type="tel" pattern="\S{5,10}">
• Number
<input required type="number">
6. FORMULARIOS
• Url
<input type="url">
<input required type="email">
• Color
<input type="color">
HTML5
• Date
<input type="date" name="fecha">
• Month
<input type="month" name="mes">
• Week
<input type="week" name="semana">
6. FORMULARIOS
HTML51. Qué es
2. Novedades
3. Ventajas
4. Elementos para la web semántica
5. Elementos para multimedia
6. Elementos para formularios
7. Enlaces de interés
AGENDA
HTML5
• Guía official
http://dev.w3.org/html5/html-author/
• Tester html5 para navegadores
http://beta.html5test.com/
• Ejemplos y tutorials online
http://playground.html5rocks.com/
• Información sobre canvas
http://diveintohtml5.info/canvas.html
• Librerías javascript para HTML5
http://artysmedia.blogspot.com/2012/07/librerias-javascript-para-html5.html
7. ENLACES DE INTERÉS
¿ AÚN TENEMOS TIEMPO
PARA VER EJEMPLOS
CSS3 ?
CSS3
• Fondos
• Pseudo elementos
• Selectores
• Filtros
• Bordes
• Sombras
• Transparencias
• Texto, transformaciones
• Texto, tratamientos
• Texto, 3D
APUESTO QUE
NO CONOCES AL
ÚLTIMO PERSONAJE
EL ES…
Y EL ES…
Y ESTE SEÑOR ES…
¿Y QUIÉN ES EL?
El creador de la WEB
http://evolutionofweb.appspot.com/http://es.wikipedia.org/wiki/Tim_Berners-Lee
GRACIAS
Néstor Ramírez SalasDrupal Front End Developer
nramirezsalas nramirezsalas 994 736 607
