Conoce los Webs Components PARTE 2

Continuando con el artículo sobre los componentes o Webs Components, veremos algunos ejemplos clásicos de éstos. Hoy en día, si no usamos web components, cuando queramos enseñar un mapa en un sitio web, se debe crear código en tres bloques.

  • Un HTML debe estar con el elemento dónde se va a renderizar el mapa.
  • El CSS es para definir algún estilo que vaya acorde en el mapa, por ejemplo la dimensión.
  • Y lo más importante es el Javascript para que se pueda generar el mapa, mostrando las coordenadas que se deseen visualizar y otros detalles de la configuración.

Otro ejemplo seria a la hora de elaborar un calendario que de nuevo, se divide en tres partes:

  • Un HTML que muestre dónde se mostrará el calendario.
  • El CSS para definir el estilo, dimensiones, colores, etc.
  • Y el Javascript para decir que mes, día o año debe mostrar.

Entonces podemos decir que con tres lenguajes distintos el cual se especifican en bloques separados y en algunas ocasiones, en archivos separados. Sin Web Components, para tener todos los bloques agrupados y tener un código único para humedecer un elemento el cual se usaba generalmente con la etiqueta IFRAME, que permite cargar un HTML, CSS y Javascript y reducir su perímetro a una pequeña zona de la página. Esta técnica se sigue empleando, pero más adelante se va a sustituir gracias a las bondades de los Webs Components.

Entonces, desde ahora  podremos realizar un mapa de Google con una etiqueta propietaria, que no concierne al patrón del HTML, el cual simplifica la labor y la acota a un pequeño bloque independiente.

[su_quote]<google-map latitude=”12.678″ longitude=”-67.211″></google-map>[/su_quote]

A la hora de añadir un calendario que indique los días que tenemos libres u ocupados, se podrá usar una etiqueta propietaria en la que se indica las peculiaridades del repertorio.

[su_quote]<google-calendar-busy-now  

 calendarId=”TU_ID_CAL”  

 apiKey=”TU_LLAVE_API”  

 busyLabel=”Ocupado”  

 freeLabel=”Estoy libre”>

</google-calendar-busy-now>[/su_quote]

Así básicamente se ve reflejado estos dos ejemplos de Webs Components reales, creados por el equipo de Google. Continuaré explicando más sobre éste método en el siguiente artículo.

Compartan con vuestros amigos en Facebook y Twitter.

Os invito a dejar vuestra opinión en la caja de comentarios.