A pesar de los tiempos que corren, muchas veces nos encontramos con gestores/servidores de correo que no interpretan bien los correos en formato HTML o directamente no lo interpretan, estos servidores suelen tratarse de algunos gestores de correos de nuestros hostings (webmail) o algunos especiales para utilizarlos con nuestros móviles o simplemente hotm*** .

Bueno esto tiene fácil solución (pensamos) se envía en texto plano y listo, pero a ver con que cara vas a tu diseñador/maquetador que se ha currado una plantilla para enviar tanto correos corporativos cómo de marketing y le dices que vas a pasar de su diseño… para evitar que nos coman vamos a intentar dejar a todo el mundo contento.

¿Y cómo lo conseguimos?

Solución a mano: mail en PHP
Pues enviamos los dos formatos, el del cuerpo con HTML y el del cuerpo con sólo el texto plano, EH! pero esperad no vamos a enviar dos e-mails!!, que decida el Servidor que correo mandar según a que persona.

Vamos a ver cómo lo haríamos con este pequeño ejemplo:

//creamos un identificador único
//para indicar que las partes son idénticas
$uniqueid= uniqid('np');

//indicamos las cabeceras del correo
$headers = "MIME-Version: 1.0\r\n";
$headers .= "From: Foo \r\n";
$headers .= "Subject: Test mail\r\n";
//lo importante es indicarle que el Content-Type
//es multipart/alternative para indicarle que existirá
//un contenido alternativo
$headers .= "Content-Type: multipart/alternative;boundary=" . $uniqueid. "\r\n";

$message = "";

$message .= "\r\n\r\n--" . $uniqueid. "\r\n";
$message .= "Content-type: text/plain;charset=utf-8\r\n\r\n";
$message .= "E-mail en Texto Plano sin formato.";

$message .= "\r\n\r\n--" . $uniqueid. "\r\n";
$message .= "Content-type: text/html;charset=utf-8\r\n\r\n";
$message .= "E-mail con <b>HTML</b>.";

$message .= "\r\n\r\n--" . $uniqueid. "--";

//con la función mail de PHP enviamos el mail.
mail('ejemplo@ejemplo.com', 'correo para todos', $message, $headers);

Cómo vemos todo va relacionado con que le indicamos a la cabecera del e-mail de que su Content-Type tiene contenido alternativo, indicándoselo con multipart/alternative, de este modo mandaremos un correo en ambos formatos y según si el correo al que es enviado soporta HTML verá la versión HTML y en el caso de que no lo admita vera el contenido alternativo y todos contentos.

En el ejemplo si os fijáis la codificación esta en utf-8 pero no es obligatorio para este funcionamiento.

$message .= "Content-type: text/html;charset=ISO-8859-1\r\n\r\n"

Todo lo que hemos explicado es para realizarlo a “mano” con la función mail de PHP pero si somos de esos que preferimos que nos lo den todo hecho en la mayoría de las librerías más utilizadas viene implementado.

Con PHPMailer
En el caso de PHPMailer tenemos la variable “altBody” que hace el papel de contenido alternativo que internamente si esta tiene valor monta lo que hemos hablado antes.

$mail = new PHPMailer();

$mail->Body = "Hola <b>HTML</b>";
$mail->AltBody = "Hola TEXTOPLANO";

Con Codeigniter y su librería email
Y si trabajamos con la librería Email de Codeigniter tenemos la función set_alt_message() que al igual que en PHPMailer ya se encarga de montar las cabeceras correspondientes.

$this->email->set_alt_message('Mensaje alternativo');

Espero que os sirva de ayuda este pequeño TIP

Y finalizó Subflash 2011. Nos levantamos a pesar del frío cogido la noche anterior y con un poco de resaquilla. Pero aún nos quedaba un gran día por delante y dos buenas conferencias por ver.

Tengo que admitir que este fue el Subflash que más rápido me pasó, casi ni me enteré. Pero tengo una buena noticia que deciros, queda un día menos para subflash 2012.

SBF04. Automatizaciones y datos variables con Photoshop

Ignacio Lledó nos sorprendió con una magnífica conferencia sobre Photoshop y como automatizar proyectos. Recomendable 100% para todos los diseñadores, fotógrafos y demás que utilizan Photoshop.

¡Ay la de horas que nos va ahorrar en nuestro equipo de diseño gráfico!
¡Gracias Ignacio!

Además Ignacio Lledó cuenta con unos maravillosos cursos de retoque fotográfico los cuales son muy muy recomendables en video2brain. Incluso a los conferenciantes nos obsequiaron con uno de estos cursos los cuales repartimos entre los asistentes por meritocracia

Andrés Karp sería genial tener los videos de estas dos confes también XD

SBF05. HTML5 y CSS3 para móvil

Javier Usobiaga, de Swwweet conocido por ser el mítico htmlboy nos explicó como utilizar HTML5 y CSS3 para el desarrollo en mobile. Una introducción muy útil con trucos, librerías a utilizar, efectos, las mejoras de HTML5.

Fue curioso como destacó las posibles soluciones a tener en cuenta cuando te propones adaptar una web a mobile:

• no hacer nada
• un sitio específico para mobile con sus problemas de link sharing, ¿qué pasa con los tablets? ¿un sitio para cada dispositivo?
• responsive web design! oooohhh yeah!

Aquí tenemos su presentación:

Nos recomendó un espectacular libro: Responsive Web Design de Ethan Marcotte
¡Gracias Javi!

En mi caso me quedé con las ganas de compartir algún momento más con Javier.

De paso preguntarle algo que me intriga: ¿existe htmlgirl? ¿lucharán contra los malvados flasheros? (valeeeee el chiste es malísimo pero es que el nick me encanta y me recuerda a esos maravillosos superhéroes de la marvel)

¡ Y los ansiados regalos!

Después de las conferencias llegó otra tradición más: los regalos! Es increíble como un evento tan pequeño (70 personas) tiene tanta repercusión y tantos sponsors. Se repartieron de nuevo más de 15.000 € en premios y muchos subflasheros están pensando venir con una furgoneta ya, porque cada año nos vamos más cargados

