Un sito ottimizzato per Wii

Con gli articoli di Daniele Cerra dedicati alla creazione di interfacce efficaci per Wii (primo, secondo) abbiamo esplorato i problemi cruciali da prendere in considerazione nella realizzazione di siti e/o applicazioni per un sistema che, pur sfruttando il protocollo HTTP, offre al web designer una serie di sfide diverse rispetto a quelle poste dal lavoro per i browser desktop tradizionali.

In questo articolo conclusivo della serie ci concentreremo su un aspetto specifico: l'adattamento di siti e pagine al browser Opera per Wii (che, lo ricordiamo, è presentato sulla console come Canale Internet). Non prenderemo in considerazione la soluzione Flash, rimanendo ancorati ad un ambito in particolare: l'adattamento via CSS. Si tratta di una raccolta di semplici trucchi e suggerimenti senza pretese di esaustività, e rivolta essenzialmente a siti di piccole dimensioni e di facile gestione.

Cose da sapere

Prima di iniziare a progettare una versione di un sito adatta alla visualizzazione con Opera per Wii è fondamentale conoscere caratteristiche e limiti di questo browser, soprattutto collegandole alle caratteristiche e ai limiti del mezzo su cui visualizziamo pagine e siti: lo schermo televisivo. Dal momento che si parlerà soprattutto di cose legate al web design con i CSS, rimando al sito ufficiale per una panoramica delle funzionalità generali, per video dimostrativi e screenshot.

Navigando con Opera per Wii sulla pagina dei test del servizio Browserhawk, otteniamo una panoramica completa delle sue funzionalità. La versione finale (rilasciata il 14 aprile scorso) è basata su Opera 9.10. La stringa dello user agent con cui si presenta è questa: Opera/9.10 (Nintendo Wii; U; ; 1621; en). Per la versione beta uscita a dicembre del 2006 era invece questa: Opera/9.00 (Nintendo Wii; U; ; 1309-9; en).

Dalla versione per PC, quella per Wii eredita il supporto pieno dei CSS, superando come il fratello maggiore il test Acid 2. E presentando un supporto embrionale di alcune parti della specifica CSS3 come le Media Queries.

Javascript è abilitato di default. La versione supportata è la 1.5. Supportati anche l'oggetto XMLHttpRequest, la manipolazione del DOM per effetti DHTML, Flash (purtroppo solo la versione 7), il formato PNG, i cookies, il protocollo SSL. Niente Java, PDF, Active-X e plug-in per la visualizzazione di file multimediali. I colori: 16,77 milioni (32 bit).

Risoluzione e dimensioni dello schermo

Su una TV tradizionale con rapporto di visualizzazione di 4:3 la larghezza disponibile è di 800px (1024px su TV widescreen). L'altezza massima è di 664px, che si riduce però ad un'altezza disponibile di 560px se si tiene attivata la barra degli strumenti inferiore. Di fatto, si lavora in una condizione più vantaggiosa rispetto all'ambito desktop, poiché il campo delle possibilità rispetto a dimensioni della finestra e risoluzione è molto più ristretto.

Ho preparato una semplice pagina di test per rendere evidente il tutto. Aprendola con Opera per Wii su una TV 4:3 e tenendo attivata la barra, il div verde dovrebbe occupare lo schermo intero avendo width: 800px ed height: 560px. Spostandosi appena verso destra con il Wiimote, si vedrà apparire il div rosso che ha width: 1024px. Verso il basso invece apparirà un div bianco messo come segnaposto per verificare l'altezza.

Riassumendo: la risoluzione minima di cui tenere conto per adattare pagine e layout è di 800x664px (tenendo conto però che l'altezza dsponibile può scendere a 560px). Di fatto, basta navigare 5 minuti per verificare che, per esempio, su una TV tradizionale 4:3 le pagine di siti a dimensioni fisse in larghezza superiori agli 800px vengono tagliate sulla destra, rendendo necessario lo scrolling orizzontale per accedere ai contenuti nascosti. Niente problemi per i siti fluidi o elastici che si adattano a larghezze di 800px e inferiori, così come per quelli a larghezza fissa di 800px o inferiore.

Il testo

Conoscere gli scenari possibili in fatto di larghezza, altezza e risoluzione dello schermo è un primo e fondamentale passo per un'operazione di adattamento. L'altra questione cruciale è legata al testo. Come hanno potuto verificare tutti quelli che hanno usato solo una volta il browser, dimensioni buone per il PC risultano del tutto inadeguate per lo schermo televisivo, tenendo soprattutto conto della distanza da cui si guarda lo schermo nelle due situazioni.

Opera per Wii offre due strumenti per ovviare a tale handicap.

Il primo è uno zoom, che però non ingrandisce solo e semplicemente il testo ma la porzione della pagina su cui si è puntato il Wiimote. Significa che zoomando su queste parti vengono automaticamente sacrificate le parti che la circondano e che per muoversi su una pagina così ingrandita è necessario affidarsi allo scrolling orizzontale e/o verticale.

Il secondo (attivabile con la pressione del tasto 2 del Wiimote) è paragonabile alla visualizzazione 'Schermo ridotto' di Opera desktop. Effettua una sorta di linearizzazione del layout, riducendo tutto ad una singola colonna, presentando i vari div nell'ordine in cui sono presenti nel markup e adeguando automaticamente le dimensioni del testo, che risulta così leggibile.

Ma volendo creare un CSS adatto a Wii, quali dimensioni sarà opportuno adottare per il testo? Una traccia l'ha data la stessa Nintendo. Subito dopo l'uscita della console, qualcuno si è ingegnato per accedere via PC al Canale Shopping (che di fatto è un mini-sito di e-commerce). È stato così possibile recuperare tutti i CSS, i Javascript e la grafica accessoria (anche quella usata per i caratteristici pulsanti). Li potete scaricare e consultare partendo da questa pagina del blog WiiNintendo.net.

Osservando il codice del CSS, si intuisce che non bisognerebbe mai scendere sotto i 18px per parti di testo importanti, e che dimensioni inferiori sono accettabili solo per sezioni accessorie. Si nota anche che il font predefinito su Wii (e quindi anche su Opera per Wii) è Wii NTLG PGothic JPN Regular (un sans-serif). Il foglio di stile ci dà anche una traccia rispetto ai colori del testo e dei link. Se, insomma, volete creare una versione di un sito adatta alla console che riprenda in parte o in tutto gli stili di default adottati da Nintendo, è da salvare.

Sulla scorta di questa scoperta, sono nati i primi esperimenti. La linea di adottare colori e stili di Nintendo è stata scelta dall'autore del più interessante tra questi esperimenti. David Harper ha creato un plugin/tema per WordPress che ottimizza un blog per la fruizione tramite Wii. Cosa fa? Semplice. Identifica questa particolare versione di Opera tramite la stringa dello user agent e serve una versione specifica e adattata del sito. Anche se non usate WordPress e non avete intenzione di adattare il vostro blog a Wii Opera Browser, vi consiglio ugualmente di scaricare il pacchetto zip e di dare un'occhiata al CSS allegato: è una buona fonte di ispirazione per regolarsi con aspetti come dimensioni del testo, colori, etc.

Volendo, è possibile verificare con Firefox come lavora questo plugin. Basta scaricare e installare l'estensione User Agent Switcher. Poi, si accede tramite Tools > User Agent Switcher > Options > Options al pannello di configurazione dell'estensione. Si sceglierà la voce User Agents a sinistra e si cliccherà su Add per aggiungere una nuova voce. Le impostazioni da inserire sono le seguenti:

A questo punto, da Tools > User Agent Switcher, selezionate l'opzione Wii Final e navigate sul sito http://www.wiinintendo.net. Vedrete apparire la versione ottimizzata per Wii del sito.

Layout

Il plugin di Harper è un'ottima fonte di riflessione e ispirazione per diversi motivi. Innazitutto ci dà un'idea di come bisognerebbe agire su contenuti e layout in vista di un possibile adattamento di pagine per Wii. Il confronto con la versione normale di WiiNintendo.net mostra come si sia adottata la scelta di sfoltire i contenuti, eliminando quasi tutte le sezioni accessorie del blog, presentando in prima pagina una semplice lista degli ultimi post pubblicati, rendendo il testo leggibile e chiaro. Semplificare è la parola d'ordine, quindi. Evitare layout complessi (basta una colonna). Evitare assembramenti di contenuti inutili. Adeguarsi alle modalità di fruizione. Trovare il giusto compromesso rispetto alle funzionalità offerte (se si visualizza un singolo post, ad esempio, si nota che è possibile lasciare commenti, una funzione essenziale su un blog).

Strategie per l'adattamento

Come si accennava all'inizio, il modo migliore per adattare contenuti esistenti a Opera per Wii è forse quello di affidarsi ai CSS. La prima cosa che verrebbe in mente è quella di affidarsi ai Media Type. Purtroppo, non ci troviamo nella situazione dei browser per dispositivi mobili per cui è possibile servire un foglio di stile ad hoc tramite handheld. Il media type di Opera per Wii è lo stesso della versione desktop: screen.

Si dovrà quindi ricorrere ad altre soluzioni. Quelle, semplicissime, che presenteremo sono tutte basate sull'identificazione del browser a partire dalla stringa dello user agent.

Javascript

Volendo affidarsi a soluzioni client-side, ci viene incontro Javascript.

Primo esempio. È una pagina semplicissima, basilare. All'interno della sezione <head> </head> troviamo questo script:

Javascript provvederà, una volta identificato il browser come Opera per Wii, a servire un CSS specifico (wiistyle.css). Per tutti gli altri browser sarà adottato un CSS generico (style.css).

Per completezza riporto le semplici regole contenute in entrambi. wiistyle.css:

Ed ecco style.css:

Potete effettuare il test sulle pagine di esempio (contenute nello zip allegato) usando Firefox e User Agent Switcher come visto in precedenza.

Un'altra soluzione è quella del secondo esempio. In questo caso il codice Javascript è il seguente:

In questo caso si provvede a usare un regolare elemento link (con id!) per collegare un CSS esterno per tutti i browser. Con Javascript, identificato Opera per Wii, provvediamo a modificare l'attributo href di quell'elemento caricando un foglio di stile alternativo.

PHP

Una soluzione analoga si può ottenere con PHP. Ecco il terzo esempio. Ed ecco il codice usato in cssphp1.php:

Anche in questo caso si fornisce un CSS ad hoc dopo aver indentificato opportunamente Opera per Wii.

Sempre con PHP (ma il concetto è valido per tutti gli altri linguaggi simili) è possibile adottare una strategia alternativa. Invece che servire un CSS specifico per Opera Wii alternativo a quello per i browser desktop, si reindirizza l'utente ad una pagina ad hoc (è il sistema usato nel plugin per WordPress). Nel quarto esempio (tutti.php) , se il browser identificato è Opera Wii, l'utente viene portato sulla pagina wii.php, a cui è stato associato il foglio di stile wiistyle.css. Ecco il codice di tutti.php:

Non è questa la sede per analizzare scenari ed esempi più complessi. L'unica cosa da aggiungere è che scegliere la strategia del CSS specifico o quella del redirect implica la necessità di progettare con cura sin dall'inizio l'adattamento. Optando per la prima via, infatti, il markup e la struttura rimangono immutati e a cambiare è solo la presentazione fornita dal CSS. Nel secondo caso (vedi il plugin per WordPress), le pagine presentano strutture e contenuti completamente diversi. Chi vorrà cimentarsi saprà sicuramente valutare tutte le sfaccettature del processo. Noi per ora ci fermiamo qui.