23 Recursos esenciales para entender HTML5

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.:

Colecciones de Iconos de Redes Sociales Vectorizadas y gratuitas

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

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.

Logo vectorizado: Le Tour de France

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.

Logo vectorizado: South Africa 2010 - FIFA World Cup

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

ActionScript 3: Clase para juego Simon

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.

ActionScript 3: Gráfico circular (radial)

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: