Las 10 tipografías más usadas por diseñadores web.

Interesante infografía sobre las fuentes de tipográfica.

Alguna vez te has preguntado qué fuentes prefieren usar otros diseñadores Web a la hora de llevar a cabo sus proyectos? Alguna vez te has preguntado si tu elección tipográfica puede ayudar a que tu proyecto web se distinga de los demas?
Los responsables de Hongkiat.com han llevado a cabo un pequeño estudio a partir de datos obtenidos de una consulta con 34 diseñadores web con cierta relevancia de 14 países distintos en los que se les ha preguntado acerca de sus fuentes favoritas.
Este estudio ha permitido obtener algunas informaciones interesantes reflejadas en 3 listados acerca de las fuentes tipográficas que mas gustan a los diseñadores, fuentes gratuitas más populares y las fuentes premium más populares.
Para una rápida compresión de los datos recopilados este estudio ha sido plasmado en una infografía que podemos encontrar en www.hongkiat.como .
De lo incluido en esta clasificación destaca la posición de Myriad Pro y Helvetica aunque tambien Arial o Gotham.

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.

Iconos gratuitos de calidad con Batch.

Colección de recursos libres para usar en nuestros diseños web.

Batch es un conjunto de iconos de alta calidad pensados para hacer más fácil el trabajo de todos aquellos interesados en mejorar la experiencia de su website.
Esta colección de uso completamente gratuito tanto en proyectos libres como comerciales permite embellecer y mejorar la usabilidad de nuestra web o interfaz de usuario.
Pese a tratarse de una plataforma de recursos gratuitos Batch comenzó siendo un proyecto comercial creado por Adam Whitcroft @AdamWhitcroft que ofrecia sus iconos a cambio de precio.
Actualmente hay más de 300 iconos en formato PSD, SVGs (128x128) y PNGs (16x16, 32x32, 64x64) aunque Batch es un proyecto vivo que está en constante actualización y mejora.

Traductor con banderas animadas para tu blog o web.

Traductor para web o blog muy vistoso.

Si tú sitio es frecuentemente visitado por usuarios que no hablan el Español, acá les tengo un traductor google pero con banderas animadas, un atractivo recurso que a diferencia de otros traductores no son imágenes estáticas, son gif de cada bandera que representa un idioma, este traductor posee además traducciones en doce idiomas principales, desde Chino, Francés, Holandés, Alemán, Portugués, Árabe, Japones, Italiano, Inglés, Español. Koreano y Ruso. Solo te pido que no modifiques el código para que funcione.


ACÁ ESTÁ LA VISTA PREVIA DE COMO QUEDARÍA TÚ TRADUCTOR

Para agregarlo en tu sitio solo debes copiar y pegar el código HTML de bajo

<center> <center> <br /> <style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style><br /> <div> <br /> <a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;" rel="nofollow" target="_blank" title="English"><img align="absBottom" alt="English" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Gran-Bretana.gif" style="cursor: pointer; margin-right: 8px;" title="English" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;" rel="nofollow" target="_blank" title="French"><img align="absBottom" alt="French" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Francia.gif" style="cursor: pointer; margin-right: 8px;" title="French" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;" rel="nofollow" target="_blank" title="German"><img align="absBottom" alt="German" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Alemania.gif" style="cursor: pointer; margin-right: 8px;" title="German" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;" rel="nofollow" target="_blank" title="Spain"><img align="absBottom" alt="Spain" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Espana.gif" style="cursor: pointer; margin-right: 8px;" title="Spain" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;" rel="nofollow" target="_blank" title="Italian"><img align="absBottom" alt="Italian" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Italia.gif" style="cursor: pointer; margin-right: 8px;" title="Italian" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;" rel="nofollow" target="_blank" title="Dutch"><img align="absBottom" alt="Dutch" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Paises%20Bajos.gif" style="cursor: pointer; margin-right: 8px;" title="Dutch" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;" rel="nofollow" target="_blank" title="Russian"><img align="absBottom" alt="Russian" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Rusia.gif" style="cursor: pointer; margin-right: 8px;" title="Russian" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;" rel="nofollow" target="_blank" title="Portuguese"><img align="absBottom" alt="Portuguese" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Portugal.gif" style="cursor: pointer; margin-right: 8px;" title="Portuguese" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;" rel="nofollow" target="_blank" title="Japanese"><img align="absBottom" alt="Japanese" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Japon.gif" style="cursor: pointer; margin-right: 8px;" title="Japanese" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;" rel="nofollow" target="_blank" title="Korean"><img align="absBottom" alt="Korean" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Corea%20del%20Sur.gif" style="cursor: pointer; margin-right: 8px;" title="Korean" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;" rel="nofollow" target="_blank" title="Arabic"><img align="absBottom" alt="Arabic" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/Arabia%20Saudi.gif" style="cursor: pointer; margin-right: 8px;" title="Arabic" width="24" /></a><a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=8922739645700617993#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absBottom" alt="Chinese Simplified" border="0" height="24" src="http://www.100pies.net/Gifs/Banderas/Banderas/China.gif" style="cursor: pointer; margin-right: 8px;" title="Chinese Simplified" width="24" /></a> </div> <br /> <div 0px="" 0pxãƒâ¢??="" 3px="" style="margin: 8px;">  </div> </center> </center>

