Fotoflexer, editor de efectos para imágenes.

Aplicación web para trabajar nuestras imágenes de un modo sencillo.



Fotoflexer es un editor online con el que podremos añadir mejoras y efectos a nuestras imágenes de forma gratuita y rápida.
Esta aplicación se integra con diferentes redes sociales como Flickr, MySpace, Picassa, Facebook... para la importación y exportación de nuestras imágenes.
Entre sus principales funcionalidades destaca la posibilidad de modificar colores, invertirlos, seleccionar y redimensionar elementos, añadir animaciones, deformar cuerpos, aplicar texturas, incluir textos, trabajar con capas, eliminar ojos rojos, añadir efectos pop, cartoon, píxelado, mapa de calor, bordes borrosos, neón...etc.
Su manejo no presenta excesivas dificultades, simplemente cargar la imagen y empezar a trabajar con la misma a través de una sencilla interfaz.
Fotoflexer esta en constante evolución añadiendo nuevos efectos y herramientas de edición.

Galería de Patrones CSS3.

Lea Verou y un interesante recurso para mejorar nuestros diseños web.

CSS3 Patterns Gallery es una excelente galería de patrones realizados enteramente en CSS a cargo de @LeaVerou una de las diseñadoras con más prestifio mundial en el mundo del CSS3.
Ideales para optimizar al máximo un site este repositorio de recursos gratuitos listos para ser usados en cualquier proyecto web y prescindir de la utilización de imágenes para construir fondos.
Pese a la excelencia del trabajo realizado y el amplio soporte actual por los navegadores hay que tener en cuenta las limitaciones en versiones anteriores a Firefox 3.6, Safari 5.1, Opera 11.10+ o IE10.
Su uso es tan sencillo como acceder al site, buscar el patrón que mejor se adapta a nuestros intereses y seleccionarlo para obtener el código listo para pegar en nuestro proyecto.
Como complemento de lo anterior también es posible encontrar SVG Patterns Gallery un repostorio de patterns en formato SVG, listo para utilizar por cualquier diseñador.
CSS3 Patterns Gallery está disponible de forma completamente gratuita desde lea.verou.me.

Plugin jQuery que mejora la experiencia a la hora de hacer scroll.

AnimateScrol mejora tu web.

AnimateScroll es un plugin que permite añadir desplazamiento con diferentes efectos a nuestro website y con el que su creador, Ram Swaroop, ha pretendido mejorar el ya tradicional “volver arriba”.
Este recurso para desarrolladores permite personalizar el estilo de scroll con más de 30 variados efectos, además también permite controlar la velocidad de desplazamiento lo que da un resultado distinto según el caso.
Este plugin jQuery con el que “animar el scroll” no se limita al cuerpo completo de la página, sino que también puede ser elegido un elemento específico del wrapper o contenedor. AnimateScrol es recurso gratuito que puede resultar de interés para aquellos sites con una cantidad importante de contenidos de forma que el usuario que llega al final del documento pueda volver rápidamente y de forma divertida sin tener que desplazarse por todo la web de forma manual.
Interesados pueden acceder a completa documentación, demos, así como descarga de la última versión de AnimateScroll desde plugins.compzets.com/animatescroll.

WDD: todo tipo de recursos gratuitos para la web.

Recursos de diseño web gratuitos.

WebDesigner Depot es un popular blog en inglés sobre diseño y desarrollo web donde encontrar todo tipo de tutoriales y temas de actualidad.
Entre esta colección de contenidos hoy quereemos llamar la atención sobre una sección dedicada de forma íntegra a recursos gratuitos destinados a la web y conocidos como freebies, con los que cualquier usuario interesado va a poder acceder a su descarga sin necesidad de “pasar por caja”.
Entre los “regalos” que vamos a poder encontrar en WebDesigner Depot hay colecciones de iconos, texturas, plantillas de sitios web, patrones, botones y todo tipo de elementos de una interfaz gráfica. Además esta sección permanece en constante crecimiento por lo que nuevos recursos son añadidos cada cierto tiempo.
WDD es sin duda una plataforma imprescindible para todos aquellos que se dedican al diseño web resultando de especial utilidad para los amantes de los recursos gratuitos y de calidad.

Catapulty, tu web en cualquier navegador.

Herramienta para desarrolladores web cuyos trabajos pretenden ser cross browser.

