Desarrollo .NET, Web, HTML5, JavaScript, Móviles y Más: Vista

Mostrando las entradas con la etiqueta Vista. Mostrar todas las entradas

viernes, 24 de noviembre de 2017

El Manual del Día: Visual Web Developer Parte 2

MSDN - Manual de Visual Web Developer Parte 2

Titulo: Manual de Visual Web Developer 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 Visual Web Developer (Parte 2)

6. Introducción a la Infraestructura de ASP .NET
6.1. Información General sobre Controladores HTTP y Módulos HTTP
6.1.1. Cómo: Registrar Controladores HTTP
6.1.2. Cómo: Configurar una Extensión de Controlador HTTP en IIS
6.1.3. Tutorial: Crear un Controlador HTTP Sincrónico
6.1.4. Cómo: Crear un Controlador HTTP Asincrónico
6.1.5. Tutorial: Crear y Registrar Generadores de Controladores http
6.1.6. Tutorial: Crear y Registrar un Módulo HTTP Personalizado
6.2. Información General sobre la Administración de Estados de ASP .NET
6.2.1. Información General sobre las Cookies en ASP .NET
6.2.1.1. Cómo: Escribir una Cookie
6.2.1.2. Cómo: Leer una Cookie
6.2.1.3. Cómo: Eliminar una Cookie
6.2.2. Información General sobre el Estado de Vista en ASP .NET
6.2.3. Información General sobre el Estado de Sesión de ASP .NET
6.2.3.1. Identificadores de Sesión
6.2.3.2. Eventos de Estado de Sesión
6.2.3.3. Modos de Estado de Sesión
6.2.3.4. Proteger el Estado de Sesión
6.2.3.5. Cómo: Guardar Valores en un Estado de Sesión
6.2.3.6. Cómo: Leer los Valores de un Estado de Sesión
6.2.3.7. Implementar un Proveedor de Almacén de Estados de Sesión
6.2.4. Información General sobre el Estado de Aplicación de ASP .NET
6.2.4.1. Cómo: Guardar Valores en un Estado de Aplicación
6.2.4.2. Cómo: Leer los Valores de un Estado de Aplicación
6.2.5. Información General sobre las Propiedades de Perfil de ASP .NET
6.2.5.1. Identificación de Usuario para las Propiedades de Perfil de ASP .NET
6.2.5.2. Definición de las Propiedades de Perfil ASP .NET
6.2.5.3. Proveedores de Perfiles de ASP .NET
6.2.5.4. Proteger las Propiedades de Perfil
6.2.5.5. Tutorial: Mantener la Información de Usuarios de Sitios Web con Propiedades de Perfil
6.2.5.6. Usar Información de Perfiles con AJAX en ASP .NET
6.2.5.7. Implementar un Proveedor de Perfiles
6.2.5.8. Información General sobre el Servicio de Perfiles de WCF
6.2.5.8.1. Cómo: Habilitar el Servicio de Perfiles de WCF
6.2.6. Recomendaciones de Administración de Estado de ASP .NET
6.3. Enrutamiento de ASP .NET
6.3.1. Cómo: Definir una Ruta
6.3.2. Cómo: Crear una Dirección URL a partir de una Ruta
6.3.3. Cómo: Utilizar el Enrutamiento con Formularios Web
7. Utilizar Controles de ASP .NET
7.1. Controles de Usuario ASP .NET
7.1.1. Información General sobre los Controles de Usuario ASP .NET
7.1.2. Cómo: Convertir Páginas de Formularios Web Forms en Controles de Usuario
7.1.3. Cómo: Incluir un Control de Usuario en una Página Web ASP .NET
7.1.4. Cómo: Crear Instancias de Controles de Usuario ASP .NET mediante Programación
7.1.5. Cómo: Crear Controles de Usuario ASP .NET con Plantillas
7.1.6. Cómo: Crear Controles de Usuario ASP .NET
7.1.7. Cómo: Incluir Controles de Usuario ASP .NET en Páginas Web
7.1.8. Tutorial: Crear Elementos Reutilizables con Controles Usuario ASP .NET
7.2. Controles de Servidor ASP .NET
7.2.1. Información General sobre los Controles de Servidor Web ASP .NET
7.2.1.1. Cómo: Agregar Controles de Servidor Web a una Página de Formularios Web Forms mediante el Diseñador de Web Forms
7.2.1.1.1. Cómo: Agregar Controles de Servidor a una Página Web ASP .NET mediante la Sintaxis de ASP .NET
7.2.1.2. Cómo: Crear Plantillas de Controles de Servidor Web mediante el Diseñador
7.2.1.3. Cómo: Establecer las Propiedades de Estilo de un Control de Servidor ASP .NET en el Diseñador
7.2.1.4. Cómo: Establecer Propiedades de un Control de Servidor ASP .NET
7.2.2. Trabajar con Controles de Servidor Web ASP .NET
7.2.2.1. Cómo: Agregar Controles de Servidor a una Página Web ASP .NET mediante la Sintaxis de ASP .NET
7.2.2.2. Agregar Controles de Servidor HTML a una Página Web ASP .NET
7.2.2.2.1. Cómo: Agregar Controles de Servidor HTML a una Página Web mediante la Sintaxis de ASP .NET
7.2.2.2.2. Cómo: Convertir Controles de Servidor HTML en Elementos HTML
7.2.2.3. Cómo: Especificar si los Controles de Servidor Web ASP .NET se Publican en el Servidor
7.2.2.4. Controles de Servidor Web y Funciones del Explorador
7.2.2.4.1. Proteger Archivos de Definición de Explorador
7.2.2.5. Orden de Tabulación, Foco y Claves de Acceso en los Controles de Servidor Web de ASP .NET
7.2.2.5.1. Cómo: Establecer el Foco en los Controles de Servidor Web
7.2.2.5.2. Cómo: Establecer Teclas de Acceso para los Controles de Servidor Web
7.2.2.6. Controles de Servidor Web ASP .NET y Estilos de CSS
7.2.2.6.1. Cómo: Establecer Propiedades de Estilo de un Control de Servidor ASP .NET mediante Sintaxis de ASP .NET
7.2.2.6.2. Cómo: Establecer Propiedades de Estilo de un Control de Servidor ASP .NET mediante Programación
7.2.2.7. Plantillas de Controles de Servidor Web ASP .NET
7.2.2.7.1. Cómo: Crear Plantillas de Controles Web ASP .NET mediante Declaración
7.2.2.7.2. Cómo: Responder a Eventos Button en Controles Enlazados a Datos
7.2.2.7.3. Cómo: Crear Plantillas de Controles de Servidor Web ASP .NET Dinámicamente
7.2.2.8. Agregar Controles ASP .NET mediante Programación
7.2.2.8.1. Cómo: Agregar Controles a una Página Web ASP .NET mediante Programación
7.2.2.8.2. Controles de Servidor Web Dinámicos y Estado de Vista
7.2.2.9. Obtener Acceso a Controles ASP .NET mediante Programación
7.2.2.9.1. Identificación de Controles de Formularios Web Forms
7.2.2.9.2. Resolución del Identificador de un Control de Formularios Web Forms
7.2.2.9.3. Cómo: Localizar Controles Secundarios por Id en una Página Web
7.2.2.9.4. Utilizar una Colección de Controles en una Página Web
7.2.2.9.5. Cómo: Buscar Controles de Formularios Web Forms en una Página recorriendo la Colección Controls
7.2.2.9.6. Utilizar la Propiedad NamingContainer para Determinar el Contenedor de Nombres de un Control
7.2.2.9.7. Cómo: Obtener Acceso a Miembros de un Contenedor de Nombres de un Control de Servidor Web
7.2.3. Controles Estándar del Cuadro de Herramientas
7.2.3.1. Información General sobre AdRotator
7.2.3.1.1. Tutorial: Mostrar y Realizar un Seguimiento de los Anuncios con el Control AdRotator
7.2.3.1.2. Cómo: Mostrar Anuncios desde un Archivo XML mediante el Control AdRotator
7.2.3.1.3. Cómo: Mostrar Anuncios desde una Base de Datos mediante el Control AdRotator
7.2.3.1.4. Cómo: Seleccionar Anuncios en un Control AdRotator mediante Programación
7.2.3.2. Información General sobre BulletedList
7.2.3.2.1. Cómo: Agregar Controles BulletedList a una Página
7.2.3.2.2. Cómo: Responder cuando el Usuario hace Clic en Controles BulletedList
7.2.3.3. Información General sobre Button
7.2.3.3.1. Cómo: Agregar Controles Button a una Página
7.2.3.3.2. Cómo: Agregar Controles ImageButton a una Página
7.2.3.3.3. Cómo: Determinar las Coordenadas de un Control ImageButton
7.2.3.3.4. Cómo: Responder a los Eventos de un Control Button
7.2.3.3.5. Cómo: Responder a los Eventos de un Control Button en una Secuencia de Comandos del Cliente
7.2.3.4. Información General sobre Calendar
7.2.3.4.1. Cómo: Controlar el Desplazamiento por Meses en el Control Calendar
7.2.3.4.2. Cómo: Controlar la Selección de Fecha del Usuario en un Control Calendar
7.2.3.4.3. Cómo: Personalizar la Apariencia del control Calendar
7.2.3.4.4. Cómo: Personalizar Días Aislados en un Control Calendar
7.2.3.4.5. Cómo: Dar Formato mediante Estilos a los Elementos del Control Calendar
7.2.3.4.6. Cómo: Responder a la Selección de Fecha en el Calendar
7.2.3.4.7. Cómo: Leer las Fechas Seleccionadas en Control Calendar
7.2.3.4.8. Cómo: Seleccionar Fechas mediante Programación en un Control Calendar
7.2.3.4.9. Cómo: Establecer la Fecha Actual mediante Programación en un Control Calendar
7.2.3.4.10. Cómo: Mostrar las Fechas Seleccionadas de una Base de Datos en el Control Calendar
7.2.3.5. Información General sobre CheckBox y CheckBoxList
7.2.3.5.1. Cómo: Agregar Controles CheckBox a una Página
7.2.3.5.2. Cómo: Agregar Controles CheckBoxList a una Página
7.2.3.5.3. Cómo: Configurar las Opciones de Diseño de un Control CheckBoxList
7.2.3.5.4. Cómo: Obtener y Establecer el Valor de un Control CheckBox mediante Programación
7.2.3.5.5. Cómo: Responder a la Selección del Usuario en un Control CheckBox
7.2.3.6. Información General sobre DropDownList
7.2.3.6.1. Cómo: Agregar Controles DropDownList a una Página
7.2.3.7. Información General sobre FileUpload
7.2.3.7.1. Cómo: Cargar Archivos con el Control FileUpload
7.2.3.8. Información General sobre HiddenField
7.2.3.9. Información General sobre HyperLink
7.2.3.9.1. Cómo: Agregar Controles HyperLink a una Página
7.2.3.10. Información General sobre Image
7.2.3.10.1. Cómo: Agregar Controles Image a una Página
7.2.3.11. Información General sobre ImageMap
7.2.3.11.1. Cómo: Agregar Controles ImageMap a una Página
7.2.3.11.2. Cómo: Responder Cuando el Usuario hace Clic en Controles ImageMap
7.2.3.12. Información General sobre Label
7.2.3.12.1. Cómo: Agregar Controles Label a una Página
7.2.3.12.2. Cómo: Utilizar controles Label como Títulos
7.2.3.13. Información General sobre ListBox
7.2.3.13.1. Cómo: Agregar Controles ListBox a una Página
7.2.3.13.2. Cómo: Agregar Elementos a Controles List
7.2.3.13.3. Cómo: Establecer la Selección en Controles List
7.2.3.13.4. Cómo: Rellenar Controles List desde un Origen de Datos
7.2.3.13.5. Cómo: Responder a los Cambios en Controles List
7.2.3.13.6. Cómo: Determinar la Selección en Controles List
7.2.3.14. Información General sobre Literal
7.2.3.14.1. Cómo: Agregar Controles Literal a una Página
7.2.3.15. Información General sobre el Control Localize
7.2.3.15.1. Cómo: Agregar Controles Localize a las Páginas
7.2.3.16. Información General sobre MultiView y View
7.2.3.16.1. Cómo: Agregar Controles MultiView a una Página
7.2.3.17. Información General sobre Panel
7.2.3.17.1. Cómo: Agregar Controles Panel a una Página
7.2.3.18. Información General sobre PlaceHolder
7.2.3.18.1. Cómo: Agregar Controles PlaceHolder a una Página
7.2.3.19. Información General sobre RadioButton y RadioButtonList
7.2.3.19.1. Cómo: Agregar Controles RadioButton a una Página
7.2.3.19.2. Cómo: Agregar Controles RadioButtonList a una Página
7.2.3.19.3. Cómo: Establecer y Obtener la Selección de un Control RadioButton
7.2.3.19.4. Cómo: Configurar las Opciones de Diseño de un Control RadioButtonList
7.2.3.19.5. Cómo: Responder a la Selección de un Usuario en un Grupo de Controles RadioButton
7.2.3.20. Información General sobre el Control Substitution
7.2.3.21. Información General sobre los Controles Table, TableRow y TableCell
7.2.3.21.1. Cómo: Agregar Controles Table a una Página
7.2.3.21.2. Cómo: Agregar Filas y Celdas Dinámicamente a un Control Table
7.2.3.22. Información General sobre TextBox
7.2.3.22.1. Cómo: Obtener y Establecer los Valores de los Controles TextBox
7.2.3.22.2. Cómo: Establecer un Control TextBox para Escribir Contraseñas
7.2.3.22.3. Cómo: Especificar la Entrada de Varias Líneas de Datos en un Control TextBox
7.2.3.22.4. Cómo: Responder a los Cambios en un Control TextBox
7.2.3.23. Información General sobre Wizard
7.2.3.23.1. Tutorial: Crear un Control ASP .NET Wizard Básico
7.2.3.23.2. Tutorial: Uso Avanzado del Control Wizard de ASP .NET
7.2.3.24. Información General sobre el Control XML
7.2.3.24.1. Cómo: Agregar Controles XML a una Página
7.2.3.24.2. Cómo: Cargar Datos XML en el Control XML
7.2.3.24.3. Cómo: Transformar Datos XML en el Control XML
7.2.3.24.4. Tutorial: Mostrar un Documento XML en una Página mediante Transformaciones
7.2.3.25. Seguridad de Controles Estándar
7.2.4. Controles de Datos del Cuadro de Herramientas
7.2.4.1. Controles de Servidor Web de Datos
7.2.4.1.1. Información General sobre los Controles Enlazados a Datos
7.2.4.1.2. Información General sobre el Control ListView
7.2.4.1.2.1. Tutorial: Mostrar, Paginar y Ordenar Datos con el Control ListView
7.2.4.1.2.2. Tutorial: Modificar Datos con el Control ListView
7.2.4.1.3. Información General sobre el Control GridView
7.2.4.1.3.1. Comparar los Controles GridView y DataGrid
7.2.4.1.3.2. Ordenar los Datos de un Control GridView
7.2.4.1.3.3. Paginación en un Control GridView
7.2.4.1.3.4. Modificar los Datos de un Control GridView
7.2.4.1.3.5. Eventos del Control GridView
7.2.4.1.3.6. Crear una Columna Personalizada en un Control GridView
7.2.4.1.3.7. Cómo: Establecer Dinámicamente el Ancho de las Columnas en el Control GridView
7.2.4.1.3.8. Cómo: Habilitar la Paginación Predeterminada en el Control GridView
7.2.4.1.3.9. Cómo: Habilitar la Edición Predeterminada en el Control GridView
7.2.4.1.3.10. Cómo: Habilitar la Selección Predeterminada en el Control GridView
7.2.4.1.3.11. Cómo: Habilitar la Eliminación Predeterminada en el Control GridView
7.2.4.1.3.12. Cómo: Personalizar Controles para la Edición en el Control de GridView
7.2.4.1.3.13. Cómo: Responder a Eventos de Botón en un Control GridView
7.2.4.1.3.14. Tutorial: Mostrar una Lista Desplegable mientras se Edita en el Control de GridView
7.2.4.1.3.15. Tutorial: Ordenación Simple del Control GridView
7.2.4.1.3.16. Tutorial: Realizar Actualizaciones Masivas en Filas Enlazadas a un Control GridView
7.2.4.1.3.17. Tutorial: Crear un Control GridView Anidado
7.2.4.1.3.18. Tutorial: Mostrar Datos mediante un Procedimiento Almacenado en el Control GridView
7.2.4.1.4. Información General sobre DetailsView
7.2.4.1.4.1. Paginación en un Control DetailsView
7.2.4.1.4.2. Modificar Datos mediante un Control DetailsView
7.2.4.1.4.3. Crear una Fila Personalizada en un DetailsView
7.2.4.1.4.4. Eventos del Control DetailsView
7.2.4.1.5. Información General sobre FormView
7.2.4.1.5.1. Crear Plantillas para el Control FormView
7.2.4.1.5.2. Paginación en un Control FormView
7.2.4.1.5.3. Modificar Datos mediante un Control FormView
7.2.4.1.5.4. Eventos del Control FormView
7.2.4.1.5.5. Tutorial: Mostrar Datos con Formato en Páginas Web con el Control FormView
7.2.4.1.6. Información General sobre Repeater
7.2.4.1.6.1. Cómo: Agregar Controles Repeater a una Página
7.2.4.1.7. Información General sobre DataList
7.2.4.1.7.1. Cómo: Especificar el Formato de Flujo o Tabla en Controles DataList
7.2.4.1.7.2. Cómo: Especificar la Disposición Horizontal o Vertical en los Controles DataList
7.2.4.1.7.3. Cómo: Permitir que los Usuarios Seleccionen Elementos en los Controles DataList
7.2.4.1.7.4. Cómo: Permitir que los Usuarios Editen Elementos en Controles DataList
7.2.4.1.7.5. Cómo: Permitir a los Usuarios Eliminar Elementos en Controles DataList
7.2.4.1.7.6. Cómo: Responder a los Eventos de Botón en Elementos DataList o Repeater
7.2.4.1.7.7. Cómo: Personalizar Elementos DataList en Tiempo de Ejecución
7.2.4.1.7.8. Cómo: Personalizar Elementos Dinámicamente en el Control DataList
7.2.4.1.7.9. Cómo: Crear Plantillas Dinámicamente en los Controles DataList
7.2.4.1.7.10. Cómo: Agregar Controles DataList a una Página
7.2.4.1.7.11. Tutorial: Mostrar y Dar Formato a Datos con el Control DataList
7.2.4.2. Controles de Servidor Web de Orígenes de Datos
7.2.4.2.1. Información General sobre los Controles de Origen de Datos
7.2.4.2.2. Establecer Enlaces a Datos utilizando un Control de Origen de Datos
7.2.4.2.3. Utilizar Parámetros con Controles de Origen de Datos
7.2.4.2.3.1. Cómo un Control de Origen de Datos Crea Parámetros para Campos Enlazados a Datos
7.2.4.2.4. Ordenar Datos con Controles de Origen de Datos
7.2.4.2.5. Modificar Datos mediante Controles de Origen de Datos
7.2.4.2.6. Filtrar Datos utilizando Controles de Origen de Datos
7.2.4.2.7. Almacenar Datos en Memoria Caché utilizando Controles de Origen de Datos
7.2.4.2.8. Controlar Valores Null de Base de Datos mediante Controles de Origen de Datos
7.2.4.2.9. Información General sobre el Control LinqDataSource
7.2.4.2.9.1. Tutorial: Recuperar, Actualizar, Insertar y Eliminar Datos con los Controles LinqDataSource y DetailsView
7.2.4.2.9.2. Tutorial: Seleccionar y Filtrar un Subconjunto de Datos con los Controles LinqDataSource y GridView
7.2.4.2.9.3. Tutorial: Usar una Marca de Tiempo con el Control LinqDataSource para Comprobar la Integridad de los Datos
7.2.4.2.9.4. Cómo: Agrupar y Agregar Datos utilizando el Control LinqDataSource
7.2.4.2.9.5. Cómo: Actualizar, Insertar y Eliminar Datos con el Control LinqDataSource
7.2.4.2.10. Información General sobre SqlDataSource
7.2.4.2.10.1. Seleccionar Datos mediante el Control SqlDataSource
7.2.4.2.10.2. Utilizar Parámetros con el Control SqlDataSource
7.2.4.2.10.3. Modificar Datos mediante el Control SqlDataSource
7.2.4.2.10.4. Almacenar Datos en Caché con el Control SqlDataSource
7.2.4.2.10.5. Cómo: Habilitar el Filtrado para el Control SqlDataSource
7.2.4.2.10.6. Cómo: Conectar con una Base de Datos de SQL Server mediante el Control SqlDataSource
7.2.4.2.10.7. Cómo: Conectar con una Base de Datos de Access mediante el Control SqlDataSource
7.2.4.2.10.8. Cómo: Conectar con una Base de Datos ODBC mediante el Control SqlDataSource
7.2.4.2.10.9. Cómo: Conectar con una Base de Datos de Oracle mediante el Control SqlDataSource
7.2.4.2.11. Información General sobre el Control AccessDataSource
7.2.4.2.11.1. Recuperar Datos utilizando el Control AccessDataSource
7.2.4.2.11.2. Cómo: Conectar con una Base de Datos de Access mediante el Control AccessDataSource
7.2.4.2.12. Información General sobre el Control ObjectDataSource
7.2.4.2.12.1. Utilizar Parámetros con el Control ObjectDataSource
7.2.4.2.12.2. Tutorial: Enlace de Datos en Páginas Web con un Componente de Datos
7.2.4.2.12.3. Crear un Objeto de Origen para un Control ObjectDataSource
7.2.4.2.12.3.1. Ejemplo de Objeto de Origen ObjectDataSource
7.2.4.2.12.3.2. Ejemplo de ObjectDataSource con Establecimiento Inflexible de Tipos
7.2.4.2.13. Información General sobre el Control XmlDataSource
7.2.4.2.13.1. Filtrar Datos mediante el Control XmlDataSource
7.2.4.2.13.2. Enlazar un Control Tabular con XmlDataSource
7.2.4.2.13.3. Tutorial: Crear una Página Web para Mostrar Datos XML
7.2.4.2.14. Información General sobre SiteMapDataSource

