Tutoriales de Desarrollo y Diseño Web | Web.Ontuts » Recursos web

vanilla: theme corporativo y portfolio para WordPress

Adrián Mato — Fri, 22 Apr 2011 12:07:43 +0000

¿Qué es vanilla?

vanilla es un theme corporativo y portfolio para aquellos que trabajan con el gestor de contenidos WordPress. Anteriormente WordPress era meramente utilizado para blogs pero es un hecho que el paso del tiempo y su popular aceptación lo hayan reconvertido en el CMS referencia para mucho tipo de proyectos.

No creo que WordPress valga para todo pero realmente para proyectos pequeños y medianos aporta mucha versatilidad y sobretodo rapidez.

El theme ha sido creado por un servidor y viene acompañado de un sistema de rotación de imágenes en la portada permitiendo mostrar nuestros últimos trabajos con un montón de efectos diferentes para captar la atención del visitante.

No importa si tus conocimientos de WordPress son escasos o amplios, el theme cubre ambos perfiles. ¿Cómo? Pues porque viene acompañado de un panel de administración de forma que rellenando formularios puedes personalizar y configurarlo a tu gusto.

De esta forma podrás por ejemplo añadir diapositivas al sistema de rotación de imágenes de portada, añadir proyectos a la galería, entradas en el blog, configurar tu cuenta de twitter, galería de flickr, dos sidebars completamente configurables mediante widgets y todo esto y mucho más sin tocar una línea de código.

Además viene acompañado de 8 archivos PSD por lo que podrás personalizar colores y el “look & feel” general si algo no te convence de forma fácil y cómoda.

Algunas características destacadas de vanilla

Como os comentaba al inicio el theme viene cargado de opciones y características algunas de las más destacadas son las siguientes que os listo a continuación:

Rotación de diapositivas en portada completamente configurable.
Galería de proyectos: imágenes y vídeos soportados.
Página de contacto PHP lista para utilizar sin código.
Un montón de shortcodes personalizados.
Menú desplegable completamente personalizable.
Habilitado para el uso de widgets.
Template de páginas de ancho completo sin columnas adicionales.
Página de error 404 personalizada.
Posibilidad de añadir imágenes destacadas a las entradas del blog.
Comentarios anidados.
Último mensaje publicado en Twitter.
Galería de imágenes flickr como widget.
Compatible con la mayoría de navegadores actuales (incluyendo IE7 y IE8).

Seguramente se me escapen algunas pero espero haberme acordado de las más importantes.

¿Cómo puedo conseguir el theme?

En esta ocasión el theme no viene en forma de recurso gratuíto como acostumbramos a publicar. La forma en la que lo hemos publicado ha sido mediante el marketplace de los chicos de Envato llamado como Themeforest.

El precio del theme es de 35$ pudiendo ser comprado aquí mismo. Además del propio theme hemos incluído una completa documentación para seguir paso a paso a la hora de configurar todas las distintas opciones en caso de que no encontréis lo que buscáis.

¿Por qué no hemos publicado el theme de forma gratuíta? Sinceramente porque ha costado muchas horas de diseño, maquetación y programación y el resultado final me ha hecho convencerme que debía cobrar por ello .

Espero que os haya gustado y si tenéis alguna crítica o sugerencia para mejorar este o próximos diseños… ¡no dudéis en compartirla por favor!

Moskis Gems social pack: 180 iconos sociales

Adrián Mato — Wed, 16 Feb 2011 12:56:47 +0000

Esta vez es exclusivo

Este es el primero (y esperemos no el último) pack de iconos que estrenamos y promocionamos de manera exclusiva en Ontuts. Desde aquí quiero dar las gracias a José Pardilla por haber confiado en nosotros y felicitarle por el magnífico trabajo desempeñado.

¿Qué contiene el Set de Iconos?

El pack de iconos está pensado tanto para utilizar en diseños web que requieran hacer alusiones a distintos servicios sociales, facilitando el proceso creativo de diseñadores, con un total de 180 iconos de un acabado visual muy cuidado y profesional.

El set de iconos de Moskis Gems social pack está disponible en resolución 32×32 pixels. El formato en los que está compartido el set es .PNG transparente para utilizar de forma gratuita en tus proyectos personales o comerciales.

