Embed Size (px)
Citation preview
HTML5+CSS3el presente del desarrollo web
electivo | 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áginas web.•contiene información acerca de la estructura del texto o su presentación.
•lenguaje de marcado ≠ lenguaje de programación.•no tiene funciones aritméticas o variables.
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>
<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.
<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.
<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.
<HTML5>
“HTML5 es el presente de la web y si no estás asimilando lo que está pasando ya eres parte de la vieja generación de desarrolladores.”
Es la unión de tecnologías, agrupadas en un solo término. No es nada nuevo, sino unir esfuerzos que por primera vez tienen a toda la industria empujando hacia una dirección y que identifican un cambio que ya sucedió en como debemos hacer la web hoy mismo.
Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks, netbooks, computadores y otra gama de dispositivos.
<HTML5>
“HTML5 es una amplia gama de tecnologías web abiertas, 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 que soporta animación e interactividad.WOFF: Web Open Font Format. Soporte para distribución de tipografías en servidores web (OpenType o TrueType)APIs: Interfaces de Programacion de Aplicaciones . Integración de Canvas, Video, Audio, Microdata, Geolocation, Touch Events, etc.
<funciones de HTML5>semántica
La semántica es una de las funciones en las que más se diferencia la plataforma web de otras plataformas de aplicaciones.
Le da sentido a la estructura con un amplio conjunto de etiquetas, junto a microformatos y microdatos, logrando mayores beneficios para los programas, desarrolladores y usuarios.
<funciones de HTML5>almacenamiento offline
Las especificaciones de HTML5 y otras especificaciones relacionadas presentan una serie de funciones que permiten que las aplicaciones web sin conexión sean una realidad.
Estas funciones también se pueden utilizar para mejorar el rendimiento de una aplicación almacenando datos en la memoria caché o para conservar los datos en diferentes sesiones del usuario y al volver a cargar y restablecer páginas.
<funciones de HTML5>acceso al dispositivo
A partir de las APIs, las aplicaciones Web pueden generar experiencias siendo consientes de los dispositivos desde donde se ejecutan. Acceso de entrada de audio y vídeo, a micrófonos y cámaras, a los datos locales, a los contactos y eventos, utilización de geolocalización, y la orientación o la inclinación del dispositivo.
<funciones de HTML5>conectividad
Una conectividad más eficaz se traduce en una comunicación mejor, con chats en tiempo real y una mayor velocidad en los juegos.
Los Web Sockets y los eventos enviados por servidores están permitiendo que la eficacia en la transmisión de datos entre clientes y servidores alcance unos niveles sin precedentes.
<funciones de HTML5>multimedia
El audio y el vídeo se han convertido en uno de los componentes más importantes 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 los datos cronológicos de los archivos, controlarlos y acceder a ellos.
<funciones de HTML5>gráficos
La incorporación de tecnologías como el elemento Canvas, la especificación WebGL, las imágenes SVG y CSS3, permiten crear impresionantes efectos visuales renderizados de forma nativa en el navegador.
<funciones de HTML5>rendimiento
Las aplicaciones web pueden competir ahora en rendimiento con las aplicaciones nativas y de escritorio.
Es posible utilizar una serie de tecnologías y técnicas para ofrecer más facilidades a los usuarios y para que las aplicaciones y sitios tengan una mayor capacidad de respuesta.
<funciones de HTML5>presentación
Con la introducción de CSS3, es mas fácil crear aplicaciones y sitios atractivos y completos en HTML. Hay una gran cantidad de extensiones y tecnologías nuevas para CSS3, entre las que se incluyen las transformaciones en 2D, transiciones, transformaciones en 3D y fuentes web.
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/
<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.
HTML5+CSS3el presente del desarrollo web
electivo | escuela de diseño y multimedia | jorge cantú
+
