Articoli con Tag ‘firefox’


Very short trick: log degli oggetti Javascript

Se ci si trova a sviluppare in un ambiente dove è impossibile usare tool di debug come FireBug, come ad esempio il simulatore Apple iPad di Xcode, può diventare frustante individuare problemi, uno tra tutto l’errato accesso alle proprietà di un oggetto. Ecco che l’uso della funziona alert() diventa fondamentale!

Continua...

FireFox 3.5.7: come risolvere il difetto dei bordi arrotondati su un’immagine

A volte basta spostare un elemento, cambiando punto di vista, per risolvere un problema apparentemente insuperabile. Quando poi si ha a che fare con compatibilità tra i browser e CSS, inventarsi soluzioni “spettacolari” (acrobazie direi) è all’ordine del giorno. Quello che vi mostro è un modo semplice per applicare bordi arrotondati a delle immagini utilizzando -moz-border-radius, disponibile per Mozilla FireFox e -webkit-border-radius, per Safari e Google Chrome.

Continua...

5 estensioni per FireFox da avere dedicate ai Web Developer

Uno degli enormi vantaggi di Mozilla FireFox, rispetto agli altri browser, è stato, è lo è tutt’ora, quello di possedere una grande quantità di estensioni gratuite che permettono di personalizzare ed estendere l’applicazione. Come sviluppatore web non posso – oramai – farne a meno di alcune utilissime estensioni che mi aiutano nella costruzione, controllo e manutenzione delle pagine Web.

Continua...

Come sopportare IE6 e vivere felici

Trovo sempre un certo “malore” quando affronto l’argomento “compatibilità tra i browser”. Inoltre, e devo ancora capirne il vero motivo, tra tutti i browser che conosco quello più “antipatico” rimane sempre lui: Microsoft Internet Explorer 6! Purtroppo la release 6 di IE è ancora in circolazione e sono frequenti le segnalazioni di problemi nella visualizzazione delle pagine.

Continua...

jQuery: bordi rotondi sulle immagini per sovrapposizione

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

Continua...

Creare applicazioni Desktop con Google Chrome e FireFox?

Google Chrome permette di creare applicazioni Desktop a partire da una pagina Web? In realtà, come indicato nella voce di menu, è semplicemente permesso di creare una scorciatoia ad un collegamento che – a sua volta – apre una finestra senza barra degli indirizzi e senza tutti i “fronzoli” del browser. Con questo non significa che abbiamo creato un’applicazione Desktop; abbiamo solo creato un link allo stesso Google Chrome in modalità – per così dire- chrome-less.

Caratteristica simle, ma più ambiziosa, era già stata proposta dalla fondazione Mozilla nel 2007, tramite il progetto Prism. Questo è sicuramente più versatile ed articolato, corredato anche da un’utile estensione che permette di creare applicazioni desktop dal menu di FireFox, alla stregua di Google Chrome.

Tuttavia, entrambe le soluzioni, sono ben lontane dalla tecnologia Adobe AIR. Prima che qualcuno le confonda è bene sottolineare le differenze sostanziali tra un collegamento sul desktop, che apre una finestra senza menu, ed una applicazione desktop vero e propria.
Adobe AIR, infatti, a differenza delle soluzioni proposte da Google Chrome e Prism permette:

  • Accesso virtualmente completo al sistema su cui gira l’applicazione, con la possibilità di leggere e scrivere file. Possibilità di estendere le proprie funzionalità tramite dll (dynamic link library), estensioni e prodotti di terze parti come SHU Player (vedi Distribuire applicazioni Adobe AIR: da AIR Badge a SHU Player)
  • Gestisce l’applicazione come le altre applicazioni di sistema: installazione e disinstallazione

Continua...

FireFox: la gestione dei profili

Mozilla FireFox permette di gestire più profili, funzionalità utile a chi, come me, sviluppa siti web e necessita di tutta una serie di estensioni dedicate al debug e all’analisi delle pagine Web. Tramite l’uso dei profili è possibile configurare differenti impostazioni di FireFox:

Firefox salva le informazioni personali come i segnalibri, le password e le preferenze in un gruppo di file chiamato profilo situato in una posizione diversa rispetto ai file di programma di Firefox.

Su Windows Vista (vedi qui per altri sistemi operativi) è possibile accedere alla gestione dei profili dal comando Esegui usando:

1
firefox -ProfileManager

Gestione dei profili

Uno dei vantaggi nell’uso dei profili è quello di poter avere un FireFox per navigare, senza quindi tutte le toolbar e le estensioni per il debug e un FireFox per sviluppare, corredato da FireBug e tutti gli altri tool di sviluppo.

Continua...

CSS3: qualcuno ha visto Internet Explorer?

Io proprio no…

1
2
3
4
5
6
7
8
9
p {
/* Rounded Corners */
border-radius: 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */
}

Continua...

jQuery contro tutti: un benchmark con 5 browser

image Un buon sviluppatore non ha problemi a passare da un linguaggio di programmazione ad un altro. La scelta di concentrarsi su un particolare linguaggio, framework o ambiente di sviluppo, è dettata più dalla disponibilità di tempo e dal tipo di lavoro che si svolge. Tuttavia, un fattore importante che può influire sulla scelta di “framework” simili, è la simpatia o l’affezione che può maturare con il tempo.
Nello specifico, ho voluto analizzare alcuni – non certo tutti – framework Javascript disponibili oggi, anche perchè “consigliato” a dare un’occhiata soprattutto a jQuery.
I creatori di mootools (uno dei più noti framework Javascript) hanno reso disponibile uno strumento per eseguire un test di velocità e validità su cinque noti framework Javascript: Slickspeed. Questo test, dagli esiti non affatto scontati, è importante in quanto i framework Javascript operano lato client, cioè vengono eseguiti dal nostro browser. È proprio per questo motivo che alcuni trovano Safari più rapido di Internet Explorer o Google Chrome più rapido di FireFox. Tuttavia ciò spesso dipende anche dal tipo di pagina che si sta visualizzando. Infatti può benissimo capitare che un particolare sito sia davvero più “veloce” se visualizzato in Safari, ma questo non significa che “tutti i siti” saranno più veloci con Safari! Ovviamente questo discorso è valido per qualsiasi altro browser.

Il benchmark

Nel test che ho effettuato con Slickspeed ho messo a confronto i browser disponibili sulla mia macchina (Windows Vista Utilmate 64bit – Intel core 2 quad a 2.4GHz con 8Gb RAM).
Purtroppo il test non sono riuscito ad eseguirlo con Internet Explorer 7, in quanto bloccava la macchina, andando anche fuori scala con i risultati! Ancora una volta complimenti Microsoft.
Ho crercato di mantenere identico lo stato del PC durante l’esecuzione dei test, aprendo singolarmente i browser e non mandando nessun altro processo in esecuzione.

Nota: se avete voglia di eseguire anche voi uno o più di questi test, potete commentare questo post in caso di “curiosi” e diversi risultati.

image

Google Chrome è risultato davvero veloce, con un valore di 68 (media) nell’esecuzione dei test con jQuery. Il più lento, invece, è risultato Flock, nonostante provenga dalla stessa “madre” Mozilla. Questo pessimo risultato di Flock è davvero curioso visto il suo taglio Social Network; perchè sono proprio i Social Network Web 2.0 a sfruttare molti dei framework Javascript disponibili, così da fornire un’esperienza di navigazione ed interazione davvero innovativa.
A sorpresa Opera batte FireFox e anche di un bel po’, ottenendo addirittura un 74 nell’esecuzione di Dojo! FireFox e Safari, tutto sommato, si assomigliano, con Safari più rapido nei test con Mootools e jQuery.

Quale framework scegliere?

Se non badiamo ai test sulla velocità di esecuzione e non ci preoccupiamo della dimesione in Kbytes dei framework stessi, la risposta potrebbe essere “quello che più vi piace” o, se preferite, “quello che conoscete meglio o vi risulta più armonico con il vostro stile di programmazione”.
In ultima analisi questi framework si assomigliano un po’ tutti (vedi l’uso del $ ad esempio), nonostante alcune importanti e sostanziali differenze che possono saltare agli occhi di un esperto o nell’uso davvero spinto di una particolare libreria. In linea di massima, infatti, tutto quello che si può realizzare con jQuery, ad esempio, lo si può fare benissimo con mootools o prototype! Se jQuery vanta una sintassi estremamente compatta, in quanto tutti i metodi restituiscono sempre l’oggetto base jQuery, creando così file interminabili di oggetto.metodo().metodo().metodo()... non è detto che questo sia a tutti i costi un punto di forza, soprattutto per chi dovrà fare il debug!
Librerie come prototype.js peccano forse in assenza di effetti grafici, anche semplici, costringendo lo sviluppatore ad implementare spinoff come scriptaculous.js, pesanti e distanti dalla libreria inizialmente scelta.

