babox / blog

Tradotto (non integralmente) da Making Wii-friendly pages di Mark 'Tarquin' Wilton-Jones

Introduzione
Il browser della Wii è basato sul motore grafico di Opera 9 ed ha quindi, a parte alcune piccole differenze relative all'interfaccia, le stesse capacità HTML, CSS e script (inclusoXMLHttpRequest/AJAX) di Opera 9 per Desktop.

La maggior parte delle pagine web sono disegnate per gli schermi dei computer desktop, le cui risoluzioni possono essere 800x600 pixel, 1024x768 o maggiori. Gli schermi delle tv sono di solito più piccoli e la risoluzione può diminuire anche di più a causa di inefficienze della televisione. Ad ogni modo, con il browser Wii, questa bassa risoluzione non è generalmente un problema.

Come Opera visualizza le pagine web sulla Wii
Anziché riformattare la pagina per cercare di adattarla allo schermo, Opera Wii la impagina come se stesse usando uno schermo virtuale di 800 pixel di larghezza. L'altezza della finestra virtuale del browser cambia in base ad alcune impostazioni e può variare tra 376 e 660 pixel di altezza. La pagina viene quindi ridotta per adattarla al display della televisione dell'utente. Se la pagina ha bisogno di una maggiore dimensione rispetto a quella della finestra virtuale del browser, l'utente può scorrere in qualsiasi direzione necessaria per vedere il resto della pagina.

