{"id":310,"date":"2012-10-04T10:55:18","date_gmt":"2012-10-04T08:55:18","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/testare-siti-web-nei-browser-delle-console-di-gioco\/"},"modified":"2012-10-04T10:55:18","modified_gmt":"2012-10-04T08:55:18","slug":"testare-siti-web-nei-browser-delle-console-di-gioco","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/testare-siti-web-nei-browser-delle-console-di-gioco\/","title":{"rendered":"Testare i siti web nei browser delle console di gioco"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/10\/n61a-web.png\" border=\"0\" align=\"left\" \/>Secondo alcuni studi del 2010 e del 2011, pi\u00f9 di un utente internet su otto nel Regno Unito, negli USA e in Francia (e circa un teenager Americano su quattro) usa una console di gioco per andare online.<sup><a href=\"#note1\">1<\/a><\/sup><\/p>\n<p>Non si tratta di una novit\u00e0: le capacit\u00e0 di internet furono introdotte nelle console nel 1997 con <a href=\"http:\/\/en.wikipedia.org\/wiki\/Game.com\">Game.com<\/a>, che permetteva agli utenti di caricare i propri punteggi collegando un modem dial-up e perfino di controllare le email e di visitare siti se dotati di apposita cartuccia per andare su internet.<\/p>\n<p>Ad oggi, le tre console principali (la Xbox 360 di Microsoft, la PlayStation 3 di Sony e la Nintendo Wii) hanno tutte la possibilit\u00e0 di connettersi a internet. La Xbox 360 \u00e8 l&#8217;unica di queste che non ha un browser ufficiale, ma <a href=\"http:\/\/www.youtube.com\/watch?feature=player_detailpage&amp;v=i7DOfYg9XDo#t=352s\">Microsoft ha annunciato<\/a> che a breve realizzer\u00e0 IE9 per la sua console. Alcune aziende si sono spinte cos\u00ec in l\u00e0 da progettare esperienze specifiche per le console, come <a href=\"http:\/\/www.google.com\/reader\/play\/#item\/new\/0\">la versione 2007 di Google Reader <\/a> per la Wii, che ora \u00e8 realizzato per tutte le console TV.<\/p>\n<p>Aggiungete una gran quantit\u00e0 di console portatili dotate di browser, come la PSP di Sony e la linea Nintendo DS ed avremo 15 anni di dispositivi di gioco di tutte le forme e dimensioni con capacit\u00e0 di connessione a internet. Tuttavia, finora abbiamo parlato molto poco dei browser delle console di gioco.<\/p>\n<p>\u00c8 ora che questo cambi.<\/p>\n<div class=\"illustration half left\"><a href=\"d\/testing-websites-in-game-console-browsers\/console-diagrams_full.png\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/10\/console-diagrams_thumb.gif\" border=\"0\" alt=\"Le console\" \/><\/a><\/p>\n<p><a href=\"d\/testing-websites-in-game-console-browsers\/console-diagrams_full.png\">Uno schema dei controller delle console per la navigazione internet.<\/a><\/p>\n<\/div>\n<p>Le console di oggi potrebbero offrire esperienze sotto la media con poca scelta di browser, ma non significa che dobbiamo ignorarle. Dopo tutto \u201cNon possiamo predire il comportamento futuro basandoci su una pessima esperienza attuale\u201d, come <a href=\"http:\/\/www.slideshare.net\/grigs\/the-immobile-web\">dice Jason Grigsby<\/a>.<\/p>\n<p>Dal momento che aumenta il numero di produttori di dispositivi che offrono connessione a internet e di smart TV, adesso \u00e8 il momento di pianificare il modo in cui i nostri siti si adatteranno a questi nuovi contesti e questo significa abituarsi al panorama delle console di gioco oggi disponibili.<\/p>\n<div class=\"paragrafo\">\n<h2>Chi usa il browser di una console di gioco?<\/h2>\n<p>Le console che si attaccano alla TV non sono solo per i giocatori. Attualmente vengono reclamizzate e vendute per le loro caratteristiche di &#8220;content-delivery&#8221;, come il Blu-ray e l&#8217;accesso a Netflix. Alcune console hanno anche delle app per Twitter, Facebook, Skype e Foursquare, quindi con tutta probabilit\u00e0 un utente potrebbe visitare il vostro sito attraverso una di queste.<\/p>\n<p>Secondo <a href=\"http:\/\/pewinternet.org\/Reports\/2010\/Social-Media-and-Young-Adults\/Part-2\/4-Gaming-devices.aspx\">Pew Internet<\/a>, l&#8217;80% dei teenager americani tra i 12 e i 17 anni ha una console di gioco e la met\u00e0 possiede un dispositivo di gioco portatile. Le console portatili sono pi\u00f9 popolari tra i giovani teenager, con i due terzi dei 12\/13enni che ne possiede una.<\/p>\n<p>Tra gli adulti, Pew ha scoperto che in generale, \u00e8 pi\u00f9 probabile che gli uomini abbiano una console di gioco ma le donne sono pi\u00f9 inclini ad avere una console portatile.<\/p>\n<p>Nel Regno Unito (UK), \u00e8 pi\u00f9 probabile che i giovani adulti tra i sedici e i ventiquattro anni abbiano una console di gioco e il 20% di questi visita i siti web usando la propria console. Tra i bambini di et\u00e0 compresa tra i cinque e i quindici anni, il 5% accede ad internet con una console di gioco pi\u00f9 spesso che con altri dispositivi. In effetti, questo gruppo di et\u00e0 \u00e8 pi\u00f9 incline ad accedere ad internet con una console che con un cellulare o un tablet.<sup><a href=\"#note2\">2<\/a><\/sup><\/p>\n<p>Tra tutte le fasce di et\u00e0, le console di gioco sono pi\u00f9 popolari dei tablet come dispositivi per navigare in internet, probabilmente perch\u00e9 \u00e8 pi\u00f9 probabile che le persone abbiano una console di gioco.<\/p>\n<p>Per farla breve, tanti tipi diversi di persone stanno usando i browser delle console di gioco per una serie di motivi. Nelle case in cui c&#8217;\u00e8 un PC, una console potrebbe essere un altro modo pratico per navigare in internet se c&#8217;\u00e8 competizione per il device pi\u00f9 tradizionale. Le console portatili sono popolari anche tra i genitori che non vogliono dare ai propri figli degli smartphone costosi. La Nintendo DS \u00e8 particolarmente diffusa tra i bambini della scuola primaria; in alcune scuole <a href=\"http:\/\/www.thisisgloucestershire.co.uk\/Nintendo-DS-games-used-pioneering-primary-school\/story-13861901-detail\/story.html\">\u00e8 perfino usata durante le lezioni.<\/a><\/p>\n<p>In passato, abbiamo commesso degli errori pensando a quali task vorrebbero completare gli utenti su dispositivi mobile, ma proprio come migliaia di clienti eBay <a href=\"http:\/\/www.uie.com\/brainsparks\/2012\/03\/09\/luke-wroblewski-examining-mobile-user-input\/\">comprano auto usando i cellulari<\/a> ogni settimana, alcuni utenti dei browser delle console di gioco fanno gi\u00e0 cose che potremmo considerare \u201cavanzate\u201d, come registrarsi sul sito di una banca con una PS3, come <a href=\"http:\/\/paulrobertlloyd.com\/2012\/05\/kiwibank\/\">hanno cercato di fare venti persone con Kiwibank<\/a> lo scorso anno.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Testare nei browser delle console<\/h2>\n<p>Sebbene possiate non essere in grado di testare i vostri siti su tutte le console esistenti, \u00e8 utile essere a conoscenza della loro esistenza e comprendere le loro stranezze cos\u00ec da poter costruire una buona esperienza per quante pi\u00f9 persone possibile. Per fare ci\u00f2, consideriamo tutti e tre i tipi principali di  console:<\/p>\n<ol>\n<li>Console che si collegano a uno schermo TV, come la Nintendo Wii, la PS3 di Sony e la Xbox 360 di Microsoft.<\/li>\n<li>Console portatili come la PSP di Sony e la Nintendo DS.<\/li>\n<li>Console-telefono, progettate primariamente come telefoni ma con pulsanti da console (a differenza delle console con funzionalit\u00e0 da telefono).<\/li>\n<\/ol>\n<p>Dal momento che <a href=\"http:\/\/adactio.com\/journal\/5622\/\">stanno spuntando dei siti di community testing<\/a> in tutto il mondo, ha senso inserirvi alcuni di questi tipi di console, in particolar modo quelle con le feature pi\u00f9 diverse.<\/p>\n<p>Per un testing device per una console TV, la Nintendo Wii ha un motion controller che \u00e8 utile per testare la navigazione di un sito. C&#8217;\u00e8 anche in uscita il nuovo Wii U, che avr\u00e0 un touchscreen sul controller che si collega alla TV. La PS3 di Sony \u00e8 utile per controllare la facilit\u00e0 di navigazione con un game controller tradizionale, mentre la Xbox 360 sar\u00e0 un device importante da provare quando avr\u00e0 la sua versione dedicata di IE9.<\/p>\n<p>Le due serie pi\u00f9 popolari di console portatili sono la Nintendo DS e la Sony PSP. La console portatile pi\u00f9 recente di Sony \u00e8 la PS Vita, che ha un modello con 3G opzionale e pu\u00f2 anche essere usata come controller della PS3. I modelli pi\u00f9 vecchi delle console portatili Sony con accesso a internet sono la PSP-1000, la PSP-2000, la PSP-3000 e la PSP Go (la PSP-E1000 non ha connessione a internet).<\/p>\n<p>Per la linea DS, la DSi e la 3DS sono utili perch\u00e9 hanno browser diversi. Le pi\u00f9 vecchie DS e DS Lite richiedono una cartuccia fisica con un browser e non hanno un browser pre-installato o disponibile via download, quindi \u00e8 probabile che meno persone navighino su internet utilizzando queste due console.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Testare nelle console TV<\/h2>\n<p>Un grande schermo TV non implica una definizione migliore. Il testo pu\u00f2 risultare spixellato e difficile da leggere, specialmente quando un browser ingrandisce il contenuto. Sebbene gli schermi TV siano generalmente pi\u00f9 grandi degli schermi dei desktop computer, chi li guarda si siede pi\u00f9 lontano, quindi potrebbero effettivamente apparire pi\u00f9 piccoli.<\/p>\n<h3>La PlayStation 3 di Sony<\/h3>\n<div class=\"illustration full left\">\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/10\/ps3.jpg\" border=\"0\" alt=\"La Playstation 3 di Sony\" \/><\/p>\n<\/div>\n<p>La PS3 ha un browser NetFront basato su WebKit. La larghezza del browser \u00e8 ristretta, quindi \u00e8 molto pi\u00f9 piccola della larghezza della TV.<\/p>\n<p>I <a href=\"https:\/\/www.google.it\/search?q=thumbsticks&amp;hl=en&amp;client=firefox-a&amp;hs=Gk1&amp;rls=org.mozilla:en-US:official&amp;prmd=imvns&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ei=z5ZpUK7AGqb24QSCroCABg&amp;ved=0CAcQ_AUoAQ&amp;biw=1417&amp;bih=750\">thumbstick (o funghetti)<\/a> spostano il cursore e fanno scorrere la pagina. L1 (in alto a sinistra) \u00e8 il pulsante &#8220;Indietro&#8221;, R1 (in alto a destra) \u00e8 il pulsante &#8220;Avanti&#8221;. Se si preme il triangolo, si apre un menu con le azioni come &#8220;Cerca&#8221; e &#8220;Preferiti&#8221; e il <a href=\"http:\/\/en.wikipedia.org\/wiki\/D-pad\">D-pad<\/a> sposta il cursore per ottenere il focus sui link della pagina.<\/p>\n<p>Si possono aprire pi\u00f9 finestre e vi si pu\u00f2 accedere usando L3 (spostando a sinistra il thumbstick) e passare da una all&#8217;altra usando L2 e R2 (i pulsanti in basso a sinistra e a destra).<\/p>\n<h4>Browser support<\/h4>\n<ul>\n<li>Supporto HTML5: 68\/500 (da <a href=\"http:\/\/html5test.com\">html5test.com<\/a>)<\/li>\n<li>Supporto CSS3: 38% (da <a href=\"http:\/\/css3test.com\">css3test.com<\/a>)<\/li>\n<\/ul>\n<h3>Nintendo Wii<\/h3>\n<div class=\"illustration full left\">\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/10\/wii.jpg\" border=\"0\" alt=\"La Nintendo Wii\" \/><\/p>\n<\/div>\n<p>La Wii ha un browser Opera 9 largo 800px (l&#8217;altezza varia a seconda dello schermo). Il remote controller, utilizzato come un puntatore laser, vibra quando si passa sopra ad un link. Spostando il cursore sul bordo dello schermo e premendo il grilletto si fa scorrere la pagina. I pulsanti + e &#8211; fanno lo zoom in e lo zoom out. Schiacciando 1 sul remote controller si va nei preferiti, il 2 mostra una versione della pagina senza gli stili di layout.<\/p>\n<p>Il remote controller diventa pesante dopo aver scritto per un po&#8217; o cercando di scegliere i link sulla pagina, quindi navigare pu\u00f2 essere difficile a meno che i link non siano grandi. Questo diventa problematico su quei siti in cui le aree cliccabili sono piccole e vicine le une alle altre.<\/p>\n<p>Spesso, un sito comincia a caricare, poi si blocca e si ritorna immediatamente alla schermata iniziale della console senza alcun messaggio di allerta o di errore.<\/p>\n<ul>\n<li>Supporto HTML5: Non \u00e8 riuscito a partire<\/li>\n<li>Test CSS3: Non \u00e8 riuscito a partire<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Testare sulle console portatili<\/h2>\n<p>Come le TV moderne, le console portatili hanno degli schermi larghi piuttosto che alti, come un telefono cellulare in modalit\u00e0 &#8220;portrait&#8221;. Questo implica che molti siti web responsive mostrano una versione da grande schermo del sito, nonostante sarebbe pi\u00f9 appropriato un design da schermo piccolo.<\/p>\n<h3>Sony PS Vita<\/h3>\n<div class=\"illustration full left\">\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/10\/ps-vita.jpg\" border=\"0\" alt=\"The Sony Playstation Vita\" \/><\/p>\n<\/div>\n<p>L&#8217;ultimo prodotto della linea PS, la Vita, \u00e8 la prima ad includere un&#8217;opzione 3G. Ha un touchpad sul retro utilizzato in alcuni giochi per togliere i pollici di mezzo durante il gioco ma il browser non lo utilizza.<\/p>\n<p>Il browser della Vita \u00e8 una versione di NetFront basata su WebKit. Stranamente, si identifica come Silk nella stringa user agent, ossia come il browser del Kindle Fire di Amazon.<\/p>\n<p>I siti si possono vedere solo in modalit\u00e0 &#8220;landscape&#8221; a 960&#215;544 a 220ppi, quindi la maggior parte mostra una visualizzazione ottimizzata per lo schermo largo piuttosto che la versione per schermo piccolo. Si possono aprire fino ad otto finestre contemporaneamente.<\/p>\n<p>Sebbene la Vita sia un prodotto Sony, la sua experience non \u00e8 comparabile con la PS3: il browser fa affidamento in maniera pesante sul touchscreen e apparentemente non trae alcun vantaggio dai controlli di gioco sul dispositivo.<\/p>\n<h4>Browser support<\/h4>\n<ul>\n<li>Test HTML5: 58\/500<\/li>\n<li>Test CSS3: 32%<\/li>\n<\/ul>\n<h3>Nintendo DSi<\/h3>\n<div class=\"illustration full left\">\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/10\/dsi.jpg\" border=\"0\" alt=\"The Nintendo DSi\" \/><\/p>\n<\/div>\n<p>La linea DS si distingue per i suoi due schermi e per lo stilo. Lo schermo inferiore \u00e8 un touchscreen resistivo, come quello che si trova sui sedili degli aerei, invece che capacitivo (come quello di uno smartphone). Gli schermi della DSi hanno dimensioni relativamente piccole (256&#215;192) e un basso ppi.<\/p>\n<p>La DS si avvale di entrambe gli schermi per mostrare un sito ottimizzato per piccoli schermi, trattandoli come un&#8217;unica lunga colonna. Nei siti non ottimizzati, il sito viene reso su entrambe i monitor: su uno \u00e8 zoomato, sull&#8217;altro \u00e8 ridotto. Non c&#8217;\u00e8 il multi-touch, quindi non c&#8217;\u00e8 il &#8220;pinch-to-zoom&#8221;, il che rende difficile leggere lunghe righe di testo. Non ci sono stili per i font come bold o italic e la dimensione del testo \u00e8 limitata ad un certo intervallo.<sup><a href=\"#note3\">3<\/a><\/sup><\/p>\n<h4>Browser support<\/h4>\n<ul>\n<li>Test HTML5: 89\/500<\/li>\n<li>Test CSS3: fallito<\/li>\n<\/ul>\n<h3>Nintendo 3DSXL<\/h3>\n<div class=\"illustration full left\">\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/10\/3dsxl.jpg\" border=\"0\" alt=\"The Nintendo 3DSXL\" \/><\/p>\n<\/div>\n<p>Questo dispositivo ha uno stilo e tre fotocamere: due sul retro per le immagini 3D e video e una frontale. Non c&#8217;\u00e8 bisogno di occhiali speciali per vedere le cose in 3D, ma il dispositivo deve essere tenuto esattamente al giusto angolo e alla giusta distanza. La profondit\u00e0 dell&#8217;effetto pu\u00f2 essere aggiustata con uno slider fisico.<\/p>\n<p>Solo lo schermo superiore \u00e8 3D ed \u00e8 pi\u00f9 grande di quello di sotto, che \u00e8 un resistive touchscreen 2D. Gli schermi sono fisicamente pi\u00f9 grandi del modello 3DS pi\u00f9 piccolo, ma le dimensioni dei pixel sono identiche (800&#215;240 su quello superiore, 320&#215;240 su quello inferiore), quindi il testo \u00e8 squadrato. Quando si scorre una pagina sullo schermo superiore, appaiono dei gap su ciascun lato per via della differenza delle dimensioni dei due schermi.<\/p>\n<p>I modelli pi\u00f9 vecchi di DS offrono un browser Opera, ma quelli pi\u00f9 nuovi hanno un browser NetFront installato di default, accessibile dalla schermata iniziale.<\/p>\n<p>I siti vengono mostrati in 2D, ma le immagini che usano il formato MPO possono essere visualizzati in 3D sullo schermo superiore. Le immagini MPO sono una combinazione di due file JPEG, pertanto il fallback \u00e8 un unico JPEG. Il problema \u00e8 che le immagini MPO embedded al momento non possono essere viste in 3D inline utilizzando il browser installato sul device: devono essere scaricate ed aperte come file.<\/p>\n<p>Il D-pad viene usato per passare da un link all&#8217;altro: viene disegnata una linea attorno agli elementi che sono selezionati. Il thumbstick \u00e8 utilizzato per lo scroll.<\/p>\n<p>Ci sono delle icone per lo zoom sul touchscreen e i pulsanti X e Y fanno anche lo zoom in e lo zoom out. I pulsanti sul dorso vanno avanti e indietro nella cronologia del browser.<\/p>\n<p>Facendo lo zoom in, il text-wrap automatico forza la lunghezza delle righe per adattare la larghezza alla viewport. Il browser pu\u00f2 essere usato mentre il gioco \u00e8 in pausa in background, il che permette ai giocatori di controllare i tutorial o i walkthrough mentre si gioca. Ho notato che questa feature appare anche su altre console.<\/p>\n<p>Nei test, alcuni siti non si sono caricati completamente perch\u00e9 erano troppo grossi e il sistema ha esaurito la memoria. Lo stesso problema \u00e8 stato rilevato anche sulla DSi.<\/p>\n<h4>Browser support<\/h4>\n<ul>\n<li>HTML5 test: 98\/500<\/li>\n<li>CSS3 test: 42%<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Testare sui telefoni console<\/h2>\n<p>I produttori hanno cercato di combinare le console portatili con i telefoni fin dal <a href=\"http:\/\/en.wikipedia.org\/wiki\/N-Gage_(device)\">Nokia N-Gage<\/a> del 2003. Oggi, il pi\u00f9 interessante di questi \u00e8 il <a href=\"http:\/\/en.wikipedia.org\/wiki\/Sony_Ericsson_Xperia_PLAY\">Sony Ericsson Xperia Play<\/a>, che sembra un telefono ma ha dei controlli slide-out in stile PlayStation.<\/p>\n<div class=\"illustration full left\">\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2012\/10\/xperia.jpg\" border=\"0\" alt=\"The Sony Ericsson Xperia\" \/><\/p>\n<\/div>\n<p>Lo schermo \u00e8 di qualit\u00e0 molto pi\u00f9 alta della PS Vita. Ha Android 2.3 (Gingerbread). Ogni volta che si apre la parte del controller di gioco, l&#8217;orientamento dello schermo viene impostato a landscape. In generale, i siti si vedono bene e il browser \u00e8 a livello di quelli che si trovano sugli altri smartphone moderni.<\/p>\n<p>Anche se \u00e8 pi\u00f9 un telefono che una console di gioco, \u00e8 importante considerare questo device ibrido. Al crescere della competizione tra smartphone e console di gioco, potremmo vederne sempre di pi\u00f9.<\/p>\n<h4>Browser support<\/h4>\n<ul>\n<li>Test HTML5: 212\/500<\/li>\n<li>Test CSS3: 42%<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragrafo\">\n<h2>All&#8217;orizzonte<\/h2>\n<p>C&#8217;\u00e8 tutta una serie di dispositivi che stanno per essere prodotti e che presenteranno nuove sfide per i designer e gli sviluppatori. La navigazione internet sulle console \u00e8 destinata ad aumentare man mano che i produttori realizzano nuovi device con migliori browser e maggiori capacit\u00e0, come feature quali <a href=\"http:\/\/en.wikipedia.org\/wiki\/Near_Field_Communication\">NFC per i micropagamenti<\/a> nella Wii U in arrivo e il supporto del controllo vocale e delle gesture Kinect nel browser IE9 che sar\u00e0 presto disponibile nella Xbox 360. Ci sono gi\u00e0 stati interessanti esperimenti con le interfacce gestuali nei browser usando un Kinect e <a href=\"https:\/\/github.com\/doug\/depthjs\">DepthJS<\/a>.<\/p>\n<h3>Secondo schermo<\/h3>\n<p>Tutte e tre le maggiori console TV hanno o stanno per attrezzarsi con un secondo schermo. La PlayStation 3 pu\u00f2 gi\u00e0 connettersi con la PS Vita e permetter all&#8217;utente di giocare sul device direttamente dalla console PS3 (Vita Remote Play). Pu\u00f2 anche essere usata come un secondo controller.<\/p>\n<p>Nintendo se ne sta uscendo con un&#8217;offerta simile, la Wii U: una console aggiornata e un gamepad portatile con un touchscreen che pu\u00f2 essere usato come una tastiera. Gli utenti possono condividere con la TV quello su cui stanno navigando sul gamepad facendo uno &#8220;swipe&#8221; sul contenuto verso la TV.<\/p>\n<p>Nel frattempo, Microsoft ha annunciato SmartGlass, che permetter\u00e0 agli utenti di connettere uno smartphone alla propria Xbox e di usarlo come schermo secondario. Piuttosto che connettersi con un dispositivo su misura, la console interagisce con qualunque telefono o tablet.<\/p>\n<p>Con SmartGlass e un Kinect potrebbe perfino essere possibile \u201ctirare\u201d il contenuto da uno schermo all&#8217;altro, come dimostrato nell&#8217;<a href=\"http:\/\/www.youtube.com\/watch?v=eYveEdhTgBs\">hack di Aral Balkan<\/a>.<\/p>\n<h3>Nuovi device<\/h3>\n<p>Nuovi giocatori stanno inoltre portando nuovi interessanti dispositivi sul mercato. Uno di questi \u00e8 il <a href=\"http:\/\/www.theverge.com\/2012\/3\/2\/2821566\/razer-blade-review\">Razer Switchblade<\/a>. \u00c8 in parte un computer Windows, in parte una console portatile. Le immagini sui tasti della tastiera cambiano a seconda del contenuto che si sta visualizzando. Con un fattore di forma simile al netbook, ha un trackpad di quattro pollici all&#8217;interno dell&#8217;area della tastiera che pu\u00f2 essere anche utilizzato come un piccolo schermo secondario. Si dice che <a href=\"http:\/\/www.anandtech.com\/show\/5606\/razer-blade-review\/3\">usi una versione di IE7<\/a> con un punteggio basso di 40 nel test HTML5.<\/p>\n<p>L&#8217;<a href=\"http:\/\/www.kickstarter.com\/projects\/ouya\/ouya-a-new-kind-of-video-game-console\">Ouya<\/a>, una console di gioco TV annunciato e finanziato su Kickstarter dovrebbe uscire nel Marzo del 2013. Avr\u00e0 un controller convenzionale e la console girer\u00e0 su Android. Non si sa ancora quale browser avr\u00e0, ma avr\u00e0 delle capacit\u00e0 di navigazione web.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Progettare con le console in testa<\/h2>\n<p>I browser delle console vivono in un&#8217;area scomoda tra il mobile e il tablet, tra il desktop e la TV. Spesso agiscono come browser mobile e desktop, ma il modo in cui interagiamo con loro \u00e8 veramente variegato.<\/p>\n<p>Jason Grigsby parla di questa sfida nella sua presentazione <a href=\"http:\/\/bradfrostweb.com\/blog\/mobile\/bdconf-jason-grigsby-presents-the-immobile-web\/\">The Immobile Web<\/a>: gli HDTV e gli iMacs hanno la stessa dimensione di pixel, ma un desktop lo si guarda da pochi centimetri di stanza, mentre la TV da qualche metro. Su una TV, un design linearizzato che \u00e8 comune per gli schermi piccoli potrebbe in realt\u00e0 essere pi\u00f9 appropriato rispetto ad un design per uno schermo ampio. La differenza non sta nella larghezza dello schermo, ma nella distanza da cui lo si guarda. Infatti, i <a href=\"https:\/\/developers.google.com\/tv\/android\/docs\/gtv_android_patterns\">design pattern della TV di Google<\/a> suggeriscono perfino di simulare questa esperienza usando un cellulare come \u201cmodello\u201d quando si progetta.<\/p>\n<p>\u00c8 inoltre molto difficile capire se un sito sia visualizzato su una TV. Le stringhe degli user agent non sono un detection method affidabile o future-friendly, dal momento che molti imitano le stringhe di altri browser. Inoltre, i media type vengono spesso ignorati, come <a href=\"http:\/\/dev.opera.com\/articles\/view\/creating-web-content-for-tv\/\">ha notato Patrick Lauke<\/a>.<\/p>\n<p>Aggiungete a questo mix la possibilit\u00e0 che un utente visualizzi un sito sulla TV mentre interagisce con esso su un device con un secondo schermo e le cose si complicano ulteriormente.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Cosa possiamo fare adesso<\/h2>\n<blockquote>\n<p>Stiamo progettando per mouse e tastiere, per i tastierini numerici con il T9, per i controller di gioco portatili, per le interfacce touch. In breve, abbiamo davanti a noi un numero molto pi\u00f9 grande di dispositivi, di modalit\u00e0 di inserimento e di browser di quanti non ne abbiamo mai avuti prima.<\/p>\n<p><cite>Ethan Marcotte<\/cite>, <a href=\"http:\/\/www.alistapart.com\/articles\/responsive-web-design\/\">Responsive Web Design<\/a><\/p>\n<\/blockquote>\n<p>Non possiamo creare esperienze su misura per tutti i possibili use case su tutti i device, ma possiamo usare quello che sappiamo della navigazione su ciascuna console per creare una miglior esperienza generale. Come abbiamo fatto progettando con il mobile in mente, considerare in che modo pu\u00f2 essere usato un sito su una console potrebbe avere un effetto domino nel rendere pi\u00f9 semplice l&#8217;utilizzo generale.<\/p>\n<p>Usate il progressive enhancement, cos\u00ec che le persone possano accedere al contenuto del vostro sito anche su un device che non supporta certe feature. Ottimizzatelo, cos\u00ec che si scarichi velocemente. Inserite i breakpoint media query dove \u00e8 appropriato per il contenuto, piuttosto che basandovi sulla larghezza dei comuni dispositivi. Considerate come si potrebbe compilare una form su una console e cercate di aggiungere <a href=\"http:\/\/www.labnol.org\/software\/add-speech-recognition-to-website\/19989\/\">il riconoscimento vocale ai campi<\/a>.<\/p>\n<p>Si \u00e8 tentati a concentrarci solo sulle esperienze dei display retina, ma dobbiamo anche considerare come apparir\u00e0 un sito dall&#8217;altro estremo della gamma: le persone non cambiano la propria TV cos\u00ec spesso come fanno con altri device, quindi assicuratevi che un design funzioni ancora bene sugli schermi configurati male, spixellati e con poco contrasto. Inoltre, come ha notato <a href=\"http:\/\/twitter.com\/Cennydd\/status\/226699514948497408\">Cennydd Bowles<\/a>, mentre la densit\u00e0 di pixel aumenta in alcuni posti, diminuisce in altri man mano che appaiono schermi economici su sempre pi\u00f9 dispositivi.<\/p>\n<p>Ci siamo gi\u00e0 passati. Come ci ha insegnato <a href=\"http:\/\/www.futurefriend.ly\">Future Friendly<\/a>, la sfida di progettare per un numero sempre crescente di contesti potrebbe apparire scoraggiante, ma \u00e8 inevitabile. Se ci teniamo a rendere accessibile il nostro sito a tutti, allora dobbiamo cominciare a guardare oltre il desktop e il mobile. \u00c8 ora di considerare seriamente i browser delle console di gioco.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Note<\/h2>\n<p id=\"note1\">[1] Secondo il <a href=\"http:\/\/stakeholders.ofcom.org.uk\/binaries\/research\/cmr\/cmr11\/icmr\/ICMR2011.pdf\">2011 Ofcom report (PDF)<\/a> e il <a href=\"http:\/\/pewinternet.org\/Reports\/2010\/Social-Media-and-Young-Adults\/Part-2\/5-Wireless.aspx\">2010 Pew Internet study<\/a>. Ofcom \u00e8 l&#8217;ente regolatore indipendente del Regno Unito per l&#8217;industria delle comunicazioni e fa sondaggi sia internazionali sia specifici per il Regno Unito riguardanti il mercato delle comunicazioni. Il Pew Research Center \u00e8 un \u201cfact tank\u201d che fornisce informazioni su questioni, attitudini e trend Americani.<\/p>\n<p id=\"note2\">[2] Le statistiche per lo UK sono tratte di nuovo dai 2011 Ofcom reports: uno sui <a href=\"http:\/\/stakeholders.ofcom.org.uk\/market-data-research\/market-data\/communications-market-reports\/cmr12\/internet-web\/uk-4.22\">devices utilizzati per visitare i siti internet per fascia di et\u00e0<\/a> e l&#8217;altro sull&#8217;<a href=\"http:\/\/stakeholders.ofcom.org.uk\/binaries\/research\/media-literacy\/media-lit11\/childrens.pdf\">alfabetizzazione sui media dei bambini del Regno Unito (PDF)<\/a>.<\/p>\n<p id=\"note3\">[3] Potete leggere una <a href=\"http:\/\/maban.co.uk\/73\">critica approfondita del browser della DSi<\/a> sul mio blog personale.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Le console di gioco oggi offrono esperienze web al di sotto delle possibilit\u00e0 e con poca scelta per i browser, ma questo non significa che le si debba ignorare. Pi\u00f9 di un utente di internet su otto in Gran Bretagna, USA e Francia (e circa uno su quattro tra gli adolescenti americani) usa una console di gioco per accedere a internet. Al crescere del numero di produttori di game console che offrono dispositivi con possibilit\u00e0 di connessione a internet e all&#8217;aumentare di smart TV che fanno il loro ingresso nel mercato, \u00e8 ora il momento giusto per pianificare in che modo i nostri siti si adatteranno a questi nuovi contesti. Vediamo come testare il nostro contenuto web sulle phone console, sulle handheld console come la Sony PSP e la Nintendo DS e nelle console TV come la Nintendo Wii, la Sony PS3 e la Xbox 360 di Microsoft.<\/p>\n","protected":false},"author":818,"featured_media":7000673,"comment_status":"open","ping_status":"open","template":"","categories":[242,76,276,278],"tags":[],"coauthors":[376],"class_list":["post-310","article","type-article","status-publish","has-post-thumbnail","hentry","category-browser","category-numero-61-4-ottobre-2012","category-project-management","category-workflow-tools"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000673"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=310"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}