Skip to content

Lenguajes de programación cliente/servidor

Dentro de la web existen varios pilares fundamentales:

  • HTML: Lenguaje para maquetar los contenidos
  • CSS: Formato y presentación
  • JavaScript: Lenguaje de programación ejecutado por el cliente
  • Lenguajes de servidor: Hay muchas posibilidades Python, PHP, .Net

Más adelante en este módulo veremos cada una de estas tecnologías con detalle. En este momento haremos una introducción.

Durante esta página y la siguiente trabajaremos con el espacio de prueba1 que hemos configurado antes.

Mi primera web

La estructura de esta página web será la siguiente:

Espacio web

/ -> index.html
/ -> programacionServidor.php
img/mundo.png
img/gatito.png
js/programacionCliente.js
css/estiloPrincipal.css

La página index.html tendrá:

  • Cabecera h1 con hola mundo
  • Imagen del mundo
  • Imagen de un gatito
  • Una etiqueta p con id de programacionCliente

Con CSS haremos que los h1:

  • Tengan la letra más grande
  • Tengan un borde
  • Un color de fondo oscuro
  • Un color de texto claro

Con JS haremos un script que escriba una frase 30 veces dentro del p con id programacionCliente

Con PHP haremos que que se generen 30 span con un espacio dentro y colores aleatorios.

Proyecto github

En clase haremos:

  • Crear el repositorio
  • Generar las claves públicas y privadas
  • Subir el código

Programador web

Para hacer esto lo haremos en nuestro equipo cliente como si fuéramos un desarrollador en la empresa. Una vez que esté lista la web y funcionando lo subiremos al servidor. Subida clásica ver al final el despliegue.

Subida al server

Todavía nuestro servidor no está configurado para soportar un entorno con multiples clientes y que cada uno se administre su espacio web con lo que vamos a realizar la copia de los ficheros por scp. Quizá tengamos que tocar los permisos/propietario de los ficheros una vez que estén en el servidor.

NOTA: Usa la opción -r para copiar la carpeta.

Despliegue

  • Hace un script bash de despliegue
  • TODO: incluir fotos en esta página
  • Hablar de la integración continua, devops y dev-test-prod (EDREAMS)