Ergonomía y comportamiento del cliente

Introducción

Las aplicaciones web modernas son mucho más sofisticadas que hace 5 o 10 años. Los sitios web de hoy son bonitos, organizados, impresionantemente animados, a veces llamativos y saben cómo mantener la atención del usuario en el navegador. Además, estos sitios también son responsivos, es decir, se adaptan al tamaño de la pantalla.

Con la explosión de los teléfonos inteligentes y las tabletas, los sitios web se han visto obligados a encontrar soluciones para adaptar sus contenidos a la pantalla, con el fin de garantizar la mejor experiencia posible al usuario, sea cual sea el soporte en el que se ejecute el sitio web. En torno a este problema, se han diseñado ciertas tecnologías para ayudar a los desarrolladores en su trabajo diario.

La navegación del usuario también es mucho más fluida que antes, con muchas menos recargas fuera de lugar. Esto requiere más conocimientos de front-end por parte del desarrollador, en lugar de conocimientos puramente orientados al servidor. La arquitectura de los sitios web cambia constantemente, lo que obliga a los equipos de desarrollo a estar a la vanguardia de los nuevos avances.

Este capítulo tratará esencialmente de una serie de técnicas, librerías y frameworks del lado del cliente que permiten a los desarrolladores gestionar mejor los problemas actuales. Algunas secciones se centrarán...

Gestión de estilo con LESS y SASS

Los usuarios de la web exigen mucho de sus sitios, tanto en términos de estilo como de experiencia de usuario. Estas exigencias obligan también al desarrollador a utilizar frameworks cada vez más complejos y completos para obtener un resultado final convincente. La organización del proyecto es esencial para garantizar un mantenimiento óptimo y para el diseño, esto significa concebir hojas de estilo CSS que sean a la vez coherentes y legibles: un nuevo desarrollador en el equipo también debe ser capaz de orientarse fácilmente. Así nacieron las herramientas LESS y SASS y librerías como Font Awesome.

Los lenguajes LESS y SASS son lenguajes preprocesadores de CSS, es decir, son lenguajes pensados para ser compilados en CSS. Estos lenguajes proporcionan funcionalidades adicionales al lenguaje CSS básico, como gestión de variables, anidamiento de estilos para evitar repeticiones y mucho más. El siguiente ejemplo ofrece un primer ejemplo en CSS, seguido de un segundo ejemplo, en LESS, que muestra cómo se pueden compartir los estilos:

.header {  
   color: black;  
   font-weight: bold;  
   font-size: 18px;  
   font-family: Helvetica, Arial, sans-serif;  
}  
  
.small-header {  
   color: black;  
   font-weight: bold;  
   font-size: 14px;  
   font-family: Helvetica, Arial, sans-serif;  
} 

El segundo estilo utiliza la mayoría de las propiedades del primero, sólo modifica la fuente. ¿Por qué no compartir estilos comunes? El código siguiente muestra cómo el segundo estilo reutiliza la clase header para adoptar sus estilos: 

.header {  
   color: black;  
   font-weight: bold;  
   font-size: 18px;  
   font-family: Helvetica, Arial, sans-serif;  
}  
  
.small-header {  
   .header;  
   font-size: 14px;  
} 

La librería Bootstrap

El diseño adaptable se ha convertido en uno de los requisitos clave del desarrollo web moderno: los clientes quieren que su sitio funcione en ordenadores, tabletas y teléfonos inteligentes, adaptando el contenido para garantizar que siempre sea legible y comprensible en cualquier soporte.

Bootstrap es actualmente la librería más popular para crear aplicaciones web responsivas. Desarrollada por Twitter y compuesta tanto por CSS como por JavaScript, Bootstrap proporciona un gran número de funciones muy fáciles de utilizar por los desarrolladores, para mejorar la experiencia del usuario. Esta librería es casi como un framework, ya que proporciona un método real de trabajo e implementación para construir páginas responsive.

En primer lugar, debe instalar la librería en su proyecto mediante Bower o NPM. Los siguientes comandos se pueden utilizar para llevar a cabo la instalación, dependiendo del gestor de paquetes utilizado:

// Para bower  
bower install bootstrap  
  
// Para NPM  
npm install bootstrap 

Si se utiliza bower, basta con incluir el CSS en la página. Si se utiliza NPM, es necesario utilizar Gulp o Grunt para copiar el archivo en la carpeta wwwroot.

El concepto principal se refiere a la colocación de los elementos dentro de la página. En lugar de utilizar etiquetas <table>, Bootstrap utiliza un sistema de cuadrícula muy sencillo para colocar los elementos en un ancho máximo de 12 columnas. Se eligió este número porque se puede dividir en 1, 2, 3 o 4 según sea necesario. El desarrollador elige entonces cuántas columnas deben ocupar los elementos para construir la página. El siguiente diagrama resume este concepto disponiendo 3 bloques de <div> en 4 columnas de Bootstrap cada uno, formando así las 12 columnas de Bootstrap.