Creo que lo mejor es que lo veáis vosotros mismos en la imagen previa .

Imagen Previa del Pack de Iconos

Como siempre, os dejo con una imagen previa de los iconos:

Desde aquí queremos dar las gracias a José Pardilla, creador de este pack, compartiéndolo con todos nosotros y sobretodo por haber hecho el esfuerzo de ofrecerlo a Ontuts de forma exclusiva. Como pequeña petición de José: si alguno de nuestros lectores dispone de una invitación a Dribbble la comparta con el autor.

Es un gustazo encontrar a diseñadores españoles de esta calidad y que la gente siga aportando recursos gratuítos a la comunidad .

¡Espero le saquéis el mejor partido posible!

Actualización: Se han añadido nuevos iconos y mejorado otros ya existentes en el pack

iDroid: 52 iconos para móviles Android

Adrián Mato — Fri, 10 Dec 2010 20:35:41 +0000

¿Qué contiene el Set de Iconos?

El pack de iconos está pensado tanto para sustituir iconos en móviles Android como para desarrollo de nuevas aplicaciones, facilitando el proceso creativo de desarrolladores móviles, con un total de 52 iconos de un acabado visual muy cuidado y profesional.

El set de iconos de iDroid está disponible en resolución 48×48 pixels. Los formatos en los que está compartido el set son .PNG transparente y .PSD para utilizar de forma gratuita en tus proyectos personales.

Creo que lo mejor es que lo veáis vosotros mismos en la imagen previa .

Imagen Previa del Pack de Iconos

Como siempre, os dejo con una imagen previa de los iconos:

Como curiosidad comentar que Iiro Jäppinen ha sido el creador de este pack, compartiéndolo con todos nosotros. Es un gustazo que la gente siga aportando recursos gratuítos a la comunidad de diseñadores .

¡Espero le saquéis el mejor partido posible!

Fuentes de Letra Gratis y de Calidad Volumen #9

Adrián Mato — Mon, 29 Nov 2010 11:51:15 +0000

La importancia de las fuentes de letra

Seleccionar la fuente de letra adecuada para comunicar nuestro mensaje es muy importante, pero mucha gente lo olvida. Una buena tipografía puede ser usada para crear grandes logos, para crear un gran encabezado, para captar la atención del lector… No se trata sólo de diseño web, se trata de que tu contenido tiene que ser fácil de leer tanto en la pantalla como en un trozo de papel.

Es más que un diseño bonito, una fuente de letra ha de ser capaz de leerse fácilmente en una pantalla o en un trozo de papel y captar la atención del lector desde el primer instante. Debe comunicar nuestro mensaje con claridad.

Es nuestro trabajo como diseñadores entender estos problemas y tratar de seleccionar la fuente de letra correcta para cada proyecto. Espero que estas 4 fuentes de letra destacadas os sirvan de ayuda en vuestro proceso de selección y diseño.

Fuentes de letra en este volumen

Raleway

Autor: Matt McInerney
Clasificación: Sans Serif
Descargar fuente

Prociono

Autor: Barry Schwartz
Clasificación: Serif
Descargar fuente

Orbitron

Autor: Matt McInerney
Clasificación: Sans Serif
Descargar fuente

Goudy Bookletter 1911

Autor: Barry Schwartz
Clasificación: Serif
Descargar fuente

Designer Icons: 12 iconos de calidad hechos a mano

Adrián Mato — Wed, 17 Nov 2010 11:41:01 +0000

¿Qué contiene el Set de Iconos?

El pack de iconos está pensado para facilitar el proceso creativo de diseñadores web y de interfaces, con un total de 12 iconos de un acabado visual muy cuidado y colorido.

El set de iconos de Designer Icons está disponible en resolución 32×32 pixels. El formato en el que es compartido el set es .PNG transparente para utilizar de forma gratuita en tus proyectos personales y comerciales.

Creo que lo mejor es que lo veáis vosotros mismos en la imagen previa .

Imagen Previa del Pack de Iconos

Como siempre, os dejo con una imagen previa de los iconos:

Como curiosidad comentar que Parthiban ha sido el creador de este pack, compartiéndolo con todos nosotros. Es un gustazo que la gente siga aportando recursos gratuítos a la comunidad de diseñadores . Además el set ha sido patrocinado por los chicos de tutorial9.

