¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

20.2.15

Recopilación de recursos para maquetadores web

En esta sección iremos poniendo esos enlaces que creemos importantes y que han sido recopilado a lo largo de todos estos años de experiencia. No queremos cansar a la gente con una lista interminable, simplemente pondremos aquellos que solemos usar a la hora de desarrollar un proyecto.

COMPLEMENTOS NAVEGADORES


FIREFOX

Firebug > Edita CSS, HTML y Javascript a tiempo real mientras estas navegando.
Web Developer Toolbar > Añade un sin fin de utilidades y funcionalidades para desarrolladores web, como activar, desactivar y visualizar Javascript y CSS. Líneas guias, Regla, Validador de CSS y HTML.
MeasureIT >  Dibuja una regla en el navegador.
Colorzilla > Cuentagotas, generador de degradados.
DustMe > Borra los Selectores CSS que no se están usando.
CSS Usage > Extensión para ver qué reglas CSS están en uso.
Pixel-Perfect > Ayuda para "clavar" los diseños.
Fireshot > Capturador de pantalla.
YSlow > YSlow analiza páginas web y nos recomienda maneras para mejorar el rendimiento de las mismas.
FireFontFamily  >  Resalta las propiedades relacionadas con las fonts.

CHROME

Page Ruler > Dibuja una regla para obtener las dimensiones en píxeles. Mide objetos de cualquier página web.

INFORMACIÓN

Can I Use > Nos da información actualizada sobre tablas de compatibilidad de navegadores de escritorio y móviles, si buscamos la propiedad CSS3 border-radius nos va a decir que navegadores y que versiones lo soporta.

RESET - HACK

Normalize.css
Eric Mayer Reset
HTML5 Doctor CSS Reset
Boilerplate

Nicolas Gallagher Micro Clearfix Hack

RESPONSIVE

Responsinator > Comprueba como se ve cualquier web en los dispositivos mas populares.
A simple responsive table solution > Solución para hacer las tablas responsive.

JQUERY - JAVASCRIPT

Modernizr > Librería Javascript que detecta si el navegador que utilizamos soporta características HTML5 y CSS3.
Headroom.js > Esconde la cabecera cuando se hace scroll.
jQuery Easy Background Resize > Añade una imagen de fondo escalable.
QueryLoader > Añade un preload a tu web.
Sidr > Crea menús laterales.
Sortable > Ordena Tablas por columnas.
WOW.js > Animaciones cuando haces scroll.
Fitvids.js > Para colocar videos fluídos.
PhotoSwipe > Crea una galería de imágenes sin dependencias.
Ladda > Preload en botones.
Progress Buttons > Preload en Botones.
BxSlider > Responsive Slider.
jQuery Validation Plugin > validación de formularios del lado del cliente.
Retina.js > Nos hace muy fácil la tarea de suministrar imágenes de alta resolución para los dispositivos con pantalla retina.
Waypoints > La manera mas fácil de ejecutar una función cuando haces scroll a un elemento.
Stellar.js > Crear Layouts Parallax.
jQuery-focuspoint > corta inteligéntemente los contenedores de las imágenes flexibles.

POLYFILL (pieza de código o plugin que te permite trabajar con una tecnología que no te proporciona el navegador de forma nativa)

HTML5Shiv > Nos permite utilizar las etiquetas de estructura de HTML5 en navegadores que no lo soportan como IE 6-8.
Respond.js > Añade soporte para Media Queries CSS3 en navegadores que no las soportan (IE 6-8).
CSS3 Pie > Polyfill que hace que Internet Explorer 6-9 sea capaz de renderizar la mayoría de las propiedades de decoración de CSS3.
jQuery.placeholder.js > Simula el atributo placeholder de HTML5 en navegadores que no lo soportan.
Rangeslider.js > Polyfill para el range slider de HTML5 <input type="range">
SVG-swap > Cambia la imagen SVG por una imagen rasterizada para versiones antiguas de Internet Explorer

