HTML

Lo básico de HTML5 (1 de 4)

La siguiente versión de HTML ha sido recibida con entusiasmo por algunos, aversión por otros y confusión / miedo por parte de todos los demás. Me encanta o lo odias, HTML 5 pronto definirá cómo construyes sitios web. Este es el primer artículo de una serie de cuatro partes que presentará HTML5 y sus características básicas, además de explicar las diferencias clave de HTML4.01 y XHTML 1.0 para que pueda comenzar a prepararse y preparar sus sitios para la transición. Durante la próxima semana nos enfocaremos en tres áreas principales:

1. Nuevos elementos
2. Cambios semánticos
3. Conseguir que funcione hoy

Este artículo presentará brevemente cada uno de estos temas para prepararlo para los artículos detallados que se presentarán a continuación.

APIs

Antes de profundizar en los temas mencionados anteriormente, quiero tomarme un minuto para ver una característica extremadamente importante que no veremos en su propio artículo dedicado: las nuevas API. HTML5 incluye varias API nuevas que están integradas con algunos de los nuevos elementos HTML5 (que veremos más adelante). Aquí está la lista completa directamente desde W3.org:

  • API de dibujo 2D que se puede utilizar con el nuevo elemento de lienzo.
  • API para la reproducción de video y audio que puede usarse con los nuevos elementos de video y audio.
  • Una API que permite las aplicaciones web sin conexión.
  • Una API que permite que una aplicación web se registre para ciertos protocolos o tipos de medios.
  • Edición de la API en combinación con un nuevo atributo contenteditable global.
  • Arrastrar y soltar API en combinación con un atributo que se puede arrastrar.
  • API que expone el historial y permite que las páginas se agreguen para evitar romper el botón de retroceso.
  • Mensajería entre documentos.

    • Como puede ver, el propósito principal de estas API es facilitar la creación de aplicaciones web. Observe que la tercera API habilita las aplicaciones web sin conexión. Esta es una excelente noticia para los usuarios y programadores, ya que permite el uso de aplicaciones ricas e impulsadas por Internet en un entorno fuera de línea. Puede esperar ver muchas de sus aplicaciones favoritas después de Gmail al introducir acceso sin conexión.

    Nuevos elementos en HTML5

    HTML5 introduce bastantes nuevos elementos. El artículo dos de esta serie examinará algunos de estos en detalle, pero por ahora aquí está la lista completa con descripciones breves (fuente: w3schools):


  •  Define contenido externo

  •  Define algún contenido aparte del artículo en el que se encuentra.
  • Define el sonido, como la música u otras transmisiones de audio.
  • Define gráficos, como gráficos u otras imágenes.
  • Define un botón de comando, como un botón de radio, una casilla de verificación o un botón
  • Define una lista de datos seleccionables. El datagrid se muestra como una lista de árbol
  • Define una lista de datos seleccionables. Utilice este elemento junto con el elemento de entrada, para hacer una lista desplegable para el valor de la entrada
  • Define un contenedor para la plantilla de datos. Este elemento debe tener elementos hijos para definir una plantilla: elementos

  •  Define los detalles de un elemento, que el usuario puede ver, y haga clic para ocultar
  • Define un diálogo, como una conversación.
  • Define contenido incrustado, como un complemento
  • Define una fuente para eventos enviados por un servidor.

  •  Se utiliza para agrupar algunos elementos.

  •  Define el pie de página de una sección o documento. Por lo general, contiene el nombre del autor, la fecha en que se escribió el documento y / o la información de contacto.

  •  Define el encabezado de una sección o documento.
  • Define el texto marcado. Usa la etiqueta si quieres resaltar partes de tu texto
  • Define una medida. Utilizado solo para mediciones con un valor mínimo y máximo conocido

  •  Define una sección de links enlaces de navegación.
  • Define un punto de nido en una placa de datos para elementos secundarios. Utilizado junto con los elementos y
  • Define diferentes tipos de salida, como la salida escrita por un script
  • Define el trabajo en progreso. Utilice el elemento progress para mostrar el progreso de una función que consume tiempo en JavaScript
  • Define las reglas para actualizar una placa de datos. Utilizado junto con los elementos y

  • Define secciones en un documento. Como capítulos, encabezados, pies de página o cualquier otra sección del documento.
  • Define recursos de medios para elementos de medios, tales como y
  • Define una hora o una fecha, o ambas
  • Define el video, como un clip de película u otras secuencias de video

    • Aunque no tendremos tiempo para repasar cada uno de estos en detalle, examinaremos algunos de los más importantes, como y.

    Cambios semanticos

    Esta es la parte que debe cambiar fundamentalmente la forma en que estructura sus sitios. En la lista anterior se incluyen seis nuevos elementos estructurales que ayudarán a dar consistencia al marco básico de los sitios en toda la web. Estos seis elementos son:

    1.

    2.

    3.

    4.

    5.

    6.

    Piense en estos como el reemplazo de muchos de los DIV que utiliza actualmente para estructurar su sitio. Así que en lugar de?

    ,? simplemente tendrás?

    .? Aviso que he incluido? Div clase? en lugar de? div id.? Esto se debe a que estos elementos son repetibles a lo largo de una página de la misma manera que las clases. Investigaremos esto más tarde esta semana en el artículo tres.

    Conseguir que HTML5 trabaje hoy

    No te emociones demasiado con este titular. Como sabe cualquier buen desarrollador web, todos los principales navegadores web aún difieren (algunos son peores que otros, ya sabes de quién estoy hablando) en cuanto a compatibilidad con HTML4.01 y XHTML 1.0. Ahora imagine lo que eso significa para un cambio tan grande y nuevo como HTML5. Aunque los mega desarrolladores como Google están impulsando la aceptación de HTML5, no será compatible en todos los ámbitos durante algún tiempo. Sin embargo, eso no significa que no debas comenzar a prepararte para el gran cambio de hoy, y ciertamente no significa que no haya trucos inteligentes que te permitan comenzar a jugar con HTML5 de inmediato. En el artículo cuatro, veremos cómo puede comenzar su viaje en HTML5 más temprano que tarde.

    Conclusión

    Este artículo introdujo brevemente los nuevos elementos y API incluidos en HTML5.Hablamos sobre cómo debería estar entusiasmado con los cambios que HTML5 traerá a las aplicaciones web del mañana. También probamos los cambios semánticos que se avecinan y la nueva estructura que nuestras páginas web deberían adoptar en el futuro. Finalmente, aprendimos que a pesar de que HTML5 no está del todo listo para las masas, todavía podemos poner nuestros dedos de desarrollador sucio en y comenzar a experimentar hoy. ¡Vuelve aquí con frecuencia en la próxima semana para ver en profundidad cada uno de estos temas!