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

lunes, 12 de julio de 2021

Entrenamiento - Ultimo Curso Virtual Online de .NET

 Ultimo Curso Virtual Online de .NET

Como muchos de mis alumnos saben a partir del 2022 solo enseñare Python & Machine Learning, razón por la cual este será el último curso de .NET, los interesados en aprender una nueva forma de programar orientado a la performance usando código nativo tienen una interesante oportunidad de llevar el Ultimo Curso Virtual Online de .NET

1. Contenido del Programa

.NET Web Developer (Sin Capas con Cadenas)

Mes 01: ADO.NET y Winforms

Mes 02: Web MVC & JavaScript Parte 1

Mes 03: Web MVC & JavaScript Parte 2

Mes 04: Web Services (WCF, Web API, Web MVC) y Web Sockets

Mes 05: Integración de Aplicaciones con Web Services & WebSockets

con clientes WinForms, Web MVC y Android

2. Horario y Fecha de Inicio

- Horario: Martes y Jueves de 7:00 pm a 11:00 pm (Hora Perú)

- Fecha de Inicio: Martes 03 de Agosto del 2021

3. Duración del Programa

- Duración: 160 horas

- Tiempo: 5 meses

- Frecuencia: 8 horas semanales (32 horas mensuales)

4. Inversión y Forma de Pago

- Mensual: 200 nuevos soles (USD 60)

- Total 5 meses: 1000 nuevos soles (USD 300)

- Forma de Pago: En efectivo, al inicio de cada mes (200 soles)

- La cuenta del Banco en Perú se enviará a los seleccionados

- Para los alumnos de otros países será por Western Union

5. Registro

- Los interesados deberán enviar un mail a: Luis.duenash@gmail.com con los sgtes datos:

Titulo del mail:

- Ultimo Curso Virtual Online de .NET

Contenido del mail:

- Nombre Completo: Apellido Paterno, Apellido Materno y Nombres

- Documento de Identidad: DNI, Cédula, etc.

- Lugar de Procedencia: Ciudad y País

- Ha llevado Cursos antes conmigo: (No / Si), si es Si en donde

- Nivel de Experiencia en Desarrollo: Básico / Intermedio / Avanzado

- Conoce .NET: Si/No

- Comentario: Breve resumen de porque quiere llevar el curso.

6. Advertencia

- Solo deberán enviar correo los que estén bien informados de como son mis cursos, mi metodología y arquitectura.

- No se aceptan personas susceptibles o sensibles a fuertes comentarios

- No hay ningún tipo de certificación o diploma de participación (por el momento)

- Habrá un filtro de ingreso y se enviará el mail con el número de cuenta a pagar solo a los seleccionados.

martes, 4 de agosto de 2020

Entrenamiento - Primer Programa Anual Virtual en .NET & Python

Primer Programa Anual Virtual en .NET & Python (PAVNAP V1.0)


1. Contenido del Programa


Parte 1: .NET Web Developer (Sin Capas con Cadenas)

Mes 01: ADO.NET y Winforms
Mes 02: Web MVC & JavaScript Parte 1
Mes 03: Web MVC & JavaScript Parte 2
Mes 04: Web Services: WCF, Web API, Web MVC
Mes 05: Web Sockets
Mes 06: Integración de Aplicaciones con Web Services & WebSockets
con clientes WinForms, Web MVC, Android & iOS

Parte 2: Python Developer & Machine Learning

Mes 07: Aplicaciones Windows con PyQT, PyOdbc, Pandas Parte 1
Mes 08: Aplicaciones Windows con PyQT, PyOdbc, Pandas Parte 2
Mes 09: Aplicaciones Web con Flask
Mes 10: Aplicaciones Web con Django
Mes 11: Computer Vision con OpenCV, Dlib, Keras, Tensorflow
Mes 12: Procesamiento de Lenguaje Natural (NLP) con NLTK, Keras, Tensorflow

2. Horario y Fecha de Inicio

