LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

12 mayo, 2012
by LeoBaraldi
3 Comments

Usar la API de Facebook, ¿por dónde comenzar?

Facebook va más allá de su portal e interacción entre los usuarios, ofrece realmente una plataforma completa con herramientas para desarrolladores donde se pueden hacer aplicaciones para la Web, móviles y Facebook. Estas aplicaciones ponen en servicio un sin fin de métodos y propiedades para que nuestras APPs o Webs puedan convertirse en potentes sistemas de marketing, mediante la recolección de datos y comportamientos de los usuarios.

La API está desarrollada con un extensa compatibilidad a la mayoría de los SDK actuales disponibles, PHP, JavaScript, Android e IOS SDK, ActionScript etc. También está disponible una cantidad básica de plugins para la interacción de nuestros sitios con Facebook en unos simples copy/paste!

El problema concreto que se presenta es que al ser tan extensa y al poseer tantas posibilidades a la hora de listar ventajas o a elegir “que lenguaje es el mas adecuado” se puede volver una tarea desalentadora.

Antes de comenzar, lo correcto sería responder una pequeña lista de preguntas para saber correctamente a que sección específica de la documentación nos deberíamos dirigir:

Quiero leer completamente toda la documentación sin importar el SDK que valla a utilizar: Es muy recomendable ver todo el repositorio de la documentación para tener una idea general de las posibilidades y acercarse mas a esto de las app para Facebook.

Quiero crear una app para mi Web o integrar mi pagina Web con funcionalidades de Facebook: En muchos casos vamos a querer relacionar Facebook y nuestra Web, por ejemplo desde colocar un liked buttom, a un login usando la cuenta de Facebook o hasta la necesidad de recuperar datos y preferencias específicas de un usuario para nuestra Web.

Quiero crear una app (Aplicación) para facebook: Crear aplicaciones dentro de facebook es uno de los recursos mas válidos para generar tráfico. Desde la posibilidad de crear juegos online, recabar datos, relacionar usuarios, crear interacciones como cyber bares, salas de reuniones virtuales o simplemente para promocionar un producto.

Quiero crear una app para un móvil, ya sea android o iOS (iphone): Finalmente también es posible crear aplicaciones nativas que no requieran usar un navegador Web. Muy útil si a una aplicación le queremos complementar recursos sociales o medias shares (compartir video, fotos y/o sonido).

Una vez entendido esta clasificación general, el siguiente paso es comenzar hacer uso de la API en el lenguaje más familiar.

13 abril, 2012
by LeoBaraldi
2 Comments

Agregar una aplicación a una página de facebook (agregar pestaña)

Rev: 13/04/2012

Una vez lograda la configuración y puesta de nuestra aplicación, tendremos la necesidad de agregar o vincular esta app con nuestra pagina de facebook. Para agregar debemos invocar la siguiente url:
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Donde  YOUR_APP_ID es la ID de la app [ ver imagen ] 1
Donde  YOUR_URL es la url del lienzo [ ver imagen ] 2

Indicar a que página se agregara la app [ ver imagen ]

Ver ejemplo funcionando, al entrar clic en la pestaña capitulo 1

28 marzo, 2012
by LeoBaraldi
12 Comments

Crear una aplicación para facebook, primeros pasos

Rev: 13/04/2012: Las app que no cuentan con un servidor seguro https están dejando de funcionar

Actualmente Facebook revoluciono la manera de comunicarse y de hacer presencia en la Web. En la actualidad no hay sitios sin la inclusión de redes sociales a sus notas o portal. Hasta alguno van mas allá, creando aplicaciones.

Cuando necesitamos hacer uso de la API de facebook o cualquiera sea, se nos presenta los requerimientos y metodologías propias de la misma mas allá del lenguaje a utilizar. Este es uno de los puntos donde el desarrollador deberá escrudiñar y resolver que métodos son los mejores, actuales y futuros para la aplicación a crear.

Facebook en la evolución de su plataforma fue presentando diferentes métodos de comunicación, los cuales en la actualidad aun viven todos por igual. Vale aclarar que por ejemplo el método FBML el cual consiste de la utilización de etiquetas para comunicarse con la plataforma de Facebook, no solo que esta desestimado sino que a partir de este año no es mas compatible con la API. Por esta razón Facebook alienta a usar su Graph API la cual innova en métodos y propiedades ya que la misma se basa en formato JSON logrando mayor compatibilidad con los lenguajes disponibles, como por ejemplo: JavaScript, PHP, ActionScript, .NET y la mayoría de lenguajes OOP.

