El Manual del Día: Windows Presentation Foundation Parte 2

MSDN - Manual de Windows Presentation Foundation Parte 2

Titulo: Manual de Windows Presentation Foundation Parte 2
Fuente Original: Microsoft Developer Network (MSDN)
Compilado Por: Luis Dueñas Huaroto (Lduenas)
Año de Compilación: 2008
Número de Páginas: 473

Indice del Manual de Windows Presentation Foundation (Parte 2)

4. Controles
  4.1. Información General sobre Controles
  4.2. Tutorial: Crear un Botón Animado mediante el uso de XAML
  4.3. Personalización de Controles
    4.3.1. Información General sobre la Creación de Controles
    4.3.2. Instrucciones para el Diseño de Controles con Estilos
    4.3.3. Adornos
      4.3.3.1. Información General sobre Adornos
      4.3.3.2. Temas Cómo de Adornos
        4.3.3.2.1. Cómo: Implementar un Adorno
        4.3.3.2.2 Cómo: Enlazar un Adorno a un Elemento
        4.3.3.2.3. Cómo: Incluir Adornos en los Elementos Secundarios de un Panel
        4.3.3.2.4. Cómo: Quitar un Adorno de un Elemento
        4.3.3.2.5. Cómo: Quitar Todos los Adornos de un Elemento
    4.3.4. Ejemplos de ControlTemplate
      4.3.4.1. Ejemplo de ControlTemplate de Button
      4.3.4.2. Ejemplo de ControlTemplate de CheckBox
      4.3.4.3. Ejemplo de ControlTemplate de ComboBox
      4.3.4.4. Ejemplo de ControlTemplate de ComboBoxItem
      4.3.4.5. Ejemplo de ControlTemplate de ContextMenu
      4.3.4.6. Ejemplo de ControlTemplate para DocumentViewer
      4.3.4.8. Ejemplo de ControlTemplate de Frame
      4.3.4.9. Ejemplo de ControlTemplate de GroupBox
      4.3.4.10. Ejemplo de ControlTemplate de Label
      4.3.4.11. Ejemplo de ControlTemplate de ListBox
      4.3.4.12. Ejemplo de ControlTemplate de ListBoxItem
      4.3.4.13. Ejemplo de ControlTemplate de ListView
      4.3.4.14. Ejemplo de ControlTemplate de ListViewItem
      4.3.4.15. Ejemplo de ControlTemplate de Menu
      4.3.4.16. Ejemplo de ControlTemplate para MenuItem
      4.3.4.17. Ejemplo de ControlTemplate de NavigationWindow
      4.3.4.18. Ejemplo de ControlTemplate para ProgressBar
      4.3.4.19. Ejemplo de ControlTemplate de RadioButton
      4.3.4.20. Ejemplo de ControlTemplate de ScrollBar
      4.3.4.21. Ejemplo de ControlTemplate de ScrollViewer
      4.3.4.22. Ejemplo de ControlTemplate de Slider
      4.3.4.23. Ejemplo de ControlTemplate de StatusBar
      4.3.4.24. Ejemplo de ControlTemplate de TabControl
      4.3.4.25. Ejemplo de ControlTemplate de TabItem
      4.3.4.26. Ejemplo de ControlTemplate de TextBox
      4.3.4.27. Ejemplo de ControlTemplate de ToolBar
      4.3.4.28. Ejemplo de ControlTemplate de ToolTip
      4.3.4.29. Ejemplo de ControlTemplate de TreeView
      4.3.4.30. Ejemplo de ControlTemplate para TreeViewItem
      4.3.4.31. Ejemplo de ControlTemplate de Window
    4.3.5. Automatización de la Interfaz de Usuario de un Control Personalizado de WPF
  4.4. Agrupar Controles por Categoría
  4.5. Modelos de Contenido
    4.5.1. Modelo de Contenido de WPF
    4.5.2. Información General sobre el Modelo de Contenido de Controles
    4.5.3. Información General sobre el Modelo de Contenido de Decorador
    4.5.4. Información General sobre el Modelo de Contenido de Paneles
    4.5.5. Información General sobre el Modelo de Contenido de TextBlock
    4.5.6. Información General sobre el Modelo de Contenido de TextBox
5. Datos
  5.1. Enlace de Datos
    5.1.1. Información General sobre el Enlace de Datos
    5.1.2. Información General sobre Orígenes de Enlaces
    5.1.3. Información General sobre Plantillas de Datos
    5.1.4. Información General sobre Declaraciones de Enlaces
    5.1.5. Temas Cómo sobre Enlace de Datos
      5.1.5.1. Cómo: Crear un Enlace Sencillo
      5.1.5.2. Cómo: Especificar el Origen de Enlace
      5.1.5.3. Cómo: Hacer que los Datos estén Disponibles para el Enlace XAML
      5.1.5.4. Cómo: Controlar Cuándo el Texto de TextBox Actualiza el Origen
      5.1.5.5. Cómo: Especificar la Dirección del Enlace
      5.1.5.6. Cómo: Enlazar a una Colección y Mostrar Información Basada en la Selección
      5.1.5.7. Cómo: Enlazar a una Enumeración
      5.1.5.8. Cómo: Enlazar las Propiedades de dos Controles
      5.1.5.9. Cómo: Implementar la Validación de Enlaces
      5.1.5.10. Cómo: Implementar Lógica de Validación en Objetos Personalizados
      5.1.5.11. Cómo: Obtener el Objeto de Enlace a Partir de una Propiedad de Destino Enlazada
      5.1.5.12. Cómo: Implementar una CompositeCollection
      5.1.5.13. Cómo: Convertir Datos Enlazados
      5.1.5.14. Cómo: Crear un Enlace en Código
      5.1.5.15. Cómo: Obtener la Vista Predeterminada de Recolección de Datos
      5.1.5.16. Cómo: Navegar por los Objetos de una Colección de Datos mediante CollectionView
      5.1.5.17. Cómo: Filtrar Datos en una Vista
      5.1.5.18. Cómo: Ordenar Datos en una Vista
      5.1.5.19. Cómo: Ordenar y Agrupar Datos mediante una Vista en XAML
      5.1.5.20. Cómo: Usar el Patrón Principal Detalle con datos Jerárquicos
      5.1.5.21. Cómo: Usar el Patrón Principal Detalle con Datos XML Jerárquicos
      5.1.5.22. Cómo: Generar un Valor Basado en una Lista de Elementos Enlazados
      5.1.5.23. Cómo: Implementar la Notificación de Cambio de Propiedad
      5.1.5.24. Cómo: Crear y Enlazar a una Colección ObservableCollection
      5.1.5.25. Cómo: Implementar PriorityBinding
      5.1.5.26. Cómo: Enlazar a Datos XML mediante XMLDataProvider y Consultas XPath
      5.1.5.27. Cómo: Enlazar a los Resultados de una Consulta LINQ para XML, XDocument o XElement
      5.1.5.28. Cómo: Usar Espacios de Nombres XML en el Enlace de Datos
      5.1.5.29. Cómo: Enlazar a un Origen de Datos ADO .NET
      5.1.5.30. Cómo: Enlazar a un Método
      5.1.5.31. Cómo: Configurar la Notificación de Actualizaciones de Enlaces
      5.1.5.32. Cómo: Borrar Enlaces
      5.1.5.33. Cómo: Buscar Elementos Generados por un Objeto DataTemplate
      5.1.5.34. Cómo: Enlazar a un Servicio Web
      5.1.5.35. Cómo: Enlazar a los Resultados de una Consulta LINQ
  5.2. Arrastrar y Colocar
    5.2.1. Información General sobre la Función de Arrastrar y Colocar
    5.2.2. Temas Cómo de Arrastrar y Colocar
      5.2.2.1. Cómo: Usar un Control Thumb para Habilitar la Acción de Arrastrar
      5.2.2.2. Cómo: Crear un Objeto de Datos
      5.2.2.3. Cómo: Determinar si un Formato de Datos está Presente en un Objeto de Datos
      5.2.2.4. Cómo: Mostrar los Formatos de Datos en un Objeto de Datos
      5.2.2.5. Cómo: Recuperar Datos en un Formato Concreto
      5.2.2.6. Cómo: Almacenar Varios Formatos de Datos en un Objeto de Datos