- Horario: Martes y Jueves de 8:00 pm a 11:00 pm (Hora Perú)
- Fecha de Inicio: Martes 01 de Setiembre del 2020

3. Duración del Programa

- Duración: 288 horas
- Tiempo: 12 meses
- Frecuencia: 6 horas semanales (24 horas mensuales)

4. Inversión y Forma de Pago

- Mensual: 200 nuevos soles (USD 60)
- Total 12 meses: 2400 nuevos soles (USD 720)
- Forma de Pago: En efectivo, al inicio de cada mes (200 soles)
- La cuenta del Banco en Perú se enviará a los seleccionados

5. Registro

- Los interesados deberán enviar un mail a: Luis.duenash@gmail.com con los sgtes datos:
Titulo del mail:
- Primer Programa Anual Virtual en .NET & Python
Contenido del mail:
- Nombre Completo: Apellido Paterno, Apellido Materno y Nombres
- Documento de Identidad: DNI, Cédula, etc.
- Lugar de Procedencia: Ciudad y Pais
- Ha llevado Cursos antes conmigo: (No / Si), si es Si en donde
- Nivel de Experiencia en Desarrollo: Básico / Intermedio / Avanzado
- Conoce .NET y/o Python: Si/No
- Comentario: Breve resumen de porque quiere llevar el curso.

6. Advertencia

- Solo deberán enviar correos los que estén bien informados de como son mis cursos, mi metodología y arquitectura.
- No se aceptan personas susceptibles o sensibles a fuertes comentarios
- No hay ningún tipo de certificación o diploma de participación (por el momento)
- Habrá un filtro de ingreso y se enviará el mail con el número de cuenta a pagar solo a los seleccionados

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

viernes, 5 de agosto de 2016

El Libro del Día: Beginning ASP.NET for Visual Studio 2015

El Libro del Día: 2016-08-05

Titulo: Beginning ASP.NET for Visual Studio 2015
Autor: William Penberthy
Editorial: Wrox
Nro Paginas: 793

Capítulos:
CHAPTER 1 Getting Started with ASP.NET 6.0
CHAPTER 2 Building an Initial ASP.NET Application
CHAPTER 3 Designing Your Web Pages
CHAPTER 4 Programming in C# and VB.NET
CHAPTER 5 ASP.NET Web Form Server Controls
CHAPTER 6 ASP.NET MVC Helpers and Extensions
CHAPTER 7 Creating Consistent-Looking Websites
CHAPTER 8 Navigation
CHAPTER 9 Displaying and Updating Data
CHAPTER 10 Working with Data—Advanced Topics
CHAPTER 11 User Controls and Partial Views
CHAPTER 12 Validating User Input
CHAPTER 13 ASP.NET AJAX
CHAPTER 14 jQuery
CHAPTER 15 Security in Your ASP.NET Website
CHAPTER 16 Personalizing Websites
CHAPTER 17 Exception Handling, Debugging, and Tracing
CHAPTER 18 Working with Source Control
CHAPTER 19 Deploying Your Website
APPENDIX Answers to Exercises

Descarga:
Beginning_ASP.NET_for_Visual_Studio_2015

miércoles, 13 de julio de 2016

Artículo - JavaScript Developer

JavaScript Developer

1. Introducción

JavaScript es un Lenguaje de Programación interpretado desarrollado por Brendan Eich en 1995 cuando trabajaba en Netscape. JavaScript es orientado a objetos, basado en prototipos, débilmente tipado y dinámico. La especificación de este lenguaje se denomina ECMAScript y es elaborada por ECMA International.

Actualmente es uno de los Lenguajes de Programación mas usados en el mundo, ya que sirve para crear aplicaciones web, tanto de lado del cliente (desde sus inicios) y también de lado del servidor (en la actualidad).

En los 20 años de vida que tiene JavaScript, en los 10 primeros años solo se usaba para validaciones y manejo de controles, pero a partir de la incorporación de AJAX (2005), la creación de librerías como jQuery (2006), la creación de JavaScript en el servidor con NodeJS (2009), la aparición de las nuevas APIs sobre todo de HTML5 y la nueva especificación del lenguaje ECMAScript6 (2012), ha originado que JavaScript tenga un crecimiento exponencial.

