Curso Práctico de Maquetación Web Profesional

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

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.

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.

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.

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…

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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

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.

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

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

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.

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

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

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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