El teu blog de Linux en català

Si ets desenvolupador de pàgines web, utilitzaràs sovint el depurador per revisar el codi, depurar javascript, canviar estils, veure les crides ajax, temps de resposta de les pàgines… i un gran etcètera. Per fer això, o bé utilitzes Firefox o bé utilitzes Chrome (si utilitzes un altre navegador llavors et posem al grup reduït del ‘No’, que no sobrepassa el 5%).

Mozilla acaba de presentar Firefox per desenvolupadors. Un Firefox que inclou per defecte totes aquelles eines per desenvolupadors que Mozilla ha anat creant al llarg del temps. Ací vos mostrem les seues característiques.

Eines bàsiques per a desenvolupadors

Entre les eines bàsiques, tenim:

  • L’eina equivalent al Firebug per nativa del Firefox, que ha evolucionat molt i que ens permet fer un munt de coses
  • Una lupa per veure les entranyes del web
  • Fer captura de la pantalla
  • Vista en 3d de la pàgina (això m’ha salvat ja unes quantes voltes de divs que no sabíem d’on venien)
  • ColorPick per esbrinar fàcilment els colors dels diferents elements del web
  • Editor d’estils, depurador, consola, xarxa…

3d-view

Valence

Efectivament, València en anglès. Terra de la paella i de la casalla, de la mentireta i de les bajoques farcides. Però res a vore al cap i a la fi. Valence és un complement per poder depurar navegadors més enllà del Firefox. Bàsicament ens permet depurar Chrome sobre Android i Safari sobre iOS. Això és realment genial (tot i que pareix una miqueta complicat de configurar).

Responsive Design View

Esta funcionalitat ens permet jugar fàcilment amb la mida de visualització de les pàgines web:

  • Podem canviar la mida de la pàgina fàcilment (tot a dintre d’una pestanya del Firefox)
  • Permet fer captures de pantalla directament sobre les diferents mides
  • Permet simular la pantalla tàctil
  • Permet simular rotació de dispositiu i canviar entre vàries mides predefinides

responsive-design-view

WebIDE

Una potent eina de desenvolupament d’aplicacions per al Firefox OS. Podeu provar-la dos segons i vos sorprendreu com de fàcil és crear una aplicació per al FirefoxOS, només heu de conéixer html i és suficient, i si sabeu javascript millor encara.

  • Permet instal·lar en qüestió de segons un emulador del FirefoxOS on podem executar les nostres aplicacions

webide_firefox

I molt més

Visiteu la pàgina de presentació d’esta versió del Firefox per saber-ne més.

El que es troba a faltar