Muchos desarrolladores escribían la mayor parte del código en el servidor, ya que los Frameworks de ese lado tenían una gran cantidad de APIs o Librerías que permitían realizar cualquier tipo de tareas, desde acceso a datos hasta gráficos, operaciones con datos, manejo de archivos, etc. Es por eso que se usaba mucho código en PHP, Java o .NET, ysolo un mínimo de código en JavaScript para validar, manejar el DOM y mejorar el formato o estilo.

Actualmente, todo lo que podíamos hacer en el servidor, lo podemos hacer en el cliente con JavaScript, desde hacer llamadas asíncronas con XHR o AJAX hasta manipular los datos, crear gráficos (en 2D y en 3D), cifrar datos, enviar y recibir notificaciones en tiempo real, etc. Esto se puede hacer nativamente usando las APIs de JavaScript o usando una Librería o Framework que encapsule dicho trabajo.

Nota: Antes yo escribía 80% de código en el servidor y 20% en el cliente, pero desde hace unos años escribo 20% de código en el servidor y 80% en el cliente usando JavaScript puro. Estos porcentajes concuerdan con "El Problema de la Performance" que se da 80% en el cliente y 20% en el servidor.

Muchos programadores creen conocer JavaScript, pero en realidad no conocen ni el 10% de lo que tiene. El propósito de este artículo es contribuir a aumentar ese conocimiento, mostrando la Historia, las APIs, las Librerías, los Frameworks, las Herramientas y las fuentes donde pueden aprender más sobre este lenguaje, para cambiar su forma de programar y usar "La Web como Plataforma de Desarrollo" a través del Navegador (Browser) usando como lenguaje "JavaScript".

2. Cronología de JavaScript (20 años)

- 1995: En Mayo Brendan Eich crea Mocha en 10 días
- 1995: En Setiembre se crea LiveScript
- 1995: En Diciembre cambia de nombre a JavaScript
- 1996: Microsoft crea JScript
- 1996: DHTML
- 1997: ECMA-262 Ed1 (ES1)
- 1998: DOM Level 1
- 1999: ES3 (Base JavaScript actual)
- 1999: Microsoft crea XmlHttpRequest (Pre-AJAX)
- 2000: DOM Level 2
- 2001: Douglas Crockford crea JSON
- 2004: DOM Level 3
- 2005: AJAX
- 2008: ECMAScript 4 (ES4)
- 2009: ECMAScript 5 (ES5). JSON, Object.create
- 2012: ECMAScript 6 (ES6). Modulos, Proxys
- 2012: Navigation Timing
- 2012: HTML5 Web Messaging
- 2012: Web Workers
- 2012: WebSocket
- 2013: Web Storage
- 2013: Touch Events
- 2013: Geolocation API
- 2013: Performance Timeline
- 2013: Web Notifications
- 2013: File API
- 2013: Messaging API
- 2013: Web Telephony API
- 2013: MediaStream Image Capture
- 2013: WebRTC 1.0
- 2013: Web Audio API
- 2014: Progress Events
- 2014: Indexed Database
- 2014: Server Sent Events (SSE)
- 2014: Web Cryptography API
- 2014: Web NFC API
- 2014: XMLHttpRequest Level 1
- 2014: Push API
- 2014: Streams API
- 2014: Screen Orientation API
- 2014: Service Workers
- 2014: TCP and UDP Socket API
- 2014: URL
- 2014: Clipboard API and Events
- 2015: ECMA-262 (6th Edition). ECMAScript 2015 Language Specification

3. APIs de JavaScript

- Document Object Model (DOM)
  -) HTML: Document, Element, Event, HTML..., Node, NodeList, ParentNode, etc.
  -) XML: XMLDocument.
  -) SVG: Scalable Vector Graphics