Importancia de la ortografía en el posicionamiento SEO.

¿Cómo valora Google la ortografía de un sitio en la determinación de su calidad?

Tras la última actualización del algoritmo de Google con el nombre de Panda, Webmasters de todo el mundo están preocupados por encontrar las claves que les permitan mejorar el posicionamiento de sus páginas web.
Las informaciones de la compañía propietaria del buscador líder de Internet nunca han brillado por ser demasiados claras al respecto, lo que unido a que se cuentan hasta 200 parámetros, la mayoría secretos, con los que determinar la relevancia y calidad de un sitio web, hacen que la tarea de controlar los cambios de nuestro site en la página de resultados de Google sea algo más que ardua.
En este sentido y para sorpresa de lo que muchos pensabamos, Google ha señalado que no considera como un indicador "directo" de la clasificación en su página de resultados, la corrección o falta de ella con la que se escribe un texto en nuestro site.
No obstante lo anterior y haciendo uso de su característica ambigüedad, Google apunta que existe una relación obvia entre los sitios web con mayor calidad y el uso de una correcta ortografía y gramática, de la misma forma forma que los sites con peor clasificación suelen estar peor escritos.

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.

SEO: Google premia la novedad.

Claves en el posicionamiento de resultados por el mayor buscador de Internet.

Conocer como Google interpreta la búsqueda realizada por un usuario es un elemento fundamental para todo webmaster interesado en obtener el mejor rendimiento de su página web.
Pese a que muchos de los parámetros del algoritmo de Google son secretos se conocen ciertas consideraciones con las que determinar un mejor o peor posicionamiento.
En este sentido y dada la increíble cantidad de información que se mueve hoy en día, es oportuno confirmar la mayor relevancia que Google otorga a la información reciente frente al resto. De esta forma si tipeamos en el buscador la palabra clave Juegos Olímpicos, las primeras posiciones son ocupadas por resultados que nos ofrecen información sobre el evento deportivo que tendrá lugar el próximo año en Londres frente a, por ejemplo, las olimpiadas que se celebraron en Barcelona en el 92.
La mayor relevancia de la información más reciente implementada en Google Caffeine, continua estando vigente tras la llegada de Google Panda, último algoritmo de Google que ha destacado por poner especial énfasis en primar aquellos sites que ofrecen contenidos considerados de calidad.
La mejor posición de informaciones actuales toma especial fuerza cuando se trata de eventos o acontecimientos que suceden de forma regular (ej:elecciones), para la búsqueda de productos en constante evolución (ej:mejor cámara fotográfica digital) o para la consulta de temas de actualidad (ej:cierre NBA).
Junto a las anteriores consideraciones hay que señalar que existen hasta 200 parámetros con los que determinar la relevancia de un sitio web y que son también claves la hora de llevar a cabo el posicionamiento definitivo en la página de resultados de Google.

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.

Code Snipets: el código para tus proyectos web.

Coleción de fragmentos de código con los que mejorar tu trabajo de desarrollador web.

Los chicos de CSS Tricks, plataforma web para todos aquellos interesados en mejorar sus habilidades y conocimientos web, tienen una interesante biblioteca abierta de snipets lista para ser usados por cualquier desarrollador y/o diseñador interesado.
Esta recopilación de fragmentos de código es un recurso muy recomendable para tenerlo siempre a mano e incluye snippets de tecnolologias y lenguajes como CSS, PHP, jQuery, WordPress, htaccess, o JavaScript.
Entre los snippets que podemos encontrar destaca el centrado vertical en CSS, la creacion de tablas o listas con efecto, almacenamiento de los errores de PHP en un archivo o cómo evitar cacheo de CSS en WordPress.
Así que si estás buscando una amplio repositorio de código con una importante cantidad de snippets listos para ser implementados en tu desarrollo, noi dejes de darle un vistazo a css-tricks.com/snippets.

COLOURlovers: color, diseño y web.

Plataforma online dedicada al diseño.

COLOURlovers ofrece a todo aquel interesado en el diseño web una gran cantidad de información y recursos relacionados con el color con los que facilitar de forma importante el proceso creativo.Si simplemente estamos buscando una paleta de colores para incluir en nuestro proyecto, deseamos compartir un patrón, o encontrar información sobre la última tendencia cromática COLOURlovers dispone de las herramientas y servicios para ayudar a cualquier diseñador interesado.
Esta popular plataforma posee cierta dinámica de red social y cuenta con más de 2 millones de usuarios, 5.6 millones de colores, 2.2 millones de paletas y 2,6 millones de patrones.
Desde la inspiración del diseño hasta la ejecución todos los contenidos son ofrecidos por categorías a través de una interfaz bien organizada y de fácil manejo que permitirá sacarle partido tanto a usuarios con más experiencia como a aquellos que dan sus primeros pasos.

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

Skrollr, increible scroll para tu web.

Librería Javascript para animar nuestro website mientras hacemos scroll.

Skrollr es una herramienta con la que mejora sustancialmente nuestra web gracias al efecto parallax.
Esta pequeña librería Javascript (3k zipeada) permite animar las propiedades CSS de cualquier elemento de acuerdo a la posición de la barra de desplazamiento horizontal.
Skrollr es una utilidad open source interesante para aquellos diseñadores que busquen mejorar la experiencia de navegación de sus usuarios y que no tienen demasiada experiencia en JavaScript ya que casi todo es definido dentro de los elementos HTML.
Scroll parallax, es un tipo de desplazamiento (scroll) tan de moda últimamente y que es capaz de crear una ilusión de profundidad al mover los elementos web en diferentes velocidades.
Interesados en más información, demos, ejemplos y descarga de Skrollr pueden hacerlo desde prinzhorn.github.com/skrollr/

Vanity, recursos jQuery para tu site.

Mejora tu website gracias a esta colección de recursos gratuitos para desarrolladores.

Vanity es un set de plugins jQuery creados por el responsable de 52Framework.
Esta interesante colección que además está en constante evolución incluye por el momento 7 plugins como jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder, y jCollapse, con las que simplificar muchas de las tareas más comunes de un desarrollador front-end.Creadas con la idea de ofrecer una colección de recursos funcionales, livianos y sencillos, capaces de ser soportados por los principales navegadores web las distintas herramientas que podemos encontrar en Vanity están disponibles todavía en fase de desarrollo.

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.

Generador de gradientes de CSS3.

Herramienta para crear gradientes de la forma más sencilla.

CSS3 Gradient Generator es un sencillo generador online de gradientes CSS con el que ayudarnos en nuestro trabajo como diseñadores web y que resultará interesante para tenerlo siempre a mano desde nuestros favoritos.
Su manejo no representa ninguna dificultad gracias a su sencilla interfaz, simplemente especifica los parámetros de color, dirección y formato, y el sistema genera el código de la gradiente de forma automática.
CSS3 Gradient Generator es una herramienta gratuita que no requiere de registro previo para su uso y que nos recuerda a la utilidad desarrollada por los creadores de la extensión ColorZilla.

Dynamic Drive: recurso imprescindible para todo webmaster.

Colección de scripts Javascript gratuitos para mejorar la calidad del proyecto web.

Les presentamos una nueva e 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...

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.

Araudi: Indice de Recursos CSS.

Plataforma donde encontrar múltiples ejemplos de ayuda para nuestros propios proyectos web.

