Archive for the 'Browser' Category

Web Developer: adesso si che si ragiona

Erano i primi giorni di vita di questo blog quando analizzavo per la prima volta le possibilità offerte agli sviluppatori Web dai vari browser, e sottolineando come persino io (lo sapevate che sono un fan di Opera? :P ) ancora non potessi fare a meno di Firefox e delle sue estensioni durante lo sviluppo di un sito.

Web developmentDa allora comunque le acque si son mosse parecchio ed il panorama davanti al quale ci troviamo risulta essere non solo molto più interessante, ma anche in pieno fermento.

Ovviamente mi riferisco al rilascio, da parte della società norvegese, di Opera Dragonfly, il debugger tool destinato, nelle intenzioni dei suoi creatori, a rimpiazzare totalmente Firebug nei cuori di tutti i web developer.

Nonostante alcuni problemi iniziali mi avessero impedito di provarlo (se siete nella stessa situazione postate un commento e spiegherò come risolvere), alla fine ho avuto anche io la mia occasione e nelle ultime nottate, complice il mio neonato interesse verso Ajax e MooTools, la libellula norvegese è diventata la mia più fedele compagna di lavoro. Rispetto alla precedente Developer Console (che non ho ancora abbandonato) risulta effettivamente molto più potente e versatile, per quanto manchino ancora alcune funzioni per me fondamentali, fra tutte la modifica on the fly dei CSS, e non sia certo priva di bugs. La situazione comunque non è certo statica e ad Oslo sono costantemente al lavoro per portare avanti lo sviluppo di questa prima alpha, basandosi in particolar modo sui numerosi feedback e suggerimenti della schiera di beta testers volontari. Ed ecco dunque spuntar fuori sul blog dedicato la prima di una lunga serie di weekly builds che, oltre a correggere numerosi bugs, aggiunge anche alcune funzioni essenziali come il completamento della Command Line e l’ Object Inspector. Tutto questo mentre il Desktop Team si prepara a rilasciare una build capace di far girare Dragonfly anche in modalità offline, attuale problema dovuto alll’incompatibilità del protocollo HTTPS con la cache persistente.

Peccato tuttavia che una feature che avevo chiesto spesso e che ritengo assolutamente fondamentale, ovvero l’integrazione di un sistema di validazione “trasparente”, come quello offerto in Firefox da HTML Validator o dalla la Web Developer Toolbar, non sarà integrato nella proposta di Opera. Personalmente non so quanto questo possa influire fra gli sviluppatori più esperti, ma onestamente l’idea di dover passare al setaccio ogni pagina usando il validatore online non è che mi solletichi molto.

Opera Dragonfly

Ma se gli sviluppatori di Opera stanno lavorando sodo per guadagnarsi il successo, chi si occupa dello sviluppo di Firebug non sta certo a guardare e giusto ieri ha rilasciato una nuova versione dell’estensione forse più popolare del web che, non solo aggiunge (finalmente) il supporto a Firefox RC1, ma offre anche nuove funzioni, una maggiore cura dei dettagli e, infine, il miglioramento complessivo delle performance (anche se questo, a mio parere, è più probabilmente dovuto al nuovo FF3 piuttosto che all’estensione in se).

Ecco dunque spiegato lo strano titolo con cui ho presentato questo post. Dopo anni di assoluta quiete e pressochè totale disinteresse verso (noi? … esagero?)  poveri sviluppatori web, eccoci trasformati improvvisamente nelle principessine più desiderate del reame… e finchè dura chi si lamenta? :D

Nostalgia di Opera

Aprendo dopo millenni il forum italiano ufficiale di Opera, questa mattina ho trovato una discussione interessante.

Si parlava della scomparsa, nelle ultime versioni del browser, di uno dei più spettacolari e peculiari CSS personali da applicare al volo alle pagine web che stiamo visualizzando, ovvero il mitico Nostalgia.

Opera Nostalgia

Per chi non sapesse di cosa sto parlando, si tratta, come spiega più che esaurientemente il nostro Francy, della grafica ad 8 bit visualizzata dal leggendario Commodore 64.

Nonostante personalmente non lo utilizzi più da secoli, sono rimasto incredulo leggendo della sua rimozione, considerando anche il fatto che più volte sulla rete ho letto di commenti entusiasti di questa funzionalità. Per principio, o per semplice ripicca, sono andato quindi a recuperarlo ed a rimetterlo al suo posto estraendolo da una vecchia versione del browser. Per chi volesse fare altrettanto ecco la procedura da seguire.

Per prima cosa scaricate il file nostalgia.css allegato a questo post.