Por esta razón es que la API de facebook en la mayoría de los casos se vuelve complicada, redundante y anti newbie para quienes dan sus primeros pasos. Es tanta las posibilidades, métodos y nuevos cambios que agregan que suele ser media tediosa. La idea de este mini tutorial es saltear los obstáculos innecesarios de investigación e ir directamente a la plataforma recomendada utilizando después de ahí en mas el lenguaje que mas común les sea.
En los siguientes tutoriales usaremos actionscript, javascript y algunos en php.

Para comenzar es importante listar que necesitamos:

  • Registrarnos o tener una cuenta de usuario de Facebook
  • Una vez identificado, registrarnos como desarrolladores en https://developers.facebook.com/ haciendo clic en “aplicaciones” [ver imagen].
  • La primera vez nos solicitara permiso para acceder a la información de nuestra cuenta [ver imagen]
  • Completado el permiso a nuestros datos hacemos clic en “crear aplicación“ [ver imagen]
    Importante: se nos pedirá validar nuestra cuenta con un numero de móvil, deben cargar el numero de su teléfono móvil y esperar que la plataforma les envié un código de validación.
    Recuerden que si están en Argentina deben usar el dígito 9 para indicar que es un teléfono celular. Ejemplo: Argentina - Córdoba: 9 351 6252233 donde 9 es la característica que indica que es un celular, 351 es la característica de Córdoba, 6252233 el numero celular sin el prefijo 15. [ ver imagen ]
    - Una vez validado el número de teléfono, llenaremos los campos “Nombre para mostrar de la aplicación” y “Espacio de nombres de la aplicación“. En el primer campo colocare un nombre que describa nuestra aplicación, en el segundo campo un nombre exclusivo de nuestra app, este no puede tener espacios ni mayúsculas y finalmente aceptamos los términos de uso, luego presionamos continuar. [ ver imagen ]
  • Verificar si somos humanos mediante capcha [ ver imagen ]
  • Completado todos estos pasos, ya logramos tener nuestra primera aplicación, así mismo queda unos puntos mas a detallar para concluir con lo mínimos requerimientos para luego ya pasar a interactuar con la plataforma.
    Vease la imagen que el indicador A: es el id de la app que luego usaremos para interactuar con esta aplicación, cada aplicación tiene su único identificador. B: Este es el código secreto para la dicha app, en algunos casos se le requerirá este código.
    Dado el caso de que vamos a trabajar en pos de crear una app para facebook vamos a completar los siguientes campos:
    La información básica ya fue cargada previamente, aunque si se requiere se puede editar en esta etapa (1, 2, 3).
    En el apartado “Seleccione como tu aplicación se integra con Facebook” seleccionamos “Aplicación en Facebook” y completamos los campos siguientes:
    Canvas URL“: Aquí indicamos la url o dominio donde tenemos alojados nuestros archivos html, php, asp etc.
    URL segura de la página principal“: Aquí podemos colocar el mismo dominio que pusimos en el campo anterior y en la parte del protocolo http cambiarlo por “https”. [ ver imagen ]
  • Finalmente en el apartado “Pestaña de página” Colocamos un nombre, y nuevamente las url de nuestro canvas, siguiendo el mismo criterio que en el paso anterior, no olviden de donde pide url segura usar https [ ver imagen ]

PD: Fíjese que la ultima imagen difiere de las restante por los últimos cambios realizados por Facebook en su plataforma, así mismo los pasos anteriores siguen siendo validos para crear una app

Finalmente pudes ver aqui el resultado de todos estos pasos y de nuestra primera APP!

10 diciembre, 2011
by LeoBaraldi
1 Comment

Centrar movieClip según evento mouse

Este ejemplo acomoda el objeto al centro del stage según donde se haga click. Ejemplo solicitado por mail, se los dejo a quien le pueda ser útil.

ActionScript
< view plain text >
  1. import flash.display.MovieClip;
  2. import flash.events.MouseEvent;
  3.  
  4. var _cuadrado:MovieClip = new MovieClip();
  5. _cuadrado.graphics.beginFill(0xFF0000,1);
  6. _cuadrado.graphics.drawRect(0,0,100,100);
  7. _cuadrado.graphics.endFill();
  8. this.addChild(_cuadrado);
  9.  
  10. var _pointer:MovieClip = new MovieClip();
  11. _pointer.graphics.beginFill(0xFFFFFF,1);
  12. _pointer.graphics.drawCircle(0,0,2);
  13. _pointer.graphics.endFill();
  14. _cuadrado.addChild(_pointer);
  15.  
  16. _cuadrado.addEventListener(MouseEvent.CLICK,onClic);
  17. function onClic(e:MouseEvent):void
  18. {
  19.     _pointer.x = (e.localX -  _pointer.width/2)+ _pointer.width/2;
  20.     _pointer.y = (e.localY -_pointer.height/2)+_pointer.height/2;
  21.     _cuadrado.x = ((_cuadrado.width - e.localX)-_cuadrado.width)+(stage.stageWidth/2);
  22.     _cuadrado.y = ((_cuadrado.height - e.localY)-_cuadrado.height)+(stage.stageHeight/2);
  23. }

29 octubre, 2011
by LeoBaraldi
0 comments

¿Quién diseña las Web?, ¿Cómo diseñar una web?

Este articulo trata de debelar los aspectos básicos que debe tener un diseñador gráfico al afrontar proyectos Webs. Estas ideas y conceptos de diseño son algunas de las reflexiones de los tantos puntos de inflexión a la hora de diseñar.
Seria muy bueno ir extendiendo estas ideas y que ustedes colaboren a la redefinición de la problemática.

La primera respuesta que puedo tener a punta de lengua es un “diseñador”, pero… ¿es en realidad un diseñador gráfico? Se suelen presentar sinfines de pseudo capaces del diseño, desde audaces, creativos, artistas, arquitectos, amigos, el vecino, programadores y, alguna vez, un valiente diseñador gráfico.

Esta realidad no se da porque contemos con un parque limitado, sino todo lo contrario. El problema radica más profundamente en el corazón de las escuelas de diseño, donde no se educa, adiestra, ni presenta la herramienta, ni se debate la problemática.

Este es un tema que lo he charlado hasta el cansancio con varios docentes de diferentes instituciones. Los motivos son miles: desde porque no son suficiente 3 años de carrera, porque la informática e internet evolucionan a velocidades que no dan respiro a preparar y ajustar un programa sin que este caiga en desuso, porque no hay profesionales que puedan claramente trasmitir los conceptos y técnicas sobre las herramientas, porque los alumnos de diseño gráfico son solo “gráficos”.

Aclaro que, para mí, el diseño Web es “diseño gráfico”, por el simple motivo de ser un “medio visual”. Ojo, algunos se apresurarán a corregir que es audio-visual-interactivo y demás cosas que es verdad, pero desde el origen de los outputs en el caso del “monitor”, los elementos fueron sólo visuales, a duras penas con los escasos pixeles disponibles más la buena voluntad de la imaginación, se lograron cosas fabulosas. Por lo tanto, los problemas que se plantearon originalmente no distan tantos de los actuales. El cliente pretenderá dar solución a una necesidad de comunicar, haciendo uso de las más variadas técnicas básicas o avanzadas del diseño, como el color, la forma, la tipografía, la escala, la gamma, el espacio, el orden, etc.

Todos estos recursos de los más variados son propios y pertinentes a un diseñador gráfico, queda claro que él mismo es la persona más adecuada para dar solución a las funciones y comunicaciones que requieran de orden, jerarquía y semántica de los signos.

Pero sabemos que los matices van mas allá de las fronteras actuales del diseño académico: hay elementos que nos obligan a entender y saber cómo funciona el medio o soporte donde se plasmará nuestro diseño. Así como el diseñador establece un canvas o soporte pre definido (ancho, alto), también se deberá familiarizar, por ejemplo, con el medio de impresión que se utilizará para producir la pieza, porque el diseño puede verse enriquecido o desfavorecido con el simple cambio de una variable, por ejemplo, el sistema de impresión: la serigrafía no será de seguro adecuada para algunos cuerpos tipográficos, que la impresión offset sin problemas puede reproducir.