Descarga
Manual_Visual_Web_Developer_Parte2

lunes, 25 de enero de 2016

Videos Curso ASP.NET MVC & JavaScript HTE (Parte 1)

Videos del Curso ASP.NET MVC & JavaScript HTE (Parte 1)

Comparto la primera parte del curso de ASP.NET MVC & JavaScript realizado en la Empresa HTE donde todo se trabaja en forma desconectada usando en el Servidor mi Serializador de Cadenas y JavaScript en el Cliente, sobre todo Matrices.

1. Curso MVC & JavaScript HTE - Demo 01

En este video se muestra como crear una simple aplicación web usando un Formulario Web y Controles Web.

El ejemplo muestra una consulta de empleados, se ingresa el código y se envía la consulta al servidor obteniendo los datos de este y mostrando un mensaje por JavaScript.

Además permite crear un archivo de texto con los datos del empleado y bajarlo al cliente.

2. Curso MVC & JavaScript HTE - Demo 02

En este video se muestra como crear una simple aplicación web con ASP.NET MVC, sobre todo se muestra como pasar datos desde el cliente al servidor usando parámetros el método de acción.

También se muestra como enviar datos desde el servidor al cliente de diferentes formas, entre ellas usando ViewData y usando un Modelo.

3. Curso MVC & JavaScript HTE - Demo 03

