Artículos Internet
Uno de los principales obstáculos al que nos enfrentábamos hace algunos años al diseñar sitios web era la pequeña cantidad de fuentes tipográficas que teníamos a nuestra disposición para desarrollar sitios que pudieran ser vistos en cualquier navegador. Las famosas "Web-Safe Fonts" eran un grupo de 18 fuentes tipográficas que venían pre-instaladas en la mayoría de las computadoras, por lo que teníamos que hacer uso de estas para estar seguros de que cualquier navegador podría ver nuestras páginas de la misma forma y con las mismas fuentes que como las habíamos imaginado a la hora de diseñar.

Esta limitante nos orillaba a hacer uso de recursos o técnicas en caso de querer diseñar con fuentes distintas a las "web-safe fonts", podíamos por ejemplo utilizar imágenes en lugar de texto o recurrir al uso de Flash, teniendo claro que esto va en contra de los estándares web, haciendo a estos textos no seleccionables, inaccesibles e imposibles de identificar e indexar por los buscadores.
Si tenemos en cuenta que más del 80% del contenido de internet es información escrita, nos damos cuenta de la importancia de la tipografía dentro del diseño, desarrollo y creación de sitios web. Y hablamos de esto no solo por el carácter estético que la tipografía representa, si no por su función de comunicar con claridad manteniendo leibilidad así como congruencia con la personalidad y presencia de la marca o producto que representa (Macro y Micro tipografía).
Dicho lo anterior, y si nuestro objetivo es hacer buen uso de la tipografía en nuestros sitios pero sin tener la limitante de un número reducido de fuentes tipográficas, la mejor opción es el uso de @font-face, una opción de CSS que nos permite definir una familia tipográfica y ligar el texto de nuestro sitio a la fuente que hayamos subido a nuestro servidor, en lugar de ligarlo a las fuentes pre-instaladas de la computadora. Hemos de aclarar que @font-face no es una función nueva en CSS3 y que incluso ya tiene varios años que se se viene utilizando, aunque con el pequeño inconveniente de incompatibilidad con algunos navegadores web, ya que no todos ellos soportaban o reconocían esta función. Sin embargo a partir del 2009 este ha dejado de ser un problema ya que la mayoría de los navegadores como Safari, Chrome, Firefox, Opera y Explorer (e incluso navegadores de dispositivos móviles) son totalmente compatibles con @font-face.
En este tutorial vamos a aprender un poco acerca de la clase FileReference en Actionscript 3 para Flash y lo aplicaremos a un ejemplo práctico.

La clase FileReference nos permite subir archivos desde nuestra computadora hacia un servidor y viceversa, es decir descargarlos del servidor a nuestra máquina. Cabe mencionar que esta clase cambió para Flash Player 10, ya que en versiones anteriores cuando el usuario seleccionaba un archivo para subirlo era necesario que se enviara al el servidor y después regresara la información a la aplicación para poder verla o hacer uso de ella. A partir de Flash Player 10 es posible accesar a los datos del archivo directo desde el player local de la computadora sin la necesidad de mandarlo a un servidor. Para muestra de este ejemplo, da click en el ejemplo de abajo y selecciona cualquier archivo de imagen de tu computadora.
Para hacer uso de esta clase necesitamos accesar a ella mediante siguiente código:
import flash.net.FileReference;
// Creamos una variable para activar la clase
var archivo:FileReference = new FileReference();
// Creamos otra variable que mediante el objeto FileFilter establecerá un filtro para determinar qué tipo de archivo se mostrará o subirá, así como las extensiones que serán permitidas.
var filtroImagen = new FileFilter("Images", "*.jpg;*.jpeg;*.gif;*.png");
//El metodo browse tomará el "arreglo" (array) de nuestra variable filtroImagen como su filtro. Podemos también prescindir de esto y dejar que se busquen los archivos sin ningún tipo de filtro.
archivo.browse([filtroImagen]);
Vamos a armar un ejemplo rápido con pocas líneas para ver como funciona exactamente. Usaremos la imagen de un billete de 100 dólares y remplazaremos la imagen de Benjamin Franklin por alguna que tengas en tu computadora.

En más de una ocasión hemos escuchado el término Content Management System, o sus siglas en inglés CMS, la primer pregunta que nos viene a la mente es, ¿qué es eso?. No te preocupes, es mas difícil pronunciar su nombre que tomarle cariño, comprenderlo y comenzarlo a utilizar.
Content Management System (Sistema de administración de contenido) es una solución web desarrollada para facilitar la actualización de tu sitio, permitiéndote crear secciones, páginas, artículos y contenido utilizando únicamente tu navegador, permitiéndote actualizar tu sitio prácticamente en cualquier computadora y lo mejor de todo, sin requerir conocimientos en HTML y CSS (Hojas de estilo en cascada), ya que el modo en que se actualiza un portal creado con un CMS es similar a la manera en la que redactas un correo electrónico, así de fácil.
Se escucha muy bien, pero, ¿Necesito yo un CMS?
Los CMS son soluciones muy poderosas y efectivas, pero no todo el mundo las necesita, para saber si nosotros la necesitamos o no, hay que tomar en consideración las siguientes preguntas:
• ¿La información de mi sitio web cambia constantemente?
• ¿Mi sitio web posee una gran cantidad de páginas?
• ¿Es mucho el tiempo que necesito para crear nuevas páginas web?
• ¿Necesito que el contenido que genero se publique en fechas especificas y después sea retirado de la web?
• ¿Invierto mucho dinero en proveedores que se encarguen de actualizar mi sitio?
En estos últimos años, la web ha tenido un crecimiento excepcional, llenándonos de interesantes y nuevas propuestas, tanto creativas como tecnológicas. Uno de los temas más sonados dentro de "Internetz" en este año, ha sido todo lo relacionado con HTML5, pero, ¿de qué trata realmente?

Por medio de éste artículo tratamos de explicar qué es lo que pasa con HTML5, cómo funciona y qué posibilidades nos da, quitando algunos de los mitos más comunes que hay sobre él (digo, ya encarrerado el ratón…).
Texto por Edgar Parada (@edgarparada).
CSS3 nos permite acceder a diferentes niveles de personalización visual en nuestros sitios web, desde cajas con bordes redondeados, efectos de sombra en el texto, manejo de diferentes tipografías con @font-face, animaciones entre otros.

En esta ocasión aprovecharemos la propiedad de multiple-backgrounds para lograr un efecto llamado Parallax, que antes requería de insertar diferentes divs sin ningún sentido semántico para nuestro código HTML pero que hoy es más sencillo gracias a las hojas de estilo.
Parallax es una técnica donde se aplica profundidad a los diferentes elementos mediante el uso de capas. Esto permite simular un movimiento de cámara al estilo de las películas sci-fi donde se crean movimientos en el espacio que nos dejan percibir lo lejos que se encuentran las estrellas de nuestro sistema solar.
Da click para ver el Resultado final del Efecto Parallax con CSS3. (Al re-escalar la ventana del navegador podrás ver el efecto).
Selección de Imágenes
Para nuestro ejemplo utilizaremos una imagen generada por mi amigo y colega Juan Silva @kidbudda al cuál agradezco su valiosa contribución. Como es solamentente un ejemplo podemos darnos ciertos lujos en cuanto al peso de las imágenes pero ya en un sitio web de producción recomendaría que el tamaño de las mismas no excediera los 100kb.
Texto por @edgarparada
Hace unos días Google dio a conocer una tecnología muy interesante llamada Swiffy (http://swiffy.googlelabs.com/) para convertir archivos SWF de Flash hacia HTML5 y permitiendo con ello reutilizar el mismo contenido en dispositivos que no tengan Flash Player instalado siendo más específicos iPhones y iPads.

Adobe había mostrado algo similar con Wallaby (http://labs.adobe.com/technologies/wallaby/), sin embargo el acercamiento de ambas tecnologías en un poco diferente. Swiffy es una tecnología que “vive” en los servidores de Google y aprovecha de fuente un archivo SWF para la conversión hacia HTML5 y Wallaby es una aplicación AIR que el desarrollador instala en su computadora y se alimenta de archivos FLA creados con Flash CS5 para convertir a HTML5.
¿Por qué la necesidad de convertir Flash a HTML5?
Si tienes algo que ver con el diseño y/o desarrollo web seguramente alguna vez has tenido alguna experiencia con estas tecnologías y habrás experimentado en carne propia el vía crucis que es, cuando algo a la mitad del camino no funciona, pero el hecho de tener opciones extra siempre se agradecerá enormemente.
En este caso la necesidad de convertir Flash a HTML5 viene a raíz de la ausencia de Flash Player en una plataforma móvil que se ha vuelto muy popular hoy en día, nos referimos a iOS de Apple, sobre la cuál se soportan dispositivos como iPhone, iPad, iPod Touch, etc.
Y ¿qué pasa con Android, BlackBerry, Symbian y los demás jugadores? bueno pues todos ellos participan en un proyecto llamado Open Screen Project (http://www.openscreenproject.org/partners/) donde su principal objetivo es llevar la misma experiencia de usuario a través de diferentes dispositivos, tratando de reducir la fragmentación mediante un runtime consistente a todos los ambientes, dicho proyecto ha tenido buenos resultados hasta el momento (http://www.adobe.com/flashplatform/certified_devices/)
Google Swifty y Adobe Wallaby
La pregunta obligada es ¿Cómo se comparan ambas tecnologías?, más allá de lo que ya mencionamos sobre que Swifty aprovecha el formato SWF y Wallaby necesita una fuente en formato FLA. En principio podríamos ver a Swiffy como un servicio donde dependemos totalmente de Google para decodificar los contenidos del SWF e interpretarlos como algo visible sin Flash Player y Wallaby como una aplicación standalone cuya mayor restricción es que tienen que ser archivos generados con Flash CS5.
Anteriores...
Página 2 de 9
