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

Programación Orientada a Componentes aplicada al Diseño con los lenguajes esenciales de la Web
Material disponible
Intermedio
52 Clases 9 h
89€
69€
Precio en promoción
Atrás quedaron los viejos tiempos donde un proyecto se resolvía solo con un poco de HTML, CSS, jQuery, PHP, MySQL para ser subido a un servidor compartido por FTP. Actualmente vivimos una gran abundancia de tecnologías para el diseño y desarrollo web. Del lado del cliente encontramos Vue, React, Angular, Polymer..., en el servidor Python, Ruby, Node.js, Go..., en las bases de datos tenemos SQL y NoSQL,  y especialmente en la administración de servidores donde contamos con AWS, Azure, Digital Ocean, Google Cloud....

Tras la revolución que supuso la llegada de HTML5, uno de las grandes impactos en el mundo del desarrollo son los Componentes Web, un nuevo estándar que facilita la creación de nuevos elementos con los que enriquecer la web y extiende el comportamiento de elementos nativos. En plena expansión del soporte por navegadores, las librerías y frameworks JS actuales se han pasado en masa a este paradigma: la Programación Orientada a Componentes... "¡Divide y vencerás!".


Qué aprenderé en el Curso de Diseño Web orientado a Componentes con PHP, Sass y ES6

  • Programación orientada a Componentes
  • Tecnologías para la automatización del desarrollo web
  • Tecnologías orientadas a componentes
  • Diseño Web orientado a Componentes
  • Flujo de trabajo
  • Organización de carpetas y archivos
  • Componentes y Auxiliares
  • Introducción a Sass
  • Introducción a ES6
  • Diseñando orientado a Componentes
  • CSS orientado a Componentes
  • JS orientado a Componentes
  • PHP orientado a Componentes
  • Enrutamiento con PHP
  • Vistas con PHP
  • Diseñando un sitio web orientado a componentes
  • WPO (Web Performance Optimization) del sitio
  • Despliegue del sitio en producción

Objetivos del curso

Pese a su relevancia actual la gente que comienza a dar sus primeros pasos en este maravilloso mundo de la web, se encuentra con que aprender y manejar tantas tecnologías puede resultar difícil y agotador. Es por ello que llega el curso de Diseño Web orientado a Componentes con PHP, Sass y ES6, una iniciativa de formación con un carácter práctico cuyo objetivo es aplicar la Programación Orientada a Componentes al Diseño Web con los lenguajes esenciales (HTML, CSS, JS y PHP) ayudándonos de un de herramientas y tecnologías actuales como Node.js, Gulp, Sass y ES6.

Por qué debes aprender Diseño Web orientado a Componentes con PHP, Sass y ES6

Esta nueva iniciativa está dirigida tanto a estudiantes principiantes que se quieren introducir en el maravilloso mundo de la web como a usuarios expertos que se quieran desintoxicar de tantas tecnologías en la web.

Clases y contenidos

Introducción al Diseño orientado a Componentes

La fatiga de la web Gratis

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

Panorama de librerías y frameworks actuales Gratis

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

Origen de la orientación a componentes y jQuery Gratis

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.

Tecnologías orientadas a componentes Gratis

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

Herramientas de automatización de tareas Gratis

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

Preguntas y respuestas sobre tecnologías web Gratis

Repasamos varias cuestiones relacionadas con lenguajes y tecnologías web

Por qué volver a lo esencial Gratis

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

Preguntas finales Gratis

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

Flujo de trabajo en el Diseño Web orientado a Componentes

Crear el entorno de desarrollo en PHP

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

Crear el entorno de desarrollo para Javascript / NodeJS con NVM

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

Primeros pasos para nuestro entorno de desarrollo personalizado y Gulp

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.

Configurar life reload

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 otras tareas de Gulp

Definición de todas las tareas, el esqueleto.

Arquitectura de carpetas del proyecto

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

Automatización de la generación del código CSS

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

Automatización de la generación del código Javascript

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

Automatización de la optimización de imágenes

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 default de Gulp

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.

Experiencia de desarrollo con el sistema de automatización

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.

Preguntas y respuestas finales

Una tanda de preguntas antes de finalizar la clase.

Diseñando orientado a Componentes

Primeros pasos en el desarrollo del proyecto

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

Arquitectura de CSS

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

Guías de estilo

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

Nomenclaturas para selectores

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

Modelos de arquitectura CSS populares

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.

Conclusiones y preguntas sobre arquitectura de CSS

Repaso conceptos y dudas sobre Arquitectura CSS

Desarrollo el marcado para nuestro proyecto

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

Aplicación de estilos generales

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

Estilos CSS para la cabecera

Ahora vemos los estilos particulares para la cabecera.

Comportamiento Javascript para la cabecera

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

Modularizado del marcado mediante PHP

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

Conclusiones de la clase preguntas y retoques finales

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

Diseñando un sitio web orientado a componentes I

Resumen del contenido propuesto para esta clase

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

Introducción a un sistema de routing en PHP

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

Trabajo con el archivo .htaccess

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

Código PHP del sistema de enrutado

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 importantes sobre el sistema de routing

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

Variables de entorno PHP

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

Creación de estilos para nuestra cabecera

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

Mediaqueries y resposive design para generar la versión desktop de la cabecera

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

Creación del pie de página

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

Preguntas finales sesión orientada a componentes

Finalizamos la clase con algunas preguntas y dudas pendientes.

Diseñando un sitio web orientado a componentes II

Parametrización del template para títulos y metaetiquetas

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

Variables globales del template

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

Estilos para layout

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

Mostrar datos dinámicos alojados en un array

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

Crear una base de datos, una tabla con sus datos

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.

Mostrar datos dinámicos obtenidos desde MySQL

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.

Formulario y Javascript para asociar un evento submit

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.

Envío de un formulario con Ajax y recepción respuesta con JSON

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.

WPO

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.

Desplegar el proyecto y preguntas finales

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

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete