R&M Wiki

Lenguajes de Marcas · 1.º DAW · STEM Granada

Tipo: Sitio web
Contexto: 2º Trimestre

1 / 3

Visión

Una buena wiki no debería quedarse en lo que alguien escribió una vez: debería poder responder a cualquier pregunta. R&M Wiki une fichas cuidadas a mano con datos en directo de los 826 personajes de la serie.

Descripción

En la asignatura de Lenguajes de Marcas nos propusieron el tema: una web completa sobre el universo de Rick and Morty, con cientos de personajes, cada uno con su especie, su estado, su origen y los episodios en los que aparece.

El resultado es una wiki con dos caras. Por un lado, fichas de personajes escritas y maquetadas a mano, con favoritos que se marcan al momento. Por otro, un buscador que consulta en directo la Rick and Morty API: cualquier personaje por nombre o por ID, o uno al azar entre los 826 que existen.

Todo está hecho a mano y sin frameworks: HTML semántico, CSS propio y JavaScript que trabaja directamente con el DOM, los eventos y las peticiones a la API. Y está publicada: se puede visitar y usar ahora mismo.

Lo que aprendí

Trabajar con una API real
Consumir la Rick and Morty API con fetch y async/await me enseñó a esperar datos que no controlo, a mostrarlos bien y a gestionar el error cuando no llegan.
JavaScript sin red
Sin frameworks, cada interacción es DOM y eventos a mano. Así entendí lo que las librerías hacen por debajo antes de usarlas.
Una plantilla para todo
Rellenar una sola página de detalle a partir del parámetro de la URL me enseñó a reutilizar en lugar de copiar y pegar.
Una hoja de estilos para toda la web
Cinco páginas comparten un solo CSS. Eso me obligó a pensar en piezas reutilizables, como tarjetas, cabeceras y botones, que se ven igual en toda la web, y a maquetarlas con Flexbox.

Cómo está hecho

Cinco páginas HTML que comparten una hoja de estilos y un único script. La maquetación es con Flexbox y los estilos se comparten entre todas las páginas, así la web se ve coherente de principio a fin.

Toda la interactividad es JavaScript vanilla: manipulación del DOM, URLSearchParams para leer el personaje de la URL y la Fetch API para hablar con la Rick and Morty API. Está publicada en Netlify.

Tecnologías

Frontend: HTML5CSS3FlexboxJavaScript
Datos: Fetch APIRick and Morty API

Siguiente proyectoCine STEM →

Descripción

Lo que aprendí

Trabajar con una API real

Consumir la Rick and Morty API con fetch y async/await me enseñó a esperar datos que no controlo, a mostrarlos bien y a gestionar el error cuando no llegan.

JavaScript sin red

Sin frameworks, cada interacción es DOM y eventos a mano. Así entendí lo que las librerías hacen por debajo antes de usarlas.

Una plantilla para todo

Rellenar una sola página de detalle a partir del parámetro de la URL me enseñó a reutilizar en lugar de copiar y pegar.

Una hoja de estilos para toda la web

Cinco páginas comparten un solo CSS. Eso me obligó a pensar en piezas reutilizables, como tarjetas, cabeceras y botones, que se ven igual en toda la web, y a maquetarlas con Flexbox.

Cómo está hecho

Toda la interactividad es JavaScript vanilla: manipulación del DOM, URLSearchParams para leer el personaje de la URL y la Fetch API para hablar con la Rick and Morty API. Está publicada en Netlify.