Adesso dovrete copiarlo nella cartella styles\user\ all’interno del vostro profilo. Se non sapete dove si trova andate su ? > Informazioni su Opera e la troverete alla voce Cartella di Opera.

A questo punto vi basterà riavviare il browser per avere, nella lista dei vostri CSS personali, anche la vecchia modalità Nostalgia. E devo dire che un giro di prova in memoria dei vecchi tempi non dispiace affatto. :P

Anche Opera abbraccia la PGO

Qualche mese fa gli sviluppatori di Firefox avevano stupito il mondo intero: il browser che da sempre era stato etichettato come tra i più lenti e macchinosi era riuscito, nelle ultime nightly, a balzare in testa alla classifica dei più veloci scalzando di fatto Opera dal podio.

Opera LogoIl segreto del suo successo, oltre i centinaia (o migliaia?)  di memory leaks fix, e alla rivisitazione di gran parrte del codice originario, era da attribuire soprattutto ad una particolare tecnica usata per la sua compilazione chiamata Profile Guided Optimization (PGO).

Tramite questa tecnica in pratica il programma viene compilato in modo “intelligente”, migliorando di gran lunga le prestazioni per tutte quelle operazioni ritenute, dopo un’attenta analisi statistica, di più comune riscontro ed utilizzo.

Consapevoli di cosa la perdita del primato velocistico rappresenti per l’immagine di Opera, i suoi sviluppatori non sono più rimasti a guardare ed hanno deciso di imitare il concorrente compilando l’ultima weekly build per Windows con questa tecnica.

Ad una prima prova su strada in effetti pare che i risultati non abbiano deluso le aspettative, e presto quindi, non appena risolti alcuni problemi di stabilità, anche le versioni *NIX e OSX ne trarranno vantaggio.

C’è da dire tuttavia, almeno per quanto mi è stato possibile approfondire, come l’approccio usato da Mozilla pare sia stato più fruttuoso, avendo dato priorità proprio a quello che oggi può rappresentare la vera discriminante, ovvero l’ottimizzazione del motore javascript. Come è facile intuire infatti un guadagno di prestazioni di questo componente si tradurrà in un’esecuzione più veloce e fluida di tutte quelle web-application che ormai dominano la rete (basti pensare solo alle webmail o ai feed reader online), un aspetto che ogni utente della rete non può certo ignorare nella scelta del suo browser preferito. Interessanti discussioni in merito è possibile trovarle nei commenti alla notizia del Desktop Team.

Resta comunque il fatto che quello appena presentato è stato solo il primo esperimento del team norvegese e, almeno si spera, non è da escludere che al lancio della versione finale Opera 9.5 sarà nuovamente il browser più veloce del pianeta.

Search engine con 2 parametri in Opera

Questo articolo è basato sull’originale “How to create search engine with two parameters in Opera?” scritto da Tamil e disponibile in lingua inglese sul suo blog.

Ed inauguro finalmente anche questa rubrica dedicata a tutorials e tips & tricks vari per Opera e, forse, in futuro, anche per altri browser.

Per la maggior parte in realtà si tratterà solo di semplici traduzioni di originali articoli inglesi, ma, vista la pressochè totale mancanza di materiale italiano per Opera, credo se ne senta comunque il bisogno.

Argomento di oggi è per l’appunto “Come creare in Opera un search engine che ci permetta di utilizzare 2 parametri”.

La cosa può risultare piuttosto utile in svariate occasioni in cui sia necessario raffinare le opzioni di ricerca o in tutti quei casi in cui l’uso di parametri aggiuntivi sia addirittura obbligatorio. In rete esistono già diverse guide (mai sperimentate personalmente) per realizzare la cosa con Firefox, quindi non mi sono preoccupato per adesso di adattare il tutto anche al browser open source. Se siete interessati basta fare una ricerca su Google. :wink:

Ma andiamo alla procedura da seguire.

Per prima cosa effettuate una ricerca sul search engine in questione usando per l’appunto i due parametri di vostro interesse (la parola cercata ed una opzione) ed annotate la stringa visualizzata nella barra degli indirizzi. Vedrete che in essa ci saranno in chiaro i due parametri usati. Quello che dovrete fare è sostituirli con s1[0] e s2 (attenzione a sostituire SOLO questi, lasciando eventuali apici e altri caratteri al loro posto).

Quindi andate su Strumenti > Preferenze… > Ricerche e cliccate il tasto Aggiungi…

Se non sapete come muovervi nella schermata che apparirà sappiate solo che per il vostro search engine dovrete obbligatoriamente compilare, oltre all’indirizzo, i campi Nome (c’è bisogno di spiegazioni?) e Chiave (qualsiasi keyword vogliate, per esempio usate gi per Google Immagini). Per il resto lasciate tutto com’è.

Andando al campo Indirizzo dovrete poi incollare il seguente codice:

javascript:var s='%s';var p=s.indexOf('+');if(p>-1){var s1=s.split('+');var s2=s.slice(p+1)};window.location.href='[Mia Ricerca];

Avendo premura di sostituire [Mia Ricerca] con la stringa che avete annotato (e modificato) precedentemente. Ecco l’esempio per Google Immagini:

javascript:var s='%s';var p=s.indexOf('+');if(p>-1){var s1=s.split('+');var s2=s.slice(p+1)};window.location.href='http://images.google.com/images?imgtype='+s1[0]+'&q='+s2;

A questo punto il vostro search engine è pronto e potrete usarlo indifferentemente dal search box o dalla barra degli indirizzi (preceduto dalla Chiave appropriata).

Il procedimento esposto però ha il problema che i due parametri non possono essere composti da più di una parola. Per quanto riguarda l’opzione questo ha poca importanza visto che (almeno in genere) non sarà mai composta da più parole. Ma se s2 dovrà contenere più di una parola, allora dovrete usare questo codice a posto del precedente:

javascript:var s='%s';var p=s.indexOf('.');if(p>-1){var s1=s.split('.');var s2=s.slice(p+1)};window.location.href='http://images.google.com/images?imgtype='+s1[0]+'&q='+s2;

Con lo svantaggio di dover sostituire durante le vostre ricerche gli spazi con dei punti.

E con questo si chiude il primo tutorial su Opera. Sperando possa essere utile a qualcuno vi do appuntamento alla prossima puntata. :wink:

Google User Experience: predica bene, ma…

Quante volte, girovagando di qua e di là alla ricerca di qualche utile articolo sul web-design, vi siete imbattuti in una di quelle liste di consigli da seguire durante la progettazione del vostro sito?

Personalmente non le conto nemmeno più, e gli autori sono davvero i più svariati, dall’esperto internazionale di CSS al piccolo blogger che cerca di mettere a disposizione degli altri tutta la sua esperienza.

In genere solo raramente mi soffermo in una lettura più attenta di questo genere di articoli (ipotizzando con arroganza di non aver nulla di nuovo da imparare :oops: ). Eppure questa volta non ho potuto proprio ignorare il post in questione, dopo aver appreso dal titolo che il dispensatore di consigli di turno era niente-po-po-di-meno-chè l’onnipotente Google. :eek:

Google Teacher

Ad una prima lettura, il gruppo Google User Experience è in effetti riuscito a sintetizzare in 10 semplici punti come una applicazione web degna di questo nome dovrebbe essere sviluppata. Si tratta di consigli molto generici ma di indubbio valore didattico. Del resto si tratta di quelle stesse linea guida seguite ai tempi della creazione di quell’interfaccia che ha decretato il successo di Google nella lotta dei search engine.

E allora dov’è il problema vi starete chiedendo? Semplice provate a scorrere la lista fino al sesto punto:

6. Design for the world.

… Our goal is to design products that are contextually relevant and available through the medium and methods that make sense to users…

… and Google’s mission to make the world’s information universally accessible, demand products that support assistive technologies and provide a useful and enjoyable experience for everyone…

Se a questo punto non siete sobbalzati dalla sedia e/o svenuti significa che non usate Opera con le web application di Google. Giusto in questi giorni sto infatti valutando seriamente l’idea di abbandonare sia GReader che Gmail in favore di alternative che non richiedano necessariamente Firefox per funzionare.

Chiunque usi il Feed Reader di Google con Opera sa bene infatti come, oltre ai mille problemi in cui si incappa ad ogni aggiornamento dell’applicazione (che vengono risolti mediamente in 10 giorni o più), attualmente la sua lettura risulti estremamente irritante, con latenze e “freeze” temporanei che metterebbero alla prova anche la pazienza di San Francesco.

Anche Gmail e le altre applicazioni poi non è che brillino sul fronte compatibilità, per quanto si riesca comunque a lavorare una mezzoretta senza farsi venire un’ulcera gastrica.

Google si era sempre difesa affermando come fosse Opera ad avere delle limitazioni intrinseche di difficile soluzione. Ma abbiamo già visto come queste affermazioni fossero del tutto prive di fondamento.

Insomma sviluppare web-application universali va bene… purchè in qualsiasi parte dell’universo ci si trovi si stia usando Firefox. :roll:

Campagna anti-google a parte, esorto comunque tutti i miei lettori a seguire alla lettera almeno i consigli dati dalla grande G… ma per l’esempio forse è meglio guardare altrove. :wink: