HTML5 - Básico - Intermedio - Avanzado

Conceptos Intermedios...

ETIQUETAS MENOS DESTACABLES...

Un poco de historia...

NUEVAS ETIQUETAS

PROGRESS: Representa el grado de progreso de una tarea.

METER: Define una medida escalar, dentro de un rango conocido.

BDI: Define una parte del texto que debe ser entendido aparte de la línea de contenido que se esté escibiendo.

MENU: una lista de opciones que formen parte de un menú.

COMMAND: Uno de los elementos o botones de un menú de opciones.

DETAILS: Detalles o información suplementaria que se puede ver u ocultar por el usuario.

SUMMARY: Encabezamiento para detalles especificados en DETAILS.

FIGURE: es un contenido que ilustre el artículo, como fotos, diagramas, ilustraciones, etc.

FIGCAPTION: El pie o explicación de un FIGURE.

HGROUP: Un grupo de encabezamientos, útil cuando se tiene diversos bloques de encabezamientos del mismo nivel H1, H2...

MARK: Un texto o información que es remarcable.

TIME: Para escribir una fecha, una hora o ambas.

WBR: Define un posible salto de línea.

FORMULARIOS

ETIQUETAS ESTRUCTURALES

2006: W3C da por muerto el lenguaje HTML, y comienza a trabajar en el nuevo XHTML 2 que resultaba un lenguaje basado en un XML más puro...

AHORA

ANTES

2009: Muere XHTML 2.0

1997: W3C Publica HTML 3.2

Incluye funciones nuevas como applets de Java y texto que fluye alrededor de las imágenes.

...pero no era compatible con anteriores versiones de HTML, ni con las páginas ya existentes.

¿Qué es HTML?

2004: Las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG

(Web Hypertext Application Technology Working Group).

HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>).

2001: W3C publica la especificación de XHTML 1.1.

Define un encabezado de página, por lo general contiene el logotipo y el nombre del sitio y posiblemente un menú horizontal. No es necesario colocarlo al principio de la página.

Puede contener:

- banners publicitarios en posición destacado

- iconos de acceso directo

Mejoras a destacar: Hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

2000: W3C publica la especificación de XHTML 1.0 (la "X" es de eXtensible). No se incorporan nuevos elementos, pero se modifica la forma de escribirlos, según el lenguaje XML, mucho más estricto.

1995: HTML 2.0 se convierte en la primera especificación, que incluye el tag img.

1993: El organismo IETF (Internet Engineering Task Force) realiza la primera propuesta oficial para convertir HTML en un estándar.

1991: Tim, redacta el primer documento formal con la descripción de HTML (HyperText Markup Language), que contaba sólo con unos 20 tags (etiquetas).

Define una sección que contiene enlaces de navegación.

Puede haber varios en un mismo documento:

Por ej.: Una página con enlaces internos, como una tabla de contenido y otro con los enlaces de navegación del sitio web.

Tiene por objeto identificar porciones significativas del contenido de la página. Es de alguna forma análoga a dividir un libro en capítulos. Agrupa contenido semánticamente.

HTML

Representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido.

MULTIMEDIA

Representa una sección de la página que abarca un contenido tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente.

1999: El W3C publica la última especificación oficial siendo el HTML 4.01.

1980: Físico Tim Berners-Lee trabajador de CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.

1998: W3C Publica HTML 4.0

2007: WHATWG publica un primer borrador (no oficial) de lo que será HTML 5.0, a su vez, W3C decide retomar la actividad estandarizadora de HTML.

A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.

Representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.

2008: WHATWG presenta su primer borrador oficial de HTML5

Una nueva forma de incrustar vídeos y audios de forma nativa:

En 2012, la especificación tendrá el status de "Candidate Recommendation".

autoplay: reproducción automática.

controls: muestra los controles de vídeo nativos de cada navegador. No aparecen por defecto.

poster: imagen de previsualización. Si no se especifica, el navegador coge el primer fotograma.

width, height: si no se especifican, se toman las del poster; si no, serán 300px por 150px.

loop: reproduce el vídeo en bucle.

preload: precarga el vídeo.

src: indica la fuente del vídeo.

<audio src="cancion.???" > </audio>

<video src="video.???" > </video>

ATRIBUTOS

El WHATWG y el W3C siguen trabajando en el HTML5 en paralelo, pero con métodos distintos.

Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3).

