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.
Néstor Ramírez Salas
nramirez@businesstech.pe
AGENDA
HTML5

CSS3

1.
2.
3.
4.
5.
6.
7.

•
•
•
•
•
•
•
•
•
•

Qué es
Novedades
Ventajas
Elementos para la web semántica
E...
AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.

Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Ele...
HTML5

1. QUÉ ES
•

Es la nueva versión del lenguaje de marcación
HTML para desarrollo de páginas web.

•

Es un término q...
AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.

Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Ele...
HTML5

2. NOVEDADES
•

Mejora en la Estructura, con etiquetas que
representan partes típicas de un página web.

•

Etiquet...
AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.

Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Ele...
HTML5

3. VENTAJAS
•
•
•

•

Reproducción de juegos directamente en
el navegador.
Compatibilidad con dispositivos móviles....
¿Cuántos han visto este mensaje?
¿Y este mensaje?
Y por último… :(
AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.

Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Ele...
HTML5

4. WEB SEMÁNTICA
• <header>

Define la cabecera de la página.

• <nav>

Define la sección para el menú principal.

...
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
AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.

Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Ele...
HTML5

5. MULTIMEDIA
• <video>
<video src="movie.mp4" type="video/mp4" width="420" controls> </video>
<video controls>
<so...
HTML5

5. MULTIMEDIA
• <canvas>
<canvas id="b" width="300" height="225">
function draw_b() {
var b_canvas = document.getEl...
AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.

Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Ele...
HTML5

6. FORMULARIOS
nuevos tipos <

input>

• Search

• Url

<input type="search">

<input type="url">

• Tel

• Email

...
HTML5

6. FORMULARIOS
• Date
<input type="date" name="fecha">

• Month
<input type="month" name="mes">

• Week
<input type...
AGENDA
HTML5
1.
2.
3.
4.
5.
6.
7.

Qué es
Novedades
Ventajas
Elementos para la web semántica
Elementos para multimedia
Ele...
HTML5

7. ENLACES DE INTERÉS
• Guía official
http://dev.w3.org/html5/html-author/

• Tester html5 para navegadores
http://...
¿ AÚN TENEMOS TIEMPO
PARA

VER EJEMPLOS

CSS3 ?
CSS3
•
•
•
•
•
•

Bordes
Sombras
Transparencias
Texto, transformaciones
Texto, tratamientos
Texto, 3D

•
•
•
•

Fondos
Pse...
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://es.wikipedia.org/wiki/Tim_Berners-Lee

http://evolutionofweb.appspot.com/
GRACIAS

Néstor Ramírez Salas
Drupal Front End Developer
nramirez@businesstech.pe
nramirezsalas@outlook.com.pe

nramirezsa...
Upcoming SlideShare
Loading in …5
×

Introducción HTML5 y CSS3

5,517 views

Published on

Conociendo las novedades, ventajas y nuevos elementos que nos ofrece esta versión de HTML.

Fotos: https://www.facebook.com/media/set/?set=a.601422266572455.1073741831.519082574806425&type=1&l=0930432fd8

Published in: Technology

Introducción HTML5 y CSS3

  1. 1. Néstor Ramírez Salas nramirez@businesstech.pe
  2. 2. AGENDA HTML5 CSS3 1. 2. 3. 4. 5. 6. 7. • • • • • • • • • • Qué es Novedades Ventajas Elementos para la web semántica Elementos para multimedia Elementos para formularios Enlaces de interés Bordes Sombras Transparencias Texto, transformaciones Texto, tratamientos Texto, 3D Fondos Pseudo elementos Selectores Filtros
  3. 3. AGENDA HTML5 1. 2. 3. 4. 5. 6. 7. Qué es Novedades Ventajas Elementos para la web semántica Elementos para multimedia Elementos para formularios Enlaces de interés
  4. 4. HTML5 1. QUÉ ES • 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 http://www.southmountain.com.ar/
  5. 5. AGENDA HTML5 1. 2. 3. 4. 5. 6. 7. Qué es Novedades Ventajas Elementos para la web semántica Elementos para multimedia Elementos para formularios Enlaces de interés
  6. 6. HTML5 2. NOVEDADES • 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 http://www.thisshell.com/
  7. 7. AGENDA HTML5 1. 2. 3. 4. 5. 6. 7. Qué es Novedades Ventajas Elementos para la web semántica Elementos para multimedia Elementos para formularios Enlaces de interés
  8. 8. HTML5 3. VENTAJAS • • • • 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 http://www.f-i.com/html5/basketball/ http://buzz.jaysalvat.com/demo/
  9. 9. ¿Cuántos han visto este mensaje?
  10. 10. ¿Y este mensaje?
  11. 11. Y por último… :(
  12. 12. AGENDA HTML5 1. 2. 3. 4. 5. 6. 7. Qué es Novedades Ventajas Elementos para la web semántica Elementos para multimedia Elementos para formularios Enlaces de interés
  13. 13. HTML5 4. WEB SEMÁNTICA • <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.
  14. 14. HTML5 4. WEB SEMÁNTICA • <header> • <nav> • <section> • <article> • <aside> • <footer>
  15. 15. HTML5 4. WEB SEMÁNTICA
  16. 16. HTML5 4. WEB SEMÁNTICA https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
  17. 17. AGENDA HTML5 1. 2. 3. 4. 5. 6. 7. Qué es Novedades Ventajas Elementos para la web semántica Elementos para multimedia Elementos para formularios Enlaces de interés
  18. 18. HTML5 5. MULTIMEDIA • <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  autoplay  loop : Muestra los controles estándar de HTML5 para audio. : Hace que el audio se reproduzca automáticamente. : Hace que el audio se repita automáticamente.
  19. 19. HTML5 5. MULTIMEDIA • <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
  20. 20. AGENDA HTML5 1. 2. 3. 4. 5. 6. 7. Qué es Novedades Ventajas Elementos para la web semántica Elementos para multimedia Elementos para formularios Enlaces de interés
  21. 21. HTML5 6. FORMULARIOS nuevos tipos < input> • Search • Url <input type="search"> <input type="url"> • Tel • Email <input type="tel" pattern="S{5,10}"> <input required type="email"> • Number • Color <input required type="number"> <input type="color">
  22. 22. HTML5 6. FORMULARIOS • Date <input type="date" name="fecha"> • Month <input type="month" name="mes"> • Week <input type="week" name="semana">
  23. 23. AGENDA HTML5 1. 2. 3. 4. 5. 6. 7. Qué es Novedades Ventajas Elementos para la web semántica Elementos para multimedia Elementos para formularios Enlaces de interés
  24. 24. HTML5 7. ENLACES DE INTERÉS • 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
  25. 25. ¿ AÚN TENEMOS TIEMPO PARA VER EJEMPLOS CSS3 ?
  26. 26. CSS3 • • • • • • Bordes Sombras Transparencias Texto, transformaciones Texto, tratamientos Texto, 3D • • • • Fondos Pseudo elementos Selectores Filtros
  27. 27. APUESTO QUE NO CONOCES AL ÚLTIMO PERSONAJE
  28. 28. EL ES…
  29. 29. Y EL ES…
  30. 30. Y ESTE SEÑOR ES…
  31. 31. ¿Y QUIÉN ES EL?
  32. 32. El creador de la WEB http://es.wikipedia.org/wiki/Tim_Berners-Lee http://evolutionofweb.appspot.com/
  33. 33. GRACIAS Néstor Ramírez Salas Drupal Front End Developer nramirez@businesstech.pe nramirezsalas@outlook.com.pe nramirezsalas nramirezsalas 994 736 607

×