¿Buscas un indice de recursos CSS que facilite tu trabajo como diseñador web?
Araudi.net muestra una importante colección de ejemplos acerca de cómo llevar a cabo columnas equilibradas, cajas height 100%, fondos de página elástico deformable, cambio de texto al pasar el ratón, esquinas redondeadas sin imagen, botón de menú activo con CSS, menús desplegables 100% CSS, efectos de opacidad o transparencia, así como otras muchas e interesantes posibilidades.
Integramente en HTML y CSS, este repositorio de recursos es ofrecido de forma gratuita para todo aquel diseñador que tenga interés de llevarlo a cabo en su propio proyecto web.
Además de lo anterior cada ejemplo de Araudi.net se encuentra en español permitiéndo superar los problemas que en ocasiones se generan para aquellos con menos dominio del inglés.

Google hace más rápido tu sitio con PageSpeed 2.0

El navegador Chrome ya dispone de una nueva versión final.
PageSpeed 2.0 es un complemento para desarrolladores web con el que medir y optimizar el rendimiento de nuestra página web.
Un año después del lanzamiento inicial de esta nueva versión de la herramienta desarrollada por Google, PageSpeed viene con varias mejoras y novedades que sin embargo no afectán a su manejo y funcionamiento. Si además ya estás familiarizado con las Chrome Developer Tools sabrás como sacarle el mejor partido a esta herramienta gratuita.
Entre los cambios más importantes de PageSpeed 2.0 encontramos que ademas de analizar todos los aspectos de la carga de nuestros sitios web y ofrecernos las oportunas sugerencias acerca de aquellos que tenemos que mejorar, ahora gracias al uso del SDK de Insights, la extensión es capaz de optimizar automáticamente las imágenes, las CSS, JavaScript y el código HTML, ofreciendo versiones de los mismos ya mejorados que podremos integrar de forma sencilla en un website.
Interesados pueden acceder a más información y descarga de PageSpeed 2.0, una de las herramientas más interesantes para optimizar la velocidad de carga de nuestro site, desde chrome.google.com.
Además de lo anterior, no está demás recordar que aquellos que deseen disponer de PageSpeed desde Chrome pueden acceder a una guía de instalación y uso de este complemento desde code.google.com.

Plantillas gratuitas en HTML5 y CSS.

Colección de templates listos para todo tipo de proyectos web.



Las plantillas en HTML5 son uno de los recursos para diseñadores web más buscados en la actualidad no solo porque ofrecen una forma rápida y fácil para lograr la creación de un website, sino porque también ofrecen una ruta fantástica para explorar y entender la sintaxis HTML5.
Esta colección realizada por speckyboy reúne 15 nuevas y variadas plantillas gratuitas que pueden ser usadas para todo tipo de proyectos personales y/o comerciales sin ningún tipo de restricciones.
Cada uno de los recursos ofrecidos dispone de un enlace de descarga junto a otro donde previsualizar el template seleccionado.

IntenseDebate: sistema de comentarios para blogs.

Servicio web permite disponer de forma gratuita de un completo sistema de comentarios.

IntenseDebate es un sistema externo de comentarios que permite sustituir al que por defecto incluye tu CMS.

Entre las características más destacadas destaca la posibilidad comentar con servicios como Twitter, Facebook OpenID, o simplemente como anónimo, recibir emails que nos alerten de una respuesta a un comentario o disponer de un sistema de valoración de los comentarios realizados, además como administradores del sistema dispondremos de numerosas opciones de personalización del diseño, moderación, edición, ordenación y borrado de comentarios.

IntenseDebate es posible integrarlo en plataformas como WordPress, Blogger, TyePad y Tumblr. Una vez creada una cuenta y completado el oportuno formulario podremos instalar el widget que añadirá a nuestro blog el sistema de comentarios Intensedebate.
En los comentarios de esta plataforma se permite el uso de algunos códigos HTML que nos darán la posibilidad de incluir imágenes o vídeos de Youtube. Además IntenseDebate dispone de algunos plugins que permiten ampliar y personalizar la funcionalidad de esta plataforma de comentarios.

Zbugs, acelera tu web con un click.

Servicio online nos permite optmizar la carga de nuestra web.



Zbugs, es una aplicación web desde la que vamos a poder analizar nuestro sitio web para saber aquellos archivos que al no estar debidamente optimizados consumen un ancho de banda excesivo.
Este servicio online gratuito nos permite mejorar de forma sencilla el rendimiento de nuestro site, para ello simplemente debemos incluir la URL de nuestro site y de forma automática obtendremos un informe en el que se indicará cuanto consume el fichero original, cuánto comprimido y cuánto comprimido con Gzip.
Zbugs, todavía en fase beta, nos deja saber de forma gráfica cuál es la mejora respecto a la versión original de nuestro website.

