+HTML5+CSS3el presente del desarrollo webelectivo | escuela de diseño y multimedia | jorge cantú
<qué es HTML?>HyperText Markup Language(Lenguaje de Marcado de Hipertexto)•lenguaje predominante para la elaboración de pá...
El HTML se escribe en forma de                                             «etiquetas», rodeadas por corchetes            ...
<principales elementos HTML>definición del tipo de documento: <!DOCTYPE html>  Asocia una definición del tipo de documento...
<evolución del HTML>•   1991: La primera descripción de HTML publicado por Tim Berners-Lee•   1993: formalmente reconocido...
<evolución del HTML>•   2000-2004: El incremento de las conexiones en el ancho de banda es alto,    produciéndose una dema...
<HTML5>“HTML5 es el presente de la web y si no estásasimilando lo que está pasando ya eres parte de lavieja generación de ...
<HTML5>“HTML5 es una amplia gama de tecnologías webabiertas, incluyendo el marcado HTML, CSS , SVG,WOFF, entre otros.”Marc...
<funciones de HTML5>semánticaLa semántica es una de las funciones en las que más se diferencia laplataforma web de otras p...
<funciones de HTML5>almacenamiento offlineLas especificaciones de HTML5 y otras especificaciones relacionadaspresentan una...
<funciones de HTML5>acceso al dispositivoA partir de las APIs, las aplicaciones Web pueden generar experiencias siendocons...
<funciones de HTML5>conectividadUna conectividad más eficaz se traduce en una comunicación mejor, con chatsen tiempo real ...
<funciones de HTML5>multimediaEl audio y el vídeo se han convertido en uno de los componentes másimportantes de la Web, ta...
<funciones de HTML5>gráficosLa incorporación de tecnologías como el elemento Canvas, la especificaciónWebGL, las imágenes ...
<funciones de HTML5>rendimientoLas aplicaciones web pueden competir ahora en rendimiento con lasaplicaciones nativas y de ...
<funciones de HTML5>presentaciónCon la introducción de CSS3, es mas fácil crear aplicaciones y sitios atractivosy completo...
Evaluación de navegadoreshttp://html5test.com/Demos HTML5http://html5demos.com/Galería de sitios HTML5http://html5gallery....
<nuevas etiquetas HTML>•   <!DOCTYPE html>    Es un DOCTYPE mucho más simplificado y compativle con versiones anteriores• ...
+HTML5+CSS3el presente del desarrollo webelectivo | escuela de diseño y multimedia | jorge cantú
HTML5+CSS3 01
Upcoming SlideShare
Loading in …5
×

HTML5+CSS3 01