- Gráficos
  -) Canvas: CanvasGradient, CanvasRenderingContext2D, HTMLCanvasElement, ImageData.
  -) SVG: SVGAnimate, SVGAnimated, SVGColor, SVGElement, SGVFont, SVGPath, SVGText.
  -) WebGL: WebGLBuffer, WebGLObject, WebGLRenderbuffer, WebGLRenderingContext, etc.

- Almacenamiento
  -) File API: Blob, File, FileList, FileReader, FileReaderSync, URL.
  -) IndexedDB: IDBCursor, IDBDataBase, IDBFactory, IDBIndex, IDBObjectStore, etc.
  -) Web Storage: Storage, StorageEvent, WindowLocalStorage, WindowSessionStorage.

- Conectividad
  -) Web Sockets: BroadcastChannel, CloseEvent, EventSource, PortCollection, WebSocket.
  -) Messaging: MessageChannel, MessageEvent, MessagePort.
  -) WebRTC: RTCPeerConnection, RTCIceServer, RTCIceCandidate, RTCDataChannel, etc.

- Acceso:
  -) Drag And Drop (D&D): DataTransfer, DataTransferItem, DataTransferItemList, DragEvent.
  -) FullScreen: Document (fullscreenElement, fullscreenEnabled), Element (requestFullscreen).

- Estilos
  -) CSS Object Model: CSS, CSSRule, CSSStyleSheet, MediaList, StyleSheet, etc.
  -) Selectors: Document (querySelector, querySelectorAll), DocumentFragment, Element.

- Multimedia
  -) Animation Timing: Window (cancelAnimationFrame, requestAnimationFrame).
  -) Media: AudioTrack, HTMLMediaElement, HTMLTrackElement, MediaController, VideoTrack.
  -) Pointer Lock: Document (exitPointerLock), Element (requestPointerLock), MouseEvent.
  -) Web Audio: AnalyserNode, AudioBuffer, AudioListener, AudioParam, DelayNode, GainNode.

- Performance
  -) Browser: History, ImageBitmap, Location, MimeType, Navigator, WindowBase64 (atob, btoa),
     WindowTimers (clearInterval, clearTimeout, setInterval, setTimeout), etc.
  -) Typed Arrays: ArrayBuffer, ArrayBufferView, DataView, Float..Array, Int..Array, Uint..Array.
  -) Web Workers: AbstractWorker, SharedWorker, Worker, WorkerLocation, WorkerNavigator, etc.

- Componentes Web
  -) Shadow DOM: CSSHostRule, CSSRule, Element (createShadowRoot), ShadowRoot, etc.
  -) Custom Elements: Element (customElements.define)
  -) HTML Imports: HTMLLinkElement (rel=import), Document (write, close).

- ECMAScript
  -) Tipos de Datos Primitivos: Boolean, Null, Undefined, Number, String, Symbol (ES6).
  -) Tipos Objetos: Array, Date, Error, Function, Global, JSON, Math, Object, RegExp.
  -) Colección de Claves (Objetos): Maps, Sets, WeakMaps, WeakSets.

- Seguridad Web (WebCryptography)
  -) Clases: Crypto, Algorithm, KeyAlgorithm, CryptoKey, SubtleCrypto, etc.
  -) Operaciones: encrypt, decrypt, sign, verify, deriveBits, wrapKey, unwrapKey,
     generateKey, importKey, exportKey, getLength.
  -) Algoritmos: RSASSA-PKCS1-v1_5, RSA-PSS, RSA-OAEP, ECDSA, ECDH, AES-CBC,
     HMAC, DH, SHA-1, SHA-256, SHA-384, SHA-512, CONCAT, HKDF-CTR, PBKDF2, etc.

- Comunicación Asíncrona con el Servidor:
  -) Cliente al Servidor: XmlHttpRequest (XHR)
  -) Servidor al Cliente: Server-Send Events (SSE)
  -) Bidireccional: Web Sockets

4. Cronología de Librerías y Frameworks de JavaScript (11 años)

