HTML, CSS y JavaScript

Los lenguajes informáticos estándar en la maquetación y programación web.

Inicialmente me quiero dejar claro que existen lenguajes informáticos que no necesariamente deben ser a la vez lenguajes de programación, aun cuando todo lenguaje de programación es al mismo tiempo un lenguaje informático. Los lenguajes HTML, CSS y XML no son lenguajes de programación, son lenguajes informáticos destinados a la Maquetación Web y el intercambio de datos, en cambio JavaScript es un lenguaje de programación en toda la acepción del termino y por supuesto también un lenguaje informático. La maquetación web y la programación web aun cuando están muy relacionadas, son cosas diferentes con lógicas muy distintas, hago esta aclaración ya que muchos estudiantes confunden estos términos y en algunos casos no encuentran a nadie que se tome la tarea de corregirles ese error.

Cuando desarrollamos un sitio web dinámico, una aplicación online o en general cualquier programa informático, debemos tomar en cuenta dos partes fundamentales en las que se debe dividir el trabajo de forma lógica, una es la programación interna de las acciones que se generan por la ocurrencia de eventos que los desencadenan, lo cual se realiza mediante lenguajes de programación, y una segunda parte que corresponde a la apariencia visual externa del software, lo que se denomina técnicamente como Interfaz Gráfica de Usuario, la capa visible con la que el usuario interactúa, permitiéndole ingresar datos y recibir información del sistema, en el caso de la web esto se realiza mayoritariamente y de forma estandarizada, mediante los lenguajes informáticos HTML y CSS.

Es por ello que en el desarrollo web se emplean dos términos que diferencian entre esas dos partes en las que esta dividida una aplicación o sitio web, uno de ellos es Font-End que es la interfaz visible al usuario mediante un navegador y el segundo termino es Back-End que es la parte interna desde la cual se administra y programa el sistema. Desde el punto de vista de un administrador web que gestiona una web autoadministrable, que cuenta con una interfaz o panel de administración web, ambos términos corresponden a interfaces web accesibles mediante el navegador, con la diferencia de que el front-end de la web es accesible a todos los visitantes o internautas, en cambio el back-end de la web es solo accedido por usuarios con privilegios de administración.


Por otra parte, desde el punto de la programación se entiende como back-end la parte correspondiente al código fuente en lenguaje de programacion que da origen a la web, en consecuencia se dice que un lenguaje web back-end es por ejemplo PHP, ya que este lenguaje al ser interpretado genera código HTML visible en el navegador, pero el código de programacion siempre se mantiene oculto al usuario. Así mismo, la interpretación de estos lenguajes suele realizarse en dos lugares físicos distintos,  los lenguajes Front-End como HTML, CSS y JavaScript son interpretados directamente en el navegador web, el cual esta instalado en el computador o dispositivo desde el cual el usuario se encuentra conectado a la red, es decir lo que se conoce como cliente, en cambio los lenguajes Back-End como PHP suelen ser interpretados en el servidor en el que se encuentra alojada la pagina o aplicación web.

Como los navegadores web deben leer de igual forma todo tipo de paginas web y a la vez deben ser lo mas ligeros y simples que sea posible, los lenguajes que se interpretan del lado del cliente se encuentran estandarizados, es decir que todos los navegadores emplean estos mismos lenguajes, es por ello que las paginas web están  constituidas siempre por código HTML, CSS, JavaScript y en cocaciones algo de XML, en cambio los lenguajes que son interpretados y ejecutados del lado del servidor, pueden ser diferentes e implementar diversas tecnologías, siempre que sus resultados generen código HTML interpretable por el navegador. Es así como del lado del servidor se puede emplear PHP, ASP, Python, Java, Ruby, Perl…

HTML

En los inicios de la World Wide Web, las páginas web solo contenían texto formateado mediante HTML, este es un lenguaje de marcado de Hipertexto, esto quiere decir que es un tipo de código compuesto por marcas o etiquetas que se combinan con el texto para agregarle características a su estructura y presentación, como por ejemplo dar color, tamaño y ubicación a ese texto. Cuando se habla de hipertexto, se hace referencia a una técnica implementada en Internet, en la que se enlazan contenidos mediante vínculos en el texto, lo que se conoce como hipervínculos, los cuales no solo se pueden componer de texto, sino también de dibujos, imágenes y otros elementos. Entonces de forma resumida se puede decir que HTML es un lenguaje informático que sirve para dar estructura visual al hipertexto.

Debido a su propósito ,el funcionamiento lógico de este lenguaje es muy fácil de aprender y poner en práctica en apenas minutos de estudio, consiste esencialmente en colocar etiquetas de inicio y de cierre en torno al hipertexto que deseamos maquetar, estas etiquetas no son más que palabras rodeadas por corchetes angulares o como se les conoce por su aplicación en la matemática, signos de mayor qué y menor qué (<>), que indican alguna característica visual o de comportamiento. Existe una gran variedad de etiquetas que establecen desde un salto de línea hasta la creación de una tabla, algunas de ellas solo sirven para dar una estructura lógica al código, separando por ejemplo el cuerpo visible de una página de otros elementos que se encuentran ocultos al usuario.