Com a desenvolupador web, trobe a faltar moltes coses. Un «navegador per desenvolupadors», des del meu punt de vista, hauria de portar a més del que ja porta el Firefox for developers:

  • Capacitat de simulació de diversos navegadors, de forma que puguem depurar sense haver de canviar de finestra/sistema operatiu
  • Eines d’anàlisi de javascript que permeta controlar fàcilment eines conegudes globalment (google analytics i altres)
  • Eina per informar de totes les tecnologies que fa servir una web (existeix una extensió anomenada Wappalyzer
  • Poder depurar no només html i js, sinó també PHP o altres llenguatges sense haver de dependre d’editors i eines externes (netbeans/xdebug, per exemple)

IBM ha anunciat en el seu IBM Impact 2011 a Las Vegas que està desenvolupant Maqetta, una nova plataforma de desenvolupament d’aplicacions HTML5, que pretén ser una alternativa a Flash i Silverlight.

Logo de Maqetta

Logo de Maqetta

El projecte Maqetta, encara en fase preliminar, serà de codi obert, i treballarà sobre un entorn HTML5, de manera que es podrà executar directament en el navegador sense necessitat d’instaŀlar cap connector específic. (més…)

Komodo Edit és un entorn de programació lliure i multiplataforma que suporta un nombre molt gran de llenguatges, complements i té una quantitat molt gran d’opcions que el fan un dels entorns de programació més potents. A la feina fem servir aquest editor des de fa gairebé any i mig i estem prou contents.

Farà cosa d’un mes es va publicar la versió 6 del Komodo Edit, una versió més professionalizada, més estable i molt actualitzada en temes de codi (a la feina ens ha vingut genial ja que s’han inclòs totes les definicions de CSS3 i HTML5).

Baixada del Komodo Edit

El Komodo té dues versions, una comercial i una altra lliure, a l’estil del VirtualBox. El que passa és que realment la versió lliure és més que suficient per a qualsevol cosa que es vulga fer. La versió comercial es coneix com a Komodo IDE i la versió lliure com a Komodo Edit. Podeu baixar la versió lliure des de la pàgina oficial:

Komodo Edit 6.0.2 (versions per a Windows, Mac i GNU/Linux)

La instal·lació per a GNU/Linux es fa des de la línia d’ordres. Caldrà descomprimir el fitxer tar.gz que baixeu i executar l’script install.sh. Vos demanarà on voleu instal·lar-lo, si ho feu com a root, vos recomane fer-ho a /opt/Komodo/. Un cop instal·lat es crearà una entrada al menú, a la part de programació (o desenvolupament).

Instal·lació del paquet de llengua

Per posar el Komodo en català, caldrà que instal·leu dos complements. Primer, el paquet de llengua (feu clic amb el botó dret per baixar el fitxer xpi):

Paquet de llengua de català per al Komodo (compatible fins a la versió 6.0.2)

    Només caldrà que l’arrossegueu a la finestra del Komodo i s’iniciarà la instal·lació (és igual que la instal·lació de complements del firefox). Un cop instal·lat, caldrà que reinicieu.

    Instal·lació del paquet de llengua del Komodo

    Ara baixeu el locale switcher (feu clic amb el botó dret per baixar el fitxer xpi):

    Complement minilocaleswitcher

    I l’instal·leu de la mateixa manera que el paquet de llengua. Un cop hàgiu reiniciat, haureu d’anar al menú «Tools» i allà seleccionar «Change the locale» (potser apareix en francès…). A la finestra que s’obrirà només caldrà que seleccioneu ca-AD i seguidament reiniciar el Komodo.

    Així ja tindreu el Komodo en català.

    Komodo Edit en català

    Errors a la traducció

    Aquells que el feu servir trobareu molt probablement errors a la traducció. No dubteu en enviar-me’ls (no d’un en un, per favor…) per tal que vaja corregint-los a paugnu arr gmail.com. Si trobeu que alguna part del programa no funciona i ix un missatge amb fons groc, això probablement siga alguna cosa de la traducció, informeu-me si cal. També és possible que alguna cadena aparega sense traduir, això serà més ben degut al fet que el sistema de traducció mitjançant una extensió no és perfecte.

    Komodo Edit és un entorn de programació lliure i multiplataforma que suporta un nombre molt gran de llenguatges, complements i té una quantitat molt gran d’opcions que el fan un dels entorns més potents al meu parer. A la feina fem servir aquest editor des de fa gairebé un any i estem prou contents.

    Aquesta és la raó per la qual vaig decidir-me a començar a traduir-lo. Ara, després d’uns quants mesos, per fi he acabat la traducció i vull compartir-la amb tots vosaltres. La branca 5.x del Komodo no suporta de forma directa les traduccions, sinó que s’ha d’instal·lar un locale switcher i un paquet d’idioma per tal de canviar l’idioma de la interfície.

    Interfície del Komodo en català

    Descàrrega del Komodo Edit

    El Komodo té dues versions, una comercial i una altra lliure, a l’estil del VirtualBox. El que passa és que realment la versió lliure és més que suficient per a qualsevol cosa que es vulga fer. La versió comercial es coneix com a Komodo IDE i la versió lliure com a Komodo Edit. El paquet d’idioma només funciona per a la versió lliure en aquest moment. Podeu baixar-la des de la pàgina oficial:

    La instal·lació per a GNU/Linux es fa des de la línia d’ordres. Caldrà descomprimir el fitxer tar.gz que baixeu i executar l’script install.sh. Vos demanarà on voleu instal·lar-lo, si ho feu com a root, vos recomane fer-ho a /opt/Komodo/. Un cop instal·lat es crearà una entrada al menú, a la part de programació (o desenvolupament).

    Instal·lació del paquet de llengua

    Per posar el Komodo en català, caldrà que instal·leu dos complements. Primer, el paquet de llengua (feu clic amb el botó dret per baixar el fitxer xpi):

    Només caldrà que l’arrossegueu a la finestra del Komodo i s’iniciarà la instal·lació (és igual que la instal·lació de complements del firefox). Un cop instal·lat, caldrà que reinicieu. Ara baixeu el locale switcher (feu clic amb el botó dret per baixar el fitxer xpi):

    I l’instal·leu de la mateixa manera que el paquet de llengua. Un cop hàgiu reiniciat, haureu d’anar al menú «Tools» i allà seleccionar «Change de locale» (potser apareix en francès…). A la finestra que s’obrirà només caldrà que seleccioneu ca-AD i seguidament reiniciar el Komodo.

    Així ja tindreu el Komodo en català.

    Errors a la traducció

    Aquells que el feu servir trobareu molt probablement errors a la traducció. No dubteu en enviar-me’ls (no d’un en un, per favor…) per tal que vaja corregint-los. Si trobeu que alguna part del programa no funciona i ix un missatge amb fons groc, això probablement siga alguna cosa de la traducció, informeu-me si cal.

    A l’hora de carregar/importar/pujar una base de dades mysql per phpmyadmin ens podem trobar amb un problema seriós: si la base de dades té una mida superior a 2Mb no podrem carregar-la. Per tant, si estem a local (o tenim accés a la terminal d’un servidor), l’única manera de fer-ho serà mitjançant la terminal. I fer-ho és molt senzill, amb la següent ordre:

    mysql --user=[nom_d'usuari] --password=[contrasenya] [nom_de_la_base_de_dades] < fitxer_bd.sql

    El mètode que explicaré avui és força més complet que l’anterior i, apart de tenir una millor integració amb Nautilus, ens permetrà escollir sobre quin tipus de fitxers volem poder utilitzar el nostre script o, fins i tot, que l’acció realitzada sobre cada tipus de fitxer a què l’assignem sigui diferent.

    Per a poder-lo utilitzar, ens hem d’instal·lar el paquet “nautilus-actions”. Ho podem fer des de Synaptic o des d’un terminal, executant l’ordre següent:

    sudo apt-get install nautilus-actions

    Abans d’obrir el programa hem de crear el nostre script.  Per a posar un exemple, jo he creat l’script extreu_audio.sh, que extreu, tal i com ens va explicar fa un temps el Guillem, el so de qualsevol vídeo. L’he desat al directori /home/el_meu/usuari/bin del meu ordinador, tot i que el podria haver desat a qualsevol directori, i li he donat permisos d’execució. Un cop creat el nostre script, podem executar el programa que acabem d’instal·lar des del menú “Sistema>Preferències>Configuració de les accions del Nautilus”.

    Pantalla principal del Nautilus-actions

    Pantalla principal del Nautilus-actions

    Si premem “Afegeix” podrem configurar un nou element del menú contextual del Nautilus. En la primera pantalla que ens trobem, podrem configurar com es dirà aquest element de menú, què ha d’aparèixer a la barra d’estat i quina icona es mostrarà.

    Descripció de la nova opció de menú

    Descripció de la nova opció de menú

    A l’apartat de perfils és on es configura les accions que fa aquest element de menú. Podem crear més d’un perfil si, per exemple, cada tipus de fitxer ha d’executar una comanda diferent per a obtenir el resultat desitjat. En el nostre cas, el ffmpeg utilitza la mateixa comanda per a extreure el so de qualsevol tipus de fitxer, o sigui que només utilitzarem el perfil Main que ja hi ha creat. L’editem per tal configurar què ha de fer.

    Configuració de l'acció

    Configuració de l'acció

    A la pestanya “Acció” li direm on està el nostre script, i quins paràmetres li passem (us recomano prémer el botó “Llegenda” per saber tots els paràmetres que tenim disponibles). A la pestanya “Condicions” és on li indiquem per a quins tipus de fitxer volem que estigui disponible la nostra opció de menú i altres aspectes interessants. Quan ho tinguem tot configurat, acceptem els canvis. No veurem la nova opció directament en el Nautilus fins que no tanquem totes les finestres i les tornem a obrir. Quan ho hàgim fet, si fem clic amb el botó dret del ratolí sobre algun dels fitxers dels tipus configurats en la nostra acció hi veurem la nova opció, que podrem executar directament.

    Nautilus amb la nova opció de menú

    Nautilus amb la nova opció de menú

    Com veieu, tot i que el procés per a configurar la nostra acció per tal que estigui integrada amb el Nautilus sigui una mica més llarga amb Nautilus-actions, també podem jugar molt més amb ell, perquè ens permet decidir per a quins tipus de fitxer estarà disponible la nostra acció, configurar diferents accions depenent del tipus de fitxer, o simplement tenir una icona al costat del nom de la nostra acció.

    En altres anotacions hem mostrat alguns scripts per al Nautilus que ens poden simplificar o posar més a prop certes tasques. Però algun cop ens pot interessar integrar en el Nautilus algun script que hàgim escrit nosaltres mateixos, o que algú ens hagi passat. Hi ha diversos mètodes per a integrar un script en el Nautilus, i en aquesta anotació explicaré la més senzilla.

    Primer, hem de crear el nostre script. No explicaré massa sobre com crear els scripts en sí. Només comentaré que es pot fer amb qualsevol llenguatge (bash, perl, python, etc.) i que, com sempre, a la primera línia se li ha d’indicar quin és l’intèrpret que ha d’utilitzar el sistema per a executar el nostre script. Per exemple, si hem creat el script en python, la primera línia del nostre script ha de ser:

    #!/usr/bin/python

    Apart d’això, els nostres scripts podran utilitzar una sèrie de variables que li vindran donades. Apart de les variables més típiques com el $PWD (directori actual), $LANG (idioma), $USER (usuari d’execució), en tindrem quatre d’específiques que segur que ens seran de molta utilitat:

    $NAUTILUS_SCRIPT_CURRENT_URI=Directori actual en format URI
    $NAUTILUS_SCRIPT_SELECTED_FILE_PATHS=Camí i nom dels fitxers que tinguem seleccionats
    $NAUTILUS_SCRIPT_SELECTED_URIS=Camí (en format URI) i nom dels fitxers que tinguem seleccionats
    $NAUTILUS_SCRIPT_WINDOW_GEOMETRY=Mida de la finestra del Nautilus

    A més, haurem rebut com a paràmetre els noms dels fitxers seleccionats (sense el seu camí), de manera que podrem utilitzar les variables $#, $1, $2, etc.

    Amb aquestes indicacions (i un coneixement mínim d’algun llenguatge de scripts), ja podem crear algun script que ens pugui ajudar en les nostres tasques diàries. La integració de l’script que hàgim escrit amb el Nautilus és molt senzilla. Només cal crear (si no ho hem fet abans) el següent directori:

    /home/el_nostre_usuari/.gnome2/nautilus-scripts

    Tots els scripts que desem en aquest directori estaran automàticament integrats en el Nautilus. Quan hi desem un script, hem de recordar-nos de donar-li permisos d’execució. I com veurem aquests scripts en el Nautilus? Doncs estant en el Nautilus, seleccionem els fitxers que ens interessi i fem clic amb el botó de la dreta del ratolí. En el menú contextual hi haurà l’opció “scripts”, i sota ella hi haurà tots els scripts que hàgim desat a la carpeta que he comentat abans.

    Per posar un exemple, jo n’he creat un que ens comprimeix amb el 7z els fitxers que hàgim seleccionat. Això, lògicament, requerirà tenir instal·lat el p7zip. Si no seleccionem cap fitxer, ens comprimirà tot el directori. El nom del fitxer 7z resultant serà el nom del fitxer original (amb extensió 7z) si només n’hem seleccionat un, i amb el nom del directori on estem (amb extensió 7z) en cas contrari. He creat l’script 7zipar (en aquest cas, en bash). Només cal desar-lo en el directori indicat abans i donar-li permisos d’execució. En la imatge següent veiem com queda integrat en el menú contextual del Nautilus.

    7zipar en el Nautilus

    7zipar en el Nautilus

    En la propera anotació explicaré una forma alternativa per a integrar els nosrtres scripts amb el Nautilus. Serà una mica més complicat que desar l’script en un directori, però també serà molt més flexible i s’integrarà millor amb el Nautilus.

    Què ha passat amb Debian i OpenSSL? OpenSSL serveix, entre d’altres coses, per generar contrasenyes. Per això, és necessari que el programa sigui capaç de generar nombres aleatoris que difícilment es puguin preveure. Es tracta que sigui complicat que, aplicant algorismes i mètodes matemàtics, algú pugui descobrir la forma de trobar una contrasenya.

    El que ha passat és que una de les eines que ajuda als programadors a programar (els depuradors o debuggers, permeten trobar errors) es queixava per aquesta línia de codi: MD_Update(&m,buf,j);. Per això, els encarregats del codi font d’OpenSSL la van eliminar. I, en eliminar aquesta línia, el que s’ha produït és que totes les claus generades des de setembre de 2006 poden ser descobertes per gent malintencionada, aprofitant l’existència d’aquest forat de seguretat per crear eines que els permetin fer-ho. De fet aquesta eina ja ha estat creada i s’ha demostrat molt eficaç.

    Qui ho va eliminar va ser la persona que s’encarrega de fer el paquet per a Debian, no els programadors originals d’OpenSSL, i és per això que l’error només afecta a sistemes operatius Debian i derivats, entre ells Ubuntu. De tota manera, cal dir que el responsable de la catàstrofe va actuar amb les espatlles cobertes. I és que, abans d’eliminar la línia en qüestió, va preguntar als programadors d’OpenSSL què passaria si ho feia:

    Kurt Roeckx (encarregat del paquet de Debian):

    No tinc ni idea de com afectarà això realment a la generació aleatòria de nombres.

    Ulf Möller (programador d’OpenSSL):

    No afectarà massa. Si això ajuda a la depuració, estic a favor d’eliminar-la.

    Aquesta conversa va tenir lloc el maig de 2006. El setembre de 2006, es publica a Debian el paquet OpenSSL amb la línia de marres ja eliminada. I no és fins la semana passada que Luciano Bello descobreix l’error, avisa a Debian i es publica l’alerta de seguretat i la notícia comença a passar de bloc en bloc. En parlen en Xavier Caballé o Kriptópolis, per exemple.

    Queda demostrat: una sola línia de codi pot embolicar la troca de valent.