6. Documentos
  6.1. Documentos en Windows Presentation Foundation
  6.2. Almacenamiento y Serialización de Documentos
  6.3. Anotaciones
    6.3.1. Información General sobre Anotaciones
    6.3.2. Esquema en Anotaciones
  6.4. Contenido Dinámico
    6.4.1. Información General sobre Documentos Dinámicos
    6.4.2. Información General sobre el Modelo de Contenido de TextElement
    6.4.3. Información General sobre Tablas
    6.4.4. Temas "Cómo..." de Elementos de Contenido Dinámico
      6.4.4.1. Cómo: Ajustar el Espaciado entre Párrafos
      6.4.4.2. Cómo: Generar una Tabla mediante Programación
      6.4.4.3. Cómo: Cambiar la Propiedad FlowDirection de Contenido mediante Programación
      6.4.4.4. Cómo: Cambiar la Propiedad TextWrapping mediante Programación
      6.4.4.5. Cómo: Definir una Tabla con XAML
      6.4.4.6. Cómo: Modificar la Tipografía de Texto
      6.4.4.7. Cómo: Habilitar el Recorte de Texto
      6.4.4.8. Cómo: Insertar un Elemento en Texto mediante Programación
      6.4.4.9. Cómo: Manipular Elementos de Contenido Dinámico mediante la Propiedad Blocks
      6.4.4.10. Cómo: Manipular Elementos de Contenido Dinámico mediante la Propiedad Inlines
      6.4.4.11. Cómo: Manipular un Objeto FlowDocument mediante la Propiedad Blocks
      6.4.4.12. Cómo: Manipular las Columnas de una Tabla mediante la Propiedad Columns
      6.4.4.13. Cómo: Manipular Grupos de Filas de una Tabla mediante la Propiedad RowGroups
      6.4.4.14. Cómo: Usar Elementos de Contenido Dinámico
      6.4.4.15. Cómo: Usar Atributos de Separación de Columnas FlowDocument
  6.5. Tipografía
    6.5.1. Tipografía en Windows Presentation Foundation
    6.5.2. Información General sobre ClearType
    6.5.3. Configuración del Registro de ClearType
    6.5.4. Dibujar Texto con Formato
    6.5.5. Formato de Texto Avanzado
    6.5.6. Fuentes en WPF
      6.5.6.1. Características de las Fuentes OpenType
      6.5.6.2. Empaquetar Fuentes con Aplicaciones
      6.5.6.3. Paquete de Fuentes OpenType de Ejemplo
      6.5.6.4. Temas Cómo sobre Fuentes
        6.5.6.4.1. Cómo: Enumerar Fuentes del Sistema
        6.5.6.4.2. Cómo: Utilizar la Clase FontSizeConverter
    6.5.7. Glifos
      6.5.7.1. Introducción al Objeto GlyphRun y al Elemento Glyphs
      6.5.7.2. Dibujar Texto mediante Grifos
    6.5.8. Temas Cómo sobre Tipografía
      6.5.8.1. Cómo: Crear una Decoración de Texto
      6.5.8.2. Cómo: Usar una Decoración de Texto con un Hipervínculo
      6.5.8.3. Cómo: Aplicar Transformaciones a Texto
      6.5.8.4. Cómo: Aplicar Animaciones a Texto
      6.5.8.5. Cómo: Crear un Efecto de Texto
      6.5.8.6. Cómo: Crear Texto con Sombreado
      6.5.8.7. Cómo: Crear Texto con Contorno
      6.5.8.8. Cómo: Crear una Animación de PathGeometry para Texto
      6.5.8.9. Cómo: Dibujar Texto en el Fondo de un Control
      6.5.8.10. Cómo: Dibujar Texto en un Elemento Visual
      6.5.8.11. Cómo: Establecer Propiedades Tipográficas
      6.5.8.12. Cómo: Usar Caracteres Especiales en XAML
  6.6. Imprimir y Administración de Sistemas de Impresión
    6.6.1. Información General sobre Impresión
    6.6.2. Temas Cómo de Impresión
      6.6.2.1. Cómo: Invocar un Cuadro de Diálogo de Impresión
      6.6.2.2. Cómo: Clonar una Impresora
      6.6.2.3. Cómo: Diagnosticar Trabajos de Impresión Problemáticos
      6.6.2.4. Cómo: Detectar si un Trabajo de Impresión se puede Imprimir en esta Hora del Día
      6.6.2.5. Cómo: Enumerar un Subconjunto de Colas de Impresión
      6.6.2.6. Cómo: Ampliar el Esquema de Impresión y Crear Nuevas Clases del Sistema de Impresión
      6.6.2.7. Cómo: Obtener Propiedades de un Objeto de Sistema de Impresión sin Reflexión
      6.6.2.8. Cómo: Imprimir mediante Programación Archivos XPS
      6.6.2.9. Cómo: Supervisar de forma Remota el Estado de las Impresoras
      6.6.2.10. Cómo: Validar y Combinar Elementos PrintTicket
7. Gráficos y Multimedia
  7.1. Información General sobre Características de Gráficos, Animación y Multimedia en WPF
  7.2. Información General sobre la Representación de Gráficos en WP
  7.3. Gráficos
    7.3.1. Efectos de Mapa de Bits
      7.3.1.1. Información General sobre Efectos de Mapa de Bits
      7.3.1.2. Temas Cómo de Efectos de Mapa de Bits
        7.3.1.2.1. Cómo: Crear un Efecto de Resplandor en el Margen Externo de un Objeto
        7.3.1.2.2. Cómo: Animar un Efecto de Resplandor
        7.3.1.2.3. Cómo: Animar Efectos de Mapa de Bits
        7.3.1.2.4. Cómo: Aplicar un Efecto de Desenfoque a un Objeto Visual
        7.3.1.2.5. Cómo: Animar un Efecto Visual de Desenfoque
        7.3.1.2.6. Cómo: Crear un Efecto Visual de Sombra Paralela
        7.3.1.2.7. Cómo: Animar un Efecto Visual de Sombra Paralela
        7.3.1.2.8. Cómo: Crear un Efecto Visual con Bisel
        7.3.1.2.9. Cómo: Animar un Efecto Visual con Bisel
        7.3.1.2.10. Cómo: Crear un Efecto Visual con Relieves
        7.3.1.2.11. Cómo: Animar un Efecto Visual con Relieves
        7.3.1.2.12. Cómo: Crear Varios Efectos Visuales
        7.3.1.2.13. Cómo: Animar Varios Efectos Visuales
        7.3.1.2.14. Cómo: Usar un Efecto Visual Personalizado
        7.3.1.2.15. Cómo: Aplicar un Efecto a Parte de una Imagen
        7.3.1.2.16. Cómo: Animar un Efecto dentro de un BitmapEffectGroup
    7.3.2. Pinceles
      7.3.2.1. Información General sobre Pinceles de WPF
      7.3.2.2. Información General sobre la Transformación de Pinceles
      7.3.2.3. Información General sobre las Máscaras de Opacidad
      7.3.2.4. Información General sobre el Dibujo con Colores Sólidos y Degradados
      7.3.2.5. Pintar con Imágenes, Dibujos y Elementos Visuales
      7.3.2.6. Información General sobre Objetos TileBrush
      7.3.2.7. Temas Cómo de Pinceles
        7.3.2.7.1. Cómo: Animar el Color o la Opacidad de un Objeto SolidColorBrush
        7.3.2.7.2. Cómo: Animar la Posición o Color de un Punto de Degradado
        7.3.2.7.3. Cómo: Crear una Reflexión
        7.3.2.7.4. Cómo: Crear Patrones de Mosaico diferentes con un Objeto TileBrush
        7.3.2.7.5. Cómo: Definir un Lápiz
        7.3.2.7.6. Cómo: Pintar un Area con un Dibujo
        7.3.2.7.7. Cómo: Pintar un Area con una Imagen
        7.3.2.7.8. Cómo: Pintar un Area con un Degradado Lineal
        7.3.2.7.9. Cómo: Pintar un Area con un Degradado Radial
        7.3.2.7.10. Cómo: Pintar un Area con un Color Sólido
        7.3.2.7.11. Cómo: Pintar un Area con un Pincel del Sistema
        7.3.2.7.12. Cómo: Pintar un Area con un Vídeo
        7.3.2.7.13. Cómo: Pintar un Area con un Objeto Visual
        7.3.2.7.14. Cómo: Conservar la Relación de Aspecto de una Imagen utilizada como Fondo
        7.3.2.7.15. Cómo: Establecer la Alineación Horizontal y Vertical de TileBrush
        7.3.2.7.16. Cómo: Establecer el Tamaño del Mosaico de un TileBrush
        7.3.2.7.17. Cómo: Transformar un Pincel
        7.3.2.7.18. Cómo: Usar Colores del Sistema en un Degradado
    7.3.3. Dibujos
      7.3.3.1. Información General sobre Objetos Drawing
      7.3.3.2. Temas Cómo de Dibujo
        7.3.3.2.1. Cómo: Aplicar un Objeto BitmapEffect a un Dibujo
        7.3.3.2.2. Cómo: Aplicar un Objeto GuidelineSet a un Dibujo
        7.3.3.2.3. Cómo: Aplicar una Máscara de Opacidad a un Dibujo
        7.3.3.2.4. Cómo: Aplicar una Transformación a un Dibujo
        7.3.3.2.5. Cómo: Recortar un Dibujo
        7.3.3.2.6. Cómo: Controlar la Opacidad de un Dibujo
        7.3.3.2.7. Cómo: Crear un Dibujo Compuesto
        7.3.3.2.8. Cómo: Crear un Objeto GeometryDrawing
        7.3.3.2.9. Cómo: Dibujar una Imagen usando Objeto ImageDrawing
        7.3.3.2.10. Cómo: Reproducir Elementos Multimedia con un Objeto VideoDrawing
        7.3.3.2.11. Cómo: Usar un Dibujo como el Origen de una Imagen
    7.3.4. Geometrías
      7.3.4.1. Sintaxis de Marcado de Trazados
      7.3.4.2. Información General sobre Geometría
      7.3.4.3. Temas Cómo de Objetos de Geometría
        7.3.4.3.1. Cómo: Animar una Región de Recorte
        7.3.4.3.2. Cómo: Animar un EllipseGeometry
        7.3.4.3.3. Cómo: Animar el Tamaño de un Objeto ArcSegment
        7.3.4.3.4. Cómo: Controlar el Relleno de una Forma Compuesta
        7.3.4.3.5. Cómo: Crear una Región de Recorte
        7.3.4.3.6. Cómo: Crear una Geometría Combinada
        7.3.4.3.7. Cómo: Crear una Forma Compuesta
        7.3.4.3.8. Cómo: Crear una Curva Bézier Cúbica
        7.3.4.3.9. Cómo: Crear una Línea mediante la Clase LineGeometry
        7.3.4.3.10. Cómo: Crear un Segmento de Línea en una Clase PathGeometry
        7.3.4.3.11. Cómo: Crear una Forma mediante una Clase PathGeometry
        7.3.4.3.12. Cómo: Crear una Forma utilizando StreamGeometry
        7.3.4.3.13. Cómo: Crear una curva Bézier Cuadrática
        7.3.4.3.14. Cómo: Crear un Arco Elíptico
        7.3.4.3.15. Cómo: Crear Varios Subtrazados en un PathGeometry
        7.3.4.3.16. Cómo: Definir un Rectángulo usando una Clase RectangleGeometry
        7.3.4.3.17. Cómo: Redondear las Esquinas de un RectangleGeometry

Descarga

Manual_Windows_Presentation_Foundation_Parte2

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