open-pitu, el blog lliure en català » Chrome

CSS Reloader, extensió de Chrome

Pitu Sabadí — Wed, 27 Jul 2011 21:32:05 +0000

Sempre que em passo una estona voltant per la Chrome Web Store trobo alguna aplicació o extensió que realment val la pena parar-hi una mica d’atenció. Avui he topat amb CSS Reloader, una extensió que permet recarregar els CSS sense haver de tornar a carregar tota la pàgina.

Quan treballem en temes de maquetació web, sempre s’acaba fent ús del Firebug o similar (l’eina per a desenvolupadors de Chrome va molt bé) per poder veure els canvis de les propietats CSS en temps real. Així mateix, en més d’un cas, ens podem trobar que quan recarreguem la pàgina ens hem deixat d’actualitzar algun valor i cal tornar a repetir el procés.

No l’he acabat de provar del tot, però té molt bona puntuació i fa molt bona pinta. Mitjançant el botó secundari podem recarregar les fulles d’estils CSS sense haver de carregar tota la pàgina, agilitzant molt aquest procés. Per defecte a més, podem fer-ho mitjançant la tecla F9, cosa que encara ens donarà més dinamisme.

Durant els propers dies miraré de provar-la més a fons, ja que haig de fer algunes tasques de CSS que em servirà per testejar aquesta aplicació. Ja faré una mica de feedback al respecte, tot i que les 5 estrelles que té assignades a la Chrome Web Store l’avalen.

Podem instal·lar-la accedit a la seva pàgina de la botiga de Google. Un cop instal·lada i activada ja podem usar-la. Si volem canviar la tecla que executi la funcionalitat podem fer-ho anant a l’apartat d’opcions.

Google Chrome i les aplicacions web

Pitu Sabadí — Tue, 19 Jul 2011 22:06:57 +0000

Des de fa temps les aplicacions web van guanyant terreny, i mica en mica van agafant un espai fins ara reservat a les aplicacions d’escriptori. Aquestes ofereixen serveis que no ens donen les altres. Per una banda, el ja conegut núvol, és a dir que podem accedir a la nostra informació des de qualsevol ordinador, sense que importi la plataforma. Per altra banda, i més important, el canvi de concepte.

Històricament tots hem treballat amb aplicacions d’escriptori per després compartir aquell document mitjançant el correu electrònic. Mica en mica, en hem anat acostumant a usar el Google Docs, quan diverses persones havíem de treballar en un mateix document. Així mateix, per a compartir fitxers s’ha popularitzat Dropbox i Grooveshark té la seva sortida en la música.

Cada cop ens costa menys pensar, en que en el futur, en local tindrem ben poca cosa. Si més no pel què fa a informació. No té cap sentit guardar-se els documents al disc dur del portàtil o a un USB si podem tenir aquells documents des de qualsevol lloc. En aquesta línia hi ha projectes com Ubuntu One, Dropbox o, anant més enllà, EyeOS.

Ahir, vaig descobrir una funcionalitat de Google Chrome que ens fa fer un pas mes en aquest món. Des de qualsevol pàgina ens podem crear un accés directe. Aquest accés directe, no és el típic preferits dels navegadors, sinó que a partir d’aquell icona (del menú, la barra de tasques o del menu d’aplicacions) podem obrir una finestra sense aparença d’usar un navegador web sinó amb la d’aplicació nativa.

Realment, no és una cosa espectacular, però sí molt pràctica. Molts de cops tanquem aquella pestanya que volem perquè n’estem tancant moltes de cop, o inclús ens molesta tenir oberta aquella pestanya tota l’estona, quan realment només la tenim en “background”. A més, ens elimina el tema de les pestanyes i la barra de direcció.

Pot ser tecnològicament no és molt innovador, però sí que ajuda molt en el moment d’usar aplicacions web pensades donant molt de pes a la paraula aplicació i poc a la web. Estem parlant d’aplicacions web com GrooveShark, Code Anywhere o HootSuite. Així mateix, també ens pot ser molt útil per a gMail, gMaps, gReader…

Com fer un accés directe

Per a poder fer aquests enllaços, cal que clickem a l’icona d’opcions de Google Chrome, un cop allà ens desplacem fins a Eines, per tal de que es desplegui el submenú. Un cop aquí seleccionem “Crear dreceres d’aplicacions” i seleccionem les opcions que desitjem.

A la versió de Windows, ens dóna les opcions per a crear la drecera a l’escriptori, a la barra de tasques o al menú d’aplicacions. En funció del que desitjem triem. No he pogut penjar cap imatge amb Windows perquè ja sabeu que la meva religió no em permet usar aquest sistema operatiu.

