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:

1. Usar conceptos avanzados de CSS

2. Profundizar en algunos aspectos del diseño para adaptarte a diferentes dispositivos

3. Usar diferentes estrategias de maquetación

Está organizado en 8 talleres de unas 3 sesiones de clase. En total unas 24 sesiones de clase más tu trabajo en casa.

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

1. Diferentes formas de seleccionar los elementos:

   1. De tipo (Type_selectors): selecciona el elemento

   2. De clase (Class_selectors): selecciona la clase (atributo class) (.class)

   3. De identificador (ID_selectors): selecciona un elemento concreto (atributo id) (#id)

   4. Universal (Universal_selectors: selecciona cualquiera (*)

   5. De atributo (Attribute_selectors): selecciona los elementos con un atributo concreto ([attr = valor])

2. Diferentes formas de combinar los elementos seleccionados:

   1. Next-sibling_combinator: Selecciona hermano adyacente (+)

   2. Subsequent-sibling_combinator: selecciona cualquier hermano (~), no solo el consecutivo

   3. Descendant_combinator: selecciona los descendientes ( )

   4. Child_combinator: selecciona el descendiente directo (>)

3. Pseudo-classes. Sirven para especificar el estado de ese elemento (con dos puntos :). Por ejemplo:

   1. :valid. Cuando el valor de un campo input es válido

   2. :required. Cuando el campo es obligatorio

   3. :first-child. El primer hijo del elemento

   4. :nth-last-child. Seleccionas los hijos del elemento, empezando por el final (de varias formas)

   5. :hover. Cuando se pasa el cursor por encima del elemento

4. Pseudo-elements . Sirven para especificar el estilo de una parte del elemento (con dos puntos dobles ::). Por ejemplo:

   1. ::after . Crea un «seudo» elemento que es el último hijo del elemento sobre el que se define

   2. ::first-letter. Sobre la primera letra del bloque de texto

   3. ::first-line. Sobre la primera línea del bloque de texto

   4. ::marker. Sobre el marcador de una línea de texto (viñeta, numeral, etc)

   5. ::selection. Sobre el texto que ha sido seleccionado por el usuario

5. 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

1. Modifica el color del texto cuando el ratón pase por encima de ese texto concreto

2. Modifica el color del texto cuando el ratón pase por encima de un texto que no sea ese

3. Cambia el borde de un campo input cuando el valor introducido sea válido (vía CSS, no con JS)

4. Pon el primer carácter de un párrafo con id «primer_caracter_distinto» a un tamaño mayor y en otro color

5. Haz lo mismo con la primera línea, pero de todos los párrafos de la clase «primera_linea_distinta»

6. Modifica la altura de la línea, y la separación entre líneas de las listas ordenadas que tengas en tu documento

7. Pon en negrita y subrayado el texto que estás seleccionando

8. Cambia el color del icono de la viñeta de una lista desordenada, a azul clarito

9. Cambia el color del texto de las líneas impares de una lista de viñetas, que tenga el id «resaltar_impares»

10. Añade el texto «- FIN» al final de todos los párrafos de tu documento.

4.2. Reglas @ (At-rule)

1. Dan instrucciones de comportamiento a CSS

2. La sintaxis es: @identifier (CSS RULE); .

3. Cada identificador tiene diferentes propiedades (reglas) posibles. Identifica => Asigna estilos

4. Hay varias reglas at, algunas interesantes:

   1. @import . Para importar estilos de otras hojas de estilos, directamente o usando diferentes condiciones

   2. @font-face. Para cargar una tipografía específica (local o remota)

   3. @media. Para cargar estilos en función de una consulta del dispositivo (CSS_media_queries)

      1. Según el tipo (media types)

      2. Según la característica (media feature)

   4. @supports. Similar a @media pero centrándose en qué

      declaración css (propiedad: valor) está soportada)

   5. @counter-style. Permite definir contadores personalizados.

T04-A02. Ejercicios CSS con reglas at

1. Importa la fuente Sono (de Google Fonts por ejemplo) y úsala en algún párrafo de tu documento

2. Importa una hoja de estilos de otro sitio web, por ejemplo esta de MDN Examples

3. Modifica el comportamiento de un párrafo. Por ejemplo

   1. haz la letra más grande

   2. cambia de color el texto

   3. … pero sólo cuando se vea desde un dispositivo que tenga una anchura de pantalla menor a 460 px

4.3. Estilos de Texto

1. Fundamentos de texto y fuentes tipográficas

   1. Un conjunto de elementos en linea (completo en en bloques span) agrupados en un bloque párrafo (div)

   2. Decidimos cómo es la letra: tipografía, familia, estilo, etc

   3. Decidimos la disposición del texto: altura de línea, separación, y algunos caracteres especiales.

2. Algunas características sobre las que jugar:

   1. Color. Ojo al contraste

   2. Tamaño. Importante para leer o jugar con el tamaño para resaltar palabras (con medida relativas)

   3. Resaltar. Ideal uso de negritas o resaltado contextual.

   4. Decoración: con cuidado

   5. Transformación automática: por ejemplo títulos en letra capitalizada (capitalize)

   6. Alineación del texto, interlineado y espacio entre letras

   7. Y hay muchas más propiedades. Ojo a la accesibilidad.

3. Los seudo elementos y seudo clases permiten diseñar comportamientos personalizados

4. Fuentes para la web:

   1. No todas están disponibles en todos los dispositivos (cssfontstack ). Ojo al uso de fuentes no estándar (sólo sabiendo qué se hace).

   2. Entender el concepto serifa : Pantalla (sans serif) vs Impreso (serif)

   3. 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:

1. Definición jerarquizada: para no repetir propiedades

2. Tamaños relativos en función de la etiqueta y su importancia en la estructura del documento

3. Uso de clases o identificadores para los párrafos de texto de especial importancia

4. Modificacion de la etiqueta span genérica para resaltar documento en bloques de texto en línea

5. Modificación específica del resaltado de texto «strong» (o b).

4.4. Estilos de listas

1. Muy útiles como listas de elementos: bloques de texto iguales (li) dentro de un bloque superior (ol o ul)

2. Tanto el bloque externo como el interno aceptan las propiedades del modelo de caja

3. Se pueden usar las propiedades habituales de listas list-style-type, list-style-position, list-style-image

4. Puedes controlar la numeración de una lista:

   1. Con la regla @counter-style

   2. Modificando atributos ol : start, value, reversed, type, …

T04-A04. Ejercicios

1. 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).