CleanCSS, comprime y optimiza CSS.

Herramienta online permite mejorar hoja de estilos CSS.
CleanCSS comprime y optimiza CSS logrando que el código de nuestra hoja de estilos se vuelva más liviano, repercutiendo en una mejora de la velocidad y la usabilidad de nuestra web.
Esta interesante herramienta para webmasters trabaja de acuerdo al estándar marcado por W3C, eliminando espacios en blanco, quitando comentarios o cambiando código a una forma más corta.
El manejo de CleanCSS es muy sencillo gracias a su intuitiva interfaz pese a disponer de una completa variedad de opciones de compresión y optimización.

Buscador de soporte de propiedades CSS en navegadores.

Interesante herramienta con la que facilitar el trabajo del diseñador web.



Browser Support es un sencillo motor de búsqueda que nos permite averiguar que propiedades CSS son soportados por los principales navegadores.
Su manejo es tan sencillo como lo es cualquier otro buscador web, simplemente tipea cualquier propiedad, pseudo-elemento o valor de CSS y de forma automática obtendrás una relación de los navegadores en los que es soportado.
Además este motor de búsqueda de propiedades CSS en navegadores dispone de una herramienta autocompletado, enlace a características relacionadas, links a la documentación oficial y tests (muchos de los cuales son de W3C CSS test suites) con los que conocer un poco mejor todo lo relacionado con nuestra búsqueda y hacer nuestro trabajo si cabe más fácil.
Muy interesante para que cualquier diseñador lo tenga a mano cada vez que lleva a cabo un proyecto, Browser Support también nos permite llevar a cabo el proceso inverso, es decir, seleccionar uno de los navegadores más importantes entre Chrome, Safari, Firefox, Internet Explorer y Opera, y obtener una relación de las características CSS soportadas por el mismo.

imgur, completo servicio para compartir imágenes.

Interesante servicio para editar imagenes y luego añadirlas a nuestro blog o web.

imgur es un servicio online que nos permite subir fotos, retocarlas y compartirlas de forma rápida, sencilla y gratuita.
Especialmente interesante para aquellos con menos experiencia como desarrolladores y/o webmasters, imgur genera una URL para compartir una imagen a través de correo electrónico o mensajería instantanea, un link directo para visualizarla y un código html que nos permitirá embeberla en nuestra web/blog, ademas de en redes sociales como Twitter, Facebook, Tumblr o incluso foros y agregadores de noticias como Reddit .
El manejo de este servicio web es tan simple como arrastrar o subir una imagen desde nuestro equipo o desde la web, marcar la opción de edición (caso que lo deseemos) y una vez subida ésta, de forma automática nos serán ofrecidas distintas opciones para compartirla en la web.
Cada imagen es alojada de forma ilimitada en los servidores de imgur mientras esta sea vista 1 vez cada 6 meses (caso contrario se elimina). No hay un límite en el número de imagenes que cada usuario puede subir aunque el peso máximo de cada una es de 10 Mb y los archivos soportados por este servicio son JPEG, GIF, PNG, APNG, TIFF, BMP, PDF y XCF (GIMP).
Además de lo anterior existe una extensión para los navegadores Mozilla Firefox y Google Chrome que mejoran la sencillez con la que compartir imagenes en la web. imgur también está disponible para dispositivos móviles Android desde play.google.com.
Por todo lo anterior imgur es uno de los mejores servicios de alojamiento, edición y distribución de imagenes más interesantes de los que vamos a poder encontrar en la web.
 

Añade música a tu sitio con Spotify.

La popular plataforma de canciones vía streaming lanza el botón Spotify Play.