Constantes y Variables

Estas palabras en el mundo del diseño web son muy recursivas, en diferentes ámbitos y contextos, pero el fin es similar.
Ddiseño web y gráfico tienen los mismos elementos contantes que aprendimos con nuestros profesores: la jerarquía y orden de los elementos para favorecer la lectura o crear un recorrido sobre la pantalla son los mismos principios del papel.
El color también cumple un rol importante en la comunicación web, aunque haya colores que son rápidamente relacionados con grandes marcas impuestas. En relación a ello, si propongo magenta dirán freak. Así mismo, el uso es totalmente válido, las reglas y técnicas siguen siendo efectivas: un titular de color rojo despertará más interés que uno gris.

El tamaño, el espacio y orden también son recursos muy utilizados en la gráfica para generar secuencias de lectura, acentuar un mensaje o significar el mismo. Pero por el contrario, cuando el diseñador se dispone para la Web, pareciera que entra en PAL (pánico, ataque y locura), a tal punto que realiza diseños que jamás propondría en una pieza grafica tradicional.

Hasta aquí, definimos las constantes generales que se presentan al diseñar para la Web; este punto no es realmente el que más complicaciones presenta, ya que un buen diseñador, todo lo nombrado le es habitual y cotidiano.

El problema está en las “variables”: cuando la información debe ser adecuada a una resolución, una limitación tipográfica,  una lectura forzada lineal,  un scroll, un dispositivo de salida particular, una superficie, interactividad, navegación,  una cultura de lectura, un redimensionamiento, accesibilidad, posicionamiento, etc. Aquí, el diseñador gráfico va rumbo al neuropsiquiátrico.

Para que esto no suceda, el diseñador debe estar adecuado al tiempo y la forma de los recursos, técnicas, tendencias, herramientas y dispositivos actuales. No quiere decir que el diseñador tenga que migrar a ser un híbrido ni, menos que menos, sea programador: el diseñador debe conocer el medio donde se desenvuelve sin profundizar ni quitar el foco en su función principal, para el resto existe programadores, analistas y técnicos especializados puntualmente en las tecnologías aplicadas. En la actualidad, el destino del diseñador es el mismo que hace 20 años: “diseñar”. Cambian los medios, cambian los paradigmas y hasta cambia la actividad fundamental, quizás hay quienes vaticinan la desaparición del diseñador gráfico tradicional fuera de las piezas digitales. Yo creo lo contrario: creo que el siguiente paso del diseñador es dirigir, supervisar y coordinar grupos interdisciplinarios donde el fin es prestar soluciones y comunicar.

Por eso ahora, más que nunca, el compromiso es acceder y conocer el medio, conocer el soporte y sus limitaciones, que, al contrario del papel, cuando están se revelan y se convierten en potentes herramientas de creación.

Algunas Variables

Multidimensional

En la gráfica tradicional, podríamos indicar que generalmente se nos presenta una sola dimensión del soporte a trabajar; en la Web pasa todo lo contrario, ya que en la pantalla (aunque sea un elemento plano bidimensional) se puede crear n dimensiones de lienzos, unos sobre otros o unos al lado de otros. Este concepto de apilamiento o layer es una de las características actuales más básicas, como lo es la vieja técnica de perspectiva isométrica para simular un espacio tridimensional.
También lo Multidimensional es afectado por la evolución, disponibilidad y equipos, aunque estas sean de poco uso o en modo de experimentación debemos tener una mera noción de sus virtudes y limitaciones. Con la aparición de los tablet, lo Multidimensional  hace un cambio rotundo, ya que se presenta como recurso normal el uso de múltiples escritorios o canvas, resultando este recurso tan efectivo y natural que la mayoría de los dispositivos táctiles lo adoptan.
Podemos plantear un diseño basado en capas, donde la información adopte importancia según el orden de apilamiento, donde el objeto en primer plano sea el discurso actual del mensaje, donde el apilamiento cuente un discurso, donde un mensaje no necesariamente deba aparecer y desaparecer para dar lugar a otro. Múltiples escritorios, múltiples layers ya están aquí: lo podemos ver en un simple lighbox.
La dimensionalidad puede salirse de nuestra pantalla, un claro ejemplo de ellos es la realidad aumentada, donde lo virtual complementa lo real o viceversa, creando mundos y canales nuevos de comunicación y experimentación.

