Curso de Inteligencia Artificial en el Browser con JavaScript

 

El Libro del Día: WebGL Insights

El Libro del Día: 2016-12-27

Titulo: WebGL Insights
Editor: Patrick Cozzi
Publicador: CRC Press
Nro Paginas: 416

Capítulos:
Section I WebGL Implementations
1 ANGLE: A Desktop Foundation for WebGL
2 Mozilla’s Implementation of WebGL
3 Continuous Testing of Chrome’s WebGL Implementation
Section II Moving to WebGL
4 Getting Serious with JavaScript
5 Emscripten and WebGL
6 Data Visualization with WebGL: From Python to JavaScript
7 Teaching an Introductory Computer Graphics Course with WebGL
Section III Mobile
8 Bug-Free and Fast Mobile WebGL
Section IV Engine Design
9 WebGL Engine Design in Babylon.js
10 Rendering Optimizations in the Turbulenz Engine
11 Performance and Rendering Algorithms in Blend4Web
12 Sketchfab Material Pipeline: From File Variations to Shader Generation
13 glslify: A Module System for GLSL
14 Budgeting Frame Time
Section V Rendering
15 Deferred Shading in Luma
16 HDR Image-Based Lighting on the Web
17 Real-Time Volumetric Lighting for WebGL
18 Terrain Geometry - LOD Adapting Concentric Rings
Section VI Visualization
19 Data Visualization Techniques with WebGL
20 hare3d - Rendering Large Models in the Browser
21 The BrainBrowser Surface Viewer: WebGL-Based Neurological Data Visualization
Section VII Interaction
22 Usability of WebGL Applications
23 Designing Cameras for WebGL Applications

Descarga:
WebGL_Insights

Artículo - Pruebas de Performance

Pruebas de Performance

En este artículo veremos un caso práctico de pruebas del software: las pruebas de performance, que son las más necesarias en los sistemas web, debido al creciente incremento de usuarios y sobre todo de dispositivos que se pueden conectar a una aplicación web.

1. Criterios para Medir la Performance

Primero debemos entender que la medición de la performance de un sitio web se realiza a nivel de cada página, es decir, para medir la performance de todo el sitio web debemos medir la performance de cada página y luego hacer un promedio.

Entre las principales métricas para medir la performance de una página tenemos:

• Tiempo de carga (Load Time)
• Tiempo del primer byte recibido (First Byte)
• Índice de velocidad (Speed Index)
• Elementos del Modelo de Objetos del Documento (DOM Elements)

Por otra parte, estas métricas deben aplicarse en 2 momentos

• La primera vez (First View)
• Las demás veces (Repeat View)

Solo para recordar, hay que mencionar que los principales factores que afectan a la performance son:

• Cantidad de solicitudes hechas por la página (Request)
• Cantidad de datos enviados al cliente (Bytes)

Para obtener un buen puntaje debemos hacer la menor cantidad de solicitudes en cada página, es decir, usando pocos archivos CSS, JavaScript, Imágenes y Fuentes.

Además cada archivo debe tener la menor cantidad de datos, es decir, solo lo que se va a usar; en el caso de CSS las clases, en el caso de JavaScript las funciones y en el caso de las imágenes y las fuentes tienen que estar optimizadas.

2. Herramientas para Pruebas de Performance

Existen muchas herramientas para medir la performance, entre las más usadas en el mundo tenemos:

2.1. YSlow

Esta herramienta fue la primera en medir la performance y la primera versión fue creada por Steve Souders en Yahoo en el 2007, actualmente está disponible la versión 2.0 mantenida por Marcel Duran de Twitter.

YSlow es un complemento que se agrega al navegador (Browser) y está disponible para casi todos los navegadores (Firefox, Chrome, Safari, Opera, etc.) menos para Microsoft Internet Explorer.

URL: http://yslow.org/

Página Web de YSlow

Esta herramienta, identifica 34 criterios claves de los cuales actualmente usa 23 criterios para medir la performance de la página, los cuales se muestran en la siguiente figura.

Criterios para Medir Performance de YSlow V2.0

2.2. PageSpeed Insights

Esta herramienta desarrollada por Google en el 2013, inicialmente estaba disponible como una extensión para los navegadores, pero actualmente está disponible como una página web dentro del sitio de desarrolladores de Google.

Una de las ventajas de esta herramienta es que analiza la performance tanto para Desktop como para dispositivos móviles.

URL: https://developers.google.com/speed/pagespeed/insights/

Página Web de PageSpeed Insights

2.3. WebPageTest

Es una herramienta inicialmente desarrollada por AOL en el 2008 y actualmente mantenida por Google. 

Es una de las más usadas actualmente ya que muestra información completa de todas las métricas de performance vistas anteriormente.

URL: http://www.webpagetest.org/

Página Web de WebPageTest

3. Página de Prueba: Login del Sistema

