CSS aplicado: Maquetado y estilos para blogs personales

Arquitectura de elementos de una página web
Cuando se empieza a maquetar o diseñar una página web, hay que tomar en cuenta un diseño preliminar. Dicho diseño deberá ser analizado para determinar sus compsiciones.
En el desarrollo moderno web, tenemos que considerar el desarrollo responsivo o, inclusive, PWA. Determinando, en la mayoría de los casos, colores, disposiciones, etc.
El profesor utiliza, section y div para agrupar elementos. Sin embargo, considero que no se debe tomar tan a la ligera ese tipo de notaciones ya que son diferentes, más en el uso estricto del texto.
Section, se utiliza para agrupar elementos con algún significado y el Div para aquellos sin uno o como comodín.

Este profesor debería dictar el curso de “fundamentos de javascript” y “javascript profesional” también explica muy bien y se le da de forma natural, no se le nota presionado

Recuerden que la semántica al momento de crear nuestro sitio web es súper importante más adelante con fines de SEO.

Es todo tan básico, pero degranda lo hace ver tan interesante. Gran maestro 👨🏻‍🏫

Etiquetas semánticas HTML
Semántica se refiere a todo aquello que tiene que ver con el significado de una palabra u expresión. En HTML, existen etiquetas con significado semántico, etiquetas que por si mismas brindan un poco de información sobre que tipo de contenido hay dentro de ellas.
|
El correcto etiquetado del contenido, con los tags que brindan una descripción de lo que hay entre la etiqueta de apertura y la etiqueta de cierre, permite dar información rápida sobre el contenido de cada etiqueta semántica, mediante el nombre de la propia etiqueta.
|
¿Porqué es importante el buen uso de las etiquetas semánticas dentro de HTML?
🔶Permite una mejor legibilidad del contenido de un documento HTML, tanto para el desarrollador, como para un indexador de contenido.
🔶Al mejorar la legibilidad para los motores de búsqueda mejorará su posicionamiento.
🔶Permite el desarrollo de contenido escalable.
🔶Contenido ordenado y estructurado.
|
¿Cómo hacer uso correcto de la semántica HTML?
Selecciona la etiqueta que describa el significado del contenido que deseas marcar, gracias a que existe una gran variedad de etiquetas para poder usar, esto no será muy complicado.
|
🔴Etiquetas no semánticas <div> y <span> No describen nada sobre su contenido.

🟢Etiquetas semánticas <table> y <p> Describen claramente su contenido.
|
Algunas etiquetas semánticas: **
🔹p:** Define un parrafo.
🔹form: Define un formulario.
🔹table: Define una tabla.
🔹style: Define estilos para el documento.
🔹header: Define la típica sección de encabezado que normalmente contiene el logo y el menu de navegación .
🔹nav: Elemento que contiene los lincks de navegación.
🔹section: Define una sección en concreto del documento.
🔹footer: Define el píe de página de un documento o seccón.
🔹main: Define el contenido principal de un documento.
🔹aside: Define contenido relacionado con el contenido principal, pero que no forma parte de manera relevante para él.

Abrir nuestro archivo en el navegador de la manera que lo hizo el profe es instalando la extensión Live Server en Visual Studio Code.

Les recomiendo esta herramienta (análisis del diseño).
https://zeplin.io/
Ya no es necesaria para los que, usan programas como: “Adobe XD”, “Scketch”…etc.

Súper buena la clase, a medida que voy practicando, voy asimilando la forma en la que se debe pensar un maquetado para llevarlo a código 😄
PD: Me voló la cabeza el atajo de escribir <etiqueta> * n para escribirla n veces 🤯

Esto les ayudara a trabajar mas rapidpo para la creacion de etiquetas https://docs.emmet.io/cheat-sheet/

Me acabo de dar cuenta de que se pueden crear n etiquetas iguales con solo poner la etiqueta seguido de un * y el número de etiquetas que queremos. Ejemplo:

• section*2

En los assets que subieron en Dropbox para este proyecto, el diseño del home es distinto… La segunda sección del header aparece con un fondo transparente

Es bueno recordar un poco de semantica, suelo usar divs para todo en vez de las verdaderas etiquetas que corresponden a cada parte de mi html

Genial que lo pasaran a React o Vue, tipo escuela js

Live Sever

First step ✅

Si se sienten muy nuevos en esto del diseño inicial con relacion a las imagenes y los iconos , entonces deberias comenzar buscando UI kits , que son como paquetes que traen todo tipo de iconos , imagenes y fuentes para poder diseñar tu pagina

Tenemos la estructura del header ❤️

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>index</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width= device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./css/main.css">
    </head>
    <body>
        <header>
            <section>
                <div>
                    <a href="">Facebook</a>
                    <a href="https://bit.ly/34cRaHz">Twitter</a>
                    <a href="">Instagram</a>
                    <a href="https://bit.ly/31mapg9">Linkedin</a>
                    <a href="">Youtube</a>
                </div>
            </section>
            <nav>
                <section>
                    <a href="./index.html">Logo</a>
                </section>
                <section>
                    <a href="./perfil.html">Sobre mí</a>
                </section>
            </nav>
        </header>
    </body>
</html>

La verdad, no es por ser malo pero no me agrada del todo como Diego coloca muchos section y div en una sola parte, seguire el curso pero le cambiare algunas cosas en el transcurso en lo personal 😃. asi me quedo la maquetacion del header, vease que cambie el segundo nav a el main ya que en dropbox se ve que esta en el main con un justify-content: space-between;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog</title>
    <link rel="stylesheet" href="./css/main.css">
  </head>
  <body>
    <header>
      <nav class="navtop">
        <a href="">Facebook</a>
        <a href="">Twitter</a>
        <a href="">Instagram</a>
        <a href="">Linkedin</a>
        <a href="">Youtube</a>
      </nav>
    </header>
    <main>
        <nav class="navbottom">
            <a href="">logo</a>
            <a href="./profile.html">Sobre mí</a>
        </nav>
    </main>
  </body>
</html>

Les comparto mis nichos de iconos:

http://google.github.io/material-design-icons/#icon-font-for-the-web

https://www.iconfinder.com/search/?q=facebook&from=navbar

Por buena practica, una etiqueta section siempre deberá ir acompañada de cualquier etiqueta h2 hasta la h6. La h1 solo debe existir una por cada archivo html y por cuestión de SEO, por eso no se debe utilizar dentro de una etiqueta section. En este enlace de las especificaciones de la W3 pueden encontrar la definición formal de la etiqueta section y otras. https://html.spec.whatwg.org/multipage/sections.html#the-section-element

La clase es enriquecedora, sin embargo, veo malas prácticas a la hora de maquetar. Un ejemplo claro es; Al hacer el header, degranda, abusa de la etiqueta <section> (mala práctica), el nav, por sí solo, ya tiene una connotación específica (hacer un menú de navegación), y no debe llevar sections por dentro. nav, semánticamente hablando, está dirigido a contener etiquetas ul y li. Hacer uso de section para definir espacios, más que aportar, en realidad solo hace más lento el proceso y menos efectivo.

No es una queja, es una observación respecto a la case 😃

Lo que realmente me impresiona es que la lectura del código usado por Diego es sumamente entendible y la impresión es porque hace meses atrás me costaba entender dichas lecturas. Hoy puedo decir con seguridad que domino la estructura de hrml y eso me llena de alegría, se que aun tengo que aprender pero voy por buen camino. Ojo! Mi esctructura y código seria diferente a la del profesor. 🤓👨🏻‍💻📈 cada quien programa a su formal.

solo como comentario , me gustaría que se unieran a hacer un cambio y empezar a darle mas valor a nuestro lenguaje que hablamos… entiendo que la mayoría de lenguajes están en ingles…y que se utilize mucho las palabras en ingles, pero me da mucha tristeza escuchar a los maestros decir palabras que no existen como por ejemplo linkear , que por lo que veo se refería a enlazar y así hay muchas otras , debes de empezar a tirar odio asía los demás y simplemente ver esto como un comentario que si bien se unen podemos aser el cambio…

Genial estar en este punto y haber hecho git init para llevar orden con todo,like si lo hiciste tu tambien sino ya sabes el Curso de Git y Github

Si quieren usar iconos les recomiendo usar Fontawesome y les dejo un tutorial de como agregar iconos de Fontawesome

CCS

No es un lenguaje de programación, es un lenguaje que me permite dar estilos a lo que maquetamos en HTML.

Usamos selectores de etiquetas solo por la palabra, selectores de clase mediante .nombredeClase, y por ID mediante #nombreId

DevTools

Es una serie de herramientas que facilitan el proceso de desarrollo. Podemos ver en tiempo real que estamos haciendo con CSS,JS, podemos ver peticiones, imágenes y demás. Incluso podemos hacer debuggin para hallar problemas al momento de renderizarse.

Semántica

se refiere a todo aquello que tiene que ver con el significado de una palabra u expresión. En HTML, existen etiquetas con significado semántico, etiquetas que por si mismas brindan un poco de información sobre que tipo de contenido hay dentro de ellas. El correcto etiquetado del contenido, con los tags que brindan una descripción de lo que hay entre la etiqueta de apertura y la etiqueta de cierre, permite dar información rápida sobre el contenido de cada etiqueta semántica, mediante el nombre de la propia etiqueta.

HTML

    <header>
        <section class="navbar-container">
            <ul class="navbar">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </section>

        <section class="about-container">

             <div class="img-container">
                 <img src="assets/img/logo.png" alt="" class="img">
             </div>

             <div class="aboutMe-container">
                 <a href="#" class="aboutMe">Sobre mí</a>
             </div>
        </section>
    </header> 

CSS

  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
         }

         header {

            display: grid;
            grid-template-rows: repeat(2,minmax(75px, 1fr))
         }
        
        .navbar-container {

            display: flex;
            justify-content: flex-end;
            background-color: #41c7a4;
        }

        .navbar {

            display: flex;
            justify-content: space-around;
            list-style: none;
            width: 32%;
            margin: auto 0;
            column-gap: 4px;

        }

        .about-container {

            display: grid;
            grid-template-columns: minmax(200px, 3fr) 2fr;
            /* margin-top: auto 0; */
        }

        .aboutMe-container {

            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            margin: auto 0;
        }

        .aboutMe {

            grid-column: 3/4;
            color: #5a585c;
        }

        .img-container{

            margin: auto 0;
        }

        .img {

            object-fit: contain;
            width: 30%;
        }

¿Existe algún curso donde expliquen exactamente los niveles de las etiquetas? Para tener una idea o metodología al usarlas, de modo que se tenga un html semántico de la mejor calidad.

Live Server x2

Excelente manera de explicar, se le da naturalmente 😃

Que asco de UI soy jajajaja, pero buen lo importante aquí es prácticar la maquetación 😋

<!DOCTYPE html>
<html lang="es">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Panorte</title>
      <link rel="stylesheet" href="/css/main.css">
</head>
<body>
      <section>
            <div>
                  <p>Tel. (81) 8311-1600</p>
                  <a href="#">
                        <img src="/assets/imagenes/fb.svg" alt="Icono de Facebook">
                  </a>
                  <!-- CREDITOS DE ICONOS https://iconos8.es/icon/set/instagram/quill -->
                  <a href="#">
                        <img src="/assets/imagenes/ig.svg" alt="Icono de Instagram">
                  </a>
            </div>
      </section>      
      <nav>
            <section>
                  <a href="/">
                        <img src="/assets/imagenes/logo-panorte.jpg" alt="Logo de Panorte">
                  </a>
            </section>
            <section>
                  <a href="#">Nosotros</a>
            </section>
      </nav>
      <main>
            <section>
                  <p>Puertas Automáticas del Norte SA de CV</p>
                  <button>Cotiza Ya!</button>
            </section>
      </main>
</body>
</html>

Así nos va quedando:

follow me:

https://github.com/iecgerman/panorte

Header en Svelte

‏‏‎
‏‏

los iconos los consegui de https://tabler-icons.io/
‏‏‎ ‎‏‏‎
‏‏‎ ‎
Svelte al tener componentes los mismos pueden ser reutilizados en todos los containers padres 👀

dejo el codigo aqui:

yo no pude conseguir los iconos de redes sociales del header asi que estoy creando los mios con css aqui les dejo los estilos que le di al mio
display: grid;
font-family: sans-serif;
font-size: -webkit-xxx-large;
text-decoration: none;
background: blue;
padding: 10px;
width: 40px;
height: 40px;
justify-content: center;
align-content: center;
font-weight: bold;
color: white;
border-radius: 40px;

Aún no entiendo los archivos flaticon de la carpeta de recursos xd. Btw, genial esta clase.

muy importante <link rel=“stylesheet” href=“css/main.css”>

<header>
<section>
<a href="/">facebook</a>
<a href="/">Twitter</a>
<a href="/">Instagram</a>
<a href="/">Linkedin</a>
<a href="/">Youtube</a>
</section>
/5 ETIQUETAS EN LA BARRA DE NAVEGACION QUE SERIA LOS BOTONES
/TENEMOS LISTO EL HEADER DE NUESTRA PAGINA

Yo recomiendo ir haciendo las clases tipo BEM para ir practicando con todo, realmente trabajo ya en todos los cursos con BEM y Sass para hacer los estilos y me resulta facil

este curso es aburrido

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <title>My Blog</title>
</head>
<body>
    <!-- BARRA DE NAVEGACION -->
    <header>
        <section>
            <div>
                <a href="">facebook</a>
                <a href="">twitter</a>
                <a href="">instagram</a>
                <a href="">linkedin</a>
                <a href="">youtube</a>
            </div>
        </section>
        <nav>
            <section>
                <a href="#">Logo</a>
            </section>
            <section>
                <a href="perfil.html">Sobre mí</a>
            </section>
        </nav>
    </header>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Blog</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <header>
    <section>
      <a href="">Facebook</a>
      <a href="">Twitter</a>
      <a href="">Instagram</a>
      <a href="">LinkedIn</a>
      <a href="">YouTube</a>
    </section>
    <nav>
      <section>
        <a href="/">Logo</a>
      </section>
      <section>
        <a href="perfil.html">About me</a>
      </section>
    </nav>
  </header>
  
</body>
</html>```

Excelente repasando

Continuamos.

Excelente clase!!

Live Server x4

Live Server X5

Todo bien de momento! 👍

Pasos para instalar el live server:
https://www.youtube.com/watch?v=eM2xzvUTasQ&app=desktop

+2

Estupendo sigamos 😄

Explica de una manera muy comprensiva profe. La forma correcta para organizar mi archivo html

utiliza el atributo alt en html para el logo y sobre mi!!

Excelente el la forma de hacer el html semántico, muy buena forma de hacer la maquetacion

Excelente clase!!

Interesante y práctico.

Muchas gracias por la explicación de la estructura inicial del header instructor Diego.

Diego explica muy bien!

una excelente clase la preparación de la estructura del contenido

siento que estaba esperando estos conceptos hace mucho, se ordenan mucho mejor las cosas, en mi opinión, este curso debería ser de los primeros, me encanta!

Sigamos 😄

Muy buena la herramienta del LiveServer

Vamos empezando a maquetar!

Continuemos 😄 muy bueno

Genial!, que práctico. Continuemos.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../assets/css/main.css">
    <title>Mi Blog</title>
</head>
<body>
    <header>
        <section>
            <div>
                <a href="/">Facebook</a>
                <a href="/">Twitter</a>
                <a href="/">Instagram</a>
                <a href="/">linkedin</a>
                <a href="/">Youtube</a>
            </div>
        </section>
        <nav>
            <section>
                <a href="/">Logo</a>
            </section>
            <section>
                <a href="./perfil.html">Sobre mi</a>
            </section>
        </nav>
    </header>
</body>
</html>```