824 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
824
On SlideShare
0
From Embeds
0
Number of Embeds
97
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5+CSS3 01

  1. 1. +HTML5+CSS3el presente del desarrollo webelectivo | escuela de diseño y multimedia | jorge cantú
  2. 2. <qué es HTML?>HyperText Markup Language(Lenguaje de Marcado de Hipertexto)•lenguaje predominante para la elaboración de páginas web.•contiene información acerca de la estructura del texto o supresentación.•lenguaje de marcado ≠ lenguaje de programación.•no tiene funciones aritméticas o variables.
  3. 3. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (< >) para describir y traducir la estructura y la información en forma de texto.• El marcado estructural describe el propósito del texto. Ej: <h1>Texto</h1> establece un encabezamiento de primer nivel.• El marcado presentacional describe la apariencia del texto, sin importar su función. Ej: <b>texto</b> presenta el texto en «negritas».• El marcado semántico se centra en el significado de la información mas que en su presentación. Ej: <strong>texto</strong> refuerza la importancia del texto.• El marcado hipertextual enlaza partes del documento con otros documentos o con otras partes del mismo. Ej : <a href=“www.sitio.com”>Enlace</a>
  4. 4. <principales elementos HTML>definición del tipo de documento: <!DOCTYPE html> Asocia una definición del tipo de documento para ser correctamente interpretado por los navegadores.elemento raíz: <html></html> define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.cabecera: <head></head> contiene datos propios del documento que no se muestran directamente al usuario.cuerpo del documento: <body></body> define el contenido principal del documento html que se muestra en el navegador.división: <div></div> contenedor genérico para bloque de contenido.tramo: <span></span> permite agrupar varios elementos en línea seguidos dentro de un mismo bloque.
  5. 5. <evolución del HTML>• 1991: La primera descripción de HTML publicado por Tim Berners-Lee• 1993: formalmente reconocido por la IETF (Internet Engineering Task Force)• 1995: Se formaliza el HTML 2.0 y con ello la sintaxis y la mayoría de las reglas que se encuentran actualmente implementadas• 1997: HTML 3.2 durante mucho tiempo ignorado por las empresas que proveen navegadores, las cuales implementan sus propias etiquetas• 1998: Presionadas por la adopción de los estándar web, se otorga peso a las recomendaciones del W3C y se promocionan navegadores basados en dichos estándar• 1999: Se estabiliza la sintaxis y la estructura del HTML 4.0, convirtiéndose en el estándar para la web• 2000: Nace el XHTML 1.0 diseñado para adaptar el HTML a XML. Uso de DTD para renderizar como HTML según el navegador.
  6. 6. <evolución del HTML>• 2000-2004: El incremento de las conexiones en el ancho de banda es alto, produciéndose una demanda en el campo del desarrollo de las aplicaciones y la multimedia, donde tecnologías como Flash y Ajax hacen que se trabaje en la especificación XHTML 2.0• 2004: No satisfechos con la dirección de XHTML, Apple, Mozilla y Opera proponen evolucionar el estándar HTML 4.0. Aunque son rechazados, forman el WHATWG (Web Hypertext Application Technology Working Group)• 2005: Se publica el borrador de trabajo Web Applications 1.0• 2008: El W3C adopta el trabajo de WHATWG en un nuevo capítulo, publicando lo que sería el borrador de trabajo de HTML 5• 2011: «Última llamada» del W3C para el proyecto de trabajo de HTML 5. El proyecto XHTML 2.0 no es renovado• 2012: Borrador del W3C para HTML5 y pasa a convertirse en candidato a recomendación.• 2014: Se proyecta que HTML5 se convierta en una recomendación estable.
  7. 7. <HTML5>“HTML5 es el presente de la web y si no estásasimilando lo que está pasando ya eres parte de lavieja generación de desarrolladores.”Es la unión de tecnologías, agrupadas en un solo término. No es nadanuevo, sino unir esfuerzos que por primera vez tienen a toda laindustria empujando hacia una dirección y que identifican un cambioque ya sucedió en como debemos hacer la web hoy mismo.Entender HTML5 es entender que hoy nos conectamos desde teléfonosmóviles, tabletas, eBooks, netbooks, computadores y otra gama dedispositivos.
  8. 8. <HTML5>“HTML5 es una amplia gama de tecnologías webabiertas, incluyendo el marcado HTML, CSS , SVG,WOFF, entre otros.”Marcado HTML: incorporación de nuevas etiquetas y eliminación de antiguas.CSS: Hojas de Estilo en Cascada ver. 3 con capacidades gráficas mejoradasSVG: Scalable Vector Graphics es un estándar abierto de imagen vectorial quesoporta animación e interactividad.WOFF: Web Open Font Format. Soporte para distribución de tipografías enservidores web (OpenType o TrueType)APIs: Interfaces de Programacion de Aplicaciones . Integración de Canvas,Video, Audio, Microdata, Geolocation, Touch Events, etc.
  9. 9. <funciones de HTML5>semánticaLa semántica es una de las funciones en las que más se diferencia laplataforma web de otras plataformas de aplicaciones.Le da sentido a la estructura con un amplio conjunto de etiquetas, junto amicroformatos y microdatos, logrando mayores beneficios para losprogramas, desarrolladores y usuarios.
  10. 10. <funciones de HTML5>almacenamiento offlineLas especificaciones de HTML5 y otras especificaciones relacionadaspresentan una serie de funciones que permiten que las aplicaciones web sinconexión sean una realidad.Estas funciones también se pueden utilizar para mejorar el rendimiento deuna aplicación almacenando datos en la memoria caché o para conservar losdatos en diferentes sesiones del usuario y al volver a cargar y restablecerpáginas.
  11. 11. <funciones de HTML5>acceso al dispositivoA partir de las APIs, las aplicaciones Web pueden generar experiencias siendoconsientes de los dispositivos desde donde se ejecutan. Acceso de entrada deaudio y vídeo, a micrófonos y cámaras, a los datos locales, a los contactos yeventos, utilización de geolocalización, y la orientación o la inclinación deldispositivo.
  12. 12. <funciones de HTML5>conectividadUna conectividad más eficaz se traduce en una comunicación mejor, con chatsen tiempo real y una mayor velocidad en los juegos.Los Web Sockets y los eventos enviados por servidores están permitiendo quela eficacia en la transmisión de datos entre clientes y servidores alcance unosniveles sin precedentes.
  13. 13. <funciones de HTML5>multimediaEl audio y el vídeo se han convertido en uno de los componentes másimportantes de la Web, tal como ocurrió en el pasado con las imágenes.El nuevo etiquetado y las APIs permiten manipular los estados de red y losdatos cronológicos de los archivos, controlarlos y acceder a ellos.
  14. 14. <funciones de HTML5>gráficosLa incorporación de tecnologías como el elemento Canvas, la especificaciónWebGL, las imágenes SVG y CSS3, permiten crear impresionantes efectosvisuales renderizados de forma nativa en el navegador.
  15. 15. <funciones de HTML5>rendimientoLas aplicaciones web pueden competir ahora en rendimiento con lasaplicaciones nativas y de escritorio.Es posible utilizar una serie de tecnologías y técnicas para ofrecer másfacilidades a los usuarios y para que las aplicaciones y sitios tengan una mayorcapacidad de respuesta.
  16. 16. <funciones de HTML5>presentaciónCon la introducción de CSS3, es mas fácil crear aplicaciones y sitios atractivosy completos en HTML. Hay una gran cantidad de extensiones y tecnologíasnuevas para CSS3, entre las que se incluyen las transformaciones en 2D,transiciones, transformaciones en 3D y fuentes web.
  17. 17. Evaluación de navegadoreshttp://html5test.com/Demos HTML5http://html5demos.com/Galería de sitios HTML5http://html5gallery.com/Colaboración de Desarrolladoreshttp://www.html5rocks.com/es/
  18. 18. <nuevas etiquetas HTML>• <!DOCTYPE html> Es un DOCTYPE mucho más simplificado y compativle con versiones anteriores• Etiquetas semánticas <header> <hgroup> <nav> <section> <article> <aside> <footer>• <video> Inserta video sin necesidad de plugins. Es fácil usar, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs.• <audio> Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también depende del navegador.• <input *> Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, números, entre otras.• <canvas> Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.• <svg> Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash.
  19. 19. +HTML5+CSS3el presente del desarrollo webelectivo | escuela de diseño y multimedia | jorge cantú

×