Vamos a definir, de una vez por todas los estilos de nuestra barra de navegación. Será una muy buena oportunidad para mejorar tus habilidades en flexbox.

Empecemos con algunos estilos sencillos. 0: 1: para cada uno de sus archivos estilos_persona.css (1 por persona, 2 en total):

• 1
  Crea un selector que apunte exclusivamente a la nav
• 2
  Usa el selector que creaste en el inciso anterior para especificar que el tamaño de texto de todo en la barra de navegación sea 1.3rem
• 3
  Localiza en tu archivo CSS un selector que apunta a todas las a que están dentro de los li que a su vez están dentro de los elementos ul que viven dentro de nav (el selector ya existe, se creó en un pae previo).
• 4
  En dicho selector especifica que esos elementos tengan un color de texto representado por el hexadecimal #fff.

0: 1: para cada uno de sus archivos estilos_persona.css (uno por persona dos en total) tendrán el reto de crear un selector con las siguientes características:

Crea un selector que apunte únicamente a todos los elementos a que se encuentran dentro de elementos li que vivan dentro de un elemento ul que exclusivamente se encuentre en nuestra nav. Pero este selector es muy especial, pues sólo queremos seleccionar los elementos cuando el mouse del usuario se encuentra sobre dicho elemento.

Usa el selector que acabas de crear para aplicar las siguientes propiedades:

• 1
  text-decoration: underline;
• 2
  color: greenyellow;

Ejecuta la vista previa de tu proyecto, ¿qué efecto tuvo esta implementación cuando pasas tu mouse sobre los elementos de tu navbar?

Modificaremos el elemento ul dentro de nuestra barra de navegación.
0: 1: para cada uno de sus archivos estilos_persona.css (1 por persona, 2 en total):

Realiza todas las modificaciones necesarias para que los elementos dentro de ul se vean como en la siguiente imagen:

Aquí tienes algunas pistas:

• 1
  ul debe desplegarse como un contenedor de flexbox .
• 2
  Los elementos de ul se alinean al centro.
• 3
  Los elementos de ul se justifican con espacio proporcional entre ellos y al rededor de ellos.
• 4
  ul tiene un borde inferior blanco de un pixel de ancho.
• 5
  Un padding inferior ayuda a darle espacio a los elementos respecto a su borde.

• solución
  CSS

Los artículos de nuestro blog también pueden verse beneficiados con una sencilla implementación de flexbox. Recuerda que cada artículo tiene tres partes; un header, un div haciendo wrapping al contenido, y un footer. Trabajaremos en el header de todos los artículos para lograr el siguiente resultado:

Alinear el encabezado de todos los artículos será sencillo si te das cuenta que en cada encabezado hay solo dos elementos directos dentro de hgroup

0: 1: Para cada uno de tus archivos estilos_persona.css :

• 1
  Crea un apuntador a todos los hgroup que vivan dentro del header de un article.
• 2
  Usa tu nuevo apuntador para hacer que esos hgroup se desplieguen como flex.
• 3
  Los elementos dentro de hgroup deben alinearse al centro.
• 4
  Aplica también la propiedad: justify-content: space-between;

¿Te das cuenta que al usar space-between hemos forzado que el primer elemento (el título) se pegue a la izquierda y el segundo elemento (la fecha) a la derecha? No olvides esta técnica, seguramente te será útil en el futuro.

Casi hemos logrado el objetivo, pero la perfección vive en el detalle. ¿Te das cuenta que el título y su ícono ilustrativo no están perfectamente alineados? Además hace falta un espacio entre ambos. En diseño, el espacio entre elementos es muy importante para mejorar la experiencia de usuario, cada vez que hablemos de aumentar el espacio entre elementos en un sitio o aplicación podríamos usar la expresión darle aire.

0: 1: arreglen los problemas de alineación en el título:

• 1
  Crea un selector que apunte a todos los elementos h2 que se encuentren dentro de hgroup que vivan dentro del header de cualquier article.
• 2
  Dichos elementos deben desplegarse como contenedores flex.
• 3
  También se alinearán al centro.

0: 1: dale aire a los elementos que componen el título:

• 1
  Crea un selector que apunte a todos los elementos img dentro de los h2 que se encuentren dentro de hgroup que vivan dentro del header de cualquier article.
• 2
  Dichos elementos tendrán un margen derecho con valor de 1rem .

Nuestro objetivo en el footer del blog es usar flexbox para lograr este resultado:

0: 1: Para lograr dicho resultado en sus archivos estilos_persona.css intenten:

• 1
  Localiza un id que se llama #footer_blog (ya existe lo creamos en PAES anteriores).
• 2
  Usa ese selector para convertir el footer en un contenedor flex con sus elementos alineados al centro y justificados con el valor space-between.
• 3
  Añade también un padding superior e inferior de 4rem y un padding izquierdo y derecho de 0. ¿Recuerdas cómo hacerlo en una sola línea de código?