• Andrés Cayon del Adobe User Group Dreamweaver Spain que aporta nuevamente una licencia Adobe Web Premium CS5y encima esta vez no pudo asistir. ¡Gracias Andrés!
• BlocketPC del Adobe User Group Mobile Spain dirigido por Raúl Jimenez y Marcos Gonzalez que aporta otra licencia Adobe Web Premium CS5
• CDMon empresa de hosting que nos volvieron a regalar un plan de hosting profesional a cada uno de los asistentes. . CDMon también fue el encargado de buscar y encontrar la sede de este Subflash 2011. Una implicación muy grande y que es de agradecer.
• Video2Brain que regaló una semana gratuita de acceso ilimitado de sus cursos de formación profesional a todos los asistentes de subflash. ¡Y un increíble descuento de 100 € para la suscripción anual!
• IdN con sus packs de revistas de diseño.
• Indexbook que aportó un kit de libros para cada uno de los asistentes. ¡70 kits! Con dos maravillosos libros: Logomondo por Hitoshi Nagasawa y Good: Ética en el diseño gráfico por Lucienne Roberts +.
  Impresionante implicación gracias también al trabajo de Skeku: Criterion.

• Quadrícula y su necesaria ayuda a la organización del evento
• Agradecer de nuevo a Marcos y [Q] Interactiva que hacen posible este evento año tras año, con la misma ilusión y que nos permite a todos disfrutar. Gracias +1000.
• Eyegraphic. Raúl Solano, que tampoco pudo asistir, con la colaboración en el diseño de camisetas Subflash 2011
• Nosotros por nuestra parte seguimos estando orgullosos de participar como sponsors en subflash y esperamos seguir colaborando.

  Un año más nitsnets | studios aportamos la vestimenta oficial a todos los asistentes de subflash. Unas camisetas con un genial diseño de Armando de Criterion y fabricadas gracias a la gestión de Ramón Más “Sipi”. Y este año con versión para chicas, y es que cada vez hay más chicas en el evento… buena señal

Por otra parte tuvimos una suerte increíble. ¡¡¡Nos tocó uno de los premios grandes!!! Una licencia Adobe Web Premium CS5. Le tocó a Helena y fue muy gracioso porque ante la expectación de todos me preguntaba: “que he ganado? que he ganado?” y yo le dije: “la champions!!!!”

La otra licencia fue para el nuevo [Q]-employee con lo cual ya empezaron las suspicacias habituales… y es que desde que en A Coruña se llevaron dos licencias y de vez en cuando sale uno que otro undefined ya nadie se fia jajajaja

Marcos me decía: “que curioso después de tantos años sin que nos toque nada han tenido que venir dos nuevos integrantes en [Q] y nitsnets para que nos toque”.
Le contesté: “un poco mal si huele sí, jajajaja, los nuevos y de parte de la organización… jajaja” Pero así es el random de Flash

Para finalizar nos hicimos la imprescindible foto oficial con el hotel de fondo. Un año más una foto para el recuerdo.

La comunidad escribe sobre Subflash

Si os habéis quedado con ganas de más os dejamos aquí varios enlaces que comentan como fue el evento y sus sensaciones:

• Subflash 2011 despedida y cierre en Criterion por Armando
• Subflash 2011 resumen del evento en el blog del video2brain por Guzmán
• Resumen de Subflash 2011 gracias totales por Martín Iglesias
• Crónica de los Talleres de Verano de Subflash por la Asociación de Webmasters de España
• Gracias Subflash por Francisco Moreno

Todo el seguimiento de subflash 2011 en lostiemposcambian:

• Subflash 2011 Santa Susanna: Día 1 y 2
• Subflash 2011 Santa Susanna: Día 3

Viernes 2 de Septiembre de 2011: ¡Un nuevo subflash; asistir un nuevo lujazo!

Cumplimos un año de blog y hacerlo coincidir con el Subflash ha sido una genialidad porque así no se nos olvida nunca. Con muchos lectores y muy buenos feedbacks, gracias a todos.

Un año más hemos tenido el placer de poder asistir y participar en el mejor evento del año. Un evento en el cual se disfruta y aprende, se rie y descubre, te orienta y te hace avanzar… Un evento donde se imparten unas conferencias tecnológicas muy útiles y un fin de semana viviendo en comuna entre grandes profesionales del mundo web en España. El Subflash 2011 es la novena edición, la quinta en mi particular caso (como pasa el tiempo…)

Si te lo perdiste y has estado alguna vez en el #subflash esperamos que este post te haga pensar que no puede volver a pasar; y si no lo conoces te replantees como es posible

Viaje Subflash 2011 Santa Susanna

Este año por temas laborales (como no…) salimos demasiado tarde de Alicante pero con muchísima ilusión. De nitsnets | studios repetimos el equipo del año pasado Dani, Pere y yo; con una grata novedad Helena o @princesahelena (que confusión más graciosa cuando la twitteamos así y no tiene twitter… liada )

A las 23:00 llegamos a Santa Susanna cerca de Barcelona. Siempre es un momento especial cuando te reencuentras después de un año con muchos amigos, algunos de los cuales ni siquiera has tenido contacto durante todo este tiempo y sabes que vas a acabar hablando con una confianza tal como si llevarás toda la vida juntos. A sabiendas también que vas a hacer otros nuevos.

Y es que en Subflash cada año somos más, este año 70!!!, y no me extraña estuvimos en pleno lugar turístico de la Costa Brava, en el Hotel Tahiti Playa.

Presentación Subflash 2011

Al menos llegamos a la presentación, esa primera toma de contacto que ya es tradición.

Empezó con la genial introducción de Marcos donde orienta del lugar y como va a ir el fin de semana. Después da paso esta presentación divertidísima. Una especie de Alcohólicos Anónimos pero con frikis de la web. Una buena experiencia para conocernos todos un poquito más; además este año estuvimos casi todos porque en la web se promocionó muy bien.

Siempre recordamos con simpatía algunos de estos momentos: el típico “¡y yo!” de LaFlores cuando gritamos todos “¡Paco te queremos!”, el momento en el que Marc Palau dió paso a una entrada triunfal de Lesmes, etc. Nos resultó curioso como muchos se presentaban como “soy el que me como todos los marrones”, profesión que pese a la crisis parece que esta en auge

Seguro que me dejo a muchos (y si es así me vais a disculpar o comentar en el blog para que os añada) pero fue increíble reencontrarse con mis q-amigos, mi clon Marcos, Jorge con el que ya no hay piques futboleros (siempre gana el Barça), Berto que está casi en el paro con el 98% de internet realizado, Armando un tal tipo conocido por Criterion o no se que jajaja, Sipi con el que me quedé con mil temas que tratar, Toni y Astrid que siempre es un lujazo verlos, el crack Joan Garnet con el que volví a aprender y compartir muchos momentos (recomendado 100% su blog), Dani Llops el mejor lobo pixelado y divertido que te puedes encontrar, Cay que tuve el placer de conocer y hablamos mucho (gracias por todo Cay), David un crack HTML/Jquery con el que colaboramos dia a dia y esperamos que cada vez más, Zarate venido ni más ni menos que de Londres y compartimos grandes momentos (espero verte pronto pronto!).

Y sigo: el gran Francisco Moreno y su tronchante chica La Flores (os debo unas palabras jaja). El divertidísimo Marc Palau con sus videos de gatitos, Iván y su yporque no, Gonzalo, el mítiquisimo Miki que ya lleva 9 de 9 Subflash, el codeactionscripter Zguillez, los de A Coruña Team, Verónica, Juanmi y más alumnos aventajados del master de Proweb de la Universidad de Alicante ¡grande chicos!, Andres Karp todo un presidente de ADWE, Martin que me quedé con ganas de compartir más momentos, Alfons, el bilbaíno Diego, Alfonso Fonso con cara de poker, Abel Cabans y Maria con su exitoso humansTXT (acordaros de una camiseta M para mi ), el genial Toni Carbonell, el francés Steff un crack con el que he tenido el placer de colaborar en varias ocasiones (lástima que faltara Mel), Ignacio Lledó un increíble profesional de Photoshop, Guzmán Huertas project manager de Video2brain España, Idoia, Carmen, Raquel, Jose Ramón León, Olga Voskoboinikova y muchos más.

También fue genial conocer a familiares que frente a tal planazo de lugar y fin de semana se apuntaron; conociendo así el futuro de Jorginho (Marcos Junior) con un futuro esplendoroso en Subflash, PHP y [Q].

Y con un poco de pena la verdad de que faltaran ilustres como Raúl Jimenez que se la liaron un poco cambiando el Sublash al primer finde de Septiembre en vez el último de Agosto, Rodrigo, Raúl Solano por padrazo, Luis Adrián que nos desmotivo faltando, mi paisano Sergio Más, el crack Jorge Solis que desde Alicante que no le vemos, Alex que este año había tenido el placer de trabajar juntos! Isidro Perez, Juanjo Cardona que espero que no nos haya cambiado por política eehhh…

Y como no Andres Cayón que ya no se si estuvo presente porque con sus impresionantes tweets estuvo constantemente en boca de todos; sólo un ejemplo: “Pues os jodeis, hostias! >:( “@eladnts: +1000 @martinigleu: @tecnorama se te echa de menos aquí” #subflash“ ;D

Vamos con las conferencias:

SBF00. Video2brain, la mejor formación online!

Guzmán Huertas project manager de video2brain España nos contó las interesantes virtudes de la formación online mediante videos en todo este mundo digital.
La que considero la mejor forma de formarte online que además se renueva día a día sacando nuevos cursos o novedades como ver los videos en tu ipad.

video2brain ha apostado muy gratamente en Subflash; esperemos que esten contentos con el resultado, nosotros estamos muy agradecidos. ¡Gracias Guzmán!

Varios profesionales que asisten, organizan y dan conferencias en Subflash tienen fantásticos cursos de formación en video2brain como por ejemplo: workshop con Adobe Photoshop: Retoque facial, desarrollo de aplicaciones para iPhone y Objective-C por Marcos, WordPress…

Magníficos profesores como Andres Cayón, Marcos González, Ignacio Lledó, Jorge Mochón, Armando Sotoca…

Y no sólo patrocinan sino que además hicieron una promoción fantástica a todo el Subflash con un descuento de 100 €  de la subscripción anual. Wow!

SBF01. SaaS en la nube

Foto de Abel Cabans

Este año tuvimos el honor de poder participar como conferenciantes en Subflash.
Lo primero fue felicitar a mi gran amigo (pese a ser malísimo en el PRO Evolution Soccer jajaja) Armando de Criterion que tuvo la suerte de nacer el dia en que se celebraría el IX Subflash, un visionario.

Dimos una charla a nivel divulgativo sin nada de código de la experiencia que hemos vivido algo largo de los años al crear una empresa web 2.0. Cómo poco a poco con el objetivo de tener grandes clientes hemos caído en los servicios y que creemos que hay una solución mejor: el producto.

La solución es el Software como Servicio y sus formas de desplegarlo mediante el cloud computing. Servicios vs producto, trabajar por horas vs escalabilidad con éxito hasta el infinito. Dejamos frases como “no quería tener jefes así que monté una empresa, y ahora tengo 100 jefes (clientes)” y cual es nuestra visión para un emprendedor o para quien busca un futuro mejor. Enseñamos también parte de nuestras ideas para uno de estos Software as a Services, nuestro EDL Editor de Layouts (nombre dado por Joan aunque no se acordaba jajaja). Esto se puede ver en otra de nuestras conferencias en ADWE.

Gracias a Andres Karp que ha grabado gentilmente las conferencias para disfrute de todos, aunque la próxima vez avisa que van a ser publicadas en Internet para cambiar el tono excesivamente coloquial

Nos resultó un poco arriesgado salir del tema técnico pero esperemos que resultara de mucho interés al menos para el que no conociera todo esto o hacer piña quienes estamos intentando cambiar de modelo.

Recomendamos leer un post buenísimo de Ontuts que habla de diferentes tipos de emprendedores web: Las tres opciones del emprendedor: El bueno, el feo y el malo

El año pasado me sirvió tanto la charla de Luis Adrián Rosas y su Inteligencia Emocional que se nos ocurrió hacer algo parecido. Llevamos una pequeñita sopresa que creo que gustó mucho. Gracias a Wikishine (mi hermana es una artistaza) hicimos 80 chapas totalmente diferentes del mundo web 2.0, de subflash, de empresas de subflash, de iconos míticos de redes sociales, etc… y las repartimos entre todos.

SBF02. Piensa en Píxels Dani Llops

Ya el año pasado Dani Llops nos dio una genial charla sobre Combinar flash y drupal pero los que lo seguimos desde hace años nos quedamos con las ganas de recibir una conferencia sobre una de sus especialidades la programación creativa en Flash.

Fue una maravilla la verdad ¡Gracias Dani!. Por un lado una versión muy didáctica de tratamiento del color y los filtros, operaciones binarias, hexadecimales (106!!!!), códigos de color; y por otro lado vectores vs bitmaps donde a partir de Flash 8 se dio soporte nativo a operaciones de pixels, cómo mejorar el rendimiento con CacheAsBitmap, entender al fin como funcionan los blend modes en Flash y sobretodo ver los increíbles ejemplos de animación con píxeles que tanto nos cautivaron en su blog: anima pixeles.

Ya desde aquí animamos a Cay y Llops que el próximo año hagan una conferencia conjunta de optimización en Flash y trucos para hacer que cosas increíbles corran en ordenadores no creíbles

SBF03. Expresiones Regulares

Llegó la hora crítica del Subflash, sábado a las 16.00 donde el fantasma del sueño acecha inescrutablemente. La verdad es que yo estaba intrigadísimo de cómo un tema tan tan áspero y duro el crack más gracioso de todo el evento lo iba a hacer entretenidísimo y divertido.

Marc Palau nos sorprendió con una magistral clase de la potencia de las expresiones regulares. Tengo que ser sincero no consiguió partirnos de risa (pese a las geniales imágenes que amenizaban la confe) y fue en momentos duro. Me reí mucho con un tweet que decía: “me too, deu meu això s’hauria de prohibir… On es la ONU quan se la necessita?” – no diré su autor jajaja

Pero me sorprendió porque fue incluso mejor, muy pro Aprendimos muchísimo sobre expresiones regulares: tracear expresiones regulares, backtracking, greedy vs lazy, cómo distintos motores de expresiones regulares en PHP y ActionScript 3 tiene matices diferentes, herramientas útiles como la de Grank Skinner y su analizador de expresiones regulares (hay algo que este pedazo de crack NO haya hecho??)…

Me quedé convencido de que muchos de los desarrollos futuros que tenemos en mente en nitsnets | studios van a hacer un uso de esta conferencia y la potencia de las expresiones regulares.

¡Muchas gracias Marc!

Al final Palau nos deleitó con sus míticos pases de Youtube y ahí si el Subflash empezó a reir para ya no parar…
Os dejamos el resumen, os recomendamos verlos en este orden: NYAN Cat, I love cats, Songify This: CAN’T HUG EVERY CAT… otros de las míticas osti*** caidas y uno de fútbol del Tano Pasman

Noche y fiesta

Por la noche nos quedamos en el hotel y lo que empezó como un ligero II Torneo de Poker Texas Hold’em Oficial de #subflash acabó con horas y horas de juego. No pude revalorizar mi título de campeón y no pondré excusas pero fue muy muy divertido, algunos hasta jugando por equipos como Llops y Cay. Esta vez ganó Jorge la primera manga y la segunda… no me acuerdo bien y es que al pobre Marcos lo fastidié con mis bromas y cachondeo, pero como suelen decir por ahí “no sos yo, es el señor Jack Daniels”

Después salimos a tomar unas cervezas/copas más pero cayó el diluvio universal e hizo que la noche fuera un poco más corta.

¡Gracias Dani por ayudarme con este post!

Todo el seguimiento de subflash 2011 en lostiemposcambian:

• Subflash 2011 Santa Susanna: Día 1 y 2
• Subflash 2011 Santa Susanna: Día 3

Hace unos días escribimos un post informativo sobre cómo configurar el Routing de Symfony2, sobre todo atendiendo a los cambios y novedades con respecto a las versiones 1.x del Framework Symfony (en las que tenemos más experiencia). El siguiente paso lógico sería entonces aprender cómo utilizar este nuevo y flamante sistema de Routing que nos hemos configurado en Symfony2 para crear links o hipervínculos entre las páginas de nuestro proyecto.

Por supuesto queremos utilizar el sistema de plantillas Twig porque estamos básicamente enamorados de su simpleza y potencia, y esto significa nos podemos ir olvidando de los helpers PHP como link_to que utilizábamos en versiones anteriores de Symfony para crear hipervínculos. Mirando la documentación oficial sobre las plantillas en Symfony2, vemos que en su lugar hemos de familiarizarnos con una serie de funciones Twig: path, url y asset.

La función path

La función path de Twig generará la URL del enlace, basándose en la configuración del Routing. Esta función toma como parámetro el nombre de la ruta y un array de todos los parámetros que ésta necesite y devuelve una URL relativa:

  path(
    'nombre_de_ruta',
    {  'nombre_de_param1': valor_de_param1,
       'nombre_de_param2': valor_de_param2,
       ...
    }
   )

Atención, ya que puesto que la función path devuelve tan solo el path URL, en Symfony2 debemos incluir explícitamente la etiqueta HTML <a> que formará el enlace, y será en el atributo href donde irá el resultado de la función path.

Por ejemplo, supongamos que nos hemos definido la siguiente ruta para las páginas que contendrán los “productos” que mostramos en nuestra web:

mostrar_producto:
    pattern:   /producto/{nombre}
    ...

En la sintaxis de Twig {{ y }} son delimitadores que se utilizan para hacer un output, por lo que generamos un enlace a la página de un producto en particular así:

  <a href="{{
     path(
        'mostrar_producto',
       { 'nombre': producto.nombre_url }
     )
    }}">
     {{ producto.nombre }}
  </a>

La ventaja de este sistema es que si queremos modificar más adelante la URL de una página, tan sólo tenemos que cambiar la configuración del Routing, y todas nuestras plantillas generarán automáticamente la nueva URL. Por supuesto, la desventaja con la que nos encontraremos es que debemos utilizar constantemente los nombres de las rutas que hemos creado para generar enlaces. Nada nuevo si estamos acostumbrados al Framework Symfony en encarnaciones anteriores y a la necesidad de llevar un control exhaustivo de nuestras rutas, pero que puede ser una importante fuente de errores tontos si no vamos con cuidado.

La función url

Si queremos generar URLs absolutas, entonces tenemos que usar la función de Twig url, que por otro lado se utiliza de forma exactamente igual que la función path que hemos visto anteriormente.

<a href="{{
    url('homepage')
  }}">Home</a>

La función asset

Es muy común también incluir en los templates enlaces a imágenes, JavaScripts, hojas de estilo, y otros archivos que en conjunto denominamos assets. Para esto se utiliza la función de Twig asset. Por supuesto podemos simplemente meter “a pelo” el path relativo hasta estos assets (por ejemplo /mi_app/imagenes/imagen.jpg) pero la función asset puede ser muy útil ya que nos abstrae de dónde se encuentra ubicada físicamente nuestra aplicación. Por ejemplo:

<img src="{{
     asset('imagenes/imagen.jpg')
  }}" alt="Zelda!" />

