Guía 04

Guía 04

DAWM / Proyecto01

Objetivo general

Aplicar reglas CSS en la personalización de efectos visuales mediante el desarrollo de un currículum vitae digital para la presentación de información profesional de manera organizada y accesible en línea.

Actividades previas

Diseño

Actividades en clases

  1. Clone localmente tu repositorio curriculum.
  2. Siga las instrucciones de Bard, y:
    • Cree la carpeta ‘stylesheets’, y dentro la hoja de estilo externa CSS ‘style.css’.
    • Agregue la referencia con la ruta a la hoja de estilo externa en el archivo index.html.

Servidor HTTP

  1. Siguiendo las instrucciones del tutorial, levante un servidor HTTP con Python desde la ruta de la aplicación.
  2. En el navegador, acceda a la URL http:\\localhost:8079 a la que responde el servidor HTTP.
  3. (STOP 1) Actualice el navegador y compruebe los cambios.

Reglas CSS - I

  1. Tome como referencia la guía de Gemini para escribir las reglas CSS.

  2. Coloque las siguientes reglas CSS (selector CSS,propiedad CSS y valor CSS) en la hoja de estilo externa:

    Selector CSS Propiedad y Valor CSS MDN
    Universal * font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; Ir
    font-weight: 200; Ir
    Por elemento h1 text-align: center; Ir
    font-weight: bold; Ir
    Haga click aquí para ver la solución
     
    

     * {

       /* Familia de fuentes */
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

       /* Grosor de la fuente 200 */
       font-weight: 200; 
     }

     h1 {

       /* Alineación del texto */
       text-align: center;

       /* Grosor de la fuente negrita */ 
       font-weight: bold; 
     }
  3. (STOP 2) Actualice el navegador y compruebe los cambios.
  4. Versiona local y remotamente el repositorio curriculum.

Reglas CSS - II

  1. Edite el archivo index.html:

    • Modifique la etiqueta <img> con el atributo id y el valor photo.
     <img id="photo" src="https://placehold.co/600x400" alt="photo">
    • Modifique todas las etiquetas <h2> con el atributo class y el valor subtitle.
     ...
 <h2 class="subtitle">Educación</h2>
 ...
 <h2 class="subtitle">Experiencia Laboral</h2>
 ...

  2. Coloque las siguientes reglas CSS en la hoja de estilo externa:

    Selector CSS Efecto CSS MDN
    Por identificador #foto Ancho del elemento 200px Ir
    Alto del elemento automático Ir
    Por clase .subtitle Color del texto color: rgb(107 114 128 / 0.89) Ir
    Transformación del texto a mayúsculas Ir
    Haga click aquí para ver la solución
     
    

     #photo {

       /* Ancho del elemento */
       width: 200px; 

       /* Alto del elemento */
       height: auto; 
     }

     .subtitle {

       /* Color del texto en rgba */
       color: rgb(107 114 128 / 0.89);

       /* Transformación del texto a mayúsculas */ 
       text-transform: uppercase; 
     }
  3. (STOP 3) Actualice el navegador y compruebe los cambios.
  4. Versiona local y remotamente el repositorio curriculum.

Modelo de caja

  1. Utilice el selector por elemento para acceder a las etiquetas <section> y aplique las reglas CSS para el modelo de caja: margin, border y padding, por ejemplo:

     section {

   /* margen (espacio externo) superior, derecho, abajo e izquierda */
   margin: 4px 2px 8px 2px; 

   /* borde de grosor 0.2 en puntos, estilo sólido y color hexadecimal #cedddd  */
   border: 0.2pt solid #cedddd; 

   /* relleno (espacio interno) de 
   1.5% en la parte superior e inferior y 
   0.8% a los lados derecho e izquierdo. */

   padding: 1.5% 0.8%; 

   /* reemplazan el 0.8% inicial en el relleno izquierdo y derecho, 
   dándoles un valor específico de 1.2% para esos lados. */

   padding-left: 1.2%; 
   padding-right: 1.2%; 
 }
  2. (STOP 4) Actualice el navegador y compruebe los cambios.
  3. Versiona local y remotamente el repositorio curriculum.

Efectos CSS

  1. Utilice el servicio de Border Radius para generar los valores de la propiedad border-radius, p.e.:

     section {
   ...


   /* borde redondeado con un radio de 5 píxeles */

   /* en navegadores basados en WebKit, 
   como versiones antiguas de Safari y Chrome. */
   -webkit-border-radius: 5px; 

   /* en navegadores antiguos de Mozilla, 
   como Firefox.  */
   -moz-border-radius: 5px;    

   /* en navegadores modernos. */
   border-radius: 5px;         
 }

  2. Utilice el servicio de CSSmatic para generar los valores de la propiedad box-shadow, p.e.:

     section {
   ...
      

   /* sombra a un elemento */

   -webkit-box-shadow: 3px 3px 1px 0px rgba(235, 234, 234, 0.60);
   -moz-box-shadow: 3px 3px 1px 0px rgba(235, 234, 234, 0.60);
   box-shadow: 3px 3px 1px 0px rgba(235, 234, 234, 0.60);
 }
  3. (STOP 5) Actualice el navegador y compruebe los cambios.
  4. Versiona local y remotamente el repositorio curriculum.

Etiquetas contenedoras

  1. En el navegador, identifique los elementos desalineados:

    elementos_desalineados

  2. Edite el archivo index.html con las etiqueta contenedoras:

    • <div> para agrupar varios elementos (como etiquetas y el texto relacionado), y
    • <span> para contener solo texto.
    Etiquetas contenedoras
    Antes Después
    <input type="checkbox" name="habilidades" value="HTML"> HTML <div> <input type="checkbox" name="habilidades" value="HTML"> <span>HTML</span> </div>
  3. (STOP 6) Actualice el navegador y compruebe los cambios.
  4. Versiona local y remotamente el repositorio curriculum.

CSS Avanzado

  1. Utilice ChatGPT o Gemini para generar las siguientes reglas CSS:

    Como desarrollador de aplicaciones web, genera la regla CSS para [Efecto CSS] a [Selector de etiqueta(s)].
    [Efecto CSS] [Selector de etiqueta(s)]
    aplicar la familia de fuentes https://fonts.google.com/specimen/Poppins todas las etiquetas
    eliminar el subrayado todas las etiquetas <a>
    al pasar el mouse por encima subrayar todos los elementos <a> dentro del elemento <nav>
    eliminar las viñetas todas las etiquetas <li>
    centrar la etiqueta <ul> que se encuentra dentro <footer>
  2. (STOP 7) Actualice el navegador y compruebe los cambios.
  3. Versiona local y remotamente el repositorio curriculum.

Documentación

Fundamental

Términos

servidor HTTP, ruta de la aplicación, CSS, reglas CSS, selectores CSS, propiedades CSS, valores CSS, modelo de caja

Referencias