Curso de Diseño Web orientado a Componentes con PHP, Sass y ES6

A qué llamamos fatiga de la web y cómo afecta a desarrolladores web y sobre todo a los que se inician en el mundo del desarrollo

Algunas notas sobre cómo en los últimos años se ha multiplicado la aparición de librerías y frameworks para el desarrollo web, todos ellos implementando el paradigma del desarrollo con componente

Cómo jQuery, a pesar de no ser un framework orientado a componentes, fue la primera librería que nos introdujo el mundo de los componentes, a través de los plugins.

Un repaso general a las tecnologías web actuales. Un amplio espectro.

Este es otro de los puntos que veremos durante el sitio. Las herramientas que nos permiten automatizar tareas. En concreto abordaremos Gulp.

Repasamos varias cuestiones relacionadas con lenguajes y tecnologías web

La propuesta de stack de tecnologías para dar los primeros pasos con proyectos profesionales, capaces de aprovechar las mejores posibilidades de la web.

Una tanda de preguntas diversas sobre la clase de presentación de la orientación a componentes

Algunas posibilidades para crear el entorno de desarrollo en PHP comentadas con sus características. Se explica cómo usar Bitnami como alternativa

Instalar NodeJS por medio de "nvm" Node Version Manager. Administrar las versiones de node por medio de este software.

En este vídeo se ve la creación del "gulpfile" y la utilización de ES6 para la programación de este archivo para la gestión de la automatización.

Se explican de manera general los métodos principales de Gulp para la gestión de tareas. Se configura el sistema de recarga automática, que evita que tengamos que refrescar manualmente el navegador cuando se alteran los archivos del proyecto.

Definición de todas las tareas, el esqueleto.

Explicación detallada de la estructura de carpetas propuesta para este proyecto.

Automatización del CSS. En esta tarea se realizan asuntos como el procesamiento del código Sass, el sistema Autoprefixer, etc

En esta tarea se realiza la transpilación del código Javascript ES6 a código Javascript entendible por todos los navegadores.

En esta tarea se realiza la optimización de los archivos gráficos, para que pesen menos. Imágenes en bitmap y también vectoriales en svg.

Tarea predeterminada de Gulp, que no es más que una secuencia de tareas que se deben ejecutar y el lanzamiento del sistema de vigilancia para el life reload.

En este vídeo se realizan unos pequeños cambios en archivos principales del proyecto, para que se pueda apreciar cuál es el flujo de trabajo cuando todo está automatizado.

Una tanda de preguntas antes de finalizar la clase.

Creamos una serie de archivos que van a formar parte de nuestro proyecto.

Explicamos conceptos generales sobre arquitectura de CSS y diseño basado en componentes.

Qué son las guías de estilo y ejemplos populares de guías de estilo públicas, de las que podemos aprender o inspirarnos.

Un punto fundamental para permitir la organización del código CSS y su reutilización es mantener una consistente nomenclatura para selectores.

Algunas guías completas sobre cómo realizar la arquitectura de CSS que debemos de conocer, entender y extraer aquello que más nos interese.

Repaso conceptos y dudas sobre Arquitectura CSS

Desarrollamos el esqueleto de la página, el HTML fundamentalmente de una cabecera, aplicando las guías para componetización.

Qué estilos generales tenemos en el sitio y cómo se va mudularizando el CSS.

Ahora vemos los estilos particulares para la cabecera.

Primer código Javascript, en un módulo específico, para el componente de cabecera.

Cómo partir el HTML en componentes, colocando cada bloque de código en un archivo aparte, que se incluye mediante PHP.

Preguntas y dudas de lo visto durante la sesión, y retoques finales

Resumen del contenido de esta clase y de la clase siguiente, hasta finalizar el curso.

Sistema de routing y por qué es importante en las aplicaciones y sitios web

Archivo .htaccess para poder definir las rutas que aceptará la aplicación y entregar los parámetros de las rutas a PHP.

Programamos la parte de PHP, el archivo que recibirá los parámetros de la ruta y en función de ellos decidirá que archivos del servidor usar para mostrar el contenido solicitado.

Consideraciones que los desarrolladores al crear sistemas de routing para sus aplicaciones.

Cómo crear una variable de entorno que le ayude a PHP a componer las rutas de la aplicación.

Estilos CSS que nos sirven para crear una cabecera bien maquetada.

Continuando con la sesión anterior, ahora nos dedicamos a hacer la versión de escritorio de la cabecera.

Cómo se impementaría un pie de página con botones sociales.

Finalizamos la clase con algunas preguntas y dudas pendientes.

Cómo podemos conseguir que cada página del sitio tenga su propio título personalizado y sus propias etiquetas meta.

Parametrizar en el template, de modo que podamos reutilizarlo en otros proyectos, cambiando las variables globales que se vuelcan en el template.

Generar CSS para ajustar nuestro layout, apoyándonos en Flexbox.

A veces no es absolutamente necesario tener los datos alojados en una base de datos y nos puede servir con un sencillo array.

Vamos a crear el recurso de la base de datos, con la tabla y sus datos, que luego queremos mostrar dentro de la página.

Usamos las funciones de MySQLi, la interfaz más sencilla en PHP para acceder a una base de datos MySQL y recuperar su información.

Creamos un formulario y asociamos un evento submit, con Javascript en nuestro archivo principal. Evitando que la página arroje un error cuando el formulario no está presente.

Enviamos los datos del formulario al servidor, usando Ajax. Escribimos código del lado del servidor (PHP) para recibir los datos del formulario y devolver una respuesta en Ajax. Recibimos la respuesta en el cliente (Javascript) y la mostramos al usuario.

Unas guías interesantes y útiles sobre Web Performance Optimization y cómo definir reglas en el .htaccess para conseguir que el sitio esté más optimizado.

Se despliega el proyecto, con FTP y se realiza una serie de preguntas para finalizar la clase.