ACCESIBILIDAD


t.a.w > Muy recomendable, actualmente el mejor validador de accesibilidad, tiene una versión online, pero recomiendo la versión de escritorio , ya que es mucho mas potente y sencilla.

Fangs Screen Reader Emulator > Extensión para Firefox que renderiza una versión de texto de cómo interpretaría un lector de pantalla nuestra web.
Juicy Studio Accessibility Toolbar > Barra para Firefox con diferentes ayudas centradas en Accesibilidad.
WCAG Contrast checker > Extensión que permite comprobar el grado de cumplimiento de los niveles de contraste, luminosidad y brillo en la combinación de colores de los contenidos textuales en base a los requerimientos de las WCAG 1 y WCAG 2.
Colour Contrast Analyser > Aplicación para PC y MAC que nos ayuda a determinar la legibilidad y el contraste de elementos visuales, como gráficos, textos e indicadores visuales.
ISO 639-1 > Códigos utilizados para identificar los países del mundo.

VALIDADORES - COMPRESORES DE CÓDIGO 

W3C Markup Validation Service > Para validar código  HTML, XHTML, HTML5
W3C Validation Service > Valiador de CSS
CSS LINT >  Realiza un análisis del código CSS reportando patrones que pueden se errores o pueden causar problemas.
JSHint > Nos ayuda a detectar errores y problemas en tu código JavaScript.

CSS Compressor
CSS Minifier
Styleneat

CSS3

CSS3 Generator > Generador de propiedades CSS3.
CSS Loading Spinners > iconos de carga hechos en CSS3.
Ajaxload.info > Generador de iconos de carga.

Animate.css > Aplica fácilmente un montón de animaciones multinavegador a tus proyectos.
CSS3 Animation Cheat Sheet > Conjunto de animaciones predefinidas, plug and play para proyectos web.
Animatable > Web con ejemplos para ver que propiedades se pueden animar.
Cubic-bezier > Nos permite crear animaciones cubic-bezier fácilmente.

TEST DE VELOCIDAD - RENDIMIENTO

Google PageSpeedTools > Analiza y optimiza tu página web implementando las mejores prácticas.
MobiReady > Determina si tu web está optimizada para dispositivos móviles.

WEBFONTS

Font Squirrel > Fonts 100% gratis para uso comercial.
Google Fonts > Open source Fonts.
Font Subsetter > Modifica webs fonts para quitar caracteres que no usamos, haciendo las webs más rápidas.
Typetester > Herramienta Online para comparar visualmente Fonts.
Unicode Character Table > Buscador de Caracteres Unicode.
Copy Paste Character > Mapa de caracteres ASCII.


BANCOS DE IMÁGENES GRATIS

Flickr >  Enlace directo para realizar una búsqueda de licencia Creative Commons.
IM Free > Contiene imágenes que han pasado por un filtro de calidad.
Foter > Filtro de calidad.
FreeImages
MorgueFile
Unsplash > Filtro de calidad.
Stockvault
Everystockphoto

VECTORES GRATIS

Iconfinder
Flaticon
Openclipart


ENLACES VARIOS

Adobe Color CC (Kuler) > Generador de paletas de colores armónicos.
Lipsum > Generador de texto aleatorio Lorem Ipsum.
Fillerati > Generador de texto aleatorio Lorem Ipsum en Inglés.
PNGGauntlet > Programa para reducir significativamente el peso de archivos PNG.

2 comentarios:

  1. Una recopilación muy útil y completa. Gracias por tu trabajo.

    ResponderEliminar
  2. Me encantan estos artículos porque el escritor ofrece las mejores herramientas que tiene, basadas en su experiencia y la investigación que realiza. Para sus recursos, hay otro enlace, quiero sugerir
    url-decode.com/cat
    aquí obtendrá más de 100 herramientas web, que lo ayudarán no solo en el desarrollo web sino también en la optimización web.

    ResponderEliminar