Para las pruebas con las 3 herramientas hemos tomado la página de login de un sistema ubicado en la siguiente dirección.

URL: http://red.hteperu.com/test/Incentivos.Appweb/

Página Web de Prueba

Solo hay que resaltar que la página está en ASP.NET MVC y se compone de lo siguiente:

• 1 archivo html para la página
• 1 archivo de hoja de estilo: Login.css
• 2 archivos de JavaScript: md3.js y Login.js
• 2 archivos de fuentes: regular.woff y regular.woff2

Las pruebas se harán usando Google Chrome V46.0.2490.86 m (64 bits)

4. Pruebas de Performance usando YSlow

Después de descargar el complemento YSlow V2.0 abrir la herramienta y realizar los siguientes pasos:

• Ir a la dirección URL: http://red.hteperu.com/test/Incentivos.Appweb/.

• Clic al botón “Run Test” de la ficha “Home” similar a lo mostrado en la figura.

Ficha Inicio de YSlow V2.0

• Automáticamente se irá a la ficha “Grade” similar a lo mostrado en la figura.

Ficha Grado de YSlow V2.0

• En esta ficha se aprecia el puntaje obtenido por la página, en este caso “93 puntos” obteniendo el grado “A” que significa un buen resultado.

• Para mejorar el puntaje necesitamos usar CDN (grado C), usar cabeceras de expiración (grado E), configurar Entity Tags (grado D).

• Si deseamos ver el detalle por tipo de archivos seleccionamos la ficha “Components” y se mostrará algo similar a la siguiente figura.

Ficha Componentes de YSlow V2.0

• En la figura notamos que aparece un mensaje de color rojo indicando que No se encuentra el archivo favicon (icono de la página web).

• Si deseamos ver una estadística de archivos por tipos seleccionamos la ficha “Statistics” y se mostrará algo similar a la siguiente figura.

Ficha Estadística de YSlow V2.0

Finalmente, en esta ficha podemos darnos cuenta de que solo se está guardando en cache los archivos de hojas de estilos (css) y de JavaScript (js) pero no la página principal y el icono de inicio (ya que éste no existe).

En términos generales, diremos que hemos pasado la prueba de performance usando YSlow V2.0 de Yahoo.

 

5. Pruebas de Performance usando PageSpeed Insights

Para realizar las pruebas con esta herramienta realizar los siguientes pasos:

• Ir a la dirección URL: 

https://developers.google.com/speed/pagespeed/insights/.

• Ingresar la dirección de la página web con el login:

http://red.hteperu.com/test/Incentivos.Appweb/

• Clic al botón “Analize” tal como se muestra en la siguiente figura.

Página principal de PageSpeed Insights

• Automáticamente aparecerá los resultados de la ficha “Mobile” que tiene 2 partes: Velocidad y Experiencia de Usuario.

• A continuación se muestra un gráfico con la sección de “Velocidad” de la ficha “Mobile”.

Sección Velocidad de la ficha Mobile de PageSpeed Insights

• Aquí se aprecia que se ha fallado en 2 reglas y se ha pasado 8 reglas. Los 2 temas a mejorar son cargar asíncronamente el archivo CSS y el otro es usar cabeceras de expiración para guardar en cache los archivos JS y CSS.

• A continuación se muestra un gráfico con la sección de “Experiencia de Usuario” de la ficha “Mobile”.

Sección Experiencia de Usuario de la ficha Mobile de PageSpeed Insights

• En esta se aprecia que no hay ningún problema de experiencia de usuario si la página se ve en un dispositivo móvil.

• Si cambiamos a la ficha “Desktop” ésta tiene solo la parte de Velocidad que es exactamente la misma que la de la ficha Mobile.

• A continuación se muestra un gráfico con la sección de “Velocidad” de la ficha “Desktop”.

Sección Velocidad de la ficha Desktop de PageSpeed Insights

• En términos generales, podemos decir que también hemos pasado la prueba de performance usando PageSpeed Insights de Google.

6. Pruebas de Performance usando WebPageTest

Para realizar las pruebas con esta herramienta realizar los siguientes pasos:

• Ir a la dirección URL: 

http://www.webpagetest.org/.

• Ingresar la dirección de la página web con el login:

http://red.hteperu.com/test/Incentivos.Appweb/

• Clic al botón “Start Test” tal como se muestra en la siguiente figura.

Página principal de WebPageTest

• Aparece un mensaje de probando (Testing) y luego se muestra el resultado del test similar al de la siguiente figura.

Página de Resultado de la Prueba en WebPageTest

• Nuevamente apreciamos que la página web está casi bien excepto que debe usar Cache para archivos JS y CSS (F) y usar CDN (X).

• Podemos analizar la primera ficha “Summary” que muestra un resumen con una tabla con los tiempos de carga y un par de gráficos con la primera vista y la vista repetida, similar a la siguiente figura.

