35 vectores gratuitos usables

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

56 Extensiones y Addons más requeridas para Google Chrome

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.

30 ilustraciones vectoriales para tablas de skate

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:

29 wallpapers navideños para iphone

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!

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

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

25 juegos que demuestran el poder del HTML5 CANVAS

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.

50 Themes Portfolio para WordPress Gratuitos y de bajo costo

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.

Tabla Periódica de los elementos (html5)

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

Los mejores sites en CSS

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

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:

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

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

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:

Portfolio: George Birch en Behance Network

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

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

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:

• Free worn lines Photoshop brush pack Vol 1
• Free worn lines Photoshop brush pack Vol 2

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

ActionScript 3: Cortar imagenes con BitmapData + copyPixels

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.

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

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

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

Complementos Top para navegadores: Firefox, IExplorer, Chrome

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:

Wordpress: Arras Theme 1.3.6 + Idioma español

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:

1. En cada post subir una imagen desde tu equipo, los links a url de imagen no me funcionaron.
2. 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".
3. 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.
4. 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:

1. 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.
2. 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.
3. 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.
4. 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.