Html5

790 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
790
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
53
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. <SMACADEMY>Tecnólogo. Juan David Henao Londoño
  2. 2. ¿QUE ES HTML5?HTML5 (HyperText MarkupLanguage, versión 5) es laquinta revisión de del HTMLdonde se añade una nuevasemántica.Es la actualización deHTML, el lenguaje en el quees creada la web. HTML5también es un termino demarketing para agrupar lasnuevas tecnologías dedesarrollo de aplicacionesweb: HTML5, CSS3 y nuevascapacidades de Javascript.
  3. 3. ¿QUE NO ES HTML5?1. El salvador de los programadores2. La barita mágica de hacer sitios para dispositivos móviles3. La competencia de flash | Herramienta para hacer animaciones. Hacer sitio web en HTML5 que se vea en cualquier navegador, dispositivo, anim ado, en 3D y que gane premios por 5.000.000
  4. 4. ¿QUE SE MEJORÓ EN HTML5?• Evitar el uso abusivo de elementos DIV para estructurar una web en bloques.• Elementos que perfeccionan la estructuración estableciendo qué es cada sección, eliminando así DIV innecesarios.• Que la semántica de la estructura web sea más coherente y fácil de entender por otras personas y los navegadores• Los navegadores podrán darle más importancia al sitio según la sección, facilitándole la tarea a los buscadores, así como cualquier otra aplicación que interprete sitios web.
  5. 5. ELEMENTOS DE HTML5Es un DOCTYPE mucho más simplificado que XHTML (cuyas reglassiguen siendo usadas) y te permite usar todas las habilidades deHTML5 sin que nada de lo que ya tienes programado deje defuncionar.Las principales etiquetas HTML5 nuevas no tienen unarepresentación especial en pantalla. Todas se comportan como un<div> o un <span>. Pero cada una tiene un significado semánticosuperior a un simple div o span.
  6. 6. <SECTION></SECTION>Se utiliza para representar una sección “general” dentro de undocumento o aplicación, como un capítulo de un libro.Puede contener subsecciones y si lo acompañamos de h1-h6podemos estructurar mejor toda la página creando jerarquías delcontenido, algo mu favorable para el buen posicionamiento web.
  7. 7. <ASIDE></ASIDE>Representa una sección de la página que abarca un contenidosustancialmente relacionado con el contenido que lo rodea, por loque se le puede considerar un contenido independiente.Este elemento puede utilizarse para efectos tipográficos, barraslaterales, elementos publicitarios, para grupos de elementos de lanavegación, u otro contenido que se considere separado delcontenido principal de la página.
  8. 8. <ARTICLE></ARTICLE>Representa un componente de una página que consiste en unacomposición autónoma en un documento, página, aplicación, ositio web con la intención de que pueda ser reutilizado yrepetido.Podría utilizarse en los artículos de los foros, una revista o elartículo de periódico, una entrada de un blog, un comentarioescrito por un usuario, un widget interactivo o gadget, ocualquier otro artículo independiente de contenido.
  9. 9. <HEADER></HEADER> , <HGROUP>Elemento <header> representa un grupo de artículosintroductorios o de navegación.Muchos headers necesitan múltiples títulos, como un blog quetiene un titulo y un tagline explicando el blog. <hgroup> permitecolocar un h1, h2 y h3 dentro del header sin afectar elSEO, permitiendo usar otro h1 en el sitio.
  10. 10. <NAV></NAV> | <FOOTER></FOOTER>El elemento <nav> representa una sección de una página que esun link a otras páginas o a partes dentro de la página: una seccióncon links de navegación.El elemento <footer> representa el pié de una sección, coninformación acerca de la página/sección que poco tiene que vercon el contenido de la página, como el autor, el copyright o elaño.
  11. 11. <INPUT *>El elemento input adquiere granrelevancia.Input ya existía como la etiqueta parainsertar cajas de texto y botones. Ahoraes más poderosa, con la capacidad deinsertar cajas tipo "email" que seautovalidan, calendarios tipo"date", sliders, números, entre otras.
  12. 12. OTROS ELEMENTOS IMPORTANTES<video>Inserta video sin necesidad de plugins. Es muy fácil usarla, perocada navegador soporta codecs diferentes de video, lo que hacenecesario recodificar un video en múltiples codecs.<audio>Lo mismo que video, pero sin video. Puede usar múltiplesformatos, en especial mp3, pero también depende del navegador.
  13. 13. OTROS ELEMENTOS IMPOTRANTES<canvas>Un área de dibujo vectorial y de bitmaps con Javascript. Es un APIde dibujo entero para Javascript.<svg>Una etiqueta, igual que <img>, para insertar dibujos yanimaciones vectoriales al estilo de Flash. Todo basado en elestándar abierto SVG (Scalable Vector Graphics), derivado de XML.
  14. 14. OJO <DIV> NO ESTÁ MUERTO Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo usa las etiquetas semánticas de HTML5 donde sean necesarias.
  15. 15. ¿Cómo puedo empezar a utilizarHTML5 si existen navegadoresantiguos que no lo soportan?
  16. 16. ¿? LA PREGUNTA EN SÍ SE HAFORMULADO DE FORMA ERRÓNEAHTML5 no es una cosa grande como un todo, sino una colección deelementos individuales, por consiguiente lo que sí se podrá serádetectar si los navegadores soportan cada elemento por separado.
  17. 17. ¿CÓMO SE RENDERIZA UNA PÁGINA? Cuando los navegadores realizan el render de una página, construyen un “Modelo de Objeto de Documento” (Document Object Model - DOM), una colección de objetos que representan los elementos del HTML en la página. Cada elemento - <p>, <div>, <span> - es representado en el DOM por un objeto diferente.
  18. 18. 1 MODERNIZR, una biblioteca para detectar HTML5.Modernizr es una librería de JavaScript con licencia MIT de códigoabierto que detecta si son compatibles muchos elementos para HTML5 yCSS3. Dicha librería se irá actualizando y para utilizarla solo hay queincluir en <head><script> de tu página. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Intro HTML5</title> <script src="modernizr.min.js"></script> </head> <body> ... </body> </html>
  19. 19. ¿CÓMO FUNCIONA?Modernizr se ejecuta automáticamente, no es necesario llamar aninguna función tipo: modernizr_init(). Cuando se ejecuta, se crea unobjeto global llamado Modernizr, que contiene un set de propiedadesBoleanas para cada elemento que detecta. Por ejemplo si sunavegador soporta elementos canvas, la propiedad de la libreríamodernizr.canvas será “true”. Si tu navegador no soporta loselementos canvas, la propiedad Modernizr.canvas será “false”.if (Modernizr.canvas) {// a crear formas!!} else {// no hay soporte para canvas, los siento
  20. 20. 2 HTML5 Enabling ScriptPermite usar las etiquetas semánticas dentro de IE6, 7 y 8 comosi fueran divs normales, estilizables por CSS. Sin este script, lasetiquetas son ignoradas en IE y es imposible agregarles diseño aellas o cualquier elemento dentro de ellas.Para utilizarlo debes incluir esta línea en el HEAD de tudocumento.<!--[if lt IE 9]><scriptsrc=”http://HTML5shim.googlecode.com/svn/trunk/HTML5.js”></script><![endif]-->
  21. 21. 3 IE-CSS3Usando arcanas técnicas (DirectX y VML), este raro scriptpermite usar cosas como bordes redondeados y sombrassobre objetos de CSS3 en IE6, 7 y 8. Será magia negra?http://fetchak.com/ie-css3/Ver Ejemplo:
  22. 22. ¿QUÉ PUEDO USAR AHORA MISMO?El mejor sitio que puede responderte eso es CanIUSe.com1. Dondeencontrarás una lista de todas las capacidades de HTML5, CSS3 yel nuevo Javascript, junto a una tabla de compatibilidad. Sinembargo, no te asustes demasiado si ves muchos cuadros rojos.Recuerda los scripts que mencioné arriba como IE-CSS3 o HTML5Enabling Script. Gracias a ellos, muchos de esos rojos seconvierten en verdes.CanIUSe.com
  23. 23. ¿Como arrancar conHTML5 en diez minutos?
  24. 24. EXISTEN ATAJOS?No se puede entender HTML5 como una solatecnología, recordemos que es una estrategia de marketing parapromover una serie de tecnologías complementarias. Asimilartodas las posibilidades e introducirte requiere tiempo, aunque porsuerte existen atajos.http://es.html5boilerplate.com/
  25. 25. ¿QUIÉNES ESTÁN UTILIZANDO HTML5?• Twitter.com• m.twitter.com• vimeo.com/m/• m.youtube.com• gmail.com• scribd.com• facebook.com
  26. 26. ¿QUÉ VEREMOS EN L APARTE II?• <VIDEO>• <CANVAS>• <AUDIO>• <SVG>• NUEVAS CAPACIDADES DE CSS3
  27. 27. BIBLIOGRAFÍA• http://theproc.es/• http://www.cristalab.com• FrontDays
  28. 28. </GRACIAS>Tecnólogo. Juan David Henao Londoño

×