En este video se muestran los diferentes Tipos de Resultados de Acciones en MVC, tales como ActionResult, ContentResult (string y DateTime), JsonResult, FileResult y JavaScriptResult.

4. Curso MVC & JavaScript HTE - Demo 04

En este video se muestra como crear una Consulta Asíncrona usando XmlHttpRequest (XHR) enviando Cadenas (String) mediante un serializador personalizado y creando una tabla en JavaScript.

Para el ejemplo se trabaja con una lista de clientes: código, nombre, dirección y contacto.

5. Curso MVC & JavaScript HTE - Demo 05

En este video se muestra como crear un filtro desconectado usando cadenas y matrices. El filtro se hace mediante un control textbox y los resultados se muestran en una tabla.

El ejemplo es con la tabla Clientes de Northwind, se consulta por nombre y se se muestran el código, nombre, dirección y contacto.

6. Curso MVC & JavaScript HTE - Demo 06 (Parte 1)

En este video se muestra la primera parte de como crear un filtro desconectado mediante un ComboBox y usando Cadenas y Matrices en JavaScript.

Para el ejemplo se muestra en un ComboBox las Categorías y al seleccionar una se muestran los Productos por Categoría, pero todo es en el lado del cliente usando JavaScript.

7. Curso MVC & JavaScript HTE - Demo 06 (Parte 2)

