Nicolas Bortolotti

Hoy me hice una pregunta que muchos de ustedes quizás tienen en mente... Cuál es la librería #Javascript más utilizada en nuestra Web Actual. Es complicado responder esta pregunta, pero para generar una aproximación, nosotros podríamos trabajar con la información que provee #httparchive. [se están analizando unos 500k sitios] y crear en unos minutos un simple análisis de datos. Rick Viscomi en este artículo menciona, que se agrega una nueva métrica personalizada que permite realizar nuevos análisis, esto nos va a servir para tener una idea de las librerías JS que utilizan estos sitios analizados por #httparchive. [ https://discuss.httparchive.org/t/javascript-library-detection/955 ] Veamos un top-ten de las librerías JS utilizadas: Resultados: Podemos pasar estos valores a una representación visual y tenemos, Tabla analizada: 2017_04_15_js_libs Las librerías Javascript más populares según #httparchive por Nicolas Bortolotti se distribuye bajo una Licencia Creat...

Optimizar la eficacia del contenido para los portales web/web móviles actuales parecería algo asumido pero, ¿podemos asegurar eso? En el portal de developers de #Google #Web #Fundamentals pueden encontrar muy buenos artículos. Visión general de la optimización de contenidos. También pueden revisar la sección donde se explica la optimización en la codificación y transferencia de recursos basados en texto. Parece directamente asumido que la compresión gzip está activa en todos los portales de mayor impacto, solo quería validar esta presunción. ¿Como? Vamos a utilizar los datos portados a BigQuery de httparchive.org Utilizaremos la sección donde se registran los HARs de análisis realizados y la tabla de 2016_01_01_android_pages.   Solo tenemos la url analizada y el payload en json, con un diseño como este: Como el análisis está realizado con WPT podemos obtener directamente el gzip_score . ¿Como se imaginan esto?  Con BigQuery es muy simple: ...

La última entrega de la sería más extensa de lo normal, la verdad me costó encontrar algunos errores en la escritura de código en vivo :) En el video de implementación hice una referencia a un posible #issue de implementación sobre el código ejemplificado. Pero ambas implementaciones funcionan correctamente. Les dejo las dos versiones: En el ejemplo trabajamos la carga de imágenes,  para la implementación es importante y para la arquitectura del ejemplo también, por los recursos requeridos. Para esto hacemos uso de la poderosa función de #Storage de #Firebase. Aquí pueden repasar desde luego el video completo: También la serie de principio a fin con el porting del ejemplo al español. Donde se hacen todos los pasos propuestos. La última entrega de la serie, #Firebase #FriendlyChat, envío de imágenes por Nicolas Bortolotti se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional .

El tema de las reglas de seguridad en #Firebase generalmente se minimiza pero, como están deduciendo en este momento, son muy importantes. #Firebase incorpora un lenguaje flexible para esta configuración. Además algo que me pareció muy interesante es el simulador que permite rápidamente detectar el comportamiento de las reglas aplicadas. Más detalles desde el sitio oficial aquí . Practicando con el simulador, veamos una animación donde validamos las reglas para usuarios autenticados. Ahora, cambiamos la regla de lectura genérica, para solo permitir a modo de ejemplo la autenticación utilizando el proveedor #google. En el video propuesto a continuación, y siguiendo el desarrollo del este #codelab propuesto por el equipo de #googledevelopers, ponemos en práctica la descripción básica sobre las reglas de seguridad en #Firebase. Aplicando reglas de seguridad para la base de datos en #Firebase por Nicolas Bortolotti se distribuye bajo una Licencia Creative Commons Atribu...

#Firebase propone una interesante lista de características que para determinados desafíos de desarrollo es fundamental conocer. En este artículo vamos a seguir los primeros pasos de un muy buen #codelab propuesto por el equipo de #GoogleDevelopers. [ FriendlyChat . Fig.1]. El paso a paso oficial completo lo pueden encontrar aquí . Fig.1 repositorio oficial del codelab Inicialmente vamos a configurar el proyecto e instalar la herramientas de línea de comando. Pueden ver los detalles de implementación en este video: En el paso 2 vamos a configurar el inicio de sesión con #Firebase . Pueden ver los detalles de implementación en este video. En el paso 3 vamos a configurar la lectura de mensajes , utilizando un atajo [importando un archivo json con mensajes preconfigurados para simular mensajes escritos]. No se preocupen que en las siguientes entregas, configuraremos la escritura de mensajes y dejaremos operativo el chat. Firebase desde el entorno web, impleme...