Con una televisione di buona qualità, la maggior parte delle pagine web possono essere utilizzate e visualizzate così come sono (anche se può essere un po' difficile). In alcuni casi la pagina può non essere abbastanza comoda da leggere, così può essere zoomata per leggere le parti a cui l'utente è interessato. Lo zoom è disponibile sia manuale, l'utente può aumentare o diminuire la dimensione dello zoom quanto vuole, che automatico. Lo zoom automatico capirà a quale parte l'utente è interessato basandosi sulla posizione a cui il controller punta e cercherà di zoomare il tanto giusto per adattare il contenuto al display della televisione.

Ciò ha alcuni limiti. Se il contenuto desiderato è troppo largo, oltre i 640 pixel, non può essere visualizzato tutto con lo zoom. Se il contenuto è troppo stretto, sotto i 250 pixel, non può essere sufficientemente zoomato per adattarlo perfettamente al display. Nel primo caso il browser zoomerà ad un valore nominale e l'utente dovrà scorrere lateralmente per vedere il resto del contenuto. Nel secondo caso verrà mostrato anche un po' di contenuto circostante.

La finestra virtuale del browser
La Wii può essere utilizzata in modalità normale (4:3) o in widescreen (16:9), se la televisione supporta il formato sedici noni. La barra degli strumenti del browser può essere impostata per essere sempre visualizzata, per nascondersi automaticamente o per attivarla quando l'utente preme un tasto. L'utente inoltre può cambiare la larghezza della visualizzazione per compensare le inefficienze della propria televisione.

In base alla larghezza impostata dall'utente, alle impostazioni widescreen e se la barra degli strumenti è impostata o meno per nascondersi, l'area visibile della pagina può essere ovunque tra i 376 e 660 pixel di altezza.
Le seguenti altezze indicano sia i casi in cui la barra degli strumenti è impostata per essere sempre visualizzata sia quelli in cui è usata la modalità widescreen:

376-420

Widescreen con barra degli strumenti impostata per essere sempre visualizzata.

452-496

Widescreen con barra degli strumenti impostata per nascondersi automaticamente.

500-560

Schermo normale con barra degli strumenti impostata per essere sempre visualizzata.

600-660

Schermo normale con barra degli strumenti impostata per nascondersi automaticamente.

Il seguente JavaScript riconosce automaticamente queste impostazioni; nota che le impostazioni possono essere cambiate dopo che la pagina si è caricata:

var toolbar, widescreen, tempheight = window.innerHeight;
if( tempheight >= 376 && tempheight <= 420 ) {
  toolbar = true;widescreen = true;
} else if( tempheight >= 452 && tempheight <= 496 ) {
  toolbar = false;
  widescreen = true;
} else if( tempheight >= 500 && tempheight <= 560 ) {
  toolbar = true;
  widescreen = false;
} else if( tempheight >= 600 && tempheight <= 660 ) {
toolbar = false;
widescreen = false;
}

Nota inoltre che proprietà come screen.height dovrebbero essere evitate poiché

riguardano le dimensioni di uno schermo virtuale e non quelle reali dello schermo o lo spazio usato dalla finestra virtuale del browser.

Indirizzi delle pagine e form
Visto che la Wii non è disegnata per essere un computer desktop, non usa una tastiera tradizionale. Usa invece una tastiera su schermo che è mostrata al posto delle pagine web. La tastiera su schermo offre un set di tasti abbastanza completo, ma è ben lontanta da essere tanto rapida quanto una tastiera regolare. L'utente ha bisogno di puntare il Wiimote sulla lettera e premere un tasto. è possibile attivare il completamento automatico che può però completare parole solo nella lingua scelta dall'utente ed alcuni domini comuni. Non può mostrare una lista di indirizzi precedentemente visitati, quindi non è possibile modificare questi.

Per scrivere in stampatello è necessario premere un ulteriore tasto. Alcuni caratteri, come quelli accentati, richiedono una ricerca attraverso un set extra di caratteri disponibili. Alcuni non possono essere digitati affatto, come la W gallese con accento circonflesso (Ŵ), la L tagliata polacca (Ł), caratteri arabi e così via. Non è presente inoltre una funzionalità copia/incolla, quindi scrivere i caratteri vicino all'input per permettere all'utente di copiarceli non è una possibilità da considerare.

Indirizzi lunghi richiedono maggior tempo per essere digitati. Indirizzi che mischiano maiuscole e minuscole richiedono che l'utente prema tasti ulteriori per attivare o disattivare il maiuscolo/minuscolo. Indirizzi che usano caratteri accentati sono particolarmente laboriosi. Per esempio, il seguente indirizzo è molto difficile da digitare:

www.example.com/2007/20/01/{Touche}?id=17+om

Questo invece è molto più comodo:

example.com/touche

Ciò riguarda anche i form. Quando si riempe un form, aiuta che il form possa offrire il maggior numero di informazioni possibile. Per esempio, se ci si attende che un determinato campo inizi con "http://", allora sarà utile avere questo come valore predefinito dell'input. Bisogna evitare di forzare gli utenti a digitare se non devono. In alcuni casi, le pagine richiedono che l'utente riempa un campo di un form anche se quel form non è veramente essenziale. Ciò significa che l'utente si deve sforzare a digitare anche se non dovrebbe, e ciò potrebbe essere sufficiente per spingere gli utenti Wii a non compilare il form affatto.

Alcuni tipi di input possono essere utilizzati al posto di semplici input testuali. Se un input prevede una scelta tra un numero determinato di valori, potresti usare un input SELECT. Inoltre, così come in Opera 9 per desktop, Opera su Wii supporta i Web Forms 2.0. Ciò significa che in molti casi, la quantità di digitazione richiesta può essere ridotta usando un input nativo. Prendiamo, per esempio, il campo di un form che rappresenta una data. Tradizionalmente, verrebbe usato un normale input testuale:

<input type="text" name="somedate">

Potresti anche usare l'input date per fare ciò ed Opera mostrerà all'utente un calendario dove la data può essere rapidamente selezionata:

<input type="date" name="somedate">

I browser che non supportano i Web Forms 2.0 mostreranno invece un normale input testuale (v. esempio).

Nota che i form hanno due ulteriori limiti. In primo luogo, l'input file non è disponibile e verrà sempre disabilitato. Ciò significa che non è possibile caricare file. In secondo luogo, il modo in cui la tastiera funziona non permette l'invio di un form tramite il tasto Invio. Se il form è disegnato per essere inviato, dovresti sempre fornire un tasto di invio o un'immagine e non contare sulla possibilità per l'utente di premere il suo tasto Invio per inviare il form.

Cronologia navigazione
Per ridurre al minimo l'utilizzo di risorse, Opera su Wii ha un limite massimo di 6 indirizzi per la finestra principale e sei per i pop-up. Ciò significa che nella finestra del browser l'utente può usare il tasto Indietro per un massimo di cinque volte per vedere le pagine precedenti nella propria cronologia.

Se un visitatore segue i link per più di quella profondità nel tuo sito e vuole tornare alla pagina principale, dovrà trovare un link che punti a questa o digitarla nuovamente. Non è possibile vedere o modificare la lista della cronologia ed inoltre non si può modificare l'indirizzo della pagina visualizzata per ridurre la digitazione. La digitazione è certamente non gradita, quindi è meglio assicurarsi che ogni pagina abbia un evidente link per tornare alla pagine iniziale o almeno ad una sezione che linki alla pagina principale.

Considerazioni speciali - CSS
Opera su Wii è un browser tv ed usa, come modalità predefinita, il media tv. Ad ogni modo, visto che la maggior parte dei siti non è predisposta per il media tv, se questo non esiste nei fogli di stile, usa il media screen. Poiché Opera Wii è disegnato per comportarsi come un browser desktop, ciò gli permette di funzionare bene con la maggior parte dei siti, ma allo stesso tempo ti permette di dare stili specifici da browser tv se ritieni ne abbia bisogno.

Conformemente alle specifiche CSS, quando Opera applica il media tv, usa solo questo tipo di media e non unirà media tv e screen allo stesso tempo. Se hai intenzione di usare il media tv per una pagina, non puoi usare il media screen per lo stile principale e poi sovrascrivere solo alcuni stili con il primo, perché Opera userà solo il media tv e ignorerà il contenuto del media screen. Dovresti invece o utilizzare completamente il media tv oppure assicurarti che le parti principali del tuo foglio di stile si applichino a tutti i tipi di media ed in seguito sovrascrivere usando una sezione specifica per il media tv.

L'utente può attivare opzionalmente lo Small Screen Rendering di Opera, ma diversamente da Opera Mobile, questo agirà sul media screen ignorando l'handheld.

Opera su Wii supporta inoltre le media queries dei CSS3, che ti permettono di adattare il layout del tuo sito alla risoluzione del display che Opera usa. Il media query funzionerà con la dimensione della finestra virtuale usata da Opera, quindi la larghezza è 800 e l'altezza è quella della finestra virtuale in uso.

Se il design della tua pagina è inutilizzabile quando la finestra del browser è ridimensionata a 800x376, non funzionerà su Opera Wii (consiglio: usa Opera Desktop e imposta la preferenza "Mostra le dimensioni della pagina Web nella barra del titolo" in Strumenti > Preferenze > Avanzate > Navigazione). Comunque, supponendo che usi i CSS per definire il tuo layout, puoi usare le media queries per definire un diverso layout per finestre del browser con dimensioni diverse. Per esempio, se il tuo design non può essere usato quando la finestra del browser è di 900px larga o meno, puoi stabilire stili diversi per spazi più piccoli in questo modo:

#nav {
  float: left;
}
...
@media all and (max-width: 900px) {
  #nav {
    float: none;
  }
  ...
}