Por todos es sabido que los navegadores web son productos creados por empresas o entidades tan dispares como Microsoft, La Fundación Mozilla o Google. Pese a que existen oranismos que definen cómo deben de ser tecnologías como HTML, CSS o Javascript, las diferencias entre los principales navegadores (también entre sus versiones) son más que evidentes.
Esto último genera más de un quebradero de cabeza para aquellos desarrolladores web cuyos trabajos pretenden que se vean de una forma correcta en cualquier navegador. Hasta la fecha cuando queremos probar cómo un proyecto web va a plasmarse en cada browser, solemos copiar y  pegar la URL en el navegador y luego cargamos.
Catapulty, es un sencillo bookmarklet que nos trae una solución para esta necesaria prueba de testeo reduciendo los pasos necesarios a la hora de copiar, pegar y pulsar "enter".
Hay 2 bookmarklets: Hit y Throw. Cuando pulsamos " Throw ", la URL a cargar en otros navegadores es almacenada por el servicio y cuando presionamos "Hit" en esos navegadores, la URL se carga allí. Así de sencillo.

Flipclock, añade una cuenta regresiva en tu web.

Interesante herramienta para presentación de un evento o producto.

Flipclock es una biblioteca javascript para la implementación de distintos relojes, contadores o alarmas en nuestro proyecto web.
Especialmente útil para el lanzamiento de nuevos productos o eventos, Flipclock logra de manera ágil y sencilla llamar la atención de nuestros usuarios sobre la llegada de alguna novedad.
Este proyecto que requiere jQuery 1.7 o superior y prefixfree.js, se puede personalizar utilizando hojas de estilo, y dispone de una sintaxis sencilla que permite su aprovechamiento por casi cualquier desarrollador web.
Por si fuera poco,Flipclock ofrece completa documentación, características y ejemplos desde la página web oficial del proyecto.

Custom 404 personaliza páginas de error en WordPress.

Plugin que nos ayuda cuando un usuario escribe de forma incorrecta una URL de nuestro sitio.

Custom 404 permite a cualquier webmaster reconducir a los usuarios de su WordPress que por cualquier razón vayan a dar a la conocida página de error 404.
Este plugin permite de acuerdo a un estilo general, configurar o ajustar ciertos parámetros para tener una sección de contenido no encontrado personalizada a nuestros gustos e intereses de forma que podamos dar una mejor experiencia de usuario al no hacerle sentir tan incomodo al mismo tiempo que reducimos la tasa de rebote en nuestra web.
Entre los parámetros que podemos configurar encontramos el color de fondo de la página de error 404, el estilo de fondo, la imagen ofrecida y el texto.
De fácil manejo y completamente gratuita, la última versión de Custom 404 está disponible para cualquier interesado desde wordpress.org

Background Labs, recursos gratuitos para diseñadores web.

Interesantes patrones, texturas y gráficos con los que mejorar nuestros proyecto web.

Background Labs es uno de aquellos favoritos que siempre debemos tener a mano a la hora de personalizar un website, blog o incluso nuestro perfil de Twitter.
En este repositorio web en constante crecimiento encontramos una amplia gama de patrones, texturas y gráficos ordenados de acuerdo a categorías (más populares, temáticas, añadidos recientemente,...) para hacer más sencillo la localización de aquel que nos interese.
Además de lo anterior Background Labs permite filtrar la búsqueda del recurso que más nos interese por colores, de forma que buscar, encontrar y descargar el patrón o gtextura que necesitamos para nuestro proyecto web no pueda ser más sencillo.
Muy recomendable para cualquier diseñador o webmaster que busque faciltar su trabajo, este laboratorio de fondos está disponible de forma completamente gratuita desdewww.backgroundlabs.com.

Zepto.js una alternativa liviana a jQuery.

Librería Javascript orientada al mundo móvil.

Zepto.js es un framework Javascript que con poco más de 5Kbs es una alternativa compatible con jQuery especialmente dirigida a determinados entornos exigentes.
Este proyecto open source liberada bajo licencia MIT que usa la misma sintaxis que jQuery ofrece una estructura completamente modular que nos permite cargar únicamente aquellos archivos que necesitamos en cada parte concreta de nuestra aplicación.
Esta librería interesante para aplicaciones móviles donde reducir al máximo la transferencia de datos ofrece soporte con Safari 5+, Chrome 5+, Mozilla Firefox 4+, Opera 10+, y practicamente cualquier navegador basado en WebKit.
Interesados pueden encontrar completa documentación de la versión estable de Zepto.js desde zeptojs.com.

Herramienta para aumentar el trafico web.