Per als usuaris de Linux, sapigueu que només podeu seleccionar les opcions d’escriptori i menu d’aplicacions. El procediment per a crear un enllaç a la barra de tasques, seria crear la drecera a l’escriptori i a partir d’aquí incloure’l al dock d’Unity. Una recomanació, si no voleu tenir l’icona a l’escriptori, és que el mogueu a una carpeta del vostre home i després el porteu a la barra d’aplicacions.

Per als mateixos usuaris de Linux, si voleu canviar la imatge que es mostra, obriu el gEdit i obriu la drecera amb aquest programa. En una de les darreres línies veureu que hi ha la direcció d’on carrega l’icona. Per tant, podeu substituir aquella línia pel path absolut de la icona que voleu mostrar.

Captures d’aplicacions

Google Maps

GrooveShark

Code Anywhere

Mega Button, extensió per Google Chrome

Pitu Sabadí — Wed, 08 Jun 2011 20:09:52 +0000

Google Chrome és el navegador que està més a l’alça darrerament. Mica en mica es va consolidant coma navegador, i crec que és normal, no com passa amb el gran nombre d’usuaris que segueixen amb Internet Explorer. En aquest cas veurem una extensió que ens permet accedir ràpidament al nostre historia, les nostres baixades… sense tenir la necessitat d’usar el menú (fins ara no massa aconseguit).

Podem veure el vídeo d’ús de l’extensió Mega Button.

Podem instal·lar l’extensió amb un sol click.

Tabs Visual Manager, extensió de Chrome

Pitu Sabadí — Thu, 10 Feb 2011 20:54:41 +0000

Molts de cops, a mesura que portem hores treballant amb el navegador web, podem acabar tenint moltes pestanyes obertes. A vegades, pot ser difícil encertar quina és la pestanya que busques, ja que els noms comencen a quedar tallats i costa identificar-les.

A Firefox, per solucionar el problema es solia usar Panorama, però pel navegador de Google no coneixia cap alternativa. Aquesta extensió el què fa és crear un pop-up quan clickes en el seu logo que et mostra les miniatures de totes les pestanyes que tenim obertes. Un exemple seria:

L’opció que ve per defecte, en Linux no m’ha funcionat, tot i que tampoc és la solució que m’agrada, ja que obre una pestanya nova per mostrar les miniatures. Cal canviar-ho a la configuració de l’extensió.

Enllaç a l’extensió.

Descobrint algunes funcions de Chrome

Pitu Sabadí — Mon, 20 Dec 2010 00:11:48 +0000

Com molts ja sabeu el navegador web de Google és el que més m’agrada i uso freqüentment. En els darrers mesos ja s’ha convertit en el meu preferit per al desenvolupament també.

Fa pocs dies DesarrolloWeb donava a conèixer algunes funcionalitats de Chrome, de les quals seleccionaré les que no coneixia i trobo més interessants:

Drag and Drop de les baixades: La gestió que es fa de les baixades per a molts usuaris és de les menys aconseguides del navegador. Chrome permet arrossegar els fitxers baixats a l’escriptori o qualsevol altra carpeta.

Administrador de tasques: Com ja és conegut, cada pestanya que tenim oberta és una tasca diferent de cara al sistema operatiu. Mitjançant SHIFT+ESC podem accedir a l’administrador de tasques propi del navegador per tancar fàcilment les pestanyes que hagin pogut quedar penjades.

Memòria usada: Si escrivim About:memory a la barra de l’url veurem l’ús actual de memòria del navegador web.

Copiar i enganxar només text: Molts cops quan copiem i enganxem ens copia també els estils i part de l’html que forma el contingut. Si fem la còpia amb CTRL+SHIFT+V només ho farem del text seleccionat.

A l’escrit original podeu trobar algunes funcions més però que no he trobat tant interessants. Tot i així no està de més fer-hi un cop d’ull perquè sempre en pots descobrir alguna d’interessant.

Google Chrome Frame, millorem IE

Pitu Sabadí — Mon, 27 Sep 2010 23:49:00 +0000

Per tots és conegut, com a mínim pels informàtics (i en concret desenvolupadors web), que Internet Explorer és un autèntic mal de cap, a part que és un dels navegadors amb pitjor suport als estàndards web i el funcionament de diverses tecnologies actuals, un dels que té pitjor seguretat, més temps de càrrega…

A la web, hi ha moltes comparatives entre els diferents navegadors que podem triar actualment (Firefox, Chrome, Safari, Internet Explorer…). En la major part hi pots comprovar diferents característiques i enfocaments, des de les “menys tècniques”, les que comparen velocitats, les mes especialitzades… Però aquest post, no anirà d’aquest tema.

