Curso Práctico de Maquetación Web Profesional
Aprende de manera muy práctica a maquetar webs profesionales, con un proyecto real
Material disponible
Intermedio
62 Clases 13 h
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.

¿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

Qué aprenderé en el Curso Práctico de Maquetación Web Profesional

Definición del proyecto

  • 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
  • ¿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

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

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

  • HTML Body: header

  • HTML Body: sections

  • HTML Body: footer

  • CSS: Guía de estilos

  • CSS: Preprocesadores y variables

  • CSS: Tipografías

  • CSS: Navegación

  • CSS: Grid

  • CSS: Grid mediaqueries

  • CSS: botones y enlaces

  • CSS: formularios

  • CSS: resto de mediaqueries

  • CSS: nuevos selectores de nivel 4

  • 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)

Objetivos del curso

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é debes aprender Práctico de Maquetación Web Profesional

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.

Clases y contenidos

Definición y organización del proyecto

Materiales necesarios proyecto de Maquetación Gratis

Confirmación de los materiales necesarios para comenzar un proyecto de maquetación web. El equipo de diseño ha realizado su trabajo y nos entrega todo lo que necesitamos para realizar nuestro trabajo de maquetación.

Hemos recibido los archivos, más o menos ordenados, y hacemos una comprobación sobre si está todo lo que necesitamos y han quedado bien especificado el trabajo que vamos a realizar. assets, Iconos, fuentes, imágenes, medidas, etc

Inspección con Illustrator Gratis

Realizamos una inspección detallada del diseño que nos han entregado, abriendo los archivos de Illustrator que nos ha preparado el equipo de diseño.

Tenemos que comprobar todas las imágenes que nos han mandado, las dimensiones de los elementos, el espaciado, etc. El responsive y cómo debería comportarse nuestro diseño a la hora de adaptarse a las pantallas distintas.

Obviamente, podríamos recibir el diseño en otros programas como Photoshop o Sketch. Comentamos diferencias y ventajas / inconvenientes de cada uno.

Inspección de las páginas interiores Gratis

Cada sección del sitio para el cual tengamos que realizar su maquetación en el proyecto debe tener una propuesta específica, que se debería recibir también en Illustrator, o cualquier otro programa. Realizamos las mismas medidas y comprobaciones para cada sección.

Checklist: tecnologías, lenguajes y navegadores Gratis

Ya en la entrevista con el equipo de diseño, en la que probablemente esté también el cliente final, tenemos que pasar un completo checklist de asuntos que se deberían dejar claros antes de comenzar el trabajo.

En este vídeo se abordan varios asuntos de este checklist de temas a tratar: Las tecnologías que se van a usar, los lenguajes con los que trabajaremos, con sus versiones, etc. Así como los navegadores para los que tenemos que asegurar compatibilidad.

Checklist: Frameworks y otros aspectos del CSS Gratis

En este vídeo vemos otra parte fundamental de nuestro checklist a abordar durante la entrevista con el equipo de diseño. Se abordarán los frameworks, como Bootstrap, Fundation, etc. Así como asuntos del CSS como resets, normalize…

Checklist: Javascript Gratis

Qué cosas se deben comentar sobre Javascript, también en la reunión, para dejar claro hasta donde llega nuestro trabajo y qué librerías o frameworks se espera que se use, en caso requerido.

Checklist: Assets Gratis

Otro de los puntos fundamentales de la reunión, que debe quedar muy claro. No sólo asegurarse que todos los assets están disponibles en la entrega inicial, sino también definir cómo se van a integrar, si se van a usar sprites, svg, iconos por fuentes. Aquí también incluimos las tipografías y otros puntos finales para acabar la reunión.

Preguntas finales y conclusiones Gratis

En este vídeo se abordan una serie de preguntas guardadas para el final de la clase, junto con algunas conclusiones y descripción del contenido que nos queda por ver en el curso.

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

Estructura de proyecto

Comenzamos en una carpeta de proyecto vacía y en lugar de empezar a escribir código, vamos a iniciar una sencilla estructura de carpetas en el proyecto para almacenar todos los archivos con los que se va a trabajar.

Además en este vídeo se explican algunas cosas básicas sobre herramientas, el editor Visual Studio Code, etc.

Configuración del head (en el index)

Comenzamos a tirar líneas de código! creando el archivo index.html, en el que comenzaremos incluyendo varias líneas en la cabecera. Veremos algunas etiquetas META para expresar cosas variadas, con metadatos sobre la página que se está desarrollando. Veremos también alguna etiqueta fundamental como es el viewport.

Integración del CSS