- 2004: Dojo Toolkit (Alex Russell)
- 2005: Prototype JavaScript Framework (Sam Stephenson)
- 2005: Script.aculo.us (Thomas Fuchs)
- 2006: Yahoo UI Library (YUI)
- 2006: Google Web Toolkit (GWT)
- 2006: jQuery (John Resig)
- 2006: MooTools (Valerio Proietti)
- 2007: ExtJS (Jack Slocum)
- 2007: WaveMaker (Scott Miles)
- 2007: jQuery UI (Scott González, Adam Sontag, etc)
- 2008: Processing.js (John Resig)
- 2008: QUnit (John Resig)
- 2009: CofeeScript (Jeremy Ashkenas)
- 2009: Glow (BBC)
- 2009: Raphaël (Dmitry Baranovskiy)
- 2009: NodeJS (Ryan Dahl)
- 2010: BackboneJS (Jeremy Ashkenas)
- 2010: KnockoutJS (Steve Sanderson)
- 2010: AngularJS (Misko Hevery)
- 2010: Three.js (Ricardo Cabello)
- 2010: jQuery Mobile (jQuery Foundation)
- 2010: Jasmine (Pivotal Labs)
- 2011: Dart (Lars Bak, Kasper Lund)
- 2011: Ember.js (Yehuda Katz, Tom Dale)
- 2011: Modernizr (Paul Irish)
- 2011: D3.js (Bostock, Heer, Ogievetsky)
- 2011: Kendo UI (Telerik)
- 2011: Unit.js (Nicolas Tallefourtane)
- 2012: TypeScript (Anders Hejlsberg)
- 2012: Bootstrap (Mark Otto, Jacob Thornton)
- 2012: Enyo.js (Palm, HP)
- 2012: Meteor (Meteor Development Group)
- 2012: ExpressJS (TJ Holowaychuk)
- 2013: Polymer (Google)
- 2013: X-Tag (Mozilla)
- 2013: Webix (XB Software)
- 2013: React (Jordan Walke)
- 2013: Sails.js (Mike McNeil)
- 2013: Snap.svg (Adobe)
- 2014: Underscore.js (Jeremy Ashkenas)
- 2014: Socket.io (Guillermo Rauch)
- 2015: Reac Native (Tom Ochinno, Christopher Chedeau)
- 2015: Aurelia.io (Rob Eisenberg)

5. Herramientas de JavaScript

5.1. Herramientas de Calidad del Código (JavaScript Code Quality Tools)

1. JSLint
- Es la más antigua y fué creada por Douglas Crockford en el 2002

2. JSHint
- Team: Rick Waldron, Caitlin Potter, Mike Sherov, Mike Pennisi, y Luke Page

3. JSCS (JavaScript Code Style checker)
- Team: Marat Dulin, Oleg Gaidarenko, Mike Sherov, Joel Kemp, Alexej Yaroshevich, Henry Zhu

4. ESLint (Pluggable JavaScript Linter)
- Originalmente creada por Nicholas C. Zakas en el 2013
- Actualmente mantenida por jQuery Foundation
- Usuarios: Algolia, Disqus, 2GIS
- Requerimientos: Node.js or io.js
- Sistemas Operativos: Windows, Mac, Linux

5.2. Herramientas de Pruebas Unitarias (JavaScript Unit Testing Tools)

1. QUnit (JavaScript Unit Testing framework)
- Originalmente creada por Jhon Resign en el 2006 como parte de jQuery
- En el 2008 fue extraida de jQuery para ser independiente en el 2009
- Usos: jQuery, jQuery UI, jQuery Mobile

2. Unit.js (Unit testing framework for JavaScript)
- Creado por el Francés Nicolas Talle (Nicolab) en el 2014
- Requerimientos: Node.js y el Browser

3. Jasmine (Behavior-Driven JavaScript)
- Creada por Pivotal Labs en el 2010

