🖖 Inicio

SERVICIOS

Salir

nochedía

Typography

1200 palabras
5 minutos
May 8, 2020

Typography

Y en este último capítulo vamos a explorar el plugin typography.js, donde además vamos a aprovechar para estructurar nuestro website con algo de sentido (ahora verás a lo que me refiero)

Para el deploy, esto es, publicar tu website en un dominio Netlify (aunque hay otras opciones), tienes la explicación en el capítulo 5 del curso Gatsby en 10 minutos y por lo tanto no lo explicaré aquí

Pero si no quieres salir del local, lo único que tienes que hacer es un gatsby build y cuando haya terminado continuar con un gatsby serve, y en lugar de visitar localhost:8000 te vas a localhost:9000 y verás el website tal y como lo verías en un hosting

Qué es typography?

Lo tienes aquí en el dominio del creador de Gatsby

Es una librería que busca simplificar el diseño web en tanto en cuanto a la tipografía, e intenta resolver out-of-the-box todos los fonts-pairing posibles y por haber

Tienes una entrada donde menciono el font pairing aquí

Instalación y cómo lo utilizamos

Para instalarlo lo haremos con el plugin de Gatsby (oficial)

Y para añadirlo nos vamos a gatsby-config.js y completamos el código que ya habíamos modificado anteriormente

La manera de funcionar de este archivo es que proporcionamos un array [ ] donde definimos todos los plugins

La manera "esperable" hubiera sido ésta

Pero si queremos pasar opciones al plugin, entonces necesitamos añadir un objeto en lugar de un string, que es el código de arriba donde con resolve indicamos el nombre del plugin y con options sus opciones

Una vez añadido el plugin, luego nos vamos y creamos un archivo justo en el lugar donde le hemos dicho en gatsby-config.js justo hace un momento, esto es en src/utils/typography

Para que funcione necesitamos instalar el tema

Con esto ya tenemos unos estilos de serie que (sorpresa) nos dejan una estética pareja al tema que WordPress sacó en 2012

Cambiar de estética es tan sencillo como escoger entre los temas que encontrarás en la página oficial, instalar el paquete y configurarlo en el archivo como acabamos de hacer ahora mismo

Qué nos proporciona esto?

Que cuando utilicemos los tags habituales de html, el <h1>, el <blockquote>, etc, estos ya están estilados

Y lo mismo pasa con la fuente que se utiliza, typography ya se encarga de bajárnosla por nosotros (descargada de los servidores de Google, lo cual podemos anularlo y encargarnos nosotros mismos de importarla desde local)

Estructura completa de la página

Ahora vamos a estructurar nuestro website para que nos sea más útil y puedas ver cómo de fácil es combinar componentes

Normalmente qué tendría una página?

  1. Un header
  2. Un body
  3. Un footer

En el <body> podríamos poner columnas ... o no

Depende de la temática casi siempre será mejor no poner columnas básicamente porque esa información lo más probable es que sea una distracción

Y cuándo esto no es así?

Cuando ya no buscas convencer, por ejemplo, cuando tu usuario ya está pagando por ese servicio, con lo que un menú funcional sí que aporta valor

Más cosas? Podríamos tener dos tipos de páginas, una que sería la central, el hub o el grid que de algún modo nos mostrará todo el contenido de la web, y luego las páginas de los artículos que nos mostrarán un artículo a la vez (y que normalmente serán los que lucharán por posicionarse en el SEO)

Pero vamos a hacerlo simple, y vamos a dejarlo en una única página grid que nos servirá para publicar contenido corto que sirva como una suerte de twitter personal, es decir, contenido corto para expresar ideas o enlazar contenido de terceros, y de forma manual

Para hacer esto por lo tanto necesitaremos sólo estos 3 elementos listados antes, y el body así mismo tendrá

  1. Espacio para un CTA
  2. Grid para el contenido

A todo esto habrá que añadirle la paginación, algo que veremos en la segunda parte de este curso

Por lo tanto, vamos a crear los archivos pertinentes, primero el índice con la estructura final

Y ahora vamos a definir todo el compendio de componentes que pondremos en la carpeta de los componentes (dónde sino?)

Podríamos poner todos los componentes en el mismo archivo index.js? Y tanto, y hasta quedaría bien porque tal y como están ahora son componentes muy pequeños

El problema es que estos componentes irán creciendo y llegará un punto donde querrás compartimentarlo y separar el código, así que ya lo hacemos desde un principio y nos ahorramos problemas futuros

Como ves son componentes muy simples e incluso redundantes, podríamos evitar esta duplicidad de código creando una suerte de componente estándar o algo por el estilo

Pero como te digo el proceso normal es que cada componente termine desarrollando personalidades distintas, por lo que mantendremos esta estructura

También añado un <input>, donde ese componente debería evolucionar hasta solventar el "problema" de registrar los correos

En este caso (el del componente Form) lo importante no es diseñar ese componente en sí (no en este curso), lo importante es ver cómo encapsulamos el problema

Es decir, aquí estamos definiendo el componente Form que nos tendrá que hacer todo el trabajo de registrar correos, y que nos devolverá el html correspondiente a un formulario

Si lo hacemos así, conseguimos 2 cosas

  1. Así ya nos podemos olvidar, este componente conceptualmente hará su función más tarde o más temprano, y si lo encapsulamos como lo hemos hecho ya no hace falta que nos paremos, lo tenemos bien aislado y podemos pensar en otras cosas sin bloquearnos

  2. Y es que al final este componente puede que no lo programemos nosotros! Puede que lo externalizemos, y está claro que si vamos a algún freelance o agencia, si les presentamos este principio de código tendrán mucho más claro qué esperas de ellos, podrán simplemente hacer lo que les pides, o quizá quieran argumentarte que tienen una solución mejor, pero allí estarás tú hablando de detalles con ellos, no simplemente haciendo un acto de fe, cruzar los dedos, y confiar (que también está bien, pero que nunca es lo deseable)

Y luego está el <Main>, que tiene un <div> hijo o nested

Esto lo hago porque necesito que el primer <div> tenga la altura máxima (que corresponde a la altura de la ventana)

Aquí utilizo la función calc() de css, que es una joya, y que me permite poner la altura de la ventana en unidades 100vh y restarle la altura que he puesto en el <header> y <footer>

Ojo, esta solución está coja para móbiles ya que hay un espacio que corresponde a la barra de los móbiles y que encima desaparece con el scroll que lo complica todo mucho

Al final, la solución más aceptada pasa por calcular el height de la pantalla sin utilizar 100vh, pero aquí esto no lo veremos

Siguiendo, si en ese div le pongo el grid me dividirá todo el espacio a partes iguales, algo que no quiero

Si pongo otro div nested (dentro de él) y en ese le pongo el display: grid y en el padre nada, tengo las dos estructuras separadas y evito el problema anterior

Esto sin embargo no atañe a Gatsby, son disquisiciones css y como siempre hay decenas de soluciones

Y finalmente tenemos el <Grid>

El tema del grid es que no tenemos elementos, necesitamos entradas pero esto lo veremos en la segunda parte del curso, por lo que de momento lo dejo así, y te enlazo la entrada de kuworking acerca del grid

Y aquí tienes el codepen final del website tal y como queda ahora mismo

image

Y curso casi terminado con este quinto capítulo donde hemos visto lo fácil que es utilizar Typography, las ventajas de utilizarlo, y cómo con más bien poco hemos podido "armar" una página con los componentes más habituales

Nos queda el comentario final para ver qué nos ha faltado por ver y hacia dónde nos vamos, nos vemos en Comentario

Qué tal este capítulo?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]