HTML5 - El futuro del diseño web

3,071 views
2,980 views

Published on

HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web actuales. Algunos de ellos son técnicamente similares a las etiquetas que de usan hoy en diseño web, pero tienen un significado semántico, enrelación a donde se lo utilice. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos y que permiten desplegar contenidos multimediales sin necesidad de plugins adicionales.

Se presentan mejoras en el elemento , que brinda a diseñadores y desarrolladores herramientas novedosas para el diseño en 2d.

Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, cuyos efectos son manejados casi exclusivamente por el CSS que ya esta entrado en su versión 3 con importantes y significativas mejoras. También hay un renovado enfasis en la importancia de la programación de los distintos elementos que componen los bloques de diseño web (dcument objectmodel o DOM) para enriquecer tanto la experiecia del usuario como la usabilidad de los sitios y las aplicaciones web.

Published in: Design, Technology
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total views
3,071
On SlideShare
0
From Embeds
0
Number of Embeds
205
Actions
Shares
0
Downloads
134
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide

HTML5 - El futuro del diseño web

  1. 1. jueves 24 de junio de 2010
  2. 2. HTML5 El futuro del diseño web jueves 24 de junio de 2010
  3. 3. jueves 24 de junio de 2010
  4. 4. TIMELINE 1991 1994 1996 1997 1998 2000 HTML HTML 2 css1 + Javascript HTML4 CSS2 XHTML1 jueves 24 de junio de 2010
  5. 5. TIMELINE 2002 2005 2009 Diseño con CSS Ajax HTML5 jueves 24 de junio de 2010
  6. 6. HMTL5 HTML CSS JS APIS jueves 24 de junio de 2010
  7. 7. HIPERTEXT MARKUP LANGUAGE jueves 24 de junio de 2010
  8. 8. HIPERTEXT MARKUP LANGUAGE jueves 24 de junio de 2010
  9. 9. Ouch!! W3C: PRESTAR ATENCIÓN jueves 24 de junio de 2010
  10. 10. QUE PODEMOS HACER ñamñam!! ‣ Nuevos tags ‣ Offline data storage ‣ Semantic HTML ‣ Mejores forms ‣ Muchas APIS JS jueves 24 de junio de 2010 * sólo navegadores soportados
  11. 11. 1.6 MILLONES DE DE DEVELOPERS DE MACROMEDIA FLASH EN TODO EL MUNDO jueves 24 de junio de 2010
  12. 12. RESTO DEL MUNDO jueves 24 de junio de 2010
  13. 13. APPLE plop jueves 24 de junio de 2010
  14. 14. Apple no mató al flash el HTML5 lo hizo jueves 24 de junio de 2010
  15. 15. HMTL5 HTML CSS JS APIS jueves 24 de junio de 2010
  16. 16. HTML jueves 24 de junio de 2010
  17. 17. DOCTYPE jueves 24 de junio de 2010
  18. 18. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd"> <!DOCTYPE html> jueves 24 de junio de 2010
  19. 19. EL DOCTYPE epetaculaaaaar <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd"> <!DOCTYPE html> jueves 24 de junio de 2010
  20. 20. ESTRUCTURA jueves 24 de junio de 2010
  21. 21. ESTRUCTURA jueves 24 de junio de 2010
  22. 22. ESTRUCTURA jueves 24 de junio de 2010
  23. 23. ESTRUCTURA jueves 24 de junio de 2010
  24. 24. ¡HTML SEMANTICO! ¡No te lo puedo creer! jueves 24 de junio de 2010
  25. 25. <header> Contiene la información introductoria de cada página desde encabezados a tablas de contenidos completas jueves 24 de junio de 2010
  26. 26. <nav> Reservado para la sección que contiene los links a las demás páginas. No hace falta que estar en cada menu, sólo en el principal jueves 24 de junio de 2010
  27. 27. <section> Representa un documento genérico o poción de una aplicación. Actúa como DIV separando porciones del documento jueves 24 de junio de 2010
  28. 28. <article> Una porción de una página que es un contenido en sí. Puede ser una noticia, un post de un blog, una entrada en un foro o un artículo en un website de e-commerce jueves 24 de junio de 2010
  29. 29. <aside> Representa contenido relacionado a la parte principal del documento. Se lo verá generalmente en sidebars como contenedor de “artículos relacionados”,“lista de links”. Puede usarse como Blockquote también jueves 24 de junio de 2010
  30. 30. <footer> Sirve para cerrar no sólo la página sino para culminar bloques de contenido también.Va a ser posible que lo encontremos varias veces en una página jueves 24 de junio de 2010
  31. 31. jueves 24 de junio de 2010
  32. 32. NOVEDADES jueves 24 de junio de 2010
  33. 33. Nuevos forms <input type='color' /> <input type='number' /> <input type='email' /> <input type='tel' /> Ahora la validación de datos de un formulario es más precisa jueves 24 de junio de 2010
  34. 34. Audio / Video <audio src="sound.mp3" controls></audio> document.getElementById("audio").muted = false; <video src='movie.mp4' autoplay controls></video> document.getElementById("video").play(); Con dos etiquetas muy simples podemos reproducir audio y video en nuestos sitios web sin necesidad de un reproductor externo jueves 24 de junio de 2010
  35. 35. Audio / Video Juan Adobe jueves 24 de junio de 2010
  36. 36. Canvas <canvas id="canvas" width="838" height="220"></canvas> Dibujo a base de código. Desarrollado inicialmente por apple para el webkit. Actualmente funcionando en el Dashboard del OSX. Actualmente adoptado por otros navegadores modernos jueves 24 de junio de 2010
  37. 37. SVG Similar al Canvas. Dibujo procedural vectorial. Actualmente soportado por un gran numero de navegadores. jueves 24 de junio de 2010
  38. 38. TRANSICIÓN DEL XHTML AL HTML5 jueves 24 de junio de 2010
  39. 39. <input type="text" id="name"> <input type="text" id="name"/> jueves 24 de junio de 2010
  40. 40. HMTL5 HTML CSS JS APIS jueves 24 de junio de 2010
  41. 41. JS APIS jueves 24 de junio de 2010
  42. 42. POWER jueves 24 de junio de 2010
  43. 43. API Application Programming Interface Conjunto de reglas de una applicación diseñadas para interactuar con otra u otras jueves 24 de junio de 2010
  44. 44. API Application Programming Interface POWER Conjunto de reglas de una applicación diseñadas para interactuar con otra u otras jueves 24 de junio de 2010
  45. 45. API HTML JS jueves 24 de junio de 2010
  46. 46. Selectores var el = document.getElementById('section1'); el.focus(); Eh! buscame el elemento “section1” y resaltamélo padre jueves 24 de junio de 2010
  47. 47. Selectores var els = document.querySelectorAll("table.test > tr > td"); Che, buscaméla a la celdita de la tabla “test” querí jueves 24 de junio de 2010
  48. 48. Web Storage Ahora es posible guardar información sin disponer de una base de datos. jueves 24 de junio de 2010
  49. 49. Drag and Drop Los navegadores imitan cada vez más a las aplicaciones de escritorio jueves 24 de junio de 2010
  50. 50. Geolocación Con sólo apretar un botón el navegador puede determinar tu ubicación por tu IP. jueves 24 de junio de 2010
  51. 51. HMTL5 HTML CSS JS APIS jueves 24 de junio de 2010
  52. 52. CSS jueves 24 de junio de 2010
  53. 53. Selectores .row:nth-child(even) {background: #dde;} Ahora puedo hacer filas de tablas con distintos colores, entre otras cosas. jueves 24 de junio de 2010
  54. 54. Selectores :not(.box) {color: #00c;} Negation: permite hacer selecciones negativas jueves 24 de junio de 2010
  55. 55. Fuentes @font-face {font-family: 'LeagueGothic'; src: url(LeagueGothic.otf);} Se pueden incrustar tipografías que no sean necesariamente las de sistemas. Diseñadores! atentos! jueves 24 de junio de 2010
  56. 56. Texto div {text-overflow: ellipsis;} Con esto podemos ajustar el texto a un contenedor más inteligentemente jueves 24 de junio de 2010
  57. 57. Texto -webkit-column-count: También podemos poner el texto en columnas! jueves 24 de junio de 2010
  58. 58. QUE MAS? ‣ Filete del texto ‣ Opacidad ‣ Modelo de Color HSLA ‣ Esquinas redondeadas ‣ Gradientes ‣ Sombras ‣ Multiples fondos simultáneos ‣ ANIMACIONES jueves 24 de junio de 2010
  59. 59. QUE MAS? CONTENIDO A MEDIDA jueves 24 de junio de 2010
  60. 60. ¿FALTA MUCHO? jueves 24 de junio de 2010
  61. 61. SAFARI 4 WINDOWS jueves 24 de junio de 2010
  62. 62. FIREFOX 3,5 WINDOWS jueves 24 de junio de 2010
  63. 63. CHROME WINDOWS jueves 24 de junio de 2010
  64. 64. OPERA 10 WINDOWS jueves 24 de junio de 2010
  65. 65. INTERNET EXPLORER 6, 7 & 8 jueves 24 de junio de 2010
  66. 66. INTERNET EXPLORER 6, 7 & 8 jueves 24 de junio de 2010
  67. 67. A VER! HTTP://SLIDES.HTML5ROCKS.COM/ jueves 24 de junio de 2010
  68. 68. YO YA EMPECÉ. ¿VOS? jueves 24 de junio de 2010
  69. 69. ¡VAMOS BRASIL QUE GANAMOS! jueves 24 de junio de 2010
  70. 70. ¡VAMOS ARGENTINA QUE GANAMOS! jueves 24 de junio de 2010
  71. 71. ¡CHAS GRACIAS! jueves 24 de junio de 2010

×