El PezOjo!

ActionScript 3: Juego de Tiro al Blanco

2011-11-04T18:20:00.001-03:00

El código que presento a continuación un ejemplo básico para generar un juego de tiro al blanco, muy sencillo, que puede ser utilizado para banners de adsense o cualquier otro sistema de ads.

Por supuesto que no es algo muy elaborado, pero con un poco de diseño de fondo podrás tener un banner bien armado y super funcional.

Vamos al desarrollo:

Antes del Actionscript:
1) Creá en la biblioteca un MC con nombre de clase "target" (serán las silietas a las que les disparamos)
2) Creá otro MC en la biblioteca con el nombre de clase "puntero" (será la mira).
3) En el escenario poné un téxto dinámico con nombre de instancia "textin" (sirve para decirnos si acertamos o nó en el blanco.

Ahora sí, acá va el código:

 
//CREO UNA VARIABLE QUE CONTABILIZA LOS TIROS CORRECTOS
var hits:Number = 0;

//AGREGAR BLANCOS AL ESCRITORIO
var target1:Sprite = new target(); //cargo una nueva instancia de las siluetas
target1.name="TOTO"; //le asigno un nombre, aunque en este ejemplo no es necesario
target1.x=50; //posiciono X
target1.y=20; //posiciono Y

var target2:Sprite = new target(); //cargo segundo blanco y lo posiciono
target2.x=110;
target2.y=20;

var target3:Sprite = new target(); //lo mismo para el tercer blanco
target3.x=170;
target3.y=20;

//CARGO PUNTERO el movie clip que reemplazará al mouse
var pointer:Sprite = new puntero();

//METO TODO EN EL ESCENARIO
addChild(target1);
addChild(target2);
addChild(target3);
addChild(pointer);

//DEFINIR PUNTERO DEL MOUSE escondo la flecha y cargo el pointer par que siga al mouse
Mouse.hide();
pointer.x=mouseX;
pointer.y=mouseY;
pointer.startDrag();

//LO QUE PASA CUANDO DISPARO
pointer.addEventListener(MouseEvent.MOUSE_UP, disparo);
function disparo(event:MouseEvent):void { 
pointer.stopDrag(); //detengo el drag para averiguar el dropTarget

if(pointer.dropTarget==null || pointer.dropTarget.name=="textin"){
textin.text="MAL";
pointer.startDrag();
}else{ //si le atiné al blanco
textin.text="¡BIEN!"; //te felicito
removeChild(pointer.dropTarget.parent); //borro el blanco del escenario
hits++; //sumo puntos a tus hits

if(hits>2){ //cuando los hits lleguen a tres...
textin.text="GANASTE";
pointer.stopDrag();
Mouse.show();
}else{
pointer.startDrag();
}
}
}

PD: En teoría con copiar y pegar el código que está en este post alcanza para que funcione. De todos modos te dejo el link para descargar archivo tiro_al_blanco.rar.

Saludos y suerte con tus banners.

30 tipografías Pro novedosas y gratuitas.

2011-08-09T19:00:00.002-03:00

Las fuentes gratuitas siempre nos salvan. Las necesitamos en casi todos nuestros trabajos de diseño

Aquí, la gente de Smashing Magazine elaboró esta maravillosa lista de Tipografías Gratuitas y de calidad premium para gráfica o web.

Entonces, como la lista es larga, variada y principalmente muy útil, transcribimos el artículo de smashing Magazine con sus links de descarga completo.

Espero que te sirvan tanto como a mí

Bohema

Morning Glory

Highlands

Bender

Ovalian Type

Linden Hill

Fanwood

Tondu

Matilde

Weston Round Slab

Banda Typeface

Legion Slab

Fabrica

ARS Novelty

Bevan

Ostrich Sans

Sansus Webissimo

Quattrocento Roman

Dancing Script

Collator

Cabin

Logisoso

Novecento

Ubuntu

Ultra

CS Benwood

Five Minutes

DOCK11

Maven Pro

TypoFlat

Nikaia

The Force of Typography

www.smashingmagazine.com

jQuery: Como hacer fácil un Slide de imagenes con: PHP jQuery y MySQL

2011-06-26T12:01:00.001-03:00

Hace un tiempo necesitaba incluír una galería de imagenes dinámica en una página.

Encontré un montón de aplicaciones jQuery con php muy funcionales, gratuitas y realmente muy bien desarrolladas, pero que no se adaptaban a lo que necesitábamos.

Era algo más bien sencillo, de programación rápida y que pudiera adaptarse a facilmente al sitio que ya teníamos desarrollado.

Así fué como salió este código realmente muy corto y limpio que mezcla un poco de PHP y otro de jQuery para leer una base MySQL y armar este pase de fotos.

A continuación te pongo el ejemplo que usamos como base para armar nuestra galería comentándolo línea a línea. A ver que te parece:

En primer término, este ejemplo se desarrolla con una base de datos propia en la que armé un listado de imagenes que estan en el servidor. El campo "avatar" guarda la ruta de la imagen en el servidor web.

Para este ejemplo supongamos que en la base de datos tenemos 17 imagenes cargadas.

Llamo al jquery donde sea que lo tenga

 <script type="text/javascript" src="js/jquery.js"></script>

Comienzo con un PHP que va ahacer varias cosas


<?php

Para saber cual será la primer imagen que voy a mostrar, me fijo si pasé por URL un número de imagen. Si no pasé nada por la URL, el valor inicial será 0. (este número representará una posición dentro de un array).


if(isset($_GET["img_actual"])){
     $img_actual=$_GET["img_actual"];
}else{
     $img_actual=0;
}

Voy a crear un array y le voy a agregar en cada posición un registro de la base de datos. Por ejemplo: "0=>'imagen/tito.jpg'".

Creo el array


$arr=array();

Llamo a mi archivo de conexión a la DB y me conecto. Esta parte va a variar en función de tu forma de conectarte a la base.


include("conex/conectar.php");
$link=Conectarse();

Realizo la consulta MySQL y mientras recorro los campos los voy incorporando en el array


$result=mysql_query("select * from de_usuarios",$link);
while($row = mysql_fetch_array($result)){
     $avatar=$row["avatar"];
     $arr[]=$row["avatar"];
}

Voy a guardar una variable que me diga cuál es el último valor del array (en este ejemplo 16)


$img_ult=sizeof($arr)-1;
?>

Ahora, con jQuery vamos a desarrollar el código para pasar las imagenes. Nuestro slide funcionará de la siguiente manera:
tiene un botón de "retroceder", una imagen central y un botón de "avanzar". Cuando se presione uno de los botones (retroceder o avanzar) la imagen cambiará por la anterior o la siguiente en la lista del array.


<script type="text/javascript">
$(function(){

Creo las siguientes variables en jQuery a partir de los datos que recopilé en el PHP:
- v_ult: le ponemos, mediante PHP, el valor guardado. Será la variable que contenga la última posición del array. Esta variable la usaremos para definir el comportamiento del Slide al llegar a la última imagen.
- v_act: le ponemos mediante PHP, el valor guardado. Nos ayudará a saber cual será la primer imagen para mostrar y, a partir de ella, definir la navegación
- v_pre: Será el valor anterior en el array de la imagen que estamos viendo.
- v_sig: Será el valor siguiente en el array de la imagen que estamos viendo.
- itemA: Esta variable contendrá el nombre de Clase que estamos viendo. (.item1, .item2, etc).
- itemP: Variable que contendrá el nombre de la clase que mostraremos cuando presionemos el botón "Previa" (<).
- itemS: variable que contendrá el nombre de la clase que mostraremos al presionar el botón "siguiente" (>).


v_ult=<?php echo $img_ult ?>;
v_act=<?php echo $img_actual ?>;
v_pre=v_act-1;
v_sig=v_act+1;
itemA=".item"+v_act;
itemP=".item"+v_pre;
itemS=".item"+v_sig;

Por medio de un bucle FOR oculto las DIVS que contengan las imagenes del array (recordemos que pondré cada imagen dentro de un div, cada div tendrá una clase única cuyo nombre coincide con su posición en el array (ej: .item0, .item1, etc).


for(i=0;i<v_ult+1;i++){
     ocultar=".item"+i;
     $(ocultar).hide();
}

Como oculté todos los divs de imagen, ahora tengo que mostrar la primer imagen que estaba prevista (porque la traje mediante URL o porque la definí en la posición 0.


$(itemA).show();

Si la imagen que estamos viendo es la primera del listado, voy a ocultar el botón "anterior". En cambio, si la imagen es la última del listado, voy a ocultar el botón "Siguiente".


if(v_act==0){
     $(".itemBP").hide();
}
     if(v_act==v_ult){
     $(".itemBS").hide();
}

Ahora que terminamos de establecer el estado inicial de nuestra galería, vamos a darle la función a los botones de previo y siguiente.

Los botónes serán dos divs que tienen las clases ".itemBP" (por botón previo) y ".itemBS" (por botón siguiente).

Para el botón previo (.itemBP) voy a indicar:
- Que la imagen actual (itemA) se oculte con un fadeOut (se desvanece).
- Que la imagen previa (itemP) aparezca con fadeIn.
- Que el valor actual v_act sea el de la imagen que ahora esta apareciendo
- Que el valor siguiente v_sig sea el valor de la imagen que acabo de borrar (porque retrocedimos un lugar)
- Que, si el valor actual es mayor a 0 (la primera imagen del listado) cambie el valor de "proxima" a -1. Pero cuando el valor actual llegue a 0 voy a borrar el botón Previo para que no pueda seguir decreciendo (ya que no hay nada despues de 0).


$(".itemBP").click(function(event) {
     event.preventDefault();
     $(itemA).fadeOut();
     $(itemP).fadeIn();
     v_act=v_act-1;
     v_sig=v_act+1;
     itemA=".item"+v_act;
     itemS=".item"+v_sig;
     $(".itemBS").show();
     if(v_act>0){
          v_pre=v_act-1;
          itemP=".item"+v_pre;
     }else{
          $(".itemBP").hide();
     });

Para el botón Siguiente (.itemBS) voy a indicar
- Que la imagen actual (itemA) se oculte con un fadeOut (se desvanece).
- Que la imagen siguiente en el array (itemP) aparezca con fadeIn.
- Que el valor actual v_act sea el de la imagen que ahora esta apareciendo
- Que el valor siguiente v_prev sea el valor de la imagen que acabo de borrar (porque retrocedimos un lugar)
- Que, si el valor actual es menor que la última posición del array ( (la primera imagen del listado) cambie el valor de "proxima" a -1. Pero cuando el valor actual llegue a 0 voy a borrar el botón Previo para que no pueda seguir decreciendo (ya que no hay nada despues de 0).


$(".itemBS").click(function(event) {
     event.preventDefault();
     $(itemA).fadeOut();
     $(itemS).fadeIn();
     v_act=v_act+1;
     v_pre=v_act-1;
     itemA=".item"+v_act;
     itemP=".item"+v_pre;
     $(".itemBP").show();
     if(v_act<v_ult){
          v_sig=v_act+1;
          itemS=".item"+v_sig;
     }else{
          $(".itemBS").hide();
     }
});
});

Aquí termina nuestro script para hacer el slideshow de imagenes


</script>

Etiquetas que van a contener todo el slide:
contenedor de toda el slideshow


<div>

Contenedor para el botón Previo


<div style="float:left;width:30px;height:55px;text-align:center;">

El botón previa propiamente dicho


<div class="itemBP" style="cursor:hand;pointer:hand;"> - </div>

Cierro el contenedor del botón previo


</div>

DIV contenedor para todas las imagenes


<div style="float:left;width:55px;height:55px;text-align:center;">

Mediante PHP recorremos el array y creamos un div, con clase personalizada, en cada div guardamos una imagen


<?php
for($i=0;$i<sizeof($arr);$i++){
     echo'<div class="item'.$i.'" style="width:50px;height:50px;position:absolute;"><img src="imagen/'. $arr[$i] .'"width=50px height=50px /></div>';
}
?>

Cierro el contenedor de imagenes


</div>

Contenedor para el botón siguiente


<div style="float:left;width:30px;height:55px;text-align:center;">

El botón siguiente propiamente dicho


<div class="itemBS" style="cursor:hand;pointer:hand;"> + </div>

Cierro el contenedor del botón


    </div>

Cierro el contenedor general


</div>

Acá termina nuestro ejemplo. Espero que te haya funcionado y sirva como una buena base para tu trabajo.
Te dejo un link para descargar el archivo de este ejemplo.

Nota: Si este ejemplo te sirvió, date una vuelta por los enlaces patrocinados que seguro ahí encontrarás más información útil.

PHP: Previsualizar imagenes antes de subirlas al servidor

2011-01-13T19:04:00.013-03:00

Supongamos que tenemos un formulario para subir archivos, que ése archivo es la imagen de nuestro perfil y que queremos ver como queda antes de subir la imagen y guardar nuestro perfil.

Para realizar esta tarea php no va a ir solo, va a estar acompañado por un javascript y un iframe para que esto resulte. pero es más facil de lo que parece. Mi amigo GON me facilitó este código que fuimos adaptando para nuestro trabajo. Veamos los pasos para este ejemplo:

-----------------------------------------------------------------------------------------------------

Si querés los archivos fuete, acá te dejo un link para descargarte los archivos del ejemplo funcionando ok.

-----------------------------------------------------------------------------------------------------

1) Para llevar a cabo este ejemplo vamos a crear en la raíz de nuestro servidor una carpeta llamada "tmp", dos archivos .php llamados "form.php" y "uploader.php" y una imagen genérica llamada "avatar.png" que hará de comodin (puede ser cualquier extensión de imagen).
En la carpeta "tmp" se iran guardando las vistas previas de las imagenes que cargaremos en nuestro escritorio.

2) Archivo "form.php":

En el header pondremos un script de javascript:
<script type="text/javascript"> function setpreview() 
{ document.form1.target='null'; 
document.form1.action='uploader.php'; 
document.form1.submit(); 
}
function setsubmit() 
{ document.form1.target='_self'; 
document.form1.action='archivo_que_procesa_tu_form'; 
document.form1.submit(); 
} </script>
En el body: pondremos el formulario:
<form name="form1" action=" " method="post" enctype="multipart/form-data">
<div>Personalizar tu imagen: </div> 
<div><input name="archivo" id="archivo" type="file" size="35" onChange="setpreview()"/></div> 
<div><img src="avatar.png" id="picture" alt="vista previa" height="70" width="70"/> </div> 
<div><input type="submit" value="Crear Usuario" onclick="setsubmit()"/></div>
</form>
También en el body: Escribimos el iframe donde se ejecutará "uploader.php" esto es lo que nos permite ver el preview sin actualizar la página del script.
<iframe src="about:blank" name="null" style="display:none"> :

3) en el archivo "uploader.php":
<?php
$carpeta="tmp/"; //indicamos la carpeta donde se guardará la vista previa
$name=$carpeta.basename($_FILES['archivo']['name']); //armamos la ruta del archivo subido en formato "tmp/nombredearchivo.png"
move_uploaded_file($_FILES['archivo']['tmp_name'],$name); //guardamos el archivo en la carpeta
?>

<script type="text/javascript">
parent.document.getElementById('picture').src='<?php echo $name; ?>'; 
</script>

4) Cuando crees la función para el botón "enviar" del formulario, en algún lado deberías incluír la sentencia para que se borre, mediante php, la imagen que habíamos subido antes a la carpeta tmp. Algo así como:
<?php
unlink:(tmp/'.$_FILES['archivo']['tmp_name']');
?>

-----------------------------------------------------------------------------------------------------
Nota: Si este artículo te pareció interesante, por favor, visitá los enlaces patrocinados donde seguramente encontrarás más cosas útiles.

PHP: Enviar convocatorias por mail desde una web a Outlook o GMail

2011-01-06T18:23:00.006-03:00

Hace tiempo que necesitaba realizar convocatorias a reuniones, sitas desde una página web, por mail, hacia outlook o google calendar.
Me cansé de buscar y romperme la cabeza con codigos a medio hacer y que no funcinaban (no funcionaron).

Me cansé de enviar archivos a outlook que, aparecían como adjuntos .ics que al ejecutarlos me mostraba el fastidioso cartel de "elija usar calendario gregoriano en lugar de lunar!".

Y no fué hasta encontrar una función completa que funcionara que me dí cuenta que lo importante no eran los datos (estan en todos lados) que le enviara al mail, sino en el formato del mime que le pasabamos.

Así que tomé la función, la adapté a mis necesidades y acá te la publico, en formato de código, con comentarios y todo, para ponerla en un php, ejecutarla y ser feliz convocando gente a reuniones vía email.

Esta función no te crea el archivo .ics por separado sino que te envía el mail con los característicos botones de ACEPTAR, RECHAZAR, PROVISORIO. Al aceptarlo actualiza tu calendario con la cita creada.

Sin más acá va el código:

-----------------------------------------------------------------------------------------------------

Si querés el código fuente descargá acá el archivo .php.

-----------------------------------------------------------------------------------------------------

function sendIcalEmail($nombre_dest,$apellido_dest,$email,$fecha_inicio,$evento_nombre,$fecha_fin,$evento_desc) {

$nombre_from = "";//nombre para mostrar en el campo DE: $email_from = "";//tu@mail.com para el campo DE:
$subject = ""; //asunto del mail
$evento_descripcion = $evento_desc."\n\n"; //Descripción del evento
$meeting_location = ""; //Lugar donde se llevará a cabo el evento

//Convertimos la fecha de formato MYSQL (YYYY-MM-DD HH:MM:SS) a formato UTC (yyyymmddThhmmssZ)
$meetingstamp = strtotime($fecha_inicio . " UTC");
$meetingstampb = strtotime($fecha_fin . " UTC");
$dtstart= gmdate("Ymd\THis\Z",$meetingstamp);
$dtend= gmdate("Ymd\THis\Z",$meetingstampb);
$todaystamp = gmdate("Ymd\THis\Z");

//Creamos identificador único aleatorio para el mensaje
$cal_uid = date('Ymd').'T'.date('His')."-".rand()."ejemplo.com";

//Establecemos el formato del MIME
$mime_boundary = "----Meeting Booking----".md5(time());

//Creamos los headers del mail
$headers = "From: ".$nombre_from." <".$email_from.">\n";
$headers .= "Reply-To: ".$nombre_from." <".$email_from.">\n";
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-Type: multipart/alternative; boundary=\"$mime_boundary\"\n";
$headers .= "Content-class: urn:content-classes:calendarmessage\n";

//Creamos el cuerpo de texto del mail (HTML)
$message .= "--$mime_boundary\n";
$message .= "Content-Type: text/html; charset=UTF-8\n";
$message .= "Content-Transfer-Encoding: 8bit\n\n";
$message .= "<html>\n";
$message .= "<body>\n";
$message .= '<p>Hola '.$nombre_dest.',</p>';
$message .= "</body>\n";
$message .= "</html>\n";
$message .= "--$mime_boundary\n";

//Ahora armamos los datos en formato iCalendar
$ical = 'BEGIN:VCALENDAR
PRODID:-//Microsoft Corporation//Outlook 11.0 MIMEDIR//EN
VERSION:2.0
METHOD:PUBLISH
BEGIN:VEVENT
ORGANIZER:MAILTO:'.$email_from.'
DTSTART:'.$dtstart.'
DTEND:'.$dtend.'
LOCATION:'.$meeting_location.'
TRANSP:OPAQUE
SEQUENCE:0
UID:'.$cal_uid.'
DTSTAMP:'.$todaystamp.'
DESCRIPTION:'.$evento_descripcion.'
SUMMARY:'.$subject.'
PRIORITY:5
CLASS:PUBLIC
END:VEVENT
END:VCALENDAR';

//Agregamos al cuerpo del mensaje la iCal
$message .= 'Content-Type: text/calendar;name="meeting.ics";method=REQUEST\n';
$message .= "Content-Transfer-Encoding: 8bit\n\n";
$message .= $ical;

//Enviamos el mail y validamos si se envió o no
$mail_sent = @mail( $email, $subject, $message, $headers );

if($mail_sent) {
return true;
} else {
return false;
}
}
A partir de aquí sólo queda llamar a nuestra función pasandole los parametros necesarios: Nombre del destinatario, Apellido del destinatario, email del destinatario, fecha de inicio, titulo, fecha de finalización y descripción (en ese orden).

sendIcalEmail("","","","","","","");
Espero que te haya servido tanto como a mí.

Esto es todo: Si tuviste algún problema copiando el código, descargá acá el archivo .php.
-----------------------------------------------------------------------------------------------------
Nota: Si este artículo te pareció interesante, por favor, visitá los enlaces patrocinados donde seguramente encontrarás más cosas útiles.

PHP: Descargar convocatorias a outlook desde una web

2011-01-05T18:06:00.005-03:00

Buscando interacción entre páginas web y convocatorias a eventos de outlook, di con éste código.

Si en tu web pones un evento y te gustaría que la gente pudiera descargarlo en su MS Outlook, aquí dejo un código que funciona muy bien.

Ojo!: Este código descarga de la web un archivo .ics (calendario.ics) que, al ejecutarlo abre automáticamente la cita de outlook en formato "Convocatoria" (con los botones de Aceptar, Rechazar, Provisorio). En este otro post publiqué una función en php que genera un mail con la convocatoria y que probé sin problemas en Outlook y Gmail (calendar).

Pero volviendo a este código aquí va, sólo tenes que ponerlo dentro de un php, personalizarle los parametros de fecha de inicio, titulo y descripción y tus visitantes podrán guardarse la cita en su propio calendar para estar avisados del evento.

Acá va el código:

-----------------------------------------------------------------------------------------------------

Si querés descargar el código fuente acá te dejo un link para descargar el archivo .php

-----------------------------------------------------------------------------------------------------

header("Content-Type: text/Calendar"); //tipo de objeto
header("Content-Disposition: inline; filename=calendar.ics"); //datos del archivo .ics
//datos de la convocatoria en formato vcard
echo "BEGIN:VCALENDAR\n";
echo "VERSION:2.0\n";
echo "PRODID:-//El Pezojo!//elpezojo.blogspot.com//EN\n";
echo "METHOD:REQUEST\n"; // Dato que pide el outlook para el tipo de objeto
echo "BEGIN:VEVENT\n";
echo "UID:".date('Ymd').'T'.date('His')."-".rand()."-elpezojo.blogspot.com\n"; // Identificador único randómico, que utiliza Outlook
echo "DTSTAMP:".date('Ymd').'T'.date('His')."\n"; // No sé apra qué es, pero lo usa Outlook
echo "DTSTART:20080413T000000\n"; //Fecha de inicio del evento, en formato UTF
echo "SUMMARY:TEST\n";
echo "DESCRIPTION: elpezojo.blogspot.com\n"; //Descripción del evento
echo "END:VEVENT\n";
echo "END:VCALENDAR\n";
?>

Por ahora nada más. Si tenes problemas copiando este código, podes descargar acá el archivo .php
-----------------------------------------------------------------------------------------------------
Nota: Si este artículo te pareció interesante, por favor, visitá los enlaces patrocinados donde seguramente encontrarás más cosas útiles.

35 vectores gratuitos usables

2010-12-04T23:12:00.002-03:00

Vectorious.net es un sitio dedicado a la comercialización de imagenes vectoriales, que además ofrece tutoriales de illustrator, demostraciones de ilustradores y stocks temáticos.

Pero además tiene una breve pero impresionante colección de vectores gratuitos, completamente utilizables y realmente muy útiles.

A continuación te los muestro:
Ojo al piojo que al final estan los mejores

branch vector background - vintage floral frame

texture vector - abstract blue illustration

botanical vector art - abstract tree

floral vector background - Vintage poster

background vector art - Floral grungy illustration

vector - Summer floral

winter vector background - free christmas socks and candycranes

pine vector illustration - free christmas tree

bow vector background - free christmas greeting card

expression vector - free halloween background

free vector disco lights

background vector illustration - free music poster

illustration vector - Free colorful background

illustration vector - Free floral background

vector illustration - Free urban background

microphone vector illustration - concert poster

child vector background - kid with rainbow

floral vector background - skater

banner vector - abstract background

vector corner

decor vector clock

Free vector floral grungy illustration

tree vector illustration - Summer background

grungy vector illustration - Spring background

ornate vector art - green leaves with water drops

Free green vector summer illustration

abstract colorful background vector background

colorful floral illustration vector illustration

dirt vector vintage illustration with bonsai

elegant vector watercolor floral background

doodles illustration with colorful tree vector illustration

free vector colorful floral background

vintage invitation with floral vector background

56 Extensiones y Addons más requeridas para Google Chrome

2010-12-03T19:32:00.002-03:00

Google Chrome es un navegador web desarrollado por Google.
Es uno de los navegadores más utilizados por los diseñadores y desarrolladores web, que está creciendo rápidamente entre los usuarios de Firefox, Internet Explorer, Opera y Safari.
Hoy hemos recopilado las 56 extensiones más útiles y demandadas de Google Chrome. Con estas extensiones, puede añadir más características al navegador, que pueden ayudarle a hacer su trabajo más rápido y más fácil.

Google Share ButtonUtilice la extensión para compartir páginas web a través de sus redes sociales de correo electrónico y blogs.

Firebug Lite for Google ChromeFirebug Lite para Google Chrome, el apoyo del Grupo de Trabajo de Firebug.

Pixlr Grabber – Screen capture/image grabbingEditar, Guardar o comparte printscreens e imágenes.

Docs PDF/PowerPoint Viewer (by Google)Genera automáticamente vistas previas de archivos PDF, presentaciones de PowerPoint y otros documentos en Google Docs Viewer.

Web2PDFConverterConvierte cualquier página web a PDF incluyendo la mayoría de los sitios basados en SSL, utilizando http://www.Web2PdfConvert.com.

Speed DialMarcación rápida para Chrome - Chrome reemplazar la "pestaña nueva" con la vista de sus marcadores predefinidos.

Speed Tracer (by Google)Obtenga información sobre el rendimiento de sus aplicaciones web.

FastestChrome – Browse Faster
Ahorre tiempo y mejore su productividad!
Obtenga definiciones rápidas, las siguientes páginas de carga automática, búsquedas más rápidas y mucho más.

Validity by Ian Renyard
Haga clic en el icono en la barra de direcciones o presione Ctrl + Alt + V para validar la página actual.

Feedly
Feedly organiza sus fuentes favoritas en una página de inicio como si fueran revistas. Desarrollado por Google Reader y Twitter.

WOT
Web of Trust es una herramienta de navegación segura, que le advierte sobre los sitios riesgosos que engañan a los clientes, ofrecen malware o envian spam.

Ibrii
Recorte de imágenes, textos y vídeos de páginas web y comparta todo en Twitter, Facebook, Google Buzz y más.

Speed Tracer (by Google)
Obtenga información sobre el rendimiento de sus aplicaciones web.

Digg for Chrome
Vea lo que está siendo descubierto y compartido en Digg

Fast YouTube Search
Búsqueda rápida YouTube - Búsqueda en YouTube con un solo clic.

Chromed Bird
Es una extensión de Twitter que le permite seguir sus líneas de tiempo e interactuar con su cuenta de Twitter.

Webpage Screenshot
Rápida y simple solución para guardar, compartir, imprimir y editar screenshots de cualquier página web. Captura a PNG / JPG.

AniWeather
AniWeather = Tiempo y clima animados

Google Translate
Esta extención traduce páginas web enteras en un idioma de su elección con un solo clic. Por el equipo de Google Translate.

Proxy Switchy!
Administrar y cambiar entre múltiples proxies forma rápida y sencilla.

MeasureIt!
Dibuja una regla que le ayudará a obtener el ancho y alto (en pixels) de cualquier elemento en una página web.

AdThwart
Bloquea anuncios usando el motor Firefox AdBlock Plus.

1-ClickWeather for Chrome
Condiciones actuales del tiempo, mapas, y las perspectivas para las próximas 24 horas en un formato de exploración fácil de The Weather Channel.

Chromed Bird
Es una extensión de Twitter que le permite seguir sus líneas de tiempo e interactuar con su cuenta de Twitter.

Cooliris
Transforma tu navegador en un Wall 3d full-screeen para buscar, ver y compartir la web.

SmoothScroll
Desplazate por la web sin problemas con la rueda del ratón o el teclado .

Xmarks Bookmark and Password Sync
Copia de seguridad y sincronización de tus marcadores, contraseñas y las pestañas abiertas en todos los equipos y navegadores. Xmarks también está disponible para Firefox, Safari e IE.

TooManyTabs for Chrome
Gestiona tus pestañas, mejorar su navegación, y mantener la cordura cuando tienes muchas pestañas abiertas.

LastPass
LastPass es un gestor de contraseñas gratuito y rellenar formularios. También está disponible para Firefox, Internet Explorer y Safari.

FlashBlock
FlashBlock para Chrome.

RapidShare DownloadHelper
Descargas Automáticas. No más Countdowns!.

One Number
Compruebe Gmail, Google Reader, Google Voice, y Google Wave.Cuatro fuentes, todo en uno.

Facebook for Google Chrome
Extensión que le permite leer el feed de noticias de Facebook y wall. También puede publicar actualizaciones de estado.

Aviary Screen Capture
Tome una captura de pantalla de cualquier página web y editdirectamente en el navegador con aplicaciones Aviary.com.

Picnik Extension for Chrome
Capture páginas web y edite las imágenes directamente en su navegador con Picnik

RSS Subscription Extension (by Google)
Agrega un clic con el botón de suscripción a tu barra de herramientas.

Select To Get Maps
Seleccionar las direcciones en cualquier página web para obtener mapas de enlaces útiles.

Clip to Evernote
Utilizar la extensión de Evernote para guardar las cosas que ven en la web en tu cuenta de Evernote. Incluso te permite buscar a través de sus notas.

Bubble Translate
Traductor de tiempo real en línea desde cualquier idioma al tuyo.

Mini Google Maps
Google maps en un click.

Google Similar Pages beta (by Google)
Descubre páginas web similares a la página que estás navegando.

Session Manager
Session Manager le permite guardar las sesiones de las pestañas abiertas y ventanas, y rápidamente volver a abrir cuando quieras.

Web Developer
Agrega un botón en la barra de herramientas con diferentes herramientas para desarrolladores web.

Color Picker
Rapidamente obten los valores Hex o RGB de cualquier color! Tambien ajusta el Tono, Saturación y Balance.

jQuery Shell
Habilita comandos jQuery en el contexto de la página actual.

Lorem Ipsum Generator
Crea texto de relleno al azar.

Webpage Screenshot
Rápida y simple solución para guardar, compartir, imprimir y editar screenshots de cualquier página web. Captura a PNG / JPG.

Image Cropper
Te permite recortar imágenes en cualquier sitio web sobre la marcha.

Resolution Test
Una extensión para los desarrolladores para probar las páginas web en diferentes resoluciones de pantalla, con la opción de definir sus propias resoluciones.

Chrome Sniffer
Detectar aplicaciones web y las bibliotecas de ejecución de JavaScript en la página web que estas navegando.

WebEdit
Hacer cualquier página web editable, pero los cambios no son permanentes.

SEO Site Tools
En la página / métricas Exterior, Medios de Comunicación Social de Información, PR / numeración en Yahoo, MSN, Google SERPs.Extends WMT, YSE y la Asamblea General con las métricas.

IE Tab
Mostrar las páginas web usando IE en una pestaña.

PlainClothes
Quita estilo en la web.

Pendule
Herramientas web de desarrolladores de Chrome.

Eye Dropper
Eye Dropper for Google Chrome.

30 ilustraciones vectoriales para tablas de skate

2010-12-02T19:18:00.011-03:00

El formato vectorial es perfecto para el diseño debido a su escalabilidad. Un pequeño dibujo puede ser ampliado para fijarlo a un cartel, o una forma aún más inusual ... como una tabla de skate.
Los diseños de los skates suelen ser una declaración acerca de su propiatario.
En el sitio VectorTut+ realizaron una lista de 30 increibles diseños vector para skates y una breve reseña sobre los artístas detrás de las tablas.
Aquí va mi humilde traducción de este gran artículo para que sirva de consulta, referencia o inspiración:

Autor: Chris Spooner para http://vector.tutsplus.com

Emil Kozak
Este ilustrador español tiene una variedad de trabajos en su portfolio, estos ejemplos de sus diseños para decks de skateboard realizados para LAB Anatomi Series y The Flow Store muestran su gran habilidad en el uso de graficos vectorizados y formas.

Drez
Diseñador e ilustrador freelance. Sus diseños de decks cuentan con una excepcional colección de ilustraciones con texturas pesadas y una gran variedad de gráficos.

Andrew Graves
Andrew Groves de IMAKETHINGS trabaja en conjunto con Fundation Skateboards para crear una gran variedad de series de tablas de skate. Sus diseños a menudo cuentan con personajes ilustrados.

Nils Carlson
Con diseños generalmente realizados a mano que generan decks con trabajos muy detallados y grandiosos.

Arthur Smit
Un ilustrador ingles de Hermit Design con personajes de características únicas.

Juan Angel Dibuja
La obra de Juan Angel Dibuja incluye algunas ilustraciones brillantes, con una amplia gama de diseños de tabla de skate en su portfolio comercial es un maestro experimentado de la industria.

Bluecocoa
Diseñador, ilustrador y artista callejero, Bluecocoa tiene una gran cantidad de trabajos, incluso ilustraciones para moda y trabajos basados en obras de arte. Su arte para skateboards, en particular, incluye algunos diseños impresionantes.

David Carvalho
Artista y diseñador portugués. Lleva a cabo una variedad de trabajos de diseño con una identidad propia. Su trabajo ilustrativo para Yoda Skateboards es un ejemplo de su estilo intrincado e inspirador.

Luis B Boy
Tomó una serie de roles en su reciente comisión para la compañía True Skateboards con base en Madrid. No sólo el diseño de decks, sino también la creación de la página web y material promocional para la marca.

Mike Speero
Un diseñador sueco, con un estilo único y reconocible. Con un estilolúdico, sus ilustraciones cuentan con colores brillantes y criaturas peculiares.

Shane Cawthon
Produce una gama de diseños de amplio carácter, gráficos y diseños para decks, Con un enfoque en la tipografía, su trabajo tiene un diseño de marca visualmente impactante.

Kate McInnes
Este ilustrador australiano, comúnmente conocido como LoungeKat, tiene una colección impresionante de material de diseño vectorial. Con colores brillantes y sus diseños sensuales SUS ilustraciones de skate se desarrollan en estrecha relación con su peculiar estilo.

Massamiliano Panzironi and Sonia Di Rubbo
Diseñadores de DolceQ combinan su talento creativo con imágenes eróticas, flores y mariposas para crear una serie de obras de arte de videos musicales y juguetes de diseño para producir diseños vectoriales para skate.

Vault49
El estudio de diseño Valut49 no es ajeno a la producción de material de diseño impresionante para clientes de gama alta. En su gama de creaciones también se abrieron paso en los diseños de tablas de skate.

Mobu
incluye una colección de ilustraciones vectoriales de colores brillantes y divertidos con formas fluidas

Joel Glovier
presenta una colección de ilustraciones de vectores coloridos y detallados para JAG Boards.

Joshua Agerstrand
Tiene material hecho a mano de ilustraciones vectoriales nitidas y asperas extraídas de su propio portfolio. Incluído en su colección estan estos diseños de skate impresionantes.

Sean Tubridy
Sean Tubridy es un diseñador gráfico e ilustrador de Minneapolis. Junto a una colección de diseños de impresión, él ha producido trabajos de diseño de skates para su empresa anterior, BettyBoards, que vendió skates y remeras para mujeres skaters.

Brett Wilkinson
Con un amor por los colores brillantes, la tipografía a mano alzada y formas retorcidas, Brett Wilkinson ha creado una gama de diseños de decks para la empresa serbia de skates "Carrot Skateboards". Los diseños son que se lanzará en la próxima serie junto con varios diseños de ropa.

29 wallpapers navideños para iphone

2010-11-21T21:42:00.000-03:00

Cada año mucha gente en el mundo celebra la navidad durante el mes de diciembre. Por eso, ete mes estará dedicado a diseños, ilustraciones y recursos referidos a la navidad.

En internet hay un mundo de recursos gratuitos y bien desarrollados para usuarios y diseñadores.

Comencemos entonces con una lista de temas y motivos navideños para los usuarios de iphone que publicó hace un tiempo GraphicManía.

Descargalos y compartilo con tu familia y contactos. Y que disfrutes una feliz navidad!

Holiday Dog

Christmas Iphone wallpaper

Christmas Iphone wallpaper

Merry Christmas

Christmas Tree

Christmas Ball Ornament iPhone Wallpaper

Xmas Duck iPhone Wallpaper

Christmas Snowman iPhone Wallpaper

CHRISTMAS

Christmas Iphone wallpaper

CHRISTMAS

Christmas Wallpapers for your iPhone

CHRISTMAS

Christmas Iphone wallpaper

Santa Kitty

Christmas Iphone wallpaper

Christmas Tree Glow iPhone Wallpaper

Christmas Day iPhone Wallpaper

iPhone Christmas Wallpapers

Christmas Tree1

Moopf iPhone Wallpaper

Moopf iPhone Wallpaper 2

Polar Bears

Christmas Train

ActionScript 3: Cómo hacer un Calendario dinámico .fla

2010-10-06T18:30:00.008-03:00

Esta vez apareció la necesidad de usar gráficos en flash que utilicen fechas, y como nunca lo había utilizado, me puse a investigar. Después de todo si google todavía usa gráficos en flash para Analytics ¿por qué yo no iba a usarlo en mi humilde proyecto?¿no?

Así, las primeras pruebas exprimiendo las propiedades y metodos del objeto DATE dieron este calendario en actionscript3 desarrollado en muy pocas líneas.

El script que encontrarás a continuación es sólo una base para mostrar fechas, por eso es que utiliza una gráfica muy sencilla y su función puntual es: Dibujar el almanaque mensual, detectar años bisiestos (Febrero con 29 días), muestra el día actual, permite mostrar los meses y años siguientes y posteriores y, al pasar el mouse sobre un día, mostrará la fecha sobre la que estamos pasando.

Sin más preámbulos ni excusas aquí van los pasos para desarrollar este calendario en actionscript3 (de todos modos, al pie de este artículo te dejo el link para descargar el fla):

1- Para crear este calendario en ActionScript3 creamos un movieclip llamado "boton_btn" y otro llamado "dia_mc".

2- Dentro de "dia_mc" tenemos que crear un campo de texto dinámico llamado "numero_txt" con nombre de instancia "numero_txt".

3 - En el escenario ponemos 42 instancias de "dia_mc" (6 filas x 7 columnas) . Estas representarán las semanas del mes de domingo a lunes. Son 42 porque, dependiendo el día en el que empiece el mes y su cantidad de días, el mes tendrá 4, 5 o 6 semanas.

Los nombres de instancia de estos movieClip serán: "d0_mc", "d1_mc", "d2_mc",... "d42_mc".

4 - Además incluímos dos instancias de "boton_btn" con nombre de instancia "bSig_btn" y "bAnt_btn", un campo dinámico con nombre de instancia "mes_txt", otro llamado "diaHoy_txt" y un tercer campo de texto dinámico llamado "diaSel_txt"
Con los botones navegaremos por los meses y años posteriores y anteriores al actual. En los campos de texto irá el mes actual, la fecha de hoy y la fecha seleccionada cada vez que pasamos sobre un día del calendario.

5) Llegamos a la mejor parte: Escribí el codigo de aquí abajo en la línea de tiempo principal (cada bloque de código tiene un comentario para saber de qué se trata:

//BUSCO EL DÍA DE HOY
var hoy:Date = new Date(); //variable que contendrá todos los datos del día
var anio=hoy.fullYear; // año en formato YYYY
var mes=hoy.month; // mes en formato flash (de 0 a 11)
var dia=hoy.date; // día en formato flash (0 a 6)

//CARGO EL FORMULARIO
fCalendario(); //llamo a la función que arma el calendario

//FUNCION PARA EL CALENDARIO
function fCalendario():void {

//CARGO LOS NOMBRES DE LOS MESES EN UN ARRAY (el objeto Date cuenta los meses desde 0 hasta 11)
var meses:Array = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
var mesesDias:Array = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var diasemana:Array = new Array("Dom","Lun","Mar","Mie","Jue","Vie","Sab");

//BUSCO BISIESTOS PARA PONERLE 29 DÍAS A FEBRERO
if(anio%4==0 && anio%100!=0 || anio%400==0){ //esta es la formula para detectar bisiestos
mesesDias[1]=29;
}else{
mesesDias[1]=28;
}

//BUSCO EL PRIMER DÍA DEL MES.
var primerdiames:Date = new Date(anio,mes)

//ELIJO LA POSICIÓN EN EL CALENDARIO PARA EL PRIMER DÍA DEL MES.
var primerdia;
switch (primerdiames.day) {
case 0:
primerdia=0;
break;
case 1:
primerdia=1;
break;
case 2:
primerdia=2;
break;
case 3:
primerdia=3;
break;
case 4:
primerdia=4;
break;
case 5:
primerdia=5;
break;
case 6:
primerdia=6;
break;
}

//DIBUJO EL CALENDARIO
for(var i:uint=0;i
var vPos=primerdia+i;
var verDia = "d" + vPos;
root[verDia].alpha=1;
root[verDia].numero_txt.text=i+1;
root[verDia].numero_txt.background=0x990000;
if((i+1)==hoy.date && mes==hoy.month && anio==hoy.fullYear){
root[verDia].alpha=1;
root[verDia].numero_txt.backgroundColor=0xFF9900;
}
}

//MUESTRO EL MES VIGENTE
mes_txt.text = meses[mes] + " de " + anio;

//MUESTRO LA FECHA DE HOY EN EL CUADRO DE TEXTO
diaHoy_txt.text="día de hoy: "+ diasemana[hoy.day] + " " + dia + " de " + meses[hoy.month] + " de " + hoy.fullYear;
}

//BOTON ES PARA ADELANTAR - RETROCEDER
bSig_btn.addEventListener(MouseEvent.CLICK,fSigCalendario);
bAnt_btn.addEventListener(MouseEvent.CLICK,fAntCalendario);
function fSigCalendario(evt:MouseEvent){
for(var i=0;i<41;i++){
var bDia="d"+i;
root[bDia].alpha=0;
root[bDia].numero_txt.text="";
root[bDia].numero_txt.textColor=0x333333;
root[bDia].numero_txt.background=0x990000;
root[bDia].numero_txt.backgroundColor=0xFFFFFF;
}
if(mes==11){
mes=0;
anio=anio+1;
}else{
mes=mes+1;
}
fCalendario();
}
function fAntCalendario(evt:MouseEvent){
for(var i=0;i<41;i++){
var bDia="d"+i;
root[bDia].alpha=0;
root[bDia].numero_txt.text="";
root[bDia].numero_txt.textColor=0x333333;
root[bDia].numero_txt.background=0x990000;
root[bDia].numero_txt.backgroundColor=0xFFFFFF;
}
if(mes==0){
mes=11;
anio=anio-1;
}else{
mes=mes-1;
}
fCalendario();
}

//ACCIONES CUANDO SELECCIONO UN DÍA
for(var i=0;i<42;i++){
var toto="d" + i;
root[toto].addEventListener(MouseEvent.MOUSE_OVER,fTraceDia);
}
function fTraceDia(evt:MouseEvent){
var meses:Array = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
diaSel_txt.text=root[evt.currentTarget.name].numero_txt.text + " de " +meses[mes]+ " de " + anio;
}

Recordá que esto es sólo un ejemplo para ver como funciona el manejo de fechas en actionscript, todo es mejorable en función a tus necesidades.

Por eso te invito a descargar el .fla este ejemplo, mejorarlo y contarme tu experiencia. Suerte.
--------------------------------
Nota: Si este artículo te sirvió, por favor, visitá alguno de los enlaces patrocinados, seguro que ellos tendrán también un montón de cosas útiles.http://www.easy-share.com/1912546245/calendario.rar

25 juegos que demuestran el poder del HTML5 CANVAS

2010-09-25T17:05:00.001-03:00

Uno de los propósitos del nuevo HTML5 es reducir la necesidad de plug-ins propietarios para desarrollar aplicaciones RIA (¿democratización de las aplicaciones de internet?) olvidando la dependencia de tecnologías como Adobe Flash, o los intentos por alcanzarlo: Microsoft Silverlight, JavaFX y dom.

Para mostrar el poder del elemento CANVAS de HTML5, Technology to Software pone a disposición una lista de 25 juegos desarrollados integramente con JavaScript y el famoso CANVAS.

1. 3Bored

2. 3D Tetris – Cubeout

3. A first person shooter

4. A torus style game

25. Spectrum Emulator

50 Themes Portfolio para WordPress Gratuitos y de bajo costo

2010-09-24T18:00:00.001-03:00

Una lista de 50 Themes para Portfolio en Wordpress. Esta lista está formada por Themes Gratuitos y Premium, pero es destacable que todos ellos estan muy bien desarrollados y cuentan con un montón de características especiales.

Este artículo es la trducción de otro publicado en CSS Reflex.

1. Portfolio Press (Gratis)

Portfolio Press es un nuevo theme portolio desarrollado en html5. Utiliza tipos de post personalizados para paginas de portfolio y aprovecha la ventana de los nuevos menús de navegación y además cuenta con un montón de caracteristicas interesantes.
Demo | Página oficial

2. Dioxide WordPress ($32)

Dioxide es un nuevo tema para WordPress con un gran balance entre diseño y funcionalidad.
Demo | Página Oficial

3. BlueBubble (Gratis)

BlueBubble es un theme libre, limpio y simple Portafolio Premium de WordPress para diseñadores, fotógrafos o cualquier otras mentes creativas. Está diseñado para facilitar la exhibición de su trabajo y viene con algunas características recomendables.

Demo | Página Oficial

4. Geronimo – One page portfolio theme ($32)

Geronimo es un theme de una página construído especialmente para la versión 3++. La "clave" de este theme es el menú personalizado, una nueva característica de Wordpress 3.

Demo | Página Oficial

5. WPFolio (Grátis)

WPFolio es un tema libre y de código abierto para WordPress, diseñado por artistas específicamente para artistas visuales. Artistas visuales con un rango de experiencia de "nada" hasta "mucha".

Demo | Página Oficial

6. Simply Crafted – WordPress 3.0 ($32)

Simply Crafted ofrece una completa experiencia con WordPress. El theme ofrece lo último en wordpress 3 incluyendo tipos de posts personalizados para los elementos del portfolio, las posiciones de menú, testimonios, noticias de última hora, el formulario de contacto incorporado ajax, filtro de portfolio en jQuery.
Demo | Página Oficial

7. Darkwood (Grátis)

Un portfolio oscuro y elegante..
Demo | Página Oficial

8. Mactastic WordPress Theme ($37)

Mactastic fue diseñado para la persona que quiere mostrar fácilmente su trabajo de diseño al mundo. Un CMS, Portfolio y blog todo en uno.
Demo | Página Oficial

9. Brave Zeenat (Gratis)

Una Theme limpio, ideal para que fotógrafos, artistas y diseñadores puedan mostrar sus portfolios. Para este tema, los autores, advierten que es necesario un nivel intermedio de conocimiento de WordPress.
Demo | Página Oficial

10. Perception ($37)

Perception es un Theme Premium de WordPress con un diseño profesional y poderosas características de administración.
Demo | Página Oficial

11. Vostok (Grátis)

Vostok es para aquellos que no quieren que la atención se desvíe del contenido. Los colores y la tipografía han sido cuidadosamente elegidos para lograr la máxima legibilidad con míninma fatiga visual. Además, el código se ha escrito con extremo cuidado para estándares web y accesibilidad.
Demo | Página Oficial

12. Studio960 WordPress ($37)

Este sitio está basado en 960 Grid construido desde cero para ser potente, personalizable y extremadamente flexible.
Demo | Página Oficial

13. Cumulus (Grátis)

Demo | Página Oficial

14. Joorang – Portfolio & Blog WordPress Theme ($37)

Es un Theme que combina tu portfolio y blog. Cuenta con una gran cantidad de características únicas y viene con herramientas de administración masiva para administrar su sitio.
Demo | Página Oficial

15. Sharpfolio (Grátis)

Sharpfolio es un tema para WordPress diseñado para permitir a los diseñadores web, diseñadores gráficos, fotógrafos, artistas o profesionales creativos para mostrar su trabajo de una forma sencilla.
Demo | Página Oficial

16. Great Portfolio ($32)

Great Portfolio es un portfolio de una página y un tema para WordPress muy limpio. También incluye un blog lleno funcionalidad. Este tema es perfecto para cualquiera que quiera poner en marcha un sitio de forma inmediata.
Demo | Página Oficial

17. Fhi-zin (Gratis)

hi-zin es uno de los mejores Themes de Portfolio para WordPress y sitios web de fotografía. Con su diseño único que ni siquiera parece un sitio web de WordPress! Además de eso, completamente accionado por un motor AJAX, es Googlefriendly, SEO optimizado y capaz de unir una cantidad ilimitada de imágenes en cada post.
Demo | Página Oficial

18. Maxi ($37)

Maxi es un poderoso theme. Con 11 variaciones de estilo y 3 estilos de páginas para portfolio y muchisimos widgets.
Demo | Página Oficial

19. Vivee Portfolio (Grátis)

Un portfolio negro y elegante
Demo | Página Oficial

20. Barbara – Blog/Portfolio ($32)

Barbara es un blog/portfolio limpio que contiene todas las necesidades de un blogger, diseñador o cualquier sitio de empresa con customizaciones simples contstruídas dentro del theme.
Demo | Página Oficial

21. Base (Gratis)

Se llama "Base", porque eso es realmente lo que es, una de las bases para su cartera, así como una base de código que puedes personalizar a tu gusto.
Demo | Página Oficial

22. Loarse WordPress ($27)

Loarse es un theme preparado para portfolios personales, blogs y negocios. Loarse fue destacado como uno de los ganadores de la reciente WordPress + PSDTuts / ThemeForest
Demo | Página Oficial

23. Simplefolio (Grátis)

SimpleFolio es un theme de portfolio que incluye un blog y opciones de página muy amplias que te permite excluir todos sus artículos de portfolio de la página del blog. También incluye un regulador de primera plana.
Demo | Página Oficial

24. Cream Folio ($27)

Cream Folio está dirigido a diseñadores que además quieren un blog. Tiene un diseño elegante y ligero que se centra en su contenido y proporciona al usuario una visión de su trabajo a través del uso de un menú deslisable desarrollado con jQuery en la parte superior de la página principal.
Demo | Página Oficial

25. Satoshi (Gratis)

Satoshi es ideal para portfolios y te permite fácilmente presentar tus mejores trabajos a la audiencia on line.
Demo | Página Oficial

26. Meezio ($32)

Meezio Utiliza la librería jQuery y se desplaza en horizontal, vertical o ambas cosas. El contenido está desarrollado con el sistema 960 Grid y es fácil de personalizar.
Demo | Página Oficial

27. Smashing Multimedia (Grátis)

Smashing Multimedia fue diseñado especialmente para podcasters, fotógrafos y usuarios, quienes ahora pueden integrar fácilmente vídeos e imágenes, valorarlos y mostrarlos en su propio blog basado en WordPress. Tiene un tema principal y un tema adicional fácilmente personalizable.
Demo | Página Oficial

28. Bloing ($27)

Desarrollado teniendo en mente a los diseñadores (individuales o agencias). Bloing puede ayudarte a construír tu presencia on line rápidamente.
Demo | Página Oficial

29. Desk Space (Grátis)

Viene con un sólido conjunto de características y construido en plugins, incluyendo la capacidad para cambiar el color de fondo de madera acabado a más te guste.
Demo | Página Oficial

30. Flixelar ($27)

Flxelar Incluye:

4 colores diferentes para elegir (violeta, negro, azul, verde), 2 columnas (CSS), Panel de Administración customizabla para seteos, barra lateral, Widgets, etc.
Demo | Página Oficial

31. Climex (Gratis)

CLIMEX es un tema de wordpress libre gris-verde con características premium tales como animación galería, miniatura de posts, fotos de Flickr, últimos tweets, marcadores sociales, los mensajes populares y mucho más.
Demo | Página Oficial

32. WP Portfolius v.9 ($32)

Demo | Página Oficial

33. Portfolio WordPress Theme (Gratis)

“Portfolio WordPress Theme”
es un tema de wordpress diseñado (por ahora) sólo para portfolios web. Viene con un panel de administración desde donde se puede editar el texto del encabezado, se pueden editar todos los colores del tema, las familias de fuentes, tamaños de fuente y se puede rellenar un curriculum vitae y mostrarlo en una página especial.
Demo | Página Oficial

34. uFlexfolio – Portfolio Themes ($27)

Demo | Página Oficial

35. Grace (Gratis)

Grace es un theme minimalista para fotógrafos.
Demo | Página Oficial

36. Pressfolio ($22)

Pressfolio es un theme que puede ser utilizado para blogs y portfolio. Es altamente personalizable y con muchas opciones de customización.
Demo | Página Oficial

37. The Unstandard (Gratis)

El Unstandard es un tema de dos o tres columnas compatible con wordpress 2.6+. La home y el índice de archivos utiliza fotos en lugar de texto. La última actualización está completamente optimizada y despojada de cualquier código innecesario lo que permite una personalización completa.
Demo | Página Oficial

38. EASYFOLIO ($27)

EASYFOLIO es un theme simple pero muy flexible para portfolios y páginas personales. El tema trae 5 estilos diferentes: Madera, Piedra Negra, Cielo azul, Circulos y Naranja.
Demo | Página Oficial

39. Fotofolio (Gratis)

Fotofolio es un theme gratuito diseñado apra crear facilmente portfolios on line para desarrolladores visuales, fotógrafos, diseñadores gráficos, manga, arquitectos, etc. Es muy simple y facil de usar.
Demo | Página Oficial

40. SilverSlide ($27)

SilverSlide es un theme moderno y elegante orientado a portfolios personales dirigido a diseñadores, fotógrafos, músicos, etc.
Demo | Página Oficial

41. Selecta (Gratis)

Bordes redondeados y margenes gruesos, orientado a blogs donde los videos tienen una atención especial.
Demo | Página Oficial

42. WP Summerlin ($27)

WP Summerlin Premium es un diseño limpio y atractivo que se puede utilizar para una variedad de industrias. Es muy fácil de personalizar, viene en ocho colores diferentes, con un montón de características:
Demo | Página Oficial

43. WPESP (Gratis)

Portfolio – WPESP es un theme minimalista basado en un portfolio creado por DAILYWP. El theme es el punto de partida para la creación de portfolios usando WordPress como CMS.
Demo | Página Oficial

44. Foliotastic ($37)

Un theme con más de 25 opciones y seteos personalizables, incluyendo cambios de color, drag & drop slider setup y 2 estilos (blog y portfolio).
Demo | Página Oficial

45. wpFolio (Gratis)

Un portfolio con montones de características.
Demo | Página Oficial

46. FOLIO ($22)

Este theme fué pensado para todo tipo de portfolios.
Demo | Página Oficial

47. CreativePress (Gratis)

Un theme premium que combina funcionalidades de Portfolio, CMS y Blog.
Demo | Página Oficial

48. Sketchbook ($32)

Demo | Página Oficial

49. ViewPort (Gratis)

Viewport, es un tema gratuito creado por Paul Bennet enfocado a la claridad y simpleza. El objetivo es captar la atención del usuario y enfocarlo directamente en el contenido.
Demo | Página Oficial

50. Archeronne ($32)

Un ideal para bloggers y para quienes deseen mostrar su portfolio. Es un diseño minimalista con un toque moderno agradable que viene con 5 colores diferentes y la capacidad de crear fácilmente sus colores propios.
Demo | Página Oficial

Tabla Periódica de los elementos (html5)

2010-09-23T23:00:00.004-03:00

El diseñador australiano Josh Duck desarrolló una minireferencia a los 104 elementos que están siendo tratados en el borrador de HTML5 y otros dos elementos propuestos.

Lo curioso es que este tipo los presentó como si fueran la clásica Tabla Periódica de los Elementos....

Pero no sólo es simpático este desarrollo. Por un lado, al hacer clic sobre cada uno de los elementos nos dice para qué sirve esa etiqueta.

Por otro lado tiene una analizador de páginas web donde, al ingresar cualquier url, lee el sitio y te muestra que estiquetas está usando.

Podés visitarla visitando este link

Los mejores sites en CSS

2010-09-20T20:57:00.000-03:00

The CSS Awards es una gran galería de los mejores sitios desarrollados con CSS.

Tal como el fwa.com fué (y es) un sitio de consulta y paseo de todos los desarrolladores flash que desean ver en qué anda la tendencia. En the css awords se dedican a recopilar y votar los mejores sitios desarrollados en CSS.

El ranking tiene cierta seriedad porque cuenta con un jurado internacional formado por bloggers, agencias y diseñadores de reconocido prestigio, que valoran los sitios web.

Pero la verdad es que lo mejor es visitarlo y ver qué es lo que se está haciendo en el mundo del CSS. Pero además cuenta con un blog en el que publican notas a los desarrolladores donde podemos aprender sobre sus técnicas y filosofías de desarrollo.

En un blog llamado Prime Crunch encontré un parrafo que define muy bien lo que se siente visitando este sitio:

Es todo muy transparente desde los criterios usados que son diseño, creatividad, usabilidad y contenido, hasta el microsite del jurado. La web permite visualizar las notas otorgadas por los miembros del jurado, además de que los usuarios realizar su valoración, escogiéndose un sitio del día.

Es un gran sitio para cuando estas pasando una crisis de creatividad, mejorando tus diseños con css3, html5, ahondar en la web 2.0 o simplemente conocer como vienen las tendencias

Adobe se apura para no quedarse afuera: html5 pack para illustrator cs5 gratuito

2010-09-19T17:41:00.000-03:00

Parece que la gente de Adobe, aunque continúe apostando a flash, tras las proféticas declaraciones de Steve Jobs no quiere quedarse afuera ante el inminente desembarco de HTML5, el caballo de troya que amenaza la vida útil de flash para el desarrollo web.

Por eso, acaba de lanzar el "HTML5 Pack para Illustrator CS5".
Se trata de un complemento que ofrece soporte HTML5 y CSS3 para illustrator y que además facilita la integración de Illustrator CS5 y Dreamweaver CS5.

Parece además que el susto es grande, pues el pack es gratuito y puede descargarse desde el sitio labs de adobe:

Algunos beneficios que promete este pack de expansión son:

A los diseñadores les da más productividad ya que permite que Illustrator exporte los diseños a diferentes tamaños de pantalla usando SVG y CSS3
Permite crear Widgets web mediante la generación de gráficos vectoriales dinámicos para flujos de trabajo web que se basan en datos.
Toma ventaja de las últimas mejoras a SVG y Canvas para generar contenido web interactivo.
Permite hacer un mapeo de atributos desde herramientas para diseñadores a herramientas para desarrolladores, con la función exportar Illustrator’s Character Styles & Appeareance Panels to CSS3.

Habrá que probaro entonces. Mientras tanto acá va un tutorial de Adobe TV:

CSS3: Solucion para Internet Explorer (Encaminando a un monstruo necio y osboleto)

2010-08-24T19:32:00.002-03:00

Microsoft continúa (y continuará) con su politica despreciable de no adaptarse a los estandares cuando les conviene y dejar varado tu navegador en versiones obsoletas de su navegador.

Afortunadamente hay desarrolladores que tratan (a veces con buenos resultados) de sobreponerse a este elefante muerto de microsoft con herramientas efectivas, gratuitas y faciles de implementar.

En CSS3PIE desarrollaron un archivo .htc que, al agregarlo en tu página web conseguiras que los "casi standares" de css3 se apliquen en todas las versiones de explorer (al menos IE6, IE7 e IE8).

Los archivos .htc son componentes para que internet explorer sanee los problemas que tiene con html dinámico.

PIE.htc puntualmente es un conjunto de scripts que convierten las expresiones de CSS3 de tu página a VML (Vector Markup Language): Un lenguage para dibujar vectores, bastante pedorro, desarollado por y para IE.

A continuación te muestro como utilizar este componente

Supongamos que querés redondear los bordes superiores de un DIV.

Entonces crearás un estilo como éste:

#divID{

-moz-border-radius:0 10px 0 0; /*Firefox*/ -webkit-border:0 10px 0 0 ; /*Safari - Chrome*/ border-radius:0 10px 0 0; /*Generico + IE con PIE*/

}