En la major part dels casos, el desenvolupador ha de perdre un bon temps per a que es vegi per a tots els navegadors igual i en concret per a totes les versions d’Internet Explorer, ja que totes elles funcionen malament (per això el programa de Microsoft en la versió 8 dóna la opció de vista de compatibilitat, ja que són conscients dels problemes que donen a la gent en la visualització de webs).

En certs casos, podem estar en un problema perquè certes tecnologies no acaben de funcionar, perquè ens fa renderitzats lletjos, perquè no accepta PNGs transparents sense ús de JavaScript, perquè és lent, perquè no accepta noves funcions CSS3 que estalvien l’ús de imatges… Es podria seguir, però tampoc és el tema del post totes les contres que pot tenir aquest navegador (per altra banda el més usat pels internautes, tot s’ha de dir).

Anem al tema principal, Google, ha tret Chrome Frame, el qual ens permet que el navegador Internet Explorer funcioni amb el motor de Chrome. L’he provat i realment funciona molt bé. A més, segons els de la G, funciona a partir de Windows XP SP2 i Internet Explorer 6. Si tenim problemes amb la visualització d’aquest navegador, podem posar un avís (un dia d’aquests penjaré com detectar si Chrome Frame està activat o no) dient que els usuaris amb aquest navegador s’instal·lessin el plugin següent.

Per a que això funcioni, caldrà posar la següent línia en els nostre head:

A partir d’aquí quan algú entri a la nostra web, amb el navegador de Microsoft i el plugin instal·lat, veuran la web com si ho fessin amb el Chrome. Crec que pot ser de molta utilitat per tal de que la gent que funciona amb IE6 puguin veure la web tal com és i no amb la destrossa que els fa. Així mateix, recomano a tota la gent que usa el navegador de la companyia de Bill Gates que provi alternatives, que n’hi ha i de molt bones.

Torrific, client web BitTorrent

Pitu Sabadí — Sun, 26 Sep 2010 23:27:23 +0000

Els arxius .torrent són una bona alternativa alhora de baixar molts de programes de software lliure, tot i que s’ha popularitzat molt el seu ús per altre tipus de descàrregues. Fins al moment, només coneixia la possibilitat de fer aquestes descàrregues mitjançant un client que ens permetés baixar el programa complet.

De la mà de PixelcoBlog avui coneixo Torrific, que ens permet fer aquest tipus de descàrregues des del mateix navegador web. Aquesta funcionalitat que podem donar als navegadors pot ser molt útils en determinats moments que necessitem baixar un .torrent i no tinguem ni podem instal·lar cap client.

Per usar aquest servei us haureu de registrar gratuïtament i podreu usar-lo introduint la direcció del fitxer. Podeu accedir a aquesta aplicació mitjançant la seva web.

Degradats de fons només amb CSS

Pitu Sabadí — Mon, 16 Aug 2010 19:57:34 +0000

En el disseny web, treballar amb imatges és bastant feixug, i en la major part dels cops és millor usar propietats CSS. Fins al moment sempre que volia fer algun fons amb un degradat el feia creant la imatge, cosa que genera una sèrie d’inconvenients que molts de nosaltres hem anat patint.

Avui, buscant alguna alternativa amb només CSS, he trobat una solució prou bona que funciona amb els tres navegadors:

