Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5

Cómo crear tus propios elementos HTML con componentes web

by
Length:MediumLanguages:
This post is part of a series called Strange and Unusual HTML.
Introducing the HTML5 “Menu” and “Menuitem” Elements
Meta Tags and SEO

Spanish (Español) translation by Steven (you can also view the original English article)

Los componentes web son considerados actualmente como un próximo "cambio tectónico para el desarrollo web" con la promesa de remodelar permanentemente el panorama del diseño web. Los grandes jugadores están avanzando para hacer realidad los componentes web. Tanto Google como Mozilla ya están implementando gradualmente el soporte del navegador nativo.

¿Qué son los componentes web? Te estarás preguntando. En pocas palabras, los componentes web te dan una manera de crear tus propios elementos HTML personalizados que pueden hacer casi cualquier cosa que necesites. En lugar de cargar tus sitios con marcado detallado, scripts largos y código repetitivo, envuelve todo en bonitos y ordenados elementos HTML personalizados.

Entendiendo los componentes web

La forma más fácil de entender cómo los componentes web permiten elementos HTML personalizados sería mirando un elemento existente que ya conocemos desde HTML5: la etiqueta <video>. Usando este elemento se puede colocar un vídeo con sólo unas pocas líneas de código, por ejemplo:

Es posible que solo veas unas pocas líneas de HTML arriba, pero realmente el elemento <video> luce así detrás de escenas:

De forma predeterminada, el navegador oculta todo ese código detallado para que no tengas que verlo ni preocuparte por escribirlo cuando quieras colocar un vídeo. Sólo agregas las etiquetas <video> y <source> y listo.

Anteriormente, solo los proveedores de exploradores podían crear elementos de esta manera. Pero, ¿te imaginas si pudieras usar este mismo enfoque tú mismo con otros tipos de contenido?

Tomemos una presentación de diapositivas de imagen, por ejemplo. Normalmente necesitarías unas cuantas rondas de divs anidados que lleven nombres de clase específicos para manejar el ajuste de la presentación de diapositivas, envolviendo cada diapositiva y agregando subtítulos y miniaturas. También tendrías que establecer cualquier opción de presentación de diapositivas general para cosas como efectos de transición de diapositivas a través de algunos jQuery / JavaScript en línea.

Qué pasaría si pudieras omitir todo eso y en su lugar solo usas:

Con los componentes web, eso es exactamente lo que puedes hacer.

Crear tus propios elementos HTML

Si deseas proporcionar un método conciso y fácil de interactuar con el método de colocación de contenido que, de lo contrario, estaría hinchado y difícil de manejar, puedes continuar y crear tu propio componente web.

Los componentes web también se pueden compartir fácilmente, por lo que a medida que los desarrolladores se sumen, hay una buena apuesta, solo podrás tomar un componente web precompilado para los requisitos más comunes del proyecto. Ya estamos viendo que los componentes compartidos libremente aparecen para todo, desde el reconocimiento de voz.

para constructores de presentaciones..

para la generación de códigos QR.

Echemos un vistazo a lo que hay detrás de escenas de los componentes web.

¿Qué crea un componente web?

Los componentes web, tal como existen en este momento, se componen de cuatro piezas:

  • Elementos personalizados
  • Shadow DOM
  • Plantillas
  • Importaciones HTML

Elementos personalizados

Los elementos personalizados son exactamente como suenan: elementos que se pueden llamar como cualquier cosa que elijas, y funcionan de la manera que quieras. Y cuando digo que de cualquier manera, lo digo en serio. Por ejemplo, presento el elemento <x-gangnam-style>:

Demostración en vivo - pasar el ratón sobre la barra

Los elementos personalizados se declaran, en su forma más simple, así:

Al crear un elemento personalizado, puedes hacerlo completamente desde cero, o puedes ampliar un elemento HTML existente, como <button> por ejemplo, y darle la funcionalidad o presentación modificada que necesitas.

Nota: vale la pena señalar que la etiqueta <element> quedó en desuso en 2013 debido a complicaciones. Esto podría volver, pero mientras tanto hay opciones 'polyfill', de las que hablaremos en un momento. ¡Gracias a Addy Osmani por señalarlo!

Shadow DOM

El Shadow DOM es realmente el aspecto central de cómo funcionan los componentes web. Anteriormente, miramos el elemento <video> de HTML5 y mostramos cómo, a pesar de ver sólo unas pocas líneas de código, en realidad hay un poco de código oculto por defecto. El lugar donde vive este código oculto se llama el "Shadow DOM".

Los proveedores de navegadores han estado usando este Shadow DOM durante años para implementar de forma nativa elementos como inputs, audio, vídeo, etc. A través de los componentes web ahora puede ser utilizado por cualquier desarrollador.

La idea general es que tomes todo el código que realmente no necesita ser visto durante la colocación de marcado y ocultarlo en el Shadow DOM para que no se muestre en el camino. Esto te deja solo tener que tratar con la información pertinente, por ejemplo, la ubicación del archivo, el alto y el ancho cuando se utiliza el elemento <video>.

Una de las cosas más interesantes de trabajar con Shadow DOM es que cada instancia es su propio mundo independiente. Así que si tienes estilos y scripts dentro del elemento, no se filtrarán accidentalmente y afectarán a cualquier otra cosa en la página.

Por el contrario, el CSS y el JavaScript en otra parte de la página no afectarán a tu componente web, con la excepción de los enlaces de estilo que podrías crear específicamente para permitir la segmentación CSS externa. Todo eso significa que ya no tendrás que preocuparte por el espacio de nombres de tu ID y nombres de clase para evitar conflictos.

