Caso práctico

Antonio, trabajador de la empresa BK Programación.

El proyecto de modernización de la empresa de moda va a consistir, principalmente, en añadir mayor funcionalidad a las páginas ya existentes, más control en los formularios, dinamismo, modernización de la mecánica de varios procesos, etc.

Antonio tendrá que centrarse en los lenguajes de programación en el lado del cliente, ya que éstos son los que le ayudarán a aportar las capacidades solicitadas en el proyecto.

Antonio se pone manos a la obra y consulta bajo la tutoría de Juan, qué opciones tienen para llevar a cabo esa programación y analizan las características, compatibilidades y seguridad aportada por los lenguajes de programación en el lado del cliente.

Imagen de un portátil. — Sara_Torda (Pixabay License)

Cuando hablamos de tecnologías empleadas en lenguajes de programación web podemos citar dos grupos básicos: client-side y server-side. Las tecnologías client-side son aquellas que son ejecutadas en el cliente, generalmente en el contexto del navegador web. Cuando los programas o tecnologías son ejecutadas o interpretadas por el servidor estamos hablando de programación server-side.

Uno de los objetivos en la programación web es saber escoger la tecnología correcta para tu trabajo. Muchas veces los desarrolladores escogen rápidamente una tecnología favorita, que puede ser JavaScript o PHP (generalmente) y la usan en todas las situaciones. La realidad es que cada tecnología tiene sus pros y sus contras. En general las tecnologías client-side y server-side poseen características que las hacen complementarias más que adversarias. Por ejemplo, cuando añadimos un formulario para recoger información y grabarla en una base de datos, es obvio que tendría más sentido chequear el formulario en el lado del cliente para asegurarnos que la información introducida es correcta, justo antes de enviar la información a la base de datos del servidor, aunque siempre también deberemos validar dicha información en el lado del servidor para asegurar la integridad. La programación en el lado del cliente consigue que la validación del formulario sea mucho más efectiva y que el usuario se sienta menos frustrado al cubrir los datos en el formulario. Por otro lado el almacenar los datos en el servidor estaría mucho mejor gestionado por una tecnología del lado del servidor (server-side), dando por supuesto que la base de datos estará en el lado del servidor.

Cada tipo general de programación tiene su propio lugar y la mezcla es generalmente la mejor solución. Cuando hablamos de lenguajes de programación en clientes web, podemos distinguir dos variantes:

Lenguajes que nos permiten dar formato y estilo a una página web (HTML, CSS, etc.).
Lenguajes que nos permite aportar dinamismo a páginas web (lenguajes de scripting).

En este módulo nos vamos a centrar principalmente en estos últimos, los lenguajes de scripting, y en particular en el lenguaje JavaScript que será el lenguaje que utilizaremos a lo largo de todo este módulo formativo.

Tabla comparativa de lenguajes de programación web cliente – servidor.
Lado del Cliente (client-side)	Lado del servidor (server-side)
Aplicaciones de Ayuda. Programas del API del navegador. Plug-ins de Netscape. Controles ActiveX. Pepper para Chrome. Applets de Java. Lenguajes de scripting. JavaScript. VBScript.	Scripts y programas CGI. Programas API del servidor. Módulos de Apache. Extensiones ISAPI y filtros. Servlets de Java. Lenguajes de scripting. PHP. Active Server Pages (ASP/ASP.NET). JavaScript (Librería Node.js)

Hemos escogido JavaScript por que es el lenguaje de script más utilizado en la programación en el lado del cliente, y está soportado mayoritariamente por todas las plataformas. Por lo tanto a partir de ahora todas las referencias que hagamos estarán enfocadas hacia JavaScript.

A continuación te mostramos las 4 capas del desarrollo web en el lado del cliente, en la que se puede ver que JavaScript se sitúa en la capa superior gestionando el comportamiento de la página web:

Comportamiento (JavaScript).
Presentación (CSS)
Estructura (DOM / estructura HTML)
Contenido (texto, imágenes, vídeos, etc.)