Probablemente, no será "Proposed Recommendation" hasta 2022.

Existen multitud de codecs de vídeo, y no todos los navegadores soportan los mismos:

H.264 o MPEG-4 (mp4) y MPEG-1 (mp3): Codec de alta calidad, propietario, que era un standard de facto. Es soportado por Chrome, Safari, IE, y prácticamente todos oos reproductores comerciales.

Ogg Theora (ogg, ogv) y Ogg Vorbis (ogg): Codec de menor calidad, libre. Soportado por Chrome, Firefox y Opera.

VP8 (WebM): Codec de alta calidad, comprado por Google y liberado, es el llamado a acabar con la guerra. Actualmente lo soportan Chrome, Firefox 4, Opera (y Safari instalando los códecs, e IE9 con un plugin).

En 1991, Tim Berners Lee inventa el HyperText Markup Language, que contaba sólo con unos 20 tags.

HTML 2.0 se convierte en la primera especificación, que incluye el tag img.

En 1999, el W3C publica la especificación de HTML 4.01.

En 2000, se publica la especificación de XHTML 1.0 (la "X" es de eXtensible). No se incorporan nuevos elementos, pero se modifica la forma de escribirlos, según el lenguaje XML, mucho más estricto.

En 2001, se publica la especificación de XHTML 1.1.

Conceptos Avanzados

<style>

<meta>

<link>

<title>

<script>

<head>

<html>

Conceptos Básicos...

<tr>

<td>

ETIQUETAS:

<a>

<body>

<table>

<h1> ... <h6>

<div>

<i>

<s>

<li><ol><ul>

<b>

<u>

<img>

ELEMENTOS:

- Los elementos son la estructura básica de HTML.

- Tienen dos propiedades básicas: atributos y contenido.

- Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML.

- Un elemento generalmente tiene una etiqueta de inicio.

- Los atributos del elemento están contenidos en la etiqueta

de inicio y el contenido está ubicado entre las dos etiquetas.

ejemplo:

<nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>

CANVAS

Canvas permite la generación de gráficos dinámicamente por medio del scripting.

DRAG AND DROP

XHTML 1.1

HTML 5

vs

<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta charset=UTF-8>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

Es un método que nos ofrecen los navegadores para guardar pares de valores llave/valor de manera sencilla y dándonos unos 5 Mb. Al igual que las cookies, ésta información no desaparece si uno navega fuera de la página.

Al contrario de las cookies, esta información queda guardada en el ordenador del cliente y no viaja con cada petición. Soportado por prácticamente todos los navegadores, excepto IE6, IE7 y Safari 3.2.

<- MAYOR SIMPLICIDAD EN LAS DECLARACIONES ->

LocalStorage

<script src=jquery.js></script>

<script type="text/javascript" src="jquery.js"></script>

WEB STORAGE

Web SQL Database

Base de datos SQL que la mayoría de los navegadores la implementan usando SQLite, cuyo dialecto de SQL es bastante completo.

· Muy interesante para aplicaciones web.

· Soporte en Chrome, Safari, Opera, iOS y Android.

· El desarrollo se ha abandonado y podría desaparecer de la especificación.

· Parece que en el futuro será sustituido por IndexedDB.

<link rel="stylesheet" href="styles.css">

<link rel="stylesheet" type="text/css" href="styles.css" />

ETIQUETAS OBSOLETAS

REDEFINICION DE ETIQUETAS

<applet> <big> <center> <font> <frame> <blink> <marquee>

<ol>: se añaden los atributos start y reversed.

<cite>: sólo se puede utilizar para marcar la obra, no al autor. Rompe la retrocompatibilidad con anteriores versiones de HTML.

<em, i>: em denota énfasis, mientras que i marca una cursiva con fines estilísticos, por ejemplo un extranjerismo.

<strong, b>: strong denota importancia, mientras que b marca una negrita con fines estilísticos, sin una importancia especial.

<small>: para marcar la "letra pequeña", por ejemplo copyrights, aspectos legales, atribuciones...

WEBWORKERS

GEOLOCALIZACIÓN

- Una API para lanzar procesos en segundo plano.

- El usuario puede seguir haciendo otras cosas.

- Pueden hacer peticiones XMLHttpRequest.

- Soporte en Firefox, Safari y Chrome.

Fin de presentación CONCEPTOS BÁSICOS.

Muchas gracias por vuestra atención...