====== 01_1 - Introducción DWS ======

En toda conexión web existen dos partes bien separadas: cliente y servidor. Cuando el cliente (el navegador web, por ejemplo) accede a una URL el servidor procesa la petición y devuelve una respuesta , que puede ser un archivo HTML, JSON, XML...

{{ :clase:daw:dws:1eval:dws:imagen1.png?400 |}}

Dependiendo de si el contenido del archivo es fijo o se genera en cada petición, hablamos de **páginas web estáticas** o **dinámicas**. 

Antiguamente el cliente se dedicaba solo a hacer peticiones y mostrar la respuesta en formato HTML. Era el servidor el encargado de recibir las peticiones de los clientes, procesarlas, acceder a la base de datos, montar las vistas (los diferentes archivos html) y enviarlas al cliente.

Hoy en día existen multitud de dispositivos que pueden realizar peticiones a servidores web, y muchos de ellos no pueden interpretar los archivos html, de ahí la importancia de los servicios web (como las API Rest), donde el servidor se dedica únicamente a recibir las peticiones de los clientes, acceder a la bbdd y devolver los datos al cliente (en formato XML, JSON...). En este caso, es el cliente el encargado de montar las diferentes vistas con los datos recibidos del servidor.

{{ :clase:daw:dws:1eval:dws:imagen2.png?400 |}}

De esta forma, el servidor no hace todo el trabajo, dejando al cliente la parte de montar las vistas (o gestionando los datos como quiera) aligerando la cargar de trabajo.

===== Páginas web estáticas y dinámicas =====

En las **páginas web estáticas** el servidor muestra siempre la misma información en todo momento, dependiendo sólo del archivo html solicitado. En el caso que la información que queramos mostrar sea dinámica este enfoque no sirve. Por ejemplo, si creamos una web para una empresa con 10.000 productos, nos obligaría a crear 10.000 páginas iguales para cada producto (lo único que cambiaría sería la información del producto).

Las **páginas web dinámicas** generan las respuestas de forma dinámica, es decir, dependiendo de alguna opción (como el identificador del producto) devuelve una información u otra.

Para poder generar esas respuestas de forma dinámica necesitamos instalar en nuestro **servidor HTTP** un **interprete del lenguaje de programación** utilizado y, generalmente, un **sistema gestor de base de datos**.

<note>¿Significa éso que siempre es mejor usar páginas webs dinámicas? No, depende del tipo de web que estemos creando. Las webs dinámicas tienen sus ventajas y desventajas, y según la información que queremos mostrar usaremos éstas o webs estáticas.\\ \\

Si nuestro sitio web se limita a mostrar información sin necesidad de mostrar contenido dinámico es mejor usar archivos html estáticos, ya que el servidor no tendrá que procesar los archivos del lenguaje utilizado para convertirlos en html y servirá las páginas más rápido.

En cualquier caso, hoy en día casi todas las webs tienen algún tipo de contenido dinámico (información almacenada en una bbdd, páginas con información de usuarios...), con lo que si queremos trabajar como programadores web, tendremos que aprender como crear este tipo de contenido.</note>

===== Componentes servidor web =====

Para crear un sitio web dinámico y que sea accesible, necesitamos una serie de componentes (tanto en nuestro hosting como en local para desarrollarlo):

  * **Servidor HTTP**, que será el encargado de gestionar las peticiones y enviar la respuesta (archivos html, datos JSON...)

  * **Intérprete del lenguaje utilizado**, para poder interpretar el lenguaje de programación y crear los archivos html o datos.

  * **Sistema Gestor de Base de Datos**, para poder almacenar nuestros datos.

==== Servidor HTTP ====

Un servidor HTTP o servidor web es un programa informático que procesa las peticiones de los clientes y genera una respuesta en cualquier lenguaje o aplicación del lado del cliente. El código recibido por el cliente es renderizado por un navegador web. Generalmente se utiliza el protocolo HTTP para estas comunicaciones.