Con que extensión el profesor puede poner 5 enlaces con un solo comando?
a*5
en el minuto 4:31

Aquí mi header

<header class="header">
            <section class="header_social">
                <div class="header_social-container">
                    <a class="icon" href="/">Facebook</a>
                    <a class="icon" href="/">Instagram</a>
                    <a class="icon" href="/">Twitter</a>
                    <a class="icon" href="/">Linkedin</a>
                    <a class="icon" href="/">Youtube</a>
                </div>
            </section>
            <nav class="header_nav">
                <section>
                    <a href="/" >Here shoul be a logo</a>
                </section>
                <section>
                    <a href="./pages/perfil.html" >About Me</a>
                </section>
            </nav>
        </header>```

4. Arquitectura del header en HTML:

El usar emmet los va a ayudar mucho a comenzar a hacer la estructura de su web en HTML más rápido:

Por ejemplo, si quiero hacer un header con clase header, que dentro tenga un section con clase section y un nav con clase nav, el siguiente código emmet (el emmet viene por defecto en visual studio code), solo escribiéndolo y presionando enter lo generará:

header.header>section.section+nav.nav

Para mayor referencia en el uso de emmet, lean esta guía rápida (está en inglés):

[Emmet Cheat Sheet](https://docs.emmet.io/cheatsheet-a5.pdf](https://docs.emmet.io/cheatsheet-a5.pdf)

Este es el código que tenemos por el momento (no puedo vivir sin poner clases, por eso ya las puse, pero son libres de usarlas o no):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <title>Mi blog by Aldo Ortiz</title>
</head>
<body>
    <header class="header">
        <section class="header-section">
            <div class="header-social-icons-container">
                <a href="">Facebook</a>
                <a href="">Twitter</a>
                <a href="">Instagram</a>
                <a href="">Linkedin</a>
                <a href="">Youtube</a>
            </div>
        </section>
        <nav class="header-nav">
            <section class="header-section">
                <a href="">Logo</a>
            </section>
            <section class="header-section">
                <a href="/perfil.html">Sobre mí</a>
            </section>
        </nav>
    </header>
</body>
</html>

Codigo de la clase:

    <link rel="stylesheet" href="/css/main.css">
    +
     </head>
     <body>
    -
    +   <header>
    +       <section>
    +           <div>
    +               <a href="">Facebook</a>
    +               <a href=""> Instagram</a>
    +               <a href=""> Linkedin</a>
    +               <a href="">Github</a>
    +           </div>
    +       </section>
    +       <nav>
    +           <section>
    +             <a href="">LOGO</a>
    +           </section>
    +           <section>
    +            <a href="perfil.html">Sobre mi</a>
    +           </section>
    +       </nav>
    +   </header>
    

Shortcuts de teclado a la hora de codear que facilitan el trabajo:
Comentarios de linea ctrl + /
Comentarios de bloque ctrl + shift + /
tab poner indentacion (hacia la derecha)
shift + tab recorrer indentacion (hacia la izquierda)
alt + fecha hacia arriba/abajo mueves la linea o bloque de lugar
shift + alt + fecha hacia arriba/abajo copias la linea o bloque de lugar
Considero mas utiles, ademas de guardar y deshacer
NOTA: (debes de configurarlo en tu editor) saludos 😃