¡Espero le saquéis el mejor partido posible!

NES Theme: 9 increíbles iconos temáticos de videojuegos

Adrián Mato — Mon, 01 Nov 2010 12:21:03 +0000

¿Qué contiene el Set de Iconos?

El pack de iconos está diseñado para proyectos enfocados en los videojuegos y el aspecto retro de la época de los 8bits, con un total de 9 iconos de un acabado visual muy cuidado y fiel en estilo.

El set de iconos de NES Theme está disponible en nada resolución 512×512 pixels. Los formatos en los que son compartidos son .PNG transparente y .ICO para utilizar de forma gratuita en tus proyectos personales.

Creo que lo mejor es que lo veáis vosotros mismos en la imagen previa .

Imagen Previa del Pack de Iconos

Como siempre, os dejo con una imagen previa de los iconos:

Como curiosidad comentar que Ahuri ha sido el creador de este pack, compartiéndolo con todos nosotros. Estábamos acostumbrados a crear artículos de inspiración sobre videojuegos… así que qué menos que un set de iconos .

¡Espero le saquéis el mejor partido posible!

Planificación y Herramientas para tus diseños web

Adrián Mato — Sat, 23 Oct 2010 12:39:11 +0000

La importancia de planificar antes de actuar

Muchos diseñadores en algún u otro momento hemos caído en la tentación de comenzar a diseñar un nuevo proyecto sin ningún tipo de planificación previa. Ya sea por pecar de novatos, perezosos o simplemente no creer en que la planificación debe formar parte de nuestro proceso creativo.

La planificación debe formar siempre parte de nuestro proceso creativo, no es algo “opcional”.

Con planificación previa no estoy sugiriendo numerosas horas de escrupulosa planificación y organización de todo lo que haremos, ha de ser práctico y en ningún momento debe ser peor el remedio que la enfermedad, recordad que nos interesa planificar para ahorrar tiempo y ganar en calidad.

En este proceso previo de planificación es importante que obtengamos respuesta a preguntas tan básicas como:

1. ¿Qué tipo de web voy a crear?
2. ¿Qué clase de público visitará la web?
3. ¿Cuál es la finalidad / objetivo final de la web?
4. ¿Cumplirá el diseño en mente los objetivos? ¿Es usable e intuitivo?

Contestando a este tipo de preguntas (seguro que añadiríais / quitaríais alguna) nos enfrentamos a problemas que a pesar de ser demasiado obvios nos ahorrarán más de un dolor de cabeza… ¿cuántas veces hemos no desechado diseños visualmente atractivos pero que no cumplen los objetivos básicos?

Diseñar con unos objetivos básicos bien definidos nos ahorrarán más de un “borrón y cuenta nueva“.

Si bien para proyectos “for fun” (por mera diversión) se puede entender que no se planifique nada, sino que simplemente experimentemos y trasteemos sobre la marcha… me resisto a pensar que no se pueda necesitar / dedicar media 30 o 60 minutos a la planificación de lo qué queremos conseguir y cómo hacerlo.

Herramientas para planificación de diseños web

Si bien no están todas las existentes del mercado (otra cosa no, pero de esto hay mucho), he querido resaltar aquellas que me han parecido más interesantes y que he utilizado en algún momento a modo de prueba o en proyectos reales.

Como siempre, si conocéis alguna herramienta interesante que no aparezca en este listado, ya sabéis para qué están los comentarios .

Balsamiq Mockups

Balsamiq Mockups es una herramienta multiplataforma (Linux, Windows, Mac) que nos permite arrastrar y soltar todo tipo de elementos web, móviles y otros controles comunes para agilizar el brainstorming y bocetos iniciales de cualquier tipo de proyectos.

No es casualidad que aparezca de primero en la lista, actualmente es el que utilizo para la mayoría de proyectos en Cokidoo.

Entre otras cosas se nos permite crear documentos con múltiples páginas (algo así como las hojas de Excel) así como editar los propios elementos pudiendo añadir de manera rápida y por pseudocódigo contenido a los mismos: items en un menú de navegación, registros en una tabla… etc.

HotGloo