Aumenta tú tráfico web con la herramienta botón de invitar amigos.
Sin lugar a dudas Free Tell a Friend y AddToAny En español (Recomendado en español) son potentes herramientas a la hora de promover tú web y por ende traer visitas, es una web donde tienes la facilidad de poder crear un botón que contiene una cantidad de opciones para que los usuarios inviten a sus amigos a navegar por tú web o blog. Entre las opciones que trae este botón se destacan las siguientes:

1) Importar todos los contactos directamente desde una cuenta de correos Gmail, yahoo o Hotmail, con solo introducir el usuario y contraseña.

2) Enviar mensajes a 5 personas directamente a los correos electrónicos, posee 5 campos para introducir los mails de los amigos que quieras invitar a tú site.

3) Te da la posibilidad de compartir tú contenido directamente con otras redes sociales,con más de 50 opciones, desde las más importantes hasta las menos relevantes.

La desventaja es que está en inglés , pero no hay que ser un bilingüe para poder utilizar esta herramienta.

Si deseas obtener el botón para incluirlo en tú web, ingresa con pinchar esta imagen



Pero hay otra opción en español esa es la ventaja con respecto a Free Tell a Friend, también es muy buena, para entrar y crear tú botón entra en la imagen

Como lograr un diseño web efectivo.

Infografía que permite sacar el máximo rendimiento a la página de inicio de nuestra web.

Un diseño web se compone de varios elementos, que de forma conjunta trabajan para lograr un mismo objetivo independientemente de si el site que los incluye pretende crear una comunidad, vender un producto, o promocionar un servicio.
Todas las piezas de nuestro diseño deben complementarse entre sí de una manera que sea capaz de crear una buena experiencia para el usuario. La falta de sintonia de sus elementos puede provocar una reducción o perdida de tráfico, una merma en la fidelidad o una reducción en las ventas.
Si no somos capaces de ejecutar correctamente desde el color, tipografía, usabilidad, links..... dificilmente lograremos que nuestro diseño web alcance el objetivo para que el fue creado. Es por ello que hoy presentamos una infografía con la que ayudarnos a mejorar nuestras posibilidades a la hora de crear un mejor diseño web.
The anatomy of an effective Web Design es una imagen infográfica creada por los chicos de Killerinfographics que podemos visualizar de forma completa desde killerinfographics.submitinfographics.com.

Simply Testable, valida con 1 click el código de tu website.

Completo sistema de validación de un website de forma gratuita.

Muchos de los desarrolladores que desean cumplir con las mejores prácticas y estandares web llevan a cabo la validación de su página web a través de W3C. Aunque este trabajo no plantea una excesiva dificultad técnica, cuando nuestro proyecto es un site de varias páginas web, puede llegar a convertirse en un trabajo tedioso ya que la validación se lleva a cabo documento por documento.
Simply Testable es una herramienta interesante para el desarrollador front-end con la que ahorrarnos un importante tiempo a la hora de verificar el código de todas las páginas que forman parte de nuestro site.
Para validar nuestro proyecto web de forma completa simplemente debemos introducir la URL de la home y seleccionar "Test your site now" para que se lleve a cabo en tiempo real el mencionado test de Validación del HTML conforme al estándar del W3C. Además de lo anterior Simply Testable también llevará a cabo comprobaciones de enlaces rotos, presencia del archivo robots.txt o detección de la inclusión de un favicon.
Los informes ofrecidos por esta herramienta gratuita incluyen los errores de cada URL con explicaciones (en inglés) para que podamos ir a través de ellos y solucionar cada uno.
Simply Testable es una utilidad en constante mejora que ya ha anunciado que trabaja en la validación CSS y el análisis JavaScript como características planificada para un futuro próximo.

Wappalyzer, ¿quieres saber qué tecnología usa una web?

Herramienta que descubre qué sóftware utiliza un determinado website.

Wappalyzer es una extensión del navegador que nos muestra qué herramientas y tecnologías son las reponsables de aquellas webs que por cualquier razón nos han llamado la atención.
Entre otras posibilidades esta utilidad detecta que sistema de gestión de contenido, CDN, framework Javascript, sistema de gestión de bases de datos, servidor web, lenguajes de programación o incluso widgets usa un determinado website.
Tras una primer periodo temporal en el que Wappalyzer.com solo soportaba el navegador Firefox, ahora esta extensión también funciona con Chrome.
Además de lo anterior si no eres usuario de los navegadores de Mozilla o Google, esta herramienta también está disponible en forma de bookmarklet aunque todavía en fase beta, para que cualquiera puede usarla con tan solo un par de clicks.
Muy interesante para cualquier webmaster interesado en conocer de primera mano algunos de los secretos de nuestra competencia Wappalyzer está disponible de forma completamente gratuita para su descarga desde wappalyzer.com.

Google crea gratis una versión móvil de tu web.

Google nos ayuda a adaptar un sitio a la realidad web de hoy en día.

Google, la compañía líder de Internet en colaboración con dispone de un proyecto con el que adaptar nuestro site a una realidad que hace tiempo que ya es algo más que una tendencia en la web.
En este sentido varios son los estudios e informes que apuntan datos como que en 2013 se calcula que habrá mas usuarios navegando en Internet desde dispositivos móviles que desde equipos de escritorio.
Como debes saber, el hecho de que tus usuarios puedan ver tu web desde su smartphone o tablet no significa que ofrezcas una experiencia de usuario móvil capaz de responder a características como rapidez, simplicidad de navegación, manejo táctil o adpatabilidad a diferentes resoluciones y dispositivos.
Ahora, para convertir tu web en móvil Google ha llevado a cabo un proyecto desde el qjue simplemente debemos realizar un sencillo test desde www.haztuwebmovil.com para comprobar que experiencia móvil estamos ofreciendo en la actualidad y posteriormente seguir los pasos indicados en www.howtogomo.com para crear una versión de tu web a adaptada a smartphones, tablets y cualquier dispositivo móvil.
Esta interesante plataforma para adaptar tu negocio a la realidad de hoy se puede llevar a cabo sin necesidad de conocimientos técnicos ni de programación y de una manera completamente gratuita.
Además de lo anterior desde www.haztuwebmovil.com vamos a poder encontrar interesante información en español acerca de las ventajas de adaptarse al móvil, guías sectoriales y recursos adicionales para hacer nuestra web móvil.

LoremPixel: imágenes de prueba para tu diseño web.

Interesante servicio que rellena nuestra web con imagenes de prueba.

LoremPixel bautizado de forma extraoficial como el Lorem Ipsum de las imágenes es un nuevo servicio gratuito con el que de forma sencilla vamos a poder introducir imágenes de relleno en nuestro diseño.
Este generados de imagenes de prueba resultará especialmente interesante para todos aquellos que quieren tener una experiencia aproximada del resultado final del proyecto en el que estén trabajando.
LoremPixel ofrece dos opciones para lograr nuestro objetivo y evitarnos perder tiempo en busca de imagenes de prueba, por un lado podemos utilizar directamente su generador para obtener imágenes del tamaño, categoría y color deseado, o también podemos incluir una determinada imagen en nuestro diseño con la etiqueta img src y una de las 6 URLS que son ofrecidas para obtener una determinada configuración de imagenes.
Las imágenes proporcionadas son únicamente para fines de diseño y se distribuyen bajo la licencia Creative Commons. Caso de querer usar cualquiera de esta imagen con otro proposito debemos recibir la correspondiente autorización.
Este servicio online completamente gratuito ha ofrecido cerca de 200 millones de imagenes a dieñadores web de todo el mundo.

Screenfly, simulador de resoluciones para webs.

Interesante herramienta muestra cómo nos ven nuestros usuarios desde todo tipo de dispositivos.

La web multidispositivo hace tiempo que ya está aquí, no obstante todavía existe un déficit en la comunidad de webs en español en cuanto a la aplicación de técnicas como Responsive Web Design.
Screenfly es un herramienta online desarrollada por Quicktools que nos permite visualizar un sitio en resoluciones de navegadores de escritorio, tablets, smatphones y hasta los navegadores presentes en algunos televisores y así llegar a ser consciente de algunos déficits de nuestra web.
Simplemente con introducir la URL de nuestro site o blog, esta herramienta simula de forma automática la visualización que un usuario tiene en múltiples resoluciones y dispositivos dando una idea exacta de la experiencia que estamos ofreciendo a nuestros usuarios.
Además de lo anterior el equipo de Quicktools también dispone de una aplicación web llamada Wires con la que ayudar a construir wireframes directamente desde el navegador si necesidad de plug-ins, aplicaciones de Flash.....
Screenfly y Wires están disponible de forma gratuita para cualquier webmaster interesado, sin necesidad de registro previo o descarga de software.

Dynamic Drive: recurso importantisimo para todo diseñador web.

Colección de scripts Javascript gratuitos.

Les presentamos una interesante plataforma llamada Dynamic Drive, con la que ayudar a todo desarrollador y/o diseñador web, especialmente de aquellos con menos experiencia, que deseen mejorar su proyecto de una forma sencilla y profesional.
Dynamic Drive trae una interesante colección de scripts gratuitos que aprovechan de la tecnología DHTML para traer una mayor interactividad a un sitio web. Todos los scripts de esta plataforma han sido escritos en JavaScript y son accesibles sin necesidad de registro.
Es interesante señalar que DHTML es una tecnología web que permite una mejora del dinamismo de una página web utilizando una combinación HTML, JavaScript y CSS de forma especialmente interesante en elementos que antes se consideraban inmutables una vez cargada la página, como textos, estilos de página (color de fuente, tamaño...), o posición de los elementos.
Soportado por los principales navegadores web (Ojo!! ver siempre la ficha de cada script), Dynamic Drive no solo incluye sus propios scripts sino que un intento de renovación y actualización constante, invita a toda la comunidad de desarrolladores a que presente nuevos scripts con los que hacer crecer la cantidad y calidad de los ya ofrecidos en esta plataforma.
Clasificados por categorías para hacer más sencillo el acceso a todos estos recursos gratuitos, vamos a poder encontrar scripts relacionados con imagenes, formularios, efectos en documentos, calendarios, scroll, texto animado, mouse, links, tooltips...

Wakanda Studio

Herramienta para el desarrollo de paginas web para dispositivos móviles.

Las aplicaciones modernos de hoy en día requieren de un rápido desarrollo, así como soporte para múltiples dispositivos y herramientas para el almacenamiento en la nube.

Con este objetivo naceWakanda Studio. Una herramienta creada completamente en Javascritp y como principal objetivo la creación de aplicaciones y sitios para dispositivos móviles.

Además cabe destacar que Wakanda es un proyecto de código abierto lo que la hace más interesante si cabe.

Wakanda Studio viene con un editor gráfico, un editor de código y la posibilidad de trabajar con base de datos de forma muy sencilla e intuitiva, todo ello además de forma visual gracias a su gran interfaz gráfica.

Te permite trabajar con HTML5 y CSS3, además de crear widgets de cara al trabajo con servidores. Otra de las características interesantes que nos ofrece es la creación se usuarios y todo lo relacionado con la seguridad.

Para terminar tenemos que decir que además consta de un servidor donde podemos subir nuestro trabajo y realizar pruebas para ver su funcionamiento, su interfaz gráfica, etc.

En definitiva Wakanda es una buena herramienta para la creación de pequeños y medianos sitios de una forma rápida y cómoda.

iConvert, a un paso de crear tu icono.

Utilidad online para crear iconos a partir de una de nuestras imágenes.
Hoy les presento un interesante recurso con el que facilitar el trabajo de todo diseñador web.
iConvert es una aplicación online que de forma gratuita y sencilla nos permite crear iconos compatibles con los principales sistemas operativos (Windows, Mac OS X y Linux).
Gracias una sencilla interfaz el manejo de esta utilidad no plantea ninguna dificultad, simplemente selecciona desde tu ordenador una imagen compatible y elige la conversión a los formatos soportados para obtener automáticamente el link de descarga.
iConvert soporta formatos de imágenes .icns, .ico, .png, .svg, .tif, .jpg, .bmp, .tga y .cur para devolver iconos en .icns, .ico o .png.
Esta plataforma para abierta para todo tipo de usuarios sin necesidad de descargas ni registro previo ofrece además una colección de iconos listos para ser implementados en cualquiera de nuestros proyectos.

Responsive Grid System, crea tu sitio en Responsive

Recurso para quienes deseen conseguir un diseño adaptable a todo tipo de resoluciones y dispositivos.

Tal y como se autodefine, desde la propia página del recurso, Responsive Grid System ni es un framework ni Boilerplate sino simplemente una forma sencilla y rápida de crear websites Responsive.
En resumidas cuentas Responsive Grid System es una plantilla en forma de grid para trabajar con diseños adaptables que nos facilita y agiliza la creación de diseños adaptables a todas las resoluciones.
El sistema no nos limita a tener 12, 16 o 24 columnas, sino que permite trabajar con cualquier número de estas además de poder escalar a cualquier ancho. Una de las características que resultan más interesante es que en lugar de ajustar nuestro contenido al grid, con Responsive Grid System podremos hacer que este se adapte al contenido, suena bien, no?
Si quieres empezar a probar Responsive Grid System o simplemente acceder a más información, demos, ejemplos de quien usa este recurso y cualquier otra documentación puedes acceder desde www.responsivegridsystem.com.
Este interesante recurso para diseñadores web está disponible de forma abierta y sin necesidad de registro.