JAB » PHP http://blog.tempwin.net Just Another Blog Fri, 03 Feb 2012 23:14:34 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Diseñando webs para Wii http://blog.tempwin.net/2006/12/30/disenando-webs-para-wii/ http://blog.tempwin.net/2006/12/30/disenando-webs-para-wii/#comments Sat, 30 Dec 2006 11:05:52 +0000 TempWin http://blog.tempwin.net/2006/12/30/disenando-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
]]> http://blog.tempwin.net/2006/12/30/disenando-webs-para-wii/feed/ 14 Redireccionando, de una web a otra http://blog.tempwin.net/2006/09/05/redireccionando-de-una-web-a-otra/ http://blog.tempwin.net/2006/09/05/redireccionando-de-una-web-a-otra/#comments Tue, 05 Sep 2006 09:54:41 +0000 TempWin http://blog.tempwin.net/2006/09/05/redireccionando-de-una-web-a-otra/ Cuando cambié de hosting y dominio para este blog, me encontré con el principal problema de hacer saber a la gente que entraba o había entrado en el antiguo, de que me había cambiado. Pensé que bastaría con un post donde comentaba que ahora se me podía encontrar en una nueva dirección, así cuando entrasen en el blog antiguo, leerían esa nota en portada y se vendrían para aquí. Pero claro, muchos visitantes llegan a una página desde un navegador o desde algún enlace en otro sitio y que lo llevan a un post concreto de tu página y no ven la página principal o no leen más a allá de ese post que los ha traído hacia ti.

El otro problema es la pérdida del Pagerank (cuán popular es tu sitio para Google) o de los backlinks (enlaces a contenidos de tu página desde otras páginas). Afortunadamente, estas cosas tienen solución (bendita informática :-P)

Vamos a hacer uso de uno de los estados del servidor web, concretamente el 301, que indica que la página web a la que estás accediendo ha sido movida a otro sitio. Esto es muy útil para los robots de los buscadores, que cuando rastrean nuestra página web, anotan que deben seguir la nueva dirección de la página. Muy bien, ¿y cómo hacemos esto? En PHP, basta con poner el siguiente código en la página principal de la página que queremos redireccionar:

<?php
     Header( "HTTP/1.1 301 Moved Permanently" );
     Header( "Location: http://www.direccion-nueva.com" );
?>

Bastará con cambiar la parte que pone Location, con el sitio al que queremos que redireccione.

Puede suceder (es lo que me ocurrió a mí) que el sitio donde tengas alojada tu página, no permita incluir código PHP en su contenido, así que tendremos que echar mano de una solución algo cutre, pero también efectiva. Entre las etiquetas <head> y </head>, ponemos:

<META HTTP-EQUIV="refresh" content="0;
          URL=http://www.direccion-nueva.com/">

Lo que hemos hecho es que la página que contiene ese código se actualice (refresh), a los 0 segundos de haber sido cargada, a la nueva página http://www.direccion-nueva.com. Podéis ver cómo funciona entrando en http://jab.blogia.com, donde estaba antes este weblog. Debería traeros aquí de nuevo.

Y nada de perder visitantes ;-)

]]> http://blog.tempwin.net/2006/09/05/redireccionando-de-una-web-a-otra/feed/ 6 SPGM: una galería muy válida http://blog.tempwin.net/2006/08/31/spgm-una-galeria-muy-valida/ http://blog.tempwin.net/2006/08/31/spgm-una-galeria-muy-valida/#comments Thu, 31 Aug 2006 11:25:50 +0000 TempWin http://blog.tempwin.net/2006/08/31/spgm-una-galeria-muy-valida/ Hoy en día hay un montón de generadores de galerías web. Tú sólo les das las fotos, y el script se encarga de crear la galería, sin tú tener que preocuparte de escribir código. Los hay muy buenos, pero hoy os voy a hablar de SPGM (Simple Picture Gallery Manager), por varias razones:

SPGM

  • Es código abierto
  • No usa bases de datos
  • No usa la librería GD
  • Está en español
  • Las galerías que genera son XHTML 1.0 Strict válidas.

Lo cierto es que la última opción fue la que me hizo decantarme por ella.

Instalación

Debemos tener instalada la versión 4 ó superior de PHP. Nos descargamos la última versión y lo descomprimimos en un directorio. Si lo subimos a nuestro espacio web, la dirección de la galería sería algo así: http://www.tuweb.com/spgm-xxx/index.php. spgm-xxx variará según la versión que te hayas descargado. Obviamente, puedes darle el nombre que quieras a ese directorio.

