HTML5 ya es un estándar

Ayer, 28 de octubre de 2014, el W3C publicó HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014, la recomendación final de HTML5.

¿Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha cambiado, ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportaran mágicamente. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.

El W3C lo anunció con la nota de prensa HTML5 is a W3C Recommendation:

The HTML Working Group today published HTML5 as W3C Recommendation. This specification defines the fifth major revision of the Hypertext Markup Language (HTML), the format used to build Web pages and applications, and the cornerstone of the Open Web Platform.
“Today we think nothing of watching video and audio natively in the browser, and nothing of running a browser on a phone,” said Tim Berners-Lee, W3C Director. “We expect to be able to share photos, shop, read the news, and look up information anywhere, on any device. Though they remain invisible to most users, HTML5 and the Open Web Platform are driving these growing user expectations.”
HTML5 brings to the Web video and audio tracks without needing plugins; programmatic access to a resolution-dependent bitmap canvas, which is useful for rendering graphs, game graphics, or other visual images on the fly; native support for scalable vector graphics (SVG) and math (MathML); annotations important for East Asian typography (Ruby); features to enable accessibility of rich applications; and much more.
The HTML5 test suite, which includes over 100,000 tests and continues to grow, is strengthening browser interoperability. Learn more about the Test the Web Forward community effort.
With today’s publication of the Recommendation, software implementers benefit from Royalty-Free licensing commitments from over sixty companies under W3C’s Patent Policy. Enabling implementers to use Web technology without payment of royalties is critical to making the Web a platform for innovation.

HTML5: ¿Qué es HTML5?

