Talleres de Verano Subflash 2008

Llega el veranito, y por estas fechas si hay algo que no puede faltar… no son las chicas morenas, el sol y la ropa de verano… o las terrazas para tomarse un refresquito…. sino los talleres de verano subflash!!

Talleres de Verano Subflash 2007 - Malaga

Visitando el foro de subflash me entero (por decir algo… XD) de que ya están en marcha, y que este año se van a realizar en Alicante!

Desde aquí agradezco personalmente la ayuda que nos ha prestado en esta ocasión Elad de Nitsnets, con todo lo que es la reserva del lugar e instalaciones necesarias para llevar a cabo un evento como este. Mil gracias Elad (y también a Andrés Karp, Andrés Cayón, Ramón Masip y mis queridos Jorge y Alberto, que siempre logran que tenga tiempo para dedicarme a esto a base de apurar un poco más su trabajo diario).

Talleres de Verano Subflash 2006 - Asturias

El evento tendrá lugar los días 29, 30 y 31 de Agosto de 2008, en la Villa Universitaria de San Vicente del Raspeig, Alicante, y por un precio que ronda los 100€, podremos disfrutar de 3 días inolvidables. Las instalaciones, este año prometen ser de lujo, y tambien las ponencias, que abarcarán más temas de los habituales y variados, como diseño, programación flash, posicionamiento en buscadores…

Aquí podéis ver todos los detalles del evento, plazas, precio, modalidades, direcciones, etc.

Aun no se ha terminado de desarrollar el microsite para este año, pero estad atentos, porque seguro que se pone en marcha en muy poco tiempo :)

Talleres de Verano Subflash 2007 - Malaga

Para los que no sepáis que son los talleres, aquí os dejo unos links a años anteriores, y también podéis ver videos en youtube, o fotos en flickr.

Yo me apunto desde ya!!!

Comunicación unidireccional (unidireccional comunication)

Creo que no me equivoco cuando afirmo que a todos nos ha pasado de estar manteniendo una conversación con alguien y enterarnos de muy poco por no decir nada, y no me refiero a un sábado de noche :D

Me refiero a la afición de muchas personas de utilizar palabras extranjeras o híbridas, es decir, los denominados “palabros” de nuestra sección, pero de forma tan constante que parecen estar hablando de forma encriptada como los antiguos espías, ya sabéis eso de “El águila ha volado tres veces tres cuartos sobre el nido del cuco”.

Por ejemplo y cito textualmente refiriéndose a unos banners y juro que es 100% verídico tan solo he hecho copiar y pegar copy-paste:

“Yo los voy a servir desde un adserver que emplea templates propios para randomizar las impresiones, reportarlas en su base de datos y a su vez trackear clickthrougs desde los reposts de nuestro adserver”.

Puedes volver a leerlo si quieres, pero yo también entiendo mejor lo del nido del cuco :D

No se a vosotros pero a mi me quedo esa cara de lelo al leerlo por primera vez. Bueno, por primera vez, por segunda, por tercera, por cuarta, por…

La cuestión es: ¿Esa es la única forma de explicar el funcionamiento de los banners o es la forma más rimbombante que encontró el autor para así pretender quedar como el “puto amo”? No se vosotros pero yo me decanto por la segunda opción.

Resumiendo, y según mi humilde opinión, no hace falta utilizar todos estos palabros para intentar demostrar nada. Es normal que de vez en cuando soltemos o se nos escape alguno pero que aunque nuestro interlocutor no entienda lo pueda sacar por el contexto de la frase o en su defecto enterarse de al menos un 90% del mensaje, con lo que conseguiremos una comunicación bidireccional y no una unidireccional comunication.

De PNGs transparentes, navegadores y onLoads va la cosa

En el estudio he tenido que emplear PNGs transparentes, que como sabeís (y sino, deberíais) no son soportados por versiones de Internet Explorer 6 o anteriores, sino que vienen soportadas desde la versión 7 de nuestro amigo IE.

Hasta aqui no hay gran problema, porque empleando un pngfix de javascript se arregla el entuerto (bonito palabro).

PLAIN TEXT
JavaScript:
  1. /*
  3. Correctly handle PNG transparency in Win IE 5.5 & 6.
  4. http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
  6. Use in <HEAD> with DEFER keyword wrapped in conditional comments:
  7. <!--[if lt IE 7]>
  8. <script defer type="text/javascript" src="pngfix.js"></script>
  9. <![endif]-->
  11. */
  12.  
  13. var arVersion = navigator.appVersion.split("MSIE")
  14. var version = parseFloat(arVersion[1])
  15.  
  16. if ((version>= 5.5) && (document.body.filters))
  17. {
  18.    for(var i=0; i<document.images.length; i++)
  19.    {
  20.       var img = document.images[i]
  21.       var imgName = img.src.toUpperCase()
  22.       if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  23.       {
  24.          var imgID = (img.id) ? "id='" + img.id + "' " : ""
  25.          var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  26.          var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  27.          var imgStyle = "display:inline-block;" + img.style.cssText
  28.          if (img.align == "left") imgStyle = "float:left;" + imgStyle
  29.          if (img.align == "right") imgStyle = "float:right;" + imgStyle
  30.          if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
  31.          var strNewHTML = "<span " + imgID + imgClass + imgTitle
  32.          + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  33.          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  34.          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
  35.          img.outerHTML = strNewHTML
  36.          i = i-1
  37.       }
  38.    }
  39. }

El tema se complicó (no iba a ser todo tan sencillo...) cuando además metía un evento onLoad para el body con la intención de lanzar una función javascript, y paso a describir el caso porque puede ser de ayuda para quien se encuentre en la situación:

LO QUE QUEREMOS LOGRAR
Tenemos una imagen de fondo de un cierto peso en KB (ya que no es una trama, sino una imagen plena de faculades), y sobre esa imagen han de colocarse unos botones que a su vez son imágenes, y que para que quede medianamente bonito han de ser transparentes.

PRIMER PROBLEMA
El primer problema es que la imagen de fondo que se crea por CSS, pesa lo suficiente como para que se dé durante unos segundos la situación de aparecer los botones sin el fondo que les da "sentido", un efecto poco deseable.

SOLUCIÓN PRIMER PROBLEMA
Para solucionarlo buscamos si existía algun método mediante CSS o XHTML para forzar la carga de los elementos de la hoja de estilos antes que se renderizara el HTML, pero..... no lo hemos encontrado. Si algún alma caritativa sabe cómo lograrlo mediante CSS (o de una manera más limpia que la que hemos empleado nosotros) que no dude en contárnosla.
Jorge tuvo la feliz idea de poner la misma imagen con propiedad display:none en el comienzo del body, con lo que la imagen se carga como HTML impidiendo así que se muestre lo que va a continuacion hasta que se completa dicha carga, y luego el CSS no tarda nada de tiempo en cargarla porque está en caché. Mientras esto ocurre, el div con los botones transparentes, permanece oculto también con la propiedad display, para por javascript hacerlo visible en el onLoad de la página.

SEGUNDO PROBLEMA
Cuando ya estábamos pegando saltos de alegría con el trabajo terminado, vemos que nuestro querido IE 6 no muestra los botones, no así en IE 7 o en firefox.... :(

SOLUCIÓN SEGUNDO PROBLEMA
El problema es debido a la mala compatibilidad del pngfix con métodos invocados en el onLoad. La solución pasa por usar una variante del pngfix (que ha salido a la luz porque también da problemas con el swfobject) y que permite mezclar estas dos necesiades: pngfix y onLoad. Lo que hicimos es "googlear" y emplear el citado pngfix adaptado además de colocar la llamada al mismo DESPUÉS (y ojo que esto es necesario para que se dispare el evento onLoad) de la etiqueta de apertura de BODY. Cuando decimos la llamada nos referimos a esto:

PLAIN TEXT
HTML:
  1. <!–[if lt IE 7]>
  2. <script defer type=”text/javascript” src=”pngfix.js”></script>
  3. <![endif]–>

El resultado lo podéis ver aquí, por cierto, la web está recien salida del horno... diseño por takeone dsgn y programación flash y adaptación del blog por [Q]. :)

