Web Design  »  Articoli  »  Web design 

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.

Altri articoli

Altre guide

Altre newsletter