En este recorrido por LatAm he disfrutado mucho la conexión con las comunidades de desarrollo y cada conversación sobre alguno de los 7 entornos prácticos planteados en la conferencia #7 arquetipos de la tecnología moderna. Fig.1 Ejemplo presentado Hoy les quiero compartir el entornos presentado para Polymer1.0 . En primero lugar voy a recrear el polymer starter kit para reducir la curva de complejidad en la demostración. Luego vamos a concentrarnos en el sector central de contenido de la template y dentro de los iron-elements [= core-elements de la version 0.5]. Fig.2 iron-pages Para trabajar este efecto generalmente buscado en el pensamiento diseño Material, implementamos como se muestra en la Fig.2 los elementos iron-pages. Este elemento tiene una propiedad de elevación con lo cual podemos controlar el #eje-z bien simple variando los valores como lo propone la Fig.3 y 4 Fig.3 paper-material element Fig.4. Propiedades de elevación Dentro de cada page la idea es...

Hoy quería compartir con ustedes un enfoque simple y ágil sobre el análisis de rendimiento pensado sobre un entorno  web-mobile. Este tipo de técnicas ya se utilizan a diario en mundo web tradicional pero actualmente el despertar del mundo mobile y con sus aristas mobile-web han despertado necesidad e interés en cada referente tecnológico. La idea es muy simple, vamos a trabajar el camino crítico de renderización de una web-page, y al llevar el concepto a mobile-web estos elementos se hacen mucho más críticos... Para esta actividad utilizaremos RAIL [Response-Animation-Idle-Load] y en concreto trabajaremos sobre el elemento #Load. Fig.1 camino crítico de renderización Vamos a empezar por representar el DOM y el CSSOM, en un ejemplo relativamente simple. html: css: Como representarías el DOM y el CSSOM ? esta actividad representaría el primero de los pasos para recorrer el camino crítico de renderización y por supuesto optimizar nuestro ambiente web-mobile. Fig....

Para este artículo les traigo un análisis sobre patrones de diseño, la idea es repasar un poquito el tema de forma genérica y esta actividad que sea disparador para aplicar un patrón particular, "El Composite". Introducción Si vamos a hablar de patrones de diseño, es necesario definir: ¿Qué es diseño? (dentro del proceso de desarrollo de software) ¿Qué es un patrón? Finalmente ¿Qué es un patrón de diseño? Veamos, el diseño es una actividad, definir el "como" frente al "qué", hacerlo correcto frente a hacer lo correcto… ¿Somos consientes de estos puntos descriptos cuando diseñamos? Sin duda el diseño es una actividad compleja, sabemos que los requerimientos no funcionales son conflictivos. Cuales serian nuestras propiedades no funcionales a realizar: Reutilización Facilidad de modificación Facilidad de comprensión Robustez Eficiencia …. ¿Suenan lindas no? Lo concreto es que las técnicas para conseguir la calidad están menos desarrolladas que las usadas para...

Para este artículo de corte simple, les traigo algunos comentarios sobre cómo podemos dotar a nuestro Sitio Web de Temas aplicando pieles y estilos. En primer lugar voy a definir un escenario web simple, para este caso voy a utilizar Visual Studio 2008 con lenguaje C# para el esquema programático. Como vemos en el escenario es una page simple que contiene una etiqueta y una caja de texto. Vamos a crear el soporte para temas, esto comprende agregar la carpeta temas a nuestro site: Luego vamos a crear dentro de la carpeta un skin y una hoja de estilo de soporte: Veamos la simple estructura de los estilos: Para este ejemplo solo tengo definidos el cuerpo, párrafo y dos class para el manejo del texto y etiquetas. Ahora veamos el skin: Donde tengo declarado dentro del mismo a las etiquetas y cajas de texto, haciendo referencias a mi estilo, caso de EtiquetaGeneral y Texto. En este punto, solo resta decirle a todo mi sitio que respete el tema desarrollado, esto se logra configurando el ...