Actualmente existen muchos servidores HTTP. A continuación veremos algunos de los más usados.

  * **Apache**: El servidor web //Apache// es un servidor HTTP de código abierto para plataformas UNIX (BSD, GNU/Linux…), Microsoft Windows, Macintosh y otras. Es desarrollado y mantenido por una comunidad de usuarios bajo la supervisión de la //Apache Software Foundation//, dentro del proyecto HTTP Server (httpd). Desde 1996, Apache es el servidor HTTP más utilizado. Alcanzó su máxima cuota de mercado en 2005, siendo el servidor empleado en el 70% de los sitios web en el mundo. Sin embargo, ha sufrido un descenso en su cuota de mercado en los últimos años. En 2009 se convirtió en el primer servidor web que alojó más de 100 millones de sitios web.

  * **Nginx**: Es un servidor web/proxy inverso ligero de alto rendimiento, y un proxy para protocolos de correo electrónico (IMAP/POP3). Es software libre y de código abierto, licenciado bajo la licencia BSD simplificada. También existe una versión comercial distribuida bajo el nombre de //Nginx plus//. Es multiplataforma, por lo que corre en sistema UNIX, Windows y Macintosh.  El sistema es usado por una larga lista de sitios web conocidos, como WordPress, Netflix, GitHub y partes de Facebook.

  * **Internet Information Services** (**IIS**): Es un servidor web y un conjunto de servicios para el sistema operativo Microsoft Windows. Este servicio convierte a un PC en un servidor web para Internet o una intranet, es decir que en los ordenadores que tienes este servicio instalado se pueden publicar página web tanto local como remotamente.

  * **Tomcat**: Es un contenedor web con soporte de //servlets// y //JSPs//. //Tomcat// puede funcionar como servidor web por sí mismo. En sus inicios existió la percepción de que el uso de //Tomcat// de forma autónoma era solo recomendable para entornos de desarrollo y entornos con requisitos mínimos de velocidad y gestión de transacciones. Hoy en día ya no existe esa percepción y //Tomcat// es usado como servidor web autónomo en entornos con alto nivel de tráfico y alta disponibilidad. Dado que //Tomcat// fue escrito en Java, funciona en cualquier sistema operativo que disponga de la máquina virtual Java.

==== Lenguajes de programación ====

Para poder servir webs dinámicas, necesitamos algún lenguaje de programación para poder generar la información (archivos html, datos...). Para la parte del cliente (frontend), los más usados son HTML, CSS y Javascript. En la parte del servidor (backend), tenemos varias opciones, por ejemplo:

  * **PHP** (**Hypertext Preprocessor**): Es un lenguaje de código abierto especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML. El código php es ejecutado en el servidor, enviando la respuesta al cliente. El cliente recibirá recibirá el resultado de ejecutar el script (archivos HTML, JSON, XML...), aunque no se sabrá el código subyacente que era. Aunque PHP es muy fácil de aprender para el principiante, ofrece muchas características avanzadas para lor programadores profesionales. Actualmente, es el lenguaje más usado del lado servidor, entre otras cosa por ser el utilizado por Wordpress para crear sus plugins.

  * **ASP.NET**: Es un modelo de desarrollo web unificado, desarrollado y comercializado por Microsoft, que incluye los servicios necesarios para crear aplicaciones web empresariales con el código mínimo. Es el sucesor de la tecnología ASP. El código de las aplicaciones puede escribirse en cualquier lenguaje compatible con el CLR (Common Language Runtime), entre ellos Microsoft Visual Basic, C#, Jscript .NET y N#.

  * **Java**:  Su sintaxis deriva en gran medida de C y C++, pero tiene menos utilidades de bajo nivel que cualquiera de ellos. Las aplicaciones de Java son compiladas a bytecode (clase Java), que puede ejecutarse en cualquier máquina virtual Java (JVM) sin importar la arquitectura de la computadora subyacente.

  * **JSP** (**JavaServer Pages**) es una tecnología para crear páginas web dinámicas basadas en HTML y XML, entre otros tipos de documentos. Es similar a php, pero usa el lenguaje de programación Java. La principal ventaja de JSP frente a otros lenguajes es que el lenguaje Java es un lenguaje de propósito general que excede el mundo web y que es apto para crear clases que manejan lógica de negocio y acceso a datos de una manera prolija.

  * **Python** es un lenguaje de programación interpretado, funcional, orientado a objetos e interactivo. Python cuenta con una sintáxis muy limpia y clara. Cuenta con módulos, clases, excepciones, tipos de datos de muy alto nivel, así como tipado dinámico.

  * **Node.js**: Es un entorno de ejecución para JavaScript del lado del servidor construido con el motor JavaScript V8, desarrollado por Google para su navegador Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo y orientado a eventos, que lo hace liviano y eficiente. Al contrario que la mayoría del código JavaScript, no se ejecuta en un navegador, sino en el servidor.

  * **Go**: Es un lenguaje de programación desarrollado por Google concurrente y compilado inspirado en la sintaxis de C, que intenta ser dinámico como Python y con el rendimiento de C o C++. Es un proyecto opensource. Go es un lenguaje de programación compilado y admite el paradigma orientado a objetos, pero a diferencia de los lenguajes de programación más populares no dispone de herencia de tipos y tampoco de palabras clave que denoten claramente que soporta este paradigma. La sencillez es la característica principal de Go, su sintaxis es clara y concisa.

  * **Ruby**: Es un lenguaje de programación interpretado, reflexivo y orientado a objetos. Combina una sintaxis inspirada en Python y Perl con características de programación orientada a objetos similares a Smalltalk. Comparte también funcionalidad con otros lenguajes de programación como Lisp, Lua y Dylan. Ruby es un lenguaje de programación interpretado en una sola pasada y su implementación oficial es distribuida bajo una licencia de software libre.

