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

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

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

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

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

Related posts:

1. Cuatro Libros sobre Desarrollo Web completamente Gratis
2. Iconos Gratis y de Calidad para E-Commerce
3. Developpers Icons: 105 Iconos Gratis para tu Toolbar
4. Once: 30 Iconos Web Gratis de Carácter General para tus Diseños

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

St Marie

• Autor: Sascha Timplan
• Descargar fuente

Piron

• Autor: Typedepot
• Descargar fuente

Code Free Font

• Autor: Fontfabric
• Descargar fuente

akaDora

• Autor: James D. Milligan y akaType
• Descargar fuente

Related posts:

1. Fuentes de Letra Gratis y de Calidad Volumen #1
2. Fuentes de Letra Gratis y de Calidad Volumen #3
3. Fuentes de Letra Gratis y de Calidad Volumen #7
4. Fuentes de Letra Gratis y de Calidad Volumen #6

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!

Related posts:

1. GiNUX: 86 Iconos de Calidad y Gratis
2. Iconos Gratis y de Calidad para E-Commerce
3. Watercolor: 36 Iconos estilo Acuarela Gratis
4. 23 Iconos de Tarjetas de Crédito Gratis y de Calidad

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

El set de iconos de GiNUX está disponible en iconos de 64×64 pixels con un claro interés hacia el estilo “Linux-Gnome”. 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 el autor pakistaní kyo-tux ha sido el creador de este pack, compartiéndolo con todos nosotros el mismo día de su cumpleaños a modo de regalo.

¡Espero le saquéis el mejor partido posible!

Related posts:

1. Finance: 96 Iconos de Finanzas Gratis y de Calidad
2. Watercolor: 36 Iconos estilo Acuarela Gratis
3. Iconos Gratis y de Calidad para E-Commerce
4. 23 Iconos de Tarjetas de Crédito Gratis y de Calidad

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

Luxi Sans

• Autor: Bigelow Holmes
• Clasificación: Sans Serif
• Descargar fuente

Conflomerfont

• Autor: Jay Hilgert
• Clasificación: Script
• Descargar fuente

Liberation Sans

• Autor: Red Hat
• Clasificación: Sans Serif
• Descargar fuente

Miso

• Autor: Mårten Nettelbladt
• Clasificación: Desconocida
• Descargar fuente

Related posts:

1. Fuentes de Letra Gratis y de Calidad Volumen #3
2. Fuentes de Letra Gratis y de Calidad Volumen #1
3. Fuentes de Letra Gratis y de Calidad Volumen #2
4. Fuentes de Letra Gratis y de Calidad Volumen #5

El pack de iconos está diseñado para proyectos y aplicaciones web de estilo visual “desenfadado” o incluso podríamos decir vintage, con un total de 36 iconos de un acabado visual lleno de color y muy cuidado.

El set de iconos de Watercolor está disponible en iconos de 256×256 pixels orientados a webs desenfadadas. El formato en el que son compartidos 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 el autor Elio Rivero ha sido el creador de este pack, compartiéndolo con todos nosotros el mismo día de su cumpleaños a modo de regalo.

¡Espero le saquéis el mejor partido posible!

Related posts:

1. Glyphish: 130 Fabulosos Iconos Gratis estilo iPhone
2. GiNUX: 86 Iconos de Calidad y Gratis
3. Finance: 96 Iconos de Finanzas Gratis y de Calidad
4. Developpers Icons: 105 Iconos Gratis para tu Toolbar

Con el tiempo y la experiencia vamos aprendiendo a sortear más y más problemas relacionados con el desarrollo web, pero siempre surgen nuevos obstáculos que nos harán perder mucho tiempo. El uso correcto de las distintas herramientas de depuración nos permitirá reducir esta pérdida de tiempo, permitiéndonos optimizar nuestro trabajo.

Los buenos proyectos web necesitan de las mejores herramientas para su desarrollo y depuración.

No importa cuál sea nuestro nivel, este tipo de herramientas son indispensables en nuestro día a día, pues nos ayudarán a analizar, depurar y optimizar las distintas áreas que componen nuestro proyecto.

En este caso nos centraremos en el navegador web Mozilla Firefox como principal herramienta para el desarrollo de nuestros proyectos.

Herramientas integradas en Firefox

Antes de comenzar, si todavía no has instalado Mozilla Firefox, estás tardando. No es que sea indispensable para seguir este artículo, pero seguro que te interesa echarle un vistazo a todo lo que vamos comentando .

Firefox incluye de base un extenso set de herramientas para desarrollo web, pero como veremos a lo largo de este artículo, su potencia se incrementa con una gran cantidad de plugins y herramientas de desarrollo adicionales. Todo esto nos permitirá mejorar nuestra calidad de trabajo, optimizando los tiempos de desarrollo.

Algunas de las principales herramientas integradas por defecto en el navegador son:

• Visor de código fuente.
• Información detallada de página.
• Consola de errores.

A continuación analizamos de forma ligera las distintas herramientas integradas para posteriormente continuar con los plugins y desarrollos de terceros. ¡Vamos a ello!