Vamos a convertir este estilo en compatible para IE6, IE7 e IE8:

1) Primero debes descargarte la última versión del componente PIE.htc.

2) El .zip que te descargues tiene 3 archivos: "PIE.htc", "PIE.php" y "PIE_uncompressed.htc". Poné el archivo "PIE.htc" en el directorio raíz de tu página web (o en cada directorio donde vayas a utilizar estilos css3).

3) Agregá la siguiente línea a tu estilo CSS:

#divID{

-moz-border-radius:10px 10px 0 0; /* Para firefox */

-webkit-border:10px 10px 0 0 ; /* Para Safari - Chrome */

border-radius:10px 10px 0 0; /* Este es el standard */

behavior: url(PIE.htc); /*comportamiento para IE*/
}

4) Refrescá tu navegador y disfrutá de ver una solución en tu inoperante y mezquino Internet Explorer.

No sólo podes redondear los bordes, también soporta Sombreados (box-shadow) y muchas otras funcionalidades CSS3

La verdad es que no tengo ningún interes en particular con la gente de CSS3PIE. Pero probé otras opciones (siempre en componentes .htc) y ninguno se comportó tan bien como éste. Además dá la impresión de que este archivo se va actualizando con regularidad.

------------

Nota: Si este artículo te sirvió te invito a pasar por los enlaces patrocinados que, seguramente, tendrán un montón más de información útil para vos.

Saludos!

23 Recursos esenciales para entender HTML5

2010-08-21T00:05:00.003-03:00

El desembarco del HTML 5 es inminente, y en él no sólo se espera una lluvia de aplicaciones nuevas sino también toda una nueva metodología y entornos de desarrollo.

El siguiente artículo es una traducción del artículo publicado por Ryan Carson en su blog de desarrollo web ThinkVitamin.:

Todo el mundo está entusiasmado con las posibilidades que brinda HTML 5, pero hay mucho material para absorber y aprenderlo bien. Con esto en mente, hemos compilado una lista de artículos para que puedas empezar.

Yes, You Can Use HTML 5 Today! – Para comenzar con una gran vision general de HTML 5
Wikipedia: HTML 5 – Una descripción básica en Wikipedia.
HTML 5 Cheat Sheet – Una gran guía rápida sobre HTML 5 en .pdf para imprimir.
HTML 5 Demos – Un gran conjunto de demos. Solo visita el código fuente para ver como funcionan.
HTML 5 Drag and Drop + Microformats = a whole world of possibilities – Un ejemplo de como hacer "Drag and Drop" en HTML 5.
HTML 5 Gallery – Mira lo que es posible con HTML 5
HTML 5 Forms Demo – Una demostración contundente sobre como trabajan los formularios en HTML 5.
HTML 5 Doctor – 5 Recursos generales sobre HTML 5.
Headers in HTM 5 – Un buen artículo de "HTML 5 Doctor" sobre el elemento Header.
Video elements – Un artículo útil de "HTML 5 Doctor" sobre el elemento video.
Designing a blog with html5 – Un tutorial sobre cómo construír un blog en HTML 5.
How to get HTML5 working in IE and Firefox 2 – Otro gran artículo de "HTML 5 Doctor".
HTML 5 – Draft Standard – La especificación general, en todo su "terrorifico" detalle técnico.
Semantics in HTML 5 – An opinion piece from "A List Apart".
Thinking About HTML 5 canvas Accessibility – Algunas reflexiones rápidas sobre los problemas de accesibilidad con el elemento Canvas.
HTML 5: nav ambiguity resolved – Un post de Zeldman Sobre el elemento Nav de HTML 5.
A Selection of Supported Features in HTML5 – Una gran lista de "Molly" sobre las características de HTML 5 que son compatibles con los navegadores.
The WHATWG Blog – La Web Hypertext Application Technology Working Group – la gente que trabaja en la especificación de HTML 5.
HTML 5 canvas – Un profundo tutorial sobre cómo travaja el elemento Canvas en HTML 5.
Native Drag and Drop – Una demo sobre cómo funciona la funcionalidad Drag-n-Drop.
Bespin – Un experimento de Mozilla Labs sobre cómo construir un editor Web extensible utilizando la tecnología del código HTML 5.
When can I use… – Tablas de compatibilidad de funciones en HTML5, CSS3, SVG y próximas tecnologías Web.
Comparison of layout engines (HTML 5) – Una buena referencia en Wikipedia.

Hasta aquí el artículo de ThinkVitamin. Se vienen cambios importantes en el mundo del desarrollo web y siempre conviene ir preparandose.

Colecciones de Iconos de Redes Sociales Vectorizadas y gratuitas

2010-08-20T18:35:00.002-03:00

Una de las colecciones
cuenta con 126 iconos
vectorizados

La gente de Tutoriales y Photoshop ha recolectado una gran cantidad y variedad de colecciones de íconos de redes sociales vectorizados.

En estas galerías de íconos encontrarás vectorizados los íconos de las redes sociales más conocidas, como Twitter, Bebo, Facebook, Youtube, Flickr. Pero ademas contarás con iconos gratis de Reddit, Google, Google Buzz, RSS, Skype, Paypal, Pandora, orkut entre otras.

Cada galería de iconos cuenta con su propia estética (formas, tamaños, colores) y , por tratarse de vectores podrán ser reescalados al tamaño que desees sin perder calidad en el dibujo.

Podés acceder directamente al link de las galerías haciendo click aquí.

Tinymce + ajaxfilemanager : Campos de texto enriquecidos para web

2010-08-13T17:55:00.003-03:00

Tinymce es el editor de texto enriquecido WYSIWYG que utiliza Wordpress para crear y editar artículos así como para escribir comentarios.

