Tuétano, creatividad que cala hasta los huesos


Novedades de Flas Player 10: Astro
1.agosto.2008, 8:18 pm
Filed under: Artículos

Les dejo esta liga de Cristalab en la que encontrarán un interesante video que demuestra de lo que será capaz la nueva versión del Flash Player.

http://www.cristalab.com/blog/46553/novedades-de-flash-player-10-astro.html

Anuncios


Bordes redondeados con CSS3
16.julio.2008, 8:30 am
Filed under: Artículos

Uy! qué buena noticia!!! Adiós a las tablas con 9 celdas (la 5a para el contenido.

CSS3 ya tendrá integrada una propiedad para generar bordes redondeados. Aún le falta mejorar muchas cosas, como por ejemplo, las imágenes de fondo salen de los bordes, esperomos que en futuras versiones puedan corregir eso. Les comparto la liga de donde saco la noticia:

http://www.desarrolloweb.com/articulos/bordes-redondeados-en-css-3.html

La mala noticia o, mejor dicho, la noticia recurrente en estos casos es que Internet Explorer no los soporta aún. Desafortunadamente, las estadísticas en mi Google Analitics, me dicen que tengo que programar para IE; penoso mi caso.

🙂  Saludos.



¿Qué es la Web 2.0?
3.mayo.2008, 3:59 pm
Filed under: Artículos

Aquí les dejo un artículo muy interesante sobre la web 2.0

Por Christian Van Der Henst S.

La Web 2.0 es la representación de la evolución de las aplicaciones tradicionales hacia aplicaciones web enfocadas al usuario final. El Web 2.0 es una actitud y no precisamente una tecnología.

La Web 2.0 es la transición que se ha dado de aplicaciones tradicionales hacia aplicaciones que funcionan a través del web enfocadas al usuario final. Se trata de aplicaciones que generen colaboración y de servicios que reemplacen las aplicaciones de escritorio.

Es una etapa que ha definido nuevos proyectos en Internet y está preocupándose por brindar mejores soluciones para el usuario final. Muchos aseguran que hemos reinventado lo que era el Internet, otros hablan de burbujas e inversiones, pero la realidad es que la evolución natural del medio realmente ha propuesto cosas más interesantes como lo analizamos diariamente en las notas de Actualidad y los enlaces que recolectamos en explorando.

Y es que cuando el web inició, nos encontrábamos en un entorno estático, con páginas en HTML que sufrían pocas actualizaciones y no tenían interacción con el usuario.

Pero para entender de donde viene el término de Web 2.0 tenemos que remontarnos al momento en que Dale Dougherty de O’Reilly Media utilizó este término en una conferencia en la que compartió una lluvia de ideas junto a Craig Cline de MediaLive. En dicho evento se hablaba del renacimiento y evolución de la web.

Constantemente estaban surgiendo nuevas aplicaciones y sitios con sorprendentes funcionalidades. Y así se dio la pauta para la Web 2.0 conference que arranca en el 2004 y hoy en día se realiza anualmente en San Francisco, con eventos adicionales utilizando la marca en otros países.

En la charla inicial del Web Conference se habló de los principios que tenían las aplicaciones Web 2.0:

La web es la plataforma

  • La información es lo que mueve al Internet
  • Efectos de la red movidos por una arquitectura de participación.
  • La innovación surge de características distribuidas por desarrolladores independientes.
  • El fin del círculo de adopción de software pues tenemos servicios en beta perpetuo

La Web 2.0 con ejemplos

Entender la evolución que ha llegado con la Web 2.0 puede realizarse con ejemplos, con proyectos. Podemos comparar servicios web que marcan claramente la evolución hacia el Web 2.0 con una nueva forma de hacer las cosas:

  • Web 1.0 > Web 2.0
  • Doubleclick –> Google AdSense (Servicios Publicidad)
  • Ofoto –> Flickr (Comunidades fotográficas)
  • Akamai –> BitTorrent (Distribución de contenidos)
  • mp3.com –> Napster (Descargas de música)
  • Britannica Online –> Wikipedia (Enciclopedias)
  • Sitios personales –> Blogs (Páginas personales)
  • Especulación con dominios –> Optimización en motores de búsqueda SEO
  • Páginas vistas –> Costo por click
  • CMSs –> Wikis (Administradores de contenidos)
  • Categorías/Directorios –> Tags

¿Qué tecnologías apoyan a la Web 2.0?

El Web 2.0 no significa precisamente que existe una receta para que todas nuestras aplicaciones web entren en este esquema. Sin embargo, existen varias tecnologías que están utilizándose actualmente y que deberíamos de examinar con más cuidado en busca de seguir evolucionando junto al web.

Tecnologías que dan vida a un proyecto Web 2.0:

  • Transformar software de escritorio hacia la plataforma del web.
  • Respeto a los estándares como el XHTML.
  • Separación de contenido del diseño con uso de hojas de estilo.
  • Sindicación de contenidos.
  • Ajax (javascript ascincrónico y xml).
  • Uso de Flash, Flex o Lazlo.
  • Uso de Ruby on Rails para programar páginas dinámicas.
  • Utilización de redes sociales al manejar usuarios y comunidades.
  • Dar control total a los usuarios en el manejo de su información.
  • Proveer APis o XML para que las aplicaciones puedan ser manipuladas por otros.
  • Facilitar el posicionamiento con URL sencillos.

¿En qué nos sirve la Web 2.0?

El uso de el término de Web 2.0 está de moda, dándole mucho peso a una tendencia que ha estado presente desde hace algún tiempo. En Internet las especulaciones han sido causantes de grandes burbujas tecnológicas y han hecho fracasar a muchos proyectos.

Además, nuestros proyectos tienen que renovarse y evolucionar. El Web 2.0 no es precisamente una tecnología, sino es la actitud con la que debemos trabajar para desarrollar en Internet. Tal vez allí está la reflexión más importante del Web 2.0.

Yo ya estoy trabajando en renovar y mejorar algunos proyectos, no por que busque etiquetarlos con nuevas versiones, sino por que creo firmemente que la única constante debe ser el cambio, y en Internet, el cambio debe de estar presente más frecuentemente.

Fuente: Maestros del web



Pequeña metodología para diseñar sitios electrónicos
23.abril.2008, 8:36 am
Filed under: Artículos

Como muchos de ustedes saben, soy instructor en una empresa que lleva por nombre Aula Virtual. La presente metodología esta basada en la que Adobe integra en su curricula oficial y que consta de cinco pasos principales al cuál yo le agregué uno más que Adobe incluye en su quinto paso.

A muchas personas se les dificulta el hecho de poder concretar el proyecto que le trae dando vueltas en la cabeza. Tienen la idea, pero les es muy complicado poder aterrizarla, lo cuál es preocupante si pensamos que muchos de sus futuros clientes pueden estar en las mismas condiciones.

Los pasos de la metodología son: Definición, Estructura, Diseño, Construcción y pruebas, Lanzamiento y Promoción. Los desgloso a continuación:

Definición: En este paso tenemos que sacar toda la información que podamos de nuestro cliente (nuestro jefe si estamos en alguna empresa es nuestro cliente; nosotros si es un proyecto particular, somos los clientes) acerca del proyecto por el cuál nos esta contratando. Metas, objetivos, público objetivo, requerimientos especiales, etcétera. Muchas veces tendremos que acosar a nuestro cliente física y mentalmente para poder obtener la información que se requiere para el proyecto, si no lo hacemos así, un proyecto de un sitio sencillo que estaría listo en dos semanas, puede postergarse meses con los insufribles “aún no hecho nada, pero te juro que esta semana si trabajo en ello, llámame el lunes”.

Estructura: Una vez que tenemos los alteros y alteros de información, hay que clasificarla en categorías
y subcategorías, siempre con el objetivo en mente de construir un mapa de sitio para nuestro proyecto. Realizar un esquema sencillo hecho con rectángulos para marcar las áreas en las que caerá la información es básico para poder definir la estructura del sitio. Recordemos que HTML lo único que hace es estructurar el contenido en rectángulos a los cuales les pone nombre (párrafo, header, etc) y que la herramienta principal de los CSS son también rectángulos (divs) los cuales deberemos decorar.

Diseño: Hasta esta etapa es cuando abrimos cualquier programa de diseño para poder construir gráficos estaticos describiendo las formas y colores que tendrá nuestro sitio. En el diseño  como tal, existen muchas otras metodologías de las cuales podemos echar mano para poder estructurar el trabajo que nos llevará hacia el éxito en los proyectos. Bruno Munari y su metodología de arroz verde es un ejemplo. Generalmente se construyen de dos a tres prototipos que se presentan al cliente, éste a su vez hace las observaciones que considera pertinentes (por favor diseñadores amantes de su trabajo, hay que practicar mucho en esta etapa el “dejar ir”), y nosotros los incorporamos.

Construcción y pruebas. Es el momento de abrir Dreamweaver o Flash para poder comenzar a construir nuestro sitio. Generar tablas con los slices desde Fireworks o Photoshop, también es parte primordial de esta etapa. Los slices son un paso muy delicado que en ocasiones es menospreciado, ya que de ello dependerá el qué tan limpio será el código generado en la tabla HTML. También podemos exportar slice por slice e importar las imágenes generadas una por una en Dreamweaver y acomodarlas en celdas o en divs. Paso siguiente es la construcción de plantillas, elementos de libreria, botones, gráficos extra, estilos css,  menús, vínculos, etcétera. Ya que tenemos toda esa infraestructura armada, podemos comenzar alimentar el “sistema de archivos interrelacionados entre sí” que acabamos de construir con contenido. En todo momento de esta etapa tendremos que estar vigilando estrechamente el correcto funcionamiento de lo que vamos generano, y al final podemos dirigir una prueba de navegación con algún conocido, el cuál nos arrojará información acerca del si están funcionando los elementos que planee como debieran.

Lanzamiento. Antes de subir la página al servidor, es nuestra última oportunidad para poder checar que todos nuestros archivos HTML y swf tengan títulos y descripciones para hacerlos visibles a los motores de búsqueda, agregar textos alternativos a las imágenes y parámetros title a nuestros vínculos. En otras palabras, dejar complentamente accesible nuestra página, de acuerdo a los estándares de la W3C.

Promoción. Dar de alta nuestra página en diferentes motores de búsqueda, contratar adwords, realizar convenios para intercambio de banners, anunciarla en sistemas impresos, instalar un sistema de seguimiento de clics como el de google analytics. Todo lo que se nos ocurra para lograr que nuestra página tenga presencia importante en la web. Para algunos sitios este último paso será más importante que para otros y para los freelance y empresas siempre brindará una oportunidad de aumentar la cartera de servicios.

El llevar a cabo esta metodología, no solamente nos permitirá poder concretizar de mejor manera los proyectos que estamos realizando, también nos ayudará a proteger nuestro trabajo si en cada paso requerimos la firma y autorización del cliente.



Imagenes vectoriales escalables. SVG
22.marzo.2008, 1:56 pm
Filed under: Artículos

No cabe duda que día a día vamos aprendiendo cosas nuevas, y que un día sin haber aprendido algo nuevo o reafirmado algún conocimiento, es un día muerto. Hoy, en un video tutorial, me llamó la atención un formato de gráficos del cuál no había oído hablar, el formato svg, que significa Scalable Vector Grafics para web. Sabía que illustrator, Corel Draw y el fallecido Free Hand trabajan con este tipo de definición de imágenes, con vectores, que los vectores al ser descritos de manera matemática, son mucho más ligeros que los bmp (jpg, gif, png).
También sabía que Flash maneja imágenes en vectores para sus animaciones, que en parte es lo que la ha llevado al éxito, ya que, vuelvo a repetir, los gráficos vectoriales pueden ser muy livianos, más que los bmp.
Pero resulta que a partir del 2001 la W3C ha recomendado el uso de archivos SVG para generar gráficos vectoriales para lás página electrónicas y que es posible animarlos, aun no sé como, pero aquí hay un tetris hecho con puros svg, o sea que también es posible su programación, igual que con los gráficos creados con flash, pero a pesar que ya tiene 7 años en escena, aún esta en pañales, no se ha oído ningún boom de los gráficos svg.
Me imagino que en algún momento podrá ser competencia de los swf, pero ese tiempo aún esta muy lejos, pues flash sigue avanzando a pasos agigantados de la mando de Flex y Air. La única ventaja real que tiene hoy en día los gráficos svg es que al ser recomendados por la W3C, no es necesario ni un solo plugin, pues la mayoría de los navegadores de última generación, si no es que todos, ya lo soportan.
Les dejo un ejemplo de gráficos svg, aumenten la imagen y vean cómo no se deforma, hagan click con el botón derecho a la imagen para que vean que no es flash, jueguen con ella, exploren, aprendan y no se olviden de compartir lo aprendido.
Saludos.



¿Dónde dejaron los smart objects?
22.marzo.2008, 1:22 pm
Filed under: Artículos

He estado viendo algunos viejos videopodcast de Adobe Creative Videopodcast, de allá en los ayeres en los que Macromedia todavía era Macromedia y estábamos lejos de imaginar que Adobe llegaría a comprarla. En ellos hablaban acerca de los “smart objects”. ¡Qué cosas tan maravillosas! Podíamos crear, por ejemplo, un logo en Illustrator o un banner en Photoshop para un encabezado, guardarlos en una carpeta especial dentro de nuestro sitio e incrustarlos a nuestra web mediante los smart objects en Adobe Go Live, para hacerlo, por supuesto pasaba por un proceso de conversión en gif o jpg, archivos que se guardaban en la carpeta de imágenes. Lo genial de este asunto, es que nosotros podíamos hacer cualquier cambio sobre el archivo original psd o ai, y de inmediato se veia reflejado en nuestro sitio o por el contrario, como guarda toda la información del vínculo con Illustrator, podíamos crecer o decrecer nuestro gif o jpg del logo y ¡no perdía calidad!, lo resampleaba.

He buscado esa cualidad en Dreamweaver CS3, ahora que ya es de Adobe, y no la hallo por ninguna parte. Será que algo tan genial se ha perdido en la nube de fusiones. Tengo entendido que reescribieron totalmente el código del Dreamweaver, era mucho pedir, que si ya iban a hacer ese trabajo, incluyeran esta característica.

Espero que en futuras versiones, no se olviden de los smart objects para Dreamweaver.