Bienvenido CSS3

Aunque quizá sea demasiado pronto para darle una bienvenida con fuente de chocolate, figuritas de hielo y confeti sí que es buen momento para poder ir jugueteando con algunas de las características que esta nueva versión de CSS incluye y que nos van a poder permitir tener mayor libertad a la hora de crear gráficos para la web.

Realmente no tiene nada de malo el uso de imágenes estáticas pero el uso de propiedades CSS para generar los gráficos permite una mayor escalabilidad en el desarrollo y reduce algunos hipotéticos costes de producción. Si nos ponemos en un caso sencillo: creamos imágenes para unos botones en nuestra web y pasado un tiempo los queremos hacer más grandes. La imagen la tendríamos que rehacer por completo pero mediante el uso de algunas nuevas propiedades CSS nos podemos ahorrar estos pasos si hemos trabajado bien la hoja de estilos.

Me refiero a propiedades que te permiten crear sombras y degradados. ¿Cuántos botones hemos hecho hasta la fecha con alguno de estos elementos? Pues eso.

Si os dejáis caer por esta web vais a encontrar un montón de información y recursos sobre el uso de CSS y, los más interesante, un buen puñado de herramientas como Lineas Gradients o Transforms para ir probando estas cositas y ver su efecto en tiempo real. Un lujazo para los juguetones como ya digo.

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

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

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

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

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

Flash en Facebook, desarrollo de juegos casuales

Desarrollando aplicaciones flash web para Facebook con la API de Action Script 3

A raíz de un proyecto que estamos terminando en el estudio, y del que lamentablemente no os podemos comentar nada por cuestiones de privacidad, hemos experimentado el "infernal" mundo de Flash en Facebook, siempre que tengas que hacer una integración un poco curiosa entre tu aplicación y la red social.

Desde la elección de la técnica que vas a emplear para la inclusión del archivo a los mecanismos básicos para integrarlo con la herramienta (invitar amigos, tomar imágenes e información del usuario, gestionar permisos para publicar en el muro, etc.) existen una gran cantidad de aspectos a tener en cuenta. No nos hemos convertido ni mucho menos en expertos, pero tras una primera experiencia de test suave y ahora la experiencia real de una aplicación con bastante más complejidad, podemos decir que iniciarse NO es tarea fácil ni directa.

Analizando nuestro proceso, tenemos claro que el principal motivo por el que esto no es sencillo es que Adobe no ha dotado de una documentación a su API en AS3, y que el material que encuentras por la red es confuso y muy poco organizado. Si bien la wiki de facebook es de obligada lectura, aunque hable de la API en PHP principalmente, hay muchos términos, nociones y situaciones que es el único lugar en el que se recogen.

Nos hemos propuesto solucionar esto, así que poco a poco iremos publicando una serie de tutoriales sobre cómo crear una aplicación en Flash para Facebook desde cero, no solo en cuanto a la parte flash, sino servidor, integración (la parte más conflictiva cuando usas flash), llamadas a javascript propio o de Facebook, comunicación con el servidor remoto... No nos cabe ninguna duda de que será un recurso de mucha utilidad, pero te lo preguntamos a ti antes de pegarnos la currada: ¿te interesaría?

Tabla de compatibilidades de navegadores

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

Enlace a la tabla comparativa

CSS3 :: Font-face

Hay en ocasiones que estamos desarrollando webs en XHTML y nos encontramos en el diseño con tipografías que no tendrá la mayoría de los usuarios por lo que no podrán tener una correcta visualización de la página. Por lo que hasta ahora nos quedaban dos soluciones:

Ahora en CSS3 tenemos la etiqueta font-face que permite usar una tipografía ubicada en el servidor.
La sintaxis de uso es la siguiente:

@font-face {
font-family:NOMBRE_TIPOGRAFIA;
src: url(RUTA_TIPOGRAFIA);
}

A partir de ese momento ya se puede usar en el CSS.

La verdad que me parece un gran paso. Ahora a buscar soluciones para versiones de navegadores antiguas que no lo soporten :).

Os dejo un ejemplo para que veais como queda (se debe de probar en navegadores que ya lo soporten como puede ser a partir de la versión 3.1 de Firefox o safari 3.1)
Prueba de font-face