Este completo pero fácil de instalar editor esta desarrollado en javascript y lo que hace es, básicamente, convertir cualquier TextArea de un formulario en un completo editor html.

Lo mejor de este editor es:

Es OpenSource y podemos descargarlo gratuitamente desde la página de sus desarrolladores.
Se instala fácilmente: Sólo tenés que copiar los archivos dentro de tu web y cargar el javascript en el de la página en la que estará tu formulario.
(En un post futuro explicaré como configurarlo para que funcione ok)
Soporte multilenguaje. Sólo tienes que descargar el Language Pack de tu idioma favorito, descargarlo y avisarle a Tinymce que vas a utilizar ese idioma.

Lo que no está tan bueno:

Uno de los principales inconvenientes (pero solucionable) es que por default sólo te permite linkear imágenes de la web ya que los propios desarrolladores te venden el upgrade para administrar archivos.
Solución: De todos modos hay una gran oferta de complementos, también OpenSource que pueden descargarse gratuitamente y que se integran (con algún trabajo extra) perfectamente a Tinymce.
Yo elegí la aplicación Tinymce Ajax File Manager que funciona sin problemas para subir y administrar archivos (imágenes, sonido, flash, docs, etc).
En un próximo post explicaré como configurarlo básicamente.
Hasta ahora he encontrado que se lleva un poco mal con el navegador Chrome a la hora de actualizar las páginas. Pero probablemente el problema lo tenga yo en el modo en que lo estoy implementando.

En síntesis, si bien no es el único editor WYSIWYG, me ha resultado muy facil trabajar con él y salir andando en desarrollos propios. Y aunque haya algunos detractores de los editores enriquecidos, si lo usa wordpress…

Logo vectorizado: Le Tour de France

2010-07-19T19:15:00.007-03:00

Otra vez vectorizando logos... parace que se me vá a hacer costumbre. De todos modos es divertido y acá te lo dejo para descargar.

Esta vez le tocó el turno al Tour de France, la competencia de ciclismo que año a año se propone recorrer la geografía francesa durante tres semanas de Julio.

Está basado en el logo oficial de los organizadores.

El logo fué vectorizado en flash cs3 y el archivo .fla incluye:

- Lineas
- Shape (letras negras con circulo amarillo)
- Shape (letras negras con circulo blanco)
- Shape (letras blancas con circulo amarillo
- Shape (fondos negro, amarillo y blanco)
Esta vez no dejé el bitmap original pero ¡vamos que no es tan dificil encontrarlo en google!

Cuidados con Illustrator:

En este caso no hay degradados así que no debería acarrear mayores inconvenientes. Por las dudas que al pasarlo a Illustrator el tono del amarillo no dé, el color en hexadecimal es #FBAD28.

Acá dejo el link de descarga en Easy Share (1.05mb):

- DESCARGAR ARCHIVO

Logo vectorizado: South Africa 2010 - FIFA World Cup

2010-06-16T14:14:00.009-03:00

Estuve preparando un banner para el trabajo y para eso tuve que vectorizar el logo dle mundial de la fifa.

Acá te dejo el logo del mundial 2010 vectorizado. Basado en el afhice oficial del South Africa 2010 - FIFA World Cup.

El logo fué vectorizado en flash cs3 y el archivo .fla incluye:
-Shapes
-Lineas
-Shapes + líneas
-Bitmap original

La tipografía del logo "south africa 2010" fué realizada por kaiser zhar khan. La tipografía es gratuita y podes descargarla en forma gratuita desde su blog "True Fonts".

Cuidados con Illustrator:

Los degradados entre Flash e Illustrator no son del todo compatibles, con lo cual puede suceder que, al exportarlo a illustrator los colores resulten un poco más opacos. Cuando lo abras desde illustrator hacelo en modo RGB.

Acá dejo el link de descarga en Easy Share (5.32mb):

DESCARGAR ARCHIVO
DESCARGAR LA FUENTE "SOUTH AFRICA 2010"

ActionScript 3: Clase para juego Simon

2010-06-15T10:24:00.011-03:00

Hoy te traigo un jueguito muy simple pero que tiene algunas cosas interesante para analizar como listeners para teclado y mouse, setInterval() y otras yerbas que irán apareciendo en el script.

El jueguito cuenta con un variador de dificultad (3 niveles de velocidad) y, como buen simon va incrementando la cantidad de fichas en la secuencia mientras apretas bien los botones o se bloquea si fallas.

Ahora sí... vamos a ver el desarrollo:
1) Abrí una nueva película flash
2) Crea cuatro MovieClips llamados "b0","b1","b2","b3" y ponelos en el escenario con el nombre de instancia igual al del movieclip (en realidad lo que nos importa es el nombre de instancia, no el del MovieClip.
3) Crea un nuevo MovieClip llamado "bInicio" y poné 2 instancias en el escenario. La primera con el nombre de instancia "bInicio" y el segundo con nombre de instancia "dificultad_btn".
4) Coloca en la biblioteca cuatro archivos de sonido mp3 y desde la biblioteca vínculalos con los nombres "sSound0" , "sSound1", "sSound2" y "sSound3".
5) En la película, en el campo Clase del Documento ponle "Simon" que es el nombre de la clase que desarrollaremos a continuación.

Ahora sí. Abrimos un nuevo documento de actionscript3, lo guardamos con el nombre "Simon.as" y escribimos el siguiente código que trataré de explicar en líneas comentadas:

package{
import flash.display.*; //importo todos los displays
import flash.events.*;
import flash.filters.*;
import flash.utils.*;
import flash.text.*;
import flash.media.Sound;

//CLASE
public class Simon extends MovieClip{
   var aSecuencia:Array = new Array(); // Guardará la secuencia que deberemos seguir
   var pos:uint = 0; // Guardará el botón que debemos presionar
   var posSecuencia:uint = 0; //se utilizará cuando se muestre la secuencia que luego debemos repetir
   var intervalId:Number; //espacio de tiempo
   var intervalIdB:Number; //espacio de tiempo
   var intervalIdC:Number; //espacio de tiempo
   var intervalSec:Number; //espacio de tiempo
   var intervalSecc:Number; //espacio de tiempo
   var dificultad:uint=0; //guardará el nivel de dificultad seleccionado
   var difA:uint; //guardará el tiempo que tardará la maquina para mostrar cada botón de la secuencia
   var difB:uint; //guardará el tiempo que durará iluminado cada botón cuando se muestre la secuencia
   var vTemp:uint; //guardará el tiempo para apretar las teclas según el nivel
   var aDifA:Array = new Array(600,300,150) //valores en ms para difA
   var aDifB:Array = new Array(400,200,100) //valores en ms para difB
   var bSelect:String; //será el botón que nosotros apretemos y que se comparará con la secuencia
   var timer:Timer = new Timer (1000,3);
   var sS0:Sound = new sSound0();
   var sS1:Sound = new sSound1();
   var sS2:Sound = new sSound2();
   var sS3:Sound = new sSound3();
   var sP:uint=0;

//CONSTRUCTOR
public function Simon(){
fDificultad(); //habilito el botón para seleccionar la dificultad
fBotonInicio(); //habilito el botón para iniciar el juego
timer.addEventListener(TimerEvent.TIMER, tSegundos);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, fTimerComplete);
}

//TIMER
function tSegundos(event:TimerEvent):void{
trace ("Ha pasado un segundo");
}
function fTimerComplete(event:TimerEvent):void{
trace ("Han pasado 5 segundos");
fPerder();
}

//SELECCIONAR DIFICULTAD
function fDificultad():void{
dificultad_btn.buttonMode = true; //habilito el button mode para luego mostrar la manito
dificultad_btn.useHandCursor = true; //muestra la manito cuando estoy sobre un botón
dificultad_btn.addEventListener(MouseEvent.CLICK,fSelDificultad); //Cuando hago clic voy a seleccionar la dificultad
}
function fSelDificultad(evt:MouseEvent){ //que pasara al cambiar las opciones
if(dificultad<3){ /* si el nivel de dificultad es menos de tres */
dificultad++; /* cada vez que lo presione aumentará un nivel. */
}else{ /* Si el nivel ya estaba en 3 */
dificultad=1; /* el nivel de dif. vuelve a 1. */
}
switch (dificultad) {
case 1:
difA = aDifA[0];
difB = aDifB[0];
timer.repeatCount = 3;
dific_txt.text = "FACIL";
break;
case 2:
difA = aDifA[1];
difB = aDifB[1];
timer.repeatCount = 2;
dific_txt.text = "MEDIO";
break;
case 3:
difA = aDifA[2];
difB = aDifB[2];
timer.repeatCount = 1;
dific_txt.text = "AVANZADO";
break;
}
}

//COMENZAR LA PARTIDA
function fBotonInicio():void{
this.bInicio.buttonMode = true;
this.bInicio.useHandCursor = true;
this.bInicio.addEventListener(MouseEvent.CLICK,fInicio);
}

//PRIMER TIRO CUANDO APRETAMOS EL BOTON DE INICIO.
function fInicio(evt:MouseEvent){
if(dificultad>0){ //Si hemos seleccionado un grado de dificultad
intervalId=setInterval(fAgregar,500); //comienza a jugar agregando el primer botón a la secuencia
this.bInicio.removeEventListener(MouseEvent.CLICK,fInicio); //freno el botón de inicio
this.bInicio.buttonMode = false;
dificultad_btn.removeEventListener(MouseEvent.CLICK,fSelDificultad);
dificultad_btn.buttonMode = false;
}else{ //si no había seleccionado una dificultad
}
}

//AGREGAMOS UN VALOR A LA SECUENCIA (DESPUES DE INICIO SE HACE EN FORMA AUTOMÁTICA)
function fAgregar():void{
timer.reset();
if(intervalId){ //si hay un intervalo de tiempo
clearInterval(intervalId); //lo borro
}
nivel_txt.text = "NIVEL " + (aSecuencia.length + 1); //escribo el nivel del juego (cantidad de repeticiones)
var agregar:String = "b" + Math.floor(Math.random() * 4); //asigno un botón a la secuencia
aSecuencia.push(agregar); //lo asigno a continuación dentro del Array
fIluminar();
}

//MOSTRAR LA SECUENCIA EN LOS BOTONES
function fIluminar():void{
clearInterval(intervalSecc);
if (posSecuencia<aSecuencia.length){
root[aSecuencia[posSecuencia]].gotoAndStop(2);
this["sS" + aSecuencia[posSecuencia].substring(1)].play();
posSecuencia++;
intervalSec= setInterval(fApagar,difA);
}else{
clearInterval(intervalSec);
posSecuencia=0;
fBotonera();
fTeclado();
timer.start();
}
}

//APAGA TODAS LAS LUCES (tuve que hacerlo para llegar a apagar las luces antes de que comience la nueva serie (cuando se repite una tecla)
function fApagar():void{
clearInterval(intervalSec); //borro el intervalo de tiempo creado (sino se repite)
for (var i:uint=0;i<4;i++){ //busco los 4 botones del juego
root["b" + i].gotoAndStop(1); //los desilumino (por si alguno estaba iluminado)
}
intervalSecc = setInterval(fIluminar,difB); //espero un tiempo proporcional a la dificultad del juego y vuelvo ailuminar
}

//LO QUE PASARÁ CUANDO APRETEMOS LOS BOTONES (CON EL MOUSE O CON EL TECLADO)
function botonAbajo():void{ //al presionar el botón
root[bSelect].gotoAndStop(2); //ilumino el boton seleccionado en el juego
this["sS" + bSelect.substring(1)].play();
timer.reset(); //freno el timer
}
function botonAfuera():void{ //al salir del botón
root[bSelect].gotoAndStop(1); //des ilumino la tecla
}
function botonArriba():void{ //al soltar el botón (mouse o teclado)
root[bSelect].gotoAndStop(1); //des-ilumino la tecla
if(bSelect == aSecuencia[pos]){ //Si el boton apretado es correcto
timer.start(); //anciendo el timer hasta el proximo boton que apriete
pos++; //cambio la posición del array que debe compararse con el prox. botón
if (pos==aSecuencia.length){//si el botón presionado es el último de la secuencia
pos=0; //ubico la posición de la secuencia a 0
intervalId= setInterval(fAgregar,1000); //espero 1" y arranco con la nueva secuencia
nivel_txt.text = "BIEN!"; //escribo la leyenda para que sepas que termino el nivel
fParar(); //deshabilito todos los botones para que no puedas apretar mientras se genera una nueva secuencia.
}
}else{ //si el botón apretado es incorrecto
fPerder(); //perdiste
}
}

//FUNCIONES PARA EL MOUSE
function fBotonera():void{
for (var i:Number = 0; i <4; i++){
this["b" + i].buttonMode = true; //los habilito como boton
this["b" + i].useHandCursor = true; //para que muestren la manito
this["b" + i].addEventListener(MouseEvent.MOUSE_DOWN,botonAb);
this["b" + i].addEventListener(MouseEvent.MOUSE_UP,botonAr);
this["b" + i].addEventListener(MouseEvent.MOUSE_OUT,botonAf);
}
}
function botonAb(evt:MouseEvent){
bSelect = evt.currentTarget.name;
botonAbajo();
}
function botonAf(evt:MouseEvent){
bSelect = evt.currentTarget.name;
botonAfuera();
}
function botonAr(evt:MouseEvent){
bSelect = evt.currentTarget.name;
botonArriba();
}

//FUNCIONES DE TECLADO
function fTeclado():void{
this.addEventListener(KeyboardEvent.KEY_DOWN, teclasAb); //cuando aprieto una tecla
this.addEventListener(KeyboardEvent.KEY_UP, teclasAr); //cuando suelto la tecla
}
function teclasAb(event:KeyboardEvent){ //cuando aprieto asigno a la tecla apretada un botón de juego y lo ilumino (7,9,1,3)
switch (event.charCode) {
case 49: // botón 1 en el teclado numérico
bSelect = "b2"; // AMARILLO en el juego
botonAbajo();//ilumino el botón elegido
break;
case 51: // botón 3 en el teclado numérico
bSelect = "b3"; //AZUL en el juego
botonAbajo(); //ilumino el botón elegido
break;
case 55: // boton 7 en el teclado numérico
bSelect = "b0"; //VERDE en el juego
botonAbajo();//ilumino el botón elegido
break;
case 57: // boton 9 en el teclado numérico
bSelect = "b1"; //ROJO en el juego
botonAbajo(); //ilumino el botón elegido
break;
}
}
function teclasAr(event:KeyboardEvent){ //Suelto las teclas
switch (event.charCode) {
case 49: // botón 1 en el teclado numérico
bSelect = "b2"; // AMARILLO en el juego
botonArriba(); //ejecuta la acción del juego (comparación con la secuencia)
break;
case 51: // botón 3 en el teclado numérico
bSelect = "b3"; // AZUL en el juego
botonArriba(); //ejecuta la acción del juego (comparación con la secuencia)
break;
case 55: // botón 7 en el teclado numérico
bSelect = "b0"; // VERDE en el juego
botonArriba(); //ejecuta la acción del juego (comparación con la secuencia)
break;
case 57: // botón 9 en el teclado numérico
bSelect = "b1"; // ROJO en el juego
botonArriba(); //ejecuta la acción del juego (comparación con la secuencia)
break;
}
}

//PERDIMOS
function fPerder():void{
nivel_txt.text = "PERDISTE"; //muestro leyenda en el texto
aSecuencia.length=0; //borro la secuencia de botones
pos=0; //borro la posición de la secuencia
bSelect=""; //borro cualquier botón que haya quedado guardado
fParar(); //detengo todos los botones de juego
fDificultad(); //habilito el botón para seleccionar dificultad
fBotonInicio(); //habilito el botón inicio
timer.reset(); //reseteo el temporizador
for (var i:Number = 0; i <4; i++){ //busco los 4 botones
this["b" + i].gotoAndStop(2); //los ilumino todos a la vez
}
intervalIdB = setInterval(fPerderAP,1500) //mando a apagar las luces dentro de 2"
}

//SOLO SIRVE PARA APAGAR LAS LUCES QUE SE PRENDEN CUANDO PERDISTE
function fPerderAP():void{
clearInterval(intervalIdB);
for (var i:Number = 0; i <4; i++){ //busca los 4 botones
this["b" + i].gotoAndStop(1); //y los apaga
}
}

//DETIENE LOS BOTONES ENTRE NIVELES Y CUANDO PIERDES
function fParar():void{
for (var i:Number = 0; i <4; i++){ //busco todos los botones del juego
this["b" + i].buttonMode = false; //Deshabilito modo botón (para quitar la manito)
this["b" + i].removeEventListener(MouseEvent.MOUSE_DOWN,botonAb); /* deshabilito */
this["b" + i].removeEventListener(MouseEvent.MOUSE_UP,botonAr); /* eventos de */
this["b" + i].removeEventListener(MouseEvent.MOUSE_OUT,botonAf); /* mouse */
}
this.removeEventListener(KeyboardEvent.KEY_DOWN, teclasAb); /* deshabilito los */
this.removeEventListener(KeyboardEvent.KEY_UP, teclasAr); /* eventos de teclado */
timer.reset();
}
}
}

De todos modos te dejo un link de descarga con el código fuente (el archivo.as , el archivo .fla y un swf funcionando)

DESCARGAR EL .FLA

-------------------------------
NOTA: Si este artículo te sirvió por favor revisá la lista de enlaces patrocinados, segúro encontrarás algo de mucho interes allí. Y de paso me ayudas a mantener El PezOjo! en línea.

ActionScript 3: Gráfico circular (radial)

2010-06-14T17:18:00.019-03:00

Hoy te traigo un jueguito muy simple pero que tiene algunas cosas interesante para analizar como listeners para teclado y mouse, setInterval() y otras yerbas que irán apareciendo en el script.

Hace un tiempo me pidieron desarrollar un gráfico circular pero no era de torta, sino que era un gráfico destinado a mostrar evoluciones (como si fuera un gráfico lineal) pero distribuído en un círculo, pues comparaba que tan distantes estaban de un punto común de inicio diferentes sucursales.
Este tipo de gráfico es standar en excel y otras planillas de cálculo y no tenía idea de como se aplicaría en actionscript 3.

Después de mucho dar vueltas y revisar algo de trigonometría llegué a una formulita (qué resultó ser bastante sencilla) pude realizar el gráfico que resultó como te lo muestro aquí.

Para que este gráfico se genere sólo bastará con completar 3 arrays y una variable:
1) Array con los valores del eje Y (en este ejemplo referencias).
2) Array con los valores del eje X (en este ejemplo los países.
3) Array con los datos a representar (valores del gráfico)
4) Variable que contendrá el simbolo de la unidad en que se representa el gráfico (%, $, MM, etc).
Además podrás manipular el tamaño del gráfico desde otra variable que luego comentaré en el código que explico a continuación:
Vamos a trabajar

1) Preparando el flash

En una nueva película de flash necesitamos generar un MovieClip llamado "bolita_mc" que contenga un circulo pequeño (Por ejemplo 20x20px). Este MC debe quedar en la biblioteca y estar vinculado como "bolita_mc".
Otro MovieClip llamado "grafico". Este MC estará vacío pero tendrá el código para generar todo el gráfico. Tenés que controlar al crear este MC de que el punto de registro de alineación sea el centro.

2) El código de nuestro grafico circular:

Poné el MC "gráfico" dentro del escenario y en el primer fotograma escribí el actioinscript:

