Eso que dicen del lado del Cliente

   Después de esta lección aprenderás a:

  • Identificar el significado de aplicaciones del lado del servidor y del lado del cliente.
  • Comprender cuándo desarrollar del uno o ambos lados.

 

Cursos Institucionales.
El Aprendizaje Hecho Fácil. ¡Disfrútalo!

Tecnología del lado del cliente


¿Página o aplicación?

No todo lo que ves en internet son aplicaciones. Cuando ingresas a revisar un catálogo o archivos estadísticos en repositorios donde no podrás interactuar, lo más probable es que estés visitando y cargando una página, catálogo o una portada. Por el contrario, una aplicación implica un sitio web donde el usuario puede interactuar, hacen algo, nos permiten introducir información personal, y responde inteligentemente a las solicitudes. Por ejemplo, los sitios donde puedes hacer compras (comercio electrónico). Además del catálogo de productos y servicios, podrás ponerlos en el carrito de compras, seleccionar tus preferencias de compra, tu método o pasarela de pago y forma de envío. Además esto sitios web sin una apliación web, no podrán tener inventarios actualizados online.

HTML

Lo primero que debemos aclarar es: 

HTML no es un lenguaje de programación. Es un lenguaje de computadora, que conserva el formato textual en etiquetas.

Así, HTML no está preparado para realizar ningún procesamiento. 

En el mundo de internet los usuarios interactúan con sitios web usando navegadores o browsers como Edge Brave, Chrome, Firefox, etc.  Pues las etiquetas son interpretadas en la máquina del cliente, en tu propia computadora la cual tiene instalada por defecto un browser o navegador que viene con tu sistema operativo, pero que podrás además descargar de acuerdo a tus preferencias. Un ejemplo de la etiqueta <h1> para formatear un título:

<h1> HOLA MUNDO DE HTML </h1> 

Otra aclaración importante:

Una vez visualizado el mensaje en tu navegador NO se podrá actualizar si hubiese en ese momento un cambio en la fuente o servidor de donde llegó dicho mensaje. Si y solo sí será posible si refrescas— actualizar  —tu ventana.

Lo anterior muestra la naturaleza estática de HTML.

¿Qué significa lo anterior? Que para obtener actualizaciones, cambios de última hora en la página que estás visualizando, cuando pulsas sobre el botón refrescar (F5) de tu navegador,  lo que realmente estás haciendo es una petición a la máquina remota o servidor para que vuelva a enviar (cargar) la página actual.

Programación del lado del cliente

Ya sabes que el cliente es el usuario que navega en su máquina. Entonces, ¿Cómo es posible  realizar algunas acciones útiles del lado de tu máquina— cliente? ¿Es posible programar utilizando un lenguaje estructurado de tu lado? ¿Cómo se podría por ejemplo validar el ingreso de datos online a un formulario de suscripción a cursos virtuales?, entendiéndose validar como verificar que el correo que ingresa el usuario posee el formato propio de un correo electrónico, o que el campo donde se pide el apellido o segundo nombre no quede vacío, o que la edad no sea “XYZ” antes de enviar la información al servidor? Con HTML estándar la respuesta es: “No es posible”. 

Claro, el usuario simplemente pulsará el botón “Enviar”. Los datos viajarán a través de la red Internet hasta la máquina remota o servidor que contiene los cursos online. Los datos intentarán ser grabados o guardados en una base de datos que por supuesto tendrá los mecanismos propios y programados para validar los datos recibidos. Cuando intente guardar la edad “XYZ”, el campo o casilla dedicada para almacenarla está formateado para recibir solo números. Esto ocasionará una Excepción producto de la validación. Esta validación realizada en el servidor debe ser informada o reportada al usuario que la causó. El servidor entonces debe armar, construir o fabricar una página de notificación del error y enviarla de vuelta por toda la rede de Internet. ¿Podría haberse evitado este inoficioso viaje de ida y vuelta?

La programación del lado del cliente es la solución. Así, antes de enviar los datos del formulario de suscripción al curso, deberá existir un fragmento de código— Scripts  — que se encargue de la tarea de validación.

Lenguajes interpretados

Los lenguajes de programación del lado del cliente, generan un fragmento o script que se incorpora dentro del HTML. Se les denomina lenguajes interpretados o no compilados debido a que su código no tiene cambios o transformaciones previas. Cada línea de código en el Script es traducido directamente a lenguaje de máquina en el momento exacto de su ejecución o utilización.

Los primeros lenguajes de programación del lado del cliente


VBScript

O Visual Basic Script es un lenguaje compilado que permite insertar código dentro del HTML del lado del cliente por supuesto, lo que significa que requiere ser pasado por un compilador o traducido a lenguaje de máquina (1,0).  Una vez terminado el proceso de compilación, el script original se debe guardar en el disco duro local como un archivo convertido en un .exe, o ejecutable.

