f Recopilación recursos para maquetadores web - El Maquetador Web, Maquetación Freelance, Curso HTML HTML5 CSS Tutorial Diseño Responsive Adaptable

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

Recopilación recursos para maquetadores web

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

COMPLEMENTOS NAVEGADORES


COMPLEMENTOS FIREFOX

Firebug > Edita CSS, HTML y Javascript a tiempo real mientras estás navegando.
Web Developer > Añade un sin fin de utilidades y funcionalidades para desarrolladores web, como activar, desactivar y visualizar Javascript y CSS. Líneas guía, 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 CSS relacionadas con las fonts.
Juicy Studio Accessibility Toolbar > Extensión que permite comprobar entre otros cosas 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.
Gmail Notifier (restartless) > Comprueba si hay correos nuevos Gmail.

EXTENSIONES CHROME

Web Developer > Añade un sin fin de utilidades y funcionalidades para desarrolladores web, como activar, desactivar y visualizar Javascript y CSS. Líneas guía, Regla, Validador de CSS y HTML.
YSlow > YSlow analiza páginas web y nos recomienda maneras para mejorar el rendimiento de las mismas.
Pixel-Perfect > Ayuda para "clavar" los diseños.
Page Ruler > Dibuja una regla para obtener las dimensiones en píxeles. Mide objetos de cualquier página web.
Eye Dropper > Cuentagotas te permite saber cualquier colo que veas en una web.
Web Developer Checklist > Te analiza tu web y te dice si estas siguiendo las mejores prácticas respecto a SEO, accesibilidad, usabilidad y optimización de carga.
PicMonkey > Capturador de pantallas con editor propio.

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.
Specificity Calculator > Ayuda Visual para entender la jerarquía CSS.

RESPONSIVE

Responsinator > Comprueba cómo se ve cualquier web en los dispositivos mas populares.
A simple responsive table solution > Solución para hacer las tablas responsive.
FooTable > Tablas responsive.
http://elvery.net/demo/responsive-tables  > Tablas responsive.
http://zurb.com/playground/responsive-tables > Tablas responsive.
Real Favicon Generator > Generador automático de Favicon para todos los dispositivos.


IMÁGENES

Adaptive Images > Provee de imágenes pequeñas a dispositivos pequeños.
PNGGauntlet > Programa para reducir significativamente el peso de archivos PNG.
pngquant > Información sobre compresión de PNG, pollyfill y compresor.
pngoo > Compresor de PNG.

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 cliente.
Retina.js > Nos facilita 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 de forma inteligente los contenedores de las imágenes flexibles.
Fotorama > Crea galerías de imágenes responsive con thumnails y zoom.
Parallax.js > Para hacer fácilmente un efecto parallax al hacer sctoll.
Simple-expand > Plugin de Jquery que permite colapsar elementos.
jQuery Modal > El modal accesible mas simple que jamás verás.
Modaal > Modales accesibles de nivel AA.
SweetAlert2 > Nos permite crear ventanas de alerta accesibles basados en estándares WAI-ARIA.
Aria Modal > El mejor modal Accesible, prima la accesibilidad sobre el diseño.
Vex > Nos ofrece modales modernos.
animatedModal.js >Modales Animados.
Animated Goal Progress Bar jQuery plugin > Plugin de jQuery para crear una barra de progreso animada en una capa vacía. Contiene parámetros para definir una cantidad total, cantidad actual y añadir texto dentro de la capa.
jQMeter > Plugin de jQuery sencillo y simple que nos permite animar barras de progreso horizontales o verticales. Se puede modificar opciones como ancho, alto, colores...  para conseguir el aspecto que se desea.
ProgressBar.js > Plugin de jQuery responsive (totalmente compatible con móviles) para animar cualquier forma vectorial SVG como líneas, cuadrados, círculos, semicírculos... muy recomendable para utilizar pantallas de carga en tu web. Compatible con IE9.
LoadGo > Plugin de JavaScript que nos permite crear una barra de progreso usando nuestras propias imágenes. Perfecto para la animación de logos. Crea una capa encima de la imagen que simula el proceso de carga usando las dimensiones de la imagen. Compatible con IE9.
jquery-circle-progress > Plugin de jQuery para animar círculos.
Progress Step > Plugin de jQuery que crea una barra de progreso numérica por pasos. Muy recomendable para usarlo en cualquier proceso guiado por pasos, como por ejemplo en un alta de usuario.
jQuery Progression JS >  Plugin de jQuery que nos muestra a tiempo real el progreso que nos queda para completar cualquier formulario.

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.
Placeholders.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 IE.
Selectivizr > Para poder usar pseudo clases en IE 6-8.
Listado Modernizr > Listado de Polyfills recomendados por Modernizr.
Listado HTML5 Please > Listado de Polyfills recomendados por el sitio web HTML5 Please.
Video for everybody generator > Nos ayuda a generar la etiqueta <video>.

ACCESIBILIDAD

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.

RESET - HACK

Normalize.css
Eric Mayer Reset
HTML5 Doctor CSS Reset
Boilerplate
Nicolas Gallagher Micro Clearfix Hack

VALIDADORES -  FORMATO DE CÓDIGO

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

COMPRESORES DE CÓDIGO

CSS Compressor
CSS Minifier
Styleneat

