Lenguages de programación Web

Publicación: 2019-08-28

Inicio

En un artículo anterior, aprendimos sobre las tecnologías que intervienen en la Industria Web. En este artículo aprenderemos un poco más sobre estas tecnologías, de manera particular lenguajes y frameworks que son utilizados para la creación de productos Web.

Lenguajes de Front End

Anteriormente conocimos que para “navegar en Internet” utilizamos un browser donde podemos visualizar e interactuar con un Sitio o Aplicación Web. Estas “pantallas” se llaman Interfaces de usuario, conocidas en el mundo tecnológico como UI (User Interfaces). Pero, ¿cómo se generan o crean estas interfaces de usuario? Estas interfaces son programadas, es decir que son software que facilita la visualización e interacción del usuario. Como sabemos, para crear todo programa o software, necesitamos uno o más lenguajes de programación o scripting. Para las UI Web, hay tres tecnologías que nos permiten hacerlo: HTML, Javascript y CSS.

HTML

Son las siglas de (Hypertext Markup Language). El lenguaje de marcado de hipertexto nos permite crear la estructura de las documentos Web (páginas Web) que visualizamos y con las que interactuamos en el browser.
Esta estructura está conformada por etiquetas (tags) que a su vez son instrucciones que le indican al browser cómo desplegar el contenido de la página: imágenes, texto, video, botones, enlaces, y otros recursos. HTML en sí, no es un lenguaje de programación, pero constituye la tecnología fundamental de un producto Web. Es un lenguaje declarativo, que solo nos permite “decirle” al browser qué es lo que debe desplegar en la pantalla, pero no nos permite tener control sobre cómo lo hace.

A continuación podemos observar un ejemplo de un documento HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Nuevo documento html</title>
  </head>
  <body>
    Hola mundo!
  </body>
</html>

En este ejemplo podemos observar las etiquetas <html>, <head>,<body> que son esenciales en cualquier documento HTML pues conforman su estructura fundamental. En la etiqueta <head> por ejemplo, se definen otras etiquetas <meta> que le permiten al browser desplegar una página bajo ciertos parámetros iniciales, como el tamaño de pantalla:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

y el título del documento (<title>Nuevo documento html</title>). Dentro de la etiqueta <body>, definimos el contenido de una página: texto, imágenes, video, etc. También hay etiquetas que nos permiten distribuir el contenido de manera más organizada, por ejemplo la etiqueta <div> o <section>.

Hay gran variedad de etiquetas para estructurar el contenido de una página Web. Pero si desplegáramos una página solamente en su estructura HTML, no podríamos visualizarla confortablemente, y simplemente veríamos los elementos uno a continuación del otro en su forma predeterminada. A pesar de que hay etiquetas que permiten definir el texto como negrita, por ejemplo, solamente generan decoraciones muy simples y por ello los estilos y la disposición (layout) de contenido, no le corresponde al HTML que escribamos. Para definir colores, layout y otros elementos gráficos como bordes, sombras, espacio, y otros más avanzados como transiciones (animaciones básicas) y transformaciones (cambio de forma de un elemento), utilizamos un documento adicional llamado hojas de estilo en cascada CSS (Cascading Style Sheets).

CSS

Las hojas de estilo en cascada (Cascading Style Sheets) constituyen documentos en los que se escriben reglas que definen la presentación de las páginas HTML. Una vez que tenemos la estructura de la página, aplicamos diferentes decoraciones o estilos para dar forma y color a los diferentes elementos o etiquetas HTML. HTML y CSS son herramientas que en conjunto nos permiten crear una Interfaz de Usuario (UI) y de esta manera son fundamentales en el desarrollo de todo Sitio y Aplicación Web.

El siguiente es un ejemplo de reglas CSS que se utilizan para definir un color de fondo y un color de texto a un elemento HTML llamado <p></p> que se utiliza para definir un párrafo.

HTML:
<p>Bienvenido a la Web</p>

CSS: p { color: blue background-color: white }

Solamente con estas dos tecnologías, HTML Y CSS, podríamos crear varias páginas Web constituyéndolas en un Sitio. Sin embargo tendríamos solamente páginas estáticas, es decir que solamente nos permitirían la visualización de contenido con una interacción mínima o nula. Aunque sus especificaciones han evolucionado mucho en los últimos años y tienen características avanzadas, al ser de tipo declarativo nos nos permiten un total control sobre un documento HTML ni de su presentación. Por ejemplo, remover texto o aplicar un color ¨en demanda¨ mientras el usuario interactúa con la Interface. Esta característica de manipulación o control sobre los elementos de la Interface (páginas Web) es lo que la convierte de un recurso estático a una Aplicación Web. Es lo que permite que el usuario pueda no solamente ver contenido, sino interactuar con éste contenido, ingresar datos y recibir de vuelta otro tipo de información visual.

