Tecnologías Web¶

Las tecnologías web se dividen en las dos partes que ya mencionamos en el apartado donde se explicaba la arquitectura web: cliente y servidor.

Cliente¶

En las aplicaciones web los clientes suelen ser navegadores web, su función principal es la de solicitar los recursos al servidor, normalmente código en HTML (páginas web) o datos (facturas, previsión meteorológica), interpretar los datos y “pintar” o “renderizar” los elementos para presentar de forma gráfica los datos.

Info

Hay otros tipos de clientes web como, por ejemplo, cURL, una herramienta en línea de comandos que nos permite realizar peticiones HTTP a servidores web.

Los navegadores han evolucionado, añadiendo nuevas funcionalidades como extensiones, favoritos, histórico o temas entre otras, convirtiéndose en plataformas para el desarrollo de aplicaciones. Las tecnologías utilizadas en los clientes son estándares gestionados por el W3C.

Tecnologías del lado del cliente¶

HTML. Lenguaje de marcas de hipertexto¶

Utiliza etiquetas con significado que el servidor envía al cliente, este lo recibe, interpreta y pinta en la pantalla. Existen diferentes versiones de HTML, en la actualizada se utiliza mayoritariamente HTML 5.

<!DOCTYPE html>
<html>
    <head>
        <title>Primera página</title>
    </head>
    <body>
        <p>Hola mundo.</p>
    </body>
</html>

CSS¶

Los usuarios de las páginas o aplicaciones web esperan que estas sean atractivas visualmente, si bien HTML posee atributos y etiquetas que permiten modificar el aspecto visual de las aplicaciones, su mantenimiento cuando se tienen decenas o cientos de páginas en un sitio se hace imposible de mantener si se da el aspecto en cada etiqueta.

Para poder gestionar el aspecto de un sitio web de forma jerarquizada se utilizan las hojas de estilo en cascada (CSS o Cascading Style Sheets), que utilizando selectores permiten modificar el aspecto de todas las páginas que hagan referencia a ese estilo. Un ejemplo de selector y atributos CSS:

body {
 background-color: lightblue;
}
p {
 font-family: verdana;
 font-size: 20px;
}

JavaScript¶

Una vez la página web se encuentra en el cliente, se ha pintado en el navegador y aplicado los estilos es necesario realizar diferentes cálculos, operaciones o modificar el código HTML como puede ser añadir nuevas imágenes de forma dinámica a la página. Para estas y otras tareas se utiliza un lenguaje de programación denominado JavaScript.

Javascript es uno de los lenguajes más utilizado en la actualidad, existiendo multitud de Frameworks para facilitar el desarrollo de aplicaciones.

<!DOCTYPE html>
<html>
    <head>
        <title>Mi primera página web con JavaScript</title>
    </head>
    <body>
        <h1>Ejemplo con JavaScript</h1>
        <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
            Click me to display Date and Time.
        </button>
        <p id="demo"></p>
    </body>
</html>

Servidor¶

El cliente recibe el HTML, el CSS y Javascript de un equipo o conjunto de equipos denominados servidor o servidores. Inicialmente los elementos enviados eran simplemente ficheros estáticos, pero surgió la necesidad de a partir de los datos enviados por el cliente, por ejemplo el identificador único del cliente en Facebook generar un código HTML/CSS/JavaScript personalizado para la petición, por ejemplo al entrar en Instagram aparecen las fotos del usuario y no otras.

Tecnologías del lado del servidor¶

Lenguajes de programación¶

Para realizar esta personalización se utilizan diferentes lenguajes de programación entre los que destacan:

PHP
Java (Jakarta)
Node.js (Basado en Javascript, pero en el servidor)
Python

Estos lenguajes utilizan indicadores para que el servidor interprete en el servidor lo necesario, por ejemplo en PHP se utilizan los delimitadores <? y ?> o <?php.

<!DOCTYPE html>
<html>
    <head>
        <title>Mi primera página web con PHP</title>
    </head>
    <body>
        <h1>Ejemplo con PHP</h1>
        <?php
            echo "Mi primer programa con PHP!";
        ?>
    </body>
</html>

Bases de datos¶

Las bases de datos son utilizadas en prácticamente todas las aplicaciones tanto de escritorio como web, aunque no forman parte directa de las aplicaciones se utilizan ampliamente para el almacenamiento de los datos de las aplicaciones web, pudiendo estar en equipos diferentes, además las bases de datos pueden ser utilizados por más de una aplicación, ya sea web o de escritorio.

Instalación de un servidor local¶

Un servidor web local es aquel servidor web que reside en una red local al equipo de referencia. El servidor web local puede estar instalado en cualquiera de los equipos que forman parte de una red local. Es por tanto obvio, que todos los servidores web, son locales a la red local en la que se encuentran, o como mínimo, locales al sistema en el que están instalados.

Cuando un servidor web se encuentra instalado en el mismo equipo desde el cual se desea acceder puede utilizarse la dirección de lookback, 127.0.0.1 en Ipv4 y ::1 en IPV6. El puerto TCP 80 se obvia. Los archivos se almacenan en un directorio determinado por la configuración, generalmente modificable.

Existen numerosas aplicaciones que facilitan la instalación automática de servidores web Apache y aplicaciones adicionales como mysql (entre otros), de forma conjunta, como XAMPP, JAMP o EasyPHP. Estas aplicaciones reciben el nombre de LAMP cuando se instalan en plataformas linux, WAMP en sistemas Windows y MAMP en sistemas Macintosh.

Actividades¶

PR 104 (RA1 / CE1b / IC2/ 5p) Instala un servidor web local en un sistema Windows o Linux, realiza las capturas de pantalla de los pasos más significativos de la instalación y sube un documento index.htmlcon tu nombre, fecha de nacimiento y aficiones, para que se visualice como página de inicio en tu servidor. Adjunta evidencia de tu localhost.
AC 105 (RA1 / CE1b / IC1/ 3p) Consigue un alojamiento y un dominio gratuito (ejemplo 000webhost, infinityfree), que utilizaremos a lo largo de todo el curso, subiendo las distintas prácticas. Realiza las capturas de pantalla de los pasos más significativos y sube el documento index.html que has creado en AC 104 junto con la url.