Los webmasters y en general, la mayoría de la comunidad internacional dentro del mundo de Internet, tendemos a despreciar Flash y consecuentemente, Actionscript, basándonos en su invisibilidad para buscadores y en las directivas que Jakob Nielsen estableció para la Usabilidad de los websites, dada la dificultad de ajustar el objeto History del DOM HTML a los contenidos flash, haciendo difícil la existencia de un botón ‘Atrás’ efectivo. Hasta ahora, la solucion a este problema estaba hasta hace poco en crear framesets, lo cual es aún más horripilante para todos los que sabemos algo de estandarización y SEO.
Otro factor de peso, y que es el más importante en estos tiempos de web 2.0, y el que más nos interesa a los optimizadores de código para buscadores, es la invisibilidad de los contenidos.

Ésta es la verdadera lacra de los diseñadores flash: pero todo evoluciona, todo crece: Adobe y Google tienen buenas relaciones, y los últimos pasos de Adobe demuestran cierto aperturismo que sobre todo nos beneficia a los SEO de todo el mundo: hablo de la apertura del código fuente del reproductor flash, el cual estaba plenamente desarrollado por Adobe.

Este es un paso de gigante pues va a permitir, incluso a los mismos desarrolladores de Google, experimentar con nuevos métodos para la lectura de Flash por parte de las arañas de los buscadores. También puede además, dada la alta demanda por parte de las empresas, inspirar una estandarización W3C a la inclusión de contenido multimedia en Internet, mejor que la que hasta ahora se ha llevado a cabo. También puede que, además, los desarrolladores de navegadores empiecen a incluir el plugin en el mismo ejecutable de instalación.

Muchos Flash developers pueden argumentarme que Google si lee ya flash. Pero el especificador de búsquedas ‘filetype:swf’ ha sido un abanderado que debe desaparecer e ignorarse, pues la solución no es que Google te devuelva páginas Flash si se lo pides, y si no no (que es el 99,999% de los casos): hagámonos a la idea: de momento, Google no lee Flash. la solución entonces es ponérselo fácil. Si lee el flash, será estupendo: pero si hay que esperar a que su ‘araña flash’ llegue hasta tu website, pueden pasar meses antes de que se sepa nada de la existencia del Sitio.

La mejor solución creada hasta la fecha se llama swfObject(). Este es un proyecto Open-source en base al código creado primeramente por Geoff Sterns. Es un archivo .js totalmente gratuíto disponible para su descarga pública, y es una referencia obligada en todas las carpetas de librerías javascript. Esta API permite la inclusión dinámica de contenido flash en páginas HTML, con la perfecta adición de parámetros para el embed, un montón de posibilidades de inclusión, y el añadido (que en realidad era la intención primaria) de evitar la comprobación de controles ActiveX por parte de la actualización EOLAS de Internet Explorer, además de funcionar a la perfección con Firefox, Opera y Safari.
Este código javascript se incluye en cualquier parte del código HTML, y reescribe el contenido de una etiqueta con ID, preferentemente un <div>.

La ‘magia SEO‘ de este swfObject() está en eso mismo: en local, el contenido de ese <div> es totalmente sustituido por el código javascript creado que inserta el swf… pero si el navegador que lo visita (o la araña que lo visita…) no tiene el plugin de flash, ese contenido permanece. Con poca imaginación, o con pocos recursos de servidor, este div puede utilizarse para introducir la típica comprobación de plugin. Pero no sería lo más acertado a nivel SEO. Y afortunadamente, los usuarios con NOScript son más bien pocos. Pero es recomendable crear el aviso de que esta web funciona mejor con javascript activado.

Este div debe ser el ‘content’ que almacene toda la información en HTML, incluida también en el swf, de un modo usable y fácil por parte de un usuario tonto, como es la araña de Google. La idea es que el usuario normal vea el contenido en modo flash, y las arañas puedan leer a su vez todo el contenido creado sin tener que aventurarse en la caja negra del Flash. Este contenido, en una web ‘perfecta’, sería generado por un archivo php que consultase directamente a base de datos, al igual que el flash, que llamaría a otro archivo php que también buscaría la base de datos para devolver al flash la estructura de un XML. Esto obviamente es un trabajo extra para los creadores…, que nadie dijo que fuera fácil ni barato: pero sí la mejor manera, la más óptima, que es lo que buscamos los SEO. Si eres SEO, y tu jefe reconoce la importancia de tu trabajo, no dudes en pedirle los medios para hacer que tu RIA o tus embeds se vean de manera óptima por todos.