//Importo la clase GCSafeTween, es externa y funciona mejor que los tweens de actionscript

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
//arrays que contienen la información del gráfico
var aRef:Array=new Array(0.00,10.00,20.00,30.00,40.00,50.00,60.00,70.00,80.00); //referencias para dibujar en el gráfico
var aRefSymbol:String = " %"; //unidad en la que están representadas las referencias
var aPais:Array=new Array("Chile Móviles", "Colombia Móviles", "Ecuador Móviles", "El Salvador", "Guatemala", "México", "Nicaragua", "Panamá", "Perú Fija", "Perú Móviles", "Uruguay Móviles", "Venezuela", "Argentina Fija", "Argentina Móviles", "Brasil Fija", "Chile Fija"); //primer eje del gráfico
var aDatos:Array=new Array(50.00,"na",50.00,"na",24.95,29.25,74.00,0,67.09,48.21,"na",49.63,62.67,0,0,75.00) //segundo eje del gráfico
//Datos comúnes a todo el gráfico
var radio:int=200; //para un gráfico de 400 x 400 pixels.
var variaGrados:Number = 360/aPais.length; //360 dividido la cantidad datos que se van a graficar
var lineas:Sprite = new Sprite();
var lUnion:Sprite = new Sprite();
//funcion para dibujar el cuadrante del gráfico según las referencias (aRef) y cantidad de cantidad de datos (aPais)
function fCuadrante():void{
//dibujar las líneas de referencia (junto a los valores de referencia con sus textos
var lineasRef:Sprite = new Sprite();
for(var m:uint=0; m<aRef.length;m++){
var posRY:Number=((radio/(aRef.length-1))*m)*-1;
lineasRef.graphics.lineStyle(1,0xf0f0f0);
lineasRef.graphics.moveTo(0,posRY);
lineasRef.graphics.lineTo(-(radio+(radio/3)),posRY);
//las etiquetas de texto que acompañan a cada Referencia.
var formatRef:TextFormat = new TextFormat();
formatRef.size = 14;
formatRef.color = 0xc0c0c0;
formatRef.font = "Verdana";
formatRef.bold = true;
var campoRef:TextField = new TextField();
campoRef.autoSize = TextFieldAutoSize.CENTER;
campoRef.defaultTextFormat = formatRef;
campoRef.text = aRef[m] + aRefSymbol;
campoRef.x=-(radio+(radio/3))-campoRef.width;
campoRef.y=posRY-campoRef.height/2;
lineasRef.addChild(campoRef);
}
lineas.addChild(lineasRef);
//dibujar radios (la línea que ocupará cada país);
var grados:Number=0; //grados en los que se vá a inclinar el siguiente radio
var lineasCuad:Shape = new Shape(); //los "rayos" que representarán a cada pais
for(var i:Number=0;i<aPais.length;i++){ //tantos radios como países haya en el array "aPais"
lineasCuad.graphics.lineStyle(1,0x77BBBB); // creo el gráfico (ancho de la linea, color)
lineasCuad.graphics.moveTo(0,0); //Defino el inicio de la línea (x,y), como todas las lineas serán concentricas voy a 0,0.
var rotarX:Number = radio*Math.cos(Math.PI/180*grados); //formula que saca la posición X según los grados necesarios)
var rotarY:Number = radio*Math.sin(Math.PI/180*grados); //formula que saca la posición Y según los grados necesarios)
lineasCuad.graphics.lineTo(rotarX,rotarY); //defino el final de la línea
//las etiquetas de texto que acompañan a cada rádio del gráfico.
var formato:TextFormat = new TextFormat();
formato.size = 11;
formato.color = 0x003366;
formato.font = "Verdana";
formato.bold = true;
var campo:TextField = new TextField();
campo.autoSize = TextFieldAutoSize.CENTER;
campo.defaultTextFormat = formato;
campo.text = aPais[i];
var rotarTX:Number = (radio+5+(campo.width/2))*Math.cos(Math.PI/180*grados);
var rotarTY:Number = (radio+5+(campo.height/2))*Math.sin(Math.PI/180*grados);
campo.x=rotarTX-(campo.width/2);
campo.y=rotarTY-(campo.height/2);
lineas.addChild(campo);
grados=grados+variaGrados; //aumento los grados que va a rotar la próxima línea
}
//dibujar los circulos que harán la referencia (tantos circulos como referencias haya en aRef)
for(var l:uint=0; l<aRef.length;l++){
var radioB:Number=(radio/(aRef.length-1))*l;
var posIX:Number;
var posIY:Number;
lineasCuad.graphics.lineStyle(1,0x77BBBB);
for(var k:int=0;k<aPais.length+1;k++){
lineasCuad.graphics.moveTo(posIX,posIY);
var posFX:Number = radioB*Math.cos(Math.PI/180*(variaGrados*k));
var posFY:Number = radioB*Math.sin(Math.PI/180*(variaGrados*k));
lineasCuad.graphics.lineTo(posFX,posFY);
posIX = posFX;
posIY = posFY;
}
lineas.addChild(lineasCuad);
}
this.addChildAt(lineas,0);
var myTween:Tween = new Tween(lineas, "alpha", Strong.easeOut,0,1,2,true);
}
//FUNCION PARA GENERAR LAS BOLITAS EN EL ESCENARIO
var timer:Timer = new Timer(25,aPais.length);
timer.addEventListener(TimerEvent.TIMER,fDibujaBolita);
timer.addEventListener(TimerEvent.TIMER_COMPLETE,fUnirLineas);
function fBolita():void{
timer.start()
}
var bGrados:Number = 0;
var aDatosPos:int=0;
function fDibujaBolita(event:TimerEvent):void{
if(aDatos[aDatosPos]!="na"){ //siempre y cuando tenga un valor de referencia asociado distinto de "n/a"
var bolita:MovieClip = new bolita_mc();
var regMayor:Number =aRef[aRef.length-1];
bolita.x = ((aDatos[aDatosPos]*radio)/regMayor)*Math.cos(Math.PI/180*bGrados);
bolita.y = ((aDatos[aDatosPos]*radio)/regMayor)*Math.sin(Math.PI/180*bGrados);
}else{ //cuando no tenga un valor (cuando el valor sea "n/a"
bolita = new bolita_mc(); //creo de todos modos la bolita
regMayor =aRef[aRef.length-1]; //pero la mando al borde extremo del ráfico
bolita.x = radio*Math.cos(Math.PI/180*bGrados);
bolita.y = radio*Math.sin(Math.PI/180*bGrados);
bolita.alpha=0; //y la pongo invisible, porque es distinta de 0
}
addChild(bolita);
bGrados=bGrados+variaGrados;
aDatosPos++;
}
//FUNCION PARA LAS LÍNEAS QUE UNEN LOS PUNTOS
function fUnirLineas(event:TimerEvent):void{
for (var i:int=1;i<this.numChildren;i++){
if(i<this.numChildren-1){
if(this.getChildAt(i).alpha>0 && this.getChildAt(i+1).alpha>0){ //siempre y cuando el valor no sea alpha (quiere decir que tiene un valor asociado).
lUnion.graphics.lineStyle(2,0xFF9900); // creo el gráfico (ancho de la linea, color)
lUnion.graphics.moveTo(this.getChildAt(i).x,this.getChildAt(i).y); //Defino el inicio de la línea (x,y), como todas las lineas serán concentricas voy a 0,0.
lUnion.graphics.lineTo(this.getChildAt(i+1).x,this.getChildAt(i+1).y);
}
}else if(this.getChildAt(i).alpha>0 && this.getChildAt(1).alpha>0){
lUnion.graphics.lineStyle(2,0xFF9900); // creo el gráfico (ancho de la linea, color)
lUnion.graphics.moveTo(this.getChildAt(i).x,this.getChildAt(i).y); //Defino el inicio de la línea (x,y), como todas las lineas serán concentricas voy a 0,0.
lUnion.graphics.lineTo(this.getChildAt(1).x,this.getChildAt(1).y);
}
}
this.addChildAt(lUnion,1);
var myTween:Tween = new Tween(lUnion, "alpha", Strong.easeOut,0,1,5,true);
}
fCuadrante();
fBolita();

Por las dudas te dejo un link de descarga del archivo .fla
DESCARGAR EL .FLA

NOTA: Si la animación no funciona bien es porque el tween de flash trae muchos problemas cuando se ejecuta dentro de un bucle for.

Para solucionar este problama se crearon clases esternas como las GCSafeTween. En este otro post te cuento como utilizar esta clase externa que funciona increiblemente bien.

Portfolio: George Birch en Behance Network

2010-06-04T15:49:00.001-03:00

George Birch se define como Ilustrador, Diseñador Gráfico y Cartoonista. Muy buenos los trabajos que expone en su portfolio.

Otro dato interesante es que este portfolio está publicado en una red social de diseñadores llamada Behance Networks. Esta red esta en ingles, permite crear portfolio, perfiles, "circulos" que son como grupos de amigos y tiene ofertas de empleo. Voy a probarla un poco más y luego publico un apartadito al respecto.

Galería de Wallpapers para Diseñadores

2010-06-03T15:29:00.001-03:00

El diseñador Daniel Hosoya ha desarrollado una serie de wallpapers dedicados los planteos de sus clientes. En sí muestran escenas que todos hemos vivido y que después de sacarnos un poco de rabia nos hemos reído. Más allá del humor esta muy bien la vuelta gráfica que les ha dado a estos mensajes.

Para ver el portfolio completo y descargarte los wallpapers en buena calidad podes hacer click acá.

Además podes ver sus otros wallpapers y portfolio visitando su web personal siguiendo este link.

Photoshop: Pinceles, texturas, patrones y fondos gratuitos desde Eslovenia

2010-05-29T22:11:00.015-03:00

Starnet es un equipo formado por dos desarrolladores que, desde Eslovenia, publica en su blog una buena cantidad y variedad de contenidos gratuitos para photoshop e ilustración desarrollados por ellos mismos.

Han realizado un buen trabajo con el conjunto de pinceles de líneas gastadas. Esta librería de pinceles esta realizada en 2500 x 2500 pixels por lo cual fué dividida en dos y puede descargarse gratuitamente desde su web.

Los links para descargar las librerías de pinceles son estos:

Cada una de las librerías fué dividida en 20 pinceles de gran resolución y ocupa al rededor de 20mb cada una.

Por supuesto puedes usar estas herramientas en tu photoshop. Lo que no puedes hacer es redistribuírlas por tu cuenta o venderlas. Porque los amigos eslovenos son generosos pero no tontos ;).

No puedo terminar este post sin hablar de la sección de texturas del blog. Una gran selección en cuanto a la calidad de imagenes que presentan para ser descargadas gratuitamente y no solo en paquetes de 30 o 40 imagenes sin o que ofrecen algunas galerías con más de 200 imagenes para descargar.

En sintesis un blog donde abundan los recursos con un muy buen gusto y gratis para descargar.

ActionScript 3: Cortar imagenes con BitmapData + copyPixels

2010-04-16T17:40:00.028-03:00

Hoy te traigo un jueguito muy simple pero que tiene algunas cosas interesante para analizar como listeners para teclado y mouse, setInterval() y otras yerbas que irán apareciendo en el script.Supongamos que queremos hacer un rompecabezas. Para ello queremos levantar una imagen y que ActionScript la desglose en piezas donde, cada pieza tiene un pedacito de imagen.

ActionScript no nos dejará cortar directamente una imagen, pero podemos usar algunas artimañas para realizarlo.

