Desarrollo Web: Web 1.0 a 4.0, Arquitectura, Full Stack, Cloud Computing e Instalación de LAMP y WordPress

Ingeniería informática, , ,

1. La WWW (World Wide Web)

Internet tiene su origen en la red ARPANET, creada por orden del Departamento de Defensa de los EE. UU. en 1969. La World Wide Web (WWW) fue creada en 1989 por Tim Berners-Lee mientras trabajaba en el CERN (Organización Europea para la Investigación Nuclear). Consiste en un sistema de organización de información a través de páginas interconectadas mediante hipervínculos. Utiliza tecnologías y protocolos fundamentales como HTML (HyperText Markup Language) para la edición de páginas, URL y HTTP (HyperText Transfer Protocol), que permite que los navegadores realicen solicitudes a los servidores web y reciban las respuestas.

Evolución de la Web

  • Web 1.0 (Estática): Contenido fijo y unidireccional donde los usuarios son solo espectadores. No usa bases de datos.
  • Web 2.0 (Colaborativa / Dinámica): Los usuarios participan activamente. Se introducen bases de datos, redes sociales, wikis y blogs.
  • Web 3.0 (Semántica): Más inteligente. Analiza gustos e historial del usuario, permite lenguaje natural y usa inteligencia artificial.
  • Web 4.0 (Ubicua): Comunicación integrada entre personas y cosas (como gafas de realidad aumentada o agentes virtuales) para tomar decisiones.

2. Arquitectura de tres niveles

  • Presentación: Lo que ve el usuario; incluye el código del lado del cliente (HTML, CSS y JavaScript) en el navegador.
  • Lógica: Gestiona el funcionamiento interno mediante tecnologías de servidor y suele estructurarse con el modelo MVC (modelo, vista y controlador).
  • Negocio / Datos: Contiene la información empresarial de forma segura e incluye el Sistema Gestor de Bases de Datos (SGBD).

3. Modelo Full Stack

Enfoque de desarrollo que abarca el frontend, el backend y, habitualmente, el trabajo con bases de datos. Un desarrollador full stack conoce todas las capas de la aplicación: diseña la interfaz con tecnologías como HTML, CSS y JavaScript, programa la lógica del servidor con lenguajes como PHP, Java o Python y gestiona la base de datos. Así puede crear un proyecto web completo de principio a fin.

Surge gracias a la aparición de tecnologías como el servidor de JavaScript Node.js y bases de datos NoSQL como MongoDB. Permite utilizar un solo lenguaje (JavaScript) en todas las capas de la aplicación.

4. Procesamiento en cliente y servidor

  • Front-end (Cliente): Es la parte visual e interactiva que se ejecuta directamente en el navegador del usuario utilizando tecnologías como HTML, CSS y JavaScript.
  • Back-end (Servidor): Es la parte oculta que se procesa en el servidor (usando lenguajes de servidor y bases de datos), encargada de la lógica, la seguridad y de enviar la respuesta traducida en HTML al navegador.

5. Modelo Vista Controlador (MVC)

El patrón MVC (Modelo-Vista-Controlador) divide la programación de la capa lógica en tres partes:

  • Modelo: Contiene el código encargado de asociar la información procedente de la capa de negocio a un formato entendible por la aplicación.
  • Vista: Define la interfaz de usuario y genera la presentación final.
  • Controlador: Actúa como mediador, manejando las peticiones del usuario y comunicando el modelo con la vista.

6. SaaS, PaaS e IaaS

  • SaaS (Software como servicio): Aplicaciones listas para usar a través de la red sin necesidad de instalarlas en el equipo.
  • PaaS (Plataforma como servicio): Plataforma completa (sistema operativo, librerías, compiladores) para desarrollar aplicaciones.
  • IaaS (Infraestructura como servicio): Infraestructura de hardware virtualizada (servidores, redes, almacenamiento) accesible como un servicio.

7. Modelos de Cloud Computing

Uso de recursos informáticos a través de Internet, como servidores, almacenamiento y aplicaciones, sin tener que disponer de toda la infraestructura físicamente.

8. Tipos de nubes para desplegar servicios

  • Pública: Infraestructura ofrecida por un proveedor externo y compartida por varios clientes.
  • Privada: Infraestructura de uso exclusivo para una sola organización.
  • Híbrida: Combinación de nubes públicas y privadas.
  • Comunitaria: Infraestructura compartida por varias organizaciones con necesidades comunes.

9. Web apps y apps nativas

  • Web apps: Son aplicaciones web (se ejecutan en el navegador), pensadas para ser utilizadas en un dispositivo móvil.
  • Apps nativas: No son aplicaciones web, sino aplicaciones programadas en los lenguajes nativos de los dispositivos móviles: Java, C#, C++, etc., dependiendo de la plataforma.

10. Marcos híbridos

Permiten crear aplicaciones utilizando tecnologías web (HTML, CSS y JavaScript) para empaquetarlas y desplegarlas en múltiples plataformas (iOS, Android, etc.) a partir de una única base de código, combinando elementos web y contenedores nativos (WebView).

Entorno gráfico para instalar Xubuntu

  • sudo apt-get update
  • sudo apt-get install -y xubuntu-desktop
  • sudo reboot

Guest Additions

  • sudo apt update && sudo apt upgrade -y
  • sudo apt install -y build-essential dkms linux-headers-$(uname -r)
  • Insertar la imagen de las Guest Additions
  • sudo mkdir -p /media/cdrom
  • sudo mount /dev/cdrom /media/cdrom
  • cd /media/cdrom
  • sudo ./VBoxLinuxAdditions.run
  • sudo reboot

XAMPP + LAMP + PHP + MySQL

Descargar y arrastrar el archivo desde Moodle.

  • cd Escritorio
  • sudo chmod 777 x (usar tabulador; si no funciona, usar ls)
  • sudo ./x (usar tabulador)

Abrir en el navegador http://localhost. En la aplicación, pestaña Manage servers, pulsar Start All.

  • sudo /opt/lampp/xampp security (responder todo: sí)
  • Parar LAMP: sudo /opt/lampp/lampp stop
  • Encender Apache: sudo service apache2 start
  • PHP en el navegador: http://localhost/phpmyadmin/
  • sudo apt-get install apache2
  • sudo apt-get install php5 libapache2-mod-php5 php5-cli
  • sudo apt-get install mysql-server php5-mysql

Archivo de texto / PHP

  • cd /opt/lampp/htdocs/
  • sudo nano test.php
  • En el navegador: http://localhost/test.php
  • netstat -ltn
  • mysql -u root -p
  • select host, user, password from mysql.user;

Instalar un servidor LAMP manualmente con tasksel en Xubuntu

  • sudo apt-get install tasksel
  • sudo tasksel
  • Marcar LAMP server
  • Comprobar Apache en el navegador

Instalación de WordPress

Descargar el fichero de WordPress desde Moodle.

  • sudo thunar
  • Arrastrar WordPress dentro de Thunar (Control+Z si es necesario). Hay que estar en la ruta /opt/lampp/htdocs/
  • sudo chmod -R 777 wordpress

Crear la base de datos y el usuario

  • En el navegador: localhost/phpmyadmin
  • Pulsar Nueva, asignar un nombre y elegir como cotejamiento utf8.
  • En el navegador: localhost/wordpress. No marcar la casilla de permitir que los motores de búsqueda indexen este sitio.

Configuración básica personalizada

En localhost/wordpress/wp-admin/

Instalación de idiomas

  • En Moodle, descargar el idioma gallego.
  • Abrir esa carpeta para ver el contenido: sudo thunar
  • En la carpeta wordpress que se abre, entrar en wp-content → languages y arrastrar ahí el contenido.
  • Comprobar el gallego en localhost/wordpress en Ajustes generales.