Par esto necesitamos un lenguaje imperativo como lo es Javascript.

Javascript

Javascript es un lenguaje de programación [creado originalmente para el browser](creado originalmente para el browser). Al ser un lenguaje imperativo, es posible el control de la Interface de Usuario construida en HTML y estilizada con CSS. HTML, como habíamos dicho, nos permite definir la estructura de la Interface, pero no nos permite cambiarla o transformarla y por lo tanto es más complicado crear experiencias de interacción con el usuario. Nuevas versiones de HTML (HTML5) y CSS (CSS3), presentan características que dan al desarrollador muchas herramientas para enriquecer la interface de usuario, pero aun así no presentan la flexibilidad y posibilidades que brinda un lenguaje de programación como Javascript.

En el siguiente fragmento, se define una etiqueta HTML <p>, que permite la visualización de un párrafo con el texto “Conociendo la Web”. Con Javascript, podemos cambiar ese texto, por ejemplo “Conociendo Javascript”, resultando en una nuevo párrafo con contenido distinto. Como se puede ver, "programáticamente", hemos transformado el elemento HTML.

HTML
<p id="la_web">Conociendo la Web</p>

JAVASCRIPT
const p = document.getElementById('la_web');

p.textContent = "Conociendo Javascript"

HTML
<p id="la_web">Conociendo Javascript</p>

Un ejemplo real, es un buscador de autocompletar. Con HTML podríamos definir una caja de texto donde escribimos palabras clave de búsqueda, pero Javascript nos permite hacer el despliegue de registros encontrados en forma de una lista dropdown sobre esa caja de texto. Estos resultados encontrados, tienen un origen, generalmente en una base de datos, en un Servidor. Javascript, también nos permite conectarnos a ese servidor y extraerlos para mostrarlos en la interface. En conclusión, este lenguaje nos permite la creación de Interfaces dinámicas, que dan vida a su correspondiente parte estática que es HTML. Permite la manipulación de sus elementos o etiquetas y también se puede tomar control sobre sus decoraciones en CSS.

ejemplo javascript

Evolución de Javascript

Desde su estandarización en 1997, Javascript se ha transformado en uno de los lenguajes de preferencia para el desarrollo de software. ECMA Scriptes el nombre formal de Javascript, estandarizado por ECMA Internacional. Las especificaciones han ido cambiando a lo largo de los años, y desde el 2015, sus versiones tienen nombres relativos a los años de su internacionalización: ES2015, ES2016, etc. Cada especificación, añade nuevas capacidades al lenguaje, permitiendo al desarrollador contar con herramientas nuevas o mejoradas y nuevas abstracciones que le permiten escribir programas con mayor flexibilidad, así como también una mejor organización del código fuente.

Javascript no solo ha evolucionado para el browser, sino que también hoy funciona en el lado del servidor. Node Js, es una de las tecnologías más recientes que ha revolucionado la Web, constituyéndose en una de las herramientas clave en el desarrollo Web moderno. Más adelante conoceremos un poco más sobre esta tecnología, pero terminamos esta sección dedicada a Javascript, con la idea de que este lenguaje, estará acompañándonos por muchos años más o quizás siempre, en la creación de Software Web que hoy por hoy es una tecnología clave para el mundo.

Lenguajes de Back End

La interacción del Usuario en una plataforma Web, hoy por hoy es en mayor parte dinámica. Un usuario por lo general, se encuentra ingresando información, registrándose en una cuenta, afiliándose a un blog, foro o similar, escribiendo comentarios en una red social, chateando para recibir soporte técnico, etc. La interfaz de usuario permite la ejecución de acciones en el browser, pero esas acciones son realmente llevadas a cabo por un software instalado en un Servidor, tal como lo indicamos en una artículo anterior. Los datos, son el insumo que necesita un programa en el servidor para extraerlos o guardarlos en una base de datos, o ejecutar algún tipo de cálculo que requiere el usuario. Esos programas o software que ejecuta acciones requeridas por el usuario en un Servidor, se los realiza con lenguajes de programación, que en la actualidad son de una gran variedad. Vamos a revisar algunos muy relevantes en la Industria Web.

PHP

