Este documento describe los problemas actuales en el desarrollo web y cómo los Web Components pueden ayudar a resolverlos. Explica que los Web Components consisten en cuatro especificaciones (Shadow DOM, Custom Elements, HTML Imports y Templates) que permiten crear elementos HTML personalizados y reutilizables. También describe cómo Polymer y el Polymer Starter Kit facilitan el uso de los Web Components.
Video: http://goo.gl/acVK2t
Slideshare: http://goo.gl/2OChM4
Github: http://goo.gl/29ldtQ
La Web se está orientando a componentes. El objetivo es alcanzar una Web cada vez más madura, dirigida a fomentar la sencillez en las tareas de diseño y construcción, aumentar la rapidez y agilidad de desarrollo y mejorar la productividad general de las soluciones Web. Todo esto se consigue en parte debido al carácter declarativo que confiere la tecnología de componentes Web que, además, permite encapsular un comportamiento complejo, absorber la gestión adaptativa de los contenidos y, a la postre, generar un vocabulario propio de etiquetas de autor que fomenta la reutilización de código desde el front end.
Sin embargo, la comunidad demanda de manera creciente la definición de directrices y buenas prácticas en relación con las actividades de diseño y desarrollo vinculadas a la construcción de soluciones basadas en componentes Web. En esta charla ofreceremos una colección de principios que tienen por objetivo orientar a los equipos implicados en este tipo de proyectos.
La Web está evolucionando a pasos agigantados en los últimos tiempos. Una de las direcciones de avance en este sentido apunta hacia su modularización. En lugar de construir pesadas aplicaciones monolíticas, parece estar más en sintonía con los principios arquitectónicos de la Web hacer un desarrollo dirigido por la construcción de componentes Web sencillos, atómicos y funcionales que fomenten su reutilización transversal y puedan utilizarse como etiquetas de autor personalizadas para articular soluciones elaboradas. Pero más allá de limitarnos a construir componentes Web y utilizarnos de manera conjunta en una página huesped, la orientación a componentes exige encontrar cierto grado de interoperabilidad entre los mismos para ofrecer una sensación de continuidad en su uso al usuario final.
De acuerdo a esta idea, en esta charla comenzaremos haciendo una revisión de la tecnología utilizada para la construcción de componentes Web según las especificaciones estándar de la W3C y del WWG, haciendo uso de la Plataforma de soporte Polymer de Google como implementación nuclear de referencia. Esto nos dará pie para presentar el problema de cómo puede abordarse la construcción de soluciones Web orientadas a componentes para ofrecer niveles de interoperabilidad adecuados. Ofreceremos, en este sentido, algunas soluciones arquitectónicas al respecto y presentaremos ejemplos de su aplicabilidad práctica en contextos realistas.
La reutilización ha sido desde siempre uno de los objetivos más perseguidos dentro de la ingeniería del software. La idea de convertir los procesos de construcción de aplicativos en algo automatizable, sencillo y económico siempre ha estado ahí en la cabeza de los desarrolladores. Pero, de manera recurrente, esta iniciativa se ha dado de bruces con los inamovibles mimbres de unos paradigmas de programación demasiado inflexibles a este respecto.
Sin embargo, lenguajes como Javascript se prestan mucho más a hacer del desarrollo de código un ejercicio de verdadera reutilización. A lo largo de esta charla explicaremos cuáles son las barreras paradigmáticas que suelen impedir la reutilización y cómo y en qué sentido JavaScript consigue soslayarlas con éxito. Asimismo presentaremos una colección de modelos arquitectónicos basados en Mixins, Traits, Roles, Aspectos, Subjects, etc. que se están usando en proyectos de software actuales con este lenguaje precisamente por las bondades que ellos.
Cada lenguaje, cada tecnología, cada paradigma de programación persigue siempre la reutilización de código. En la comunidad de desarrollo se habla frecuentemente de DRY (Don’t Repeat Yourself) o WORE (Write Once Run Everywhere). Pero estos manidos mantras se quedan frecuentemente en una mera declaración de principios.
El código desarrollado para su reutilización no es capaz de reubicarse en otros contextos arquitectónicos de aquellos para los que fue inicialmente diseñado. Las capacidades de meta-programación de JavaScript le convierten en un lenguaje flexible y lo suficientemente plástico como para adaptarse dinámicamente a cualquier solución construida.
En esta charla exploramos como construir programas que se modifiquen a si mismos para resolver estos problemas y hablaremos de modelos de programación basados en componentes de software.
La Web está evolucionando y los procesos de desarrollo en relación a la misma también lo hacen. Es una realidad vigente que cada vez más este tipo de soluciones pasarán por la construcción de componentes Web de negocio, etiquetas de autor que extienden el léxico del estándar HTML. Google vehicula esta solución a través del framework Polymer, cuya version 1.0 vio la luz hace pocos meses coincidiendo con la Google I/O 2015.
Pero en esta charla, no nos limitaremos a presentar las novedades de este Framework que pueden leerse directamente en la Web, que también. Hablaremos de los resultados de nuestra investigación en este terreno. Cuáles son los principios de diseño de componentes web, cuál es el modelo adecuado de componentes y cómo debe desarrollarse una arquitectura basada en componentes que cumpla con las necesidades arquetípicas de las soluciones Web y Mobil de hoy en día.
En los últimos años se ha hablado mucho de los estilos arquitectónicos en boga para desarrollar las soluciones orientadas a servicios. Sin embargo, cuando diseñamos servicios caemos siempre en los mismos esquemas y los repetimos de proyecto a proyecto sin ponernos en cuestión su validez para cada problema en cuestión.
En esta charla haremos un recorrido de los fundamentales modelos de diseño de APIs de servicios que pueden desarrollarse para cada tipo de problema. Además ofreceremos técnicas y patrones de diseño aplicables para cada uno de estos modelos.
Video: http://goo.gl/acVK2t
Slideshare: http://goo.gl/2OChM4
Github: http://goo.gl/29ldtQ
La Web se está orientando a componentes. El objetivo es alcanzar una Web cada vez más madura, dirigida a fomentar la sencillez en las tareas de diseño y construcción, aumentar la rapidez y agilidad de desarrollo y mejorar la productividad general de las soluciones Web. Todo esto se consigue en parte debido al carácter declarativo que confiere la tecnología de componentes Web que, además, permite encapsular un comportamiento complejo, absorber la gestión adaptativa de los contenidos y, a la postre, generar un vocabulario propio de etiquetas de autor que fomenta la reutilización de código desde el front end.
Sin embargo, la comunidad demanda de manera creciente la definición de directrices y buenas prácticas en relación con las actividades de diseño y desarrollo vinculadas a la construcción de soluciones basadas en componentes Web. En esta charla ofreceremos una colección de principios que tienen por objetivo orientar a los equipos implicados en este tipo de proyectos.
La Web está evolucionando a pasos agigantados en los últimos tiempos. Una de las direcciones de avance en este sentido apunta hacia su modularización. En lugar de construir pesadas aplicaciones monolíticas, parece estar más en sintonía con los principios arquitectónicos de la Web hacer un desarrollo dirigido por la construcción de componentes Web sencillos, atómicos y funcionales que fomenten su reutilización transversal y puedan utilizarse como etiquetas de autor personalizadas para articular soluciones elaboradas. Pero más allá de limitarnos a construir componentes Web y utilizarnos de manera conjunta en una página huesped, la orientación a componentes exige encontrar cierto grado de interoperabilidad entre los mismos para ofrecer una sensación de continuidad en su uso al usuario final.
De acuerdo a esta idea, en esta charla comenzaremos haciendo una revisión de la tecnología utilizada para la construcción de componentes Web según las especificaciones estándar de la W3C y del WWG, haciendo uso de la Plataforma de soporte Polymer de Google como implementación nuclear de referencia. Esto nos dará pie para presentar el problema de cómo puede abordarse la construcción de soluciones Web orientadas a componentes para ofrecer niveles de interoperabilidad adecuados. Ofreceremos, en este sentido, algunas soluciones arquitectónicas al respecto y presentaremos ejemplos de su aplicabilidad práctica en contextos realistas.
La reutilización ha sido desde siempre uno de los objetivos más perseguidos dentro de la ingeniería del software. La idea de convertir los procesos de construcción de aplicativos en algo automatizable, sencillo y económico siempre ha estado ahí en la cabeza de los desarrolladores. Pero, de manera recurrente, esta iniciativa se ha dado de bruces con los inamovibles mimbres de unos paradigmas de programación demasiado inflexibles a este respecto.
Sin embargo, lenguajes como Javascript se prestan mucho más a hacer del desarrollo de código un ejercicio de verdadera reutilización. A lo largo de esta charla explicaremos cuáles son las barreras paradigmáticas que suelen impedir la reutilización y cómo y en qué sentido JavaScript consigue soslayarlas con éxito. Asimismo presentaremos una colección de modelos arquitectónicos basados en Mixins, Traits, Roles, Aspectos, Subjects, etc. que se están usando en proyectos de software actuales con este lenguaje precisamente por las bondades que ellos.
Cada lenguaje, cada tecnología, cada paradigma de programación persigue siempre la reutilización de código. En la comunidad de desarrollo se habla frecuentemente de DRY (Don’t Repeat Yourself) o WORE (Write Once Run Everywhere). Pero estos manidos mantras se quedan frecuentemente en una mera declaración de principios.
El código desarrollado para su reutilización no es capaz de reubicarse en otros contextos arquitectónicos de aquellos para los que fue inicialmente diseñado. Las capacidades de meta-programación de JavaScript le convierten en un lenguaje flexible y lo suficientemente plástico como para adaptarse dinámicamente a cualquier solución construida.
En esta charla exploramos como construir programas que se modifiquen a si mismos para resolver estos problemas y hablaremos de modelos de programación basados en componentes de software.
La Web está evolucionando y los procesos de desarrollo en relación a la misma también lo hacen. Es una realidad vigente que cada vez más este tipo de soluciones pasarán por la construcción de componentes Web de negocio, etiquetas de autor que extienden el léxico del estándar HTML. Google vehicula esta solución a través del framework Polymer, cuya version 1.0 vio la luz hace pocos meses coincidiendo con la Google I/O 2015.
Pero en esta charla, no nos limitaremos a presentar las novedades de este Framework que pueden leerse directamente en la Web, que también. Hablaremos de los resultados de nuestra investigación en este terreno. Cuáles son los principios de diseño de componentes web, cuál es el modelo adecuado de componentes y cómo debe desarrollarse una arquitectura basada en componentes que cumpla con las necesidades arquetípicas de las soluciones Web y Mobil de hoy en día.
En los últimos años se ha hablado mucho de los estilos arquitectónicos en boga para desarrollar las soluciones orientadas a servicios. Sin embargo, cuando diseñamos servicios caemos siempre en los mismos esquemas y los repetimos de proyecto a proyecto sin ponernos en cuestión su validez para cada problema en cuestión.
En esta charla haremos un recorrido de los fundamentales modelos de diseño de APIs de servicios que pueden desarrollarse para cada tipo de problema. Además ofreceremos técnicas y patrones de diseño aplicables para cada uno de estos modelos.
En primer lugar hago una introducción, contando que es eso del 'Responsive Web Design' (Diseño Web Adaptable), que beneficios tiene, y cuento la diferencia entre 'Graceful degradation' y 'Progessive enhancement'.
Seguidamente, expongo varios ejemplos de sitios web realizados con esa filosofía.
Luego entro más en detalle en como conseguir sitios web adaptables: diseño fluido, sistemas de rejilla, imágenes fluidas, viewport, media queries.
Para terminar enumero las 2 metodologías más utilizadas hoy en día para hacer diseños adaptables: 'Desktop First' y 'Mobile first'
En esta sencilla y muy resumida presentación, se hace un repaso de las herramientas y arquitecturas a utilizar para publicar información con componente espacial en vía Web.
Geografía como plataforma: API REST vs OGC y Geodatabases - Conferencia Esri ...Esri
Presentación del equipo técnico de Esri España en la pasada conferencia.
Si quieres ver los vídeos y fotos de la conferencia, visita la web:
http://evento.esri.es/es/esri2012/
En primer lugar hago una introducción, contando que es eso del 'Responsive Web Design' (Diseño Web Adaptable), que beneficios tiene, y cuento la diferencia entre 'Graceful degradation' y 'Progessive enhancement'.
Seguidamente, expongo varios ejemplos de sitios web realizados con esa filosofía.
Luego entro más en detalle en como conseguir sitios web adaptables: diseño fluido, sistemas de rejilla, imágenes fluidas, viewport, media queries.
Para terminar enumero las 2 metodologías más utilizadas hoy en día para hacer diseños adaptables: 'Desktop First' y 'Mobile first'
En esta sencilla y muy resumida presentación, se hace un repaso de las herramientas y arquitecturas a utilizar para publicar información con componente espacial en vía Web.
Geografía como plataforma: API REST vs OGC y Geodatabases - Conferencia Esri ...Esri
Presentación del equipo técnico de Esri España en la pasada conferencia.
Si quieres ver los vídeos y fotos de la conferencia, visita la web:
http://evento.esri.es/es/esri2012/
Charla para JS Day Madrid 2015 09/05/2015:
- Video: https://goo.gl/jOm4aN
- Slideshare: http://goo.gl/cnTQw9
- Github: https://goo.gl/as8pdD
Cada lenguaje, cada tecnología, cada paradigma de programación persigue siempre la reutilización de código. En la comunidad de desarrollo se habla frecuentemente de DRY (Don’t Repeat Yourself) o WORE (Write Once Run Everywhere). Pero estos manidos mantras se quedan frecuentemente en una mera declaración de principios.
El código desarrollado para su reutilización no es capaz de reubicarse en otros contextos arquitectónicos de aquellos para los que fue inicialmente diseñado. Las capacidades de meta-programación de JavaScript le convierten en un lenguaje flexible y lo suficientemente plástico como para adaptarse dinámicamente a cualquier solución construida.
En esta charla exploramos como construir programas que se modifiquen a si mismos para resolver estos problemas y discutiremos mecanismos, técnicas y patrones de metaprogramación basados en componentes de software.
Documento Formativo de Symfony2 en el que explica desde qué es Symfony hasta los primeros pasos básicos: instalación, configuración, entidades, Twig, YAML...
Presentación que explica los fundamentos de una metodología llamada SIG en la Web, la cual muestra las características, las formas de implementación, y cómo afecta al trabajo de un profesional GIS dependiendo de su rol
Integrando Redis en aplicaciones Symfony2Ronny López
Sus múltiples casos de usos y su excepcional rendimiento hacen que Redis sea hoy una pieza clave en la arquitectura de aplicaciones altamente dinámicas.
En la charla se expone de forma práctica cómo puede integrarse Redis en una aplicación Symfoy y cómo pueden implementarse varias de las características de las aplicaciones usando Redis, como por ejemplo: Session storage, Monolog logging handlers, Doctrine caching, SwiftMailer spooling, Profiler storage, Data Collector for Symfony2 Profiler.
Además de estos casos de uso generales, se comentan otros casos de usos específicos de aplicaciones que por su naturaleza no pueden beneficiarse de una capa de cache y se requiere por tanto una herramienta eficiente y escalable para resolver ciertos tipos de problemas.
BancaCivica.es: Un caso de éxito Drupal en el sector bancarioDavid Gil Sánchez
Para todos aquellos interesados en conocer la implantación de Drupal como Gestor de Contenidos en sectores críticos presentaremos la implantación de Drupal como gestor de contenidos del conjunto de portales de Banca Cívica, uno de los grandes grupos bancarios españoles.
Esta sesión se centrará en explicar el proceso seguido para realizar la construcción de los diferentes sites que componen la presencia online de Banca Cívica, centrándonos en los aspectos más técnicos del proyecto: Infraestructura utilizada, módulos utilizados, solución multi-idioma, procesos de paso entre entornos, buenas prácticas técnicas aprendidas, etc…
Mostraremos el porque de nuestras decisiones técnicas: panels o context, como usamos features, como usamos drush, cuando hemos requerido de paradas de autoría, etc…
El desarrollo de aplicaciones web ha evolucionado muchísimo en los últimos años. Las interfaces de usuario que queremos diseñar son cada vez más avanzadas y requieren del uso de nuevas técnicas de desarrollo (y escribir mucho código en la capa correspondiente al navegador, principalmente en JavaScript). Conceptos como SPA, Ajax, patrones MV* están alcanzando el top en los stacks de desarrollo habituales.
Por suerte existen innumerables frameworks y herramientas para facilitarnos el trabajo, pero hay tantas que cuando nos enfrentamos a un nuevo proyecto, nos surgen una serie de inevitables preguntas…
http://dotnetters.es/evento/desarrollo-moderno-aplicaciones-web/
En esta sesión os contaremos la visión de React para el desarrollo de aplicaciones web desde el punto de vista de un desarrollador de ASP.NET que tiene que aprender a trabajar con estas nuevas tecnologías.
Cross development - React para desarrolladores de asp.netAlberto Diaz Martin
En esta sesión os contaremos la visión de React para el desarrollo de aplicaciones web desde el punto de vista de un desarrollador de ASP.NET que tiene que aprender a trabajar con estas nuevas tecnologías.
Corporación de Industrias Tecnológicas S.A. - Capacitaciones en Informática - Programación con CodeIgniter
www.CorpintecSA.com
contacto@CorpintecSA.com
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Telefónica
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0xWord escrito por Ibón Reinoso ( https://mypublicinbox.com/IBhone ) con Prólogo de Chema Alonso ( https://mypublicinbox.com/ChemaAlonso ). Puedes comprarlo aquí: https://0xword.com/es/libros/233-big-data-tecnologias-para-arquitecturas-data-centric.html
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...espinozaernesto427
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta intensidad son un tipo de lámpara eléctrica de descarga de gas que produce luz por medio de un arco eléctrico entre electrodos de tungsteno alojados dentro de un tubo de alúmina o cuarzo moldeado translúcido o transparente.
lámparas más eficientes del mercado, debido a su menor consumo y por la cantidad de luz que emiten. Adquieren una vida útil de hasta 50.000 horas y no generan calor alguna. Si quieres cambiar la iluminación de tu hogar para hacerla mucho más eficiente, ¡esta es tu mejor opción!
Las nuevas lámparas de descarga de alta intensidad producen más luz visible por unidad de energía eléctrica consumida que las lámparas fluorescentes e incandescentes, ya que una mayor proporción de su radiación es luz visible, en contraste con la infrarroja. Sin embargo, la salida de lúmenes de la iluminación HID puede deteriorarse hasta en un 70% durante 10,000 horas de funcionamiento.
Muchos vehículos modernos usan bombillas HID para los principales sistemas de iluminación, aunque algunas aplicaciones ahora están pasando de bombillas HID a tecnología LED y láser.1 Modelos de lámparas van desde las típicas lámparas de 35 a 100 W de los autos, a las de más de 15 kW que se utilizan en los proyectores de cines IMAX.
Esta tecnología HID no es nueva y fue demostrada por primera vez por Francis Hauksbee en 1705. Lámpara de Nernst.
Lámpara incandescente.
Lámpara de descarga. Lámpara fluorescente. Lámpara fluorescente compacta. Lámpara de haluro metálico. Lámpara de vapor de sodio. Lámpara de vapor de mercurio. Lámpara de neón. Lámpara de deuterio. Lámpara xenón.
Lámpara LED.
Lámpara de plasma.
Flash (fotografía) Las lámparas de descarga de alta intensidad (HID) son un tipo de lámparas de descarga de gas muy utilizadas en la industria de la iluminación. Estas lámparas producen luz creando un arco eléctrico entre dos electrodos a través de un gas ionizado. Las lámparas HID son conocidas por su gran eficacia a la hora de convertir la electricidad en luz y por su larga vida útil.
A diferencia de las luces fluorescentes, que necesitan un recubrimiento de fósforo para emitir luz visible, las lámparas HID no necesitan ningún recubrimiento en el interior de sus tubos. El propio arco eléctrico emite luz visible. Sin embargo, algunas lámparas de halogenuros metálicos y muchas lámparas de vapor de mercurio tienen un recubrimiento de fósforo en el interior de la bombilla para mejorar el espectro luminoso y reproducción cromática. Las lámparas HID están disponibles en varias potencias, que van desde los 25 vatios de las lámparas de halogenuros metálicos autobalastradas y los 35 vatios de las lámparas de vapor de sodio de alta intensidad hasta los 1.000 vatios de las lámparas de vapor de mercurio y vapor de sodio de alta intensidad, e incluso hasta los 1.500 vatios de las lámparas de halogenuros metálicos.
Las lámparas HID requieren un equipo de control especial llamado balasto para funcionar
Inteligencia Artificial y Ciberseguridad.pdfEmilio Casbas
Recopilación de los puntos más interesantes de diversas presentaciones, desde los visionarios conceptos de Alan Turing, pasando por la paradoja de Hans Moravec y la descripcion de Singularidad de Max Tegmark, hasta los innovadores avances de ChatGPT, y de cómo la IA está transformando la seguridad digital y protegiendo nuestras vidas.
2. Sobre Rocio Muñoz ZYLK (BILBAO)
Empresa de Software Libre
Trabajo en entornos Java
(Spring, Maven, Ibatis, Oracle, Mysql, Sonar,
Jenkins, Vaadin …)
Web en mi tiempo libre
(Node, Grunt, Bower, Sass, Javascript, Css
… )
Colaboro en Cantabriatic
http://www.cantabriatic.com
INDRA (MADRID)
Departamento Financiero BBVA
CIC CONSUTING (SANTANDER)
Sector Eléctrico Viesgo Distribución
3. WebComponents
Problemas actuales en la web
Evolución de los webcomponents
WebComponents: Qué son
Shadow DOM
Custom Elements
Html Imports
Templates
Polymer: Ejemplo
5. 1.Problemas actuales
Antes el peso de una web estaba en el servidor
Ahora el cliente es cada vez más complejo
Surgen nuevos problemas
1)Encapsulamiento (iframes, !important)
2)Modularidad
3)Extensibilidad
4)Templates
9. 1.Problemas: Templates
●
Si existen templates en lenguajes de tipo servidor
●
Php, Python, Ruby on Rails …
●
En cliente aplicamos javascript para usar templates
●
Angular, Backbone, Ember ...
●
No podemos aplicar templates en el HTML
12. 2. WebComponents. Qué son
●
Conjunto de estandares que nos permitirán crear
nuestros propios elementos Html
●
Formado por 4 estandares:
●
Shadow DOM → Encapsulamiento
●
HTML Imports → Modularidad
●
Templates → Templates
●
Custom Elements → Extensibilidad
13. 2. WebComponents. Shadow DOM
●
Nueva especificación dentro de webComponents que resuelve
los problemas de “encapsulamiento” del CSS/JS
●
Es un árbol DOM encapsulado que convive con el DOM padre
de una web
●
shadow Host: nodo donde se inserta un shadowRoot
●
shadow Root: subarbol aislado de la web que cuelga de Host
document.getSelector(“div”).createShadowRoot();
15. 2. WebComponents. API Shadow DOM
Crear un arbol ShadowDOM
document.querySelector('#selector').createShadowRoot();
Comunicación entre arbol DOM y Shadow DOM
<content select=''></content>
Gestion LIFO entre arboles DOM
<shadow></shadow>
Nuevas etiquetas css
:host, :host(), ::shadow, deep
16. 2. Compatibilidad Shadow DOM
Chrome y Opera trabajan con Shadow DOM
Firefox: about:config (dom.webcomponents.enabled)
17. 2. WebComponents. CustomElements
●
Nueva especificación que resuelve los problemas de extensibilidad
●
Permite al usuario definir nuevas etiquetas HTML
●
Nomenclatura: usar un guion
<my-tag></my-tag>
●
Registro de un Custom Element
var myTag = document.registerElement('my-tag');
document.body.appendChild(new myTag());
19. 2. WebComponents. Html Imports
●
Nueva especificación que nos resuelven los problemas de
modularidad
●
Permite incluir y reutilizar Html en otros documentos Html
Sincrono
<link rel="import" href="component1.html">
Asincrono
<link rel="import" href="component2.html" async>
20. 2. WebComponents. Html Imports
imports a una misma URL
solo se cargan 1 vez
Vulcanize herramienta de
polymer para reducir las
peticiones de red
mezclando todos los
imports en un único
fichero
22. 2. WebComponents. Templates
●
Nueva especificación dentro de webComponents
●
Nos permiten utilizar patrones y formas comunes de trabajar entre
los desarrolladores
●
Templates no son visibles en el DOM hasta que se invocan
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
23. 2. WebComponents. Templates
var t = document.querySelector('#mytemplate');
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
Activamos un
template
25. 2. WebComponents. Polyfills
¿Está lista la web para usar webcomponents?
¿Funcionarán mis aplicaciones en todos los navegadores?
POLYFILL
Trozos de código que permiten añadir funcionalidades nuevas a
navegadores que no lo soportan.
webcomponents.js: Conjunto de polyfills
webcomponents-lite.js: Conjunto más ligero de polyfills sin
soporte para shadow DOM
26. 2. WebComponents. Frameworks
Polymer
Framework para trabajar
con web components.
Es un proyecto de Google
X-Tag
Pequeña libreria de
javascript para trabajar
con WebComponents.
Creado y soportado por
Mozilla
Bosonic
Conjunto de herramientas
para construir
webcomponents.
29. 3. Polymer
Componentes listos para usar en Polymer 1.0
●
paper-elements: elementos UI con estilo Material Design
●
iron-elements: elementos básicos para crear aps
●
google-web-components: servicios de google encapsulados
en forma de webcomponents
●
platinium-elements: notificaciones, cache ...
●
gold-elements: componentes para eccommerce
●
neon-elements: animaciones