En el següent article anem a fer una ullada a Responsively App. Aquesta és una eina de desenvolupament gratuïta que podem trobar disponible per a Gnu/Linux, Microsoft Windows i macOS. L'aplicació és un navegador modificat que utilitza Electron, i que mostrarà una aplicació web en diversos dispositius alhora, i en una sola finestra permetent la interacció de l'usuari.
Com deia, aquest és un navegador modificat construït amb Electró que pot ser dajuda en el desenvolupament web receptiu. Aquesta aplicació es va publicar per primera vegada a principis de l'any 2020 i ja és força popular entre els desenvolupadors web. Molts la consideren una eina de desenvolupament imprescindible per a tots els desenvolupadors front-end, ja que pot facilitar notablement la feina.
Característiques generals de Responsively APP
- Les interaccions que faci l'usuari es duplicaran a tots els dispositius. Una acció (com fer clic, desplaçar-se, etc.) que realitzem en un dels dispositius es replicarà en tots els altres a temps real. Aquesta opció es pot deshabilitar en un o tots els dispositius que tinguem habilitats.
- Nosaltres permetrà establir la disposició dels dispositius, segons el que necessitem.
- Trobarem més de 30 perfils de dispositius integrats, amb l'opció d'afegir dispositius personalitzats. El dispositiu inclou el mode de resposta especial per canviar la mida d'una pantalla lliurement.
- El programa ens donarà la possibilitat de inspeccionar qualsevol element en qualsevol dispositiu utilitzant només un clic.
- podrem prendre una captura de pantalla de pàgina completa de tots els dispositius o dun dispositiu específic.
- Es pot recarregar de forma automàtica en tots els dispositius a temps real cada desament de HTML / CSS / JS.
- L'aplicació tambéclou un editor de CSS en viu, i mode de disseny, el qual permet als usuaris editar HTML directament sense eines de desenvolupament. També compta amb opcions d'emulació de velocitat de xarxa, zoom, deshabilitar la validació SSL i suport per a diversos protocols, entre moltes altres coses.
- També trobarem suport de proxy de xarxa, temes clars i foscos.
- El programa ens oferirà una sèrie de dreceres de teclat per facilitar la feina.
- A més podrem utilitzar extensions opcionals de navegador (per a Chrome, Firefox i Edge), les quals serveixen per enviar fàcilment enllaços des del navegador web a Responsively App, i obtenir una vista prèvia de la pàgina a linstant.
Aquestes són només algunes de les característiques d'aquest programa. es poden consultar totes elles en detall des de la pàgina web de el projecte.
Descarregar l'aplicació Responsively App
Aquesta aplicació la podrem trobar disponible per utilitzar a Ubuntu com a arxiu AppImage. Aquest fitxer el podrem trobar disponible per a la seva descàrrega a la pàgina web del projecte. A més de realitzar la descàrrega des del navegador web, també podem obrir una terminal (Ctrl+Alt+T) i executar-hi wget de la següent manera per descarregar l'última versió publicada avui dia:
wget https://github.com/responsively-org/responsively-app/releases/download/v0.18.0/ResponsivelyApp-0.18.0.AppImage
Per utilitzar l'arxiu AppImage que ens acabem de descarregar, només cal fer clic amb el botó dret en aquest arxiu, triar Propietats i, a Permisos, cercar l'opció que indica que permetem executar el fitxer com un programa. Una altra possibilitat per donar-li els permisos necessaris, serà obrir una terminal (Ctrl+Alt+T) i dirigir-nos a la carpeta on el tinguem guardat i per escriure la comanda:
sudo chmod a+x ResponsivelyApp-0.18.0.AppImage
Després de fer això, per iniciar el programa simplement cal fer doble clic sobre el fitxer .AppImage. També es pot iniciar executant en una terminal:
./ResponsivelyApp-0.18.0.AppImage
Si vols instal·lar les extensions per al navegador web, amb la qual es poden enviar fàcilment enllaços des del nostre navegador a l'aplicació i obtenir una vista prèvia a l'instant, només cal dirigir-nos a la pàgina de descàrregues del projecte i desplaçar-nos fins a la part de baix a la web. Aquí trobarem les extensions per a Firefox, Chrome o Edge.
Segons indiquen des del repositori en GitHub de el projecte, si algun usuari té problemes en usar l'aplicació, es pot obrir un problemes i informar-ne el següent enllaç. Per obtenir més informació sobre aquest projecte, els usuaris podem adreçar-nos a la pàgina web de el projecte.