CSS

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 múltiples 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 qué propiedades se pueden animar.
Cubic-bezier > Nos permite crear animaciones cubic-bezier fácilmente.
Autoprefixer CSS Online > Añade automáticamente vendor prefixes tomando como referencia Can I Use.
50 Useful CSS Snippets
Style a Select using only CSS > CSS para cambiar la apariencia de un select.
Stylify Me > Analiza nuestra web y nos muestra estadísticas de nuestro CSS.
CSS Stats > Analiza nuestra web y nos muestra estadísticas de nuestro CSS.
CSS color extractor > Nos muestra visualmente los colores utilizados en un CSS, o URL.
CSS Color Palette Extractor >  Nos muestra visualmente los colores utilizados en un CSS.
zedbi View a website's color palette >  Nos muestra visualmente los colores utilizados una URL permitiéndonos seleccionar los Archvios CSS que contienen.
CSS Comb > Agrupa tus selectores CSS por Funcionalidad.
JitBit Unused CSS > Herramienta online que nos muestra un listado con los selectores CSS sin usar de tu web.
PurifyCSS > Función que coge el contenido de tu web HTML/JS/PHP ... y combinado con Grunt es capaz de escanear todo nuestro contenido local en busca de clases sin usar y generar un nuevo archivo CSS totalmente limpio.
PurgeCSS > Herramienta para quitar CSS innecesario.
UnCSS > Herramienta para quitar CSS innecesario.
Animated Fixed Header > CodePen con una cabecera fija (fixed) animada.

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 sin Copyright (Creative Commons Zero (CC0)), 100% gratis para hacer lo que quieras con ellas:


Unsplash > Banco de imágenes gratis con filtro de calidad (son seleccionadas antes de subirlas),
Pexels > Banco de imágenes gratis con filtro de calidad.
Splitshire > Banco de imágenes gratis para su uso comercial.
Pickupimage > Imágenes gratis para descargar.
Pixabay > Imágenes gratuitas de alta calidad, más de 860.000 fotos gratis, vectores e ilustraciones.
Gratisography > Imágenes Gratis en alta resolución que puedes usar para tu uso personal y proyectos comerciales.
Realisticshots > Banco de imágenes gratis creativas en alta resolución para uso personal y comercial.
Lifeofpix > Fotografías gratis en alta resolución.
Freenaturestock > Banco de imágenes gratis de naturaleza (Royalty-free) para usar como quieras.
Magdeleine > Imágenes gratis con filtro de calidad para tu inspiración.
Snapwiresnaps > Imágenes gratis con filtro de calidad.
Stocksnap > Banco de imágenes bonitas gratis, Cientos de imágenes gratis en alta resolución, libres de restricciones de copyright.
Viintage > Cientos de miles de gráficos vintage gratis, libres de copyright.
Publicdomainarchive > Banco de imágenes gratis de dominio público, todo lo que necesitas para tus proyectos creativos.
Isorepublic > Banco de imágenes gratis para creativos.
Furiouscamera > Buscador de imágenes y recursos gratis para uso comercial.
Mmtstock > Fotos gratis para uso comercial. Úsalas en tu web, plantilla, proyecto, material de imprenta ...
Flickr > Podemos hacer una búsqueda con imágenes que se permite su uso comercial.

VECTORES GRATIS sin Copyright (Creative Commons Zero (CC0)), 100% gratis para hacer lo que quieras con ellos:

Openclipart > Más de 139.000 Vectores 100%  gratis para uso comercial para hacer lo que quieras con ellos. Cada vez que un artista sube un vector a Openclipart, se le deja claro que el artista está liberando los derechos para que cualquiera los use por cualquier razón.
Publicdomainvectors > Más de 50.000 vectores de dominio público.
i2Clipart > Cliparts royalty free de dominio público.
Clker > Cliparts gratis que puedes usar para cualquier cosa.
Pixabay > Imágenes gratuitas de alta calidad, más de 860.000 fotos gratis, vectores e ilustraciones.
Goodfreephotos > Repositorio con fotos en alta resolución y vectores. Todos sin copyright con licencia CC0.
Stockio > Banco de imágenes, vectores, iconos, fonts y vídeos para uso comercial y personal.

VÍDEOS GRATIS sin Copyright (Creative Commons Zero (CC0)), 100% gratis para hacer lo que quieras con ellos:

Coverr > Sin duda el que más orientado está para su uso en web. Se presentan bajo el eslogan "Vídeos bonitos gratis para tu página web".
Stock Footage 4 Free  > Centrado en la calidad de los vídeos, no en la cantidad.
Life of Vids > Banco de vídeos y bucles gratis creado por la agencia de marketing Leeroy
IgniteMotion Free Backgrounds > Especializada en vídeos en movimiento para usarlos como fondo.
CuteStockFootage > Vídeos de gran calidad visual.
Vimeo > Grupo de Vimeo cuyos usuarios han cedido los derechos de autor para hacer el uso que quieras.
Beach Front B-Roll  > Especializado en vídeos en alta definición HD para utilizarlos como fondo para web.
OrangeHD > Banco de vídeos pequeño, en total contiene unos 200 vídeos gratis.

ENLACES VARIOS

Adobe Color CC (Kuler) > Generador de paletas de colores armónicos.
Lipsum > Generador de texto aleatorio Lorem Ipsum.
Fillerama > Generador de texto aleatorio en Inglés.
Lit Ipsum > Generador de texto aleatorio en Inglés.


No hay comentarios:

Publicar un comentario