30/12/2006

Diseñando webs para Wii

WiiUna de las -muchas- posibilidades de la nueva consola de Nintendo, Wii, es la capacidad de conexión a Internet vía WiFi (sin cables). Pero no hablaré aquí de las características de la consola o de los videojuegos sino de cómo adaptar o diseñar sitios web para ser vistos correctamente desde la Wii.

El único requerimiento para poder entender todo este rollo que cuento es tener algo de idea de diseño web.

El navegador de Wii

Uno de los servicios más populares que nos ofrece Internet es la web: poder navegar a través de millones y millones de páginas web. Para Wii hay un navegador especialmente diseñado. Se trata de una versión del navegador Opera adaptada (y de momento en prueba), con las mejores características de éste, aunque con algunas limitaciones:

  • Basado en la versión 9 de Opera
  • Plugin de Flash 7 (no hay problema para entretenerse con YouTube o Google Video, por ejemplo)
  • Soporte de Cookies
  • Soporte de JavaScript
  • No soporta Java
  • No soporta archivos de vídeo como Windows Media o Quicktime

Ya sabemos un poco más del navegador web, vayamos ahora al tema :-)

Resolución

Aquí dependerá del televisor que estéis usando, pero se supone que se adapta a la mayor resolución que permita el televisor. En las pruebas que he hecho (y en modo 16:9), obtengo una resolución de 1024 píxeles de ancho por 500 de alto (1024×500). En realidad, serían 600 de alto, pero 100 se los come la barra de herramientas del navegador.

Lo mejor es usar tamaños relativos en nuestro diseño. En lugar de definir una anchura de página de 800 píxeles, por ejemplo, decimos que será el 80% de la anchura total de la televisión. Así no importará qué resolución soporte el televisor, ya que el diseño se adaptará al 80% de la máxima anchura. Y así con el resto de capas que usemos.

Fuentes y tamaño

La mayoría de las fuentes (tipos de letra) que se usan en blogs o páginas web se ven perfectamente en el navegador de Wii, el único problema es el tamaño de dichas fuentes. Fuentes de menos de 15 pixels son bastante difíciles de leer por lo pequeñas que se ven, aunque esto no sea un gran problema pues podemos hacer Zoom con el mando, pero es un poco engorroso. Un tamaño ideal sería de 25 pixels, y de ahí, para arriba :-)

Si queréis usar el tipo de letra que se usa en el menú principal de Wii (la fuente oficial, digamos), se llama Wii NTLG PGothic JPN Regular.

Seleccionar un estilo si es Wii

Imaginemos que queremos que nuestra página muestre diseños distintos según se vea desde el navegador de la Wii o desde otro navegador, así podríamos tener un diseño general y luego uno adaptado, con letras más grandes, otro tipo de fuente, colores… para que sea cómodo de visualizar desde la consola.

Lo ideal es que en nuestra página web o weblog tengamos separado el contenido del continente, es decir, el contenido del diseño. Con lo cual tendremos por un lado nuestras páginas y por otra una o varias hojas de estilo (CSS). Así que para cambiar entre un diseño y otro, tan sólo hay que cargar una hoja de estilo u otra, sin apenas tocar código. Tendremos, por ejemplo, style.css que será nuestra hoja de estilo normal y style-wii.css que será una hoja de estilo que hemos creado para el caso de que nuestra página se vea desde la consola de Nintendo. Nos ayudaremos de código en PHP para hacer todo esto (así que debéis aseguraros de que vuestro servidor tiene instalado PHP o no funcionará). Nada de asustarse, que es muy sencillo :-)

La idea es detectar el navegador de la Wii y si es cierto, cargar la hoja de estilos adecuada. Así que en nuestra página principal, entre las etiquetas <head> y </head>, ponemos algo así:

<?php
     if(eregi("wii",$_SERVER["HTTP_USER_AGENT"])) {
          echo "<link rel='stylesheet' type='text/css' href='http://miweb.com/style-wii.css' title='style' />";                
     } else {
          echo "<link rel='stylesheet' type='text/css' href='http://miweb.com/style.css' title='style' />";                                 
     }
?>

Si el navegador se identifica como wii, se escribirá el código necesario para añadir la hoja de estilo adaptada a Wii (style-wii.css). En otro caso, usaremos la hoja de estilos normal (style.css).

Para el que sienta curiosidad, lo que devuelve la variable HTTP_USER_AGENT es:
Opera/9.00 (Nintendo Wii; U; ; 1309-9; es-es).

Acabáis de ver un caso práctico de por qué es bueno diseñar webs separando el diseño del contenido. Menos trabajo :-)

Dámelo todo hecho