Un esempio

Proprio quest’ultimo motivo, ad esempio, mi ha portato a sostituire l’accoppiata prototype/scriptaculous con jQuery per realizzare i pannelli interattivi/animati qui nella sidebar di undolog.com. In effetti, usando anche Google API per importare le librerie, è uno spreco caricare tutta la libreria scriptaculous per uno slideDown e slideUp. A titolo informativo e di esempio, ecco com’era il codice Javascript con l’accoppiata prototype/scriptaculous:

1
2
3
4
5
6
7
8
9
10
11
12
13
// prototype/scriptaculous
$$('h2.dropdown').each(
    function(element) {
        element.style.cursor="pointer";
        element.observe('click',
            function(event) {
                if( this.next().style.display == "" ) new Effect.BlindUp(this.next(),{duration:.5});
                else new Effect.BlindDown(this.next(),{duration:.3});
                Event.stop(event);
            }
        )
    }
);

e com’è adesso con jQuery:

1
2
3
4
5
6
7
8
9
10
// jQuery
$('h2.dropdown').each(
    function(i) {
        $(this).css('cursor','pointer').click(
            function() {
                if( $(this).next().is(':hidden') ) $(this).next().slideDown(); else $(this).next().slideUp();
            }
        );
    }
);

Tutto sommato, a ben guardare, non mi sembra ci sia moltissima differenza! Ma come dicevo prima… è questione “anche” di gusto personale.

Continua...

Flick e Flock

Se c’è una cosa che Mozilla sa fare bene sono i browser!

Flock

Flock è un browser con tutta una serie di funzioni per i social network e i blog. Disponibile per Mac, Linux e Windows propone una nuova esperienza di navigazione a chi, come me, possiede diversi account nei social network (FaceBook, Twitter, YouTube, … ) e vuole anche gestire i Feed RSS in modo armonico e rapido.

Installazione

Se avete FireFox (che non dovete disinstallare) tutte le vostre impostazioni possono essere trasferite in Flock durante il primo utilizzo: cookie, password, preferiti, tutto insomma. Dopo aver utilizzato Flock per qualche minuto, mi è venuto spontaneo rimuovere l’ottimo FeedReader, ormai inutile vista l’eccellente gestione dei Feed di Flock.

Caratteristiche

Oltre a possedere numerose caratteristiche simili a FireFox, cosa che lo rende immediatamente fruibile, Flock permette:

  • Blog Editor
    Semplice ma efficace editor per la pubblicazione di Post sui nostri Blog. Supporta sia Blog personali che piattaforme come WordPress, Blogger e Live Journal. Ottima la funzione “appunti”, la Web Clipboard, presente in varie sezioni del browser
  • Pannello People
    Tramite il semplice Drag & Drop è possibile condividere istantaneamente link ed immagini con i nostri contatti, recuperati da Twitter, Facebook, YouTube o Flickr
  • Media Bar
    Flock è in grado di riconoscere automaticamente numerose funzionalità quando si entra in un sito Web (Blog o Social Network). Ad esempio entrando in YouTube o Flickr verrà apera una Media Bar in alto dove è possibile scorrere orizzontalmente filmati e foto permettendo di inviare o copiare il contenuto immediatamente
  • Search Engine
    Anche la gestione della ricerca è del tutto personalizzabile (come accade già in FireFox grazie allo standard Open Search) permettendo di aggiungere facilmente tutta una serie di motori di ricerca alternativi, sia da una lista proposta sul sito di Flock sia tramite il riconoscimento automatico presente in un sito
  • Plugin ed estensioni
    Anche Flock come FireFox possiede già numerose estensioni, arma che si è rivelata vincente proprio per FireFox. Alcune sono specificatamente per Flock anche se è possibile trovare qualche “porting” di note estensioni per FireFox
  • Gestione dell’invio di foto
    Grazie al Photo Uploader è possibile utilizzare un’applicazione interna a Flock per inviare rapidamente le nostre foto su Flickr o Facebook.

Continua...