A partir de la identificación de las capas y componentes que conforman la arquitectura, en la presente unidad se profundiza sobre el concepto de front-end, que está relacionado con la parte visible de la aplicación web, correspondiente a la interfaz gráfica de usuario, su estructura, estilos y comportamiento.

En tal sentido se estudian las tecnologías y marcos de trabajo, que permiten construir una GUI (graphics arquitectura.)interfaz gráfica de usuario, que cumple con ciertos criterios de calidad, usabilidad y seguridad dentro del contexto de los lineamientos definidos en la arquitectura.

Es así como se presentan HTML (Hypertext Markup Language) y CSS (Cascade Style Sheet) como lenguajes de marcado que permiten definir la estructura y estilo de una página web. De la misma manera, se hace uso de JavaScript, el cual es un lenguaje de programación interpretado que permite incorporar comportamiento a los elementos HTML. Ahora bien, como interfaz entre HTML (estructura) y JavaScript (comportamiento) se estudia DOM (Document Object Model).

Propósito general

Dar a conocer al estudiante las características, funcionalidades, ventajas y desventajas, de las tecnologías actuales disponibles para la implementación de la interfaz de usuario (Front-end) de una aplicación web.

Propósitos específicos

• Proporcionar al estudiante los conocimientos para que pueda identificar las principales características de las tecnologías que se utilizan para diseñar, estructurar y darle comportamiento a la interfaz gráfica de una página web.

• Ayudar al estudiante a establecer las ventajas y desventajas de cada una de las tecnologías estudiadas, así como sus principales usos, dependiendo del contexto y las condiciones establecidas en los requerimientos y la arquitectura de la aplicación.

• Proporcionar al estudiante los conceptos y lineamientos necesarios para que pueda construir el front-end de una aplicación web, haciendo uso de las tecnologías referenciadas.

La interfaz gráfica de una aplicación web o front-end debe cumplir con ciertas características para que el usuario se sienta satisfecho al utilizarla.

Si bien es cierto es bastante complejo que el 100% de los usuarios de una aplicación estén completamente satisfechos, a continuación revisaremos dos conceptos que nos ayudarán a identificar las características que debe tener el Front-End de una aplicación web, para lograr en cierta medida ese nivel de satisfacción: La usabilidad y la experiencia del usuario.

El que una aplicación sea usable, no implica que tenga una buena experiencia de usuario. Sin embargo, sin un alto grado de usabilidad, es poco probable que esto se logré. De igual forma, es importante resaltar que la buena experiencia de usuario representa el éxito de una aplicación web.

Teniendo claridad sobre los conceptos de usabilidad y experiencia de usuario, relevantes para la construcción del front-end de una aplicación web, ahora vamos a enfocarnos en el cómo “construir” dicho front-end, para lo cual es importante presentar una de las mejores prácticas que actualmente se están aplicando en el desarrollo de aplicaciones web: “Separación por Capas”.

Este proceso comienza justamente separando en archivos diferentes el código JavaScript, las hojas de estilos (CSS) y las páginas HTML. Esto permite que diferentes personas puedan crear módulos reutilizables de presentación y comportamiento sin bloquearse entre sí.

Ahora bien, normalmente el contenido de una página web, corresponde al texto y demás recursos como audio, vídeo e imágenes que pueda incluir. Así mismo, es posible hacer enlaces a otras páginas, a través de sus correspondientes URIs (Uniform Resources Identifiers).

Malas prácticas: todavía es posible encontrarse con páginas web que aparte del lenguaje HTML, tienen embebido código JavaScript, estilos de presentación e incluso consultas directas a una base de datos. Es como si en la construcción de una casa, el cableado y la tubería estuviesen incrustados en las paredes de cemento; si hay algún daño o se requiere una modificación, lo mejor sería echar el muro abajo y volver a empezar.

La estructura de una página web está asociada a la disposición de las diferentes secciones en las cuales se presentará el contenido (texto, imágenes, video, etc.), tal como lo presenta el gráfico de esta pantalla.

El contenido dentro de la estructura inicial de la página, incluye los diferentes componentes que hacen parte de ésta, como son: botones, tablas, cuadros de texto, etc., así como el estilo de presentación, en el que se definen colores, tamaños, tipos de letra, posición entre otros. Los componentes, su ubicación y los estilos correspondientes, conforman el diseño gráfico de la página web.

Al hablar de la estructura de una página web y sus componentes, inevitablemente debemos referirnos a HTML - Hypertext Markup Language. Ahora bien, para definir el estilo de dichos componentes utilizaremos las hojas de estilos en cascada (CSS).

De acuerdo con lo presentado en la unidad anterior, Tim Berners-Lee crea el HTML hacia finales de 1990. Las bases de lo propuesto por Lee no han cambiado demasiado, sin embargo, el HTML ha estado en constante evolución. Actualmente nos encontramos en la versión 5, la cual fue desarrollada siguiendo principios como: compatibilidad, utilidad, interoperabilidad y acceso universal. (World Wide Web Consortium, W3C, 2007)

HTML5 incluye mejoras a gran parte de los elementos de las versiones anteriores y adiciona nuevos elementos, y a su vez, atributos. En la siguiente interactividad podemos observar la clasificación de los diferentes elementos de HTML5.

Como lo mencionamos anteriormente, los elementos tienen eventos asociados. Algunos de éstos aplican de manera general a todos elementos y otros aplican a elementos en particular dependiendo de su funcionalidad. Veamos una tabla resumen de los mismos de manera general.

Material de apoyo

Las hojas de estilo en cascada permiten modificar la forma en que los componentes se visualizan a través de los navegadores. En tal sentido, a través de CSS podemos modificar el tamaño, tipo y color del texto, alinear elementos, definir colores de borde, fondo, entre otros.

Identificadores HTML: a continuación, algunas condiciones que deben cumplir los identificadores de elementos HTML: No pueden existir dos elementos con el mismo valor en su atributo Id, en una misma página. No puede iniciar con un caracter numérico. No puede contener espacios. Debe estar entre comillas. No puede contener signos de puntuación, excepto: guión, guión bajo, punto y dos puntos.

El W3C, para esta última especificación, ha decidido separar el CSS3 por módulos dedicados a aspectos particulares de este lenguaje, entre los cuales se encuentran: selectores, template layout, fondos y bordes, interface de usuario básica, colores, fuentes, posicionamiento, texto, y muchos más. (Saltzman Dan, A., 2012) Como podemos ver CSS3 tiene bastantes herramientas para construir una interfaz de usuario con “estilo”.

A continuación se definen los siguientes conceptos:

• Selector
• Combinators

Actividad de aprendizaje

Fortalece todo lo aprendido solucionando el siguiente crucigrama

Material de apoyo

Continuando con la mejor práctica de “Separación por Capas”, en las siguientes secciones abordaremos la manera como podemos darle comportamiento a la interfaz gráfica de nuestra aplicación web, a través de lenguajes de tipo client-side scripting, como JavaScript.

Como se mencionó en secciones anteriores, HTML permite embeber o enlazar scripts desde una página weblos cuales le proporcionan la capacidad al front-end de capturar, validar, transformar, procesar la información de formularios HTML, enviar y recibir información del back-end e incluso adicionar componentes y elementos a una página, de manera dinámica.

En las dos siguientes secciones, profundizaremos en el modelo DOM y en el lenguaje JavaScript.

Document Object Model - DOM, es una plataforma o lenguaje neutro, que sirve como interfaz para que los programas y scripts puedan de manera dinámica acceder y actualizar el contenido, la estructura y el estilo de los documentos. (World Wide Web Consortium, W3C, 2005).

Dado lo anterior, DOM representa la organización de los objetos en una página. El modelo de objetos, es jerárquico y cada elemento representa un nodo de dicha jerarquía.

Ahora bien, recordemos que DOM es una interfaz, y como tal representa, (Refsnes Data, 2017):

• Los elementos HTML, como objetos
• Los atributos de los elementos, como propiedades.

Por otro lado, tiene acceso a los elementos HTML y sus eventos, a través de métodos.

El estándar DOM del W3C está divido en tres partes: Core DOM: Modelo para todos los documentos. XML DOM: Modelo estándar para documentos XML, a partir del cual se han construido librerías para cargar, interpretar y crear documentos XML. HTML DOM: Modelo estándar para documentos HTML.

Script es un código de programación, que no necesita ser compilado (pre-procesado) antes de ser ejecutado; en tal sentido, JavaScript es el lenguaje de scripting más utilizado en la actualidad, es un lenguaje interpretado, débilmente tipado, que es ejecutado por el navegador cuando la página es descargada o en respuesta a un evento disparado por el usuario. (World Wide Web Consortium, W3C, 2017).

La evolución de JavaScript ha ido de la mano, con la evolución de los navegadores, recordemos que es el navegador el que interpreta y ejecuta este tipo de código.

Las instrucciones en JavaScript se separan por “;” y están compuestas por expresiones, variables, valores, operadores, palabras reservadas y comentarios. En la siguiente interactividad, presentamos un resumen de la sintaxis y principales estructuras del lenguaje JavaScript.

Después de hacer este pequeño recorrido por la sintaxis JavaScript, veamos las dos maneras en que una página HTML puede invocar scripts.

Finalmente, estudiemos qué nos ofrece JavaScript para acceder a los elementos de nuestras páginas HTML, a través de DOM. Para esto, JavaScript ha implementado una serie de métodos para los objetos de tipo DOM.

La fundación Mozilla es quien ha recibido el legado de Netscape, es así como el navegador FireFox está basado en el antiguo navegador Netscape y ha seguido mejorando el lenguaje JavaScript

Material de apoyo

Bien, hemos revisado conceptos de HTML, CSS, DOM, JavaScript, pero recuerdan que en la unidad 1, hablamos de una de las técnicas que revolucionó la manera en que el usuario interactúa con la interfaz de usuario de una aplicación web, dicha técnica es AJAX: Asynchronous JavaScript and XML.

AJAX es un término acuñado en 2005, que describe una técnica, que mezcla varias tecnologías, HTML, XML, JavaScript, y cuyo objetivo principal es hacer refrescos parciales sin necesidad de recargar la página entera, dado que puede cargar información del servidor. Una vez la página haya cargado completamente, también permite hacer peticiones al servidor en segundo plano.

Ahora bien, la estrella de esta obra es el objeto XMLHttpRequest, el cual permite realizar invocaciones al back-end en forma sincrónica y asincrónica. Veámos con un ejemplo cómo luce el código JavaScript correspondiente.

En algunas ocasiones es difícil hacer pruebas de peticiones AJAX, por la restricción de algunos servidores web, de no permitir que se hagan este tipo de peticiones desde páginas que no estén bajo su mismo dominio, esto por temas de seguridad. Dicha condición es conocida como “Access-Control-Allow-Origin”.

El protocolo HTTP, define una serie de métodos de petición para indicar la acción que se desea realizar sobre un recurso determinado. Por lo pronto se referencian los que más nos interesan: GET: Permite obtener una representación de un recurso específico, este tipo de peticiones solo debe utilizarse para solicitar datos. POST: Permite enviar una entidad hacia determinado recurso, por lo general se espera un cambio en el estado o efectos secundarios en el servidor.

Material de apoyo

En los capítulos anteriores, hemos visto diferentes lenguajes, técnicas y especificaciones a partir de las cuales se puede crear el front-end de una aplicación web. Sin embargo, construir una aplicación grande y compleja, haciendo uso de estas tecnologías base, puede volverse una tarea dispendiosa.

En la actualidad existen varios frameworks y librerías basadas en HTML, CSS, JavaScript y AJAX, que facilitan la construcción del front-end de las aplicaciones web, proporcionando componentes, estilos y formas más sencillas de comunicarse con el back-end.

En los siguientes capítulos veremos con un poco más de detalle, algunas de las librerías y frameworks JavaScript, más utilizados y conocidos, sin desconocer que hay muchos otros, que están evolucionando y ganándose un espacio en el mercado.

Algunos de los otros frameworks para implementación del front-end, que también están ganando adeptos son: Ember.js, Vue.js, Meteor.js, Aurelia, Polymer.

JQuery es un conjunto de librerías libres y de código abierto (licenciadas bajo MIT License), escritas en JavaScript, cuya parte principal, es el motor de selectores llamado Sizzle, el cual también está implementado en dicho lenguaje y hace uso de los selectores CSS como objetos JQuery, para acceder a los elementos de la página HTML. (Bear Yehuda, 2015)

Existen dos maneras de enlazar las librerías JQuery a nuestra página HTML:

• Descargar las librerías y almacenarlas en el servidor
• Incluirlas para ser cargadas desde un CDN disponible en internet.

En el siguiente video, podemos observar cómo construir una interfaz gráfica web, haciendo uso de los componentes y librerías de jQuery.

Ahora veamos un poco de la sintaxis jQuery. No olvidemos que la librería jQuery UI, tiene componentes ya elaborados, con efectos interesantes que podemos utilizar en las interfaces gráficas de nuestras aplicaciones.

Actividad de aprendizaje

Aplica los conocimientos estudiados, construyendo una página web.

Material de apoyo

Angular.js es un framework JavaScript “Todo incluido” de código abierto, creado por Google, el cual tiene mucho que ofrecer a los desarrolladores, a través de un código base estable, una comunidad activa y en crecimiento, y gran diversidad de herramientas.

Angular.js es un framework construido bajo el patrón MVC, (Recuerden que estudiamos este patrón en la unidad 1); frente a los frameworks tradicionales. Este modelo ofrece varias ventajas, como simplicidad, desarrollo rápido, velocidad en la operación, facilidad en las pruebas y facilidad en el empaquetado y despliegue en cualquier plataforma móvil o web. (Williamson, 2015).

Otro tema a tener en cuenta es que Angular está construido y recomienda trabajar con TypeScript. De acuerdo con lo presentado en el gráfico principal de esta pantalla, haremos una breve descripción de cada parte (Dayley, 2017).

Otras librerías bastante utilizadas para construir el front-end de aplicaciones web, son React.js de Facebook y Bootstrap (Mark Otto and Jacob Thornton en Twitter).

Material de apoyo

En la parte inicial de la unidad, se introducen los conceptos de usabilidad y experiencia de usuario, el primero presentado como atributo de calidad del software y el segundo, como una estrategia para entender mejor las necesidades y expectativas del usuario respecto a una aplicación web.

Posteriormente, se presenta una de las mejores prácticas para abordar la construcción del front-end de aplicaciones web, la “separación por capas”, mediante la descripción de las diferentes capas que conforman el front-end y las relaciones entre estas, así como las ventajas de implementar esta estrategia.

En la parte final, se presentan librerías y frameworks, que facilitan la labor del desarrollador en la construcción del front-end de aplicaciones web, indicando características, arquitectura y ejemplos; exponiendo las diferencias entre un conjunto de librerías y un framework para desarrollo de interfaces gráficas. En esta sección, se hace referencia a diferentes temas tratados en la unidad anterior, como tipos de aplicaciones y patrones.

Actividad de aprendizaje

Continuando con la actividad de la unidad 1, aplica tus conocimientos desarrollando de manera detallada la arquitectura y el diseño de la aplicación web, que has planteado para este ejercicio transversal de la asignatura.