Pues la instalación era eso nada más. Ahora sólo queda meterle contenido :-)

Creando galerías

Por defecto, sólo tenemos que crear directorios dentro de la carpeta gal. Así que, si queremos crear una galería llamada Fotos, tendremos que crear un directorio con ese nombre en gal, de tal forma que nos quedaría gal/Fotos/. Los nombres de las galerías (los directorios) no pueden contener espacios, pero podemos escribir en su lugar un guión bajo ‘_’ y el script lo interpretará como un espacio: gal/Fotos_de_coches.

Ahora metemos las fotos en esos directorios. Y nos falta un último paso, debemos crear nosotros las miniaturas (thumbnails) de las fotos. Sí esto puede ser algo engorroso, pero es la desventaja de no usar la librería GD para la manipulación de imágenes. Sin embargo, dentro de la carpeta tools nos incluyen un script tanto para Windows (genthumb.bat) como para Linux (genthumb.sh) que nos facilitarán el proceso, haciendo automáticamente las miniaturas de las fotos. De todos modos, por si os sirve, yo hice un script bastante más sencillo (para Linux):

#!/bin/bash
for image in `ls *.jpg`
do
        convert $image -resize 150x113 _thb_$image
done

Es necesario tener instalado el paquete imagemagick. Lo que hace el script es que para todas las imágenes (en este caso, .jpg) que haya en el directorio donde se ejecute el script, las reduce a un tamaño de 150 píxels de ancho y 113 de alto, y les da un nuevo nombre (no borra las originales) de la forma _thb_nombre_de_la_imagen_original.jpg.

Para usar el script, primero copiáis las líneas de arriba en un fichero, lo llamáis como queráis (mejor algo descriptivo, claro) y le dais permisos de ejecución (en consola es tempwin@linux:~$ chmod +x nombre_script). Y lo ejecutáis tal que así: tempwin@linux:~$ ./nombre_script :-)

Venga, y ya tenéis la galería creada :-) Pongámonos ahora con la configuración/personalización.

Archivos y directorios

Así está estructurado SPGM junto con sus archivos importantes:

  • contrib/ – Donde está una librería javascript que usa SPGM para mostrar información EXIF.
  • css/ – La hoja de estilo del aspecto superficial de la galería.
  • flavors/ – Carpeta de temas, para modificar el aspecto de la galería.
  • gal/ – Por defecto es el directorio donde se almacenarán los álbumes que queramos añadir a la galería.
  • gal/spgm.conf – Archivo de configuración de la galería, para editar algunos aspectos de la misma.
  • lang/ – Carpeta con los archivos de lenguaje, para traducir la galería.
  • tools/ – Herramientas para la creación automática de miniaturas.
  • spgm.php – Es el script que se encarga de crear la galería.

Idioma

Dentro de la carpeta lang tienes bastantes idiomas para elegir. Por defecto, viene en inglés. Si queremos cambiar el idioma, tenemos que editar el archivo spgm.conf, que está dentro de la carpeta gal. Casi al final podemos ver una línea que pone $cfg['conf']['language'] = 'en';, por defecto, está comentada (con un # delante). Borramos el # y le ponemos el idioma, es para el Español.

Número de miniaturas

Otro aspecto que nos interesará, será el número de miniaturas que queremos que se muestre en cada página de nuestra galería. Lo podemos definir también en el mismo archivo que antes. En la línea $cfg['conf']['thumbnailsPerRow'] = 4;, le indicamos que queremos que aparezcan cuatro miniaturas por fila. Y en $cfg['conf']['thumbnailsPerPage'] = 12;, decimos que queremos 12 miniaturas por página.

Modificando el aspecto

Podemos cambiar la apariencia de la galería mediante unos estilos o sabores (flavors, como dicen ellos). Hay algunos disponibles en su página web. Tan sólo los descargamos, los metemos en la carpeta flavors, extramos el contenido, y en el fichero (¿a ver si lo adivinas?) spgm.conf le decimos el nombre del tema que queremos usar en la línea $cfg['conf']['theme'] = 'clean';. Para este ejemplo, es el tema clean (debes poner el nombre que tenga la carpeta del tema).

Sólo te hace falta saber algo de CSS y XHTML para hacer tus propios temas o modificar el aspecto de la galería a tu gusto.

Alternativas

Ah, por cierto, mi galería está funcionando con SPGM ;-)

]]> http://blog.tempwin.net/2006/08/31/spgm-una-galeria-muy-valida/feed/ 7