El atributo src en este caso tomará el valor: /path_relativo_desde_root_hasta_mi_app/imagenes/imagen.jpg

¿Qué sería de la Web 2.0 sin la Fail Whale o las páginas de error 404 personalizadas? Es una práctica tan extendida que ya casi constituye una norma no escrita del desarrollo web: proveer al usuario de páginas de error que no sólo le informen de lo que está pasando sin perder la referencia de dónde está (es decir, totalmente integrada dentro de la estructura y el diseño de nuestro site), sino que además sean divertidas o por lo menos un tanto adorables, para aliviar el mal trago que supone el toparse de bruces con un error del protocolo HTTP. Por suerte para nosotros, en Symfony2 el proceso de personalizar las páginas de error es realmente sencillo e intuitivo.

Como siempre, el primer paso debería ser echarle un ojo a la propia documentación oficial para ver qué novedades nos trae Symfony2. Como veremos, no son pocas: además de la página de error estándar de HTML, Symfony2 viene con una página de error por defecto para la mayoría de los formatos de respuesta más comunes tales como JSON (error.json.twig), XML (error.xml.twig), Javascript (error.js.twig) y CSS (error.css.twig) y también otros menos comunes como TXT, RDF, y ATOM. Todas estas pantillas de error por defecto se encuentran dentro del FrameworkBundle. Si queremos substituir estas páginas por defecto por las nuestras personalizadas, simplemente debemos crear un archivo con el mismo nombre dentro de nuestro app/Resources/FrameworkBundle/views/Exception, es decir, siguiendo el procedimiento estándar para hacer un override de cualquier template que se encuentre dentro de un bundle de Symfony2.

Por supuesto, se pueden crear fácilmente plantillas de error específicas según el código de error. Para ello, simplemente debemos concatenar el código de error HTTP a la palabra “error” en el nombre del archivo, por ejemplo, podríamos montar una plantilla error404.html.twig específica para los errores 404 (Página no encontrada). El motor de Symfony utiliza el siguiente algoritmo para determinar qué plantilla utilizar:

• Primero, busca una plantilla del formato y código de error dado (por ejemplo, error404.json.twig) y si la encuentra, la sirve;
• Si no existe, se ignora el código de error y se busca la plantilla de error genérica para ese formato (en nuestro caso, error.json.twig);
• Si ésta tampoco existe, sirve la plantilla de error genérica de HTML (error.html.twig).

Lanzando un Error 404

Para lanzar un error 404 desde nuestra aplicación, tenemos la clase nativa de Symfony NotFoundHttpException:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

public function indexAction()
{
    $producto = //recoger datos de BD

    if (!$producto)
        throw new NotFoundHttpException('Este producto no existe!');

    //resto de la acción..
}

Es importante, a nivel de buena práctica de programación web, que cuando no se encuentra un elemento que el usuario ha solicitado se notifique al navegador mediante un error con código 404, aunque posteriormente sirvamos otro contenido alternativo (por ejemplo, una lista de posibles elementos relacionados).

Testeando el Error 500

Y para testear un Error 500 (el temido Internal Server Error), el código es tan simple como lanzar una excepción cualquiera desde nuestro controlador:

throw
new \Exception(
   'Error 500 de la Muerte!'
);

Ojo, que no es un error tipográfico, debemos escribir \Exception, no Exception, porque si no PHP se irá a buscar \Namespace_de_tu_Controlador\Exception y nos vamos a encontrar con un Fatal Error: Class [...] not found, en lugar de la excepción que queríamos.

Mientras programamos nuestro site en Symfony, tenemos que tener en cuenta que si estamos en entorno de desarrollo, las páginas de error que veremos no son las páginas de error de la versión de producción, sino las versiones debug para desarrollo, por ejemplo la plantilla sería exception.html.twig en vez de error.html.twig (por supuesto, éstas también pueden personalizarse, aunque son realmente majas). Si has perdido más de 20 minutos peleándote con la página de error por defecto y preguntándote porqué carajo no sale tu página personalizada, para después darte cuenta de que estabas viendo los debugs en entorno de desarrollo… no te preocupes, nos pasa a los mejores .

Por último, aunque ejemplos geniales e inspiradores de estas páginas de error user-friendly personalizadas los hay a puñados, aquí me gustaría destacar 2 sites que en mi opinión han hecho muy bien los deberes en este apartado: primero, GitHub por el uso innovador de una técnica de paralelaje en CSS para darle una pequeña interacción al usuario con esa sensación de profundidad, y a nivel nacional (y no es por pegarnos el pegote, es que realmente me encantan), nosotros mismos en Nosplay… todas ellas geniales, perfectamente integradas con la navegación normal del site y con un toque “adorablemente friki” con referencias a Star Wars .

GitHub Página no encontrada: “Estas no son las páginas que estás buscando”

GitHub Error Interno de Servidor (te acabas de despeñar, chaval).

Nosplay Página no encontrada: “¡No puedes pasarrrr!”

Nosplay Error Interno de Servidor: “¡Soy tu padre!”

Y como bonus track, por si no habíais visto la página de error 404 de este humilde blog (¿no habéis puesto nunca “asdfasdf” detrás del /post/ en la barra de direcciones mientras visitáis nuestro blog? increíble!), como todavía no habíamos tenido excusa para mostrarla, aquí va una captura:

Aunque nosotros teníamos menos margen de maniobra al ser un WordPress y no un site construído en Symfony2 claro… ¿quizás para la próxima versión?

Hace unos meses el Elche Club de Fútbol nos contrató para hacer su nueva campaña online con un site totalmente dinámico.

Para nosotros fue un honor que esta institución confiara en nuestra tecnología. Durante este post vamos a revelar algunos de los secretos de la tecnología utilizada y nuestro nts | EDL (Editor de Layouts). Está desarrollado íntegramente en PHP y CodeIgniter 1.7.3. Este proyecto fue dirigido por nuestro desarrollador Pere Monerris que creó e ideó nuevos módulos para el EDL como gestión de partidos de todas las categorías de futbol base, clasificaciones, control de goles, calendario y un largo etcétera.

Algunas de sus funcionalidades se pueden ver en este video:

Ya poseíamos experiencia en el mundo de los managers de fútbol al haber creado todo el motor de gestión de los campeonatos de la escuela de fútbol Newsport de Badalona. En este caso juntamos la tecnología gopress junto con el manager de fútbol que al fin y al cabo era un gestor PCFútbol con generación/gestión de ligas internas.

Se pueden ver algunos ejemplos y prototipos de estos sistemas en la conferencia que dimos hace unos meses para ADWE: Industrialización de la web

A nivel gráfico también echamos el resto, diseñando el site en base a unas estructuras de caja y dándole total importancia a la fotografía y el impacto visual con el verde Elche como base. También las ilustraciones se diseñaron a medida cuidando hasta el último detalle, mirad qué graciosas estas personalizaciones del pájaro del twitter:

El resultado fue un éxito de acogida por parte de los aficionados así como el club que ha visto como sus visitas se han multiplicado, dando a sus socios y afición un mayor servicio. Quizás la nueva web les ayudó a llegar a los Playoffs y luchar por el ascenso a Primera!

Incluso nos invitaron a participar en la presentación pública de la nueva web en rueda de prensa:

De esta forma ya he cumplido otro de mis sueños “ser futbolista profesional” o al menos participar en una rueda de prensa de un equipo profesional que esperemos pronto este en la Liga BBVA en Primera División.

Ahora solo me falta jugar al fútbol como Leo aunque más o menos se puede hablar como ellos: “Si bueno no, la web ha sido complicada; el framework se cerraba atrás muy bien y al final todos los sites son 11 contra 11 followers”

Aunque el release de la versión final de Symfony2 haya sido retrasado, los chicos de SensioLabs (y toda la comunidad Symfony, por supuesto) siguen avanzando pasito a pasito para solucionar todos los bugs y cerrar toda la documentación, condiciones necesarias para terminar con la fase beta. Mientras tanto, nosotros los desarrolladores de a pie podemos aprovechar para ir familiarizándonos con los (considerables) cambios con respecto a la versión 1.4, aunque actualmente nos enfrentamos a una situación prácticamente inédita: la documentación existente todavía es escasa y no está actualizada (ni mucho menos traducida al castellano, para todos aquellos que no estéis a gusto con el inglés).

Como el título de este post indica, vamos a tratar una de las partes más potentes, y a su vez que más quebraderos de cabeza provoca del framework Symfony: el Routing. Aunque la definición en sí del Routing (mediante patrones de reglas y el uso de wildcards o variables) no ha cambiado (demasiado) con respecto a las versiones de Symfony 1.x, donde sí que han habido extensos cambios (y, en nuestra modesta opinión, para mucho mejor) es la forma de configurarlo, y es en estas novedades en las que nos vamos a centrar.

¿Symfony2? ¿Routing?

Lo primero es lo primero, y antes de hablar específicamente sobre el Routing, deberíamos echarle un ojo a las nuevas características que nos trae Symfony2, y para eso, recomiendo el Quick Tour de Symfony2 donde se muestran muchas novedades interesantes.

El objetivo del sistema de Routing en Symfony es mapear patrones de rutas URL a los diferentes controladores de la aplicación, con lo que nos permite utilizar de forma fácil y mantenible pretty URLs (“an absolute MUST to any serious web application”, en palabras de los creadores de Symfony). Una vez puestos en situación, tenemos la documentación del Routing en el libro oficial de Symfony2 (aún en inglés, claro), lectura de referencia obligada.

Formato de Configuración del Routing

La primera gran noticia es que además de utilizar YAML para definir los archivos de configuración del Routing de Symfony, también podemos definirlas tanto en XML como vía PHP de forma intercambiable y sin afectar al rendimiento de la aplicación, ya que las rutas generadas son cacheadas. Incluso podemos utilizar una combinación de todas para definir nuestras rutas. No es que tengamos problemas con el formato YAML en particular (aunque puede resultar bastante odiable, sobre todo si algo falla), pero todo lo que sean más opciones para el desarrollador es siempre bienvenido.

La sintaxis en XML es por supuesto mucho más verbosa, pero también más potente, y de todas formas, creo que a estas alturas la mayoría de desarrolladores estamos tan acostumbrados a las estructuras de nodos en formato XML que quizás nos resulte más intuitiva, y con la ventaja adicional de que nuestro IDE nos ayudará a autocompletar los nodos y nos informará amablemente si nos hemos colado en algún sitio. Por supuesto, la opción más potente pero mucho menos legible (y por tanto, yo creo que menos recomendable) será definir las rutas “a pincho” mediante código PHP. Existe una alternativa muy elegante que es definir la ruta mediante annotations (es decir, mediante comentarios en el propio código PHP) embebidas en el controlador, una pequeña joya que comentaremos exhaustivamente más adelante.

Archivos de Routing Externos

La siguiente diferencia en la configuración del Routing, y quizás con aún mayor relevancia que el punto anterior, es que ahora se pueden hacer includes (o imports) de otros ficheros externos de Routing. Si alguna vez habéis programado un proyecto relativamente grande en Symfony 1.x seguro que el routing.yml acabó siendo una pesadilla organizativa donde había casi tantos comentarios de referencia para distinguir qué rutas correspondían a qué módulos como rutas en sí. Pues bien, gracias a esta nueva y genial feature, podemos afirmar que esto es cosa del pasado. Ahora, cada controlador puede definir sus propias rutas, y tan sólo debemos importarlas desde el fichero principal de configuración de Routing.

Además, podemos definir prefijos para estas rutas cargadas externamente, lo cual nos ayudará aún más a tener nuestras rutas bien organizadas, simples y elegantes.

@Route: Annotations al poder

Las annotations son una de las features del lenguaje Java a la que más partido se le puede sacar y que, aunque no son soportadas de forma nativa por PHP, en Symfony2 pueden utilizarse para configurar muchas funcionalidades de los controladores de manera simple y concisa. Para ello, deberemos activar el SensioFrameworkExtraBundle. No te dejes intimidar por eso de experimental, sigue leyendo y verás como merece la pena “arriesgarse” por la potencia que tienen.

La annotation @Route es la que aquí nos concierne. Su función es mapear un patrón de ruta con una función controlador, y como ya hemos comentado, lo mejor es que lo hace desde el propio código del controlador. Podemos encontrar la documentación de @Route aquí. La mayor ventaja es que además, de esta manera, el código del controlador y su configuración asociada se encontrarán en el mismo archivo (el de la clase del controlador). A la hora de definir rutas más o menos complejas mediante una annotation @Route se pueden utilizar por supuesto variables, requerimientos, etc. tal y como haríamos con una ruta definida por cualquier otro método. Por ejemplo:

/**
 * @Route(
       "/lista/:nombre/:page",
       requirements:{ "page" = "\d+"},
       defaults:{"page"="1"}
    )
 */