En esta parte de la clase veremos cómo se puede integrar el código CSS dentro de una página, con varias opciones comentadas, como estilos cargados por archivos externos o dentro de la propia página. Veremos además posibilidades de CSS como los import, que también conviene conocer y saber sus particularidades.

Carga de Javascript

Algunas consideraciones y posibilidades para cargar y ejecutar código Javascript en la página, desde archivos externos generalmente, o escribiendo el código en la propia página.

Carga de fonts (tipografías)

Cómo realizar un uso adecuado de las fuentes tipográficas. Cómo cargar fuentes que vienen de Google Fonts, con alternativas distintas. Cómo cargar fuentes que podemos tener en archivos y que queremos subir a nuestro servidor, para evitar trabajar con recursos externos a nuestro propio sitio.

Carga de recursos de iconos

Como podemos cargar en el index bibliotecas de iconos que vayamos a usar en nuestro sitio web. Estudiaremos bibliotecas de iconos conocidas y sus integraciones en el archivo HTML inicial para nuestro proyecto.

Veremos Font Awesome, IcoMoon e incluso FlatIcon como fuentes de iconos, con sus alternativas de carga comentadas desde el punto de vista de la optimización.

Consideraciones de carga del Javascript

Algunas consideraciones sobre el orden de carga de los archivos Javascript y la ejecución del código Javascript en general, interesantes de cara a la optimización del proyecto y la disponibilidad de la funcionalidad en el momento adecuado.

EJECUCIÓN DEL PROYECTO II

Prácticas y conocimientos para trabajar bien el HTML

En este primer vídeo hacemos una presentación sobre las mejores prácticas a la hora de trabajar con el HTML.

Etiquetas semánticas de HTML5, cuáles son las más apropiadas en cada caso, qué estructura debe tener la maquetación de las páginas, etc.

Desarrollo del HTML: Page header

En este vídeo comenzamos a escribir el código HTML de la página. En el marcado construimos todos los elementos que debe tener la cabecera de la web

Desarrollo del HTML: Page content

En esta parte nos dedicamos al desarrollo de la zona principal de la web, el contenido.

Desarrollo del HTML: Page footer

En este vídeo creamos el footer de la página, donde básicamente sólo tenemos una serie de iconos. Creamos el marcado de los iconos

Generación de fuente personalizada de iconos con icomoon

Para el footer de la página generamos un set de iconos mediante icomoon, que nos ofrece una fuente de iconos optimizada, donde sólo están los que realmente necesitamos.

Exportar a SVG y alternativas para incluir en la página

En este vídeo se ve la exportación de archivos gráficos, que tenemos en Illustrator, al formato SVG. Vemos cómo es la exportación a Illustrator, que a veces requiere optimización en el código. Vemos cómo se puede integrar el SVG en un sitio web, usando un par de alternativas posibles.

  1. Como una imagen externa
  2. como un código en el propio HTML
Imágenes responsive

En este vídeo vemos dos aproximaciones de HTML para producir imágenes responsive. Esto es, imágenes que se adaptan a las dimensiones de la pantalla del navegador, o al dispositivo que se use.

Veremos la alternativa en el HTML con la propia etiqueta IMG y la alternativa usando PICTURE. Ambas se explican qué nos ofrecen y cuando podemos querer una u otra

Conclusión, ejercicios y preguntas

Se plantea como ejercicio la preparación del marcado para la página interior, dando algunos detalles que se deben tener en cuenta para su desarrollo.

Se resuelven preguntas planteadas durante la marcha de la clase.

Ejecución del Proyecto III

Conocimientos base de CSS

Introducción a la clase de hoy, primera del bloque de CSS.

Comenzamos explicando algunas cosas básicas del lenguaje CSS, como su sintaxis.

Selectores de CSS

Qué son los selectores, junto con explicaciones sobre los tipos de selectores básicos y su nivel de importancia, o peso, que es importante conocer para evitar problemas habituales a la hora de escribir el CSS.

Editores

Unas breves notas sobre editores de código y extensiones que pueden ser útiles para tener instaladas

Reset CSS

Explicamos qué es un reset, por qué es importante en un proyecto y cómo incluir nuestro reset en el proyecto.

Llegará el momento en el que el código CSS de nuestro proyecto crecerá y crecerá.

Para evitar problemas es importante organizarse.

En este bloque explicamos cómo organizar el CSS para mejorar nuestra productividad y la experiencia de crear código de hojas de estilo en cascada.

Guías de estilo

Qué es una guía de estilo, su importancia o no dependiendo del cliente o el proyecto. Cómo debería de ser una guía de estilo y quién debería realizarla, si fuera necesaria.

Preprocesadores CSS

Qué son los preprocesadores, por qué acabaron estableciéndose entre las herramientas más usadas de los maquetadores web. Presente y futuro de los preprocesadores y su necesidad, o no, de incorporar a un proyecto.