Ficha Resumen del Resultado de WebPageTest

• La segunda ficha “Details” muestra mayor detalle de los tiempos de carga, un gráfico de cascada, un gráfico de conexiones y una tabla con las solicitudes realizadas por la página.

• El gráfico de cascada o “Waterfall View” muestra los tiempos de carga por cada recurso de la página, similar a la siguiente figura.

 Vista Cascada de la Ficha Detalle del Resultado de WebPageTest

• El gráfico de conexión o “Connection View” muestra los tiempos de carga por conexiones realizadas al servidor, similar a la siguiente figura.

Vista Conexión de la Ficha Detalle del Resultado de WebPageTest

• Finalmente en la sección de Detalles la tabla “Request Details” muestra los detalles de las solicitudes realizadas por la página, similar a la siguiente figura.

Detalles de Solicitud de la Ficha Detalle del Resultado de WebPageTest

• Las filas pintadas de color rojo indican peligro, en este caso, el archivo de fuentes woff2 no ha sido registrado en el servidor como extensión conocida (MIME) y el otro problema es que la página no cuenta con un icono de inicio.

• La tercera ficha “Performance Review” permite mostrar una revisión de las métricas de performance, para lo cual presenta una tabla con la lista de verificación a mejorar, el detalle y un glosario.

Lista de verificación de la Ficha Revisión del Resultado de WebPageTest

• En el “CheckList” se aprecia claramente los temas que se pueden mejorar (color rojo), el archivo de fuente woff2 y el archivo de icono, además de usar caché para contenido estático (CSS, JS) y usar un servidor CDN.

Detalles de la Ficha Revisión del Resultado de WebPageTest

Glosario de la Ficha Revisión del Resultado de WebPageTest

• La cuarta ficha “Content Breakdown” permite desglosar el contenido por tipo de recurso, mostrando 4 gráficos: por tipo MIME y por Conexión, tanto para la primera vista como para las vistas repetidas.

Gráfico por Tipo MIME (Primera Vista) de la Ficha Desglosar Contenido del Resultado de WebPageTest

Gráfico por Conexión (Primera Vista) de la Ficha Desglosar Contenido del Resultado de WebPageTest

Gráfico por Tipo MIME (Vista Repetida) de la Ficha Desglosar Contenido del Resultado de WebPageTest

Gráfico por Conexión (Vista Repetida) de la Ficha Desglosar Contenido del Resultado de WebPageTest

• La quinta ficha “Domains” muestra 2 gráficos de desglose de contenido pero por dominio, tanto para la primera vista como para las vistas repetidas.

• Solo hay que mencionar que No es necesario tenar varios Dominios (incluyendo CDN) cuando el número de archivos es poco, por ejemplo en nuestro caso, la página de login tiene solo 6 archivos.

• A continuación se muestra los gráficos de la ficha “Domains” conteniendo el desglose de contenidos para la primera vista y para las vistas repetidas.

Gráfico de desglose de contenido (Primera Vista) de la Ficha Dominio del Resultado de WebPageTest

Gráfico de desglose de contenido (Vista Repetida) de la Ficha Dominio del Resultado de WebPageTest

• Finalmente, revisaremos la sexta y última ficha llamada “Screen Shot” que muestra 2 gráficos con las pantallas de la página totalmente cargada y otra con el Documento Completado, además también los mensajes de consola del Log.

• A continuación se muestra los gráficos de la ficha “Screen Shot” y los mensajes del Log.

Gráfico de la Pantalla Totalmente Cargada de la Ficha Captura de Pantalla del Resultado de WebPageTest

Gráfico de la Pantalla con Documento Completado de la Ficha Captura de Pantalla del Resultado de WebPageTest

Gráfico de Log de la Ficha Captura de Pantalla del Resultado de WebPageTest

• En términos generales, podemos decir que también hemos pasado la prueba de performance usando WebPageTest de Google.

Finalmente, si hacemos caso de las sugerencias de estas 3 herramientas de performance nuestro sitio será muy rápido.

Descarga del documento completo
Pruebas_Performance

Personajes de la Computación - Google

Personajes de la Computación - Google

Google Inc es una empresa de Estados Unidos creada en 1998 por Lawrence Edward Page (conocido como "Larry") y Serguéi Brin, quienes un par de años antes habían desarrollado un motor de búsqueda en la Universidad de Stanford cuando eran estudiantes de Postgrado en la Facultad de Ciencias de la Computación.

Desde que se fundo, Google, es una compañía que creció rápidamente gracias a los productos innovadores que creó o que compró y tan bien debido al personal altamente calificado que trabaja en esta gran empresa, los cuales son reclutados de diferentes países del mundo sobre todo de USA, UK, Canadá, India, Brasil, Australia, etc.