Visor de código fuente

Al igual que la mayoría de navegadores, Firefox permite visualizar el código fuente de una página. Pero al contrario que algunas soluciones, lo que hace es abrir una ventana integrada dentro del navegador, en lugar de enviarnos a un editor de código externo.

El visor de código fuente colorea los distintos elementos facilitando la lectura del mismo. Por si no fuese suficiente, seleccionando una porción concreta de la página podremos visualizar dicho contenido en lugar de tener que cargar todo el código de la página, teniendo una mayor claridad de lectura.

Como curiosidad comentar que también puede ser activado con la combinación de teclas: Control+U (Command+U en MAC).

Información detallada de página

Firefox permite visualizar información detallada de cada página web, así pues tendremos todo tipo de información en las distintas pestañas:

• General: Muestra entre otras cosas la URL, el tamaño, el modo de renderizado, etc.
• Medios: Muestra elementos media de toda la página: imágenes, iconos, etc.
• Canales: Muestra los canales de difusión: RSS, Atom, etc.
• Permisos: Muestra los permisos y permite activar / desactivar cómo se vería nuestra web sin carga de imágenes, cookies, ventanas emergentes, etc.
• Seguridad: Muestra la Identidad del sitio web, si la conexión está cifrada o no, privacidad y cookies, etc.

Esta es la vista previa de la herramienta:

A simple vista puede no ser suficiente información, pero para eso tenemos las extensiones que veremos a lo largo del artículo, permitiéndonos profundizar en el tipo de información que nos interese.

Al igual que la herramienta anterior, podremos activarla mediante teclas de acceso rápido: Control+I (Command+I en MAC).

Consola de errores

Firefox incorpora una consola de errores, permitiéndonos a los desarrolladores escribir y comprobar pequeñas porciones de javascript o código de otros archivos externos.

Además incorpora una interfaz para la utilización de componentes XPCOM (carga dinámica de scripts), detección de errores javascript y detección de errores CSS en la página web.

La combinación de teclas Control+Shift+J (Command+Shift+J en MAC) nos permite acceder directamente a la herramienta, en lugar del menú de firefox Herramientas > Consola de errores.

Ampliando las capacidades con las extensiones

Como comentábamos anteriormente, si bien Firefox incorpora algunas herramientas básicas para el desarrollo y depuración de nuestras páginas web, la verdadera potencia reside en la cantidad de plugins que nos permiten ampliar todo esto para Firefox.

Trataremos de ver las más recomendadas bajo mi punto de vista, y os comentaremos donde buscar otars q puedan ser de interes particular para vosotros. ¡Vamos a ello!

Web Developer Extension

Chris Pederick es el autor de esta extensión que añade una barra de opciones a nuestro Firefox con varias herramientas. También disponible para Google Chrome.

Entre sus características destacan el salientado de elementos de una página, muestra el tamaño de las imágenes, información sobre CSS y formularios, deshabilitado de ciertos elementos en la página y mucho más.

Consigue esta extensión: Descargar Web Developer Extension.

Extensiones de Accesibilidad: iCITA, Fangs y Accesibar

Cada día son más las personas que disfrutan de internet, pero también son muchos los desarrolladores que se olvidan de las personas con algún tipo de discapacidad.

El iCITA: Centro de Información Tecnológica y Accesibilidad web, recomienda a estas personas la instalación de la extensión Firefox Accesibility Extension. Como desarrolladores nos servirá para ver cómo verán los usuarios finales nuestra página web via este plugin, y corregir así posibles errores de accesibilidad.

A la hora de comprender y afrontar los diversos problemas de accesibilidad web es importante ponerse en la piel del usuario, simulando el escenario en nuestro propio equipo.

También podemos simular un lector de pantalla de texto plano con la extensión Fangs Screen Reader Emulator, por la misma razón que mencionábamos anteriormente: es importante simular y ponerse en la piel de las personas que utilizarán nuestra web.

Por último os recomiendo que le echéis un vistazo a la extensión Accesibar que provee de numerosas herramientas como: zoom a página completa, deshabilitado de imágenes, flash y javascript, cambios en espaciado de texto… etc.

Colores con Colorzilla

Herramienta basada en un cuentagotas al más puro estilo Photoshop. Pasando el puntero por encima de un elemento podremos obtener información de color, información de la ruta de acceso DOM, la posición horizontal y vertical (X, Y) respecto a un punto marcado, etc.

Consigue esta extensión: Descargar Colorzilla.

Cookies

En mayor o menor medida todos trabajamos con Cookies en nuestros proyectos, Add & Edit Cookies es el original nombre de esta extensión que por si no lo habías adivinado nos permite añadir y editar cookies para nuestra página web en desarrollo. Por supuesto esto incluye el manejo de tiempo de expiración y sus valores.

Consigue esta extensión: Descargar Add & Edit Cookes.

MeasureIt: ¿Cuánto mide esto?

Imagino que todos aquellos que habéis lidiado con problemas de maquetación siempre surge la misma pregunta ¿Cuánto mide esto? La primera opción que un servidor tomaba era la de capturar esa porción de pantalla, abrir la imagen en Photoshop y medirla.