Si quieres ver cómo es el Shadow DOM, es fácil. Asegúrate de que estás ejecutando una instalación actualizada de Chrome, abre las Herramientas de desarrollo, haz clic en el icono de engranaje para abrir la configuración y marca la casilla Mostrar efecto Shadow DOM del agente de usuario:

A continuación, al inspeccionar cualquier elemento con el Shadow DOM verás tu código completo. Pruébalo inspeccionando el elemento <x-gangnam-style> con y sin Shadow DOM que muestra: http://html5-demos.appspot.com/gangnam

Para un resumen completo de Shadow DOM echa un vistazo: Introducción a Shadow DOM

Plantillas

Ya hemos cubierto cómo los elementos personalizados permiten enfocar solo la información pertinente mientras todo el código restante está oculto en el Shadow DOM. Una plantilla dentro de un componente web es lo que contiene todos los elementos de presentación de ese código restante.

Como parte del código que define el componente web se colocan las etiquetas <template>...</template> y entre esas etiquetas se incluye cualquier HTML y CSS que el componente necesita.

Por ejemplo, echa un vistazo al código que creó el componente web <x-gangnam-style>. La etiqueta de apertura <template> está en la línea 4 y la etiqueta de cierre </template> está en la línea 201. Entre esas etiquetas verás todo el CSS responsable de crear el posicionamiento y la animación, y el HTML que coloca cada una de las imágenes implicadas.

Importaciones HTML

Las importaciones HTML te permiten tomar todo lo descrito anteriormente y realmente hacer que funcione en tu página. Los componentes web se definen dentro de un archivo HTML externo, por lo que el archivo debe importarse para que un elemento personalizado funcione. Las importaciones HTML manejan esto a través de una etiqueta <link>, ya estarás familiarizado con la importación de archivos CSS externos.

Por ejemplo, antes de poder utilizar el componente web <x-gangnam-style> tendrías que importar el archivo HTML que lo define, así:

Soporte del navegador y Polyfills

Las posibilidades que ofrecen los componentes web hacen que la idea de profundizar en el uso de ellos sea muy atractiva, sin embargo, en este momento el soporte del navegador aún no es viable. El estado actual de soporte se ve así:

http://jonrimmer.github.io/are-we-componentized-yet/

El soporte nativo está en proceso de implementación para Chrome, Opera y Firefox, pero aún no está completo. IE y Safari aún no han dado a conocer sus planes, sin embargo, se cree que dada la mayoría de los navegadores soportarán componentes web en última instancia, los otros navegadores probablemente seguirán su ejemplo.

En este momento, si quieres empezar a trabajar con componentes web, tendrás que usar uno de los polyfills disponibles. La buena noticia es que dos de las soluciones más populares son creadas por Google y Mozilla, por lo que podemos esperar ver cierta consistencia con cómo el soporte nativo funcionará en última instancia.

Polymer de Google

Es difícil no inclinarse hacia el uso de Polymer dado Chrome es ahora el navegador más utilizado, y tú podrías asumir que se tendrá en cuenta durante el desarrollo en cuanto a cómo el código de los componentes web será indexado por Google.

Polymer viene con una librería completa de componentes web preconstruidos. Incluye los "elementos de núcleo de Polymer" que están orientados a lo funcional, y los "elementos de papel" que están orientados al diseño.

Al crear elementos personalizados con Polymer, en lugar de utilizar el formato <element name="..."> utiliza <polymer-element name="...">.

Polymer se describe a sí mismo como estar en "vista previa del desarrollador" en lugar de estar absolutamente listo para la producción, sin embargo también dicen

... a pesar de la etiqueta muchas personas ya han tenido éxito utilizando Polymer en la producción.

Soporte para navegadores

  • Chrome en Android
  • Chrome
  • Canary
  • Firefox
  • IE 10+
  • Safari 6+
  • Safari móvil

Si necesitas atender a IE9, que se estima que tiene alrededor de 1.9% a 5.11% de la cuota de mercado, desafortunadamente no tienes suerte con Polymer. Sin embargo, todavía puedes ir con X-Tags de Mozilla en su lugar.

X-Tags de Mozilla

X-Tags es una librería de JavaScript creada por Mozilla que, actualmente, tiene una ventaja sobre Polymer ya que el soporte del navegador es de mayor alcance. Si esa es una consideración importante para ti X-Tags puede ser tu preferencia.

Soporte para navegadores

  • Firefox 5+ escritorio y móvil
  • Chrome 4+
  • Chrome en Android 2.1+
  • Safari 4+ escritorio y móvil
  • IE9+
  • Opera 11+ escritorio y móvil

Soporte técnico de IE8

En este momento, si necesitas admitir IE8, por desgracia, los componentes web no son probables para ti como los polyfills disponibles admiten IE9+. Las estimaciones son que los usuarios de IE8 están en alrededor de 2.1% a 3.82%, pero por supuesto si tus propias estadísticas dicen algo diferente, tendrás que juzgar sobre lo lejos que debe extenderse el soporte de tu navegador.

Componentes Ember.js y AngularJS

Una forma posible de prepararse para realizar la transición al uso de componentes web es trabajar con Ember.js o AngularJS por el momento. Ambos tienen sus propios sistemas de creación de componentes y ambos prometen pasar a utilizar código de los componentes web de manera nativa cuando esté completamente disponible.

Componentes creados por la comunidad

Aprende más

Conclusión

¡Espero que hayas disfrutado leyendo este resumen de lo que son los componentes web y por qué debes preocuparte! Hay mucho más en lo que profundizar, pero con estos fundamentos cubiertos, tenemos un montón de oportunidades para tutoriales sobre la creación de componentes web personalizados. ¿Qué te parece? ¿En qué circunstancias podrías verte usándolos?

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.