PAE 6
Intro a CSS
Temas:
CSS Palabra clave id class Anatomía de las propiedades
Objetivo:

En este PAE practicarás la aplicación de estilos usando CSS en un archivo independiente mediante apuntadores de palabra clave, clases e id's.

There is no exquisite beauty… without some strangeness in the proportion.

--Edgar Allan Poe

0
Checkpoint

Has llegado a un punto en el proyecto «El blog del mundo» donde conviene asegurarnos de que tu código está bien estructurado. Aprovecha esta oportunidad para verificar línea a línea a tu código y compáralo con el código muestra. Esto te ahorrará muchos problemas al aplicar tus id's y clases.

Si te falta alguna carpeta o algún archivo está fuera de lugar es momento de darle orden al sistema de archivos. Comunícate con las personas de tu equipo cuando vayas a hacer algún cambio. Es importante coordinarse. Recuerda que las carpetas que están vacías no se guardan en el servidor del repo, tal vez tengas que agregar la carpeta «styles» nuevamente.

file-ing

Primero debemos asegurarnos de que nuestros archivos están en orden, ¿tu proyecto tiene esta estructura?

imagen fileing

Archivos

Revisaremos los siguientes archivos, guíate del código muestra para asegurarte de que tu trabajo es correcto.

1
Añade CSS
Prepara tus archivos.

Empezaremos agregando algunos archivos para escribir CSS.

0: En la carpeta root > assets > styles crea un archivo llamado estilos_mi_nombre.css

1: En la carpeta root > assets > styles crea un archivo llamado estilos_mi_nombre.css

fileing image
Conecta tus archivos.

Un sólo archivo estilos_mi_nombre.css servirá para todos tus blogs. Una ventaja de escribir CSS en archivos separados es que las referencias que escribamos en él podrán ser reutilizadas.

0: 1: Para cada uno de sus archivos mi_tema.html (2 por persona 4 en total) localicen la etiqueta head y dentro usen la etiqueta link para conectar sus respectivos archivos CSS.

HTML
No olvides los atributos de la etiqueta link.
Asegúrate de escribir correctamente el nombre de tu archivo y la ruta al mismo.

Tus primeros estilos.

0: 1: para cada uno de sus archivos estilos_mi_nombre.css (uno por persona, dos en total) sigue las siguientes instrucciones:

  • 1
    Añade una referencia por palabra clave al body de la página.
  • 2
    Añade una referencia por palabra clave a todos los article de tu página.
  • 3
    body tendrá un color de fondo negro, y un color de letra blanco. (El color blanco exprésalo en hexadecimal).
  • 4
    Todos los article tendrán un color de fondo expresado en RGB: rgb(44, 43, 43)

Antes de continuar asegúrate de que tus estilos están funcionando. De lo contrario asegúrate de que los archivos estén conectados.

2
id's y clases
Añade una clase

Crearemos una clase para resaltar el enlace a la página principal en la barra de navegación nav.

0: 1: para cada uno de sus archivos mi_tema.html (dos por persona, 4 en total) busquen la etiqueta nav > ul > li > a que conduce a index.html y declara una clase llamada «resaltado».

Recuerden que declaramos clases con el atributo «class» en la etiqueta que deseamos referenciar o apuntar.

HTML

No hemos terminado de declarar nuestra clase hasta que escribimos su correspondiente notación en el archivo CSS.

0: 1: Para cada uno de sus archivos estilos_mi_nombre.css (uno por persona dos en total) declara la clase «resaltado» y haz que el color de texto de las etiquetas que posean esa clase sea amarillo.

CSS
Añade un id

Crearemos un id para dar estilo al título principal de nuestro blog localizado en la etiqueta header.

0: 1: para cada uno de sus archivos mi_tema.html (dos por persona, 4 en total) busquen la etiqueta section > header que alberga el título de nuestro blog y declara un id llamado «titulo_del_blog».

No hemos terminado de declarar nuestro id hasta que escribimos su correspondiente notación en el archivo CSS.