public function listarAction()
{
    //código de la acción
}

Características adicionales a destacar:

• Nombre de Ruta

  Por defecto, una ruta definida con una annotation @Route recibe un nombre basado en una concatenación del nombre del controlador y el método (acción) sobre el que se define. Por nuestra experiencia, es clave que los nombres de rutas en Symfony sean fáciles de recordar, sencillos y sobre todo autoexplicativos, así que recomendamos encarecidamente el uso del atributo de annotation name para definir un nombre de ruta que cumpla esas características. Por ejemplo:

  /**
   * @Route("/", name="lista_productos")
   */
  public function listarAction()
  {
      //código de la acción
  }
  

• Prefijos

  Una annotation @Route definida a nivel de clase (en lugar de a nivel de método o acción) define un prefijo para todas las rutas que se definan dentro de los métodos de esta clase. Ya hemos comentado brevemente los prefijos a la hora de incluir archivos de ruta externos, pues bien utilizando annotations también podemos disfrutar de la potencia y limpieza organizativa de esta característica nueva del Routing de Symfony 2.

  
  /**
   * @Route("/productos")
   */
  class ProductoController extends Controller
  {
      /**
       * @Route("/:nombre", name="mostrar_producto")
       */
      public function mostrarAction($id)
      {
        //código de la acción
      }
  }//end of class
  

  Así, hemos mapeado la acción mostrar (definida en la función mostrarAction) dentro del controlador de producto a una regla de Routing cuyo nombre es mostrar_producto y cuyo patrón es /productos/:nombre

• Importación for Dummies

  Otra ventaja de las annotations es que nunca se nos olvidará importarlas en el archivo de configuración principal del Routing ya que podemos importar directamente las rutas de todos los controladores (así, a saco) o también por controlador individualmente.

  # import routes from all controllers
  all:
      resource: annotations:*/Controller
  

En resumen, un montón de potentes y jugosas novedades que nos harán sin duda la vida mucho más fácil desde un punto de vista logístico. El Routing de Symfony, que ya era de por sí una pequeña maravilla, ha ganado enteros en donde más fallaba: a nivel organizativo.