En este video se muestra la segunda parte de como crear un filtro desconectado mediante un ComboBox y usando Cadenas y Matrices en JavaScript.

Para el ejemplo se muestra en un ComboBox las Categorías y al seleccionar una se muestran los Productos por Categoría, pero todo es en el lado del cliente usando JavaScript.

8. Curso MVC & JavaScript HTE - Demo 07

En este video se enseña como crear un filtro desconectado mediante las cabeceras de la tabla usando controles de texto para filtrar cada campo.

El ejemplo es con la tabla productos y se puede filtrar por código, nombre, proveedor, categoría, precio y stock mediante JavaScript.

9. Curso MVC & JavaScript HTE - Demo 08

En este video se enseña como crear un filtro desconectado mediante las cabeceras de la tabla usando controles de textos y combos para filtrar cada campo.

El ejemplo es con la tabla productos y se puede filtrar por código, nombre, proveedor, categoría, precio y stock mediante JavaScript.

martes, 22 de diciembre de 2015

El Demo del Día: Aplicación de Simple Página (SPA) en ASP.NET MVC

Aplicación de Simple Página (SPA) en ASP.NET MVC

Después de mucho tiempo vamos a presentar un nuevo Demo, esta vez comparando una Aplicación de Múltiples Páginas (MPA) con una Aplicación de Simple Página (SPA), pero sin usar ningún Framework SPA como AngularJS, Knockout, Ember, Meteor, Kendo UI, etc.

