Diseña sitios en Flash y asegurate que sean visibles en iPad y iPhone.
Escrito por Gerardo Sepúlveda Domingo, 10 de Abril de 2011 22:52
Hoy en día es muy común que la gente navegue en dispositivos móviles y muchos de ellos los hagan en tabletas o teléfonos como el iPad y el iPhone. Como diseñadores y/o desarrolladores de sitios web es necesario que el contenido que creamos sea accesible y esté disponible para verse en todos estos dispositivos; lamentablemente la realidad no es esta.
Como muchos sabemos, el iPhone, iPod Touch y el iPad son dispositivos que no soportan archivos Flash, por lo que si tenemos un sitio creado con esta tecnología no lo podremos ver en ellos. Sin embargo no todo está perdido, no es el final de Flash ni hay razones de peso que nos hagan dejar de usar esta plataforma, pero hay que saber cómo utilizarla, sacarle el mayor provecho y, en este caso, saber qué hacer para que nuestros sitios en Flash puedan ser vistos en un iPad.
Hay usuarios de Flash que llegan a dejar de lado aspectos tan importantes como estándares web, accesibilidad y SEO entre otros puntos. Y no es que Flash no tenga la capacidad de brindar estas características, si no que muchos "diseñadores web" al pasar de los años se han limitado a poner botones, imágenes, animaciones y subir un sitio "invisible" para los motores de búsqueda y ahora inaccesibles para los dispositivos móviles.
Con un poco de conocimiento de HTML, CSS y Javascript haremos que nuestro sitio pueda ser visto en un iPhone o un iPad. No es necesario que seas experto en estos lenguajes, pero si sería bueno que poco a poco nos fuéramos familiarizando con ellos para poder aprovechar todo su potencial.
Puedes descargar los archivos base aquí para seguir el tutorial, o ir creando los tuyos conforme vayamos avanzando.
Tenemos que aclarar que NO vamos a hacer que el iPad reconozca los archivos de Flash, si no que por medio de código Javascript se detectará si la página está siendo vista desde alguno de estos dispositivos móviles, y de ser así redireccionará a algún sitio o URL que le indiquemos, en este caso conteniendo la versión HTML de nuestro diseño.
Para ver los resultados visita la siguiente dirección en tu navegador web y después en un iPad o un iPhone: http://neopixel.com.mx/sitiosflashenipad/
Antes que nada crearemos nuestro archivo SWF. Para este ejercicio hemos creado un archivo sencillo y sin tanta complejidad.
A continuación utilizaremos SWFObject (una librería de código abierto JavaScript) para insertar los archivos Flash dentro de una página HTML. Una de las ventajas que nos da SWFObject es que nos permite mostrar contenido alterno a los usuarios que no tengan instalado el PlugIn de Flash, independientemente que estos usuarios naveguen en iPads, Pc´s o cualquier otro sistema operativo.
Con el siguiente código se inserta el SWF, indicando entre otras cosas el nombre del archivo, el tamaño y la versión del Flash Player.
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swffit.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.preloaderColor = "0xff4400";
var params = {
menu: "false",
quality: "high",
scale: "noscale",
salign: "tl",
wmode: "window",
bgcolor: "#000000",
allowscriptaccess: "always"
};
var attributes = {id:"contenidoflash", name:"contenidoflash"};
swffit.fit("contenidoflash", 640, 540);
swfobject.embedSWF("ejercicioFlash-iPad.swf", "contenidoflash", "640", "540", "9", false, flashvars, params, attributes);
</script>
Para que todo lo anterior funcione deberemos de tener los archivos Javascript (swffit.js y swfobject.js) dentro de una carpeta nombrada "js".
En el header de nuestro HTML introducimos el siguiente código Javascript que detectará si el sitio está siendo visto mediante iPods, iPhones o iPads y así redireccionará automáticamente al directorio donde tenemos nuestro HTML para móviles.
<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPad') != -1) || (navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "mobileSite/";
}
</script>
Es bueno tener en el HTML textos indicadores de que el usuario no está viendo la página solicitada por que no tiene el PlugIn de Flash (en caso de que no lo tenga) y una liga para que pueda descargarlo. De esta manera el usuario sabrá que no puede ver el sitio debido a que necesita instalar un PlugIn y no por algún error de nuestra página.
Hecho esto crearemos la versión del sitio en HTML y lo guardaremos en una carpeta llamada "mobileSite". Recuerda que la resolución de un iPhone o iPod Touch es de 320 x 480 y de un iPad de 1025 x 768 y tenlo en cuenta a la hora de diseñar tus páginas.
Nuestro sitio en versión HTML para móviles.
Una vez que tenemos la versión en HTML la subimos a nuestro servidor por FTP. Lo probamos en el explorador y tecleamos la misma dirección en un iPad o iPhone, veremos como en ambos casos carga el contenido, pero en el iPad redireccionará a la carpeta que indicamos anteriormente y mostrará la versión HTML del sitio.
Hasta aquí hemos hecho que los usuarios puedan ver nuestro sitio web en un navegador, y en los dispositivos de Apple: iPhone, iPad o iPod Touch.
Versión del sitio vista en un navegador.
Mismo sitio visto desde un iPad.
En los archivos descargables puedes ver el código comentado, si tienes alguna duda dejanos tus comentarios por esta vía o por Esta dirección electrónica esta protegida contra spam bots. Necesita activar JavaScript para visualizarla .
RSS feed Comments
escrito por marcoman, abril 28, 2011
escrito por Andrésvillegas, mayo 11, 2011
escrito por NeoPixel, mayo 13, 2011
Un saludo
)
escrito por Fenrir, noviembre 15, 2011