De la misma forma que hizo en su momento Youtube, y que en parte le sirvio para llegar a ser uno de los servicios liderés de Internet, Spotify acaba de dar a conocer una nueva opción para añadir música a nuestra web de forma sencilla, gratuita y legal.
El nuevo botón Spotify Play que funciona como un sencillo widget, permite a cualquiera que lo desee, embeber y reproducir canciones, álbumes y listas de reproducción directamente en nuestro site (ojo!! para que los visitantes puedan reproducir la música incrustada, tendrán que tener en marcha la aplicación de Spotify).
Para usar este nuevo botón de reproducción basta copiar la URl de cualquier canción (botón derecho sobre la canción) y pegarla en https://embed.spotify.com/ posteriormente se copia el código de inserción (embed code) y se pega en nuestra página web o blog. Además el botón Spotify Play también nos ofrece opciones de configuración para adaptarlo a la experiencia de usuario que venimos ofreciendo en nuestro site.
Esta nueva característica ya está disponible para todos los usuarios interesados en implentar música en su site. Con el nuevo botón Play, Spotify que actualmente cuenta con 10 millones de usuarios activos, 16 millones de canciones, y que el pasado mes de septiembre mejoraba su integración con Facebook, da un importante paso para convertirse en la plataforma líder de la música por streaming.
Esta novedad llega apenas unos días después de otra importante noticia para este servicio tras el anunció de la retirada del límite que impediá escuchar más de cinco veces la misma canción. No obstante las cuentas gratuitas siguen restringida a 10 horas de música mensuales.
 

jQuery File Upload: cargador de archivos gratis para tu web.

Widget ofrece una interesante ayuda para subir archivos.

jQuery File Upload es un widget para todo tipo de proyectos web en los que deseemos ofrecer la posibilidad de cargar de archivos.
Entre las características que ofrece el cargador de archivos generado con jQuery File Upload encontramos la posibilidad de subir multiples archivos, soporte Drag & Drop, barra de progreso, previsualización de imagenes y posibilidad de cancelar la subida.
Además de lo anterior, este widget nos ofrece varias opciones de personalización con las que definir el formato de archivo permitido o el tamaño de archivo máximo, y que nos permitirán adaptar el cargador de archivos jQuery File Upload al resto de nuestro proyecto.
Este proyecto open source que requiere jQuery (libre 100% de flash) es soportado por la mayoría de los principales navegadores web y ha sido testeado entre otras en plataformas basadas en PHP, Python, Ruby on Rails, Java, Node.js, y Go.

Optimizadores de código CSS.

herramientas online para optimizar código fuente de hojas de estilo en cascada.



Esta selección de aplicaciones web nos van a servir para optimizar código CSS, ayudándonos a solucionar problemas en su formato y evitándonos revisar y optimizar el código de forma manual.
Entre las herramientas presentadas, algunas más básicas otras más complejas, vamos a poder elegir el nivel de compresión disponiendo de opciones como eliminar selectores no utilizados o determinadas propiedades.

1.CSS Óptimo: organiza y da formato al código de acuerdo a un grado de optimización seleccionado. Reduce el peso de una hoja de estilos en más de un 30%.

2.CSS SuperScrub, herramienta online que nos permite reducir el tamaño y la complejidad del CSS, deshaciéndose de código innecesario.

3.CSS Formatter and Optimiser comprime y optimiza CSS, mejorando y eliminado elementos no necesarios. Dispone de varios niveles de compresion

4.Code beautifier, aplicación online que permite ordenar y combinar selectores y propiedades, comprimir los colores y la tipografía de peso, elegir entre el formato de mayúsculas y minúsculas, desprenderse de las propiedades no válidas.....Basta con pegar el código CSS y seleccionar dentro de las opciones el tipo de estilo y listo.

5.Tabifier, esta aplicación web está centrada en las tabulaciones. Soporta CSS, HTML y C.

6.FlumpCakes Online CSS Optimizer ordena, optimiza y comprime código CSS ofreciendo una versión más reducida.

Truco para acelerar la carga de imagenes.

Imágenes que cargan más rápido.


Desde el Netscape 2.0 que se provee del atributo LOWSRC para el elemento IMG. Este LOWSRC se usa para apuntar a una imágen que contenga menos colores, o tenga menos resolución, y que será mostrada antes de intentar cargar la imágen SRC.
Luego, cuando se haya recuperado todo el documento, y las imágenes LOWSRC, se procede con la carga de las imágenes SRC, encima de las anteriores.
Definir el tamaño de las imágenes.
Si uno define el tamaño de las imágenes en el mismo documento, se muestra el texto completo primero, y luego se comienzan a cargar las imágenes en espacios previamente reservados. Esto es muy útil ya que no es necesario esperar a que se cargen las imágenes para poder visualizar el documento.
Así,:



es mejor que: