Com simular altres dispositius des del navegador

NOTA: Pel que sembla el març negre també ha afectat al bloc. Suposo que estic ficat en masses fronts i les prioritats estan clares. En tot cas el bloc no està mort, però si que està en un recés.

Últimament m'he posat una mica amb les adaptacions mòbils de pàgines web i, per bé que és un tema interessant, el primer problema que s'ha de resoldre és com provar-ho.

Òbviament, la meva primera opció ha sigut fer-ho amb el meu mòbil, però això és francament lent i només et permet provar-ho en un únic dispositiu. Encara que la prova última sempre s'ha de fer en dispositius físics, si que he trobat una manera per fer que Firefox enganyi la pàgina i li faci creure que s'està mostrant en un dispositiu o navegador diferent.

Selector de perfils del User Agent Switcher

Per fer-ho existeix l'extensió User Agent Switcher. Aquesta extensió permet carregar un arxiu de perfils de diversos dispositius. Un cop carregats els perfils, ja disposareu d'un botó que us permetrà indicar quin navegador/dispositiu voleu simular.

Gestor de perfils del User Agent Switcher

Us deixo aquest tutorial on s'explica com carregar manualment perfils i un enllaç a una pàgina on hi ha un arxiu de perfils per importar. El llistat de perfils és molt àmplia. La meva recomanació és que busqueu el perfil dels navegadors Safari Mobile Android i iPhone i els poseu al cap damunt de la llista perquè són els bàsics.

Class upload, llibreria per gestiona pujades amb PHP

AVÍS: aquest article parla sobre un tema molt específic de programació així que no és per tots els públics.

Vaja, fa temps que no publico. Encara que ho sembli, el bloc no està mort, simplement és que he estat molt enfeinat preparant alguna petita novetat per Arcaron.

Justament, pel que estem preparant, he descobert una llibreria en PHP que crec que val la pena conèixer si ets programador perquè facilita la pujada i tractament d'imatges com ara avatars o icones.

És força comú que les aplicacions web demanin la pujada d'un avatar d'usuari per tal que sigui fàcilment identificable. Com a norma general, tots els frameworks donen suport natiu a aquesta funcionalitat, però a vegades és necessari programar-la. Aquí és on entra en joc la classe "Upload", una classe que pot ser descarregada de la pàgina de l'autor

La llibreria té una documentació força clara i és realment senzilla de fer servir. Algunes de les característiques que m'han portat a provar-la són:

• Afegir marques d'aigua a les imatges només indicant l'origen de la imatge de marca d'aigua.
• Re-escalat d'imatges tant mantenint proporcions com no mantenint-les
• Control sobre quins fitxers poden pujar-se al servidor
• Permet reprocessar més d'un cop les imatges per aconseguir més d'un format a partir d'una única pujada de l'usuari (per exemple, avatar gran i avatar petit)
• Els missatges d'error són molt clars (estan a l'atribut "error")
• Compatible amb els principals tipus d'imatge (jpg, png i gif)

A continuació poso un exemple de com es fa servir:

//agafem el camp del formulari anomenat 'imgfile'
if (isset($_FILES['imgfile'])) {
   //creem l'objecte
   $file = new Upload($_FILES['imgfile']);
   if ($file->uploaded) {
      $file->file_new_name_body = 'nom_arxiu_final'; //posar nom a l'arxiu final
      $file->allowed = array('image/*'); //format valid tot tipus d'imatge
      $file->image_resize = true; //volem reescalarla
      $file->image_x = 200; //mida horitzontal
      $file->$handle->image_ratio_y = true; //mantenir proporcio
      $file->image_watermark = 'marca.png'; //imatge de la marca d'aigua
      
      $file->process('..//imag/directori_desti/'); //processar l'enviament

      if ($file->processed) {
         $filename = $file->file_dst_name; //nom de l'arxiu final
         $file->clean(); //buidat
         echo "La imatge $filename ja s'ha processat"; 
      } else {
         echo "Error al processar l'enviament. $file->error";
      }
   } else {
      echo "La imatge no és vàlida. $file->error");
   }
}

PhotoFilmStrip creació fàcil de carrusels d'imatges en vídeo

Fa alguns mesos, vaig començar a parlar del programari que he descobert mentre construïa el meu portafoli de belles arts. De moment he parlat de Phatch i de Cinelerra, i només me'n queda pendent un, que és justament el que porto avui.

Així com pels vídeos de pintura i d'escultura ho vaig montar amb Cinelerra, perquè la majoria de les fonts eren vídeos, per al de dibuix Cinelerra m'era una mica pesat perquè totes les fonts eren imatges estàtiques. Per aquest motiu vaig posar-me a buscar fins a trobar el PhotoFilmStrip.

Captura de la interfície de PhotoFilmStrip

PhotoFilmStrip serveix única i exclusivament per fer carrusels d'imatges, posar una música de fons i exportar-ho a vídeo. És molt senzill d'usar i és una opció molt interessant si voleu fer un vídeo curt amb les fotografies de les vacances. Us deixo amb el vídeo que vaig fer.

Treballs d'Iniciació als Processos i projectes I (Dibuix)