Diseño en columnas con Bootstrap

Para asignar las columnas a los bloques, basta con utilizar una de las muchas clases que Bootstrap pone a disposición del desarrollador. En el ejemplo anterior, se utilizaría las clases col-md-4 en los tres...

El framework Knockout.js

A lo largo de los años han aparecido numerosos frameworks y librerías JavaScript para manipular datos estrechamente vinculados a la vista. El objetivo es desplazar la carga de trabajo del desarrollador: ya no tiene que actuar directamente sobre la vista, sino simplemente sobre los datos que, a través del framework o la librería, actualizarán automáticamente la vista. Las aplicaciones modernas (web o no) utilizan cada vez más este proceso para aumentar la mantenibilidad del proyecto, porque es mucho más fácil detectar errores en los algoritmos de manipulación de datos que en los algoritmos de manipulación de vistas. Desde el punto de vista del código, éste resulta más legible y comprensible para una persona ajena al proyecto.

El framework Knockout.js permite implementar este proceso en JavaScript, actualizando la vista según los datos del lado del cliente, sin recargar la página. Este tipo de librería es especialmente útil con páginas e interfaces de usuario complejas que requieren mucho código JavaScript. El principio es sencillo: el framework asigna elementos de la interfaz gráfica a propiedades de un modelo de datos definido en un objeto JavaScript. La comunicación puede tener lugar en ambas direcciones, lo que significa que es posible actualizar los datos desde la vista y actualizar la vista modificando los datos en el código.

Desde un punto de vista conceptual, Knockout.js permite implementar el patrón Model-View-ViewModel (MVVM). Este patrón facilita la separación de las capas visuales y de modelado del código de negocio puro. El "ViewModel" será por tanto el objeto de mapeo entre las propiedades JavaScript y la vista. Los conceptos importantes cubiertos en esta sección son Observables y Bindings.

Knockout.js se descarga a través de bower o NPM, al igual que todas las demás librerías del lado del cliente. Por lo tanto, es posible dejar que bower instale el paquete o utilizar NPM y posteriormente, Gulp o Grunt para copiar la librería. El código siguiente utiliza el archivo package.json para instalar el paquete.

{  
  "name": "ASP.NET",  ...

Comunicación en tiempo real con SignalR

ASP.NET SignalR es una tecnología diseñada para que los desarrolladores de ASP.NET creen aplicaciones web con interacción en tiempo real entre el cliente y el servidor. En la práctica, esto significa que el servidor se puede comunicar con los clientes y enviar información instantáneamente sin que se actualice la página.

Las nuevas API HTML5 se han integrado en SignalR para aprovechar la tecnología WebSockets, que permite una comunicación rápida y eficaz. Así, no es necesario que el desarrollador codifique un sistema de transporte entre el cliente y el servidor: SignalR lo hace automáticamente. Sin embargo, los WebSockets sólo son compatibles desde HTML 5 y, por tanto, sólo a través de navegadores recientes. Afortunadamente, SignalR puede volver a tecnologías más antiguas si es necesario. Los distintos modos de transporte son los siguientes: 

SignalR pasa por varias etapas para definir el modo de transporte que debe utilizar:

El lenguaje TypeScript

JavaScript es actualmente uno de los lenguajes más utilizados en el mundo para diseñar aplicaciones web modernas y dinámicas. Hay varias razones por las que ahora es difícil para los desarrolladores front-end prescindir de esta tecnología:

Escribir código JavaScript limpio y mantenible no es necesariamente fácil y las aplicaciones web rápidamente se pueden convertir en algo difícil de gestionar si el código cliente no es de alta calidad o no está escrito con un mínimo de buenas prácticas. Los desarrolladores se pueden perder rápidamente si no tienen un sólido conocimiento y experiencia del lenguaje.

Para superar estos problemas, han surgido varios lenguajes compilados basados en JavaScript. Microsoft ha creado y desarrollado su propio lenguaje, TypeScript. Tanto de código abierto como utilizable fuera del entorno Microsoft, TypeScript se está convirtiendo en una alternativa sólida a la escritura de código cliente.

TypeScript es un lenguaje compilado, lo que significa que Microsoft ha desarrollado su propio compilador para transpilar (contracción de traducir y compilar) el código TypeScript a JavaScript. Cualquier código JavaScript se integrará muy fácilmente en el código TypeScript, porque el lenguaje de Microsoft es simplemente un superconjunto de JavaScript. Librerías como jQuery o Bootstrap se integrarán del mismo modo que con JavaScript.

La sintaxis de TypeScript es una verdadera extensión de la de JavaScript y el tiempo necesario para adaptarlo a partir de un lenguaje existente es muy corto. El aprendizaje...