Ciertamente no es el colmo de la productividad, para solventar esta pérdida de tiempo y ser más rápidos y eficaces tenemos MeasureIt, una extensión que permite medir en pixels los distintos elementos de una página.

Consigue esta extensión: Descargar MeasureIt.

Simulando y visualizando en otros navegadores

Este problema es también un clásico. Echando un vistazo al dock de mi iMac tengo ahora mismo instalados 4 navegadores nativos: Safari, Firefox, Chrome y Opera. Además están las máquinas virtuales Windows para las distintas versiones de Internet Explorer.

Para saber si se visualizará correctamente nuestra página web en navegadores que suelen ser “problemáticos” tenemos dos extensiones: OperaView y IE Tab.

Además, si queremos simular los distintos agentes web tenemos la extensión User Agent Switcher pudiendo seleccionar entre: Opera, Internet Explorer, iPhone, motores de búsqueda, etc.

Parámetros de página

A menudo necesitamos comprobar nuestras páginas web recibiendo distintos parámetros a los que responder de forma distinta en nuestro código, para ello tenemos dos extensiones: Live HTTP Headers y UrlParams.

Live HTTP Headers nos muestra información en tiempo real acerca de las cabeceras HTTP. Por otra parte, UrlParams muestra parámetros de formulario que se han enviado al servidor através de nuestro navegador, permitiendo el cambio o el añadido de parámetros para su reenvío.

Firebug: el todoterreno

Quizás los usuarios más experimentados se hayan estado preguntando todo el rato dónde estaba Firebug… pero es que no quería que esto se quedase en el típico artículo hablando de Firebug y menospreciando al resto de soluciones.

Firebug nos ayuda en numerosas formas, nos permite depurar AJAX, DHTML y Javascript. Muestra errores que ocurren durante el renderizado de página, permite inspeccionar de arriba abajo el DOM, el código CSS.

Consigue esta extensión: Descargar Firebug.

Reflexión final

Si bien no hemos cubierto todas las areas de desarrollo web, es un buen comienzo para adentrarse en el mundo de las extensiones para desarrolladores. Os recomiendo que os paséis por el directorio de extensiones y tratéis de buscar otras alternativas a las mencionadas que satisfagan vuestras necesidades.

¿Crees que hay mejores alternativas a las mencionadas? ¿Te gustaría recomendar alguna? Como siempre te invitamos a que participes y comentes .

¡Nos vemos en la próxima publicación!

No related posts.

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

Kilogram

• Autor: Nick Curtis
• Clasificación: Anagram
• Descargar fuente

Lobster font

• Autor: Pablo Impallari
• Clasificación: Condensed Script
• Descargar fuente

Ayita Pro

• Autor: Jim Ford
• Clasificación: Sans Serif
• Descargar fuente SemiBold y Descargar fuente Pro Thin Italic

Clementine Sketch font

• Autor: Teagan White
• Clasificación: Script
• Descargar fuente

Related posts:

1. Fuentes de Letra Gratis y de Calidad Volumen #3
2. Fuentes de Letra Gratis y de Calidad Volumen #1
3. Fuentes de Letra Gratis y de Calidad Volumen #7
4. Fuentes de Letra Gratis y de Calidad Volumen #4

El pack de iconos está especialmente diseñado para proyectos y aplicaciones web de desarrollo y contiene un total de 105 iconos de un acabado visual lleno de color y muy cuidado.

El set de iconos de Developpers Icons está disponible en iconos de 32×32 pixels orientados a aplicaciones de desarrollo. Los formatos en el que son compartidos son .PNG transparente, .ICO y .ICNS 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 el francés Olivier Charavel ha sido el creador de este pack, compartiéndolo con todos nosotros el mismo día de su cumpleaños a modo de regalo.

¡Espero le saquéis el mejor partido posible!

Related posts:

1. Iconos Gratis y de Calidad para E-Commerce
2. Once: 30 Iconos Web Gratis de Carácter General para tus Diseños
3. WooFunction: 178 Impresionantes Iconos Gratis para tus Diseños Web
4. Watercolor: 36 Iconos estilo Acuarela Gratis

El pack de iconos está especialmente diseñado para proyectos y aplicaciones web del ámbito de la medicina y contiene un total de 60 iconos de un acabado visual realmente logrado y elegante.

El set de iconos de Medical Series está disponible en iconos de 32×32 y 128×128 pixels orientados a aplicaciones médicas. El formato en el que son compartidos 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:

Desde aquí nos seguimos alegrando de que gente como los chicos de Centigrade confíen y apuesten también por compartir recursos para favorecer y facilitar a otros proyectos.

¡Espero le saquéis el mejor partido posible!

Related posts:

1. Developpers Icons: 105 Iconos Gratis para tu Toolbar
2. Iconos Gratis y de Calidad para E-Commerce
3. Once: 30 Iconos Web Gratis de Carácter General para tus Diseños
4. WooFunction: 178 Impresionantes Iconos Gratis para tus Diseños Web