La versión 5 del lenguaje de marcas o etiquetas basa HTML y las actualizaciones de JavaScrit y CSS, además de otros recursos de los que hablaremos a continuación, han provocado que al hablar de programador web, el término sirva tanto para programadores de sitios web y diseñadores de plantillas webs en html y css como para desarrolladoras de Apps, lo cual, dicho sea de paso, ha permitido que muchos profesionales hayan ampliado sus oportunidades laborales.
Dicho esto, vamos a hacer un repaso a los conocimientos necesarios en lenguajes de desarrollo y diseño para poder considerarse un buen programador web.
Contenidos
Lenguaje de etiquetas HTML5
Hyper Text Markup Language o Lenguaje de Marcas de Hipertexto es el «lenguaje padre» para el desarrollo de paginas web y su visualización en exploradores. Es un estándar bajo el control de W3C o la Word Wide Web Consortium basada en etiquetas dentro de los símbolos «<>» además de atributos.
La primera versión se lanzó en 1993, cuatro años después de la primera comunicación HTTP. Precisamente el lenguaje HTML es uno de los máximos responsables de la expansión de la web y, aunque entre la primera versión de 1993 y HTML5 se han producido bastantes cambios, todos los códigos html de una pagina web cuentan la siguiente estructura y características:
- Definición del documento. Va en la parte superior del código fuente y es imprescindible para que el explorador comprenda qué tipo de documento está leyendo. La etiquetas pueden ir acompañadas de atributos y son las siguientes:
<¡DOCTYPE html> <html>
- Encabezado del documento o <head>, donde se incluyen etiquetas META para dar título a las distintas URL (esencial para el SEO) ; atributos para enlazar con, por ejemplo, librerías de estilos CSS o código e instrucciones en JavaScript para luego realizar llamadas a las mismas en dentro de la etiqueta <body>. Un ejemplo:
<title>Título del página</title> <link rel="stylesheet" href="style.css"> <script>Instrucciones en JavaScript</script>
- Cuerpo de la página o <body>. HTML5 incluye otras etiquetas como <header>, <sidebar> o <footer>, donde se incluyen etiquetas para maquetar el contenido (<p>, <div> o <ul>) y atributos para insertar elementos como imágenes con <img> o enlaces con <a href>.
Como se puede ver, todo programador web debe conocer el lenguaje HTML para poder comenzar un trabajo de desarrollo o diseño de una web, o crear una App.
Lenguaje-librería CSS3
Si asumimos que el lenguaje HTML es el «padre» del diseño de páginas web, CSS podría considerarse «la madre». Cascade Style Sheets va por su tercera versión y, como HTML, es un lenguaje de marcado que se puede incluir en el propio código fuente de un documento HTML o, la forma más recomendada, incluirlo en un archivo externo (.css) que puede ser invocado desde HTML.
Aunque se lo considera un lenguaje de programación, no sirve para, por ejemplo, realizar cálculos o enviar información a un servidor sino que se centra en apoyar a HTML para maquetar y dotar de estilo a una página web. Un ejemplo de código es el siguiente:
img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; }
Bootstrap Framework
Especialmente con la aparición de los teléfonos inteligentes, HTML5 y CSS, aunque evolucionan para poder liderar el sector del diseño multiplataforma, aparece el marco de trabajo Bootstrap, una recopilación de recursos y herramientas de acceso libre (como HTML y CSS) para el diseño de sitios web y aplicaciones a nivel front-end, es decir sin conectar con el servidor.
La virtud de este Framework es que permite trabajar con HTML, CSS y JavaScript en un mismo entorno y, muy importante, ha desarrollado todo tipo de plantillas para hacer más fácil el trabajo del programador web: plantillas de formularios, menús de navegación responsive, hojas de estilos o extensiones JavaScript.
No aporta mucho en el sentido de evolucionar lenguajes de programación y diseño pero, como ocurre con .NET, es un marco de trabajo que ahorra tiempo al tener todos los recursos integrados y más a mano.
Lenguaje de programación cliente JavaScript
Es un lenguaje de programación orientado a objetos y, principalmente, orientado a cliente, es decir al front-end de un proyecto web o App.
Aunque durante años estuvo algo denostado debido a que varios exploradores permitían (y permiten) bloquear elementos JavaScript en la navegación, la aparición de AJAX, su integración con HTML o el propio desarrollo de aplicaciones móviles lo ha convertido en un lenguaje muy usado.
Biblioteca jQuery
Precisamente JavaScript lanzó en el año 2006 una librería para facilitar a los diseñadores y desarrolladores web el manejo de elementos dinámicos en una página web y la configuración de la maquetación esencial de un documento web o DOM.
Al ser de licencia libre e interactuar muy bien con HTML o AJAX ha evolucionado rápidamente en los últimos años y se ha convertido en una de las bibliotecas preferidas por plataformas para el desarrollo web y de aplicaciones web.
Lenguaje PHP
Es el lenguaje del lado del servidor más utilizado y con el que se han creado la mayoría de las plataformas web, desde WordPress a Wikipedia; sin olvidar redes sociales como Facebook. Desde su creación (1995), estuvo orientado a integrarse bien con HTML y al poseer licencia Open Source no deja de evolucionar. Su compatibilidad con MySQL ha provocado que este modelo de base de datos se haya universalizado en la mayoría de los hospedajes.
Lenguaje AJAX
Muchos sitios web y aplicaciones móviles todavía realizan una conexión con la base de datos que obliga a recargar la página web: envío de información desde el lado del cliente para actualizar la base de datos del lado del servidor y vuelta al lado del cliente de esa información. Para evitar esto (esencialmente) nació AJAX, una mezcla de JavaScript y XML que permite la creación de aplicaciones RIA o Rich Internet Applications o lo que es lo mismo: poder realizar acciones en una página determinada y conectar con el servidor sin recargar la página. Para ello, AJAX se ayuda del objeto XMLHttpRequest, desarrollado por Microsoft pero que ya se incluye en los demás exploradores. Plataformas como Facebook hacen buen uso de AJAX para facilitar a los usuarios realizar cualquier acción en su muro o en su chat.
Hasta aquí los lenguajes y recursos que un programador web debe conocer para mejorar sus posibilidades laborales. Por supuesto, hay más lenguajes y herramientas para programar como el nuevo lenguaje Phyton, el longevo Ruby, Java, C, C++, C#, Visual C o Perl. Sin embargo, aunque algunos de ellos, como Java, pueden ser utilizados en la programación de Apps, no están orientados al desarrollo web.