Post CSS y CSS Next

Qué es Post CSS, una herramienta que se ha convertido en tendencia hace relativamente poco tiempo. Qué herramientas se incluyen dentro de Post CSS, como Autoprefixer o CSS Next.

Se explica con mayor detalle CSS Next, que permite usar hoy el CSS que existirá en el futuro.

Conceptos y prácticas sobre tipografías

Qué es la tipografía y cómo se define en CSS. Conceptos sobre tipografías y uso de fuentes obtenidas por distintos medios, o fuentes denominadas como seguras.

Unidades CSS

Se explican las unidades, en sus dos clasificaciones principales: Unidades CSS Relativas y Unidades CSS Absolutas.

Las unidades CSS merecen un estudio independiente, pues hay muchas y muy variadas. Conocerlas es importante porque muchas de ellas nos ofrecen de manera cómoda alternativas que de otra manera serían más difíciles de producir o mantener.

Aplicación de CSS a nuestro proyecto de web

En este bloque se ve algo más práctico, codificando estilos del proyecto con el que se está trabajando a lo largo de este curso.

En concreto se aplicará estilos en la barra de navegación y se reforzará el contenido explicado sobre unidades CSS.

Preguntas finales y dudas

Dedicamos los últimos minutos de la sesión a resolver diversas dudas que quedaron pendientes de formular.

EJECUCIÓN DEL PROYECTO IV

Introducción a la maquetación con CSS

Introducción a la clase. En este vídeo se tratan aspectos como las posibilidades de maquetación aparecidas a lo largo del tiempo, desde floats hasta el grid layout, pasando por flexbox. Cómo esas formas de maquetación fueron mejorando el estándar y aportando nuevas posibilidades a los maquetadores de sitios web.

Conceptos clave de CSS Grid Layout

En este vídeo se explican los conceptos fundamentales que se utiliza en la maquetación mediante el estándar CSS Grid Layout. Cómo se organiza la rejilla, en celdas, filas y columnas, y las posibilidades de aplicar posicionamiento en torno de esa disposición, mediante distintos atributos de CSS.

Definición del layout de rejilla para los bloques principales

En este bloque veremos cómo se define la rejilla para los tres elementos principales de nuestro diseño: cabecera, cuerpo y pie de página.

Los bloques se posicionarán mediante una rejilla, con Grid Layout, y de paso se podrá practicar con diversos atributos del estándar de CSS, de modo que podamos entender CSS Grid de una manera más práctica.

En esta clase nos limitaremos a ver cómo se puede definir las propiedades de la rejilla a partir del contenedor principal.

Definición de la rejilla mediante propiedades CSS para las celdas

Además de definir la rejilla mediante propiedades CSS en el contenedor principal, las celdas también permiten definir atributos CSS específicos. Esos atributos sobre las celdas, al final, también nos permiten alterar la rejilla en sí. Por tanto, sería otro modo de definir el posicionamiento y caraterísticas de la rejilla principal de nuestra página.

Maquetación de los elementos de la cabecera

Ahora, mediante otra rejilla, vamos a poder maquetar los elementos que se encuentran en la cabecera del sitio web.

Analizamos el diseño entregado en Illustrator para ser lo más fieles posibles a las especificaciones que se nos han entregado y vamos colocando los elementos en columnas y filas, pero ahora solamente para lo que será la cabecera.

Además en este vídeo también veremos cómo adaptar un SVG para usarlo como fondo en un elemento de la página.

Maquetación del cuerpo

En este bloque se maqueta el cuerpo de la página, para la home, que contiene una serie de imágenes que también posicionaremos ayudados por Grid Layout.

CSS Media Queries

En este vídeo explicamos qué son las media quieries y qué posibilidades nos ofrecen para hacer diseños capaces de adaptarse a las dimensiones de todo tipo de pantallas, o medios en general.

En este caso usamos las media queries para conseguir que las columnas y filas de la rejila se adapten al diseño que nos han entregado en móvil, tablet y escritorio.

Conclusiones y preguntas finales

En este bloque veremos algunos detalles finales sobre media quieries, como es el orden de éstas en el código CSS. Además se atienden las preguntas que quedaron pendientes de resolver sobre esta clase.

Ejecución del proyecto V

Análisis del diseño del single

En este primer bloque de la clase 6 del curso de maquetación CSS vamos a revisar el objetivo que se persigue en esta clase, que es maquetar la página interior, llamada muchas veces "single", pues es como la ficha de una unidad de contenido.

En el vídeo se va analizando el diseño que tenemos en Illustrator y se va comentando el HTML producido para implementarlo.

Creación del CSS para maquetar el single con Grid Layout

