179 Utilidades y recursos para diseño y desarrollo web

179 Utilidades y recursos para diseño y desarrollo web

El mundo del desarrollo web y del diseño web se ha venido expandiendo en esta última época, especialmente por el auge del HTML5, CSS3 y de una gran variedad de aplicaciones que utilizan Javascript. Es por eso que aquí te traigo una gran recopilación de 179 utilidades y recursos para diseño y desarrollo web que te pueden ayudar a aumentar la productividad en tus proyectos o te ayudarán a ponerle ciertas funciones a cada uno de ellos. Puede que falten más recursos y utilidades, pero aquí solo listo los más destacados, de lo contrario saldría una lista enorme. Si quieres revisar más recursos, puedes ver las recopilaciones que he publicado anteriormente:

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

Tipografía

Ir Arriba ↑


slabText

slabTextEste es un plugin de jQuery que te ayuda a generar títulos grandes y adaptables al ancho del contenedor.

WhatFont Tool

WhatFont ToolPlugin de jQuery que te ayuda a averiguar que tipo de fuente esta utilizando una página web.

Unicodinator

UnicodinatorSitio que te permite ver los código unicode de cada carácter para utilizarlos en tus proyectos.

Cupcake Ipsum

Cupcake IpsumEste sitio te genera unos párrafos de prueba para tus proyectos pero con palabras de repostería, pasteles, etc.

Textualizer

TextualizerPlugin de jQuery que te permite hacer transiciones entre las letras de un texto.

Pomax Font

Pomax Font Añade la función Font() a JavaScript que te permite cargar fuentes asíncronamente y modificar sus dimensiones.

Codepoints

CodepointsEn este sitio puedes encontrar todos los códigos de cada tipo de carácter existente.

Ipsum.me

Ipsum.meSitio que te genera el texto lorem ipsum para poner y probar en tus proyectos.

Trunk8

Trunk8Plugin de Jquery que sirve para modificar bloques de texto.

JavaScript

Ir Arriba ↑


wmuSlider

wmuSliderPlugin de jQuery que permite deslizar contenido y que funciona con diseños web adaptables.

RefineSlide

RefineSlideEste script te permite deslizar contenido utilizando transiciones con CSS y tranformaciones en 3D. Es compatible con diseños web adaptables.

Royal Slider

Royal SliderCompletísimo slider compatible con diseños web adaptables y con eventos touch.

Camera

CameraSlider de imágenes con jQuery también compatible con diseños web adaptables.

Sequence.js

Sequence.jsSlider de contenido que utiliza CSS3, también se puede deslizar contenido utilizando el efecto parallax.

FitVids.JS

FitVids.JSCon este plugin para jQuery puedes hacer que tus vídeos sean flexibles para diseños web adaptables.

Breakpoints.js

Breakpoints.jsCon este script puede detectar el cambio del ancho de la ventana del navegador y hacer que una función se ejecute en el ancho que quieras.

Ender

EnderScript con el que puedes compilar tus propios paquetes de funciones de JavaScript.

Money.js

Money.jsLibrería que te permite convertir entre diferentes tipos de divisas.

Accounting.js

Accounting.jsCon esta librería puedes darle formato a las diferentes monedas, números y divisas en tu proyecto.

Grumble.js

Grumble.jsLibrería que te permite poner tooltips en tus proyectos.

Validate.js

Validate.jsLibrería de JavaScript para validad campos de un formulario.

Moment.js

Moment.jsEste script te permite manipular y dar el formato que quieras a las fechas.

jQuery Transit

jQuery TransitPlugin de jQuery para manejar las transformaciones y transiciones de CSS3.

Scrollorama

ScrolloramaPlugin de jQuery para poner efectos en el texto cuando se desliza una página.

SuperScrollorama

SuperScrolloramaVersión avanzada del plugin anterior, también para animaciones en el texto mientras se desliza la página hacia abajo.

Qooxdoo

QooxdooUn completo framework para JavaScript.

Ember.js

Ember.jsFramework de JavaScript para crear aplicaciones web.

Knockout

KnockoutEsta es una librería que te permite crear interfaces de usuario modificables.

JavaScriptMVC

JavaScriptMVCFramework que utiliza el Modelo Vista Controlador (MVC) para desarrollar aplicaciones.

AngularJS

AngularJSOtro framework para utilizar en tus aplicaciones web.

Batman.js

Batman.jsFramework para desarrollar aplicaciones web con JavaScript o CoffeeScript.

CreateJS

CreateJSUn set de librerías que te permiten manejar Canvas, animaciones, audio y más.

Crafty

CraftyLibrería útil para desarrollar juegos con JavaScript.

SoundManager 2

SoundManager 2Esta librería te permite manejar el audio en tus aplicaciones web.

Gauge.js

Gauge.jsLibrería de JavaScript que te permite insertar y personalizar medidores o indicadores de progreso en tus proyectos.

Sugar

SugarLibrería con la que puedes trabajar con objetos nativos utilizando nuevos métodos en JavaScript.

Timeline JS

Timeline JSEsta librería te permite generar lineas de tiempo para presentar en tus proyectos.

CanJS

CanJSFramework de JavaScript para crear aplicaciones web.

TypedJS

TypedJSEsta librería te ayuda a comentar y a probar tu código JavaScript.

Underscore.js

Underscore.jsLibrería que te permite usar varias funciones adicionales para tus proyectos.

Mousetrap

MousetrapCon esta librería podrás configurar funciones para que empiecen con un determinado atajo por teclado.

jQuery++

jQuery++Añade nuevas funciones para utilizar con jQuery.

Rekapi

RekapiLibrería para hacer animaciones con JavaScript.

Testacular

TestacularÚtil para probar y depurar tus aplicaciones en JavaScript.

jsLint.it

jsLint.itEste sitio te ayuda a depurar y a descubrir errores en tu código JavaScript.

Jam

JamEste es un administrador de paquetes para JavaScript.

Singool.js

Singool.jsFramework para desarrollar aplicaciones web de una sola página.

JavaScriptSQL

JavaScriptSQLUn  motor de base de datos totalmente desarrollado en JavaScript.

Locache.js

Locache.jsEste es un framework que te permite cachear objetos del lado del cliente.

Zepto.js

Zepto.jsLibrería minimalista de JavaScript parecida a jQuery.

BigVideo.js

BigVideo.js

Esta extensión para jQuery te permitirá poner un vídeo como fondo de una página web.

JavaScript del Lado del Servidor

Ir Arriba ↑


Node.js

Node.jsEntorno de programación del lado del servidor que utiliza el motor V8 de JavaScript, útil para crear aplicaciones que respondan en tiempo real.

Faye

Faye

Extensión para Node.js que crea un sistema de publicación y suscripción a canales de mensajes (pub/sub). Útil para crear salas de chat en tus proyectos.

Socket.IO

Socket.IO

Otra extensión de Node.js, esta te permite crear aplicaciones en tiempo real.

Balloons.IO

Balloons.IO

Con esta extensión podrás crear salas de chat  de múltiples salones.

Express

Express

Framework para crear aplicaciones web con Node.js.

Pubsub.io

Pubsub.io

Extensión para enviar mensajes en tiempo real.

Flatiron

Flatiron

Framework para desarrollar aplicaciones web con Node.js.

Geddy

Geddy

Un simple framework para Node.js

RailwayJS

RailwayJS

Framework para Node.js utilizado el modelo MVC.

SocketStream

SocketStream

Rápido framework para Node.js para realizar aplicaciones que respondan en tiempo real.

nQuery

nQuery

Extensión para Node.js que te permite utilizar funciones de jQuery.

Stylus

Stylus

Extensión para Node.js con la que puedes mejorar el manejo del código CSS.

AppJS

AppJS

Extensión que te permite desarrollar aplicaciones para Linux, Windows y Mac utilizando Node.js, HTML, CSS y JavaScript.

Socketbug

Socketbug

Este te permite hacer depuración del JavaScript de tu aplicación móvil.

Fab

Fab

Framework con el que puedes desarrollar aplicaciones que respondan en tiempo real.

Node.js Database Drivers

Node.js Database Drivers

Extensión con la cual puedes conectarte a una base de datos y actualizar, insertar o eliminar filas de esa base de datos.

HTML

Ir Arriba ↑


Emailology

Emailology

Este sitio te ofrece toda la guía necesaria para que puedas diseñar un email en HTML y se vea bien en todos los clientes de correo.

Compare Ninja

Compare Ninja

Con este sitio puede generar tablas de comparación en HTML y CSS para tus proyectos.

Gury

Gury

Librería que te permite utilizar las funciones para crear aplicaciones con el Canvas de HTML5.

oCanvas

oCanvas

Otra librería que te facilita la tarea de dibujar elementos en tu página web con Canvas.

Wysihtml5

Wysihtml5

Con esta extensión puedes incluir un editor de texto en cualquier parte o formulario de tu página.

AccessifyHTML5

AccessifyHTML5

Script que te permite añadir los atributos de accesibilidad ARIA a tus documentos en HTML.

HTML5SQL

HTML5SQL

Script que te permite trabajar con las bases de datos de HTML5 (Web SQL).

Bizodo

Bizodo

Página en la que puedes crear formularios en linea para usar en tus proyectos.

HTML5 Sortable

HTML5 Sortable

Con este script puedes hacer que tus listas se puedan re-ordenar dependiendo del gusto de los usuarios.

Responsive Email Templates

Responsive Email Templates

Desde aquí puedes descargar varias plantillas para tus emails y con diseño web adaptable (Responsive Design).

Imágenes

Ir Arriba ↑


Response JS

Response JS

Script con el que puede hacer que tus imágenes se adapten a la resolución de pantalla del visitantes de tu página web.

Responsive Img

Responsive Img

Con este otro script puedes también puedes hacer que tus imágenes se adapten a la resolución de pantalla del navegador.

jQuery Picture

jQuery Picture

Plugin para jQuery que te permite redimensionar las imágenes de tu diseño según la resolución de pantalla de tu navegador.

bgStretcher

bgStretcher

Este plugin te permite poner una imagen de fondo en tus diseños y hacer qu se acople en las diferentes resoluciones de pantalla del navegador del usuario.

Retina.js

Retina.js

Con este pequeño script puedes hacer que tus imágenes se muestren con alta calidad para dispositivos con Retina Display.

Stitches

Stitches

En este sitio puedes generar tus imágenes sprite para tus diseños.

Avatars.io

Avatars.io

Con esta aplicación puedes obtener los avatares de los usuarios de Twitter, Facebook, Instagram, Gravatar e incluso subir un avatar diferente.

TinyPNG

TinyPNG

Sitio que te permite comprimir tus imágenes en formato PNG.

Holder.js

Holder.js

Con esta aplicación puedes generar varias imágenes de muestra para probar tus diseños.

Cropp.me

Cropp.me

Aplicación web que te permite auto cortar tus imágenes destacando lo más importante.

Backstretch

Backstretch

Plugin para jQuery con el que puedes poner imágenes de fondo para tus diseños y agregarles efectos.

Freepik

Freepik

Sitio en el que puedes encontrar una gran cantidad de imágenes para descargar gratis.

Placebox.es

Placebox.es

Este sitio te ofrece un servicio con el que puedes generar imágenes de prueba para tus diseños.

Image Workshop

Image Workshop

Con esta librería puedes modificar tus imágenes, volverlas miniaturas, agregarles marcas de agua, etc.

Duri.me

Duri.me

Con este sitio puedes generar el DataURI de tus imágenes para utilizar en tus diseños.

Kraken

Kraken

Sitio que te permite optimizar tus imágenes reduciéndoles el peso sin perder calidad en la imagen.

Diseño

Ir Arriba ↑


Hex Words

Hex Words

En este sitio puedes encontrar diferentes códigos hexadecimales para colores, formados por palabras.

Colour Tool

Colour Tool

Con esta aplicación puede obtener la paleta de colores del sitio web que quieras.

ColorHexa

ColorHexa

Con este sitio puedes obtener información completa sobre un color.

Devoth’s HEX 2 RGBA Color Calculator

Devoth's HEX 2 RGBA Color Calculator

Aquí puedes convertir un color de código hexadecimal a código RGBA.

Piknik

Piknik

Sitio con el que puedes encontrar un color aleatorio desplazando el cursor sobre esta página.

Colors.js

Color.js

Librería que te permite manipular los colores de tus diseños web.

Colllor

Colllor

En este sitio puedes generar una paleta de colores a partir de un solo color.

Generate Pattern

Generate Pattern

Aplicación web con la que puedes generar patrones para tus diseños.

Colorjoe

Colorjoe

Útil para insertar un colorpicker en tus proyectos.

Iconos

Ir Arriba ↑


MimiGlyphs

MimiGlyphs

80 iconos de 16×16 pixéles en formato .PSD (Photoshop) y .PNG.

Bijou

Bijou

155 iconos en tamaño de 10×10 pixéles, en formato PSD y PNG.

Iconmonstr

Iconmonstr

Sitio en el que puedes encontrar y descargar en formato .PNG o .SVG más de 1000 iconos tipo pictograma para tus proyectos.

Font Awesome

Font Awesome

Una fuente iconográfica que te ofrece 200 diferentes iconos para utilizar en tus proyectos.

Font Awesome More 2.0

Font Awesome More 2.0

Extensión de Font Awesome que añade más de 40 iconos a esta colección.

OpenWeb Icons

OpenWeb Icons

Desde aquí puedes descargar otra fuente iconográfica con iconos de estándares web como HTML5, CSS3, RSS y muchos más.

UICloud

UICloud

Sitio en el que puedes buscar entre los más de 26.000 iconos que componen esta colección.

Foundation Icons Font

Foundation Icons Font

Sitio que te ofrece una gran variedad de iconos en formato de fuente iconográfica.

Jigsoar

Jigsoar Icons

60 iconos en colores blanco y negro y en tamaños de 64×64, 48×48, 24×24 y 16×16 pixéles en formato .PNG y .AI (Illustrator).

Entypo

Entypo

250 iconos tipo pictograma en formato de fuente iconográfica, .PSD, .PDF y .EPS.

Koloria

Koloria

Set de más de 160 iconos a color en tamaño de 32×32 pixéles.

Social Media Icons

Social Media Icons

Un pack de 74 iconos de las principales redes sociales en formato de fuente iconográfica.

Game Icons

Game Icons

Sitio donde puedes buscar y descargar entre más de 900 iconos en formato .PNG y .SVG.

Batch

Batch

Set de más de 300 iconos para tus diseños en formato .PSD, .SVG (128×128 pixeles) y .PNG (16×16, 32×32 y 64×64 pixéles).

Endless Icons

Endless Icons

Una gran colección de iconos tipo pictograma que puedes descargar en formato .PNG.

Pictonic

Pictonic

Pack que incluye más de 250 iconos en formato de fuente iconográfica.

CSS

Ir Arriba ↑


Adapt.js

Adapt.js

Script con el que puedes determina que archivo CSS cargar dependiendo de la resolución de la pantalla.

Foundation

Foundation

Framework CSS de Diseño Web Adaptable (Responsive Design).

Animatable

Animatable

Sitio donde se muestran las posibilidades de animación con CSS3.

Amazium

Amazium

Framework CSS para Responsive Design.

Excssive

Excssive

Sitio que te permite comprimir tus archivos CSS.

Fbootstrapp

Fbootstrapp

Con este framework puede hacer que tu aplicación se vea como Facebook.

Bear CSS

Bear CSS

Sitio en el que puedes generar tu archivo CSS dependiendo de el HTML de tu proyecto.

Linear Gradients

Linear Gradients

Herramienta que te permite generar degradados para utilizarlos en tus estilo CSS.

Sass

Sass

Preprocesador de CSS que te permite tener variables y funciones que facilitan la creación de estos archivos para tus diseños.

Skeleton

Skeleton

Framework para CSS que te brinda todas las herramientas para un diseño web adaptable y moderno.

SpritePad

SpritePad

Sitio con el que puedes crear CSS Sprites fácilmente.

978 Grid System

978 Grid System

Framework de CSS basado en un tamaño de 978 pixéles.

Sprite Cow

Sprite Cow

Lugar donde puedes generar una imagen sprite y modificarla en línea.

Gridpak

Gridpak

Sitio en el que puedes generar un archivo CSS como plantilla para tus diseños con Responsive Design.

Gumby

Gumby

Framework de CSS para diseños web adaptables en base a 960 pixéles.

Responsive Grid System

Responsive Grid System

Framework de CSS para Responsive Design.

Css2Less

Css2Less

Herramienta en línea para convertir tu CSS en lenguaje LESS.

Pondasee

Pondasee

Kit que te proporciona todas las herramientas para facilitarte la creación de tus diseños.

Responsive Aeon

Responsive Aeon

Framework minimalista de CSS3 para Diseños web adaptables.

Responsive Grid System

Responsive Grid System

Sitio que te facilita la tarea de crear tus diseños con Responsive Design.

Kube

Kube

Framework minimalista de CSS para diseño web adaptable.

PHP

Ir Arriba ↑


React

React

Con esta librería en PHP puedes crear un servidor web así como lo hace NODE.js para tus desarrollos web.

Opauth

Opauth

Esta librería te facilita la tarea de la autenticación de usuarios para tus aplicaciones web.

Laravel

Laravel

Framework de PHP que te facilita la creación de aplicaciones web.

PHP: La Manera Correcta

PHP: La Manera Correcta

Este sitio te informa de las mejores prácticas que debes tener al programar en lenguaje PHP.

Ratchet

Ratchet

Librería en PHP que te permite utilizar WebSockets para crear aplicaciones que respondan en tiempo real.

Slim Framework

Slim Framework

Framework minimalista para PHP para poder programar fácil y rápidamente tus aplicaciones web.

AuthManager

AuthManager

Con esta librería puedes administrar los usuarios y su autenticación en tus desarrollos web.

PHP.js

PHP.js

Librería que se encarga de transformar el código PHP en código JavaScript para ser ejecutado en tus proyectos.

PHP Error

PHP Error

Librería que te permite mejorar los reportes de errores de tus aplicaciones con PHP.

Python

Ir Arriba ↑


WeasyPrint

WeasyPrint

Aplicación en Python que te permite pasar tus documentos de HTML a PDF.

Subscribely

Subscribely

Aplicación escrita en Python que te permite crear tu propio sistema de suscripción.

Syte

Syte

Aplicación que te permite crear un sitio personal en el que se incluyen sitios como Tumblr, Twitter, GitHub, Instagram y más.

Ruby

Ir Arriba ↑


Mercury Editor

Mercury Editor

Editor WYSIWYG en HTML5 desarrollado en Ruby on Rails.

RubyFiddle

RubyFiddle

Herramienta en línea que te permite probar tu código de Ruby.

Middleman

Middleman

Herramienta con la que podrás desarrollar aplicaciones web fácilmente.

Desarrollo de Aplicaciones Móviles

Ir Arriba ↑


iUI

iUI
Framework especialmente creado para facilitarte la tarea de crear aplicaciones móviles.

Lungo

Lungo

Framework para crear aplicaciones móviles compatibles con todas las plataformas.

Spine Mobile

Spine Mobile

Framework MVC de JavaScript para crear mejores aplicaciones móviles.

jqMobi

jqMobi

Librería de JavaScript con la que puedes crear aplicaciones móviles  con HTML5.

jQuery Mobile

jQuery Mobile

Framework de jQuery especialmente optimizado para aplicaciones móviles.

Dojo Mobile

Dojo Mobile

Framework de JavaScript para crear tus aplicaciones móviles utilizando HTML5.

Sencha Touch

Sencha Touch

Este es un framework para desarrollar aplicaciones móviles con HTML5.

Wink Toolkit

Wink Toolkit

Kit de herramientas en JavaScript con las que podrás desarrollar mejores aplicaciones móviles.

QUOjs

QUOjs

Micro librería en JavaScript para facilitar la creación de aplicaciones móviles.

Android Views

Android Views

Sitio desde el cual puedes descargar nuevos ‘Views’ para tus aplicaciones en Android.

Ratchet

Ratchet

Crea prototipos de aplicaciones móviles para iPhone con HTML, CSS y JavaScript.

Varios

Ir Arriba ↑


Responsivepx

Responsivepx

Herramienta que te permite probar como se ve una página web en diferentes resoluciones.

Responsive Design Testing

Responsive Design Testing

Otra herramienta en línea con la que puedes probar tus diseños en diferentes resoluciones.

Scrolldeck.js

Scolldeck.js

Librería de JavaScript que te permite hacer presentaciones con HTML.

Impress.js

Impress.js

Herramienta que te permite crear presentación al estilo de prezi.com con JavaScript y CSS.

The Responsive Calculator

The Responsive Calculator

Sitio que te permite transformar las distancias dadas en pixéles en porcentajes para que tus diseños sean Responsive Design.

Chico UI

Chico UI

Set de herramientas para poner en tus diseños web.

Prism

Prism

Librería que te permite resaltar tu código incluido en tus artículos.

Rainbow

Rainbow

Otra librería con la que puedes resaltar el código que pongas en los artículos o tutoriales de tus blog.

Socialite.js

Socialite.js

Librería con la que puedes cargar los botones sociales de Twitter, Facebook, etc. al hacer scroll o al pasar sobre un artículo, etc.

Percentage Loader

Percentage Loader

Librería con la que puedes crear imágenes de carga para tus proyectos.

Fixie

Fixie

Con esta herramienta puedes rellenar los campos de tus diseños con contenido de prueba (imágenes y texto).

QRHacker

QRHacker

Herramienta en línea para que puedas crear tus códigos QR y personalizarlos.

Browserling

Browserling

Desde este sitio puedes probar como se verían tus diseños en diferentes navegadores.

OverAPI

OverAPI

Sitio que recopila todas las hojas de referencia de bastantes lenguajes de programación.

Infografía

Ir Arriba ↑


0 Comentarios en “179 Utilidades y recursos para diseño y desarrollo web”

  1. Gran recopilación ufff me llevara algún tiempo conocerlas todas, que seria de nosotros sin estos pequeños programas para ahorrar en tu proyecto web o de diseño gráfico, gracias por la aportación.

  2. como siempre haciendo contenido de chinos! En serio, hay muy pocos blogs que tengan la dedicación de hacer un artículo tan largo para que tenga tanta calidad, un 10 ,gracias por la info.

  3. Pfff, esto se merece un premio, jamás había visto una colección tan completa de recursos, y lo mejor de esto que que todas las paginas son de muy buena calidad, te lo agradezco de verdad trazos, el de TinyPNG sin duda me va a ayudar en gran medida! Muchas gracias!

  4. Muchas gracias! He descubierto alguna herramienta que desconocía y que pienso que me será muy útil para algunos proyectos. A ver si saco tiempo para probarlas todas.

Los comentarios están cerrados.