La semana pasada tuve un par de trabajos en los que requeria utilizar un video de flash como fondo y arriba de eso un sitio html puro. Asi que la idea de este mini tutorial es mostrar lo facil que es hacer que el video en flash tome el 100 porciento de la pantalla y se redimencione cuando se cambia el tamano de la pantalla.

1
2

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

Con la primer linea especificamos que el tamano de la aplicacion flash tiene que se fija y que se mantiene fija incluso si cambia el tamano del explorador.
La segunda linea especifica que el escenario este alineado en la esquina superior izquierda.

1
2
3

var _netCon :NetConnection = null;
var _netStr :NetStream = null;
var _video :Video = null;

NetConnection es un objecto que podemos describir como un tubo entre el cliente y el servidor.

La clase Video muestra un video en la aplicacion sin incrustarlo en el swf. Digamos lo reproduce en un contenedor mediante streaming.

1
2
3
4
5

function SetupNetConnection() {
 _netCon = new NetConnection();
 _netCon.addEventListener(NetStatusEvent.NET_STATUS, NetStatus, false, 0, true);
 _netCon.connect(null);
}

Bueno, yahemso creado la conexion y agredado un listener que monitorea el estado de la conexion. el argumento null significa que no estamos conectando a un Flash media server sino que hacemos streaming de un archivo que reside en un servidor normal.

Ahora vamos a crear el stream que vamos a usar par ver el video mediante el objeto NetConnection y vamos a escuchar su estado mediante listener de ese mismo objeto.

1
2
3
4
5
6
7
8
9
10
11
12

function SetupNetStream() {
 var $customClient:Object = new Object();
$customClient.onMetaData = onMetaData;
_netStr = new NetStream(_netCon);
 _netStr.client = $customClient;
_netStr.addEventListener(NetStatusEvent.NET_STATUS, NetStatus, false, 0, true);
_video = new Video();
 _video.attachNetStream(_netStr);
 _video.smoothing = false;
 addChild(_video);
_netStr.play("video.flv");
 }

La funcion onMetaData va ser llamada tan pronto como el objeto NetStream obtenga informacion del archivo FLV.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

 
function onMetaData($info:Object):void {
 
}
 
function NetStatus($e:NetStatusEvent) {
 
switch ($e.info.code)   {
 
case "NetConnection.Connect.Success":
SetupNetStream();
break;
 
case "NetStream.Play.Stop":
_netStr.seek(0);
 }
}
 
 
 
function ResizeAndPosition($e:Event):void
{
_video.width = stage.stageWidth;
_video.height = stage.stageHeight;
}
 
stage.addEventListener(Event.RESIZE, ResizeAndPosition, false, 0, true);
 
ResizeAndPosition(null); 
 
SetupNetConnection();

Y el HTML que contrendria el player sería el siguiente:

1
2
3
4

<!--
*{ margin:0; padding:0; }
-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="source.swf" /><embed type="application/x-shockwave-flash" width="100%" height="100%" src="source.swf"></embed></object>

Como parte de Grupo Quantum hemos tenido mucho trabajo en wordpress, desde sitios simples que no requieren la principal funcion de WP que es el blog hasta sitios complejos con motores de e-commerce. WordPress es uno de lo mejores CMS en este momento y lo que más me gusta del sistema es la cantidad de documentación y elasticidad que tiene. Por ejemplo se puede cambiar la interfaz de administracion muy facilmente, hay templates,etc. En éste caso vamos cambiar el logo que viene por defecto cuando se loguea el usuario en el administrador.
1) localizar el archivo llamado functions.php que esta en la misma carpeta de la plantilla que estén usando.

2) agregar estas lineas en functions.php

1
2
3
4
5
6

function mi_inicio_personalizado() {
 
echo '<!-- h1 a { background-image:url('.get_bloginfo('template_url').'/images/nombre-de-la-imagen-que-deseen.jpg) !important; } -->';
 
add_action('login_head', 'mi_inicio_personalizado');
}

3) ahora lo único que falta es subir la imagen a a carpeta images de la plantilla que estemos usando y listo.

el tamaño de la imagen varia pero debería ser de 300 pixeles de ancho por 130 aprox.
Espero que le haya gsutado este perqueño tutorial.
cualquier duda me dejan un comentario.

Con eduardo siempre que empezamos un proyecto nuevo no detenemos un momento a pensar en la usabilidad del mismo. Este es un modelo que intenta explicar que es la experiencia del usuario.

El modelo debe ser explicado desde el centro hacia afuera

1. EL valor que queremos alcanzar
2. Para clientes y proveedores, una experiencia de usuario positiva se traduce en una situación donde todos ganan.
3. Tambien queremos alcanzar “valor” mediante una experiencia de usuario positiva.
4. La experiencia de usuario tiene una serie de fases. no tenemos que enfocar en: positividad, encontrabilidad, accesibilidad, deseabilidad, usabilidad, credibilidad y utilidad.
5. Varios factores contribuyen a las fases de la experiencia de usuario. Aca hay 30 por ejemplo.
6. Para alcanzar todo ésto trabajamos en sentido contrario, empezamos por la estrategia SEO y tomando decisiones en cada uno de lo factores.

