Diplomado Aula relacionado: Web Developer

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 

Diplomado Aula relacionado: Web Master Designer

htmlquick tiene una lista de las etiquetas más usadas en HTML, con una pequeña, pero consisa explicación. Muy útil para quienes empiezan a diseñar sus sitios web y necesitan hacer una corrección rápida en el visualizador de código de Dreamweaver

Diplomado Aula relacionado: Web Developer

Aviary es una aplicación en línea construída con Adobe Flex. Con el puro espíritu de la web 2.0. Según algunos pronósticos, aplicaciones como esa, son el futuro de la web. Por favor préstenle atención Peacock y a Woodpecker, que son herramientas para generar imágenes de patrones a partir de imagenes y redimensionamiento de imágenes inteligente, respectivamente.

Diplomado Aula relacionado: Diseño Interactivo y Animación Digital

Porque recordar es vivir, aquí les dejamos una muestra de cómo era la herramienta de Adobe Illustrator por allá de 1987, hace solo 21 años.
¡Qué rápido crecen los niños!

Si estas cansado del texto Lorem Ipsum, y deseas utilizar algún otro texto ficticio para rellenar los espacios. Puede utilizar los textos generados por Blind Text Generador. El cual crea textos para cualquier plantilla que este desarrollando. Puedes seleccionar la cantidad de palabras o caracteres que deseas utilizar, al igual que el número de párrafos que deseas utilizar.

Pero a diferencia de Lorem Ipsum podrás escoger las propiedades que deseas sean utilizadas en el CSS, y este lo crea automáticamente para tu uso.

Diplomado Aula relacionado: Diseño Interactivo y Animación Digital

Dentro de Adobe Exchange podemos encontrar muchos add-ons para nuestras aplicaciones Adobe. Como en este caso, en el que tienen para nosotros un calendario totalmente editable para Illustrator. Recuerda que para entrar y descargar contenido de Adobe Exchange, debes registrarte previamente.

Diplomado relacionado: Web Developer 

Si estas desarrollando una aplicación con AIR, seguramente buscas personalizar el icono que se muestra al ejecutarla. Mi aplicación esta hecha en Flex Builder 3, pero esto te sirve para todas las tecnologias soportadas por AIR.

En realidad es muy sencillo, solo tienes que crear 4 imagenes png que serán tus iconos con los siguientes tamaños:

16 x16 px
32 x 32 px
48 x 48 px
128 x 128 px

Una vez que tengas tus cuatro iconos, copialos en la carpeta bin-debug y en src.

en mi caso yo cree la carpeta icons para mejor organización. Después busca en el archivo TUAPLICACION-app.xml de la carpeta bin-debug y de la carpeta src, una etiqueta comentada <icon>, quita los comentarios y pone la ruta correspondiente.

Código :

<icon>
<image16x16>icons/labo16.png</image16x16>
<image32x32>icons/labo32.png</image32x32>
<image48x48>icons/labo48.png</image48x48>
<image128x128>icons/labo128.png</image128x128>
</icon>

Una vez hecho esto, compila tu aplicación AIR y disfruta de tu icono personalizado, darás un mejor impacto.

Fuente: Cristalab 

Diplomado relacionado: Diseño Interactivo y Animación Digital 

En esta liga, encontrarán una colección de más de 100 pinceles en alta resolución.

Diplomado relacionado: Diseño Interactivo y Animación Digital 

http://kuler.adobe.com/ 

Ya hace algunos meses que Adobe creó está web basada en tecnología Flash en la que se pueden crear gamas de colores mediante varios métodos de armonía de color. No es la primera vez que había visto webs con este propósito pero sí la primera vez que me he encontrado con una colección de herramientas tan flexibles y potentes. Es lo que tiene Adobe, cuando crees que ya no pueden enseñarte nada más y que la época de las genialidades ha pasado a la historia te sorprende con pequeñas maravillas como ésta. Considero que es una muy potente herramienta para cualquyier ilustrador o diseñador gráfico que trabaje a menudo con el color.

Esta tecnología ha servido de base para una de las mayores novedades que incorpora el nuevo Illustrator CS3, la prestación llamada Live color.

En esta liga podrás encontrar un tutorial sobre su uso: Tutorial Adobe Kuler

Las gamas de colores creadas pueden ser compartidas con el resto de la comunidad, además cualquier gama se puede guradar desde la propia web en formato de paleta de color para utilizar en Illustrator, Photoshop o In Design. Además de que se puede descargar un widget para el escritorio, montado en Adobe Air.

Curiosamente Coolgrays es una de las que más éxito ha tenido en la comunidad. Dentro de poco se crearán algunos juegos de tarjetas impresas con las gamas de colores más populares de esta web para promocionar Kuler, y Coolgrays será una de las elegidas.

La utilización de Kuler es libre y gratuita así como todo el material de gamas que contiene y que podéis utilizar royalty free, en vuestras creaciones de diseño.

Fuente: uklanor 

Flash Developer

Las próximas fechas de apertura de este diplomado son:

Inicio: 14-JUL-2008
Horario: 10:00-14:00
De lunes a viernes

 >> Ejemplo de página de tutorial. Ojala podamos crearlos nosotros, si no, podemos hacer uso del contenido de muchas páginas existentes en la red, siempre y cuando marquemos la fuente, como al final de este artículo.<<

En este tutorial aprenderás a crear una Clase en Actionscript 3 que generará un juego de Pong totalmente adaptable.

Abre un nuevo documento de Actionscript y guardalo como Pong.as.

Ahora comenzaremos a programar la Clase.

Primero importamos los paquetes necesarios:
package

{
import flash.display.*;
import flash.ui.Mouse;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.utils.Timer;

Para una descripción más detallada de lo que hace cada uno, puedes consultar la ayuda de Flash presionando F1.

Ahora nombramos la Clase, que será heredada de la Clase MovieClip para poder utilizar el método addChild().
public class Pong extends MovieClip

{

Procedemos a escribir la función constructora de la clase, que será la encargada de todo el proceso del juego.
public function Pong(bgColor:uint = 0×000000, playerColor:uint = 0xFFFFFF, enemyColor:uint = 0xFFFFFF, ballColor:uint = 0xFFFFFF, middleLineColor:uint = 0xFFFFFF, ballSpeed:int = 2, scoreColor:uint = 0xFFFFFF, msgColor:uint = 0xFFFFFF, msg:String = “Click here”, scoreFont:String = “Arial”, scoreSize:int = 30):void

{

Como puedes observar se han colocado varios parametros, que a su vez, han sido declarados como predeterminados, a continuación explicaré cada uno de ellos.

Todos los valores uint, son números Hexadecimales en formato 0x. Puedes utilizar cualquier color Hexadecimal.

bgColor: Color del MovieClip que servirá como fondo del stage.
playerColor: Color del jugador.
enemyColor: Color del oponente.
ballColor: Color de la bola.
middleLineColor: Color de la linea que divide el stage.
ballSpeed: Velocidad de la bola.
scoreColor: El color de los marcadores.
msgColor: Color del texto usado como mensaje para comenzar.
msg: Mensaje para comenzar.
scoreFont: La fuente que será utilizada en el marcador.
scoreSize: Tamaño de la fuente de los marcadores.

Ocultamos el Context Menu y establecemos Constantes del tamaño del stage.

stage.showDefaultContextMenu = false;
const STAGE_WIDTH:int = stage.stageWidth;
const STAGE_HEIGHT:int = stage.stageHeight;

Ahora creamos el Fondo.

var bg:MovieClip = new MovieClip();
bg.graphics.beginFill(bgColor);
bg.graphics.drawRect(0, 0, STAGE_WIDTH, STAGE_HEIGHT);
bg.graphics.endFill();
addChild(bg);

Creamos el Jugador y al Oponente y los posicionamos.

var player:MovieClip = new MovieClip();
player.graphics.beginFill(playerColor);
player.graphics.drawRect(0, 0, 8, 50);
player.graphics.endFill();
player.x = player.width;
player.y = (STAGE_HEIGHT / 2) – (player.height / 2);
addChild(player);
var enemy:MovieClip = new MovieClip();
enemy.graphics.beginFill(enemyColor);
enemy.graphics.drawRect(0, 0, 8, 50);
enemy.graphics.endFill();
enemy.x = STAGE_WIDTH – enemy.width * 2;
enemy.y = (STAGE_HEIGHT / 2) – (enemy.height / 2);
addChild(enemy);

El siguiente código crea la bola y la posiciona.

var ball:MovieClip = new MovieClip();
ball.graphics.beginFill(ballColor);
ball.graphics.drawRect(0, 0, 10, 10);
ball.graphics.endFill();
ball.x = STAGE_WIDTH / 2 – ball.width / 2;
ball.y = STAGE_HEIGHT / 2 – ball.height / 2;
addChild(ball);

Ahora creamos la linea que divide el stage.

var middleLine:MovieClip = new MovieClip();
middleLine.graphics.lineStyle(2, middleLineColor);
middleLine.graphics.lineTo(0, STAGE_HEIGHT);
middleLine.x = STAGE_WIDTH / 2;
middleLine.y = 0;
addChild(middleLine);

Creamos una función que será ejecutada por un Evento Timer, ésta se encargará de que el Jugador sea manejado con el Mouse, además de establecer hasta donde se puede mover.

function playerMovement(event:TimerEvent):void
{
player.y = mouseY – player.height / 2;
if(player.y >= STAGE_HEIGHT – player.height)
{
player.y = STAGE_HEIGHT – player.height;
}
if(player.y <= 0)
{
player.y = 0;
}
}

La función siguiente se encarga de manejar al Oponente, también establece hasta donde se puede mover.

function enemyAI(event:TimerEvent):void
{
enemy.y = ball.y – enemy.height / 2;
if(enemy.y >= STAGE_HEIGHT – enemy.height)
{
enemy.y = STAGE_HEIGHT – enemy.height;
}
if(enemy.y <= 0)
{
enemy.y = 0;
}
}

Ahora creamos el código que manejará la Bola que será explicado con comentarios para una mejor comprensión.

ball.speed = ballSpeed; //Se establece la velocidad, tomada del Parámetro ballSpeed.
ball.dir = 0; //Se crea una variable que manejara la dirección de la Bola.
player.score = 0; //Estos son los marcadores al iniciar.
enemy.score = 0;
function ballMovement(event:TimerEvent):void
{
if(playin) //Se checa si el juego ha comenzado, esta variable será creada más adelante.
{
ball.x -= ball.speed; //Estos códigos mueven la Bola.
ball.y -= ball.dir;
}
if(ball.x <= player.x) //Si la Bola pasa por detras del Jugador
{ //o del Oponente, re reinicia la Bola.
enemy.score++;
restart();
}
if(ball.x >= enemy.x)
{
player.score++;
restart();
}
if(ball.y > (STAGE_HEIGHT – ball.height / 2)) //Estos códigos se encargan de hacer rebotar la Bola.
{
ball.dir *= -1;
}
if(ball.y < ball.height / 2)
{
ball.dir *= -1;
}
}

Ahora checamos las colisiones, si la Bola colisiona con el Jugador o el Oponente, la velocidad será invertida para dirigirse hacia el lado contrario, y la dirección se generará aleatoriamente, si el número generado es positivo la dirección será hacia abajo y si es negativo hacia arriba.

function checkHit(event:TimerEvent):void
{
if(ball.hitTestObject(player) || ball.hitTestObject(enemy))
{
ball.speed *= -1;
ball.dir = (Math.random() * 1) + (Math.random() * -1);
}
}

El siguiente código crea los Marcadores y los posiciona, además de crear la función que se encargará de actualizarlos.

var scoreFormat:TextFormat = new TextFormat();
scoreFormat.color = scoreColor;
scoreFormat.font = scoreFont;
scoreFormat.size = scoreSize;
var playerScore:TextField = new TextField();
playerScore.autoSize = TextFieldAutoSize.CENTER;
playerScore.x = STAGE_WIDTH / 4;
playerScore.y = STAGE_HEIGHT / 10;
playerScore.selectable = false;
playerScore.defaultTextFormat = scoreFormat;
playerScore.type = TextFieldType.DYNAMIC;
addChild(playerScore);
var enemyScore:TextField = new TextField();
enemyScore.autoSize = TextFieldAutoSize.CENTER;
enemyScore.x = (STAGE_WIDTH) – (STAGE_WIDTH / 4)
enemyScore.y = STAGE_HEIGHT / 10;
enemyScore.selectable = false;
enemyScore.defaultTextFormat = scoreFormat;
enemyScore.type = TextFieldType.DYNAMIC;
addChild(enemyScore);
function scoreHandler(event:TimerEvent)
{
playerScore.text = player.score;
enemyScore.text = enemy.score;
}

Creamos el mensaje para comenzar, la variable que nos indicará si el juego ha comenzado y la función que se encargará de ocultar el Mouse, iniciar el Timer y borrar el mensaje de inicio.

var startMsg:TextField = new TextField();
var startFormat:TextFormat = new TextFormat();
startFormat.color = msgColor;
startFormat.bold = true;
startMsg.x = 0;
startMsg.y = (STAGE_HEIGHT) – (STAGE_HEIGHT / 12);
startMsg.selectable = false;
startMsg.type = TextFieldType.DYNAMIC;
startMsg.defaultTextFormat = startFormat;
startMsg.text = msg;
addChild(startMsg);
var playin:Boolean = false;
function startHandler(event:MouseEvent):void
{
Mouse.hide();
playin = true;
timer.start();
startMsg.text = “”;
}

Ahora creamos la función de reinicio que se encargará de reestablecer valores cuando el Marcador se actualize.
function restart():void

{
ball.x = STAGE_WIDTH / 2 – ball.width / 2;
ball.y = STAGE_HEIGHT / 2 – ball.height / 2;
ball.speed = ballSpeed;
ball.dir = 0;
}

Por último, creamos el objeto Timer y añadimos los Listeners.

stage.addEventListener(MouseEvent.CLICK, startHandler);
var timer:Timer = new Timer(1, 0);
timer.addEventListener(TimerEvent.TIMER, playerMovement);
timer.addEventListener(TimerEvent.TIMER, enemyAI);
timer.addEventListener(TimerEvent.TIMER, ballMovement);
timer.addEventListener(TimerEvent.TIMER, checkHit);
timer.addEventListener(TimerEvent.TIMER, scoreHandler);

La Clase debe ser llamada por medio del cuadro de texto Document Class en el Panel de Propiedades de Flash, ya que el objeto stage no permite el uso de import en una Clase de este tipo.
Para modificar los Parámetros lo puedes hacer directamente desde la Clase.

Recuerda que el stage puede ser de cualquier tamaño, la Clase ajustará automáticamente los elementos.

Fuente: Cristal Lab