Introducción a una SPA

El modelo por defecto en ASP.NET sea WebForms o MVC es MPA, quiere decir que nuestro sitio web se compone de varias páginas las cuales se solicitan desde el cliente una a una y cada una descarga sus archivos necesarios: HTML, JavaScript, CSS, Imágenes, Fuentes, etc.
En cambio si nuestro sitio solo tuviera una simple página solo se cargaría una sola vez todos los archivos.

Ventajas de una SPA

La gran ventaja de una Aplicación de Simple Página (SPA) es que evita conectarse varias veces al servidor para solicitar cada página, es decir, favorece el trabajo desconectado, ya que al haber una sola página se pueda cargar todos los datos necesarios al inicio, así como los JavaScripts y las hojas de estilo.

Trabajar con una sola página ayuda a la Performance, ya que evita conexiones innecesarias al servidor web.

Usos de una SPA

Generalmente, los sitios web móviles usan este modelo, ya que solo se carga una página y se va presentando secciones (llamadas cartas o barajas) de ésta, muchos de los Frameworks para Aplicaciones Web Móviles trabajan de esta forma, por ejemplo jQuery Mobile, Bootstrap, etc.

Pero si nuestra Aplicación Web no tiene demasiadas páginas ni datos que cargar, también podemos usar este modelo, ahorrando conexiones al servidor, es decir, trabajando en forma desconectada.