Si usas WordPress para administrar tu sitio, seguramente te interese saber que hay un añadido (plugin) para este CMS que permite modificar el estilo de nuestra página sin tener que tocar código. Lo podéis descargar desde aquí. Ojo, no lo recomiendo porque cambia totalmente el diseño de tu página por el que trae el plugin por defecto, pero si eso no te importa, es muy cómodo. Por ejemplo, mirad cómo se ve el weblog de DraXus (y así respondo a su pregunta ;-):

Weblog de DraXus

Y con el plugin:

Weblog de Draxus visto desde Wii

Este texto no está ni cerca de estar completo. Según tenga más información y siga haciendo pruebas, iré poniendo los resultados.

Actualización [14/04/2007]: Ha salido la versión final (hasta ahora era una beta) con las siguiente características:

  • Opera 9.10
  • JavaScript 1.5
  • Plugin Flash 7.0 r68
  • Resolución: 800×664

Archivado en: CSS,Internet,PHP,XHTML

Comentarios

  • Ese ha sido tu regalito de Navidad? :D

    dijo Reena ( 30/12/06 a las 12:56 )

  • Magnífico post! Gracias por la captura, ya veo que se ve bien ^^

    dijo DraXus ( 30/12/06 a las 23:24 )

  • Gracias por la info, me resulta curioso el efecto WII :)

    dijo Inagotable ( 30/12/06 a las 23:51 )

  • […] Último Minipost He instalado un par de plugins para poder ver el blog fácilmente desde dispositivos móviles y desde la nueva videoconsola de Nintendo, la Wii. Los plugins en cuestión son WordPress Mobile Edition y WordPress Wii Edition. Ya me contaréis que tal van si alguno de mis lectores es agraciado de tener una Wii :P Editado: TempWin ha comprobado que funciona. ¡Gracias! (2) # […]

    dijo The Power of Mind » Archivo del Blog » The Power of Mind para móviles y Wii ( 31/12/06 a las 17:56 )

  • […] Diseñando webs para Wii […]

    dijo Weblog de Brainet » Archivo del weblog » Diseñando para la Wii ( 04/01/07 a las 10:33 )

  • Gracias a todos por los comentarios :-)

    Así es, Reena, regalo para mí y mi hermano. Lo que pasa es que ahora tenemos que volver a ahorrar para comprar otro mando, que uno solo no es tan divertido y se echa en falta un juego un poco menos infantil, aunque debo reconocer que el Wii Sports es muy divertido :-P

    dijo TempWin ( 04/01/07 a las 15:03 )

  • […] para que nuestra página se vea mejor en Opera para Wii, sin necesidad de usar ningún plugin. # « Elegir CSS desde el servidor o desde el cliente Coloriuris vs Creative Commons» […]

    dijo Diseña para la Wii - aNieto2K ( 05/01/07 a las 00:06 )

  • Un día de estos tenemos que quedar para que me enseñes ese Red Steel… y yo el Zelda :]

    dijo Arxel ( 14/01/07 a las 20:11 )

  • Tiene un modo multiplayer para 4 jugadores, así que lo llevaré a tu casa, que tienes más mandos :-P

    dijo TempWin ( 15/01/07 a las 13:04 )

  • ¡¡Cómo se nota que tenemos que estudiaaar!! Nos tienes abandonados…sniffers..!!

    Por alguna razón (y no sé por qué me extraño…) viendo tu blog en el explorer me aparece un ENORME espacio blanco antes de la imagen de título.

    un besitooo!! :)

    dijo Macus Romero ( 18/01/07 a las 08:29 )

  • Se dice que iban a meter Firefox…

    dijo bydiox ( 27/01/07 a las 15:42 )

  • […] WordPress Wii edition. Este plugin optimiza la visualización del blog con Nintendo Wii. Por The Winksite Team – Christopher Collareta, Jason Sabella, and David Harper. Más info en: Bitelia, David Harper y JAB. […]

    dijo Marqueze Telecom Blog » Blog Archive » Plugin en Marqueze Telecom Blog (Akismet, Feedburner Feed Replacement, Google Sitemap Generator, etc) ( 10/02/07 a las 19:07 )

  • Mi problema es que cuando me conecto a la pagina http://www.minijuegos.com y trato de jugar desde la wii no se ven los juegos. que plugins necesito?

    dijo Natalia ( 25/02/08 a las 20:03 )

  • Natalia, algunos de los juegos de esa web necesitan la última versión del plugin Flash (9) y el que trae el Opera de Wii es la 7, un poquillo desfasada. Así que a esperar toca. Mientras puedes jugar en ésta: http://wiicade.com/, con juegos pensados para jugar desde la Wii :-)

    dijo TempWin ( 25/02/08 a las 22:33 )

Escribe tu comentario

XHTML permitido (pero con cabecita, ¿eh?): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img src="" />

Gestionado con WordPress - diseño Proper por TempWin