馃枛 Inicio

QU脡 ES KUWORKING?

Salir

WebSite de wallpapers con Gatsby

400 palabras
2 minutos
September 30, 2019
cursosgatsbybasico
脷ltimos art铆culos del BLOG

- Biblioteca de recursos para desarrollo web

- Haz tu DAFO online y visualiza tus posibilidades

- Cinco estrategias de copywriting en funci贸n de tu p煤blico objetivo

- Siete pasos para promocionar una entrada de Instagram

- Nueve estrategias para copy que te ayudar谩n a estructurar tu contenido

Pr贸logo

Bienvenidos a este nuevo curso de GatsbyJS, uno de los generadores de webs est谩ticas m谩s populares y que m谩s atenci贸n est谩 recibiendo

Pero como el curso anterior de Website de Gatsby en 10 minutos 茅ste vuelve a no ser un curso de Gatsby, sino un curso donde utilizamos Gatsby para implementar un website de wallpapers

En este curso vemos el c贸digo que mayoritariamente conformar谩 una nueva herramienta kuworking, que consiste (y pod茅is ver en kuworking.com/wallpapers) en una simple p谩gina que nos muestra un fondo de pantalla descargado de unsplash con las palabras clave coworking, con la posibilidad de poner las palabras que queramos, que cambiamos de wallpaper cada vez que hacemos click en la imagen, y que lo tenemos optimizado para que el usuario no espere a la carga de la imagen

Esta p谩gina est谩 escrita (como todo el site) en Gatsby, y en este curso vemos el c贸digo y lo explico

Y la diferencia con el curso similar de Curso JavaScript Aplicado con una extensi贸n de Chrome y Unsplash donde implement谩bamos una funcionalidad similar y en extensi贸n de Chrome, es que aqu铆 est谩 escrito en Gatsby y que el c贸digo podr铆a representar una segunda versi贸n del mismo

No puedo sino recomendar hacer antes ese curso para tener m谩s contexto y perspectiva

Dicho esto, este curso utiliza Gatsby pero por mucho que explique el c贸digo ser谩 complicado de entender sin un curso de Gatsby propiamente dicho

Y es que el objetivo no es ese, el objetivo no es entender todo el c贸digo (sobre todo sin saber Gatsby!)

Se trata de conocer Gatsby, conocer su estructura, conocer los styled components y conocer todo el proceso de crear un website, y ya tendremos tiempo de entender bien el c贸digo (con un curso de Gatsby, claro)

Esta estrategia de aprendizaje vendr铆a a ser del tipo top-down, algo que menciono en el 煤ltimo cap铆tulo del curso

Y respecto a Gatsby os digo lo mismo que os dije en el curso anterior de Gatsby (literalmente lo mismo, copio y pego):

{

Gatsby es r谩pido, mucho m谩s que WordPress y no porque WP sea lento sino porque se basa en un servidor que contesta a nuestra peticiones de forma compleja, es decir, le pedimos algo, 茅l lo escucha, lo trabaja y nos devuelve lo que le hemos pedido

Si WP fuera un restaurante con camarero que nos toma nota, Gatsby ser铆a un buffet libre donde cogemos lo que queremos y ni tan solo nos preocupamos por pagar, seguimos necesitando un servidor (el lugar donde poner la comida) pero con un mueble nos sirve, no necesitamos ning煤n cerebro detr谩s

Pues con esta comparaci贸n tan extraordinaria ya entend茅is porqu茅 las webs est谩ticas seducen tanto

}

Si quer茅is leer un par de p谩rrafos m谩s sobre el tema pod茅is leerlos en ese curso

En kuworking estructuro los cursos para ense帽arte lo necesario para poder hacer, y en paralelo aprender, no al rev茅s

Ir al curso

1. Introducci贸n

1.1 Qu茅 voy a aprender en este curso

1.2 Qu茅 es Gatsby

1.3 Diferencias con WordPress

1.4 Competencia de Gatsby

2. Starter y Styled Components

2.1 A帽adir paquetes relevantes

2.2 Index.js

2.3 Styled Components

3. A帽adir nuestras funciones

3.1 Funci贸n get_response

3.2 Funci贸n is_this_a_new_day

3.3 Funci贸n wait

3.4 Funci贸n get_image_url

3.5 Funci贸n get_image

3.6 Funci贸n new_wallpaper

3.7 Comentario

3.8 Bug en el c贸digo

4. El c贸digo que orquesta las funciones

4.1 C贸digo central

4.2 useEffect

4.3 Styled Components

4.4 C贸digo final

4.5 Bug anterior

5. Ajustar el css

6. Pre-descargar im谩genes

7. Comentario

Newsletter de kuworking, un correo de tanto en cuanto

Quiz谩 te interese

Escribe posts que se posicionen bien por SEO

Curso para programar una alternativa a NProgress con Gatsby

Curso para implementar un grid masonry con React

Google Analytics b谩sico

Google Search Console

Privacidad
by kuworking.com
[ 2020 >> kuworking ]