Inicio desarrollo web 95 recursos y utilidades para diseño y desarrollo web

95 recursos y utilidades para diseño y desarrollo web

30 Comentarios


95 recursos y utilidades para diseño y desarrollo web
Internet cada día es un lugar donde puedes encontrar de todo, cualquier cosa. Quieres aprender un nuevo idioma?, un nuevo lenguaje de programación?, buscas casa?, allí está todo lo que necesitas. Si lo que deseas es tener todas las herramientas a la mano para facilitarte el desarrollo y diseño de sitios web, anteriormente había publicado 74 sitios web útiles para desarrolladores y diseñadores web pero ahora te traigo 95 recursos y utilidades para diseño y desarrollo web.

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

Hay 30 Comentarios en “95 recursos y utilidades para diseño y desarrollo web”

  1. Julie

    Excelentes recursos Diego.
    Adicionalmente de ahorrarnos tiempo, nos indica de una forma conzisa y directa las herramientas que podemos utilizar.
    Gracias
    JL
    www.bloggeate.com

  2. Carlos Ficto

    Propuesta de negocio online

    Hola, un cordial saludo, en primer lugar quiero presentarme: me llamo Carlos Andrés Cardona Cano y trabajo como SEO (Especialista en Optimización y Posicionamiento en buscadores).

    Me dirijo a usted porque al ver su blog me intereso el contenido, ya que tiene información muy interesante y actualizada de la temática que se maneja dentro de su web, además, el diseño que tiene su página es bastante agradable.

    Me gustaría entablar contacto con usted para poder hacerle una propuesta de negocio con la que nos podremos ver beneficiados de parte y parte.

    Si se encuentra interesado, me puede escribir a carlosficto@yahoo.com

    Hasta pronto y espero que podamos entablar un buen contacto.

  3. QUSW - Quiero Un Sitio Web

    Gran cantidad de recursos, excelente artículo. Hemos probado varios de los citados en este post.

    Quizás algún día podamos compartir con Trazos Web algún artículo de nuestra autoría para así devolver sus contribuciones =)

    Saludos.

  4. publistudioltda.com

    Increible aporte para diseñadores y webmasters, te pasaste en realidad con esta contribución, nos será de muchísima ayuda, muchas gracias y de paso felicitaciones por ten buen blog que te has montado, saludos

Trackbacks/Pingbacks

  1. Pingback: 95 recursos y utilidades para diseño y desarrollo web | Joaquin Lara Sierra | Scoop.it

  2. Pingback: 95 recursos para diseño web | portafolio blog

  3. Pingback: Web Design: ricca collezione di 95 risorse utili per il webdesign | ILaRia Lab

  4. Pingback: Web Design: 95 risorse utili per il webdesignr | Mariozblog

  5. Pingback: Web Design: ricca collezione di 95 risorse utili per il webdesign | buonaguida.com

  6. Pingback: Aggiornarsi nel Web Design. | Webmaster Roma

  7. Pingback: Contenido de blogs de negocios | Contenido perdurable en blogs de negocios

  8. Pingback: blog Tusclicks Colombia | Just another WordPress site