Cheat Sheets: hazme la vida más sencilla…

Cheat Sheet Graphic Colors

Como todos los que me conocen saben, soy un gran defensor de la literatura técnica como medio de aprendizaje. Siempre que se pueda adquirir un buen libro, creo que es una buena inversión, porque muchas veces se encuentran en ellos cosas a las que en un futuro te puedes enfrentar, o lo que es mejor, cosas que no te esperabas aprender, visiones sobre determinados temas que enriquecen y complementan la propia, o incluso soluciones a planteamientos que no sabías hasta entonces abordar.

Con ésto no quiero decir que todos los libros son buenos ("malos, haberlos haylos") , pero sin duda si te tomas la molestia de hacer un análisis de lo que vas a comprar antes de adquirirlo y de ver la opinión que otros han dejado sobre él, las probabilidades de éxito son muy altas.

Pocos libros he leído últimamente que no me hayan aportado nuevas perlas (principalmente porque al que anda escaso, todo es nuevo...) sobre pequeños detalles y que en su mayoría no estaban directamente relacionados con la temática principal del libro. A veces a la vuelta de la esquina de un párrafo denso y tedioso, te encuentras una nota entre paréntesis, o una explicación adicional que te descubre algo en lo que nunca te habías fijado o no conocías su existencia.

Pero sin duda, un libro, por muy buena encuadernación y estructuración que tenga, no es la mejor herramienta a la hora de salir de dudas sobre un propiedad o la sintaxis de un método, un atajo de teclado o un repaso a las posibilidades que tienes frente a un efecto en javascript con jQuery. Para ello creo que de un tiempo a esta parte han ido apareciendo unos de los mejores aliados de los desarrolladores cuando se enfrentan a algo nuevo u olvidado en el pasado... las cheatsheets (si, si hojas para hacer trampas... y que!?). Sirva esta colección de ellas como prueba:

ILoveJackDaniels
Impresionante recurso para obtener cheatsheets de calidad: HTML, SQL Server, Expresiones Regulares, Microformatos, Ruby on Rails, ASP, Entidades HTML, Javascript, MySQL, Mod Rewrite, CSS, PHP...
ILoveJackDaniels Cheatsheets

Pete Freitag
Otra referencia para tener en cuenta, una recopilación de 30 cheatsheets para desarrolladores.
Cheat Sheet Roundup

Smashing Magazine
Estos gañanes no podían faltar, como siempre sacando recursos a paladas, y de buenísima calidad. Me arrepiento todos los días del momento en que un listo me los presentó en mi navegador junto a netvibes...
Cheat Sheet Round-Up

Designers Cheat Sheets
También hay cheat sheets para el mundo del diseño, que no solo de código vive el hombre...
Designer color Charts, y photoshop cheat sheets vía Scott Klarr

Fuzzy Opinions
Excelente recopilación categorizada por áreas temáticas: Bases de Datos, programación, sistemas operativos, desarrollo web, miscelánea...
The developer cheat sheet compilation

What is.com
Este recurso ya abarca más que las convencionales para desarrollo o diseño web, aunque algunas interesantes, como la de atajos de photoshop para windows o mac
Our favorite cheet sheets

Google Cheat Sheets
Pues si, también hay para el buscador más famoso del pueblo..., vía feedsforme.
Google Cheat Sheets

Web Developer List: eConsultant
Y aqui ya vamos al por mayor, con una recopilación de 119 hojas.
Top 119 Cheat Sheets

No podía despedirme sin dejar una de nuestro querido ActionScript, otra de nuestro nuevo amigo jQuery y otra que me ha sorprendido especialmente, dedicada al mundo del SEO

Y como yo no soy el primero que se da cuenta que esto es un gran invento, podemos encontrar incluso un MEGA DIRECTORIO, con dominio propio: cheat-sheets.org