==== Sistemas gestores de base de datos ====

La mayoría de aplicaciones web, utilizan algún sistema gestor de base de datos. Existen multitud de SGBD en el mercado, tanto libres como de pago:

  * **MySQL**: //SGBD// relacional desarrollado bajo licencia dual: Licencia pública general/Licencia comercial por Oracle Corporation, y está considerado como la base de datos de código abierto más popular del mundo, sobre todo para entornos de desarrollo web. MySQL fue inicialmente desarrollado por MYSQL AB, que fue adquirida por Sun Microsystems en 2008, y ésta a su vez fue comprada por Oracle Corporation en 2010.

  * **MariaDB**: Derivado de MySQL con licencia GPL. Es desarrollado por Michael Widenius (fundador de MySQL), la fundación MariaDB y la comunidad de desarrolladores de software libre. Este SGBD surge a raíz de la compra de Sun Microsystems (compañía que había comprado previamente MYSQL) por parte de Oracle.

  * **PostgreSQL**: //SGBD// relacional orientado a objetos y libre, publicado bajo licencia PostgreSQL, similar a la BSD o la MIT. Como muchos otros proyectos de código abierto, el desarrollo de PostgreSQL no es manejado por una empresa o persona, sino que es dirigido por una comunidad de desarrolladores que trabajan de forma desinteresada, altruista, libre o apoyados por organizaciones comerciales. Dicha comunidad es denominada el //PGDG// (PostgreSQL Global Development Group).

  * **Microsoft SQL Server**: SGBD relacional desarrollado por la empresa Microsoft. SQL Server ha estado tradicionalmente disponible sólo para sistemas operativos Windows de Microsoft, pero desde 2017 también está disponible para Linux y Docker containers.

  * **MongoDB**: Sistema de base de datos **NoSQL**, orientado a documentos y de código abierto. En lugar de guardar los datos en tablas, tal y como se hace en las bases de datos relacionales, MongoDB guarda estructuras de datos BSON (una especificación similar a JSON) con un esquema dinámico, haciendo que la integración de los datos en ciertas aplicaciones sea más fácil y rápida. MongoDB es una base de datos adecuada para su uso en producción y con múltiples funcionalidades. El código fuente está disponible para los sistemas operativos Windows, GNU/Linux, OS X y Solaris.

===== Entorno de desarrollo local =====