HotGloo Una herramienta de wireframing con un aspecto e interfaz muy cuidada que no sólo está pensada para diseñadores, sino también para programadores. Como buen servicio web, no necesitaremos preocuparnos ni de descargas ni actualizaciones constantes, tan sólo crearemos nuestra cuenta y comenzaremos a disfrutar del servicio.

HotGloo favorece la relación entre clientes y miembros del mismo equipo pudiendo editar y comentar casi cualquier parte de nuestro trabajo mediante un sistema en tiempo real de colaboración con chat integrado. Por momentos algunas de sus características recuerdas a Basecamp (salvando las distancias).

Gliffy

Gliffy es un aplicación online para la creación de diagramas, permitiéndonos crear de manera fácil y cómoda todo tipo de planos y diagramas con un acabado bastante profesional.

Lógicamente entre planos de viviendas, gráficas, diagramas base, dibujos técnicos y otro tipo de diseños podremos esbozar nuestros diseños web.

iPlotz

iPlotz permite crear de manera rápida y cliqueable todo tipo de prototipos web, pero además soporta elementos para la planificación de todo tipo de aplicaciones de software. Es multiplataforma pudiendo ser ejecutado en Linux, Windows, Mac o embebido en navegador web mediante flash.

Incorpora un gestor de proyectos de manera que podamos tener múltiples proyectos bajo una misma cuenta, además de incorporar un sistema de discusión con el que valorar las distintas creaciones con el fin de mejorar el trabajo final.

Pencil Project

Pencil Project es un plugin para Firefox que nos permite realizar prototipados de interfaces de usuario directamente en nuestro navegador.

Incluye las herramientas de dibujado típicas que se pueden esperar de este tipo de programas, además de ser multiplataforma y aceptar plantillas predefinidas por nosotros mismos. Como curiosidad está apoyado por la fundación Mozilla.

Lápiz & Papel

Si bien me decanto por Balsamiq Mockups como herramienta de sketching, previo a su utilización siempre hay una ronda de lápiz y papel con la que empezar a desatascar la mente y empezar a generar buenas ideas.

Por lo general plasmar los primeros bocetos o garabatos en un papel de forma rápida y cómoda suele ser una buena práctica para luego “pasarlos a limpio” y completarlos con uno de estos programas. Posteriormente podremos enseñárselos a clientes o resto del equipo de trabajo.

Reflexión final

Realmente no hemos descubierto nada nuevo, la planificación es siempre una parte importante de cualquier tipo de tarea o proyecto, dedicando unos pocos minutos a pensar en los posibles problemas y objetivos podremos minimizar las horas perdidas y de improvisación.

En cuanto a las herramientas para la creación de bocetos y previas a nuestros diseños web, son realmente interesantes de cara a evitar discusiones tontas iniciales, ya que nos aleja de formas y colores y nos enfoca en lo importante, en la estructura y objetivo del diseño final. El tiempo es oro .

¡Nos vemos en el próximo artículo!

7 Themes WordPress para Fotógrafos Gratis

Adrián Mato — Tue, 31 Aug 2010 10:00:56 +0000

Esta vez sólo para fotógrafos

En muchas ocasiones se publican distintos artículos de recopilación de themes para WordPress, resaltando aquellos relacionados con blogs de noticias, tutoriales, etc.

En esta ocasión os presentamos 7 themes gratuítos que creemos son realmente interesantes para todos aquellos fotógrafos que simplemente quieren mostrar su trabajo acompañado de una pequeña descripción sobre sí mismos y sobre lo que capturan.

Dejo de enrrollarme, aquí va la colección .

AutoFocus+

Basado en un grid de 8 columnas y con un máximo de 800 pixels de ancho este theme realzará todas tus fotografías, toda la atención recaerá sobre ellas.

Descarga: Descargar theme
Demostración: Ver demostración online

Shaken & Stirred

Shaken Grid está especialmente diseñado para aquellos que necesitan una galería/portfolio. Se nos presenta con una grid líquida que aprovecha todo el ancho vertical y horizontal gracias al potente plugin jQuery Masonry.

Descarga: Descargar theme
Demostración: Ver demostración online

Mansion

En su descripción este theme se autoproclama como un theme para “photobloggers”. Una vez más otro diseño flexible en horizontal que aprovechará todo el espacio posible para mostrar nuestras imágenes.

Descarga: Descargar theme
Demostración: Ver demostración online

Monokrome

Monokrome muestra también de forma fluída las imágenes, aprovechando todo el ancho de nuestro navegador pero al contrario que el resto de recomendaciones, las entradas de texto cobran un poco más de importancia, la justa.

Descarga: Descargar theme
Demostración: Ver demostración online

FolioGrid

Descarga: Descargar theme
Demostración: Ver demostración online

Fotofolio Landscape

En tonos grises se nos presenta Fotofolio Landscape, un theme de ancho fijo (960 pixels) que nos permite introducir una pequeña bio acerca de nosotros a modo de “about me” y un splash de las últimas imágenes añadidas a nuestra galería.

Descarga: Descargar theme
Demostración: Ver demostración online

Fullscreen

Descarga: Descargar theme
Demostración: Ver demostración online

Y como siempre… ¡Nos vemos en la próxima publicación!

Fuentes de Letra Gratis y de Calidad Volumen #8

Adrián Mato — Fri, 13 Aug 2010 10:26:48 +0000

La importancia de las fuentes de letra

Es más que un diseño bonito, una fuente de letra ha de ser capaz de leerse fácilmente en una pantalla o en un trozo de papel y captar la atención del lector desde el primer instante. Debe comunicar nuestro mensaje con claridad.

Fuentes de letra en este volumen

Finance: 96 Iconos de Finanzas Gratis y de Calidad

Adrián Mato — Tue, 27 Jul 2010 11:29:42 +0000

¿Qué contiene el Set de Iconos?

El pack de iconos está diseñado para proyectos y aplicaciones web de finanzas, con un total de 96 iconos de un acabado visual muy cuidado y profesional.

El set de iconos de Finance está disponible en nada menos que todas estas resoluciones: 16×16, 24×24, 32×32, 48×48, 64×64, 128×128 y 256×256 pixels. Los formatos en los que son compartidos son .PNG transparente y .ICO para utilizar de forma gratuita en tus proyectos personales y comerciales (haciendo alusión mediante enlace).

Creo que lo mejor es que lo veáis vosotros mismos en la imagen previa .

Imagen Previa del Pack de Iconos

Como siempre, os dejo con una imagen previa de los iconos:

Como curiosidad comentar que la empresa Visual Pharm ha sido el creador de este pack, compartiéndolo con todos nosotros.

¡Espero le saquéis el mejor partido posible!

Tutoriales de Desarrollo y Diseño Web | Web.Ontuts » Recursos web

vanilla: theme corporativo y portfolio para WordPress

¿Qué es vanilla?

Algunas características destacadas de vanilla

¿Cómo puedo conseguir el theme?

Moskis Gems social pack: 180 iconos sociales

Esta vez es exclusivo

¿Qué contiene el Set de Iconos?

Imagen Previa del Pack de Iconos

iDroid: 52 iconos para móviles Android

¿Qué contiene el Set de Iconos?

Imagen Previa del Pack de Iconos

Fuentes de Letra Gratis y de Calidad Volumen #9

La importancia de las fuentes de letra

Fuentes de letra en este volumen

Raleway

Prociono

Orbitron

Goudy Bookletter 1911

Designer Icons: 12 iconos de calidad hechos a mano

¿Qué contiene el Set de Iconos?

Imagen Previa del Pack de Iconos

NES Theme: 9 increíbles iconos temáticos de videojuegos

¿Qué contiene el Set de Iconos?

Imagen Previa del Pack de Iconos

Planificación y Herramientas para tus diseños web

La importancia de planificar antes de actuar

Herramientas para planificación de diseños web

Balsamiq Mockups

HotGloo

Gliffy

iPlotz

Pencil Project

Lápiz & Papel

Reflexión final

7 Themes WordPress para Fotógrafos Gratis

Esta vez sólo para fotógrafos

AutoFocus+

Shaken & Stirred

Mansion

Monokrome

FolioGrid

Fotofolio Landscape

Fullscreen

Fuentes de Letra Gratis y de Calidad Volumen #8

La importancia de las fuentes de letra

Fuentes de letra en este volumen

St Marie

Piron

Code Free Font

akaDora

Finance: 96 Iconos de Finanzas Gratis y de Calidad

¿Qué contiene el Set de Iconos?

Imagen Previa del Pack de Iconos