#013 Flash [Q] Tips: swfobject y respeta los estándares con flash

Este tip es un poco doble, en realidad el objetivo principal es el de lograr crear código para un objeto flash que valide correctamente los estándares correspondientes, y de paso hablaros de un imprescindible en todos aquellos que trabajamos con flash como es swfobject.

La manera "tradicional" de generar un HTML con un flash incrustado, y que incluso es la que se mantiene en la versión CS4 de la suite de adobe es la siguiente:

PLAIN TEXT
HTML:
  1. <script language="JavaScript" type="text/javascript">
  2.     AC_FL_RunContent(
  3.         'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
  4.         'width', '300',
  5.         'height', '300',
  6.         'src', 'test',
  7.         'quality', 'high',
  8.         'pluginspage', 'http://www.adobe.com/go/getflashplayer',
  9.         'align', 'middle',
  10.         'play', 'true',
  11.         'loop', 'true',
  12.         'scale', 'showall',
  13.         'wmode', 'window',
  14.         'devicefont', 'false',
  15.         'id', 'test',
  16.         'bgcolor', '#993399',
  17.         'name', 'test',
  18.         'menu', 'true',
  19.         'allowFullScreen', 'false',
  20.         'allowScriptAccess','sameDomain',
  21.         'movie', 'test',
  22.         'salign', ''
  23.         ); //end AC code
  24. </script>
  26.     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="300" height="300" id="test" align="middle">
  27.     <param name="allowScriptAccess" value="sameDomain" />
  28.     <param name="allowFullScreen" value="false" />
  29.     <param name="movie" value="test.swf" />
  30.     <param name="quality" value="high" />
  31.     <param name="bgcolor" value="#993399" />   
  32.     <embed src="test.swf" quality="high" bgcolor="#993399" width="300" height="300" name="test" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
  33.     </object>
  34. </noscript>

Hemos obviado el código javascript que ha generado también en dicho HTML. Pues bien, este código que ha generado el IDE de flash NO valida los estándares web que debería (esto no es nada nuevo, de hecho la solución que vamos a comentar tiene ya sus años, pero me jugaría bastante a que muchos de los que estáis leyendo esto, no os habéis preocupado demasiado de la validación de estándares de los objetos flash), y por tanto si en nuestras webs XHTML y CSS deseamos que sea una realidad el tema de la validación, deberemos tirar de recursos más elaborados.
Read more

Tabla de compatibilidades de navegadores

Aquí os dejo una página muy útil para los desarrolladores que he encontrado en Fyrdility
de Alexia Deveria en la que podemos saber a partir de que versiones de los navegadores se pueden usar propiedades de CSS3, HTML5, SVG y otra nuevas tecnologías que van apareciendo.

Enlace a la tabla comparativa

Safari también tiene secretos

Y es que hay cositas que no sé por qué se tienen escondidas a nosotros, los usuarios "pezuñiles". Sí hombre, esos que no sabemos realmente qué estamos haciendo cuando pulsamos el botón rojo pero que no podemos dejar de sentirnos atraídos por tan notorio color. A mí me pasa lo mismo con lo que hay detrás de una web, que no tengo realmente idea de HTML y CSS pero me gusta toquetear.

Aunque realmente lo he descubierto gracias al compañero Canteli por otros temas, el caso es que ni Harry Potter se sabe este truco de magia. Apunta:

menu debug safari

Bonito, ¿verdad? Toda una especie de Web Developer pero en el navegador más conocido de la manzanita mordida. Realmente es el menu Debug del navegador pero supervitaminado para que tengas acceso a un montón de información útil: tiempos de carga, código HTML y CSS, consola de errores...

Como pega pues ponerle que el código no se puede editar on the fly como sí te lo permite Firebug por ejemplo. Aún así, un menú realmente útil que ya no volverá a ser invisible para mí.

PD: En realidad el menú de desarrollo también lo puedes activar desde Preferencias >> Avanzado. Pero no es la opción "geek" xD.

AdobeEnVivo, grabación de eSeminars disponibles

[Q] interactiva ha participado en el Adobe En Vivo Online, organizado por GarageFlash, con el eSeminar: Juegos en Flash Lite

Pues AdobeEnVivo online ya ha finalizado, y la gente de GarageFlash no ha tardado mucho en publicar los enlaces a todas las grabaciones de Adobe Acrobat Connect, es decir video de lujo de las conferencias, con audio, posibilidad de moverte por la charla a tu antojo, etc.

Desde [Q] colaboramos en el evento mediante la charla que impartió Marcos González titulada "Juegos en Flash Lite", y que hemos de decir que tuvo una magnífica respuesta por parte de los hasta más de 70 asistentes que hubo en determinados momentos de la misma. Esta colaboración se hizo a través del Grupo de Usuarios de Móviles y Dispositivos de Adobe España, Blocketpc, junto con otra charla impartida por Raúl Jiménez.

El evento se cierra como un rotundo éxito (al menos desde nuestro punto de vista) ya que ha contado con una participación espectacular, ya no solo en asistencia, sino en cantidad y calidad de ponentes y de la variedad de países que se han unido al evento, siendo claramente un referente en coordinación y participación de diferentes Grupos de Usuarios de Adobe de forma conjunta ya no solo en nuestra lengua, sino como ejemplo para toda la comunidad. Nuestra enhorabuena desde aqui al Grupo de Usuarios de Perú GarageFlash por la iniciativa.

Os recordamos que este evento también se lleva a cabo en "real", y que el año anterior también contó con un importantísimo programa de talleres y conferencias. Esperamos poder estar allí personalmente en alguna de las futuras ediciones, que seguro serán igual o mejores a la anterior.

Navegadores móviles, comparativa de soporte de DOM

Comparativa compatibilidad navegadores móvil, mobile browsers

Pues a raíz de un post de nuestros amigos de nbsp, os dejamos aquí un enlace que viene muy pero que muy bien a la hora de plantearnos qué podemos y debemos usar si vamos a desarrollar un sitio web para móviles como Dios manda, es decir, no automatizando procesos para generar una versión móvil de dudosa efectividad y calidad, sino hacer una adaptación completa del contenido y formas, para que la experiencia del usuario sea realmente interesante.

Personalmente soy ultradefensor de la creación de websites móviles realmente creados para ese medio, no solo por solventar las limitaciones con las que te enfrentas, sino porque puedes sacar partido a algunas otras características que se dan en un terminal y en una web no. De esta manera muchas veces las webs para móviles generadas con determinadas herramientas no logran solventar determinados aspectos necesarios si queremos que de verdad el usuario se sienta cómodo con la web.

En nuestro caso incluso siempre barajamos la posibilidad de dejar fuera determinados contenidos por no tener mucho sentido en el contexto móvil, y sin embargo a veces se añaden nuevos elementos o funcionalidades que precisamente cobran fuerza en este tipo de desarrollos... pero eso es materia para otro post.

Al grano, interesantísima comparativa de las capacidades de los navegadores móviles más comunes que nos permite tener una visión bastante clara de qué podemos hacer y qué no, dependiendo a qué terminales queramos llegar.

Como material adicional, la web padre del enlace que os proponemos, no tiene desperdicio ya que contiene una de las tablas comparativas más consultadas sobre compatibilidad de funciones y DOM entre diferentes navegadores,

Instalar Handset Detection en un Hosting Compartido Linux

Pues ya os dimos la chapa en su día explicando como instalar handset detection en local con WAMP bajo Windows, que nos permitía conocer el dispositivo que visita nuestra web, y en consecuencia, mostrar determinados contenidos servidos "a medida" al mismo. Handset detection es una aplicación basada en la filosofía de WURLF, que nos da un webservice que podemos consultar, para obtener los datos del terminal que visita una web (más o menos la misma información que WURLF).

Pues ahora toca dar la chapa con lo realmente importante, que es cuando vamos a la vida real. Y en muchos casos eso implica un hosting compartido, en este caso Linux. Si el hosting no fuera compartido, puede que todo sea más sencillo, pero vamos, la base es ésta que os indicamos.
Read more

experiencias CS4 en Vigo

Pues ya estamos de vuelta de Vigo. La verdad que la experiencia, como siempre, ha sido una maravilla, por poder volver a ver a algunos conocidos, conocer a gente nueva y poder estar en contacto con otras personas que tienen en común el preocuparse por aprender cosas y estar al día de los productos con los que trabajan, o con los que quieren trabajar.


el viaje fue serio y sobrio XD

El evento estuvo partido en 2 días, viernes y sábado, que se aprovecharon para presentar los grupos de usuarios de Dreamweaver y Móviles y Dispositivos y realizar 4 charlas sobre productos CS4 de Adobe respectivamente.

Read more

Instalar Handset Detection en local con WAMP y Windows

He escrito un tutorial al respecto en blocketpc, en realidad es una mezcla entre cómo emplear Handset Detection y cómo instalar PEAR en un entorno WAMP con Windows. Algo simple, pero útil en castellano, ya que no hay demasiada información al respecto.

En nuestro caso la instalación WAMP era basada en WampServer, pero entendemos que es muy similar al resto de instalaciones de este tipo como podría ser XAMPP.

Blocketpc > Instalar Handset Detection en local con WAMP y Windows

El modelo de caja y Q interactiva

Hoy ha sido un gran día en el estudio, nada mas y nada menos que nos ha visitado el fenómeno mediático más popular hasta Enrique Dans, ¡el modelo de caja!

Todo ocurrió cuando picaron a la puerta a eso de las 17 horas. La sorpresa fué mayúscula cuando de repente, al otro lado estaba nada más y nada menos el modelo de caja! Nos dijo que si podía entrar, que le habían comentado que en este lugar se respetaban los estándares, pero que siempre se tomaba la molestia de comprobarlo personalmente...
Read more

Firefox 3 ya está disponible!

Descarga ya Firefox 3

Pues ya podemos descargarnos Firefox 3, no para batir ningún record de descargas, sino para ver qué nos espera de esta nueva versión de tan fantástico navegador. En la web se promocionan con más de 15.000 mejoras (lo cual puede ser bueno o malo según como se mire... XD) pero yo me quedo con estas que he podido leer:

De mano me lo instalo en el portatil, si veo que la cosa va bien, haré lo propio en la oficina! Todos los comentarios sobre cosas destacables o fallas del navegador como ésta que nos indicó Zárate en sus comentarios, son bienvenidas :)

Next Page →