Lo primero que tenemos que hacer para desarrollar un proyecto web es instalar y configurar nuestro entorno de desarrollo local. Si vamos a crear una web estática no haría falta instalar nada. Podemos crear los diferentes archivos html en una carpeta (con los css y las imágenes que utilicemos) y el navegador ya se encargaría de interpretarlos y mostrar su contenido.

Por el contrario, si queremos desarrollar una web dinámica tendremos que instalar los componentes vistos en el punto anterior (servidor HTTP, intérprete del lenguaje de programación y SGBC). Podemos instalar cada uno de estos componentes por separado, pero existen soluciones integradas que nos instalan todos esos componentes de forma rápida y sencilla.

==== Alicaciones web integradas ====

Como hemos visto en el punto anterior, podemos instalar todo lo necesario para desarrollar web dinámica sin necesidad de instalar y configurar cada una de sus partes por separado.

  * **XAMPP**: Paquete de software libre, cuyo nombre es un acrónimo de los componentes que incluye. X (que indica el sistema operativo donde se va instalar), Apache como servidor web, MariaDB, Php y Perl. Actualmente dispone de versiones para Windows, Linux y MacOs. Existen versiones exclusivas para Linux (LAMP) o MacOs (MAMP), aunque se puede instalar XAMPP en cualquiera de esas plataformas.

  * **EasyPHP**: Ofrece dos módulos orientados a desarrolladores PHP. //Devserver// permite configurar un servidor local para desarrollar en cualquier lugar (en casa, en el trabajo, en el ordenador portátil…) gracias a la portabilidad del sistema. //Webserver// permite utilizar la aplicación como servidor web para alojar contenidos y que éstos sean accesibles desde Internet.

  * **Vagrant**: Herramienta gratuita de línea de comandos, disponible para Windows, MacOS X y BNU/Linux, que permite generar entornos de desarrollo reproducibles y compartibles de forma muy sencilla. Para ello, Vagrant crea y configura máquinas virtuales a partir de simples ficheros de configuración.

  * **Laravel Valet**: Entorno de desarrollo minimalista para Mac y ahora, gracias a la comunidad, también está disponible para Linux. Aunque no es un paquete oficial de Laravel, esta versión funciona muy bien para distintas distribuciones de Linux como Ubuntu, Fedora y Arch y sus correspondientes derivados. Valet para Linux configura su sistema para ejecutar siempre Nginx en segundo plano cuando se inicia la máquina. Luego, usando Dnsmasq, se toman todas las peticiones y las apunta al dominio *.test (o el que esté configurado), haciendo referencia a todos los sitios que tengas instalados.

  * **Docker**: Es un proyecto de código abierto que automatiza el despliegue de aplicaciones dentro de contenedores de software, proporcionando una capa adicional de abstracción y automatización de virtualización de aplicaciones en múltiples sistemas operativos. Un contenedor Docker, a diferencia de una máquina virtual, no requiere incluir un sistema operativo independiente. En su lugar, se basa en las funcionalidades del kernel y utiliza el aislamiento de recursos (CPU, la memoria, el bloque E / S, red, etc.) y namespaces separados para aislar la vista de una aplicación del sistema operativo. Docker nos ofrece multitud de contenedores preparados para ejecutar LAMP, XAMP, Valet (además de muchos otros tipos de software)… sin necesidad de instalarlo en nuestra máquina local.


==== Entornos de desarrollo ====

El siguiente paso, una vez hemos instalado y configurado nuestro entorno de desarrollo local, será elegir el programa que vamos a utilizar para crear nuestras aplicaciones.

Aunque se puede utilizar la mayoría de editores de texto que vienen instalados por defecto en los sistemas operativos (notepad, gedit…), sus recursos se quedan cortos a la hora de programar. En este sentido, podemos optar por instalar un //editor de texto enriquecido//, con funciones extras para la programación, o algún //entorno de desarrollo integrado// (//IDE//). La principal diferencia radica en las herramientas disponibles en cada uno de ellos para trabajar. 

