2012-04-04

95 herramienta, librerías y recursos para desarrollo web y diseño


Este artículo esta dividido en las siguiente categorías:

Tipografía

Fount

Fount
Esta utilidad te ayudará a identificar cualquier tipo de fuente que veas en Internet.

FitText

FitText
FitText te permite hacer que el  texto de tus sitios web sean flexibles, esto con el fin de ser utilizados tanto en sitios web normales como sitios web móviles.

Kerning

Kerning
Con esta utilidad podrás programar junto a CSS algunas increíbles formas de presentar el texto de tu web.

jFontSize

jFontSize
Esta utilidad te permite poner un botón con el cual los usuarios redimensionen el tamaño del texto.

Javascript

Zeon.js

Zeon.js
Esta herramienta te ayuda a encontrar errores en tu código JavaScript.

WOW Slider

WOW Slider
Esta utilidad te permite incluir Sliders o Carruseles de imágenes en tu sitio web.

Vogue

Vogue
Vogue te permite recargar la hoja de estilos CSS en el navegador web el el sitio que estés modificando.

yepnope.js

yepnope.js
Con esta utilidad puedes decidir cargar solo los scripts que tus usuarios necesitan en tu sitio web.

jQuery Waypoints

jQuery Waypoints
Este plugin de jQuery te permite ejecutar diferentes funciona al hacer scroll sobre un elemento en tu sitio web.

jQuery Plugin Boilerplate

jQuery Plugin Bolierplate
Este sitio te muestra una guía para que puedas desarrollar tus propios plugins de jQuery.

Placeholder

Placeholder
Este plugin de jQuery te permite habilitar el atributo placeholder de los formularios en los navegadores que no lo tienen.

Doctor JS

Doctor JS
Este sitio analiza tu código JavaScript en busca te problemas y te da en reporte en formato JSON.

HEAD.js

HEAD.js
HEAD.js te permite cargar todos tus scripts de JavaScript de una sola vez y en paralelo.

Enkoder

Enkoder
Este sitio te permite codificar en JavaScript tu dirección de email para evitar recibir Spam en él cuando lo publiques en tu sitio web.

JavaScript Garden

JavaScript Garden
Este sitio te muestra una guía detallada sobre todo lo que necesitas saber sobre el lenguaje de programación JavaScript.

Augment.js

Augment.js
Esta librería te permite habilitar métodos modernos de JavaScript.

CamanJS

CamanJS
Esta librería en JavaScript te permite manipular imágenes gracias al Canvas de HTML5.

Share Count JS

Share Count JS
Con esta librería en JavaScript  puedes mostrar y combinar tu número de seguidores, fans, etc en las redes sociales de forma sencilla y rápida.

Neon Javascript Library

Neon Javascript Library
Esta es un framework para JavaScript que recopila las funciones más usadas en un archivo de tan solo 4 kb.

glfx.js

glfx.js
Esta librería te permite aplicar una gran cantidad de efectos las imágenes de tu web.

spin.js

spin.js
Con esta librería puedes generar el gráfico de ‘cargando’ sin necesidad de imágenes.

Mobilize.js

mobilize.js
Este es un framework de JavaScript y HTML5 con el que puedes transformar tus sitios web en sitios web para dispositivos móviles.

HTML

HTML Email Boilerplate

HTML Email Boilerplate
Este sitio web te ofrece una plantilla base para enviar tus emails en formato HTML y que se vea igual en todos los proveedores (Gmail, Hotmail, Yahoo, etc.).

Fractal

Fractal
Este sitio te ayudará a validad tus plantillas de HTML para emails y te dirá que errores tienen el código.

Mobile Boilerplate

Mobile Boilerplate
De los mismos creadores de HTML5 Boilerplate, nos traen una plantilla base para que desarrolles tu sitio web para móviles.

320 and up

320 and up
Este sitio te provee los archivos necesarios para desarrollar tu sitio de 320px hacia arriba. Se basa en HTML5 Boilerplate.

Canvas Loader Creator

Canvas Loader Creator
Este sitio utiliza el canvas de HTML5 para generar una imagen de carga para tu sitio web.

Kendo UI

Kendo UI
Este sitio te proporciona un framework para mejorar la interfaz de usuario de tu sitio con HTML5.

CanvasText

CanvasText
Con esta librería podrás modificar el texto de tu sitio de formas sorprendentes utilizando la característica canvas de HTML5.

PhoneGap

PhoneGap
Este es un framework basado en HTML5 que te proporciona todo lo necesario para crear aplicaciones móviles que funciones en todos los dispositivos móviles.

Mobile Design

Mobile Design Development
En este sitio puedes leer un libro sobre diseño web y de aplicaciones para dispositivos móviles, completamente gratis.

Imágenes

 Aviary

Aviary
Este sitio te proporciona una forma fácil y en línea de editar tus imágenes.

Placehold.it

Placehold.it
Con este sitio serás capaz de utilizar sus imágenes como imágenes de ejemplo en tus diseños.

iPiccy

iPiccy
Este es otro editor en línea de imágenes.

PunyPNG

PunyPNG
En este sitio puedes comprimir tus imágenes JPG, GIF y PNG sin perder la calidad de la imagen.

Adaptive Images

Adaptive Images
Con los archivos que te da este sitio puedes hacer que tus imágenes se adapten al tamaño de la ventana del navegador.

JPEGmini

JPEGmini
Utilidad web con la que puedes comprimir al máximo tus imágenes en formato JPG.

Default Icon

Default Icon
Esta página te proporciona una colección de 653 pictogramas que puedes usar en tus diseños web.

NoisePNG

NoisePNG
Con esta aplicación podrás crear una imagen con ruido en formato PNG para el fondo de tus diseños.

Imagine

Imagine
Con esta librería en PHP puedes manipular las imágenes de tu sitio web.

Diseño

DinPattern

DinPattern
En DinPattern encontrarás una gran galería de patrones para el fondo de tus diseños.

bgMaker

bgMaker
Con este sitio podrás crear pixél a pixél el diseño del fondo de tu sitio web.

Pattern Cooler

Pattern Cooler
Aquí encuentras una gran colección de patrones de fondo y además puedes editarlos en línea.

Tartan Maker

Tartan Maker
Este sitio te ayuda a generar un patrón para el fondo de tus diseños web.

Striped Backgrounds

Striped Backgrounds
En este sitio web puedes crear un fondo en forma de barra verticales o puedes encontrar una buena paleta de colores para tu diseño.

Dotted Background Generator

Dotted Background Generator
Este sitio genera un fondo con puntos en diferentes tamaños.

Palette Creator

Palette Creator
En este sitio puedes crear una paleta de colores para utilizar en tu próximo diseño web.

Kuler

Kuler
Sitio web donde puede encontrar una gran cantidad de paletas de colores para tus diseños.

Color Palette Generator

Color Palette Generator
Esta herramienta te permite generar una paleta de colores sacados de una imagen que puedes especificar.

Color Scheme Designer

Color Scheme Designer
En este sitio también puedes crear tu propia paleta de colores.

Pictaculous

Pictaculous
Con esta herramienta puedes subir una imagen y obtener la paleta de colores que la compone.

ColorMunki

ColorMunki
Aquí también puedes generar una paleta de colores para tu diseño web.

RoundedCornr

RoundedCornr
Este sitio genera el código necesario para hacer bordes redondeados en tu diseño.

Tabs Generator

Tabs Generator
Con esta aplicación puedes generar los tabs para tus proyectos web.

Patternizer

Patternizer
Con este sitio puedes generar fácilmente un patrón para el diseño de tu sitio web.

CSS

CSS Sprites

CSS Sprites
Esta herramienta web te ayudará a crear el sprite de tus imágenes de una forma más fácil.

Fluid Grids

Fluid Grids
Con esta herramienta puedes generar una plantilla de columnas fluidas de CSS.

LESS CSS

LESS CSS
Herramienta que te permite extender el lenguaje CSS, añadiendo la posibilidad de crear funciones, variables, hacer operaciones y más, y así escribir menos código CSS.

LESS Boilerplate

LESS Boilerplate
Este sitio te proporciona una plantilla base para poder trabajar más fácil con LESS CSS.

Stripemapper

Spritemapper
Con Stripemapper puedes generar un stripe utilizando una simple imagen y Phyton.

CSSsitemap System

CSSsitemap System
Este sitio te presenta un sistema para poder hacer un mapa del tu sitio web utilizando CSS.

Normalize.css

Normalize.css
Con este CSS puedes hacer que tu web se vea más consistente e igual en todos los navegadores. Es un reemplazo al ya famoso CSS Reset.

holmes.css

holmes.css
Este archivo de CSS te ayuda a descubrir algunos que tengas en el estilo de tu sitio web.

CSS Crush

CSS Crush
Este es un preprocesador de CSS basado en el lenguaje PHP que extiende el lenguaje CSS y lo compila minimizado y con compatibilidad entre navegadores.

CSSPrefixer

CSSPrefixer
Con esta herramienta puedes modificar tu CSS para ponerle los prefijos de cada navegador.

CSS Pivot

CSS Pivot
Con esta herramienta puedes probar cambiar el estilo CSS de cualquier sitio web que desees.

PCSS

PCSS
Este es otro preprocesador de CSS que le añade funciones, variables, etc.

GridCalc

GridCalc
Con esta aplicación podrás calcular y generar una plantilla de columnas de CSS.

CSS3 Button Generator

CSS3 Button Generator
Esta herramienta te permite generar un botón solo con CSS3.

CSS3 Button Generator

CSS3 Button Generator
Otro sitio que te ayuda a generar botones utilizando solo CSS3.

CSS Button Generator

CSS Button Generator
Otro sitio que te ayuda a generar botones solo con CSS3.

CSSWARP

CSSWARP
Con esta herramienta puedes hacer que un texto predeterminado se vea  en forma ondulada o circular.

CSS Text Shadow

CSS Text Shadow
Con esta herramienta puedes generar muy buenos efecto utilizando las sombras de los textos de CSS3.

CSS Border Radius Generator

CSS Border Radius Generator
En este sitio puedes generar fácilmente el código necesario para tener bordes redondeados en tu diseño.

Prefixr

Prefixr
Esta aplicación te permite ponerle los prefijos de todos los navegadores a tus estilos en CSS.

Google+ UI Buttons

Google+ UI Buttons
Botones totalmente realizados en CSS3 con el estilo visual de Google+.

Button CSS3 UI

Button CSS3 UI
Framework con botones realizados totalmente en CSS3.

CSS Load

CSS Load
Este sitio te permite generar spinners de carga solo mediante CSS.

CSS Button

CSS Button
Con este sitio web puede crear botones o editar los ya existentes en la galería.

Prefix Free

Prefix Free
Con esta librería puedes poner los prefijos al CSS solo cuando estos sean necesarios, o sea, dependiendo del navegador en que se esté mostrando tu sitio web.

Animate.css

Animate.cssEste sitio te provee el código CSS3 necesario para hacer gran cantidad de animaciones sin necesidad de utilizar otra cosas sino CSS.

Varios

Chop

Chop
Con este sitio puedes compartir código con tus usuarios o con quién quieras.

mokk.me

mokk.me
Sitio que te permite realizar la estructura para tu aplicación web para poder mostrarla a tus usuarios.

Zen Coding

Zen Coding
Con este plugin puedes hacer que programar HTML y CSS sea mucho más fácil.

griddle.it

griddle.it
Sitio que te proporciona una imagen con columnas al estilo Framework de CSS para que pongas en tu diseño para alinearlo correctamente.

Swiffy

Google Swiffy
Con esta utilidad puedes convertir archivos de Flash (SWF) a HTML5.

Launchlist

Launchlist
Este sitio te ayuda a verificar que tu nuevo diseño web salga sin errores.

Bounce

Bounce
Con esta herramienta puedes hacer una captura de pantalla de cualquier web y hacer comentarios o dejar ideas sobre ella.

Screenfly

Screenfly
En este sitio puedes ver como se ve tu página en diferentes resoluciones de pantalla.

loads.in

loads.in
Esta utilidad te ayuda a saber cuanto demora en cargar tu sitio web.

Domainr

Domainr
Este sitio actúa como un buscador de dominios para ver si está disponible o no.

iOS Boilerplate

iOS Boilerplate
Este sitio ofrece una plantilla base para desarrollar aplicaciones móviles para el sistema iOS de iPhone, iPad e iPod Touch.

Touchy Boilerplate

Touchy Boilerplate
Este sitio te ofrece una plantilla para desarrollar aplicaciones móviles para cualquier dispositivo.

YOURLS

YOURLS
Con esta librería puede crear tu propio acortador de URLs.

IM CREATOR

IM CREATOR
Con esta aplicación puedes crear un sitio web completamente funcional y muy fácilmente.

Infografía