Nos vamos a Nottingham! European Elearning Summit 2008

European eLearning Summit es un evento organizado a partir de las anteriores Conferencias EuroTAAC, y es considerada una de los eventos más importantes a nivel de eLearning.

european elearning summit nottingham 2008

Resulta que en relación al mLearning, que se basa en la movilidad en los procesos de aprendizaje, este año hemos sido invitados para estar alli participando en una ponencia y exponiendo uno de los trabajos basados en Flash Lite que hemos realizado en el estudio en colaboración con IBCmass, que también se ha hecho eco de tan fabulosa noticia en su blog.

IBCmass ha desarrollado y gestionado Bienvenido a Alcalá de Henares, un proyecto que se basa en una magnífica idea para facilitar la integración de los inmigrantes en dicha localidad, y en el que hemos participado adaptándolo a la plataforma móvil mediante Flash Lite 2.0 y mejorando el proceso de desarrollo y migración de la web al móvil.

El proyecto de Alcalá se empleará como canal en la ponencia para conocer el proceso que es necesario llevar a cabo al portar una aplicación web o de escritorio a la plataforma móvil, los conceptos basados en los contextos que requiere esta plataforma, y las soluciones que se pueden aportar hoy en día para lograr aplicaciones enriquecidas en los móviles.

Marcos González será el afortunado en esta ocasión para viajar a Nottingham, y preparar la sesión explicando todo el proceso que ha llevado a cabo [Q] interactiva para albergar en una aplicación móvil más de 1000 audios, más de 500 recursos gráficos y 9 unidades didácticas, a partir de la aplicación web, y cómo se han podido unificar procesos para hacer esta tarea más sencilla.

Esta oportunidad ha salido adelante gracias a la colaboración de Adobe (que es empresa organizador y patrocinadora del evento, junto con The eLearning UILD), y más personalmente a Steve Howard, al cual desde aquí le agradezco todo el apoyo que nos ha brindado en el proceso.

El Lugar será Nottingham, los días 19, 20 y 21 de Agosto de 2008, en la web podéis ver información del lugar y de los precios de asistencia, así como la lista completa de sesiones que están programadas hasta la fecha.

Intentaremos aprovechar un poco antes para ver a algunos amigos que tenemos por allí, como el gran zárate.

atalaya

Esta última incorporación viene a la vuelta de un café.

atalaya.
(Del ár. hisp. aṭṭaláya‘, y este del ár. clás. ṭalā'i‘).

1. f. Torre hecha comúnmente en lugar alto, para registrar desde ella el campo o el mar y dar aviso de lo que se descubre.
2. f. Eminencia o altura desde donde se descubre mucho espacio de tierra o mar.
3. f. Estado o posición desde la que se aprecia bien una verdad.
4. m. desus. Hombre destinado a registrar desde la atalaya y avisar de lo que descubre.
5. m. desus. Hombre que atisba o procura inquirir y averiguar lo que sucede.
6. m. germ. ladrón.

API de Google Maps para Flash

Imagino que no soy el único que se ha preguntado unas cuantas veces por que Google no decidía portar la API de Google maps a la plataforma flash... le veía muchas posibilidades y me parecía un paso bastante lógico, teniendo en cuenta las características innatas de la plataforma.

ejemplo de vista api google maps flash

La viabilidad y resultados, estaban claros, solo había que ver la versión de una herramienta de esta clase que ofrece Yahoo.

Pues muy recientemente, Google ha sacado a la luz la API preparada para su uso en plataforma flash, es decir, en aplicaciones como Flash, Flex. De momento dejamos fuera las versiones de flash para móviles ya que esta API viene preparada para su uso con ActionScript y quien sabe si quizás pueda soportarlo un flash lite o flash para pocket pc :)

Un ejemplo de las bases de su uso:

PLAIN TEXT
Actionscript:
  1. package com.google.maps.examples {
  2.  
  3. import flash.events.Event;
  4. import com.google.maps.Map;
  5. import com.google.maps.MapEvent;
  6. import com.google.maps.MapType;
  7. import com.google.maps.LatLng;
  8.  
  9. public class HelloWorld extends Map {
  10.  
  11.   public function HelloWorld() {
  12.     super();
  13.     addEventListener(MapEvent.MAP_READY, onMapReady);
  14.   }
  15.  
  16.   private function onMapReady(event:MapEvent):void {
  17.     setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
  18.   }
  19. }
  20.  
  21. }

Que refleja algo como esto.

Para los que no quieran meterse en algo como esto directamente, siempre quedará el genial componente Gmap, de Advanced Flash Components, que es gratuito y se puede emplear en desarrollos comerciales.

Se ve que la cosa podía haber llegado antes (solo hay que ver Gmap), pero con las mejoras introducidas en el Player 9 y la máquina virtual nueva para AS3, ya no habia escapatoria.

Astro: Adobe Flash Player 10 Beta

flash player 10 codename ASTRO

La nueva versión del player de flash, llamado momentáneamente "Astro" introduce nuevas características y funcionalidades realmente interesantes y que incrementan la dirección que toma la web en las experiencias creadas con Adobe Flash. Personalmente tuve la suerte de ver la presentación en vivo en el Adobe Max Chicago 2007, junto con Raúl a través de Blocketpc, y puedo decir que verlo en una pantalla gigante, con miles de americanos entusiasmados jadeando por Adobe... fue una "rich internet experience", pero en directo. :)

No solo trae mejoras en cuanto a funcionalidades, sino en cuanto a rendimiento. Las mejoras que se han llevado a cabo con la nueva máquina para AS3 y el player 9, siguen evolucionando en esta nueva versión.

Os citamos algunas de las nuevas características con las que contará el nuevo player:

Puedes ver todas las características nuevas y mejoras en este enlace.

Y algo de material para que podáis constatar lo que os comentamos:

Ver demostración
Ver todos los detalles y descargar Flash Player 10 en Adobe Labs
Read press release here

Cabe destacar que el diseño de la demo, me ha sorprendido, porque no me pega mucho para Adobe, y que para instalar el player 10 se ha de desinstalar previamente el player que tengamos. Para ello hay varias herramientas que Adobe pone a nuestra disposición... seguro que a más de uno le echa para atrás...

ACE: Adobe Certified Expert

Bueno, esta entrada del blog, me hace mucha ilusión porque me consta que no es una certificación sencilla de obtener...

El año pasado [Q] interactiva estuvo presente a través de mi mismo en el primer curso de formación en Flash Lite 3 que se impartía en todo el mundo, y que tuvimos la suerte de tener alojado en Barcelona. La gente de Adobe España ha trabajado duro en darle a los desarrolladores españoles el apoyo que necesitan para progresar y hacerse más visibles, y en este caso hicieron lo posible para que parte de la "poca" gente que en España se vuelca en Flash Lite estuviera presente. Era una gran oportunidad para comenzar el camino de las certificaciones y de mantener la magnífica relación que comenzamos en el Adobe MAX en Chicago durante el 2007.

Gracias a los esfuerzos de la gente de Adobe España (especialmente Natalia) pude asistir al curso, junto con Raúl Jimenez, y la gente de PxielGo y ser uno de las 3 primeras personas que comenzaban el camino para obtener la certificación de Flash Lite 3 Insturctor, pasando el examen y estando solamente pendiente de sacar la certificación como desarrollador.

Adobe Certified Expert Flash Lite 2.0

El martes pasado me presenté al CERTIFIED EXPERT para desarrolladores en Flash Lite 2.x (aun no hay examen equivalente para Flash Lite 3) y lo logré sacar, con lo que oficialmente soy Adobe Certified Expert en Flash Lite 2.0 (o 3.0 según como se mire) y Adobe Certified Instructor en Flash Lite 2.0 y 3.0. Ahí, todo de golpe XD

Para quien quiera saber algo del examen (aquí os dejo la lista de examenes de certificación con los que cuenta Adobe, y donde hay guías de preparación que tienen información sobre el examen, e incluso una muestra de cómo son) consta de algo más de 50 preguntas tipo test algunas de una sola respuesta, otras de varias respuestas posibles (te suele indicar el número de respuestas correctas), se agrupa en bloques temáticos y se requiere alrededor del 70% de aciertos para pasarlo. En principio creo que las respuestas incorrectas no restan. El problema principal con flash lite, es que hacen preguntas sobre algunos temas que en España no se trabajan, por ejemplo la plataforma BREW, y otro problema añadido es que las preguntas sobre el emulador son de la versión de Flash 8, ya que de aquella no existía Device Central... eso complica que algunas respuestas puedan ser viables para alguien que se encuentre en países como España, donde por cierto, por el tema del idioma te dan 30 minutos más para realizar el examen (igualmente el tiempo no es problema ya que te dan mucho y son preguntas cortas, de respuesta rápida)

En breve actualizaremos la web y blog con los consiguientes logotipos, y esperamos que esto nos ayude a promover el uso de Flash Lite como herramienta para creación de contenidos y experiencias móviles con un plus en diseño e interactividad... tenemos noticias muy interesantes en camino y no nos cabe duda que es una manera de que Adobe vea que estamos volcados en la tecnología y en ayudarles a llevarla adelante en este país, tenemos cosas muy interesantes que seguro que en no mucho podemos comentaros!

Flash Video (FLV) y compresión HTTP servidor - cliente

Esta entrada del blog representa a la perfección el momento en el que nos surgió la idea de crear este blog llamado (no sin razón) 2flash2furious. He aquí el proceso de calentamiento global en la oficina...

Flashero A. (itentando escurrir el bulto)
Oye B, estoy migrando una web de un alojamiento a otro y los videos FLV que tenía se han vuelto locos.
Flashero B. (concentrado)
Prueba a subir esto que estoy haciendo, que funciona bien a ver si también va mal.
Flashero A. (con rintintin)
También va mal, gañán.
Flashero B (incrédulo, o sea, es imposible de la muerte que vaya mal, te lo juro...).
va mal??????

Media hora después, con 3 versiones de swf distintas en el servidor los dos flasheros A y B deducen:

Aquí es cuando nos cagamos en acordamos de Flash, Adobe y la madre que trajo el desarrollo web a este mundo...

Lo bonito de la historia... siempre es el final...

Tras hablar con el proveedor en el que fallaba la aplicación con FLV (Hostalia), y tras arrasar la web de Adobe y Google buscando el problema que nos estaba traumatizando sin ningún fruto, empezamos a pensar que era imposible que un error tan EVIDENTE, no le hubiera pasado a nadie antes. Por suerte Jorge Solís acudió en nuestro rescate con su inmensa sabiduría y nos habló de la compresión HTTP que aplican algunos hostings para mejorar los tiempos de descarga de las webs (por ejemplo), y sus efectos nocivos sobre las cabeceras de los ficheros FLV donde casualmente se pasan los valores del bytesTotal, etc...

Tras contactar nuevamente con Hostalia, nos comunican que efectivamente tienen habilitada la compresión para el tráfico HTTP server - cliente, y muy diligentemente deciden que no es lógico aplicarla a ficheros FLV, con lo que actualizan TODOS sus servicios de hosting para evitar el problema (y aprovecho para felicitar públicamente a Hostalia por el magnífico servicio de atención al cliente del que disponen) y además lo hacen de forma inmediata, con lo que comprobamos que todo vuelve a la normalidad.

Moraleja:

"Si la precarga de un fichero FLV no te funciona correctamente, y has comprobado que todo está como debe ser, tracea por pantalla el valor de bytesTotal de la clase netStream. Si ocurre lo que hemos descrito... habla con tu proveedor de hosting sobre la compresión de tráfico HTTP para ficheros FLV".

Un capón a Adobe por no contemplar esta nota técnica (que por lo que hemos podido comprobar testeando en varios servidores con los que trabajamos, no es nada extraño cuando se habla de alojamientos compartidos...) en la documentación de la clase netStream, o de la propiedad bytesTotal.

Next Page →