2. 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)

3. 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

1. CSS_flow_layout :

   1. block. Elemento div

   2. inline. Elemento span

   3. none: No muestra el elemento (pero no lo elimina)

   4. Se puede modificar en el elemento con la propiedad display :

2. Elementos Flotantes (float):

3. Posicionamiento de bloques (position):

T04-A05. Ejercicios Básicos de Maquetación

1. Añade un botón que te permita ocultar (y volver a mostrar) un bloque div concreto

2. Añade una caja flotante que incluya una imagen dentro del texto

3. Añade una caja fija, por ejemplo un menú de navegación horizontal, que se muestre siempre aunque baje por el contenido

4. 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

5. 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

1. Estrategia Flexbox

   1. Recuerda que es una maquetación en una dimensión (row o column)

   2. Se define un contenedor (flex-container) que tiene diferentes elementos (flex-items)

   3. Se define un eje principal (main-axis) y uno perpendicular (cross-axis), dependiendo de la propiedad flex-direction

   4. Jugando con las propiedades flex-wrap (no ajustar), flex-grow, flex-shrink, flex-basis, puedo controlar la visualización en el eje principal

2. Estrategia Grid

   1. Es una maquetación en dos dimensiones (cuadrícula)

   2. Se define un contenedor (grid-container) que tiene diferentes elementos (grid-items)

   3. Genero una plantilla (grid-template-columns / grid-template-rows) de diferentes elementos

   4. Y puedo también personalizar el comportamiento de cada elemento de la cuadrícula

3. Y un última estrategia, muy sencilla, es la maquetación multicolumna:

   1. Número de columnas: column-count

   2. 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)

1. Es una técnica para adaptar el contenido a diferentes dispositivos: Diseño Web Adaptable

   1. Ethan Marcotte (2010)

   2. Concepto One Web / Web for All (la web única)

   3. No puedes saber qué dispositivo visita tu web ( Screen Resolution Stats )

   4. El diseño se adapta a medida que se modifica la pantalla (se redimensiona)

   5. Se sirve el mismo HTML y CSS a todos los dispositivos

2. Concepto viewport: Viewport_meta_tag

3. Estrategias:

   1. Uso de medidas relativas y proporciones

   2. Uso de puntos (breakpoints) en función de algunas condiciones (ancho de pantalla, por ejemplo)

   3. Uso de técnicas de maquetación flexibles (flexbox, grid y multicol)

   4. Uso de consultas de dispositivo @media y @supports

   5. Imágenes que se adaptan al dispositivo

   6. Texto que se adapta al dispositivo

4. Ojo a no descuidar la experiencia de usuario ( RWD and User Experience ):

   1. Hay que probarlo con usuarios para ver si funciona

   2. Hay que enfocarse en el contenido (que el usuario quiere ver)

   3. En algún caso hay que pasar de diseño adaptable a adaptar el diseño (diferentes diseños para diferentes dispositivos)

5. Uso de Developer Tools para ver el diseño flexible

6. 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:

1. Una pantalla pequeña (p.ej Pixel 5)

2. Un pantalla mediana (p.ej iPad Air)

3. Una pantalla grande (p.ej NestHub Max)

4.8. ¿Cómo se maqueta una página Web?

1. El curso de Google Actívate ¿ Cómo se maqueta una página web ? (de Sergio Luján )…

2. …. resume (casi) todo lo visto hasta ahora y …

3. … explica muy bien el concepto de maquetación y su aplicación en la web

   1. Nivel Macro: genérico

   2. Nivel Micro: sub bloques del documento

   3. Puede llegar al mínimo nivel que queramos (un párrafo)

4. Evolución histórica del diseño, explicando cada uno de los detalles

   1. Sin estilo

   2. Diseño Fijo

   3. Diseño Elástico

   4. Diseño Líquido

   5. 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.

---