0: 1: Para cada uno de sus archivos estilos_mi_nombre.css (uno por persona dos en total) declara el id «titulo_del_blog». Asegúrate de aplicar las siguientes propiedades:

  • 1
    text-align: center;
  • 2
    font-size: 3rem;

¿Se dieron cuenta qué efectos tuvieron estas propiedades? ¿Cómo se ve ahora su título?

3
Entrada: graba un vídeo

En las pasadas semanas has investigado de manera formal sobre tu tema. Creemos que ya tienes los suficientes conocimientos para hablar en internet al respecto y queremos escucharte.

Para grabar un vídeo de 2 a 5 minutos de duración te recomendamos la siguiente dinámica:

  • 1
    Elige un subtema que te apasione, genere interés o polémica y domines bien.
  • 2
    Usa la metodología que te hemos propuesto en semanas anteriores para conducir una investigación . No olvides recabar datos objetivos y sólidos para sostener tu idea principal.
  • 3
    Determina cuál es el objetivo de tu video. ¿Cuál es la idea principal, las ideas secundarias y los datos objetivos que usarás para desarrollarlas.
  • 4
    Escribe un pequeño guión que tenga introducción , desarrollo y conclusión .
  • 5
    Practica la lectura de tu guión hasta que puedas desarrollar las ideas sin necesidad de leerlo.
  • 6
    Usa alguna cámara que tengas a la mano para grabar tu vídeo.
  • 7
    Crédito extra: ¿Sabes usar algún programa de edición? No sólo puede hacerte la vida más fácil al cortar y unir diferentes pedazos de grabación para hacerlo más profesional sino podrás obtener más puntos si en tu entrega demuestras tus conocimientos en edición y producción.

0: 1: Para cualquiera de sus dos temas (sólo uno por persona, dos en total) grabarás tu video, lo subirás a alguna plataforma de streaming , crearás una nueva entrada respetando la última estructura de entrada y añadirás tu video usando una etiqueta iframe como se explicó en la semana 4 .

Asegúrate además de atender los siguientes requisitos y consejos:

  • 1
    Puedes usar cualquier plataforma para subir tu video, recomendamos que lo hagas en youtube y lo definas como «no listado»
  • 2
    Consulta la documentación de google si no sabes cómo subir un vídeo de youtube, te la dejamos aquí
  • 3
    Si has elegido otra plataforma debes averiguar como añadirla a tu blog usando una etiqueta iframe o algún otro método.
  • 4
    Si tus papás no están de acuerdo en que aparezcas en un video o no quieres aparecer por cualquier otra razón puedes usar sólo tu voz.
  • 5
    Nunca uses el uniforme de tu colegio al grabar el video ni des datos personales, de preferencia usa de fondo una pared lisa.
  • 6
    Platica con tu profesor tus inquietudes, si tienes dudas pregunta. Estamos para ayudarte.
4
Entrega tu trabajo
Compartir en git

Recuerda siempre hacer pull antes de empezar a trabajar y add, commit y push a tu repositorio cuando terminas de trabajar.

Nunca permitas que en tu equipo se rompa la comunicación, el interés y la corresponsabilidad en el proyecto. Es muy importante que el equipo se mantenga unido y funcional. La dinámica de git sólo funciona si uno sabe lo que el otro está haciendo.

Checklist

Para tu tranquilidad preparamos una lista de tareas con lo que se evaluará en este PAE.

  • 1
    Se añadieron dos archivos CSS al proyecto.
  • 2
    Dichos archivos se conectaron con los respectivos archivos mi_tema.html
  • 3
    Usando CSS se modificó el body y los article de todos los archivos mi_tema.html
  • 4
    Se creó y usó una clase para controlar elementos resaltados en la nav
  • 5
    Se creó y usó un id para controlar los estilos del título del blog.
  • 6
    Se crearon 2 vídeos (uno por persona) y se añadieron a una nueva entrada en sus respectivos temas.
Previsualización

A partir de ahora creamos esta previsualización de cómo debería verse tu proyecto cuando termines este PAE.

¿Tu blog se ve así?

Verifica que tu trabajo se vea así antes de hacer push.