Se organizzi il layout della tua pagina in colonne, ti può essere utile assicurarti che ogni colonna sia meno di 640 pixel di larghezza. Questo assicurerà che lo zoom automatico possa essere eseguito in modo ottimale, così da permettere all'utente di leggere il contenuto senza dover scorrere ripetutamente di lato.

Ci sono anche altre considerazioni che devono essere fatte per gli schermi dei televisori. In generale questi hanno difficoltà con i contrasti elevati e ciò può causare un esagerato luccichio dei colori. Solitamente è meglio cercare di evitare contrasti elevati sui display dei televisori, ma in particolare, evitare grandi aree di rosso vivo. Ciò significa, per esempio, che una zona rosso vivo non dovrebbe essere messa vicino a una bianca. Vedi esempio (attenzione: potrebbe dare molto fastidio in alcuni display).

Nota inoltre che visto che Opera su Wii usa il media tv se è presente, tu puoi usare questo tipo di media per creare un foglio di stile diverso.

Font
Nella Wii sono disponibili solo due font: un generico font sans-serif chiamato "Wii NTLG PGothic" e un font monospazio chiamato "Wii NTLG Gothic". Questi sono apparentemente identici, ma la versione monospazio ha lo spazio interlettera leggermente regolato per mantenere la stessa larghezza per ogni lettera. Di conseguenza, non ha importanza che tipo di font la tua pagina cerchi di usare, perché Opera Wii mostrerà sempre lo stesso font sans-serif e apparirà sempre in questo modo anche se cerchi di usare qualsiasi altro font. I font possono essere visualizzati in normale, grassetto, small-caps e diverse dimensioni, ma non in corsivo.