Resolución

Esta es uno de los limitadores más grandes para el diseñador, ya que la capacidad de representación de pixeles ha ido variando con el tiempo. Hace 10 años, no existían habitualmente monitores en  formatos wide, ni tamaños fuera de las 17 pulgadas en cualquier casa; hoy, en cambio, es común ver monitores de 19 a 21 pulgadas.  Ya antes de la aparición masiva de los LCD se presentaba el problema de la resolución, que en sí consiste en la limitación de cuántos pixeles puede representar la pantalla, tanto en su alto como en su ancho: el diseño se debía adecuar a caber sobre esa pantalla para evitar el scroll o, por lo menos, el horizontal. Por entonces, se diseñaba basándose en medidas de no más de 740px de ancho (como muy generoso), para no superar el ancho de 800px; con el tiempo, los monitores representaron más pixeles y las medidas se fueron extendiendo. No hace mucho tiempo se impuso el modelo de 960px de ancho, que es capaz de mostrarse de manera correcta sobre monitores de 1024×768; pero en la actualidad van imponiéndose medidas como 1080 o más, para resoluciones de 1280×1024.
Con la aparición de monitores más grandes, diríamos que la problemática de las resoluciones se terminó, pero no es así: ahora, por el contrario, muchos sitios quedan demasiado chicos, apiñados y compactos. A esto surge una nueva manera de mostrar la información y ésta se basa en el ajuste de los espacios disponibles; este tipo de diseño se conoce como líquido o elástico, donde las cajas contenedoras y espacios guardan una relación “relativa” con respecto a las dimensiones disponibles. [ Ejemplo ]
Pero aquí tampoco se acota el problema: con la aparición de los Smartphone y tablet, nuevamente se presentan nuevas opciones de ver una página. Ahora la página no sólo debe trabajar para un monitor de 21 pulgadas, sino que en retroceso a una pantalla táctil de apenas 1024 x 768px, que, a propósito, se le suma una característica de accesibilidad que es rotar la pantalla cambiando la relación de aspecto. El diseño, entonces, debe responder a las resoluciones varias, a los dispositivos varios y a la orientación del dispositivo.
Actualmente, para este sin fin de alternativas se presenta una nueva técnica de implementar y organizar la información: el diseño “responsivo“, que responde según el dispositivo y orientación del mismo, organizando, reestructurando o quitando elementos según sea necesario para la mejor lectura de la información. [ Ejemplo ]

En general, vemos que la tendencia es exponencial a mejorar la calidad del mensaje al receptor, donde el mismo cumple un rol activo receptor/trasmisor. Dejar claro un mensaje será agradecido por el usuario y  también por el emisor. En la actualidad, un mensaje mal dado y/o un usuario enojado, puede desfavorecer rápidamente a un producto o marca.

Scroll

Ya hablamos que el diseño responde a una resolución y a éste le resulta un scroll. Si es natural ver monitores cada vez más anchos que altos, ¿porque no más altos que anchos? Algunos se preguntarán por qué quitarle espacio al scroll, pero eso es consecuencia a la ley de Fitts, que establece los límites de respuesta de un movimiento con respecto a la distancia: un monitor demasiado alto implicaría un movimiento poco ergonómico e ineficiente.  Al scroll, por alguna razón, muchos se encargaron de eliminarlo; otros, le tienen terror; y algunos hasta afirman que una web sin scroll es más efectiva.
La realidad es que la información en la web es lineal, siempre se presenta un objeto y desde ése se pasa a otro. Desde el inicio, la información fue textual (texto), con el tiempo se agregaron elementos para enriquecer la información, aunque con algunos excesos. Comenzamos a ver páginas donde la animación, el discurso tipo película, la música y el movimiento titilante circundaban la información básica que el usuario solicitaba, generando largas esperas entre secciones, confusión y hasta inaccesibilidad. Por alguna razón, se puso de moda ese “modelo de no dejar mostrar lo que el usuario buscaba”. Como siempre pasa con los modelos equivocados, no soportó la prueba del tiempo y actualmente entendemos que “la información es lo que la mayoría de las personas buscan”, no hay razón de entrar a una Web y esperar que se cargue una música de background como requerimiento para acceder a un formulario de consulta.
Entonces es aquí donde el scroll aparece como nuestro aliado, porque al disponer de él, disponemos de más espacio lineal para contar y mostrar información, para organizarla en un orden de lectura natural (porque el usuario naturalmente sabe scrollear) y hasta podemos explotar esa cualidad para dar un discurso visual donde el usuario manipule el scroll como un time line; el tiempo de carga y disponibilidad de la información es progresivo y no a demanda, es decir que en vez de ir a una nueva sección y hacer una nueva consulta, se navega sobre el mismo canvas.
Al diseñar, es importante contar con el conocimiento de los altos estándares y los mínimos, tomar el alto como una unidad relativa y modular, donde la información principal sí se muestre completa desde la primera lectura y, por cada escroll, se sorprenda o se presente un discurso coherente.

La lectura

Al leer información sobre una web se deben establecer los criterios básicos aprendidos en diseño editorial, pero a eso sumarle criterios que favorezcan la lectura en el modelo Web.
Al observar una página web, el ojo salta de módulos a módulos de información, desde objetos que se mueven a objetos estáticos; clasifica, organiza y evalúa la información si es pertinente a lo que está buscando. Nuestro deber como diseñadores es evitar el stress visual o que este sea un factor positivo, utilizando recursos simples, como tipografías claramente jerarquizadas, cuerpos tipográficos adecuados, colores planos de buen contraste, espacios de descanso, fondos despojados de texturas en áreas de lectura, cajas organizadoras,  separadores de módulos, estructuras repetitivas que establezcan un sistema de lectura, donde en cada página se presenten los mismos elementos organizadores de la información propuestos por el diseñador.
Hay quienes antes una página sin movimientos solicitan que sea más “dinámica”, ¿qué mejor que localizar rápidamente la información? Hay criterios según los que movimientos, destellos y ruidos mejoran la experiencia del usuario; esto es  totalmente equivocado: el movimiento circundante a la información perturba al ojo y a la visión periférica, produciendo una molesta atención residual.
Que muchos de los sitios Web estén estéticamente y funcionalmente mal diseñados no quiere decir que sea lo correcto. Y que el cliente tenga una idea errónea de dinámico también es un problema a educar.

Usuarios

El destino de nuestras piezas gráficas tradicionales establecen un cierto marco de previsión y cordura, por decirlo de alguna manera. Sabemos que si el mensaje está en español, claramente será apreciado por el 99.9% de la población (Argentina); que si la lectura la hacemos de izquierda a derecha, no presentará dificultades de lectura. En general, vemos que un usuario de una pieza gráfica sigue ciertos criterios y normas establecidas; en cambio, el usuario web se comporta de manera” errante”,” diferente”, “creativa” y hasta “esquizofrénica”. Nada puede estar sujeto a que funcione correctamente ante un usuario, ya que de alguna manera éste logra romper todos los esquemas.
Desde hacer clic atrás, delante, atrás, atrás, cerrar el navegador, abrir uno nuevo, ir a Google y en él escribir www. Clarín.com, ¡olvidando totalmente para qué sirve la barra de direcciones!

Como se puede apreciar, el usuario quizás requiere una mayor atención para utilizar una Web que para leer una pieza gráfica convencional. Aclaro: ¡el usuario demanda más del diseñador!
Establecer criterios claros de navegabilidad es uno de los puntos fundamentales. Presentar siempre un menú principal superior claro, con alto contraste y resaltando en qué lugar se está, a modo de rastro; presentar barras de navegación opcionales, como el menú en modo texto-link en el footer, son buenas costumbres que el usuario agradecerá.
Evitar la recargas de paginas entre sección y sección es un buen recurso de ahorro de información, más para aquellos sitios donde se reciban grandes flujos de visitantes. La información más vista o más solicitada puede ser presentada completa en la portada inicial junto a los otros elementos ya cargados.
No auto cargar elementos multimedia, como videos, sin la previa solicitud del usuario y, menos que menos, reproducirlos automáticamente fuera del foco visual.
Trabajar con varias columnas de información, sectorizando y valorizando la información de mayor a menor, donde los elementos más importantes y más visitados se encuentren en la parte superior del sitio.
No bloquear elementos de accesibilidad, como botón izquierdo del mouse, ampliar, guardar o imprimir.
Disponer de la capacidad de propagación en diferentes medios o dispositivos, ser versátiles con las salidas asegurará un mayor número de visitantes.
Ajustarse a estándares para asegurar accesibilidad y mejor compatibilidad con navegadores y sistemas de asistencia para personas con capacidades diferentes.
Crear contenidos diferenciados para dispositivos como impresoras, celulares o lectores para ciegos.
Crear contenidos ricos, originales, útiles y para humanos.

Navegadores

Podemos afirmar que la mayoría de los mortales entiende que no todo es y fue IE (Internet Explorer), que existen, gracias a Google y tecnologías open source,  Firefox y Crhome, entre otros. ¿Pero dónde radica el problema con los navegadores? En cómo interpretan los elementos gráficos propuestos por el programador, elementos que son los establecidos por el diseñador.

Esta diferencia de renderización entre navegadores se puede presentar más o menos acentuada según sea la combinación de fórmulas. Aunque hay pautas generales a seguir para evitar algunos problemas de presentación, IE siempre nos sorprenderá con algo nuevo. Esta dificultad tiende a desaparecer en rasgos generales, pero no podemos ignorar que IE es el navegador más popular y con el que más problemas tenemos. No es necesario entrar en detalles de por qué Microsoft ignora todas las reglas establecidas de cómo mostrar una Web, sí vamos a saber que hay métodos de normalización entre navegadores. Podemos hacer uso de scripts (http://html5boilerplate.com/) que corrijan aspectos de la presentación o cargar hojas de estilos alternativas según el navegador.

Pero antes de entrar en detalles de navegadores, deberíamos definir nuestro alcance, es decir que el diseño debería partir desde la “accesibilidad” e incluyo en esa palabra la disponibilidad tecnológica: aunque como usuario no tenga limitaciones motrices, ni visuales, auditivas, etc., puedo no contar con la plataforma o dispositivo óptimo, o sí contar un una buena plataforma y un navegador anticuado (IE 5 o 6). Entonces, vemos que el diseño debe partir de la base de: ¿Qué navegadores o a quiénes creemos accesibles para nuestro desarrollo?. Resultará que si quiero que mi Web sea totalmente accesible, yo diseñador deberé limitar los elementos decoradores a su forma más rudimentaria o nula, dejando quizás texto plano y de esa manera asegurar el renderizado.

Actualmente ya no se presentan soportes ni desarrollos para IE 5 y 6, son escasos, pero sí se estimula a normalizar para IE7. IE8 presenta mucho más soporte y compatibilidad con CSS2 y HTML4, pero nada para CSS3 y HTML5. IE9 es la gran promesa, donde por primera vez (a golpes) Microsoft entiende que no se puede presentar la información sin ajustarse a un criterio establecido, normalizado y universal. IE9 promete soporte para HTML5 y CSS3  de manera muy exitosa, superando en algunos test al mismísimo Firefox. Quizás en un día donde no exista mas IE7 y IE8 estos temas serán para el recuerdo, aunque conociendo a Microsoft, ¡alguna sorpresa nos debe esperar!

¿Pero qué pasa con el resto de los navegadores? Nada. Ellos, en su mayoría, ya van por versiones muy actualizadas: en estos últimos tiempos, se popularizaron los navegadores con motores open source, como WebKit y Gecko. Estos motores, a diferencia de IE, se encuentran en la vanguardia de los estándares y proveen soluciones iguales en la capa de diseño, más algunas particularidades especiales según el navegador.

En general, se vislumbra un final feliz para todos aquellos diseñadores y maquetadores que tanto sufrieron: las cosas por fin se verán iguales o, por lo menos, muy parecidas.

Agradecimiento: La colaboración y aportes de la Diseñadora Gráfica Mercedes Olano, que gratamente cuento con su amistad y calidad profesional. Gracias Mechi!

4 septiembre, 2011
by LeoBaraldi
2 Comments

Formatos de video. MPEG, FLV y AVI.

Como existe diferentes tipos de formato de imágenes tales como TPEG, TIFF, GIF etc. También para los videos, entender porque y como funcionan dichos formatos ayudara considerablemente lograr mejores resultados en nuestra Web.

Que es un vídeo MPEG:

Las siglas MPEG corresponden a Moving Picture Experts Group el cual es un grupo de trabajo encargado de impulsar estándares con respecto al uso de las imágenes.

Los videos en dicho formato tienen por característica una compresión que los hace más livianos al momento de transportar. El sistema de compresión consiste de la fragmentación de los datos y el almacenamiento de aquellos que son diferentes, los cuales se repitan son quitados logrando una mejora en el peso total del archivo.

En la antigüedad este sin dudas fue uno de los formatos más adecuados y prometedores para la Web. Actualmente se considera desestimado con respecto a otros formatos como H264 o OGG Theodora que prestan mejor calidad / rendimiento.

Que es un vídeo AVI:

El formato AVI (siglas en inglés de Audio Video Interleave) es el formato propuesto por Microsoft desde 1992 como contenedor de videos y audio.

El video o audio no necesariamente tiene que ser AVI, ya que este es un contenedor, el códec que interpreta el flujo puede reproducir otros formatos como DivX, MP3, AC3 etc.

La propiedad más importante de este formato es sin dudas su capacidad de contener varios flujos de información en el mismo fragmento de datos. Esta capacidad se denomina interleave y es la que nos da la posibilidad de cuando vemos una película poder cambiar el audio de un idioma a otro. Por ende quiere decir que el cuadro y el sonido van vinculados unos con  el otro.

Este formato aun sigue siendo muy popular dado que la distribución de películas hogareñas en su mayoría CD-ROM contó con versiones en AVI DviX logrando muy buena calidad sin requerir un DVD-R.

En la actualidad es muy raro ver la implementación de AVI en Web.

Que es un vídeo  FLV:

Flash Video es un formato contenedor a igual que AVI diseñado para transmitir video en la Web. El formato fue creado por la empresa Macromedia y continuado por Adobe después de su adquisición. Flash video puede ser reproducido por el Flash Player principalmente aunque si se instala los códec de ffdshow tambien se pueden reproducir en otros player como Windows media. Actualmente Flash Player se encuentra en casi toda la población de equipos por lo tanto es un formato muy popular lo que llevo a sitios como YouTube, Yahoo video y Google video a utilizarlo como reproductor estándar.

La calidad del video en general es buena, después de las version 8 se introdujo un nuevo códec de compresión On2 TrueMotion lo que incremento la calidad considerablemente. Las últimas versiones de FVL ya trabajan con soporte H264 brindando calidad en alta definición (HD).

¿Entonces que formato de vídeo usamos para Internet?

Claro esta que para web lo ideal es usar Flash video, por sus prestaciones tanto en peso / calidad y la nueva disponibilidad de soportar video en HD. Pero no solo esas cualidades son las que lo destaca del resto, tenemos que considerar que Flash Video puede interactuar con el lenguaje de programación que interpreta el Flash Player (ActionScript).

Este ultimo nos abre un océano de posibilidades, desde la manipulación del tiempo, eventos, a interactividad. El video como secuencia lineal con Flash video ya no lo es mas, y pasa se ahora un medio interactivo con el usuario.

También Flash video cuenta con la posibilidad de manejar canales alpha (transparentes) para lograr montajes sobre fondos croma  y el poder transmitir en Flash video en modo streaming (vivo) a una cantidad de usuarios al mismo tiempo.

Actualmente es el formato de mayor uso, penetración y compatibilidad, desde películas, programas en vivo hasta salas de chat con audio y video, son las posibilidades que brinda Flash Video.

El reproductor de FLV.

Para reproducir un video en formato FLV, puede realizarlo desde una aplicación de terceros como por ejemplo Mplayer, o incorporar el video en un archivo FLA (Flash). También puede leerlos en modo streaming utilizando algún reproductor.

¿Como convierto archivos AVI, MPEG a FLV?

Cuando se instala el programa de desarrollo Adobe Flash, el mismo incluye una aplicación llamada Flash Video Encoder. Esta es la encargada de convertir formatos como AVI, MPEG, MOV, MP4, MP3 etc. a formato FLV.

También existen aplicaciones de conversión de terceros. Aunque lo recomendable es usar la de Adobe si es que queremos conseguir buenos resultados.

Es importante destacar que para convertir formatos de video a Flash video, es necesario tener instalado QuickTime, ya que este nos brindara de los códec secundarios que requiere el Flash Video Endoder.