En este vídeo se realiza el CSS básico para la distribución de los elementos de la página single, en la rejilla propocionada por CSS Grid Layout.

Gestión del espacio entre celdas con grid gap

En este bloque veremos cómo se asigna un espacio entre celdas y cómo podemos conseguir que ciertos elementos ocupen también el espacio entre celdas, para dar continuidad a los fondos entre determinadas áreas del grid.

Bloque de elementos related

Maquetamos con una nueva rejilla los elementos related, que van en la página del single.

Definición del layout para la versión de escritorio

En este vídeo se muestra cómo se realiza la versión de escritorio para el single, que debe tener una rejilla que es diferente que la que teníamos para móviles.

De hecho, esta parte es muy relevante, pues la rejilla puede ser totalmente redefinida por medio de media queries para pantallas de dimensiones diferentes.

Pseudoelementos y pseudoclases

En este vídeo vamos a usar pseudoelementos para implementar la parte de "tags" en el diseño del single. Además veremos qué son pseudoelementos y qué son pseudoclases, junto con casos de uso y sintaxis CSS para definirlos.

Selectores CSS de nivel 4

En este bloque vamos a aprender nuevos selectores de CSS, los denominados de nivel 4.

Veremos cómo son esos nuevos selectores de la especificación de CSS, con ejemplos prácticos y cuál es su compatibilidad en los navegadores actuales.

Cuestiones finales

Acabamos como siempre con el turno de preguntas para resolver posibles dudas formuladas en la clase.

EJECUCIÓN DEL PROYECTO VI

Incorporar Javascript y librerías de terceros (jQuery)

En esta primera parte de la clase, después de una introducción de objetivos, veremos detalles de interés como la incorporación de scripts Javascript.

En concreto veremos el típico icono de la hamburguesa y cómo realizarlo usando un sencillo script, apoyados en jQuery.

Realizar el icono de la hamburguesa solo con CSS

Cómo realizar el icono de la hamburguesa usando solamente un elemento HTML vacío, al que se le colocan estilos con CSS.

En este caso se usan pseudoelementos after y before para conseguir las tres líneas del icono de la hamburguesa.

Instalar PostCSS

En este vídeo mostramos cómo instalar PostCSS. Veremos cómo instalarlo a través de npm y basando nuestro trabajo en el gestor de tareas Gulp.

Instalar los plugins deseados de PostCSS

En este vídeo veremos cómo instalar los plugins de PostCSS. Cómo buscar plugins interesantes y cómo se deben instalar en nuestro sistema, para poder usarlos en el proyecto.

Veremos Pixrem, CSS Next y Autoprefixer.

Archivo gulpfile y ejecución de los procesos PostCSS

Ahora vamos a ver cómo se realiza el archivo gulpfile.js, que es el que define las tareas de Gulp. Mediante una tarea se ejecuta PostCSS y se ponen en marcha los plugins instalados en el paso anterior, transformando nuestro código y generando un código nuevo, que está optimizado y que será el que llevemos a producción.

Análisis del código generado por PostCSS

En este vídeo se muestra el antes y después de PostCSS. Analizaremos cada una de las transformaciones de código producida por los plugins, lo que nos permitirá entender mejor cómo funciona PostCSS y por qué es tan interesante para los proyectos.

Navegadores objetivo para PostCSS y otras cuestiones

Acabamos el bloque de PostCSS mostrando la manera de definir el target de browsers. Es decir, los navegadores objetivo a los que queremos dirigirnos. Eso es importante porque lo usará PostCSS para orquestar los plugins y hacer que trabajen justo lo necesario para generar código compatible con los navegadores que nosotros queremos.

Testeo en navegadores

En este vídeo se muestran prácticas habituales para conseguir testear los navegadores en browsers distintos. Obviamente, lo mejor es tener nosotros los navegadores instalados en el sistema, pero también podríamos hacer ese testeo usando diversas herramientas que se comentarán

WPO (Web Performance Optimization)

Qué es WPO, por qué es importante y qué técnicas se pueden seguir para optimizar la página para una carga más rápida. Se repasarán diversas herramientas a tener en cuenta para realizar la tarea de WPO.

Incluir la cabecera y pie desde archivos externos

Cómo realizar "includes", que nos permiten tener en archivos externos la cabecera y pie, de modo que los podamos usar desde todas las páginas que se necesiten, sin que tengamos que copiar y pegar el mismo código en cada archivo HTML.

Preguntas finales

En este vídeo se resuelven preguntas diversas realizadas durante la clase.

Valoraciones

Jhon Doe Joe

Marco Dártika

guillermo_

Santiago

Ingrid Carolina Peláez

Lázaro García Pérez

Ángela Cervilla Rivas

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 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