Para nuestro ejemplo usaremos ésta imagen del PezOjo! de 400px x 400px* que tenemos en la biblioteca del .fla. (porían usarse también imagenes externas o que estén en el escenario.
Esta imagen debe estar vínculada con el nombre de clase "imagen".

En un archivo externo .as generé la clase para poder cortar esta imagen de la biblioteca y el código (con explicaciones y todo) es el siguiente:

//creo el package importando todo lo que necesito: eventos, display y geom
package{
import flash.display.*;
import flash.events.*;
import flash.geom.*;

public class Cortar extends Sprite{
public function Cortar(){
//Creo el movieClip que mostraré al finalizar el script.
var mc:MovieClip = new MovieClip();
//Creo un bitmapData que contenga la imagen de la biblioteca
var cargaImagen:BitmapData = new imagen(0,0);
//Creo un bitmapData que va a contener la imagen recortada y defino su tamaño.
var img:BitmapData =new BitmapData(200,200);
//Creo un rectangulo que tomará el recorte de la imagen. (x de inicio, y de inicio, width, height). En este caso crearemos un cuadrado de 200x 200, que empezará desde la posición x100 y100 del bitmapdata.
var rectangulo:Rectangle = new Rectangle(200, 200, 400, 400);
//Este "Point" será el punto(x,y) dentro de IMG (si cambio la posición 0,0, el recorte se verá desplazado)
var punto:Point = new Point(0,0);
//Ahora producimos la magia del copyPixels: inserto en img el recorte de cargaImagen.
img.copyPixels(cargaImagen, rectangulo,punto);
//Creo un Objeto bitmap donde pondremos nuestro bitmapData final (sino no puedo meterlo en el escritorio)
var imgB:Bitmap = new Bitmap(img);
//Finalmente meto el Bitmap dentro de un movieclip y lo posiciono en el centro.
mc.addChild(imgB);
//Una vez añadido el Bitmap dentro del movieclip para que el punto de registro quede en el medio.
imgB.x=-(imgB.width/2); imgB.y=-(imgB.height/2);
//pongo el movieClip en el escenario
addChild(mc); mc.x=200; mc.y=200;
}
}
}

El resultado de este código (que, quitando los comentarios verás que es bastante breve) será esta imagen de 200px x 200px que tenemos aquí a la derecha*.

Fuera de esto solo queda jugar con la imaginación para que, a traves de algunos "for" armemos todas las fichas que necesitamos para el rompecabezas. o simplemente armar thumbnails recortados de imagenes. Creo que las utilidades de esto son varias.

Te dejo un link para descargar el archivo fuente de este post. Espero que te sirva.

DESCARGAR EL FLA

*Nota: Las imagenes fueron reducidas al 50% en éste post para con el fin de poder mostrarlas (en este post, la original tiene 200x200 y el recorte 100x100).

*Nota 2: Como siempre. Si te sirvió este post hacemelo saber, dejandome un comentario. También estaría bien que pases por los enlaces patrocinados donde seguramente encontrarás más cosas interesantes.

Lightbox - la galería de imagenes que todos vemos en html.

2010-03-22T17:09:00.004-03:00

Se trata de una de las galerías de imagenes más utilizadas en los sitios desarrollados en dhtml.

Si bien no es un nuevo, esta herramienta desarrollada por Lokesh Dhakar, resulta una herramienta hiper-util a la hora de montar una galería de imágenes dinámica y con buena estética sin recurrir al viejo y (hoy un poco vapuleado) flash.

Simplemente basta con poner las carpetas de archivos js en tu server, incluír los .js en la página donde se mostrará la galería y modificar un poco los links de tus imagenes y ya se logra un gran efecto.

Y lo más importante: Al ser de código abierto, puede personalizarse y mejorarse tanto como quieras. Ni hablar de jugar con los estilos libremente, ya que está basado en CSS.

Podes verlo funcionando en ésta demo.

Descarga la versión 2.04 (actual) desde aquí o desde la página de la librería

La instalación son 3 simples pasos que se detallan aquí.

Modificar idiomas en wordpress u otras plataformas y temas con archivos .mo y .po

2010-02-19T17:00:00.005-03:00

Una práctica común en los CMS de código abierto (Por ejemplo Wordpress y los temas para wordpress, MediaWiki de los creadores de wikipedia, Moodle, y otrtas aplicaciones de contenidos web) se utiliza de manera muy común que en éstas puede personalizarse el idioma en que se va a mostrar la página (el blog o lo que sea).

Ocurre también que generalmente los autores de los temas o de algunos CMS lo crean en su idioma y quedan a la espera de que la comunidad de desarrolladores arme los distintos paquetes de idioma.

Cuando utilizamos uno de estos CMS y sobre todo los themes creados por terceros, nos encontramos con que no existe en la red un paquete de idioma para el nuestro (por ej. español) y ahí es donde tenemos que empezar con los malabares.leer más->

Una opción muy utilizada es la de "canibalizar" los estilos y las paginas php que componen el template traduciendo a mano y una a una todas las opciones y leyendas del CMS. Es un laburo tedioso, repetitivo y generalmente desordenado que trae millones de dolores de cabeza.

La buena noticia es que tanto los desarrolladores de CMS como de temas están utilizando para la configuración de idiomas una biblioteca de funciones de php llamada gettext();

Esta librería usa dos archivos de idioma que generalmente se guardan en la carpeta languages de nuestro theme. Para cada idioma encontraremos dos archivos, uno con extensión .po y otro con extensión .mo.

El archivo .po es básicamente un archivo de texto que contiene todos los textos del cms y su traducción al idioma regional seleccionado.

El archivo .mo es el mismo archivo que el .po pero en formato binario y por lo tanto es imposible que lo editemos a manos (a menos que sepas escrbir con grupos de ceros y unos.

Para editar estos archivos de lenguaje se han desarrollado algunos editores que nos permiten editar de modo limpio estos archivos.

La herramienta que elegí para esta tarea es el poEdit 1.4.5. Que es gratuita, de facil instalación y que, de manera muy sencilla, muestra los textos originales del template o cms (y cualquier otra aplicación basada en php que utilice la librería gettext() y editarlos con nuestro idioma. Al guardarlo genera automáticamente el archivo .mo.

Sólo tenes que tener en cuenta respetar los nombres que utiliza la librería para detectar los paquetes de lenguaje (p/ej: es_ES español de españa, es_AR español de argentina, en_EN ingles británico, etc.). Para esto te recomiendo consultar la documentación de php sobre documentación de php sobre gettext();

Podes descargar poEdit 1.4.5 desde aquí o visitar la página del desarrollador en http://www.poedit.net

-------------------------------------

Nota: Si esta información te sirvió por favor hacé click en los enlaces patrocinados para ayudarme a mantener este blog en línea.

Complementos Top para navegadores: Firefox, IExplorer, Chrome

2010-02-09T21:51:00.009-03:00

Hace pocos días el suplemento tecnológico de Clarin.com realizó un top ten de los principales addons para los navegadores más populares.

Por lo general Clarin.com no se encuentra a la vanguardia de la tecnología, pero me pareció interesante ir probando la lista que ponen a disposición.

A continuación copio la lista completa, con sus links y en negrita los recursos que me parecieron más interesantes.

Agregados para Firefox:

Parece que seguidos de serca por la gente de Chrome se dedicaron a realizar add-ons antes de seguir sacando todo junto en nuevas versiones.

ColorfulTabs: Logra que cada una de las pestañas de Firefox luzca un color distinto.
Fast Dial: Muestra una captura de pantalla con los favoritos. Se puede configurar las filas y columnas que se van a desplegar.
SearchPreview: Ofrece vista previa de las búsquedas realizadas en Google.
SkipScreen: Evita esperas en los sitios de descargas como Megaupload, RapidShare o Depositfiles.
FoxTab: Muestra una vista en tres dimensiones de las páginas en actividad, con varios recorridos posibles.
Video DownloadHelper: Permite descargar videos desde Youtube y otros sitios como Vimeo.

Agregados para Chrome:

El repositorio de add-ons de Chrome se encuentra en https://chrome.google.com/extensiones. Allí buscaremos las herramientas por nombre:

Google Translation Bar: Para tener la barra de traducción siempre a mano.
Google Mail Checker: Muestra la cantidad de mensajes que están sin leer en la casilla.
IE Tab: Como muchas páginas son compatibles únicamente con el IE, esta aplicación permite que se desplieguen correctamente.
AdBlock. Saca de circulación todas las ventanas que se abren sin permiso. Algo que también mejora la calidad de navegación.
Docs PDF/PowerPoint Viewer. Para realizar vista previa de presentaciones y PDF.
Beautify Facebook. Estiliza la presentación del sitio y mediante una serie de teclas rápidas permite acceder a diferentes contenidos con un sólo clic.

Agregados para Internet Explorer:

Tal vez el viejo Explorer esté un poco desprestigiado pero aún sigue siendo el más utilizado y continúa dando batalla desde sus (al menos) dos versiones vigentes.

Internet Explorer 8

Para la 8, lo mejor está en los Aceleradores, que permiten buscar contenidos, mapas, enviar e-mails y traducir idiomas.

Internet Explorer 7,

IE7Pro: Este add-on es capaz de hacer tantas cosas que se hace agotador enumerarlas.
Password Scrambler: Solución para proteger contraseñas.

Espero que tengas para jugar un rato con tu navegador y mejorar sus prestaciones sin problemas.

-------------------------------------

Nota: Si esta información te sirvió por favor hacé click en los enlaces patrocinados para ayudarme a mantener este blog en línea.

Wordpress: Arras Theme 1.3.6 + Idioma español

2010-02-09T15:39:00.009-03:00

Arras Theme (versión 1.3.6) es un Tema para WordPress diseñado para sitios de noticias o de revisión con un montón de características personalizables.

Viene con 5 diseños diferentes noticias para personalizar tu página principal, y un apartado que se integra a las opciones de página de WordPress para ajustar el tema a su gusto.

Tuve que utilizarlo para un proyecto de blog corporativo y la verdad es que en 2 días tengo montado un blog muy funcional, altamente personalizado y compatible con todos los navegadores que andan dando vueltas en el mercado.

A la hora de ponerme a configurarlo sólo me encontré con dos problemas principales y con poca ayuda en internet (al menos la que hay, yo no la entendí.

Así que a fuerza de mucho toquetear encontré la solución a estos dos problemas:

a) Los thumbnails (miniaturas) de las imágenes no se veían ni en el slideshow ni en los destacados de más abajo.

El problema es que para que se vean hay que hacer 2 cosas:

En cada post subir una imagen desde tu equipo, los links a url de imagen no me funcionaron.
Cuando la imagen termine de subir "NO APRIETES ACEPTAR". haciendo scroll hasta abajo vas a encontrar un campo llamado "URL del enlace". Copia la url que ahí figura. Ahora si podes apretar "Guardar Cambios".
En tu nueva entrada vas a encontrar (hacia abajo) un campo llamado "Campos Personalizados", añadí uno nuevo llamado "Thumb" y al lado pegale la URL de enlace que habías copiado para la imagen.
Este campo tendrás que crearlo sólo una vez. Para las próximas entradas ya te quedará guardado y sólo tendrás que seleccionarlo y pegar la URL de enlace.
Ahora sí.. sólo queda disfrutar de las miniaturas y el slideshow de Arras.

b) Para personalizarlo aún mas tuve que traducir el lenguaje al español modificando los archivos .mo y .po (en otro apartado comentaré como funciona). y ahí apareció el segundo problema: el Theme estaba en idioma inglés únicamente.

Por lo tanto tuve que aprender a modificar los archivos de lenguaje del Theme (archivos .mo y .po) para poder transformarlos al español.

Así que creé estos archivos y lo puse en el foro del creador del theme.

Para instalarlo deberás:

Descargar el archivo .zip que dejé en el foro del creador de Arras Theme.
Nota: El paquete de idioma es para la versión 1.3.6.
Descomprimir el .zip aparecerán dos archivos llamados "es_ES.mo" y "es_ES.po", copialos dentro de la carpeta de instalación de tu theme (normalmente: wp-content/ themes / arras-theme / language).
(también podes editar vos mismo los archivos de idioma siguiendo éstos pasos).
Nota: Controlá que tu versión de Arras Theme corresponda con la versión de la traducción. En la home del creador de Arras hay otros paquetes de idioma para versiones actualizadas.
Es probable que al refrescar tu navegador no veas los cambios de idioma. Lo que debes hacer es, en el apartado de temas de tu wordpress, seleccionar momentaneamente cualquier otro tema y luego volver a poner el Arras.
Ahora sí, refrescá tu navegador y listo, disfrutá tu Arras en español.

NOTA: Tené en cuenta que este paquete de lenguaje es sólo para el tema Arras (tanto el blog como la administración) y no para todo Wordpress. Si lo que buscas es el paquete de lenguaje para wordpress, podes bajarlo de wordpress.org en español.

-------------------------------------

Nota2: Si esta información te sirvió por favor hacé click en los enlaces patrocinados para ayudarme a mantener este blog en línea.

ActionScript 3: Solución para problemas con la Clase Tween

2009-12-09T11:02:00.011-03:00

Hoy te traigo un jueguito muy simple pero que tiene algunas cosas interesante para analizar como listeners para teclado y mouse, setInterval() y otras yerbas que irán apareciendo en el script.

Desde ActionScript2 vengo utilizando con maravillosos resultados la clase tween para hacer animaciones pequeñas (cambiar alphas, posicion, tamaño, etc).

Por eso, cuando me mudé a ActionScript3 me puse muy contento al saber que todavía existia nuestra clase Tween.

El problema es que, entregado al Tween, de pronto me encontré haciendo algo como esto:

import fl.transitions.*;

import fl.transitions.easing.*;

function hacerAlgo():void{

var mySprite:Sprite;

for (var i:uint = 0; i <>

mySprite = new cuadrado_mc();

stage.addChild(mySprite);

mySprite.x = Math.random() * stage.stageWidth;

mySprite.y = Math.random() * stage.stageHeight;

new Tween(mySprite, 'alpha', None.easeNone, 0, 1, 1, true);

}

hacerAlgo();

Mientras éste código lo cargo una vez no hay problemas, pero cuando necesita rehacer el dibujo (digamos si cambio los valores desde un combo box u otra modificación en tiempo de ejecución) ocurre que a veces funciona y a veces no.

Cuando me cansé de buscar y rebuscar donde me había equivocado empecé a buscar respuestas en internet. Resulta que este problemita del tween viene de la mano de un nuevo artilugio de flash (al menos nuevo para mí): El Garbage Collector.

Lo que hace este recolector de basura es borrar las variables que flash carga en la memoria y que estan sin uso. El asunto parece ser que el tween ocupa mucho espacio en memoria y como flash termina el bucle (for) antes de que el tween termine su proceso, se borran las variables temporales y el proceso del tween queda trunco: A veces funciona, a veces funciona a medias y otras directamente no funciona.

Encontré montones de recomendaciones muy complejas. Algunas no las entendí, otras directamente no funcionaban.

La solución definitiva (hasta el momento porque nada es definitivo) la encontré con una Clase externa que se monta en tu proyecto y reemplaza a la clase tween de flash.

Esta galería de clases se llama CGSafe (algo así como seguro contra el garbage collector) y funciona muy parecido a la de flash, pero bien ;). Es gratuita y funciona muy bien.

Además sirve para problemas similarers con: Timers, Loaders y URLLoaders.

Lo que hay que hacer es:

1) Descargarse el paquete de Clases de la pagina del desarrollador. o haciendo click AQUI (es la ruta original del desarrollador).

2) Poner dentro de tu proyecto la carpeta com que contiene todas las clases CGSafe.

3) Importar las clases en actionscript:

donde antes importabas import fl.transitions.*; ahora importas import com.exanimo.transitions.GCSafeTween;.

4) En lugar crear al tween como new Tween(mySprite, 'alpha', None.easeNone, 0, 1, 1, true); ahora lo creas escribiendo new new CSafeTween(mySprite, 'alpha', None.easeNone, 0, 1, 1, true);.

Es prácticamente igual. El código de nuestro ejemplo, modificado, quedaría así:

import com.exanimo.transitions.GCSafeTween;

import fl.transitions.easing.*;

function hacerAlgo():void{

var mySprite:Sprite;

for (var i:uint = 0; i <>

mySprite = new cuadrado_mc();

stage.addChild(mySprite);

mySprite.x = Math.random() * stage.stageWidth;

mySprite.y = Math.random() * stage.stageHeight;

new CSafeTween(mySprite, 'alpha', None.easeNone, 0, 1, 1, true);

}

hacerAlgo();

5) Disfrutas viendo tus animaciones sin cortes abruptos ni errores incomprensibles.

Nota: Hay un monton de Clases por ahí que hacen lo mismo. Yo elegí la GCSafe porque es la más similar a la de Adobe y porque funciona muy bien.

Nota 2: Si esta información te sirvió por favor hacé click en los enlaces patrocinados para ayudarme a mantener este blog en línea.

Recursos gratuitos navideños 2: Muchos recursos

2009-12-05T20:08:00.006-03:00

Siguiendo con la busqueda de recursos navideños llego hasta el blog de Teo Atienza quien presenta un gran compilado de recursos gratuitos para diseños navideños compuesta por íconos, fondos de escritorio, vectores, pinceles, themes para wordpress y fotografías. Aquí van los links para cada descarga.


25 paquetes de iconos navideños	60 fondos de escritorio sobre la Navidad


33 iconos vectoriales	40 fondos de escritorio navideños


50 fotografías de paisajes navideños	20 paquetes de pinceles


20 themes de Navidad para Wordpress	12 iconos estilo stick


50 paquetes de vectores	50 paquetes de iconos navideños


	Iconos sociales navideños