Les recomiendo bajar la bajar versión en pdf imprimirla y tenerla en la pared cerca de su monitores cuando comiencen un nuevo proyecto.

post original: http://userexperienceproject.blogspot.com/2007/04/user-experience-wheel.html

Ayer estuvimos discutiendo con Eduardo un poco sobre su tutorial para detectar la dirección y la rotación en Flash. Su comienzo esta muy bien pero analizamos que tenía un par de fallas. Además él también nombró que le gustaría animar el traslado del avion para que no sea tan brusco, a esto lo realizaremos usando una clase para tweeners.

La primera en realidad no es una falla, sino más bien el deseo que el avión gire hacia la dirección de traslado, lo cual trae un nuevo problema que es hacia donde gira. Por defecto si en Flash sólo se usa rotación el giro que efectúa es en sentido horario, por lo cual a veces esto puede ser muy raro cuando es más rápido girar hacia el otro lado. Hay varias formas de detectar ésto y la que discutíamos es simplemente detectar el angulo de rotación actual restarle 360 y listo. Pero mientras discutiamos con Eduardo que formula utilizar encontré un propiedad/plugin dentro de la clase Tweenmax que no sólo te hace la rotación al ángulo deseado sino que también detecta hacia donde es el giro más corto.

1

TweenMax.to(avion_mc, 0.5, {shortRotation:{rotation:270}});

Con shortRotation nos evitamos tener que hacer el calculo nosotros y decide hacer el giro en sentido horario o antihorario según cual sea más corto

Ahora el otro problema es que cuando movemos el mouse no lo hacemos en un movimiento perfecto hacia arriba o abajo o hacia los laterales, en realidad siempre existen una componente hacia arriba, abajo o laterales . una especie de ruido.
Para solucionar este problema empecé por detectar manualmente en donde se encuentra el mouse y hacia donde se mueve. Luego hago los cambios de giro solamente cuando el movimiento es 100% hacia los costados o 100% hacia arriba o abajo. De esta forma se evita que haya pequeño intentos de cambiar el gira cuando en realidad es sólo ruido.

El código completo es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

import com.greensock.*;
import com.greensock.easing.*;
 
function Start()
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, CheckDirection);
}
 
Start();
 
var prevX = 0;
var prevY = 0;
var curX = 0;
var curY = 0;
var dirX:String = "";
var dirY:String = "";
 
function CheckDirection(e:MouseEvent)
{
var dirHorizontal:String = obtenerDireccionHorizontal();
var dirVertical:String = obtenerDireccionVertical();
trace("movimiento en X : " + dirHorizontal + ", movimiento en Y : " + dirVertical);
TweenMax.to(avion_mc, 1, { x:mouseX,y:mouseY});
hacerGiro(dirHorizontal,dirVertical);
e.updateAfterEvent();
}
 
function hacerGiro(dirHorizontal,dirVertical)
{
if (dirHorizontal == 'derecha' && dirVertical == 'none')
{
TweenMax.to(avion_mc, 0.5, {shortRotation:{rotation:90}});
}
else if (dirHorizontal=='izquierda' && dirVertical == 'none')
{
TweenMax.to(avion_mc, 0.5, {shortRotation:{rotation:270}});
}
if (dirVertical == 'arriba' && dirHorizontal == 'none')
{
TweenMax.to(avion_mc, 0.5, {shortRotation:{rotation:0}});
}
else if (dirVertical=='abajo' && dirHorizontal == 'none')
{
TweenMax.to(avion_mc, 0.5, {shortRotation:{rotation:180}});
}
}
 
function obtenerDireccionHorizontal():String
{
 
prevX = curX;
curX = stage.mouseX;
 
if (prevX > curX)
{
dirX = "izquierda";
}
else if (prevX < curX)
{
dirX = "derecha";
}
else
{
dirX = "none";
}
return dirX;
}
 
function obtenerDireccionVertical():String
{
prevY = curY;
curY = stage.mouseY;
if (prevY > curY)
{
dirY = "arriba";
}
else if (prevY < curY)
{
dirY = "abajo";
}
else
{
dirY = "none";
}
return dirY;
}

Para que les funcione tienen que bajar la clase tweenMax para AS3 desde: http://www.tweenmax.com

Acá el ejemplo funcionando:

Ayer fue a una reunion del Google User Group de Irlanda donde se hbaló principalmente del desarrollo de aplicaciones para android. En esté momento se recomienda dos tecnologías Java y AIR. Siendo JAVA la más correcto ya que se tiene acceso a API completa y se puede desarrollar apuntando a distintas versiones. El desarrollo en AIR es mucho más simple y para aquellos que manejen Flash les va a ser muy fácil la portación. La única dificulta encontrada cuando se desarrolla en AIR es que se requiere que el dispositivo tenga AIR runtime instalado, cosa que únicamente está disponible a partir de Froyo. De lo contrario hay que empezar a incursionar en el desarrollo en JAVA y la herramienta recomendada para esto es Eclipse.

Dejó aquí un par de links que compartieron ayer con video tutoriales y ejemplo de aplicaciones para bajar.

http://android.voxisland.com/

http://eclipsetutorial.sourceforge.net/totalbeginner.html

http://developer.android.com/sdk/adding-components.html