Plantillas para web móvil de Forum Nokia

Plantillas para web móvil de Forum Nokia

Forum nokia es uno de esos lugares donde un desarrollador de contenidos para móvil, en prácticamente cualquier tecnología, ha de estar registrado. Nokia es a día de hoy el gigante en telefonía móvil y por tanto siempre hay que tenerla muy en cuenta cuando hacemos cualquier cosa para terminales móviles, a menos que sea un proyecto cerrado para unos modelos determinados donde no entran los de la marca nórdica (véase blackberry, iphone, etc.)

Pero si aspiramos a algo general, Nokia es un deber. Además Forum Nokia no es importante por la marca que hay detrás, sino porque realmente es una fuente de conocimiento, ejemplos y comunidad impresionante.

En esta ocasión os traemos una serie de plantillas testeadas y creadas por el equipo de Forum Nokia para web móvil.

Muy recomendable.

AdobeEnVivo, grabación de eSeminars disponibles

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

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

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

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

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

librosweb.es

Aquí os dejo un interesante enlace en el que podrás encontrar libros gratuitos de programación o diseño web. Son libros para leer vía web, o en cambio, descargar en formato PDF para poder tenerlo siempre accesible en tu disco duro o imprimirlo y tenerlo en papel.

Son libros sobre cursos que los autores publican, y que, como anteriormente dije, son gratuitos !!!. El contenido es de carácter práctico, con mucho código de ejemplo. No como otros que tiene mucha teoría y texto pero con pocos ejemplo prácticos.

Actualmente en la página puedes encontrar libros sobre:

La url en la que los puedes encontrar es:
http://www.librosweb.es

Espero que os sirva...

Fireworks CS4, exportando con CSS

Exportar CSS desde Fireworks CS4

Pues parece que últimamente la hemos tomado con Fireworks, asi que vamos a seguir colaborando a predicar sus bondades con una de las características nuevas que nos pueden ahorrar algo de trabajo según en qué situaciones.

De casi todo es sabido que Fireworks permitía exportar una Layout cortado con la herramienta slice como una tabla con imágenes. Tal y como comento en éste interesantísimo post de Javi de aurea, esto es una herramienta muy útil para tirar del viejo HTML compatible con casi todo lo que se menea y crear rápidamente layouts para el envío de mailings.

Evidentemente no es lo mismo un mail que una web, con lo que la idea de crear tablas llenas de imágenes, con imágenes transparentes para rellenar huecos o crear espacios... o cualquier otro tipo de artimaña poco aconsejable no es demasiado atractiva. Fireworks nos permite ahora crear con el mismo proceso la versión con CSS de los cortes que hemos preparado, y aquí os dejo un interesante artículo al respecto de la mano de una publicación de Adobe: EDGE, en su número de Junio.

Exporting CSS with Adobe Fireworks CS4

Si bien veo esto como un ayuda grande para determinados tipos de página, o para determinados perfiles, para trabajos en los que se quiera hilar fino.... sigue tocando trabajar a manubrio.

Arranca Subflash 2009!

Grupo Talleres de Verano Subflash 2008 - Alicante

Pues si, tras un año que ha pasado volando, desde Subflash ya se están iniciando los preparativos para esta nueva edición, de la que solamente se saben de momento los días, aunque en el mismo post se indica que se darán a conocer todos los detalles de forma INMINENTE!

Además Subflash ha renovado la cara, con un nuevo blog donde se mantendrán actualizadas todas las informaciones relativas a los talleres y a las actividades complementarias que se quieren llevar a cabo durante el año.

Esto es el espíritu subflash, partidilla de futbolín para terminar el día con buenos amigos

Además en el nuevo formato de blog, se encuentra una página muy agradable para los que conocemos subflash desde sus inicios, que es la historia de la comunidad a lo largo de todos estos años.

Desde [Q] interactiva, y como siempre venimos haciendo estamos trabajando en la Organización del evento y en la puesta en marcha del site que permitirá darse de alta en los talleres, por eso sabemos que cuando se dice INMINENTE.... ¡es cuestión de horas!

Subflash, Talleres de Verano 2006 - Asturias

¡Comienza Subflash Talleres de Verano 2009!

Next Page →