background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#000000));
background: -moz-linear-gradient(top, #ccc, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′);

La primera línia és per a Chrome i Safari, la segona per a Firefox (cal que sigui la versió 3.6 o superior) i la darrera per a Internet Explorer.

Espero que us sigui d’utilitat.

Awesome Screenshot, una nova extensió per Chrome

Pitu Sabadí — Thu, 29 Jul 2010 08:51:15 +0000

Mica en mica Chrome va guanyant en nombre d’extensions, cosa que el fan cada cop més competitiu en el seu major rival, que és Firefox. Considero que la lluita està entre Firefox i Chrome i no hi faig entrar de moment Internet Explorer de Microsoft, perquè la gent que utilitza aquest últim navegador ho fa per la comoditat de no provar altres navegadors.

Chrome actualment és la millor solució i ara que amb “Inspecciona Element” té una eina molt semblant al Firebug de Firefox, realment molta gent pot deixar d’utilitzar aquest darrer, ja que els temps de càrrega i el renderitzat és molt millor al del navegador de Google. Tot i que encara està en una indiscutible tercera posició (dades del juny de 2010):

Microsoft Internet Explorer: 60.32%
Firefox: 23.81%
Chrome: 7.24%
Safari: 4.85%
Opera: 2.27%

Anem al tema, molts de cops volem crear una captura de pantalla d’una web, amb tot el contingut de la pàgina i no només el visible. Amb aquesta extensió ho podem fer amb un sol click, de manera que és molt ràpid i efectiu. Podeu instal·lar de Google extensions de Chrome.

I finalment, animo a tota la gent que encara no ha provat aquest navegador web, que el provi i si li agrada que el faci el seu navegador per defecte. Principalment el recomano als usuaris amb ordinador portàtils de pantalla petita, ja que és molt més minimalista que els navegadors convencionals. La decisió però, és pròpia de cada un.

Compara la velocitat de la teva web amb altres

Pitu Sabadí — Mon, 19 Jul 2010 13:55:21 +0000

La velocitat web és un factor molt important de cara a l’experiència d’usuari que té qualsevol visitant. Fins ara només era això, però de fa un temps cap aquí ha anat guanyant importància. Tant és així que Google ja va anunciar que seria un dels factors que tindria en compte de cara el posicionament web en el seu cercador.

Amb Wich loads faster? pots fer comparatives entre la teva web i qualsevol altre per veure qui carrega més ràpid. A més ens permet fer diverses repeticions de càrrega per aconseguir valors més reals dels temps de càrrega entre els diferents sites que provis. Bona aplicació per provar-te amb altres webs i veure amb quines pots competir a nivell de velocitat i quines tenen un hosting molt més ràpid que el teu.

Finalment, has de tenir en compte que a vegades són determinats elements de la teva pàgina que relantitzen la seva càrrega, per això podries utilitzar l’extensió de Chrome, Speed Tracer, per veure quins són els elements més pesats en la càrrega i millorar-ne així el temps global.

Plugin Java de Firefox per a l’Ubuntu 10.04

Pitu Sabadí — Tue, 13 Jul 2010 22:58:19 +0000

L’altre dia, intentant accedir al generador d’horaris de la Universitat, em vaig trobar amb la sorpresa que la darrera versió d’aquesta distribució no inclou els paquets, ara d’Oracle, i que els que inclou són els de OpenJDK.

Així doncs, per poder executar aplicacions web que necessiten aquest plugin ens caldrà instal·lar:

sudo apt-get install openjdk-6-jre «icedtea6-plugin

Un cop fet això, caldrà reiniciar el Firefox i ja podrem executar aquestes aplicacions.

Des de fa bastant de temps, el meu navegador per defecte és el Chrome i en aquest cas diria que cal usar el Firefox per a executar Java al navegador, ja que no he trobat manera en fer-ho amb aquest navegador. Si algú sap o troba la solució que ho faci saber, ja que quan un s’acostuma a un navegador li és molest haver de canviar.

Les extensions indispensables de Chrome

Pitu Sabadí — Mon, 28 Jun 2010 22:43:20 +0000

Des de ja fa un temps que el navegador de Google va guanyant adeptes, assolint uns nivells de creixement molt bons en els darrers mesos. Ara ja fa bastant que l’utilitzo com a navegador per defecte i n’estic content: més ràpid, no dóna problemes de visualització, bona renderització, bon tractament de les imatges, minimalista…

Un dels defectes que pot tenir però, és que no inclou algunes funcionalitats o opcions que es troben a faltar, però que les pots trobar com a extensions. A continuació descriuré les cinc extensions que més m’agraden per a aquest navegador.

Facebook Photo Zoom

Es tracta d’una extensió que ens serveix per al Facebook i la qual és molt útil, ja que ens permet veure les fotografies en tamany real sense haver de clickar al cim d’ella i obrir la pàgina d’aquella imatge.

Feedly

Ja n’havia parlat en el blog antic, es tracta d’un lector de RSS que va amb la teva compte de Google Reader. Genera el contingut en format magazine, fent més atractiva la lectura i la navegació entre les diferents notícies.

Extensió de subscripció a RSS

Una característica de Chrome una mica molesta és que no inclou per defecte un lector de RSS, i si no tenim instal·lada aquesta extensió ens mostra un conjunt de caràcters sense salts de línia i que no serveix per res. Gràcies aquesta extensió podrem subscriure’ns directament a aquell canal.

Downloads

Segur que tots els usuaris d’aquest navegador ens molestem cada cop que volem obrir la pestanya de descàrregues, doncs amb aquesta extensió tindràs un accés directe per tal de poder anar-hi ràpida i còmodament.

Find PHP Function

Una eina ràpida per als qui treballem amb PHP. Enlloc de fer la cerca “php <>” a Google pots buscar directament en aquest cercador amb autocompletat i que t’enllaça directament a l’API de PHP.

Com pots comprovar, a part de les cinc esmentades en tinc d’altres d’instal·lades, i que seran motius d’altres posts en els següents dies. Quan completes aquest navegador amb les extensions que necessites encara el valores més.