Características de una SPA

Existen muchas características de una SPA:
- La principal es que la aplicación solo tenga una página.
- Aunque no es exclusividad de una SPA, actualmente el Diseño Web debe ser Adaptativo (Responsive Web Design).
- Otra característica importante (que también no es exclusividad de SPA) es que debe hacer llamadas Asíncronas JavaScript HTTP: AJAX (Xml), AJAJ (JSON) o AJAS (Strings).

Ejemplo de Comparación entre MPA y SPA en ASP.NET MVC

A continuación vamos a presentar un ejemplo donde comparamos una Aplicación sobre Pedidos que tiene los 2 modelos:

- MPA: Compuesto por un Controlador llamado MPA que tiene 4 métodos de acción y 4 vistas, llamadas Login, Categoria, Producto y Pedido. La navegación entre cada una implica ir al servidor y esperar su respuesta, para lo cual a propósito se ha puesto un tiempo de espera. Este modelo usa 4 archivos de JavaScript, uno para cada página.

- SPA: Compuesto por un Controlador llamado SPA que tiene solo un método de acción y una vista llamada Pedido. Por otra parte solo hay un archivo de JavaScript llamado Todo.js que realiza la navegación entre páginas (divs) y que no viaja al servidor sino solo se hace en el cliente.

Crear una Aplicación ASP.NET MVC 4 en C#

- Abrir Visual Studio 2012 y crear un proyecto de tipo "Aplicación web de ASP.NET MVC4" y asignarle como nombre: "SinglePageApplication".

- Seleccionar la opción "Vacio" y como motor de vista "Razor" y "Aceptar".

Crear el Controlador MPA

- Clic derecho a la carpeta Controllers y seleccionar "Agregar" y luego "Controlador".

- Ingresar como nombre "MPAController" y luego escribir el siguiente código:

using System;
using System.Web;
using System.Web.Mvc;

namespace SinglePageApplication.Controllers
{
public class MPAController : Controller
{
public ActionResult Login()
{
return View();
}

public ActionResult Categoria()
{
//Simular que esta conectandose a la BD para traer las Categorias
System.Threading.Thread.Sleep(2000);
return View();
}

public ActionResult Producto()
{
//Simular que esta conectandose a la BD para traer los Productos x Categoria
System.Threading.Thread.Sleep(4000);
return View();
}

public ActionResult Pedido()
{
//Simular que esta leyendo del TempData los Pedidos
System.Threading.Thread.Sleep(1000);
return View();
}
}
}

Crear una Hoja de Estilo para todas las vistas

- Crear una carpeta para los archivos CSS llamado: "Estilos".

- Crear una hoja de estilo llamada "ACME.css" dentro de la carpeta Estilos y escribir el siguiente código:

body {
background-color:aqua;
width:100%;
}
.Titulo {
background-color:blue;
color:white;
font-family:Arial;
font-size:xx-large;
text-align:center;
}
.Subtitulo {
background-color:white;
color:blue;
font-family:Arial;
font-size:x-large;
text-align:center;
}
table {
width:100%;
}
.FilaCabecera {
background-color:lightgray;
color:black;
}
.FilaDatos {
background-color:white;
color:black;
}
.Pagina {
display:none;
}

Crear las Vistas para MPA