Mientras que un IDE suele tener muchísimas herramientas integradas, los editores de texto tienen bastantes menos en comparación (aunque a la mayoría se le pueden agregar esas herramientas mediante //plugins//). Por contra, la curva de aprendizaje de un editor de texto es mucho menor que la de un IDE. Además, por noma general un editor de texto tiene un tamaño mucho menor que un IDE, con lo que es más ligero que un IDE.

=== Editores de texto enriquecidos ===

  * **Atom**: Editor de texto orientado al desarrollo de aplicaciones. Se trata de una aplicación de software libre que ha sido desarrollado por //Github//. Atom se ha concebido como un editor flexible al cual se le pueden añadir nuevas funcionalidades y complementos, además de temas, que nos permiten configurar un espacio de trabajo adaptado a nuestras necesidades.

  * **Sublime Text**: Editor de texto y editor de código fuente escrito en C++ y Python para los //plugins//. Se puede descargar y evaluar de forma gratuita. Sin embargo, no es software libre o de código abierto, y se debe obtener una licencia para su uso continuado, aunque la versión de evaluación es plenamente funcional, y no tiene fecha de caducidad.

  * **Visual Studio Code**: Editor de código fuente desarrollado por Microsoft para Windows, Linux y macOs. Incluye soporte para la depuración, control integrado de Git, resaltado de sintaxis, finalización inteligente de código, fragmentos y refactorización de código. Es personalizable, por lo que los usuarios pueden cambiar el tema del editor, los atajos de teclado y las preferencias. Es gratuito y de código abierto, aunque la descarga oficial está bajo software propietario.

=== Entornos de desarrollo integrados ===

  * **Eclipse**: Plataforma de software compuesto por un conjunto de herramientas de programación, de código abierto y multiplataforma para desarrollar aplicaciones. Fue desarrollado originalmente por IBM, como el sucesor de su familiar de herramientas para VisualAge. Ahora es desarrollado por la Fundación Eclipse, organización sin ánimo de lucro que fomenta una comunidad de código abierto.

  * **NetBeans**: IDE libre, hecho principalmente para el lenguaje de programación Java. Existe además un número importante de módulos para extenderlo. NetBeans es un producto libre y gratuito sin restricciones de uso. Sun MicroSystem fundó el proyecto d código abierto NetBeans en junio de 2000, y continúa siendo el patrocinador principal de los proyectos (Actualmente Sun MicroSystem es administrador por Oracle Corporation). La plataforma NetBeans permite que las aplicaciones sean desarrolladas a partir de un conjunto de componentes de software llamados módulos. Debido a que los módulos pueden ser desarrollados independientemente, las aplicaciones basadas en NetBeans pueden ser extendidas fácilmente por otros desarrolladores de software.

  * **Microsoft Visual Studio**: IDE para sistemas operativos Windows. Soporta múltiples lenguajes de programación, tales como C++, C#, Visual Basic .NET, F#, Java, Python, Ruby y PHP, al igual que entornos de desarrollo web, como ASP.NET MVC, Django, etc. Visual Studio permite a los desarrolladores crear sitios y aplicaciones web, así como servicios web en cualquier entorno que soporte la plataforma .NET. Así, se pueden crear aplicaciones que se comuniquen entre estaciones de trabajo, páginas web, dispositivos móviles, dispositivos embebidos y consolas, entre otros.

  * **IntelliJ IDEA**: IDE para desarrollar aplicaciones con Java, Kotlin, Groovy y otro lenguajes basados en JVM. Está desarrollado por JetBrains y tiene dos tipos de licencia: Apache 2 y comercial. JetBrains también ha desarrollado varios IDEs para diferentes tipos de lenguajes (PHPStorm para PHP, PyCharm para Python, WebStorm para JavaScript...).

===== Ejercicios =====

**Ejercicio 1**

Asegúrate de tener instalado JDK en tu ordenador. En caso contrario, instálalo y configura correctamente las variables de entorno.

**Ejercicio 2**

Instala MariaDB en tu ordenador y algún editor de textos enriquecido o IDE (VSC, IntelliJ...). Puedes instalar también alguna aplicación para gestionar tu SGBD (HeidiSQL, Workbench, DBeaver...)