[kml_flashembed movie=”http://www.youtube.com/v/1hR7EtD6Bns” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de la Universidad de Alicante, y en este videotutorial vamos a ver qué es HTML5.

Hoy en día todo el mundo conoce las WWW, la World Wide Web, la Web, el invento que más ha cambiado nuestras vidas en los últimos 15 años. La Web es un sistema de distribución de información basado en hipertexto e hipermedia accesible a través de Internet.

Un elemento esencial de la Web es HTML, el lenguaje de marcado que se emplea para crear las páginas web. HTML permite describir la estructura y el contenido de una página web, principalmente texto, aunque también permite incluir otros objetos como imágenes y vídeos.

HTML5 es la quinta y última versión, por ahora, del lenguaje de etiquetado HTML. Sin embargo, como veremos más adelante, HTML5 no es sólo eso, es algo más.

HTML es un estándar de facto desarrollado por el World Wide Web Consortium, un consorcio internacional que produce recomendaciones para la World Wide Web. El desarrollo del lenguaje de marcado HTML ha ido parejo al desarrollo del World Wide Web Consortium, que fue fundado en 1994.

Desde la publicación de la primera página web en diciembre de 1990, el lenguaje HTML ha ido mejorando con nuevas versiones. En noviembre de 1995 se publicó HTML 2.0, en enero de 1997 HTML 3.2, en diciembre de 1997 apareció HTML 4, y en enero de 2000 se publicó XHTML 1.0, una reformulación de HTML 4 utilizando XML. Finalmente, a mediados de 2007, el World Wide Web Consortium comenzó a trabajar en HTML5, versión que está actualmente en desarrollo y que se espera que se termine en 2014.

Pero las páginas web no se desarrollan únicamente con el lenguaje de marcado HTML. También se emplean otras tecnologías como las hojas de estilo en cascada, la jerarquía de objetos DOM y el lenguaje interpretado JavaScript.

El uso combinado de estas cuatro tecnologías se conoce como DHTML, el HTML dinámico que permite crear sitios web interactivos.

Además del HTML dinámico existen otras tecnologías, como el API de programación XHR, XMLHttpRequest, el metalenguaje XML y el formato de intercambio de datos JSON. Todo ello se conoce como AJAX, una técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecutan en el navegador.

Desde hace un par de años, a AJAX se le han unido una serie de nuevas tecnologías. Estas tecnologías están en desarrollo y en algunos casos existen algunas alternativas que realizan la misma función. A todas ellas se las conoce como HTML5, aunque lo más correcto sería llamarlas “la familia de tecnologías HTML5”.

Veamos qué nos ofrece cada una de ellas.

HTML5 es el nuevo lenguaje de marcado que se ofrece con dos sintaxis, sintaxis de HTML y sintaxis de XHTML. Como he dicho antes, se espera que en 2014 se publique la versión final, ya que lo que tenemos ahora mismo es un borrador. El lenguaje de marcado HTML5 define nuevas etiquetas y atributos que añaden una mayor capacidad semántica al lenguaje.

Una de las nuevas tecnologías de la familia HTML5 es el canvas, que tiene asociada una nueva etiqueta HTML. El canvas o lienzo permite definir un área dentro de una página web en la que se puede dibujar mediante un API para JavaScript. Las posibilidades que ofrece esta tecnología son enormes. Por ejemplo, permite el desarrollo de juegos online, ya no es necesario el uso de Flash, o permite crear aplicaciones de dibujo como esta que vemos en esta imagen.

Otra de las tecnologías de HTML5 es SVG, un lenguaje de etiquetas basado en XML que permite crear gráficos vectoriales. Con SVG se pueden crear gráficos con un lenguaje similar a HTML.

Otra de las tecnologías de HTML5 es el API de geolocalización para JavaScript que permite obtener la localización del usuario, siempre que el dispositivo que utilice ofrezca esa información, y siempre que el usuario lo permita.

La tecnología de caché permite indicar los recursos de una página web o de una aplicación web que se desea que se almacenen de forma local. De esta forma mejora el rendimiento y además permite descargar todos los contenidos necesarios y trabajar en local, mientras que la tecnología de bases de datos es un API que ofrece la posibilidad de almacenar información en local en el navegador mediante una base de datos SQLLite. Con esta tecnología se pueden realizar aplicaciones como esta, donde el usuario puede crear notas persistentes que conservan la posición y la información, aunque se abandone la página web.

Por último, los “web workers” es otra API para JavaScript que permite crear múltiples hilos de ejecución que se ejecutan en paralelo.

Ahora bien, de todas estas tecnologías, ¿cuáles podemos utilizar hoy en día? Es difícil responder esta pregunta porque existen múltiples navegadores con múltiples versiones, cada uno con un nivel de soporte diferente, pero hay algunos sitios web que nos pueden ayudar.

Por ejemplo, el sitio web “When can I use”, ofrece tablas de compatibilidad de HTML5, CSS3, SVG y otras características en diferentes navegadores y diferentes plataformas.

El sitio web “findmebyIP”, ofrece los niveles de compatibilidad de diferentes navegadores en Windows y Macintosh. Este mismo sitio web también nos permite conocer el nivel de compatibilidad de nuestro navegador, ya que lo detecta automáticamente y nos muestra las características de HTML5 que admite.

El sitio web “The HTML5 Test” también permite conocer el nivel de soporte de nuestro navegador y de otros navegadores. Se diferencia de los anteriores porque ofrece una puntuación, lo cual hace que las comparaciones entre navegadores sea mucho más sencilla.

Por último, si quieres aprender más cosas de HTML5 te recomiendo el sitio web “HTML5 Rocks”, desarrollado por Google. En él encontrarás numerosos ejemplos y tutoriales que te mostrarán las fantásticas posibilidades de HTML5.

Y con esto finaliza este videotutorial sobre las tecnologías que forman la familia HTML5.
Si necesitas más información o quieres contactar conmigo, en la páginas web http://desarrolloweb.dlsi.ua.es/ podrás encontrar más información sobre el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@ua.es.

CSS: definir el estilo de una lista (2)

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/hz731_o6gcU” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar las principales propiedades de CSS que se existen para definir el estilo del texto.

En la primera parte de este vídeo, vimos la principales propiedades que comienzan con el prefijo font: font-family, font-size, font-weight, font-style y font-variant.
En este vídeo vamos a ver unas propiedades de CSS que comienzan con el prefijo text-.

En concreto, vamos a ver las propiedades text-align, text-indent, text-decoration y text-transform.

La propiedad text-align se emplea para definir la justificación o alineación del texto.

Esta propiedad puede tomar los valores left, a la izquierda, right, a la derecha, center, centrado y justify, justificado, es decir alineado a la izquierda y a la derecha a la vez.

En este ejemplo podemos ver el mismo párrafo alineado a la izquierda y a la derecha.

Y en este otro ejemplo, el primer párrafo está centrado y el segundo justificado, está alineado a la izquierda y a la derecha.

La propiedad text-indent especifica la sangría de la primera línea de un bloque de texto.

La sangría se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size.

En este ejemplo, el primer párrafo no posee sangría en la primera línea, mientras que en el segundo se ha definido una sangría de un 1cm.

En este otro ejemplo, la primera línea posee una sangría relativa del 50%, el 50% del ancho disponible para mostrar el texto.

La propiedad text-decoration se emplea para definir algunos adornos que se pueden añadir al texto.

Esta propiedad puede tomar los valores none, ninguno, underline, subrayado, overline, para el subrayado por la parte superior, line-through para el tachado y blink para el parpadeo.

En este ejemplo se muestra el uso de la propiedad text-decoration con cuatro valores: underline, overline, line-through y blink.

Por último, la propiedad text-transform se emplea para convertir en mayúsculas o minúsculas un texto.

Esta propiedad puede tomar los valores capitalize, uppercase, lowercase y none.

En este ejemplo se muestra el uso de la propiedad text-decoration con los valores capitalize, uppercase y lowercase.

El valor capitalize coloca en mayúsculas la primera letra de cada palabra, mientras que uppercase transforma a mayúsculas todo el texto y lowercase a minúsculas.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

CSS: definir el estilo de una lista (1)

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/ixgxusIl66I” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo se define con CSS el estilo del texto.

En CSS existen muchas propiedades para definir el estilo del texto, en este vídeo vamos a ver el conjunto de propiedades que comienzan con el prefijo font-.

En la recomendación de CSS1, que se publicó en diciembre de 1996, se definían las propiedades font-family, font-style, font-variant, font-weight y font-size, que son las que vamos a ver en este vídeo.

La propiedad font es un resumen de las anteriores y permite modificar las anteriores con una sola regla.

CSS3 es muy complejo y se ha dividido en varios módulos.

Existe un módulo específico para el tipo de letra llamado “CSS Fonts Module Level 3”, que añade propiedades nuevas. La mayoría de los navegadores actuales no admiten estas propiedades. Además, estas propiedades son muy específicas y es muy improbable que las vayas a utilizar alguna vez.

Las nuevas propiedades de CSS3 permiten un ajuste tipográfico muy fino y tienen sentido en la actualidad porque la resolución de los dispositivos de visualización ha aumentado considerablemente.

Por ejemplo, compárese la resolución VGA de 640×480, tan común hace 15 años, con la resolución FullHD 1920×1080 que se ha convertido en el estándar actual.

Las propiedades que vamos a ver a continuación son font-family, font-size, font-weight, font-style y font-variant.

Font-family permite modificar la familia tipográfica, el tipo de letra.

Existen miles y miles de familias tipográficas. Como existen tantas familias tipográficas, se han propuesto varias clasificaciones para poder ordenarlas y compararlas.

Una de las más conocidas es la clasificación tipográfica de Francis Thibaudeau, que divide las familias tipográficas en tres grupos: con serifas, sin serifas y otras tipografías.

Las serifas son las terminaciones, las decoraciones o adornos que aparecen en los extremos de algunas letras, como en este ejemplo la letra s, la r, la i y la f.

Estas terminaciones proporcionan un aspecto más elegante y clásico y facilitan la lectura en los documentos impresos.

En los tipos de letra sin serifas estas terminaciones no aparecen. Los tipos de letra sin serifas también se conocen en español como de “palo seco”.

A la hora de especificar la familia tipográfica que se quiere emplear se puede indicar una lista de tipos de letra.

Por ejemplo, en este código, para el elemento h1, se ha indicado el tipo de letra Times New Roman y el tipo Georgia. Y para el elemento p, un párrafo, el tipo de letra Arial y el tipo Helvetica.

Un navegador web intentará emplear el primer tipo de letra definido. Si no puede utilizarlo, pasará al segundo tipo de letra, después al tercero y así sucesivamente hasta el final. Si ninguno de los tipos de letra definidos puede ser utilizado, el navegador utilizará un tipo de letra por defecto. Pero quizás el tipo de letra no se ajuste a nuestro diseño.

Para solventar este problema, se recomienda indicar siempre un tipo genérico al final de la lista de tipos de letra.

Las familias o tipos genéricos son serif y sans-serif para los tipos de letra con serifas y sin serifas.

cursive para tipografías que simulan la escritura a mano, como por ejemplo Lucida Handwriting.

fantasy para tipografías exageradas que se emplean en anuncios y pósteres.

Y monospace para las tipografías en las que cada carácter ocupa exactamente la misma cantidad de espacio horizontal.

Font-size especifica el tamaño de la letra, que se puede especificar de muchas formas.

Existen cuatro formas, de forma absoluta, relativa, mediante un tamaño especificado con distintas unidades de medida y mediante un porcentaje.

Font-weight permite seleccionar el peso del tipo de letra.

El peso es el grosor de los caracteres.

La propiedad font-weight puede tomar todos estos valores, pero normalmente sólo se emplean normal y bold.

La razón de ello es que, normalmente, una familia tipográfica no incluye todos los pesos existentes, sólo unos pocos. Por tanto, cuando se emplea una familia tipográfica conviene conocer sus características para saber lo que se puede usar.

Font-style permite seleccionar el estilo de la fuente, del tipo de letra.

La propiedad font-style puede tomar estos tres valores: normal, italic y oblique.

En esta imagen se representan dos letras con los tipos de letra Palatino y Baskerville.

El estilo oblicuo suele ser el estilo de letra normal que se ha inclinado, como si fuera una figura geométrica que ha sufrido una transformación.

Sin embargo, el estilo cursiva, italic, es un diseño específico de las letras con una inclinación y una forma distinta a la normal.

La última propiedad, font-variant, permite seleccionar variaciones del tipo de letra.

Esta propiedad puede tomar dos valores, normal y small-caps.

Small-caps en español es el tipo de letra versalita, letras mayúsculas cuyo tamaño es similar al de las minúsculas.

Antes de terminar, te invito a que utilices este configurador de tipos de letra que puedes encontrar en el Mozilla Developer Network.

Por ejemplo, aquí he elegido como variante versalitas, small-caps.

El tamaño lo he fijado a 24 pixels.

Y la familia tipográfica seleccionada es serif.

Este es un ejemplo de texto con el tipo de letra seleccionado.

En este otro ejemplo, he elegido el estilo cursiva, italic.

El peso es negrita y el tamaño 24 pixels.

La familia tipográfica seleccionada es sans-serif.

Por último, este es un ejemplo de texto con el tipo de letra seleccionado.

Ahora te invito a que veas la segunda parte de este vídeo.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

El juego de caracteres ISO 8859

El juego de caracteres es la pesadilla de los informáticos. Y aunque aún exista solución, usar Unicode y alguna de sus representaciones como UTF-8, a veces no se puede emplear porque se trabaja con un sistema heredado que no lo soporta. En esos casos hay que usar un juego de caracteres particular como ISO 8859.

ISO 8859 tiene diferentes versiones y variantes, lo cual puede complicar su uso. En ISO/IEC 8859 se muestra una tabla con las 16 variantes que existen hasta el momento.

iso-8859

HTML: listas

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/V2ImdQdPqNE” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo se escriben las listas en HTML.

El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas.

Las listas no ordenadas, las listas ordenadas y las listas de descripción.

Cada una de estas listas se crea con una etiqueta específica de HTML: <ul> para la lista no ordenada, <ol> para la lista ordenada y <dl> para la lista de descripción.

Los elementos de las listas se definen de la siguiente forma.
Para la lista no ordenada y la lista ordenada se emplea el elemento <li>.
Para la lista de descripción se emplean los elementos <dt> y <dd>.
Vamos a verlo con detalle.

Ul es el acrónimo de unordered list, lista no ordenada.
En una lista no ordenada, el orden de aparición de los elementos no es importante.
Cada elemento de la lista se define con <li>, que es el acrónimo de list item.
Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos.
Por ejemplo, todo esto es una lista no ordenada.

En el siguiente ejemplo, a la izquierda tenemos el código HTML que produce como resultado la lista no ordenada que aparece a la derecha.

El estilo de una lista se puede cambiar, para que en vez de un círculo relleno, un disco, sea el contorno del círculo o un rectángulo el elemento marcador.

Antiguamente existía el atributo type en HTML que permitía cambiar el estilo de una lista no ordenada. Pero ese atributo ahora está obsoleto y no se debe de usar.
En su lugar se debe emplear CSS, pero eso se verá en otro vídeo.

Ol es el acrónimo de ordered list, lista ordenada.
En una lista ordenada, el orden de aparición de los elementos es importante.
Cada elemento de la lista se define con <li>, que es el acrónimo de list item.
Los elementos de la lista se indican con números o letras.
Por ejemplo, todo esto es una lista ordenada.

En el siguiente ejemplo, a la izquierda tenemos el código HTML que produce como resultado la lista ordenada que aparece a la derecha.

Una lista ordenada puede hacer uso de los siguientes atributos que modifican su comportamiento.
En HTML4 y HTML5 se puede emplear el atributo start que permite indicar el valor inicial en el que debe comenzar la lista. También está el atributo type que permite indicar el tipo de numeración, como por ejemplo letras o números romanos.
En HTML5 se ha añadido el atributo booleano reversed, que permite indicar que la numeración debe ser descendente.

En el siguiente ejemplo se muestran cinco listas ordenadas.
En la primera lista simplemente se ha empleado la etiqueta <ol> para definir la lista ordenada.
En las otras cuatro listas, se ha empleado el atributo type para modificar la numeración de las listas: letras mayúsculas, letras minúsculas, números romanos en mayúsculas y números romanos en minúsculas.

En el siguiente ejemplo se muestra el uso del atributo reversed para invertir el orden de numeración de las listas.
El atributo reversed es un atributo booleano, lo que significa que sólo puede tomar un valor que es el mismo nombre del atributo.

En este ejemplo se muestra el efecto del atributo reversed combinado con el atributo type.

Dl es el acrónimo de description list, lista de descripción, que se compone de términos. Cada término puede poseer cero o más descripciones.
Cada término de la lista se define con <dt>.
Cada descripción de un término se define con <dd>.
Y los elementos no se indican con símbolos, números o letras, sino con un aumento del margen izquierdo, de la sangría izquierda.

La lista de descripción se emplea normalmente para definir un glosario o un diccionario.
En el siguiente ejemplo, este código genera la lista que se muestra a la derecha.
Podemos apreciar como las definiciones de cada término poseen una sangría o margen izquierdo.

En una lista de descripción, un término puede tener cero o varias descripciones.
Por ejemplo, este código genera la lista de descripción que se muestra en la parte superior de la pantalla. En esta lista de descripción hay tres términos, el primero y el tercero poseen dos descripciones, pero el segundo una sola descripción.

Por último, en HTML también se pueden crear listas anidadas.
Una lista anidada es simplemente una lista dentro de otra, y se pueden combinar de cualquier forma. La lista que está dentro de otra se llama sublista.

En el siguiente ejemplo, este código genera la lista que se muestra en la parte superior de la imagen. Esta lista posee tres niveles de anidamiento y está formada por tres listas no ordenadas.
En el primer nivel se emplea como símbolo un disco, en el segundo un círculo y en el tercero un cuadrado solido.

Y en este último ejemplo, se ha anidado una lista ordenada dentro de una lista no ordenada.
A la derecha se muestra el resultado.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Próxima edición de iDESWEB

En muy poco tiempo, quizás en una semana, comenzará la nueva edición de iDESWEB que traerá numerosas novedades. La principal, el curso se ofrecerá a través de la iniciativa Actívate patrocinada por Google. Esta iniciativa se describe como:

El futuro del trabajo está en el mundo online, un mundo lleno de posibilidades donde puedes conseguir todo lo que te propongas.

En Actívate encontrarás cursos de formación que te ayudarán a ampliar conocimientos en temas que te interesan, información que te permitirá optimizar la forma en la que te presentas a una oferta de trabajo y recursos para poner en marcha tu propio proyecto emprendedor.

Durante las próximas semanas publicaré los nuevos vídeos de iDESWEB que se han realizado para Actívate.