I font contengono tutti i caratteri dal set ASCII, caratteri latini di base accentati, caratteri greci di base, la maggior parte dei caratteri giapponesi e dei caratteri di cinese semplificato, un ampio numero di caratteri di cinese tradizionale, caratteri cirillici comuni ed alcuni dei simboli più diffusi. I caratteri dalla maggior parte delle altre scritture non sono disponibili, come per esempio devanagari, arabo e hangul. Non vengono inoltre forniti alcuni caratteri meno comuni dai set di caratteri disponibili, come quelli usati da ungheresi o gallesi. Se i caratteri non sono disponibili nel font, verranno sostituiti con un simbolo quadrato.

Considerazioni speciali - JavaScript
Il JavaScript è forse la parte che mostra le maggiori differenze tra Opera Desktop e Opera Wii.

Così come per i CSS, i javascript vedranno la dimensione della finestra virtuale e non la reale risoluzione della tv: window.innerWidth e proprietà simili come document.body.clientWidth saranno tutte 800. window.innerHeight e proprietà simili come document.body.clientHeight avranno tutte l'altezza della finestra virtuale. Proprietà come screen.height non possono essere usate.

È comunque nell'interazione con l'interfaccia che si trovano le maggiori differenze. Visto che il browser rimane sempre a schermo intero, le finestre non possono essere ridimensionate. I pop-up sono supportati, ma sostituiscono la pagina, vengono mostrati massimizzati e non possono essere ridimensionati. La pagina aperta è nascosta dietro il pop-up e l'utente ci può ritornare usando il tasto Indietro. Non è possibile aprire più di un pop-up contemporaneamente, quindi se un pop-up ne apre un altro, quest'ultimo sostituirà il primo.