PHP, Hypertext Preprocessor (preprocesador de hipertexto), es un lenguaje de programación originalmente diseñado para el desarrollo Web. Se ejecuta en el lado del servidor y realiza el procesamiento dinámico de HTML. El código es interpretado por un servidor web, como Apache o Nginx por ejemplo, con un módulo de procesador de PHP que genera el HTML resultante. PHP, como otros lenguajes para back end, provee al desarrollador de herramientas suficientes para la creación de un producto Web con relativa facilidad. En realidad, ha sido el lenguaje de preferencia para todo tipo de ideas o emprendimientos en la industria Web por tener una curva de aprendizaje corta y por permitir alcanzar sus objetivos de manera exitosa. Plataformas de indiscutible trayectoria como Facebook, Yahoo, Google, Wikipedia, Wordpress, etc, han utilizado PHP para sus distintos productos. Wordpress, que es un Sistema de Gestión de Contenido (CMS,Content Management System) basado en PHP, es un ejemplo rotundo del éxito de este lenguaje. El 33.6 % de los Sitios Web alrededor del mundo trabajan bajo este CMS. Hoy por hoy, este lenguaje sigue siendo desarrollado por el PHP Group, y al mismo tiempo frameworks de desarrollo como Laravel, Symphony, Zend, Code Igniter, etc, son creados y evolucionan constantemente. Podríamos concluir que PHP ha sido, es y será una de las piezas clave en la Industria Web, no solo por su exitosa trayectoria, sino por que ha motivado la creación de otras plataformas Web, y por lo tanto generando una diversidad inmensa de herramientas que hoy por hoy hace de la Web un mundo tecnológico muy enriquecido y de abundantes posibilidades.

Node Js

Es un entorno de ejecución de Javascript diseñado para construir aplicaciones de red escalables com por ejemplo servidores Web. Esta tecnología es relativamente nueva, desde 2009, pero ha sido de gran impacto en la Industria Web en esta última década. Muchas soluciones definen arquitecturas que se componen de alguna aplicación desarrollada en Node. Algunos problemas de otras plataformas, como por ejemplo bloqueo de procesos en lenguajes como PHP, simplemente no se dan en Node debido a su orientación de eventos asíncronos. Ebay por ejemplo, en los últimos años, ha ido transformando y robusteciendo su plataforma tecnológica con soluciones basadas en Node.

Además de su aplicación en entornos Web, Node Js es utilizado para el desarrollo de aplicaciones de escritorio o de IoT (Internet de las cosas), lo que convierte a esta tecnología en un gran referente para generar soluciones innovadoras.

JAVA

Es un lenguaje orientado a objetos. La filosofía que ha conducido a la creación de este lenguaje es “codificar una vez, ejecutar donde quiera”, que significa que el código compilado de un programa escrito en JAVA, funcionara en varios tipos de ambientes: escritorio, web, móviles, etc. Java es principalmente utilizado en entornos empresariales o Sistemas de mediana y gran escala. Para la Web, existen frameworks basados en Java como Spring que brindan un amplio conjunto de herramientas para generar dichos tipos de soluciones.

Sobre los servidores Web

Sobre los Servidores Web Un Servidor Web es también Software, que permite el manejo de solicitudes de recursos Web (vía http). Los Servidores Web brindan los entornos necesarios para que las aplicaciones Web, escritas en lenguajes como PHP o JAVA, se instalen y ejecuten para realizar el procesamiento de información requerida por un usuario. A su vez, como todo software, un Servidor Web se instala sobre un Sistema Operativo como Linux. Seguramente, nos hemos dado cuenta ya que estos diferentes tipos de Software que intervienen en el funcionamiento de un Sistema o Aplicación Web, conforman un esquema de capas, en el cual un tipo de Software depende de otro para poder ejecutar las diferentes acciones para las que fueron diseñados y creados.

Plataforma Web

Existe una gran variedad de Servidores Web, Apache y Nginx entre los más conocidos. También existen muchas otras soluciones que permiten escalar los servicios que estos proveen a los Sistemas Web que hospedan. Load Balancers, son un ejemplo de mecanismos que permiten la distribución del trabajo o funcionamiento de dicho software entre distintos servidores Web.

Conclusión

Conocer sobre los lenguajes de programación Web es muy interesante y nos permite conocer en mayor profundidad el funcionamiento de un producto Web. Espero que lo que hayas aprendido sea de mucha utilidad y estés motivado a aprender nuevas cosas, empezar a crear tu Sitio Web, o por qué no, iniciar una carrera en esta vasta Industria!

Qué opinas sobre este artículo?

Volver al índice