En cuanto al botón de historia… lo dejaré para otro post, pues el tema lo merece.

En julio me llamó un viejo colega que hacía muchísimo tiempo que no veía: compañero de curro en la época de ALC, me encantó no solo que me llamara sino que además, por un viaje a Jaén que iba a hacer, me pillaba de paso hacerle una visita, lo cual además le vino de perlas a él, y a mí,  pues me propuso crear la web a la nueva empresa donde está trabajando. El viaje me serviría para verle y acordarnos de… dos años atrás, en verdad (pedazo de fiesta por Vallecas nos dimos) y además, para hacer una visita de trabajo a sus nuevas oficinas. Me resulta tan anodino esto de llamarlo ‘visitas de trabajo’. Me hace pensar que debería haber ido de traje y corbata. Y tal vez, haberme cortado las rastas (¿No te fastidia?). Me gusta pensar que fui a conocerles para hacer negocios, simplemente.Cada reto nuevo me lo tomo como algo personal, y eso creo que es algo que ha quedado plasmado en el resultado final. Desde el principio querían que crease una web sencilla, blanca y cristalina, con los colores y formas corporativas. A esas formas yo les quise dar movimiento para crear una web ‘líquida’, viva, que los pasos entre una sección y otra fueran suaves y elegantes, y que hubiese un cierto grado de aleatoriedad para que la web fuese algo distinta cada vez que entras.

La experiencia ha resultado excitante en cuanto que cada web que hago, a su vez, me sirve para experimentar con nuevas clases de Actionscript (oh, my Fuse!), nuevas técnicas, y recordar cosas que se me habían olvidado con tanto jQuery, CSS y XHTML. Recordarlas ha sido un alivio, y un buen aliciente a todos mis estudios de Flash.

La web está terminada, únicamente a la espera de corrección de algunos bugs casi imperceptibles. Si alguien se anima a decirme errores que vea… ¡Está invitado!

Desde aquí, un saludo a Coach Comunicación y las gentes que componen este genial grupo de trabajo.

Esta web, Liquid Journey, la conocí hace muchos años ya (como 5, podría decir), navegando por webs de expertos en eso que se llamaba Flash y que aún no sabía muy bien de qué iba. Y esta web me ayudó mucho a entender lo que es, a entender porqué Flash es una herramienta más orientada a diseñadores que a programadores, pues en un sentido amplio, Stasiuk reduce la belleza a ’simples’ fórmulas matemáticas.

Screenshot de Liquid Journey

El propósito de liquidjourney es una entidad de la web que vas entendiendo conforme la navegas. Es algo sorprendente que Gary publica no solo los resultados de su creatividad, sino también el código fuente en flash que crea la magia. Y, cuando descargas cualquiera de sus archivos, lo primero que encuentras es un txt con esta leyenda:

Open Source Flash/ActionScript //Flash/Actionscript de código abierto.
Modify and/or extend the code in this file… // Modifica y/o extiende el código de este archivo
Return any breakthroughs of brilliance //Reenviad cualquier ocurrencia brillante
Please give credit where credit is due. //Si ganáis pasta con esto, acordaos de mi.

En verdad, a Gary Stasiuk solo lo conozco por su obra, y por la respuesta que me dio hace tiempo cuando le preguntaba por una parte de su código que no entendía bien (Una función global). Al buscar Gary Stasiuk en Google, puedes ver la cara detrás de la pantalla que ha creado todo esto… y se refleja en ella. Su cara es un libro abierto: un libro de matermáticas, física y creatividad, todas juntas pero no revueltas.

Además, el creador es ’speaker’ en varias conferencias internacionales, sobre todo de FITC, Flash in the Can, una web orientada a los desarrolladores canadienses. Y es que en Canadá están varios de los más importantes creativos y gurús Flash de esta época. Stasiuk tiene en el ‘recibidor’ de su web varios enlaces: los tres de la página principal, y otros tantos abajo del todo que son enlaces a sus presentaciones para estas conferencias… auténticas joyas que muestran (in)formación acerca de la simulación de inteligencia artificial, comportamientos aleatorios, y un review muy completo acerca de la clase BitmapData.

Es también muy interesante la gran lista de enlaces de que dispone, muchos relacionados con el ‘opensource’, otros tantos orientados a Flash en general, y otros enlaces más generalistas.

Pero la magia de Gary está en el apartado ‘Source’ que es donde crecen sus contenidos y donde publica todas sus ocurrencias fla. Son de especial mención la sección ‘Favorites’, ‘Ai’, ‘Recursion’, … bueno, en realidad todas son muy interesantes…

En definitiva, liquid journey es una gran muestra de trabajos que además sirven para que aprendamos y para enriquecernos la vista y la creatividad durante un buen ratillo.

Eso es lo que ha aparecido esta mañana en meneame con enlace al blog de ‘Incubaweb’, y éste, a la página del proyecto de Adobe: la multimillonaria compañía de Silicon Valley ha decidido volver a la actualidad informática global con este anuncio tan sorprendente que algunos no dudan en calificarlo como la noticia del año. Si lo encuadramos en un entorno de webmasters, desarrolladores y programadores, sin duda que la liberación de la especificación de los archivos flash no dejará a nadie inadvertido. Aunque si bien es una noticia muy relacionada con este mundillo, tampoco tendrá a corto plazo ninguna manifestación expresa de que algo ha cambiado; tal y como ocurrió cuando Adobe nos sorprendía con la adquisición de Macromedia, pasarían años hasta que vieramos un ‘Adobe Flash’ (que hoy ya está). Así pues, no sorprenderá a nadie que equipare esto al comando  ‘Ver código fuente’ en el menú contextual de Flash, que sería tan útil como el que los navegadores nos brindan con el HTML, CSS y Javascript. Aunque no parece que los tiros vayan a ir por ahí en una primera fase.

La idea que ha tenido Adobe con este ‘Open Screen Project’ es eliminar todas las restricciones al formato .swf y .flv/f4v y publicar las especificaciones de este tipo de archivos. Aunque se especula mucho de la razón de todo esto (competencia con MS SilverLight, utilización de la etiqueta <video> de HTML5), Adobe explica en la web del proyecto que se trata de liberarlo para exportar el formato flash no solo a ordenadores y móviles (Flash y Flash Lite), sino también para Televisión y electrónica de consumo, teniendo en mente además incluir Adobe AIR en el futuro.

Es curiosa esta acción, sobre todo tras el anuncio de Google de liberar el formato KML relativo a Google Maps. Parece que en Silicon Valley (que no en Redmond) los vientos soplan con aires de libertad creativa.

Esta estrategia recuerda además a mediados de los años 90, cuando el pdf tenía una fuerte competencia y Adobe con el fin de impulsarlo lo liberó, en una jugada que hizo del pdf un estándar reconocido en el mundo del desarrollo web.

La noticia es tan impresionante como los apoyos que está recibiendo la iniciativa de Adobe: si eBay y FineTune se sumaron rápidamente al desarrollo de Apollo/AIR, el Open Screen Project ya cuenta con respaldos tan renombrados como NOKIA, Samsung, Sony, Motorola, Cisco Systems, Toshiba, Intel, Verizon, NBC o VIACOM (MTV networks), que son solo la punta del iceberg de algo que -parece- solo acaba de comenzar.

Un aplauso y una ovación a Adobe, que aún a pesar de ser un monopolio, saben no abusar de lo que tienen y ofrecer cada día cosas mejores y más perfectas.

Hace ya uno o dos años me dieron a conocer una web que rompía con la música en Internet: ésa era Pandora.com. Esta web era un auténtico boom en lo que a música streaming se refiere, pues no sólo permitía escuchar la mayoría de grupos (anglosajones) que te gustaban, sino que además agregaba una funcionalidad que era donde realmente residía la magia de Pandora: la creación de ‘radios personalizadas’ a los gustos que eligieses. Así pues, si ponías una canción de un grupo conocido, después de escucharlo te aparecían temas de grupos parecidos al de la canción que habías seleccionado, que a lo mejor no eran tan conocidos pero que a priori podrían gustarte: y si no te gustaban, pues decías que ‘No me gusta’ y la radio aprendía de eso. Así pues, gracias a Pandora, conocí a King Crimson (Llamadme inculto) ingresando a los Tool como preferencia. Y me aparecían otros como Nine Inch Nails, Sparta, A Perfect Circle o Rage Against the Machine. Todo relacionado como veis.

Pero ocurrió lo que se esperaba. El tema música en Internet vs. copyright se llevó por delante las virtudes de Pandora desde Europa, desde donde ya no se puede acceder como se puede ver en el enlace.

Parecía que los europeos tendríamos vetado el acceso a la música ‘on demand’; Internet se hacía un poquito más aburrido… hasta que alguien en Francia se dio cuenta de ello y decidió ponerle solución, una solución que ya parecía demorarse. Fue mi buen amigo de contenidos de Softonic para Francia, Jérémie Sebban, (a quien tengo un poco abandonado últimamente) quien me recomendó DEEZER por vez primera, siendo aún webmaster en Softonic.com.

Al principio no le di la importancia que se merecía, como a priori suele ocurrirme con los sites que visito por primera vez. No obstante, DEEZER me fue enganchando poco a poco. Une la música streaming con el concepto de ‘friends network’ tan explotado por redes como facebook, hi5, myspace o tuenti, y que tan buenos provechos da a quienes la llevan a buen puerto en su desarrollo. En Deezer puedes hacer amigos como en éstas, ver lo que están escuchando en el mismo momento, escuchar y/o enlazar sus playlists, y como Jamendo (web de la que hablaré más adelante en esta bitácora), crear en tu página web un reproductor con la música de tus playlists. Y otra funcionalidad curiosa de este site es la posibilidad de subir tú mismo tus mp3, para que tus colegas escuchen tus mp3s. Como veis, todo roza la ilegalidad en la propiedad intelectual, sin llegar a tocarla ni a hundirse en ella.

Este site RIA es una excelente apuesta de los franceses por la música streaming en Europa. No sólo adopta el modelo playlist, totalmente configurable y manejable, sino que aporta el concepto ’smartradio’ como alternativa a Pandora que ya iba haciendo falta. Con una admirable elegancia y un muy buen uso de la delegación de eventos, clases y filtros, así como de la API de sonido, los webmasters de Deezer deben estar orgullosos del monstruo flash que han creado; el CEO de Deezer ha logrado encabezar uno de los proyectos más remarcables de la web 2.0.

Deezer es una web que está creciendo a pasos agigantados. Solo ver su barra de banderitas para los idiomas ya da una idea de la espectacular expansión que están viviendo estos últimos meses. La recomiendo encarecidamente, aunque con mesura y buen uso, quiero decir: el problema de la música en streaming es el gran ancho de banda que consume, lo que puede ser un problema si en una red de pequeña oficina (como donde yo trabajo) entra mucha gente a la vez. Por eso os la recomiendo, aunque no recomiendo que lo digáis demasiado en la oficina pues os puede pasar como a mi: que el jefe se entere también y limite el acceso. Era de esperar, de todas maneras: Internet iba muy lento cuando estábamos 3 o 4 en deezer al mismo tiempo.

No obstante, la web resulta de una excesiva recomendabilidad y animo a todos mis lectores a formar parte de Deezer. Merece la pena el proceso de registro, que por otro lado, no es demasiado largo y la recompensa lo premia.

De momento os dejo con la música en mi blog de los apasionantes TOOL que ya nombraba unas pocas lineas arriba. Están en la barra azul, debajo de los comentarios recientes.

Esta apasionante web es desarrollada en Hertfordshire, Inglaterra, y su razón de ser es la entrega de galardones de varios tipos a webs desarrolladas, muchas de ellas, enteramente en flash/flex, que de esta manera obtienen promoción a nivel de los círculos de diseñadores flash a lo largo y ancho del mundo.

Este es un screenshot de la web

‘The FWA’ está desarrollada en Flex y es una RIA de muy alto standing y complejo desarrollo. Es de agradecer la limpieza en el diseño, de fondo blanco y la elegancia y claridad de los componentes. Tiene curiosidades como el uso del scroll de ratón en la navegación de los premiados y en la lectura de artículos, además de escalabilidad y otros añadidos de alta calidad que convierten a theFWA en una web de referencia y obligada visita por todo desarrollador que se precie.

Los premios que otorga son al ganador del día, de la semana, del mes y del año . Éstos pueden colocar una banda en la web premiada, con la leyenda del galardón recibido.

Además, es interesante la bolsa de trabajo de que dispone, si bien es cierto que la mayoría de plazas disponibles son para los EEUU.

Podéis conocerla haciendo clic aquí.

Aunque suelo devorar libros de programación en Flash que me apasionan (la mayoría de ellos de la editorial Anaya), en ocasiones encuentro algunas joyas que me resultan apasionantes de leer y que me abstraen de lo demás por su calidad y por lo que me aportan, que en este caso es de una magnitud que ninguna variable sería capaz de almacenar. Es el caso de este libro: “Foundation Actionscript Animation”. Ya está anticuado pues habla del AS2 (existe una edición para el 3). Aun así, es increiblemente completo. A través del enlace de amazon podéis ver, haciendo clic sobre la miniatura del libro, un ‘preview’ de sus contenidos, aquí.

Imagen obtenida de la web de Friends of Ed

Este libro, de Keith Peters, es una auténtica maravilla. Que yo sepa, no ha sido traducido al castellano, ni distribuido en España bajo ninguna Editorial. La que lo publica en los EEUU es ‘Friends of Ed’, y la única manera de conseguirlo fue a través de Amazon. Lo conocí por medio del videotutorial de uno de mis gurús, Lee Brimelow, autor de la genial página www.gotoandlearn.com, y que está muy relacionado, por lo poco que sé, con 2advanced Studios. En uno de sus videotutoriales, L.B. para el disurso para recomendar este libro, cosa que no suele hacer. Y no lo hizo en vano, puedo asegurar.

El libro trata temas matemáticos de utilidad creciente conforme avanzas en el libro. Lo primero es hablar de la animación en sí (su breve historia) y luego entra en flash para explicar las cuatro tonterías que los que empezamos con Flash 5 ya tenemos más que leidas (aunque no por ello es bueno saltárselo pues acota pequeños truquillos que son buenos de saber y utilizar). Pero el siguiente capítulo entra en materia con un lenguaje directo y brutal que te hace entenderlo todo (claro está, si sabes un inglés medio-avanzado relativo a programación) con una contundencia envidiable. Habla de senos, cosenos, tangentes y cotangentes, funciones de trigonometría espacial. Mi caso, que fue el de un chaval que odiaba la física y las matemáticas, duda de sí mismo leyendo este libro que trae a colación las típicas funciones que creía que jamás utilizaría (Discúlpenme ingenieros y demás gente de ciencias: yo estudié latín y griego). Una función sinusoidal resulta de extrema utilidad en Flash, así como el teorema de pitágoras.

Pero la magia de este libro la he visto residir en su capacidad creativa a nivel pedagógico. Con el capítulo de la trigonometría/geometría, y el siguiente, que habla de la API de dibujo ‘runtime’, ya se me han venido ocurriendo a lo largo de toda la mañana cientos de cosas, como una gaviota aleteando, o las olas del mar… solo habiendo leído tres capítulos del libro, y en casi todas, utilizando funciones sinusoidales. Y otra gran ventaja es que ahora entiendo un poquito mejor el código de Gary Stasiuk, el genial matemático/programador, creador de Liquid Journey. Otro de mis gurús, a quien nombraré más de una vez en mi bitácora.

Conste que estas dos APIs, la de geometría y la de dibujo, ya me eran conocidas… aunque puedo decir sin tapujos que mi conocimiento de estas APIs ha ‘renacido’ y se ve con más posibilidades que nunca.

No veo la hora de acabar hoy en el trabajo para entrar al metro a seguir leyendo tan fascinante obra, y llegar a casa para probar lo que en el metro he maquinado con lo (muy) poquito que sé.

En código HTML y en varios lenguajes de programación, los colores se miden hexadecimalmente, que es un sistema matemático cuyos entresijos os desvelo a continuación. No es muy complicado, no temáis.

Sabemos que hay dos tipos de esquemas cromáticos: el color físico (RGB) o aditivo, y el color químico (CMYK), o sustractivo. Para monitores de televisión y de ordenador, se utiliza el sistema RGB pues la transformación de señal eléctrica en color es un proceso físico: RGB se refiere a Rojo, Verde y Azul. En círculos hispanohablantes suele denominarse RVA. Aunque, trabajando en un mundo global, lo mejor es estandarizar estas siglas: RGB es mundialmente reconocido, en detrimento de ‘RVA’. Desde Onyria os recomiendo que os refiráis a este modelo siempre por este nombre, más que nada por evitar autoconstruirse barreras.

Los colores se representan con seis caracteres, que pueden ser, por ejemplo, 000000, FFFFFF o 6EA3FB.Estos caracteres van del 0 (cero) a la F, en este orden: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. 16 caracteres en total. Este orden va de lo más oscuro a lo más claro (0=0 color, F=full color, para que os acordéis), y van en grupos de seis, precedidos (no siempre como explicaré más adelante) de una almohadilla (#) en la mayoría de casos.

Sabemos que el ‘fósforo’ de una pantalla puede representar rango del 0 al 255, es decir, 256 tonos. Cada par de caracteres en una definición de color te dicen el tono de R, G o B. Así por ejemplo, si tenemos un hipotético (incorrecto) caso de color así: #RRGGBB, el tono de rojo será RR, el de verde GG, y el de azul BB. Es incorrecto pues no existen ni la R ni la G como caracteres hexadecimales.
¿Y porqué esta mezcla de letras, y porqué van en pares? son 16 caracteres hemos dicho: si multiplicamos 16 x 16 el resultado nos da exactamente 256. Así pues, cada pareja puede representar un máximo de 256 combinaciones distintas. Así pues, sabemos que son: (R)256 x (G)256 x (B)256 = 16.777.216 colores.
Ahora hagamos ejercicio de recuerdo: sabiendo que el blanco es resultado de la mezcla de todos los colores físicos, tenemos que FFFFFF representa al blanco puro, y 00000 al negro absoluto. Por esta regla, uno se da cuenta de que si en los tres grupos aparece lo mismo, tendrá un gris. Y con lo mismo me refiero tanto a AAAAAA, o a B3B3B3.
Esta imagen fue encontrada en http://www.mattlag.com/htmlcolorchart/

Es excepcional el caso de algunos lenguajes de estilos, como CSS, en que pueden no ir en grupos de seis. Una declaración como estas dos: span{color:#ABC}, ó span{color:#F} son válidas ya que se interpreta, en el primer caso, que A es rojo (AA), B es verde (BB), y C es azul (CC). Así pues, si solo hay un caracter, se interpreta que es un gris ’seguro’. No obstante, recomiendo esto más como técnica de lectura y ‘debugging’ que como técnica de desarrollo, pues no todos los lenguajes lo admiten.

Esto de ’seguro’ se refiere a los ’safe colors’ tan famosos. Estos colores son aquellos que tienen el mismo carácter en las parejas de tonos: #00FF99, por ejemplo, y además son múltiplos de 3. Por ejemplo, dentro de los tonos de azul, son colores seguros: #000033, #000066, #000099, #0000CC y #0000FF (hay más si metemos 33, 66… en R o en G). Esto de colores seguros viene de hace varios años, cuando la web nacía y los monitores no tenían la calidad gráfica de hoy en día. Estos colores eran aquellos que los monitores antiguos podrían reproducir sin problemas. Son también conocidos como colores de 8 bits (ya que 2 elevado a 8 son 256, que son las posibilidades de tonos de los colores seguros).

Hoy en día, los monitores son capaces de reproducir colores de 32 o 64 bits (miles de millones de colores), y ésto nos ha dado gran ventaja y alivio a los diseñadores.

Es posible que os encontréis otras posibilidades: si aparecen, cuatro grupos en vez de tres, (#RRGGBBAA), el último par suele referirse a la transparencia, aunque su uso no es muy habitual, suele utilizarse más en entornos de desarrollo como C o C#.

Es posible además, que no siempre haya una almohadilla delante de los colores hexadecimales, aunque sea un estándar. Es el caso del Actionscript de flash, en que los colores se representan 0xFFFFFF, siendo el primer carácter un cero, y el segundo una equis minúscula.

Nada más: un buen primer post. Espero que os haya entretenido y hayáis aprendido algo nuevo.