- Ir al controlador MPA, clic derecho sobre el nombre del método "Login" y crear una vista con el mismo nombre que tenga el siguiente código HTML:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
<link href="~/Estilos/ACME.css" rel="stylesheet" />
</head>
<body>
<div id="divLogin">
<div id="divCabeceraLogin">
<div id="divTituloLogin" class="Titulo">
<span id="spnTitulo">Aplicación de Múltiples Paginas (MPA)</span>
</div>
<div id="divSubtituloLogin" class="Subtitulo">
<span id="spnSubtituloLogin">Login del Sistema</span>
</div>
</div>
<div id="divCuerpoLogin">
<div id="divEtiquetaUsuario">
<span id="spnUsuario">Usuario: </span>
</div>
<div id="divTextoUsuario">
<input id="txtUsuario" type="text" />
</div>
<div id="divEtiquetaClave">
<span id="spnClave">Clave: </span>
</div>
<div id="divTextoClave">
<input id="txtClave" type="password" />
</div>
<div id="divBotonesLogin">
<input id="btnAceptar" type="button" value="Aceptar" />
</div>
</div>
<div id="divPieLogin">
<div id="divUbicacion" class="Subtitulo">
<span id="spnUbicacion">Lima - Perú</span>
</div>
</div>
</div>
<script src="~/Scripts/Login.js"></script>
</body>
</html>

- Ir al controlador MPA, clic derecho sobre el nombre del método "Categoria" y crear una vista con el mismo nombre que tenga el siguiente código HTML:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Categoria</title>

</head>

<body>

<span id="spnSubtituloCategoria">Selecciona una Categoria</span>

</div>

<span id="spnListaCategoria">Aqui se debe mostrar un lista de Categorias</span>

</div>

<a id="aCatProd" href="~/MPA/Producto">Productos</a>

</div>

</body>

</html>

- Ir al controlador MPA, clic derecho sobre el nombre del método "Producto" y crear una vista con el mismo nombre que tenga el siguiente código HTML:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Producto</title>

</head>

<body>

<span id="spnSubtituloProducto">Agrega Productos a tu Pedido</span>

</div>

<span id="spnListaProducto">Aqui se debe mostrar un lista de Productos</span>

</div>

<a id="aProdPed" href="~/MPA/Pedido">Pedidos</a>

<a id="aProdCat" href="~/MPA/Categoria">Regresar</a>

</div>

</body>

</html>

- Ir al controlador MPA, clic derecho sobre el nombre del método "Pedido" y crear una vista con el mismo nombre que tenga el siguiente código HTML:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Pedido</title>

</head>

<body>

<span id="spnSubtituloPedido">Agrega Productos a tu Pedido</span>

</div>

<span id="spnListaPedido">Aqui se debe mostrar un lista de Pedidos</span>

</div>

<a id="aPedCat" href="~/MPA/Categoria">Regresar</a>

</div>

</body>

</html>

Crear los JavaSripts para MPA

- Crear una carpeta para los archivos js llamado: "Scripts"

- Crear una archivo de JavaScript llamado "Login.js" dentro de la carpeta Scripts y escribir el siguiente código:

window.onload = function () {
var btnAceptar = document.getElementById("btnAceptar");
btnAceptar.onclick = function () {
var txtUsuario = document.getElementById("txtUsuario");
if (txtUsuario.value == "") {
alert("Ingresa el Usuario");
txtUsuario.focus();
return false;
}
var txtClave = document.getElementById("txtClave");
if (txtClave.value == "") {
alert("Ingresa la Clave");
txtClave.focus();
return false;
}
if (txtUsuario.value == "Luis" && txtClave.value == "123") {
window.location.href = "MPA/Categoria";
}
else {
alert("Login invalido");
}
}
}

- Crear una archivo de JavaScript llamado "Categoria.js" dentro de la carpeta Scripts y escribir el siguiente código:

Probar y Ejecutar la Aplicación de Múltiples Páginas (MPA)

- Grabar y ejecutar la aplicación pulsando F5 y se mostrará una ventana similar a la siguiente figura:

- Ingresar como usuario "Luis" y como clave "123" y "Aceptar", observando que se demora en cargar la segunda página de Categoria, similar a la siguiente figura:

- Clic al enlace de Productos y después de esperar un momento se mostrará la página de Producto, similar a la siguiente figura:

- Clic al enlace de Pedidos y después de esperar un momento se mostrará la página de Pedido, similar a la siguiente figura:

- Si deseas en cualquier página puedes seleccionar el enlace "Regresar".

Nota: En todos los enlaces al dar clic se irá al servidor para cargar la página ya que el modelo es MPA.

Crear el Controlador SPA

- Clic derecho a la carpeta Controllers y seleccionar "Agregar" y luego "Controlador".

- Ingresar como nombre "SPAController" y luego escribir el siguiente código:

using System;

using System.Web;

using System.Web.Mvc;

namespace SinglePageApplication.Controllers