Entre sus productos principales tenemos: Google AdWords (2000), Gmail (2004), Google Maps y Google Earth (2005), Google Docs, Google Finance, Google Calendar, Google Apps y YouTube (2006), Android (2007), Google Chrome (2008), Nexus One y Google Tv (2010), ChromeBooks y Google + (2011), Google Glass (2012), etc.

Sin duda es una empresa que invierte mucho en Investigación y Desarrollo, y junto a Mozilla son las empresas que en los últimos años han contribuido mas al desarrollo de la Web e Internet, ya que son los principales colaboradores de la W3C, sobre todo en el tema de HTML5, CSS3 y JavaScript que es la trilogía por la cual se esta apostando mucho.

En este post veremos algunas personas que son parte importante del equipo de Google, desde sus fundadores hasta los principales evangelistas (que también son desarrolladores), algunos de los cuales tienen libros muy importantes que vamos a compartir.

Larry Page y Serguéi Brin

País Origen: USA y Rusia
Año de Nacimiento: 1973 (41 años ambos)
Creadores de: Google (1998)

Enlaces:
Historia_Google
Biografia_Larry_Page
Biografia_Serguéi_Brin

Steve Souders

País Origen: USA
Año de Nacimiento: ? (+50 años)
Especialista en: Web Performance
Creador de: YSlow, HTTP Archive, Cuzillion, jDrop, SpriteMe, ControlJS, BrowserScope
Co-Fundador: Firebug Working Group
Trabajos: Helix Systems, CoolSync, General Magic, WhoWhere, Lycos, Yahoo, Google

Enlaces:
Sitio_Web
Amazon

Libros:
Steve_Souders_2007_High_Performance_Web_Sites

Steve_Souders_2009_Even_Faster_Web_Sites

Paul Irish

País Origen: USA
Año de Nacimiento: 1982 (32 años)
Especialista en: Google Chrome, HTML5 & CSS3
Colaborador Librerías: jQuery, Modernizr, Yeoman, HTML5 Boilerplate
Colaborador Sitios: HTML5 Readiness, HTML5 Rocks, CSS3 Please, HTML5 Please

Enlaces:
Biografia_Paul_Irish
Google_Plus
HTML5_Readiness
HTML5_Rocks

Eric Bidelman

País Origen: USA
Año de Nacimiento: ? (+30 años)
Especialista en: Google Chrome, HTML5, Web Components & Polymer
Colaborador Librerías: University of Michigan, Google Docs, OAuth APIs
Colaborador Sitios: HTML5 Rocks, Web Components, Polymer

Enlaces:
Google_Plus
Web_Components
Polymer

Libros:
Eric_Bidelman_2011_Using_HTML5_Filesystem_API

Ilya Grigorik

País Origen: Bielorrusia
Año de Nacimiento: ? (+30 años)
Especialista en: Web Performance & Optimization
Colaborador Librerías: PageSpeed, Chrome, GitHub Archive
Colaborador Sitios: HTML5 Rocks, GitHub, Udacity

Enlaces:
Sitio_Web
Google_Plus
GitHub
GitHub Archive
Curso_Udacity

Libros:
Ilya_Grigorik_2013_High_Performance_Browser_Networking

Colt McAnlis

País Origen: USA
Año de Nacimiento: ? (+30 años)
Especialista en: Games, HTML5, Performance
Colaborador Sitios: HTML5 Rocks, The Workbench, Udacity
Trabajos: Petroglyph, TKO Software, Microsoft Ensemble Studios, Blizzard Entertainment, Google

Enlaces:
Google_Plus
Blog_TheWorkbench
Curso_Udacity

Libros:
Colt_McAnlis_2014_HTML5_Game_Development_Insights

Comentario Final

Hemos visto algunos personajes principales del equipo de Google, pero hay otros que también vale la pena mencionar como:
- Greg Simon y Darin Fisher (Chrome)
- Rob Dodson y Paul Lewis (Material Design)
- Alex Russell y Nat Duca (Performance)
- Dimitri Glazkov y Matthew McNulty (Web Components & Polymer)
- Addy Osmani (Chrone, JavaScript, Web Components)
- Seth Ladd (Chrome, HTML5 y Dart)

Los principales eventos de Google donde se pueden ver las conferencias de los últimos temas para desarrolladores con los personajes mas importantes son el: Google I/O y el Chrome Dev Summit organizados por la casa matriz, pero también existen otras conferencias independientes donde asisten muchos de ellos como: HTML5DevConf, O'Reilly Fluent y el Velocity.

Finalmente, este post es mi regalo de navidad para todos los seguidores del Blog, ya que hemos visto un poco sobre los creadores (2) y los personajes mas destacados de Google (5), y mencionamos a otros (10), información que no se encuentra compilada en la web y que me demoro publicarla, esperando que sea de su agrado.

Saludos y Felices Fiestas.