4. Mocha (the fun, simple, flexible JavaScript test framework)
- Creada en el 2011 por la organización Mocha
- Requerimientos: Node.js y el Browser
- Usos: should.js, express.js, chai, better-assert, unexpected
- Usuarios: Sauce Labs, Yahoo
- Contribuidores: Christopher Hiller, Daniel St. Jules, ScottFreeCode, David Da Silva

6. Entrenamiento en JavaScript

6.1. Libros











6.2. Cursos Oficiales Microsoft Virtual Academy (MVA)











6.3. Tutoriales























6.4. Conferencias













6.5. Reuniones (Meetups)







6.6. En Vivo (Hangouts)



7. Comentario Final

En este artículo me propuse dar la mayor cantidad de información sobre JavaScript, ya que en muchos lugares todavía no se toma conciencia de la necesidad de trabajar lo mas desconectado posible y solo actualizar en tiempo real los datos cuando ocurran cambios, para lo cual es necesario conocer mas JavaScript.

Particularmente, en los últimos 3 años mi orientación de desarrollador, cambio radicalmente, hacia el lado del cliente usando JavaScript y priorizando la performance usando una arquitectura con pocos archivos y poco contenido lo cual tiene ventajas en velocidad incomparables.

Si bien es cierto, en la mayor parte del mundo se esta de acuerdo en que JavaScript es el número 1 por encima de Java, PHP, Phyton, Ruby, C#, C++, etc; donde no estoy de acuerdo es en el uso indiscriminado de Frameworks sobre todo de lado del cliente que "debilitan el rendimiento".

Los programadores tienen que entender que el Navegador (Browser) es un Framework con cientos de clases y métodos (APIs), las cuales detallamos en el tema 3 de este artículo: "APIs de JavaScript" y que no es necesario usar ninguna Librería ni Framework para hacer cualquier cosa (al final tanto las Librerías como los Frameworks usan dichas APIs).

Hay que invertir mas tiempo aprendiendo lo que nunca pasará de moda (lo nativo) y dejar de lado la moda (las Librerías y Frameworks, que salen por decenas en un año y en poco quedan obsoletas). De mi parte llevo enseñando mas de 3 años las APIs de JavaScript en cada curso, taller o capacitación que hago.

Lamentablemente, en muchas partes todavía se piensa que se debe hacer todo de lado del servidor y los que piensan lo contrario (hacerlo de lado del cliente) lo hacen usando Librerías o Frameworks, por tanto, mi arquitectura y mis técnicas de programación de lado del cliente con JavaScript son solo requeridas por un grupo reducido de seguidores, lo cual me apena mucho y me anima a dar un paso al costado, ya que el mercado laboral y el de entrenamiento es reducido (todos quieren lo estándar, nadie quiere cambiar 180 grados).

Si los programadores siguieran las técnicas usadas en mis capacitaciones, cursos o talleres verían la diferencia brutal de velocidad entre una pagina web clásica o moderna (MVC, SPA, etc.) con lo que nosotros hacemos en forma nativa con pocos archivos: un HTML, un CSS, un JavaScript y un Sprite.

Si les gusto no se olviden de dar Like y el que desea lo puede compartir en cualquier medio: Sitio Web, Google+, FaceBook, Twitter, solo mantener el nombre del creador. Los que están llevando el Taller de los Domingos no falten ya que es el último mes de mi último curso (aprovechen lo poco que queda).

martes, 29 de marzo de 2016

El Libro del Día: ASP.NET jQuery Cookbook (2nd Edition)

El Libro del Día: 2016-03-29

Titulo: ASP.NET jQuery Cookbook (2nd Edition)
Autor: Sonal Aneel Allana
Editorial: Packt
Nro Paginas: 478

Capítulos:
Chapter 1: Getting Started with jQuery in ASP.NET
Chapter 2: Using jQuery Selectors with ASP.NET Controls
Chapter 3: Event Handling Using jQuery
Chapter 4: DOM Traversal and Manipulation in ASP.NET
Chapter 5: Visual Effects in ASP.NET Sites
Chapter 6: Working with Graphics in ASP.NET Sites
Chapter 7: Ajax Using jQuery
Chapter 8: Creating and Using jQuery Plugins

