Il mondo dei browser web è ultimamente tornato al centro di accese discussioni.
Non si parla certo di terremoti violenti, ma piuttosto di scosse di assestamento,
in grado comunque di segnare il paesaggio per gli anni a venire. Tre notizie
vedono protagonista Microsoft. L'azienda di Redmond ha tracciato la sua road-map.
Pagando un indennizzo di $750.000 ha innanzitutto chiuso un periodo di polemiche
e contrasti con AOL. Il primo ISP americano potrà ora distribuire Internet
Explorer come browser di base senza pagare alcuna royalty.
Il secondo annuncio ha riguardato i piani di aggiornamento di Explorer. Il
software di navigazione più usato su Internet comparirà in una
nuova versione solo con il lancio del successore di Windows XP e non verrà
più distribuito come applicazione stand-alone. Per molti
significa uno stallo di fatto nell'implementazione di nuovi standard e linguaggi.
Chi si azzarderà, per dirne una, ad usare CSS3 se la nuova specifica
non sarà supportata dal browser di gran lunga più diffuso?
La terza notizia è relativa all'abbandono dello sviluppo della versione
Mac di Explorer. Anche qui il segnale è chiaro. Apple ha deciso di sviluppare
un software tagliato su misura per il suo sistema operativo (Safari). Noi facciamo
lo stesso con Explorer, che d'ora in poi sarà solo il browser di Windows.
Dall'alto di una base del 95% di utenti il ragionamento ha una sua fondatezza
(dal punto di vista di Microsoft, ovviamente).
A rimanere forse schiacciata in questo panorama è l'idea del browser
multi-piattaforma alla base del progetto Mozilla. Su quel fronte la novità
di maggior rilievo è senz'altro la riscrittura del sistema, ora fondato
sul linguaggio XUL, concretizzatasi nel progetto
Firebird. Il destino del "lucertolone" sembra essere quello di
un browser di nicchia, per sviluppatori, web designer e cultori degli standard.
In questo articolo vedremo come, tra dotazione di base ed estensioni, Mozilla
possa considerarsi e diventare uno strumento potente e indispensabile per chi
sul web ci lavora. Nella seconda parte parleremo invece delle bookmarklets,
piccole applicazioni scritte in Javascript che consentono di ampliare e migliorare
il set di funzioni di un browser con utili strumenti al servizio degli sviluppatori.
La dotazione di base
Appena installato su un sistema, Mozilla si presenta con una dotazione di strumenti
per gli sviluppatori di assoluto rilievo. Nel menu Tools, sotto la voce Web
Developement, fanno bella mostra di sé: JavaScript Console,
Java Console, un debugger per JavaScript e
il DOM Inspector. Se i primi tre sono soprattutto al servizio
del programmatore a caccia di errori e bug nel codice, l'ultimo è una
specie di coltellino svizzero che ogni designer dovrebbe avere tra i sui ferri
del mestiere.
Una volta caricata una pagina inserendo l'URL nella barra in alto, vi troverere
di fronte ad una finestra a due pannelli (figura
1). In quello inferiore la pagina nella sua versione renderizzata e navigabile,
in quello superiore una rappresentazione della struttura ad albero del documento,
a partire dall'elemento radice. La rappresentazione mostra chiaramente le relazioni
di 'discendenza' tra i diversi elementi. Selezionando i singoli nodi, essi vengono
innanzitutto evidenziati con un bordo rosso sulla pagina, mentre nel pannello
superiore destro possiamo attingere a qualunque informazione lo riguardi: dai
dati di base sul nodo a quelli sul box model (dimensioni, margini, etc - figura
2), fino alle regole definite nel foglio di stile collegato alla pagina
(figura 3). Non c'è aspetto
di un qualunque documento che possa rimanervi oscuro.
Tabs, toolbar e menu contestuali
Essendo un progetto open-source, Mozilla ha migliorato il suo repertorio di
tool grazie all'opera di solerti sviluppatori. Questi strumenti possono grosso
modo suddividersi in tre categorie: tabs, toolbar e menu contestuali.
Le tabs sono riquadri che possono essere aggiunti alla sidebar
di Mozilla per personalizzarne i contenuti. Si tratta spesso di strutture ordinate
in forma di indice per accedere a riferimenti o guide presenti sul Web. Le due
migliori collezioni di tabs sono quelle di Netscape
DevEdge e Zvon.
In entrambi i casi l'intero set di elementi, attributi, metodi e proprietà
dei principali linguaggi standard del W3C a portata di click (figura
4, figura 5).
Le toolbar, invece, vengono installate come barre degli strumenti aggiuntive.
La menzione d'onore spetta alla PNH
Developer Toolbar. Dai suoi menu è possibile effettuare con estrema
comodità una serie di fondamentali verifiche sul documento (figura
6).
Validazione
Qualunque pagina visualizzata nel browser può essere sottoposta al controllo
della validità del codice. Oltre alla verifica di (X)HTML, CSS e link
presso il W3C e il validatore alternativo di HtmlHelp, è possibile sottoporre
la pagina al controllo di base sull'accessibilità rispetto alle Linee
Guida del W3C e alle norme della Section 508 effettuato dal 'classico' Bobby.
Layout
Altri strumenti consentono di valutare il rendering della pagina in particolari
condizioni, molte delle quali attinenti al problema dell'accessibilità
del contenuto in browser alternativi o datati. È possibile disabilitare i fogli
di stile o applicarne uno alternativo (ottimo per valutare rapidamente l'impatto
di CSS alternativi), eliminare le immagini, evidenziare i blocchi di testo o
le celle di tabella usate per il layout, ridimensionare la finestra per verificare
la resa della pagina a diverse risoluzioni.
Altri tool incorporati nella barra consentono, infine, di avere dettagli sui
form e sui cookies o di mostrare il codice sorgente della pagina in una nuova
tab, senza pertanto dover aprire una nuova finestra del browser.
L'ultimo strumento che prendiamo in considerazione si presenta, invece, nella
forma di menu contestuale, attivabile, insieme a quelli tradizionali, con un
semplice click destro del mouse. La segnalazione è per Checky,
punto di partenza per un numero infinito di verifiche su un documento. Scontata
la validazione del codice rispetto alle specifiche del W3C, normale quella con
Bobby, ma che dire del collegamento con il validatore di RSS o XML? O della
verifica della visualizzazione con browser testuali alla Lynx? O, ancora, del
test
di ottimizzazione del codice frutto del lavoro di Andrew King? Poche parole:
uno strumento comodo, eccezionale. Qui
la lista completa dei servizi. Un solo difetto: non funziona sul Mac.
E per Explorer?
Per quelli che di Explorer non sanno liberarsi nemmeno per fare qualche test
sulla pagina esiste un'alternativa. Niente toolbar o menu contestuali, ma un
programmino 'esterno' realizzato dalla software house Iconico: WebTools.
Semplice da usare: si apre contestualmente al browser di Microsoft, lo si piazza
in un angolo dello schermo e sinizia con controlli e verifiche. Il set di funzionalità
è molto vicino a quello dei tool per Mozilla visti in precedenza.
Bookmarklets
Esiste un altro modo per svolgere diverse operazioni utili in fase di sviluppo.
Si tratta delle cosiddette bookmarklets. Sono piccole applicazioni
Javascript che aggiungono funzionalità extra al nostro browser. Il nome
si spiega con la procedura di installazione e utilizzo. Una bookmarklet si presenta,
infatti, sotto forma di link testuale su una pagina da aggiungere alla barra
dei collegamenti o direttamente tra i propri bookmark. Una volta aggiunta, basterà
un click per attivarne il funzionamento. Cosa ci si può fare? Tante cose:
visualizzare i fogli di stile collegati ad un documento, elencare classi o codice
Javascript, controllare i link o i testi alternativi per le immagini. Una buona
raccolta, con FAQ e link ad altri siti, è quella messa insieme da
Jesse Ruderman. Ne troverete di ogni tipo, ma prestate sempre attenzione alla
compatibilità con i diversi browser. Una nota per gli utenti di Explorer
6. Il software di Microsoft ha (finalmente) introdotto pratiche di protezione
contro script maliziosi. Protezione elevata, però, significa anche bloccare
l'esecuzione di codice che non fa danni. Se qualcuna delle bookmarklet che deciderete
di provare non funziona, abbassate le barriere difensive e tutto tornerà
a posto.
I tool citati
| Zvon Sidebar |
| PNH Developer Toolbar |
| Checky |
| Webtools |
| Jesse Ruderman Bookmarklets |