Para probar este ejemplo hay que escribir un texto que contenga una url (por ejemplo: http://www.lostiemposcambian.com)

Para esta tarea detectamos el cambio en campo de texto mediante addEventListener(Event.CHANGE, change_handler);
y buscamos mediante expresiones regulares las palabras que sean direcciones web (urls) y que no sean direcciones acortados con bit.ly

[...]

function change_handler(event:Event):void
{
       //expresión regular para encontrar una url válida
	var regex:RegExp = /(http[s]?:\/\/[\S]+)\s/ig;

       //obtenemos en un array las palabras que coinciden con la expresión regular
	var urls:Array = text_ta.text.match(regex);

	if(urls.length > 0)
	{
		var total:int = urls.length;
		for(var i:int=0; i< total; i++){
                     //si no es una url bit.ly la acortamos...
                     if(urls[i].indexOf("bit.ly") == -1) {
                             shortenerURL(urls[i]);
                     }
		}
     }
}

Donde el método shortenerURL(urls); es prácticamente igual al método que acortaba la url shortenclick_handler en el ejemplo anterior con la diferencia que ahora cuando acabe de acortar la url hará un reemplazando la url larga por la acortada. Para eso nos hemos guardado la url que vamos acortar en la variable url_actual.

[...]
function complete_handler(event:Event):void
{
       //cogemos la url acortada y la limpiamos de saltos de linea
	var shortURL:String = String(event.target.data).split("\n").join("");

        //reemplazamos la url larga por la acortada y añadimos un espacio para continuar escribiendo
        text_ta.text = text_ta.text.replace(url_actual, shortURL)+" ";
	info_lb.text = "";

}

De esta forma tenemos una cómoda forma de escribir texto, por ejemplo para twittear, sin tener que estar convirtiendo la url como otra tarea aparte. De esta misma manera lo hace la aplicación de escritorio TweetDeck que sirve para gestionar cuentas de Twitter; esta aplicación esta desarrollada en Adobe Air y ActionScript 3.0

Pero, ¿qué es un acortador de direcciones? Un acortador de direcciones es un servicio que traduce una dirección de una página web normal en una dirección codificada con un número reducido de carácteres. Esto es debido a que en Twitter sólo podemos utilizar 140 carácteres en cada tweet y para poder compartir urls necesitamos que nos ocupe lo mínimo posible

Hay muchos servicios de este estilo como podéis ver en este otro post: 16 sitios para acortar urls. El más famoso es bit.ly.

Este es un post vamos a acortar una url con ActionScript 3.0 y ver que posibilidades nos dan los acortadores de url que nos permiten incluso obtener estadísticas de estos enlaces breves.

Acotar url con ActionScript 3.0 y bit.ly

Para poder utilizar la API de bit.ly lo primero que tenemos que hacer es obtener una API Key como en todas las APIs web 2.0. Primero te registras en bit.ly y luego solicitas las API Key. Mediante el login y la apikey podremos hacer solicitudes a la API.

En este caso para acortar una url utilizaremos el método shorten

Después tan sólo hay que llamar al método mediante URLLoader pasando por GET los parámetros adecuados: login, longUrl, apiKey, format. Donde tenemos varios formatos: txt (texto plano), XML o JSON. En el ejemplo utilizaremos simplemente el texto plano.

//variables
var LOGIN_SHORTENER:String = "TU LOGIN";
var APIKEY_SHORTENER:String = "TU APIKEY";
var FORMAT_SHORTENER:String = "txt"; //xml / json / txt

//datos de carga
var datos:URLLoader = new URLLoader();
datos.addEventListener(Event.COMPLETE,complete_handler);

[...]

         //expresion regular que nos dice si la url es una url correcta
          var regex:RegExp = /^http(s)?:\/\/((\d+\.\d+\.\d+\.\d+)|(([\w-]+\.)+([a-z,A-Z][\w-]*)))(:[1-9][0-9]*)?(\/([\w-.\/:%+@&=]+[\w- .\/?:%+@&=]*)?)?(#(.*))?$/i;

          if(regex.test(url_ti.text)) {
	        //es una url correcta y no es del acortador bit.ly
         	 if(url_ti.text.indexOf("bit.ly") == -1) {
                      var url_bitly:URLRequest = new URLRequest("http://api.bitly.com/v3/shorten");
                      url_bitly.method = URLRequestMethod.GET;

	             var vars:URLVariables = new URLVariables();
	             vars.longUrl = url_ti.text; //url a enviar
	             vars.login = LOGIN_SHORTENER;
	             vars.apiKey = APIKEY_SHORTENER;
	             vars.format = FORMAT_SHORTENER;

	             url_bitly.data = vars;

                     //hacemos la petición a la url con los parametros por GET
	             datos.load(url_bitly);
         }

[...]

function complete_handler(event:Event):void
{
       //al ser el format txt nos devuelve la cadena plana
	var shortURL:String = String(event.target.data);
	result_lb.text = shortURL; //donde result_lb es donde mostramos el resultado
}

Como curiosidad también hemos añadido la funcionalidad de copiar esa url al portapapeles desde Flash.

function copyclick_handler(event:MouseEvent):void
{
	if(result_lb.text != "")
	{
		System.setClipboard(result_lb.text);
	}
}

Si queremos hacer esta labor de acotar una url desde servidor con un lenguaje PHP tenemos un claro ejemplo en el blog de blog.unijimpe.net: Acortar urls con PHP y API bit.ly

Estadísticas en una url acortada

Por otro lado gracias a los acortadores y a sus APIs también podemos conocer las estadísticas de clicks de estas urls acortadas así como desde que fuente (referrer) se ha realizado el click. El método es referrers.
Se le envia la url acortada y devuelve un XML como indica en la documentación oficial:

<?xml version="1.0" encoding="UTF-8"?>
<response>
  <status_code>200</status_code>
  <data>
    <short_url>http://bit.ly/hbt0d7</short_url>
    <global_hash>hDna9J</global_hash>
    <user_hash>hbt0d7</user_hash>
    <referrers>
      <referrer>http://twitter.com/</referrer>
      <clicks>19</clicks>
    </referrers>
    <referrers>
      <referrer>direct</referrer>
      <clicks>16</clicks>
    </referrers>
    <referrers>
      <referrer>http://td.partners.bit.ly/</referrer>
      <clicks>6</clicks>
    </referrers>
    <referrers>
      <referrer>http://twitter.com/eladnts</referrer>
      <clicks>4</clicks>
    </referrers>
    <referrers>
      <referrer>http://mobile.twitter.com/perex/following</referrer>
      <clicks>1</clicks>
    </referrers>
    <referrers>
      <referrer>http://www.lostiemposcambian.com/blog/tag/nitsnets/</referrer>
      <clicks>1</clicks>
    </referrers>
    <referrers>
      <referrer>http://www.lostiemposcambian.com/blog/web-2-0/frameworks-php-symfony-vs-codeigniter-casos-de-exito/</referrer>
      <clicks>1</clicks>
    </referrers>
  </data>
  <status_txt>OK</status_txt>
</response>

En el ejemplo ponemos la url comprimida de la Industrialización en la web y vemos que la fuente desde donde más se ha pinchado ha sido twitter

Montar un propio acortador de urls
Incluso si no quieres depender de un servicio externo para acortar las urls podriamos incluso llegar a crear nuestro propio acortador de urls como se puede apreciar en “Monta tu propio acortador de url”

En condiciones normales, Flash nos ofrece la potencia de reproducir una línea de tiempo hacia atrás utilizando el método prevFrame. Sin embargo, si incluimos un video sobre la línea de tiempo e intentamos reproducirla hacia atrás utilizando ActionScript, es muy probable que nos encontremos con que se reproduce mal e incluso va dando saltos.

La raíz de este problema se encuentra en la estructura interna de keyframes (fotogramas clave) del propio vídeo. Un archivo de vídeo digital comprimido sólo almacena los cambios en la imagen que se producen entre un frame y otro frame, pero no es así con los keyframes, que se almacenan como imágenes nuevas y completas. Por tanto, dependiendo de la cantidad de movimiento (o cambios de plano) que incluya el vídeo, necesitaremos más keyframes (esto es cierto incluso aunque se vaya a reproducir sólo en sentido normal, of course), y para que un vídeo se reproduzca correctamente tanto “hacia delante” como “hacia atrás”, necesitamos un mayor número de keyframes. Como regla, con una distancia entre keyframes de 2 (keyframes cada 2 frames) el vídeo se reproducirá perfectamente en ambos sentidos, pero se incrementará notablemente el tamaño del archivo (aunque seguirá siendo sensiblemente menos que dos vídeos independientes)

Desde Flash Media Encoder que viene con el Adobe Creative Suite se puede cambiar dicha distancia entre keyframes accediendo en el panel de Ajustes / Pestaña de la derecha de Video / Ajustes avanzados / Definir distancia del fotograma clave

He preparado una pequeña demo con un vídeo de yo mismo (bueno, más bien mis pies) caminando por mi estudio, en la que he incluido las dos versiones: primero, sin meter más keyframes (podemos ver claramente como al reproducirse hacia atrás, el vídeo va a trompicones) y otra reduciendo notablemente la distancia entre keyframes a 6 (es decir, keyframes cada 6 frames) en el que veréis como mis gráciles pies van hacia atrás mucho más elegantemente.

Por supuesto, lo ideal es buscar un compromiso entre reproducción óptima y peso. Por ejemplo, en la demo la diferencia de peso entre un vídeo y otro es de apenas 30 kb, así que creo que compensa sobradamente. Yo he encontrado que, en general, para vídeos a 24 frames por segundo (fps), con keyframes cada 6 frames suele ser suficiente y no supone un incremento demasiado elevado del tamaño del archivo de video. Leí en un artículo de la revista Web Designer que era conveniente que la distancia entre keyframes fuese un número divisor del número de frames por segundo que tuviese el vídeo, y aunque el autor no justificaba de ninguna manera el porqué yo siempre intento seguir esta regla. Así que por ejemplo si en vez de 24 fps tenemos un vídeo de 15 o 20 fps, sería conveniente que la distancia entre keyframes fuese de 5.

Esto nos ahorrará el tener que incluir dos vídeos (uno para cada sentido) con el consiguiente ahorro de nuestro tiempo a la hora de prepararlos, y también, ya más a largo plazo, de ancho de banda y de tiempo de espera para el usuario.

Utilizado en: OCB Blackthinking

Como apunte de know-how propio, es así como hicimos el 360º interactivo de la isla en el site de OCB Blackthinking, una de las muchas features ocultas o semi-ocultas que tiene esa web y que, si no llega a ser por esto, nos hubiera supuesto aún más quebraderos de cabeza!