Descarga:
ASP.NET_jQuery_Cookbook_2nd_Edition

miércoles, 6 de enero de 2016

Entrenamiento - Vacantes para el Curso de Desarrollo Web de los Domingos

Vacantes para el Curso de Desarrollo Web de los Domingos

Estimados alumnos, este Domingo 10 de Enero iniciamos el segundo mes del curso de Desarrollo Web Desconectado Total usando JavaScript, HTML5 y CSS3 (80% de código cliente y 20% código servidor aproximadamente).

Hay 10 nuevas vacantes para cubrir el total de la capacidad y los interesados solo deben un mail de confirmación a Luis.duenash@gmail.com con su Nombre Completo y si ha sido ex-alumno o no. El costo del curso es de 200 soles por 4 sesiones de 6 horas, es decir 24 horas.

El horario son los Domingos de 8:00 am a 2:00 pm y se realiza en el cono Norte, la dirección exacta será enviada por mail a los confirmados. Los interesados tener en cuenta el lugar y que no es curso tradicional, no se dará certificados, diplomas, recibos, etc.

Los que asisten a mis cursos y talleres saben que cada semana tenemos temas muy interesantes que tratamos que serán la base del desarrollo web moderno: desconectado total y nativo, dando énfasis a las APIs de JavaScript y creando código óptimo.

Muchos han estado preguntando sobre cursos y les he dicho que ya no dicto regularmente, excepto este curso de los Domingos, y los que alguna vez ya llevaron conmigo los temas son totalmente distintos, además hay mucha teoría sobre cómo funciona Internet, el Navegador, .NET Framework, etc.

Recuerden que solo se registrará a los 10 primeros y de preferencia a ex-alumnos. Aprovechen que el costo del curso es muy bajo comparado con lo que se cobra en la mayoría de centros de capacitación por no aprender nada que solucione los problemas de la computación.

Sea lo que sea que te enseñen: C#, LINQ, Entity Framework, CodeFirst, AngularJS, KnockoutJS, jQuery, AJAX, Ember.JS, etc. te darás cuenta que los problemas de lentitud seguirán, y si apuestas por el Hardware aumentando mas disco, CPU, memoria, etc, tampoco dará resultados.

La solución completa es la que vemos en estos talleres y muchos alumnos ya están poniendo en práctica esta nueva forma de programar que es rápida en desarrollo y mas rápida en ejecución. Los visitantes de mi Blog y de mi canal de YouTube tienen que tener en cuenta que la mayoría de los Demos y Videos no son posteados, solo está accesible para los que siguen el curso.

Saludos

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>
    <meta name="viewport" content="width=device-width" />
    <title>Categoria</title>
    <link href="~/Estilos/ACME.css" rel="stylesheet" />
</head>
<body>
    <div id="divCategoria">
        <div id="divCabeceraCategoria">
            <div id="divSubtituloCategoria" class="Subtitulo">
                <span id="spnSubtituloCategoria">Selecciona una Categoria</span>
            </div>
        </div>
        <div id="divListaCategoria">
            <span id="spnListaCategoria">Aqui se debe mostrar un lista de Categorias</span>
        </div>
        <div id="divPieCategoria">
            <div id="divNavegarCategoria" class="Subtitulo">
                <a id="aCatProd" href="~/MPA/Producto">Productos</a>
            </div>
        </div>
    </div>
    <script src="~/Scripts/Categoria.js"></script>
</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>
    <meta name="viewport" content="width=device-width" />
    <title>Producto</title>
    <link href="~/Estilos/ACME.css" rel="stylesheet" />
</head>
<body>
    <div id="divProducto">
        <div id="divCabeceraProducto">
            <div id="divSubtituloProducto" class="Subtitulo">
                <span id="spnSubtituloProducto">Agrega Productos a tu Pedido</span>
            </div>
        </div>
        <div id="divListaProducto">
            <span id="spnListaProducto">Aqui se debe mostrar un lista de Productos</span>
        </div>
        <div id="divPieProducto">
            <div id="divNavegarProducto" class="Subtitulo">
                <a id="aProdPed" href="~/MPA/Pedido">Pedidos</a>
                <a id="aProdCat" href="~/MPA/Categoria">Regresar</a>
            </div>
        </div>
    </div>
    <script src="~/Scripts/Producto.js"></script>