• 4
  Por último especifica que el tamaño de texto en todo el footer es igual a 1.3rem

En el video «CSS avanzado» aprendimos a seleccionar el enésimo elemento hijo de otro elemento.
0: 1: Usen ese conocimiento para crear un selector que apunte al segundo elemento del id #footer_blog .

Con el selector que has creado especifica que la leyenda del footer «Blog creado en 'nombre de tu colegio'. Las opiniones contenidas en este proyecto pertenecen a los autores de cada entrada.» tenga el texto reducido a 0.9rem

• Solución
  ¿Realmente necesitas ver la solución?

  • Solución (ahora sí)
    CSS

A partir de ahora, cada entrada de microblogging debe tener un ícono ilustrativo de 60px de ancho y alto automático. El ícono es parecido al que has estado usando en los títulos de los artículos. La diferencia es que este ícono será el mismo para todas tus entradas de microblogging. Piénsalo como un avatar o un ícono que te represente. Puedes fabricarlo por tu cuenta o descargarlo de flat icon .

Cómo hemos añadido el ícono ilustrativo para todas las entradas de microblogging, la estructura quedará como sigue:

0: 1: Para todos sus archivos mi_tema.html actualicen la estructura de las entradas de microblogging que realizaron antes de este PAE.

0: 1: Para cada uno de sus archivos estilos_persona.css:

• 1
  Crearás un selector que apunte al título h2 dentro de la barra lateral aside.
• 2
  Usarás dicho selector para centrar el texto y ajustarlo de tamaño a 1.3rem.
• 3
  Crea un selector que apunte sólo a los div pares que viven dentro de aside
• 4
  Usa el selector que creaste en el inciso anterior para que el color de fondo de tus entradas de microblogging pares sea: rgb(44, 43, 43)

Imagina que el ícono ilustrativo de tus microblogs es parecido a este:
Crearás un fondo circular para tu ícono con el color de fondo blanco (o que contraste) y un padding de 0.5rem.

¿Tu ícono se ve así?

• Solución
  CSS

Usarás los conocimientos que has adquirido en el vídeo: Caso práctico: uso de flexbox para hacer que tus entradas de microblogging se vean así:

Nos encantaría guiarte como siempre, darte los pasos a ejecutar o proponerte una solución. Pero jamás aprenderás a programar si no programas por tu cuenta. Buena suerte

Esta semana harás una entrada nueva para cualquiera de tus dos temas. Será de formato libre pudiendo escoger el sub tema y cualquiera de los siguientes formatos:

• Texto con ilustración: ¿Te gusta escribir?
• Meme: ¿Eres una eminencia en memes o te gusta dibujar?
• Video corto: ¿Eres nuestra próxima estrella de tiktok?
• Video largo: ¿Necesitas más tiempo para desarrollar tus ideas?

Es importante que sea el formato que sea respetes la estructura de entrada propuesta a lo largo de las últimas semanas:

• Estructura de entrada
  HTML

No olvides repasar los requisitos para cada tipo de entrada:

• 1
  La temática de la entrada debe seguir siendo un sub tema u opinión de tu tema principal.
• 2
  Siempre debes investigar y citar tus fuentes en el footer de la entrada.
• 3
  La extensión de las entradas de texto es de 3 a 5 párrafos (Cada párrafo tiene entre 100 y 150 palabras).
• 4
  La ilustración de las entradas de texto puede ser descargada de internet.
• 5
  Si tu entrada es un meme debe ser hecho por ti , demuestra tu creatividad, no puede ser descargado de internet.
• 6
  La duración de los videos cortos es de un minuto. Debe ser original , subirse a alguna plataforma e insertarse como iframe .
• 7
  La duración de los videos largos es de 3 a 5 minutos. Debe ser original , subirse a alguna plataforma e insertarse como iframe

Esta semana te pediremos que crees algunas entradas de microblogging.

0: 1: para cada uno de sus archivos mi_tema.html (2 por persona 4 en total). Crea 5 entradas de microblogging por cada uno de tus temas. Asegúrate de cumplir las reglas para el microblogging y respetar la nueva estructura de microblogging:

• Estructura de entrada microblogging
  HTML

• 1
  La extensión máxima de cada entrada es de 140 caracteres.
• 2
  La entrada debe relacionarse con tu tema.
• 3
  Tus entradas deben estar fundamentadas en investigación, aunque no te pediremos bibliografía.
• 4
  Debes asegurarte de que tus entradas sean constructivas, antes de publicar un pensamiento pregúntate en qué nutre al mundo que lo publiques.
• 5
  De ninguna manera la entrada puede lesionar a otros.
• 6
  De ninguna manera tus entradas pueden promover el odio o la exclusión.
• 7
  Antes de publicar una entrada pregúntate si es algo que dirías con naturalidad frente a tu familia o profesores.