{

public class SPAController : Controller

{

public ActionResult Pedido()

{

return View();

}

Crear la Vista para SPA

- Ir al controlador SPA, clic derecho sobre el nombre del método "Pedido" y crear una vista con el mismo nombre que tenga el siguiente código HTML:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Pedido</title>

</head>

<body>

<span id="spnTitulo">Aplicación de Simple Pagina (SPA)</span>

</div>

<span id="spnSubtituloLogin">Login del Sistema</span>

</div>

<span id="spnUsuario">Usuario: </span>

</div>

</div>

<span id="spnClave">Clave: </span>

</div>

</div>

</div>

</div>

<span id="spnSubtituloCategoria">Selecciona una Categoria</span>

</div>

<span id="spnListaCategoria">Aqui se debe mostrar un lista de Categorias</span>

</div>

<a id="aCatProd" href="#" data-url="divProducto">Productos</a>

</div>

<span id="spnSubtituloProducto">Agrega Productos a tu Pedido</span>

</div>

<span id="spnListaProducto">Aqui se debe mostrar un lista de Productos</span>

</div>

<a id="aProdPed" href="#" data-url="divPedido">Pedidos</a>

<a id="aProdCat" href="#" data-url="divCategoria">Regresar</a>

</div>

<span id="spnSubtituloPedido">Agrega Productos a tu Pedido</span>

</div>

<span id="spnListaPedido">Aqui se debe mostrar un lista de Pedidos</span>

</div>

<a id="aPedCat" href="#" data-url="divCategoria">Regresar</a>

</div>

</body>

</html>

Crear el JavaSript para SPA

- Crear una archivo de JavaScript llamado "Todo.js" dentro de la carpeta Scripts y escribir el siguiente código:

window.onload = function () {

//Mostrar la primera pagina

var divLogin = document.getElementById("divLogin");

if (divLogin) {

divLogin.style.display = "inline";

scriptLogin();

}

//Programar toda la navegación

var enlaces = document.getElementsByTagName("a");

if (enlaces != null && enlaces.length > 0) {

var n = enlaces.length;

var enlace;

var pagina;

var script;

for (var i = 0; i < n; i++) {

enlace = enlaces[i];

enlace.onclick = function () {

ocultarPaginas();

var id = this.getAttribute("data-url");

pagina = document.getElementById(id);

if (pagina != null) {

pagina.style.display = "inline";

script = id.replace("div", "script");

window[script]();

}

function ocultarPaginas() {

var paginas = document.getElementsByClassName("Pagina");

if (paginas != null && paginas.length > 0) {

var n = paginas.length;

var pagina;

for (var i = 0; i < n; i++) {

pagina = paginas[i];

pagina.style.display = "none";

}

function scriptLogin() {

var btnAceptar = document.getElementById("btnAceptar");

btnAceptar.onclick = function () {

var txtUsuario = document.getElementById("txtUsuario");

if (txtUsuario.value == "") {

alert("Ingresa el Usuario");

txtUsuario.focus();

return false;

}

var txtClave = document.getElementById("txtClave");

if (txtClave.value == "") {

alert("Ingresa la Clave");

txtClave.focus();

return false;

}

if (txtUsuario.value == "Luis" && txtClave.value == "123") {

var divCategoria = document.getElementById("divCategoria");

if (divCategoria) {

ocultarPaginas();

divCategoria.style.display = "inline";

scriptCategoria();

}

else {

alert("Login invalido");

}

function scriptCategoria() {

alert("Cargando Categorias");

}

function scriptProducto() {

alert("Cargando Productos");

}

function scriptPedido() {

alert("Cargando Pedidos");

}

Nota: En el evento load de la ventana se muestra solo el primer div (Login) y el resto esta oculto por el estilo de la clase Pagina. Además se obtiene todos los enlaces y se programa para que se navegue al div que especifique el atributo "data-url" ejecutando su script asociado que debe tener el prefijo script seguido del nombre usando: window[script]().

Configurar el Inicio del SPA

- Ir a la carpeta "App_Start" y abrir el archivo "RouteConfig.css" y cambiar el nombre del controlador y la acción que inicia.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace SinglePageApplication
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "SPA", action = "Pedido", id = UrlParameter.Optional }
);
}
}
}

Probar y Ejecutar la Aplicación de Simple Página (SPA)

- Grabar y ejecutar la aplicación pulsando F5 y se mostrará una ventana similar a la siguiente figura:

- Ingresar como usuario "Luis" y como clave "123" y "Aceptar", observando que no se demora en cargar nada la segunda página de Categoria ya que es un div, similar a la siguiente figura:

- Clic al enlace de Productos e inmediatamente se mostrará la página de Producto ya que es un div, similar a la siguiente figura:

- Clic al enlace de Pedidos y e inmediatamente se mostrará la página de Pedido que también es un div, similar a la siguiente figura:

- Si deseas en cualquier página puedes seleccionar el enlace "Regresar"y navegará a la sección especificada.

Nota: En todos los enlaces al dar clic se ocultarán todos los divs y se mostrará uno solo ya que el modelo es SPA, es decir, no se va al servidor sino solo se muestra en el cliente.

Comentario Final

En este post un poco largo hemos querido mostrar como se puede crear sin ningún Framework de JavaScript una Aplicación de Simple Pagina (SPA) tan solo usando divs y un poco de JavaScript, lo cual es muy útil para trabajar en forma desconectada en aplicaciones pequeñas, por ejemplo, las aplicaciones web móviles.

Las personas que desean crear una SPA en MVC usando Frameworks, encontrarán muchos Blogs y Sitios Web, ya que para esto existe mucha información, tanto oficial como no oficial, por ejemplo les alcanzo un enlace del MSDN:
ASP.NET MVC 5: A .NET Developer Primer for SPA

Finalmente, como siempre hemos querido demostrar como hacerlo nosotros mismos sin necesidad de descargar nada, ni en el servidor ni en el cliente, ya que esto aumenta el tamaño de la aplicación perjudicando el ancho de banda, es decir, la performance.

Descarga del Código
SinglePageApplication

miércoles, 9 de diciembre de 2015

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