Extensión HTML por Creación de Etiquetas Personalizadas

() translation by (you can also view the original English article)

En este tutorial les mostraré lo fácil que resulta extender el lenguaje HTML con etiquetas personalizadas. Las etiquetas personalizadas se pueden utilizar para implementar comportamientos diferentes, por lo que son una manera muy conveniente de escribir menos código y mantener sus documentos HTML más simple.

¿Qué es una etiqueta HTML Personalizada?

Con HTML se utiliza la etiqueta de <b>, por ejemplo, para mostrar texto en negrita. Si usted necesita una lista, luego utilizas la etiqueta de <ul> con su etiqueta de hijo <li> para cada elemento de la lista. Etiquetas son interpretadas por los navegadores y, junto con CSS, determinan cómo se muestra el contenido de una página web y también cómo se comportan las partes del contenido.

A veces, simplemente usando una etiqueta HTML no es suficiente para la funcionalidad necesaria en aplicaciones web. Generalmente esto se soluciona mediante el uso de múltiples etiquetas HTML con JavaScript y CSS, pero esta solución no es tan elegante.

Una solución más elegante sería utilizar una etiqueta personalizada: un identificador incluido en <> que es interpretado por el navegador para representar la funcionalidad prevista. Como con las etiquetas HTML normales, deberíamos ser capaces de utilizar una etiqueta personalizada varias veces en una página, y también debemos ser capaces de tener atributos de etiqueta y las etiquetas para facilitar la funcionalidad de la etiqueta personalizada. Así que, veamos un ejemplo!

Ejemplo #1: Creación de una Etiqueta HTML de Gravatar Personalizada

Vamos a crear una etiqueta personalizada que se mostrará la imagen de Gravatar para una cierta dirección de correo electrónico. Llamaremos a esta etiqueta <codingdude-gravatar>, y vamos a pasar la dirección de correo electrónico como un atributo llamado email.

Puedes nombrar tus etiquetas personalizadas todo lo que quieras, pero una cosa a notar es que en este ejemplo el nombre de etiqueta personalizada comienza con codingdude-. Es mejor utilizar prefijos como este para tus etiquetas personalizadas con el fin de evitar conflictos de nombres con otras etiquetas personalizadas. También, obviamente es una buena idea no usar nombres de etiqueta ya definidos por HTML.

Para implementar y probar nuestra etiqueta, necesitamos crear un par de cosas:

Una carpeta los archivos del proyecto; Llamemos a esta carpeta gravatar-custom-tag.
Un archivo HTML index.html dentro de la carpeta de gravatar-custom-tag. Este archivo contiene el código HTML.
Un archivo JS codingdude-gravatar.js dentro de la carpeta de gravatar-custom-tag. Este archivo contiene código JavaScript implementando la etiqueta personalizada.

Vamos a editar el archivo index.html y hacer que su contenido se parecen a esto:

<html>
    <head>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: 
    <codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar>
</body>
</html>

Si ahora cargamos el index.html en el navegador, el resultado no es que impresionante porque aún tenemos que implementar el código para nuestra etiqueta personalizada:

Una cosa a notar es que el navegador es muy indulgente, así que usted puede tener desconocido etiquetas en un documento y el navegador simplemente ignora. Para que nuestra etiqueta personalizada mostrar realmente la imagen de Gravatar para mi correo, tenemos que entender primero cómo funciona el Gravatar.

Gravatar funciona traduciendo una dirección de correo electrónico a una dirección URL de una imagen PNG que el usuario ha seleccionado. La traducción se hace calculando el hash MD5 de la dirección de correo electrónico. La imagen de Gravatar URL se ve así: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png. Así que primero necesitamos una función para calcular el hash MD5 de una cadena. Para esto utilizamos una biblioteca open source que añadimos al archivo index.html como esta:

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: <codingdude-gravatar email="admin@coding-dude.com" />
</body>
</html>

Ahora pasemos a la aplicación de la etiqueta personalizada. Necesitamos implementar el código que identifica en primer lugar nuestra etiqueta personalizada en el documento, y entonces debemos implementar la funcionalidad de la etiqueta personalizada. Esto todo irá en nuestro archivo codingdude-gravatar.js y tendrá el siguiente aspecto:

function customTag(tagName,fn){
  document.createElement(tagName);
  //find all the tags occurrences (instances) in the document
  var tagInstances = document.getElementsByTagName(tagName);
  	//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
		}
}

function codingdudeGravatar(element){
		//code for rendering the element goes here
		if (element.attributes.email){
			//get the email address from the element's email attribute
			var email = element.attributes.email.value;
			var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png";
			element.innerHTML = "<img src='"+gravatar+"'>";
		}
}	

customTag("codingdude-gravatar",codingdudeGravatar);

Mirando el código, podemos ver la función customTag() que encuentra las ocurrencias de una etiqueta personalizada con nombre (el parámetro de tagName) y se ejecuta la función asociada a esa etiqueta personalizada (mediante el parámetro de fn).

El document.createElement(tagName) es necesaria para algunos navegadores (IE en particular) para informar al navegador que vamos a usar una etiqueta personalizada con el nombre de tagName, de lo contrario no podría funcionar la etiqueta.

El parámetro de fn es la función que implementa lo que la etiqueta personalizada se supone hacer. En nuestro caso, fn es codingdudeGravatar(). Esta función toma como parámetro una referencia al elemento de etiqueta personalizada. Si la etiqueta personalizada tiene un atributo llamado email electrónico entonces pasará ese valor a la función md5() de nuestra biblioteca de código abierto. El resultado se utiliza para componer la URL de la imagen del Gravatar, que se agrega a través de un <img> elemento dentro de nuestro elemento de etiqueta personalizada.

La última línea de la secuencia de comandos llama a la función customTag() con el nombre de la etiqueta personalizada y su función de implementación asociados. La función de etiqueta personalizada puede ser reutilizada para cualquier tipo de etiqueta personalizada; sólo deberás poner en práctica la función que hace lo que usted necesita.

Ahora, si cargamos nuestro archivo index.html en un navegador, veremos el Gravatar para mi correo:

Ejemplo #2: Personalizado Avanzado de Etiqueta HTML para Dibujar un Gráfico de Sectores

En nuestro ejemplo anterior, hemos visto una muy sencilla implementación personalizada de etiqueta HTML. Puede utilizar el mismo enfoque para implementar cualquier etiqueta personalizada que desee.

Vamos a ver cómo implementar una etiqueta personalizada más avanzada, que podemos usar para dibujar un gráfico de sectores. Vamos a crear los archivos necesarios para esta etiqueta personalizada:

Crear una carpeta y asígnele el nombre piechart-custom-tag. Esta será nuestra carpeta de proyecto.
Dentro de la carpeta piechart-custom-tag, crear un archivo HTML y nombrarlo index.html. Este archivo contiene el código HTML.
También crear un archivo JavaScript codingdude-piechart.js que contiene la aplicación de la etiqueta personalizada.

Etiquetas personalizadas muy a menudo se utilizan como contenedores para diferentes funcionalidades. En nuestro caso, usaremos el <codingdude-piechart> etiqueta como un contenedor para la elaboración de un gráfico. Si te has perdido mi tutorial sobre Cómo Dibujar Gráficos Usando JavaScript y HTML5 Canvas, puede echar un vistazo rápido. Vamos a utilizar el código de ese tutorial y envuelva su funcionalidad en nuestra etiqueta personalizada.

Entonces editar el archivo codingdude-piechart.js y agregar las siguientes funciones del tutorial:

drawLine()
drawArc()
drawPieSlice()
Piechart()

Ahora vamos a editar el archivo index.html y coloque la etiqueta personalizada para dibujar el gráfico como este:

<html>
    <head>
        <script type="text/javascript" src="codingdude-piechart.js"></script>
    </head>
<body>
    <codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88">
      <codingdude-data category="Classical music">10</codingdude-data>
      <codingdude-data category="Alternative rock">14</codingdude-data>
      <codingdude-data category="Pop">2</codingdude-data>
      <codingdude-data category="Jazz">12</codingdude-data>
    </codingdude-piechart>
