HTML5+CSS3 01

+

HTML5+CSS3
el 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 mejoradas
SVG: 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.

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.

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.

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.

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.

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.

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.

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 navegadores
http://html5test.com/

Demos HTML5
http://html5demos.com/

Galería de sitios HTML5
http://html5gallery.com/

Colaboración de Desarrolladores
http://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+CSS3 01

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a HTML5+CSS3 01

Similar a HTML5+CSS3 01 (20)

Más de Jorge Cantú López

Más de Jorge Cantú López (20)

HTML5+CSS3 01