hand Inicio

SERVICIOS

Salir

noched铆a

C贸mo crear la herramienta Responsinator de kuworking

400 palabras
2 minutos
July 11, 2020

Aqu铆 se trata de programar una herramienta de tipo responsinator para poder visualizar p谩ginas web emulando distintos formatos de device

Pr贸logo

La utilidad de este tipo de herramientas es para desarrolladores web, para as铆 poder visualizar r谩pidamente c贸mo queda su desarrollo en distintos formatos

Es decir, comprobar que la web es responsive

Puedes leer acerca de las herramientas que ya existen y funcionan muy bien en la entrada del blog aqu铆

Aqu铆 implementaremos el nuestro en Gatsby

Vamos all谩

  1. Pr贸logo
  2. Objetivos
  3. Configurando Gatsby
  4. C贸digo

Objetivos

Empezamos con los objetivos que buscamos:

  1. Crear una p谩gina en la que introduzcamos una direcci贸n web y esta se cargue en una ventana determinada
  2. Esta ventana debe poder cambiar de medidas para emular m贸viles, tablets, desktops, etc
  3. Debe permitir visualizar el m谩ximo de informaci贸n con el m铆nimo de tiempo posible

Por lo que necesitaremos

  1. Un <input> para entrar la web, y un bot贸n para activar el tema
  2. Un bot贸n para cambiar de vistas (ver los distintos layouts en tama帽os diferentes)
  3. Varios <iframes> para implementar las diferentes vistas

Esto lo haremos dentro de Gatsby, y utilizaremos styled-components que funciona exactamente igual que @emotion y que podemos hacer funcionar indistintamente (para lo que nos ocupa)

Configurando Gatsby

Cojemos el starter oficial y lo instalamos

Nos vamos a la carpeta creada y clonada, y seguimos instalando los paquetes que necesitamos, b谩sicamente styled-components

Y a帽adimos el styled-components en ./gatsby-config.js

C贸digo

Vamos al archivo principal ./src/pages/index.js para a帽adir nuestro componente IsResponsive

Y ya podemos crear nuestro componente IsResponsive en ./src/components/isresponsive.js

B谩sicamente lo que hacemos es

  • Definir la url que analizaremos con un valor inicial
  • Definir un estado para la escala que nos servir谩 para escalar el iframe con css
  • Crear un array para definir las medidas que queremos analizar, donde el valor de 200 es porque en la escala peque帽a todas las medidas se normalizar谩n a 200px
  • Luego implemento un bot贸n para cambiar la escala y as铆 cambiar las dimensiones de los iframes con toggle

  • Y finalmente la l贸gica para recoger los valores del <input>

El componente retorna todo el c贸digo JSX que no es m谩s que el input, un bot贸n para iniciar el an谩lisis y otro para cambiar la escala de los iframes

Y luego el desplegar el objeto anterior iframeArray (que no era un array pero lo convertimos con Object.entries) para volcar iframes

El resto del c贸digo son los estilos y no tiene mayor misterio, excepto la parte que corresponde al iframe

B谩sicamente, para cambiar las dimensiones utilizo la propiedad transform: scale() para hacerle un zoom, vendr铆a a ser una emulaci贸n del viewport

Y luego adapto tambi茅n el width y el height del iframe y del <div> padre

Mucho m谩s sencillo de lo que podr铆a parecer

馃檵鈥嶁檪锔

Qu茅 tal el curso?
馃憣 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 馃檹

Quiz谩 te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]