La pubblicità è pessima in questo, quindi viene usato un pop-up blocker impostato per bloccare le finestre pop-up non volute. Se il tuo sito utilizza i pop-up, dovresti assicurarti che vengano aperti solo su richiesta (come quando l'utente clicca un link), mai più di uno alla volta, ed assicurarti che i pop-up non si aprano mentre una nuova pagina viene caricata nella finestra aperta.

Anche le dimensioni dello schermo possono dare origine ad alcuni limiti. In particolare, i menu DHTML possono essere un problema se contengono troppi item. Possono essere illeggibili se il testo è piccolo e quando l'utente zooma per vedere meglio possono estendersi oltre le dimensioni dello schermo. Visto che scorrere la pagina richiede lo stesso controller, l'accesso ai menu con item può diventare molto difficoltoso, poiché potrebbero chiudersi quando l'utente cerca di scorrere per vedere il tasto.

A causa dei limiti di interazione della tastiera, Opera su Wii non supporta designMode o contentEditable, usato per creare controlli di rich text editing. La maggior parte degli script che fornisce questi controlli riconosce se il browser li supporta e può mostrare al loro posto una normale area testuale. Il supporto per il rich text editing può essere rilevato usando questo codice:

if( typeof(document.designMode) != 'undefined' || typeof(document.body.contentEditable) != 'undefined' )

Event detection
Quando il Wiimote viene usato come un mouse, agisce sugli stessi eventi come farebbe un normale mouse, tipo mouseover, mousemove e mousedown, con l'eccezione dell'evento dbclick. Non esiste l'equivalente del tasto destro del mouse, quindi i menu contestuali non possono essere usati.

Molte pagine, ed in particolare giochi, fanno uso della key detection. Controllano quando l'utente preme un tasto ed eseguono un determinato script quando ciò avviene. La maggior parte di queste pagine funzionano anche con un mouse, ma alcune pagine potrebbero aver comunque bisogno di un'interazione con la tastiera. Non è possibile usare la tastiera su schermo, eccetto con un input testuale. La tastiera su schermo non può inviare alcun evento da tasto alla pagina. Ciò significa anche che non è possibile per l'utente usare tasti come Shift, Ctrl o Alt mentre si clicca sulla pagina.

Gli unici eventi che possono essere attivati tramite tasto sono quelli inviati dai tasti del Wiimote. Alcuni di questi eseguono funzioni che non possono essere riconosciute, ma la maggior parte può essere riconosciuta ed usata dagli script. Le proprietà degli eventi keyCode non sono le stesse usate in ambito desktop, dove disponibili, poiché eseguono funzioni di combinazioni di tasti e non di singoli tasti. Le proprietà keyCode per questi tasti sono:

Controllo direzionale su/giù/sinistra/destra

175/176/178/177 - la tastiera normale usa 38/40/37/39 per le frecce

Tasto A (tasto normale di selezione)

13 - funziona solo come tasto quando il cursore del mouse non è usato, altrimenti è il tasto sinistro del mouse

Tasto B (grilletto)

171

+ e - (zoom in e out)

174 e 170

Button 1 (attiva la visualizzazione della barra degli strumenti)

172

Button 2 (attiva lo Small Screen Rendering)

173

Se l'utente usa una combinazione di tasti, come B+Up, questi verranno visti come due eventi separati, ma la sequenza dovrebbe mostrare che è stata usata una combinazione. Nota che questo schema funzionerà solo se gli eventi associati vengono cancellati.

L'evento può e dovrebbe essere cancellato se desideri usare gli eventi per sovrascrivere il normale comportamento dei tasti. Per esempio, se desideri usare il controllo direzionale per fornire risposta direzionale in un gioco, puoi riconoscere la digitazione di questi tasti ed usarli anziché i tasti delle frecce. Ad ogni modo, questi tasti cercheranno di scorrere intorno alla pagina. Per impedire lo scorrimento è necessario usare o return false o il metodo preventDefault dell'oggetto event. Ovviamente è importante assicurarsi che lo scorrimento non sia realmente necessario per l'utente.

document.onkeypress = function (e) {
  if( e.keyCode == 175 || e.keyCode == 38 ) {
    moveup();
    return false;
  } else if( e.keyCode == 176 || e.keyCode == 40 ) {
    movedown();
    return false;
  } else if( e.keyCode == 178 || e.keyCode == 37 ) {
    moveleft();
    return false;
  } else if( e.keyCode == 177 || e.keyCode == 39 ) {
    moveright();
    return false;
  }
  //allow other keys to work
  return true;
};

Nota che il tasto 1 può essere riconosciuto, ma il suo evento non può essere cancellato.

Immagini e plug-in
Per quanto riguarda le immagini Opera su Wii ha le stesse capacità di Opera. Ciò comprende JPEG, GIF, PNG (con trasparenza alfa), BMP, ICO, SVG 1.1 e canvas. Se le tue immagini vengono visualizzate correttamente in Opera 9 Desktop, allora dovrebbero funzionare anche su Wii. Con i plug-in comunque ci sono alcuni limiti importanti. Attualmente è disponibile solo un plug-in per la Wii ed è il plug-in Adobe Flash Player 7. Opera su Wii non è in grado di eseguire download, quindi l'utente non può scaricare altri plug-in su richiesta.
L'attributo wmode="transparent" non è supportato, quindi il contenuto del plug-in che si prevede sia trasparente non dovrebbe esser fatto in modo tale da sovrapporsi ad altro contenuto, poiché lo oscurerebbe.

La Wii ha un processore con delle prestazioni che sono meno della metà di quelle della maggior parte dei computer desktop e con circa un decimo della RAM disponibile. Di conseguenza può avere problemi con pagine web che cercano di visualizzare centinaia di immagini o grandi video Flash. In particolare, player video scritti in Flash possono avere problemi di buffering se sono in streaming, visto che finiscono rapidamente la memoria disponibile.

La maggior parte dei giochi in Flash, ad ogni modo, funziona correttamente, poiché non è molto esigente di memoria. Comunque, è importante notare che questi giochi hanno gli stessi limiti del JavaScript per l'interazione tramite tastiera. Ciò significa che giochi che richiedono che l'utente prema la barra spaziatrice, per esempio, non funzioneranno. Flash inoltre riconosce un numero molto limitato di tasti del Wiimote: può vedere solamente il puntatore del mouse ed il click con il tasto sinistro del mouse.

È possibile riconoscere i tasti del Wiimote usando JavaScript, ma poiché la comunicazione tra JavaScript e plug-in normalmente richiede Java, e questo non è disponibile su Wii, ciò significa che JavaScript non può comunicare direttamente la pressione dei tasti al video Flash.