4. Maquetación Web¶
En este tema se profundiza en el conocimiento de CSS para resolver algunos aspectos de maquetación web. En concreto, aprenderás a:
Usar conceptos avanzados de CSS
Profundizar en algunos aspectos del diseño para adaptarte a diferentes dispositivos
Usar diferentes estrategias de maquetación
Esfuerzo Necesario
El curso está organizado en 8 sesiones de clase. Cada clase (sesión) implica una dedicación de entre 2 y 4 horas.
La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.
4.1. Profundizando en CSS¶
Diferentes formas de seleccionar los elementos:
De tipo (Type_selectors): selecciona el elemento
De clase (Class_selectors): selecciona la clase (atributo class) (.class)
De identificador (ID_selectors): selecciona un elemento concreto (atributo id) (#id)
Universal (Universal_selectors: selecciona cualquiera (*)
De atributo (Attribute_selectors): selecciona los elementos con un atributo concreto ([attr = valor])
Diferentes formas de combinar los elementos seleccionados:
Next-sibling_combinator: Selecciona hermano adyacente (+)
Subsequent-sibling_combinator: selecciona cualquier hermano (~), no solo el consecutivo
Descendant_combinator: selecciona los descendientes ( )
Child_combinator: selecciona el descendiente directo (>)
Pseudo-classes. Sirven para especificar el estado de ese elemento (con dos puntos :). Por ejemplo:
:valid. Cuando el valor de un campo input es válido
:required. Cuando el campo es obligatorio
:first-child. El primer hijo del elemento
:nth-last-child. Seleccionas los hijos del elemento, empezando por el final (de varias formas)
:hover. Cuando se pasa el cursor por encima del elemento
Pseudo-elements . Sirven para especificar el estilo de una parte del elemento (con dos puntos dobles ::). Por ejemplo:
::after . Crea un «seudo» elemento que es el último hijo del elemento sobre el que se define
::first-letter. Sobre la primera letra del bloque de texto
::first-line. Sobre la primera línea del bloque de texto
::marker. Sobre el marcador de una línea de texto (viñeta, numeral, etc)
::selection. Sobre el texto que ha sido seleccionado por el usuario
Propiedad content: para sustituir el contenido de un elemento por un valor (texto, imagen, etc)
T04-A01. Ejercicios CSS con seudo elementos y seudo clases
Modifica el color del texto cuando el ratón pase por encima de ese texto concreto
Modifica el color del texto cuando el ratón pase por encima de un texto que no sea ese
Cambia el borde de un campo input cuando el valor introducido sea válido (vía CSS, no con JS)
Pon el primer carácter de un párrafo con id «primer_caracter_distinto» a un tamaño mayor y en otro color
Haz lo mismo con la primera línea, pero de todos los párrafos de la clase «primera_linea_distinta»
Modifica la altura de la línea, y la separación entre líneas de las listas ordenadas que tengas en tu documento
Pon en negrita y subrayado el texto que estás seleccionando
Cambia el color del icono de la viñeta de una lista desordenada, a azul clarito
Cambia el color del texto de las líneas impares de una lista de viñetas, que tenga el id «resaltar_impares»
Añade el texto «- FIN» al final de todos los párrafos de tu documento.
4.2. Reglas @ (At-rule)¶
Dan instrucciones de comportamiento a CSS
La sintaxis es: @identifier (CSS RULE); .
Cada identificador tiene diferentes propiedades (reglas) posibles. Identifica => Asigna estilos
Hay varias reglas at, algunas interesantes:
@import . Para importar estilos de otras hojas de estilos, directamente o usando diferentes condiciones
@font-face. Para cargar una tipografía específica (local o remota)
@media. Para cargar estilos en función de una consulta del dispositivo (CSS_media_queries)
Según el tipo (media types)
Según la característica (media feature)
@counter-style. Permite definir contadores personalizados.
T04-A02. Ejercicios CSS con reglas at
Importa la fuente Sono (de Google Fonts por ejemplo) y úsala en algún párrafo de tu documento
Importa una hoja de estilos de otro sitio web, por ejemplo esta de MDN Examples
Modifica el comportamiento de un párrafo. Por ejemplo
haz la letra más grande
cambia de color el texto
… pero sólo cuando se vea desde un dispositivo que tenga una anchura de pantalla menor a 460 px
4.3. Estilos de Texto¶
Fundamentos de texto y fuentes tipográficas
Un conjunto de elementos en linea (completo en en bloques span) agrupados en un bloque párrafo (div)
Decidimos cómo es la letra: tipografía, familia, estilo, etc
Decidimos la disposición del texto: altura de línea, separación, y algunos caracteres especiales.
Algunas características sobre las que jugar:
Color. Ojo al contraste
Tamaño. Importante para leer o jugar con el tamaño para resaltar palabras (con medida relativas)
Resaltar. Ideal uso de negritas o resaltado contextual.
Decoración: con cuidado
Transformación automática: por ejemplo títulos en letra capitalizada (capitalize)
Alineación del texto, interlineado y espacio entre letras
Y hay muchas más propiedades. Ojo a la accesibilidad.
Los seudo elementos y seudo clases permiten diseñar comportamientos personalizados
Fuentes para la web:
No todas están disponibles en todos los dispositivos (cssfontstack ). Ojo al uso de fuentes no estándar (sólo sabiendo qué se hace).
Entender el concepto serifa : Pantalla (sans serif) vs Impreso (serif)
Uso de fuentes tipográficas externas
T04-A03. Actualizar los estilos de texto en tu hoja de estilos
Diseña una hoja de estilos para tu proyecto web, definiendo el comportamiento del texto. Teniendo en cuenta los siguientes aspectos:
Definición jerarquizada: para no repetir propiedades
Tamaños relativos en función de la etiqueta y su importancia en la estructura del documento
Uso de clases o identificadores para los párrafos de texto de especial importancia
Modificacion de la etiqueta span genérica para resaltar documento en bloques de texto en línea
Modificación específica del resaltado de texto «strong» (o b).
4.4. Estilos de listas¶
Muy útiles como listas de elementos: bloques de texto iguales (li) dentro de un bloque superior (ol o ul)
Tanto el bloque externo como el interno aceptan las propiedades del modelo de caja
Se pueden usar las propiedades habituales de listas list-style-type, list-style-position, list-style-image
Puedes controlar la numeración de una lista:
Con la regla @counter-style
Modificando atributos ol : start, value, reversed, type, …
T04-A04. Ejercicios
Crea una lista numerada de 10 elementos. La lista estará dentro de una caja con borde en rojo y el color de cada elemento se va a ir intercambiando (de rojo a azul).
Crea un menú de navegación horizontal (máximo 5 elementos) usando una lista ordenada de elementos. El típico menú superior con pestañas (por ejemplo)
Crea un menú de navegación vertical para navegar por una serie de categorías (hasta segundo nivel solamente). El típico menú a la izquierda que al pasar el ratón sobre el elemento de nivel uno, me muestra las «subcategorías» de nivel dos pertenecientes a esa categoría
4.5. Maquetación CSS¶
-
block. Elemento div
inline. Elemento span
none: No muestra el elemento (pero no lo elimina)
Se puede modificar en el elemento con la propiedad display :
Elementos Flotantes (float):
Posicionamiento de bloques (position):
T04-A05. Ejercicios Básicos de Maquetación
Añade un botón que te permita ocultar (y volver a mostrar) un bloque div concreto
Añade una caja flotante que incluya una imagen dentro del texto
Añade una caja fija, por ejemplo un menú de navegación horizontal, que se muestre siempre aunque baje por el contenido
Añade tres cajas con texto, y posiciónalas de tal manera que estén las tres una al lado de la otra (en horizontal). Cuando la pantalla se estreche, se moverán automáticamente para abajo
Revisa la maquetación básica de tu proyecto web, usando posicinamiento y cajas flotantes (si no lo has hecho previamente).
4.6. Tres estrategias de maquetación¶
-
Recuerda que es una maquetación en una dimensión (row o column)
Se define un contenedor (flex-container) que tiene diferentes elementos (flex-items)
Se define un eje principal (main-axis) y uno perpendicular (cross-axis), dependiendo de la propiedad flex-direction
Jugando con las propiedades flex-wrap (no ajustar), flex-grow, flex-shrink, flex-basis, puedo controlar la visualización en el eje principal
-
Es una maquetación en dos dimensiones (cuadrícula)
Se define un contenedor (grid-container) que tiene diferentes elementos (grid-items)
Genero una plantilla (grid-template-columns / grid-template-rows) de diferentes elementos
Y puedo también personalizar el comportamiento de cada elemento de la cuadrícula
Y un última estrategia, muy sencilla, es la maquetación multicolumna:
Número de columnas: column-count
Ancho de columna: column-width
T04-A06. Actualiza la Maquetación de tu proyecto web
Actualiza la maquetación de tu proyecto web, de semanas anteriores, usando una de las tres estrategias descritas.
4.7. Responsive Design Web (RDW)¶
Es una técnica para adaptar el contenido a diferentes dispositivos: Diseño Web Adaptable
Ethan Marcotte (2010)
Concepto One Web / Web for All (la web única)
No puedes saber qué dispositivo visita tu web ( Screen Resolution Stats )
El diseño se adapta a medida que se modifica la pantalla (se redimensiona)
Se sirve el mismo HTML y CSS a todos los dispositivos
Concepto viewport: Viewport_meta_tag
Estrategias:
Uso de medidas relativas y proporciones
Uso de puntos (breakpoints) en función de algunas condiciones (ancho de pantalla, por ejemplo)
Uso de técnicas de maquetación flexibles (flexbox, grid y multicol)
Imágenes que se adaptan al dispositivo
Texto que se adapta al dispositivo
Ojo a no descuidar la experiencia de usuario ( RWD and User Experience ):
Hay que probarlo con usuarios para ver si funciona
Hay que enfocarse en el contenido (que el usuario quiere ver)
En algún caso hay que pasar de diseño adaptable a adaptar el diseño (diferentes diseños para diferentes dispositivos)
Uso de Developer Tools para ver el diseño flexible
Algunos ejemplos de código
T04-A07. Comprueba el diseño adaptable de tu sitio web
Usa las herramientas de desarrollo para comprobar que tu sitio web se adapta a diferentes tamaños de pantalla. Debe funcionar bien en:
Una pantalla pequeña (p.ej Pixel 5)
Un pantalla mediana (p.ej iPad Air)
Una pantalla grande (p.ej NestHub Max)
4.8. ¿Cómo se maqueta una página Web?¶
El curso de Google Actívate ¿ Cómo se maqueta una página web ? (de Sergio Luján )…
…. resume (casi) todo lo visto hasta ahora y …
… explica muy bien el concepto de maquetación y su aplicación en la web
Nivel Macro: genérico
Nivel Micro: sub bloques del documento
Puede llegar al mínimo nivel que queramos (un párrafo)
Evolución histórica del diseño, explicando cada uno de los detalles
Sin estilo
Diseño Fijo
Diseño Elástico
Diseño Líquido
Diseño Adaptable
T04-A08. Obtén el certificado del curso.
Obtén el certificado del curso (debe llevarte menos de 3h). Es antiguo, pero muy vigente y muy bien explicado.