Curso Práctico de Maquetación Web Profesional

Diseño web

Aprende de manera muy práctica a maquetar webs profesionales, con un proyecto real

Intermedio Medio (de 8 a 20 horas)

Objetivos y mecánicas del Taller Práctico de Maquetación Web Profesional

A lo largo de las clases del curso abordaremos la maquetación de web de una manera práctica y desde un proyecto real, comenzando con un diseño ya realizado en Adobe Ilustrator, hasta la implementación detallada con HTML y CSS, usando las mejores soluciones basadas en estándares abiertos.

El objetivo es transmitir a los estudiantes las habilidades necesarias para dominar el diseño web desde una perspectiva práctica, extrayendo lo mejor de las tecnologías actuales y aportando soluciones a los problemas comunes derivados de la fragmentación de los navegadores.

Se trata de un curso técnico, pues la parte creativa la tendremos hecha de antemano. Definida la línea estética, se creará un sitio web a base de HTML, CSS y Javascript, escogiendo las mejores soluciones y argumentando los motivos. El desarrollo del sitio se realizará por etapas, a lo largo de las clases, comenzando por el HTML, las guías de estilos, el CSS, los componentes de interfaz gráfica más sofisticados y los componentes dinámicos usando Javascript y jQuery. Para la maquetación se aplicarán las últimas especificaciones y tecnologías alrededor de CSS (Selectores nivel 4, Grid Layout, Flexbox, preprocesadores.... ) hasta lograr la mejor organización, distribución y optimización de los elementos que componen un proyecto web.

Con este curso de maquetación podrás trabajar sobre un proyecto web real, de última generación, que cumpla con los estándares web, ofrezca una adecuada la experiencia de usuario, permita una mayor consistencia visual, mejore la escalabilidad, desarrollo y mantenimiento, así como optimice el proyecto para un mejor posicionamiento en buscadores.

Por qué estudiar maquetación profesional

Maquetar una web, o una aplicación basada en tecnologías web, se puede realizar de muchas maneras y sin embargo no todas serán deseables. Utilizar técnicas inadecuadas puede derivar en un sitio rígido, poco adaptable o incompatible con navegadores importantes, pesado en bytes, con un mantenimiento difícil o un posicionamiento en buscadores mediocre.

Maquetar una web correctamente, usando las técnicas más actuales, aparte de ofrecerte unos resultados más adecuados, te llevará menos tiempo y producirá menos dolores de cabeza, a la vez que facilitará al resto del equipo el trabajo en el proyecto.

En un sector de evolución tan rápida como el diseño frontend es esencial reciclarse y adquirir nuevos conocimientos con los mejores profesionales, que permitan adaptarse a los nuevos estándares, y solucionar de manera rápida los problemas habituales.

¿A quién va dirigido?

Desarrolladores, diseñadores o personas con una base de conocimiento en HTML y CSS que deseen adquirir un conocimiento actualizado para cualificarse como diseñadores frontend.

Los participantes del taller podrán:

- Practicar con las últimas especificaciones de CSS.
- Aplicar los conocimientos en escenarios reales.
- Aprender y aplicar las soluciones más adecuadas a problemas comunes derivados del entorno web y los navegadores.
- Obtener y aplicar un workflow detallado y optimizado para la productividad

Las clases de este curso tendrán un duración aproximada de 120 minutos.

Programa por contenidos/sesiones:

Definición del proyecto

1ª sesión: 


- Inspección visual del diseño: comprobación de capas, elementos y estados (hover, focus..) 


- Definición de tecnologías: HTML5, CSS y JS 
- Compatibilidad navegadores (¿soporte a alguno en especial?)


- ¿Frameworks? 
- CSS: organización hojas de estilos (1 vs varias)


- CSS: Responsive (mobile first) 


- CSS: Grid, Flexbox o floats (Compatibilidad y elección según escalabilidad) 


- CSS: resets y normalize 
- JS: Localización de funcionalidades. Organización de archivos. Head vs Footer. jQuery, React, Angular...


- Assets: imágenes organización y formato (png, jpg, svg…)


- Assets: iconos (svg, sprites, icon font…)


- Assets: tipografía web (Google Fonts, web safe fonts…)

Ejecución del proyecto


2ª sesión:


- Organización ficheros (index.html + folders) 


- HTML Head: tags y carga de archivos. (fuentes, librerías externas, iconos, assets…)

3ª sesión:

- HTML Body: header


- HTML Body: sections 


- HTML Body: footer

4ª sesión:


- CSS: Guía de estilos 


- CSS: Preprocesadores y variables


- CSS: Tipografías


- CSS: Navegación

5ª sesión:


- CSS: Grid 


- CSS: Grid mediaqueries

6ª sesión:


- CSS: botones y enlaces 


- CSS: formularios


- CSS: resto de mediaqueries 


- CSS: nuevos selectores de nivel 4

7ª sesión:


- JS: carga de jQuery 


- JS: definición de funciones


- Testeo y subida a producción (introducción a herramientas de testeo de navegadores y WPO)

CONTENIDO

Definición y organización del proyecto

Inspección con Illustrator

Gratis !
Ricardo Prieto

Inspección de las páginas interiores

Gratis !
Ricardo Prieto

Checklist: Javascript

Gratis !
Ricardo Prieto

Checklist: Assets

Gratis !
Ricardo Prieto

Preguntas finales y conclusiones

Gratis !
Ricardo Prieto

Ejecución del proyecto I. Organización ficheros - HTML Head

Estructura de proyecto

Ricardo Prieto

Integración del CSS

Ricardo Prieto

Carga de Javascript

Ricardo Prieto

EJECUCIÓN DEL PROYECTO II

Imágenes responsive

Ricardo Prieto

Ejecución del Proyecto III

Conocimientos base de CSS

Ricardo Prieto

Selectores de CSS

Ricardo Prieto

Editores

Ricardo Prieto

Reset CSS

Ricardo Prieto

Guías de estilo

Ricardo Prieto

Preprocesadores CSS

Ricardo Prieto

Post CSS y CSS Next

Ricardo Prieto

Unidades CSS

Ricardo Prieto

Preguntas finales y dudas

Ricardo Prieto

EJECUCIÓN DEL PROYECTO IV

Maquetación del cuerpo

Ricardo Prieto

CSS Media Queries

Ricardo Prieto

Ejecución del proyecto V

Selectores CSS de nivel 4

Ricardo Prieto

Cuestiones finales

Ricardo Prieto

EJECUCIÓN DEL PROYECTO VI

Instalar PostCSS

Ricardo Prieto

Testeo en navegadores

Ricardo Prieto

Preguntas finales

Ricardo Prieto

CONTENIDO

Definición y organización del proyecto

Inspección con Illustrator

Gratis !
Ricardo Prieto

Inspección de las páginas interiores

Gratis !
Ricardo Prieto

Checklist: Javascript

Gratis !
Ricardo Prieto

Checklist: Assets

Gratis !
Ricardo Prieto

Preguntas finales y conclusiones

Gratis !
Ricardo Prieto

Ejecución del proyecto I. Organización ficheros - HTML Head

Estructura de proyecto

Ricardo Prieto

Integración del CSS

Ricardo Prieto

Carga de Javascript

Ricardo Prieto

EJECUCIÓN DEL PROYECTO II

Imágenes responsive

Ricardo Prieto

Ejecución del Proyecto III

Conocimientos base de CSS

Ricardo Prieto

Selectores de CSS

Ricardo Prieto

Editores

Ricardo Prieto

Reset CSS

Ricardo Prieto

Guías de estilo

Ricardo Prieto

Preprocesadores CSS

Ricardo Prieto

Post CSS y CSS Next

Ricardo Prieto

Unidades CSS

Ricardo Prieto

Preguntas finales y dudas

Ricardo Prieto

EJECUCIÓN DEL PROYECTO IV

Maquetación del cuerpo

Ricardo Prieto

CSS Media Queries

Ricardo Prieto

Ejecución del proyecto V

Selectores CSS de nivel 4

Ricardo Prieto

Cuestiones finales

Ricardo Prieto

EJECUCIÓN DEL PROYECTO VI

Instalar PostCSS

Ricardo Prieto

Testeo en navegadores

Ricardo Prieto

Preguntas finales

Ricardo Prieto