1. Introducción al desarrollo web

Contenidos

1. Modelo cliente-servidor (lado del cliente, lado del servidor).
2. Desarrollo web (diagrama):
   • Front-end:
     • HTML/XHTML: curso (español), referencia, validador (descarga).
     • CSS: curso (español), referencia, validador.
       • Bootstrap 5: curso (español), documentación, ejemplos.
       • Tailwind CSS 3: curso (español), documentación, ejemplos.
       • Tailwind CSS.
     • JavaScript: curso (español), referencia, optimizador.
   • Back-end:
     • PHP: curso, referencia, manual (lenguaje).
3. Servidor web (servidor HTTP Apache).
4. Protocolo HTTP (métodos HTTP GET y POST).
5. Stack de soluciones:
   • XAMPP: Apache (servidor HTTP), MariaDB, PHP y Perl.
1. Formularios en PHP: tutorial, ejemplo, validación (punto 4).
2. PHP y seguridad básica:
   • Filtros: tipos (validación, saneamiento, otros, flags), ejemplos.
   • Expresiones regulares: preg_match, RegExr, Regex101.
   • Manejo y registro de errores: constantes, funciones (error_reporting, set_error_handler).
   • Excepciones: ampliar las excepciones.
3. Control de versiones:
   • Herramientas: Git (diagrama) (comandos básicos) (referencia).
   • Servicios: GitHub, Heroku (tutorial).

Actividades

1. Realiza los siguientes ejercicios en un documento XHTML y CSS (o Bootstrap):
a) Explica las diferencias entre un desarrollador front-end, back-end y full-stack.
b) ¿Qué es un framework CSS? ¿Qué es Bootstrap? ¿Cuántos más framework CSS existen y cuáles son?
c) ¿Qué es WCAG? ¿Por qué es tan importante validar en XHTML, CSS y WCAG 2.1 AAA?
d) Explica con tus propias palabras qué es un servidor web, qué es el protocolo HTTP, busca ejemplos donde se ejecuten los métodos HTTP GET y POST y explica qué es Apache y qué es XAMPP.

2. Crea un tutorial en XHTML y CSS que enseñe a instalar XAMPP paso a paso con texto y capturas tanto en Windows 10 como en GNU/Linux. Asimismo, debe enseñar a ejecutar código PHP puro y código PHP embebido en una página XHTML y CSS.

3. Crea los siguientes formularios web con XHTML, CSS (o Bootstrap) y PHP 8:
a) Recogida y validación de usuarios: crea este (o este) formulario en XHTML y CSS y que los datos de dicho formulario se recojan, se validen y se muestren en usuario.php.
b) Generador de CV: el usuario introducirá en un formulario sus datos personales, su experiencia profesional, su formación, dominio de idiomas y otros datos que sean de interés. Los datos de dicho formulario se recogerán, se validarán y se mostrarán en cv.php.

4. Crea las siguientes aplicaciones web con XHTML, CSS (o Bootstrap) y PHP 8:
a) Piedra, papel, tijeras, lagarto o Spock: el usuario elegirá una de esas cinco opciones, recibirá una respuesta al azar y comprobará (reglas) si ha ganado, perdido o empatado contra la máquina.
b) Área y longitud de una circunferencia: el usuario introducirá el radio de una circunferencia y al pulsar en Enviar se calculará su área y longitud.
c) Informe de salud personal: el usuario introducirá su sexo, edad, altura y peso y al pulsar en Calcular se validarán los datos y se generará un informe de salud con el IMC y el metabolismo basal según la fórmula de la OMS.

5. Realiza los siguientes ejercicios en un documento XHTML y CSS (o Bootstrap):
a) ¿Qué es un control de versiones? ¿Qué diferencias hay entre uno centralizado y otro distribuido?
b) ¿Qué es Git? ¿Y GitHub? ¿En qué se diferencian y cómo se relacionan entre sí?
c) Hazte una cuenta, si no la tienes, en GitHub con un nombre de usuario serio y profesional.
d) Crea un proyecto en GitHub de una aplicación web tuya y usa Git para subir el código.

Evaluación

Entrega

1. La estructura de archivos y carpetas debe quedar así.
2. Desde la página index.html se podrá acceder a todas las actividades.
3. El profesor descomprimirá el ZIP en htdocs, iniciará XAMPP y abrirá index.html desde localhost.

Criterios de calificación

• Contenido y uso correcto de HTML y CSS/Bootstrap: hasta 4 puntos.
• Funcionalidad PHP: hasta 4 puntos.
• Principios de diseño web: diseño de interfaz, diseño gráfico web y experiencia de usuario (navegabilidad, interactividad, usabilidad, etc.): hasta 2 puntos.

Criterios de evaluación asociados

• En las actividad 1 se evaluará todos los criterios de evaluación del resultado de aprendizaje 1 (RA1).
• En las actividad 2 se evaluará todos los criterios de evaluación del resultado de aprendizaje 2 (RA3).
• En las actividad 3 se evaluará todos los criterios de evaluación del resultado de aprendizaje 3 (RA3).