</body>
</html>

La intención aquí es establecer la anchura y la altura del gráfico usando los atributos width y height. El atributo de colors establece los colores utilizados para sectores del gráfico circular.

Como se mencionó antes, esta etiqueta personalizada es un poco más compleja como queramos utilizar los tags para esta etiqueta personalizada. Queremos que utilice las sub-etiquetas <codingdude-data> aquí para configurar los datos del gráfico. Ahora echemos un vistazo a cómo implementar el código para esta etiqueta personalizado.

Editar el archivo codingdude-piechart.js y, después de las funciones del tutorial gráfico, coloque el código siguiente:

//here you should add the function from the tutorial
//How to Draw Charts Using JavaScript and HTML5 Canvas
//...
function customTag(tagName,fn){
  document.createElement(tagName);
        //find all the tags occurrences (instances) in the document
        var tagInstances = document.getElementsByTagName(tagName);
		//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
		}
}

function PiechartTag(element){
    //add the canvas where to draw the piechart
    var canvas = document.createElement("canvas"); 
    //get the width and height from the custom tag attributes
    canvas.width = element.attributes.width.value;
    canvas.height = element.attributes.height.value;
    element.appendChild(canvas);
    
    //get the colors for the slices from the custom tag attribute
    var colors = element.attributes.colors.value.split(",");
    
    //load the chart data from the <codingdude-data> sub-tags
    var chartData = {};
    var chartDataElements = element.querySelectorAll("codingdude-data");
    for (var i=0;i<chartDataElements.length;i++){
        chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent);
        //remove the data sub-tags
        chartDataElements[i].parentNode.removeChild(chartDataElements[i]);
    }
  
    //call the draw() function
    new Piechart(
        {
        canvas:canvas,
        data:chartData,
        colors:colors
        }
    ).draw();
}

customTag("codingdude-piechart",PiechartTag);

La función customTag() es la misma que la usada en el ejemplo #1. La aplicación de la etiqueta personalizada de <codingdude-piechart> está contenida en la función PiechartTag(). Esta función se encarga de los siguientes aspectos:

Crea el elemento de <canvas> donde se dibujará el gráfico, y se añade dentro de la etiqueta personalizada. La anchura y la altura de la lona se toman de los atributos de la etiqueta personalizada.
Se busca el atributo de colors del elemento y la transforma en una gran variedad de colores que se utilizan para los sectores del gráfico.
Se carga el <codingdude-data> uno por uno los elementos en la estructura de datos pasan al gráfico. Porque los elementos tienen contenido de texto, el navegador hacen y se mostrará el contenido del texto. Ya que no queremos, sólo podemos eliminar los elementos después de que tome los datos.
Por último, nos llamar al constructor de Piechart() con las opciones necesarias y luego llamar a la función draw() para dibujar el gráfico.

Si carga index.html, se puede ver que la etiqueta personalizada se representa como un gráfico de sectores y debe verse así:

The custom tag is rendered as a pie chart

Y ahí está, un gráfico de torta hermosa. Cambiar el <codingdude-data> atributos cambiará el gráfico en consecuencia. Se utilizó esta misma técnica de etiquetas personalizadas para el desarrollo de la biblioteca de infografía y gráficos HTML Tags de CodeCanyon.

Infographic charts and graphics HTML tags library — Biblioteca de gráficos de CodeCanyon

La biblioteca contiene las etiquetas personalizadas no sólo para gráficos, sino también para los gráficos de líneas, gráficos de barras y otros tipos de cartas.

Reflexiones Finales

En este tutorial, hemos visto dos ejemplos de cómo crear etiquetas HTML personalizadas para dos funcionalidades diferentes. Utilizando la función customTag(), se pueden desarrollar fácilmente tus propias etiquetas personalizadas.

Si te ha gustado este tutorial, también tenemos una amplia variedad de otros tutoriales sobre HTML5 y tecnologías relacionadas, así que no dudes en verlas entonces, así.