</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>
    <meta name="viewport" content="width=device-width" />
    <title>Pedido</title>
    <link href="~/Estilos/ACME.css" rel="stylesheet" />
</head>
<body>
    <div id="divPedido">
        <div id="divCabeceraPedido">
            <div id="divSubtituloPedido" class="Subtitulo">
                <span id="spnSubtituloPedido">Agrega Productos a tu Pedido</span>
            </div>
        </div>
        <div id="divListaPedido">
            <span id="spnListaPedido">Aqui se debe mostrar un lista de Pedidos</span>
        </div>
        <div id="divPiePedido">
            <div id="divNavegarPedido" class="Subtitulo">
                <a id="aPedCat" href="~/MPA/Categoria">Regresar</a>
            </div>
        </div>
    </div>
    <script src="~/Scripts/Pedido.js"></script>
</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:

window.onload = function () {
    alert("Cargando Categorias");
}

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

window.onload = function () {
    alert("Cargando Productos");
}

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

window.onload = function () {
    alert("Cargando Pedidos");
}

Configurar el Inicio del MPA

- 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 = "MPA", action = "Login", id = UrlParameter.Optional }
            );
        }
    }
}

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>
    <meta name="viewport" content="width=device-width" />
    <title>Pedido</title>
    <link href="~/Estilos/ACME.css" rel="stylesheet" />
</head>
<body>
    <div id="divTodo">
        <div id="divLogin" class="Pagina">
            <div id="divCabeceraLogin">
                <div id="divTituloLogin" class="Titulo">
                    <span id="spnTitulo">Aplicación de Simple Pagina (SPA)</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>
        <div id="divCategoria" class="Pagina">
            <div id="divCabeceraCategoria">
                <div id="divSubtituloCategoria" class="Subtitulo">
                    <span id="spnSubtituloCategoria">Selecciona una Categoria</span>
                </div>
            </div>
            <div id="divListaCategoria">
                <span id="spnListaCategoria">Aqui se debe mostrar un lista de Categorias</span>
            </div>
            <div id="divPieCategoria">
                <div id="divNavegarCategoria" class="Subtitulo">
                    <a id="aCatProd" href="#" data-url="divProducto">Productos</a>
                </div>
            </div>
        </div>
        <div id="divProducto" class="Pagina">
            <div id="divCabeceraProducto">
                <div id="divSubtituloProducto" class="Subtitulo">
                    <span id="spnSubtituloProducto">Agrega Productos a tu Pedido</span>
                </div>
            </div>
            <div id="divListaProducto">
                <span id="spnListaProducto">Aqui se debe mostrar un lista de Productos</span>
            </div>
            <div id="divPieProducto">
                <div id="divNavegarProducto" class="Subtitulo">
                    <a id="aProdPed" href="#" data-url="divPedido">Pedidos</a>
                    <a id="aProdCat" href="#" data-url="divCategoria">Regresar</a>
                </div>
            </div>
        </div>
        <div id="divPedido" class="Pagina">
            <div id="divCabeceraPedido">
                <div id="divSubtituloPedido" class="Subtitulo">
                    <span id="spnSubtituloPedido">Agrega Productos a tu Pedido</span>
                </div>
            </div>
            <div id="divListaPedido">
                <span id="spnListaPedido">Aqui se debe mostrar un lista de Pedidos</span>
            </div>
            <div id="divPiePedido">
                <div id="divNavegarPedido" class="Subtitulo">
                    <a id="aPedCat" href="#" data-url="divCategoria">Regresar</a>
                </div>
            </div>
        </div>
    </div>
    <script src="~/Scripts/Todo.js"></script>
</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