Además VBScript puede ejecutarse tanto en el lado del cliente como en el del servidor. Un ejemplo de un script diseñado en VBScript:

<HTML>
  <HEAD>
  <TITLE>Bienvenido a un Script con VBScript</TITLE>
  </HEAD>

<BODY>
 <SCRIPT LANGUAGE = “VBScript”>
   MSGBOX (“Hola mundo del lado del cliente!”)
  </SCRIPT>
</BODY>
</HTML> 

Observa que se ha utilizado la etiqueta  <SCRIPT LANGUAGE =  para separar del código HTML el Script en código VBScript. Así, si incluyéramos un comando o botón para ejecutar este script, no tendríamos que ir hasta el servidor para visualiza su mensaje. Se ejecuta en el lado del cliente.

JavaScript

Originalmente denominado LiveScript fue creado por Netscape. Microsoft creo su propio lenguaje de scripts JSript, muy similiares. Para superar estas diferencias se creo un tercer lenguaje denominado ECMAScript. que establece estándares admitidos en ambos lenguajes

En la actualidad es el lenguaje de scritps más popular. Un ejemplo de este:

<html>
</head>
<body>
 <p> Este párrafo se halla en HTML </p>
<script language=”JavaScript”>
  document.write(“Bienvenido a un script en JavaScript!”)
</script>
<p> Este párrafo se halla por fuera del script. </p>
<p> Es reconocido y formateado con HTML </p>
</html> 

Observa que se usa sintaxis propia de este lenguaje de scripts, como es la función document.write

Javascript es un lenguaje interpretado porque utiliza un intérprete que permite convertir las líneas de código en el lenguaje de la máquina. Esto tiene un gran número de ventajas como la reducción del procesamiento en servidores web al ejecutarse directamente en el navegador del usuario, o que es apto para múltiples plataformas permitiendo usar el mismo código. 

   Estudia en la siguiente lección “Aplicaciones del lado del servidor”

   Tecnologías del lado del cliente

En la actualidad existen varios framework y bibliotecas para el desarrollo ágil de un frontend. Las tecnologías estrictamente necesarias son:

  • HTML: Contenido, maquetado de la página.
  • CSS: Estilo, diseño, presentación, formatos. Variante: Boostrap.
  • JavaScrip: Comportamiento, funciones, validaciones, interfaces interactivas

Single Pages Application (SPA): Si estamos pensando en crear una SPA, con funcionalidad en una sola página y agregar comportamiento del lado del cliente, consideremos las siguientes alternativas de una gran variedad de marcos de trabajo, de los cuales citaremos los siguientes:

Blazor: Desarrollado por Microsoft, combina Razor y C# dejando de un lado JavaScript. Proporciona una alternativa a los marcos de JavaScript para crear interfaces de usuario de cliente enriquecidas e interactivas.

Angular: Administrado por Google, desarrollado por Typescript y de código abierto, es un marco de trabajo popular basado en JavaScript. Las aplicaciones de Angular se compilan a partir de componentes. Los componentes combinan plantillas HTML con objetos especiales y controlan una parte de la página.

React: No es un framework, es una biblioteca que depende de otras al momento de compilar una SPA (Single Pages Application) En el patron MVC se dedica a las vistas. Una de las características más importantes de React es el uso de un DOM virtual. El DOM virtual proporciona varias ventajas a React, incluido el rendimiento (el DOM virtual puede optimizar las partes del DOM real que se deben actualizar) y la capacidad de prueba (no se necesita un explorador para probar React y sus interacciones con el DOM virtual). Microsoft

Vue: Se centra en la vistas.  Y se concibió como un marco de trabajo incremental que va enriqueciéndose con otras librerías.

Blazor WebAssembly: A diferencia de otros marcos de JavaScript, Blazor WebAssembly es un marco de aplicaciones de página única (SPA) para compilar aplicaciones web interactivas del lado cliente con. NET. Blazor WebAssembly usa estándares web abiertos sin complementos o recompilación de código en otros lenguajes. Blazor WebAssembly funciona en todos los exploradores web modernos, incluidos los exploradores móviles. Microsoft

Boostrap: Multiplataforma y de código abierto, es considerado como marco de trabajo para diseño de frontend, posee una inmensa biblioteca de utilidades basadas en CSS, HTML y JavaScript, tales como botones de comando, menús entre otras.  Observa el resultado de uno de nuestros laboratorio en este curso:

Código aquí….

APLICA YA! - Easy To MakeEasy interactivo. ¡Inténtalo!


Afina tus conocimientos con el siguiente repaso interactivo. Puedes repasar o regresas al soporte teórico las veces que necesites.