Actualmente se suelen emplear aplicaciones de desarrollo web, que integran un editor de código en combinación con un sistema de diseño automatizado, que permite realizar la maquetación web de forma visual, sin la necesidad de dominar en profundidad el código HTML, a estos entornos se les conoce como de tipo WYSIWYG, este término es un acrónimo formado por las siglas de la frase inglesa “What You See Is What You Get” que significa en español “lo que ves es lo que obtienes”. Entre los editores HTML que trabajan de esa forma se encuentran Adobe Dreamweaver, Microsoft Expression Web, el modulo web de Microsoft Visual Studio, kompozer, iWeb, Flux, entre otros.

CSS

Cuando se realizan sitios web que contienen varias páginas en su interior, todos con una misma estética, es decir que comparten una apariencia visual estricta, como por ejemplo un mismo encabezado o pie de página para todas las páginas del sitio, márgenes iguales, tipo de fuente, etcétera, lo cual es bastante común que ocurra y se puede notar con mayor claridad por ejemplo en un blog, donde se mantiene constante el estilo visual y solo cambian los contenidos presentes en cada artículo, entonces es muy conveniente poder definir todas las características visuales en un único archivo y que cada página solo deban invocar esas características almacenadas en el archivo correspondiente a la apariencia del sitio.

Lo anterior es exactamente el propósito para el que fue creado el lenguaje CSS, cuyo nombre corresponde a las siglas de “Cascading Style Sheets” que traducido al español quiere decir Hoja de Estilo en Cascada. Con este lenguaje se especifica el estilo o apariencia que tendrán las paginas HTML y para ello estas deben incluir en su cabecera (etiqueta Head), la llamada al archivo CSS en el cual se definen las características visuales del sitio o por el contrario si las paginas tendrían estilos diferentes o individuales, entonces podrán contener el código CSS inmerso en el mismo archivo HTML, lo cual puede realizarse de dos formas, la primera de ellas es creando una sección de código contenida por la etiqueta <style> en la que se coloque todo el CSS necesario o  simplemente colocar el atributo style a cada etiqueta html a la que queramos establecen un estilo especifico, definiendo espesamente la porción de css que corresponda a dicha etiqueta, aunque esto ultimo es menos recomendado y usado como ultimo recurso.

JavaScript

Si bien la programación web suele ejecutarse del lado del servidor, también es necesario programar tareas del lado del cliente, ya que algunas actividades puntuales como la validación de los datos ingresados por el usuario en formularios web HTML o la implementación de algunos efectos visuales dinámicos, son mucho más agiles, si se ejecutan en el navegador, sin que deban comunicar datos al servidos y volver nuevamente con la respuesta de la información procesada, lo que lógicamente causa un retraso en la ejecución. Para ello se emplea el lenguaje de programación JavaScript, el cual es un estándar que es asumido por casi la totalidad de los navegadores de Internet

Aun cuando es posible utilizar este lenguaje para la programación del lado del servidor o para realizar aplicaciones de escritorio, su uso más extendido es en la programación web del lado del cliente, es importante no confundir este lenguaje con Java, ya que se trata de lenguajes totalmente diferentes. JavaScript es obviamente un lenguaje de script, interpretado, orientado a objetos y posee una sintaxis similar a la del lenguaje C, entre otras características. En combinación con XML, ambos son la base fundamental de Ajax (Asynchronous JavaScript And XML), que es un método en el que se armonizan varios lenguajes, para permitir la comunicación con el servidor de forma asíncrona, evitando recargar las páginas y otorgando así una mejor experiencia de usuario a los visitantes de la web.

XML

Dada la necesidad de almacenar datos simples mediante archivos de texto y poder compartirlos entre diferentes tipos de archivos sin llegar a utilizar una base de datos, lo cual es útil para la trasmisión de datos con poca complejidad, surge el Lenguaje de Marcas Extensible o XML, del inglés “eXtensible Markup Language”. Este es un lenguaje informático de marcado que da formato a datos para que sean legibles y además sirve como interfaz de comunicación entre diferentes aplicaciones como script web, formularios HTML y bases de datos entre otras. Su uso es muy extendido en la web, incluso forma parte fundamental de la tecnología de comunicación asíncrona con el servidor conocida como Ajax.

Esto ha sido un pequeño resumen de las características y propósitos de los lenguajes que se han convertido en estándar en el diseño web, para finalizar debo aclarar que a los programadores web que se especializan en la codificación Back-End con lenguajes como PHP se les denomina indudablemente programadores web, en cambio a los que realizan codigo Front-End (HTML, CSS, JavaScript) se les denomina comúnmente diseñadores web, dado que su trabajo esta mas relacionado con la apariencia que con el funcionamiento de la web, esto aun cuando JavaScript es un completo lenguaje de programacion con el que se podría programar acciones back-end.

Califica este artículo...
[Total: 0 Average: 0]

Autor: Néstor Gómez

Académicamente: Ingeniero de Sistemas y TSU en Informática. Empíricamente: Profesor Universitario, Desarrollador de Software, Webmaster/Blogger, Diseñador Digital, Generalista 3D, Freelancer y Emprendedor Online.