7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 1/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

La Empresa y los Medios de Comunicación Social

Redes Sociales en la Empresa Presentación E-business, E-commerce, Social Media y Redes Sociales Redes Sociales facebook

infografias web 2.0

Eduarea's Blog

Inicio > Herramientas Web 2.0 > + 30 Herramientas útiles de Diseño Web Responsive

31 de agosto de 2012 Eduardo Area Deja un comentarioGo to comments

+ 30 Herramientas útiles de Diseño Web Responsive

Con la gran popularidad de las tablets y los teléfonos inteligentes, la demanda de diseño de sitiosweb Responsive es más demandado que nunca. En este momento, los sitios web que más ymás personas están adoptando los diseñosResponsive y esta tendencia se esperaque sea más intensa a medida que elporcentaje aumente de los usuarios deInternet móvil. Este desarrollo ha creadouna enorme demanda de los servicios dediseñadores y desarrolladores web con

dominio en este sistema altamenteadaptable de diseños de página web. Yapodemos ver que responden a temas de WordPress, disponibles en proveedores de lasprincipales temáticas que respondan a los retos de la adopción de diferentes tamaños depantalla.

Como era de esperar, algunas útiles herramientas que respondan al diseño web han surgidorecientemente para apoyar el proceso de diseño y desarrollo de sitios web Responsive. Graciasa la gran comunidad de desarrolladores talentosos que hicieron todos estos recursos disponibles.Usted puede preguntar – ¿qué es exactamente una herramienta de diseño web Responsive parautilizarse? ¿Qué herramientas necesitamos para estar por delante del juego Responsive? Si eresun diseñador web o programador considerando la posibilidad de explorar y posiblementeespecializarse en el diseño web Responsive, ha venido al lugar correcto. Estamos compartiendocon ustedes algunas de las herramientas más útiles y recursos para ayudarle a construir unacaja de herramientas de diseño Responsive.

Puede encontrar valiosas herramientas de ayuda, las herramientas de diseño de prototipos,generadores de código, e incluso una colección de inspiración en diseños de sitios web queresponden en este artículo. Esperamos que esta colección le pueda ayudar a entrar en el mundodel diseño Responsive y marcar la diferencia. Si te gusta este artículo, por favor ayúdenos adifundir la palabra haciendo clic en los botones de los medios sociales. También estaremosencantados de recibir sus comentarios, sugerencias y adiciones a esta colección de herramientasútiles.

El diseño Web Responsive (RWD) es un enfoque de diseño web en el que se hace a mano unsitio para proporcionar una visualización óptima en la experiencia de navegación con fácil lecturay con un mínimo de cambio en el tamaño, velocidad, desplazamiento y-a través de una ampliavariedad de dispositivos (desde el ordenador de sobremesa a los teléfonos móviles).

Un sitio diseñado con RWD utiliza CSS3 con preguntas a los medios, una extensión de la regla @media, para adaptar el diseño al entorno de visualización, junto con fluidos a base deproporción-redes e imágenes flexibles.

RSS feed Twitter

Mi Google+Google+

 Autor Blog dedicado al E-business, E-commerce ySocial Media

 RSS - Entradas

 RSS - Comentarios

Suscripción por cor reo electrónicoEscribe tu dirección de correo electrónico parasuscribirte a este blog, y recibir notificacionesde nuevos mensajes por correo.Únete a otros 5.447 seguidores

Buscar en este blog 

agosto 2012

L M X J V S D

« jul   sep »

  1 2 3 4   5

6 7 8   9 10 11   12

13 14 15   16 17 18   19

20 21   22   23   24 25 26

27   28   29 30   31  

Últimos Artículos¿Qué es el Conectivismo?: Teoría delAprendizaje Para la Era Digital

El cuadrante de los líderes en SoftwareSocial (Libro Blanco)

Evaluar Digitalmente el Trabajo Escrito

La Evolución y 10 Primeros JuegosCambiadores de los Medios Sociales enuna Infografía

200 Factores Ranking de Google, laLista Completa en una Infografía

 Aprende E-business

 Aprende E-bus iness

Me gusta

Seguir “Eduarea's Blog”

Recibe cada nuevapublicación en tu buzón decorreo electrónico.

Únete a otros 5.447 seguidores

Seguir 

Sign me up!

Buscar

Introduce tu dirección de correo electrónico

Suscríbeme

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 2/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

Las consultas a los medios de comunicación permiten a la página utilizar diferentes reglasde estilo CSS basadas en las características del dispositivo cuando el sitio está siendomostrado, más comúnmente en la anchura del navegador.

El concepto de red líquida pide al elemento de la página el tamaño para estar en lasunidades relativas como porcentajes o EMS, no en unidades absolutas como píxeles o puntos.

Las imágenes flexibles son también de tamaño en unidades relativas, como para evitar quese muestre fuera de su elemento contenedor.

Diseños Responsive, Responsively Wireframed 

Ésta es una demostración de James Mellers, ilustra cómo una serie de páginas que puedentrabajar a través de estos diferentes dispositivos, mediante la simulación de cómo el diseño decada página cambiaría con Responsive, para adaptarse al contexto. Sólo tienes que utilizar losbotones de arriba a la derecha para alternar entre las presentaciones de escritorio y el móvil yver la diferencia.

 

Respons ive Web Design Sketch Sheets 

Esta herramienta es una ayuda útil para trazar la ubicación de los elementos a través de diversosdispositivos. Con esta herramienta, puede tener una idea de dónde colocar los elementos de lapágina web en diferentes tamaños de los navegadores.

 

Less Framework 4 

A 619 personas les gusta Aprende E-business.

Plu -in social de Facebook

Mis TweetsSlideShare el Gigante Silencioso para el

Marketing de Contenidos wp.me/pZIcS-20R via @EduareaTweeted 1 day ago

La Importancia de la Creación deConexiones Humanas con su Marca enlos Medios Sociales wp.me/pZIcS-21nvia @EduareaTweeted 1 day ago

¿Qué es SCORM & Tincan?wp.me/pZIcS-22k via@EduareaTweeted 1 day ago

Con WhatsApp, Facebook Construye unaConglomerada Infraestructura Socialwp.me/pZIcS-22a vía@EduareaTweeted 1 day ago

7 consejos de retroalimentación.Feedback is an essential element in theteaching/learning process.pinterest.com/pin/9527934834…Tweeted 3 days ago

Posts Más Vistos23 Ejemplos de Grandes Sitios deDiseño Web Responsive

Top 24 Plugins Gratis para WordPress

+25 Plugins Asombrosos de Resbalador jQuery Responsive

20 de los Mejores Plugins paraWordPress de Comercio Electrónico oCesta de la Compra

10 Consejos Impresionantes paraOneNote que Debe Utilizar Todo elTiempo [Windows]

+ 30 Herramientas útiles de Diseño WebResponsive

Nuevo Marketing: De las 4 P a las 4 C yde ahí a las 4 V

¿Qué es el Conectivismo?: Teoría delAprendizaje Para la Era Digital

20 Mejores Herramientas para EnviarArchivos Grandes a los Clientes o Socios

¿Qué es el Upselling?: Upsells-cómovenderle más a sus clientes

EtiquetasAndroid Aplicaciones AppleArticulos Artículos Bing Blog

blogs Brian Solis Business Community

Manager CRM Digg Diseño e-business e-

commerce ebooks ERP Facebook

Ofrecido por WordPress.com

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 3/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Less Framework es un sistema de red de CSS para diseñar sitios web adaptativos. Contiene 4diseños y 3 juegos de tipos de tipografía, todo ello basado en una única red.

 

Multi-Device Layout Patterns 

Los dispositivos multi-patrones de diseño son conjuntos de patrones populares utilizados por losdiseñadores para hacer diseños Resposive. Se muestra cómo los sitios web se adaptan adiferentes resoluciones de pantalla y cómo se muestran los elementos de la página con lavariación de tamaños de pantallas.

 

Fluid Grids 

Twitterme¿Qué es el Conectivismo?: Teoría delAprendizaje Para la Era Digital |@scoopit sco.lt/7DIGGX 4 days ago

¿Qué es el Conectivismo?: Teoría delAprendizaje Para la Era Digitalnblo.gs/UYHAs 4 days ago

¿Qué es el Conectivismo?: Teoría delAprendizaje Para la Era Digital - ¿Qué esel Conectivismo?: Teoría del...tmblr.co/Z9lghv1AZALyv 4 days ago

¿Qué es el Conectivismo?: Teoría delAprendizaje Para la Era Digitalwp.me/pZIcS-26h 4 days ago

El cuadrante de los líderes en SoftwareSocial (Libro Blanco) | @scoopitsco.lt/7Wy8Pp 5 days ago

Bookmarks del.icio.us

BlogrollBlog de Eduardo

Documentation

Eduarea\’s Blog

Plugins

Suggest IdeasSupport Forum

Themes

WordPress Blog

WordPress Planet

Flickr Google Google Analyticsherramientas HTML HubSpot InboudMarketing Infografiainfografias infographicinfographics Infographie Internet

Internet Marketing iPhone LeadNurturing LinkedIn marcas

Marketing Medios decomunicación Social medios

sociales multimedia MySpaceNoticias palabras clave PayPal

Pinterest plugins Posicionamiento

PPC publicidad recursos RedesSociales responsive ROI RSS

Search engine optimization SEM

SEO Sitio Smartphones SMM SocialMedia social media Social mediamarketing Social network social networking

Twitter vídeos Web web 2.0Wikipedia WordPress WordpressYahoo YouTube

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 4/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Fluid Grid Calculator es una buena herramienta que se puede utilizar para generar CSS para el

diseño de una red de fluidos. Todo lo que tienes que hacer es introducir el número de columnasy el tamaño de las columnas y los canales de comunicación.

 

Simple Grid 

Crear el código en su parrilla debe ser el menor de sus problemas en la construcción de un sitio.

Es por eso Simple Grid mantiene las cosas simples y directas con poco marcado y clases comosea posible. Incluso las ranuras de la rejilla de anidación no requiere clases adicionales.

 

Simple Device Diagram 

Este dispositivo es una herramienta muy útil en la planificación de Responsive en el diseño web.Simplifica el proceso de elegir qué amplitudes de dispositivo para diseñar. Describe el anchoideal para el diseño de los sitios de disposición 3, 4 sitios de diseño, etc.

 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 5/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

ProtoFluid 

Protofluid es una herramienta que permite hacer prototipos rápidos de diseños fluidos, CSS ydiseño adaptable Responsive. ProtoFluid simplifica el desarrollo de diseños de fluidos y CSS

adaptativo utilizando preguntas en los medios. Funciona dentro de su sitio web, aplicación HTML5o un juego en forma de un único JavaScript incluido.

 

1140 CSS Grid 

1140 CSS Grid encaja perfectamente en un monitor de 1280. En monitores más pequeños, se

convierte en “líquido” y se adapta a la anchura del navegador. Más allá de un cierto punto queutiliza preguntas a los medios para servir a una versión móvil, que esencialmente apila todas lascolumnas en la parte superior de uno al otro por lo que el flujo de información sigue teniendosentido. Aunque la resolución lo mejor para esta rejilla CSS es una de 1280px, todavía funcionaigual de bien con pantalla de 1024px, ya que todo se puede ver al igual que en la pantalla de1280px y todo el camino hasta las pantallas de los móviles. Es una gran herramienta para losdiseñadores, con un diseño, es decir, de 1280px que se adapta a todos los tamaños de pantalla.No hay necesidad de declarar tamaños en línea para las imágenes a medida que se re-dimensiona más pequeño.

 

Tiny Fluid Grid 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 6/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Tiny Fluid Grid es una aplicación basada en web increíble que le puede ayudar a determinar elsistema de red de su diseño. Al establecer el número de columnas, el porcentaje de los extremosy mínimo y las anchuras máximas de su diseño, la aplicación puede dar una CSS descargable dela red Responsive.

 

Gridless 

Gridless es una opción en HTML5 y CSS3 para hacer Responsive para el móvil, los sitios Webde navegador lo verán con una tipografía hermosa.

 

Responsive Design Sketchbook 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 7/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Rápidamente puede trazar su sitio Responsive con el cuaderno de bocetos de diseño Responsive.Inspirado por “Responsive Web Design” de Ethan Marcotte, este nuevo cuaderno de dibujo tieneuna portada multi-red de bocetos en miniatura de ventanas múltiples. La última página es unapágina de un solo modelo con indicadores de quiebro.

 

Respons ive PX 

Esto funciona mediante la carga de su sitio web y la visualización de la parte visible en diferentestamaños de pantalla. Se puede ajustar la anchura y la altura de la pantalla para simular la

resolución de diferentes dispositivos. 

The responsinator  

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 8/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

The Responsinator ayuda a los responsables del sitio web rápidamente a obtener unaindicación de como responde su sitio y como se verá en los dispositivos más populares. Noprecisamente replica el aspecto que tendrá, para la prueba exacta pruebe siempre en losdispositivos reales.

 

Screenfly 

Screenfly le permite ver su sitio web en una variedad de pantallas de dispositivos yresoluciones. Escriba una dirección URL y haga clic en GO para empezar.

 

Responsive Web Design Testing Tool 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 9/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Otra herramienta de prueba que le puede proporcionar una visión de su sitio web en tamaños depantallas diferentes, es ésta una aplicación web. Se muestra la página web al mismo tiempo,una vez que haya ingresado su dirección URL. Le puede ayudar a ayudar con las pruebas de sussitios web Responsive mientras diseñas y construyes con ellas.

 

 Adobe Shadow 

Adobe Shadow es una nueva herramienta de inspección y de vista previa que permite a losdesarrolladores y a los diseñadores web para trabajar más rápido y con mayor eficienciamediante la racionalización del proceso de vista preliminar, por lo que es más fácil depersonalizar los sitios web para dispositivos móviles.

 Golden Grid System 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 10/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Golden Grid Systeme tiene una rejilla plegable que se puede utilizar como punto de partida enel diseño web Responsive. Golden Grid Systeme (GGS) divide la pantalla en 18 columnas,incluso. Las columnas más a la izquierda y más a la derecha se utilizan como los márgenesexteriores de la rejilla, lo que deja 16 columnas para su uso en el diseño. Las 16 columnas sepueden combinar, o doblar, en 8 columnas para el tamaño de las pantallas de las tablets, y en 4

columnas para el tamaño de los móviles. De esta manera GGS puede cubrir fácilmente cualquiertamaño de pantalla desde 240 hasta 2560 píxeles. El autor, Joni Korpi, tiene un muy buenconsejo a sus usuarios. No utilice SGG como es. “Tómalo aparte, tome las piezas que más tegusten, y adaptarlas a su propia manera de trabajar”, eso es lo que dijo.

 

Gridpak 

Gridpak es el momento de punto de partida para sus proyectos Responsive, mejorar su flujode trabajo y el ahorro. Crear un sistema de red de respuesta una vez utilizando la interfaz simpley dejar a Gridpak que haga todo el trabajo mediante la generación de archivos PNG, CSS yJavaScript.

 

Columnal 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 11/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

Columnal es un sistema sensible CSS rejilla ayuda a los navegadores de escritorio y a losmóviles a que jueguen muy bien juntos. Es 1140px de ancho, pero dado que es fluido,responderá a la anchura de la mayoría de los navegadores. Si el navegador se pone losuficientemente estrecho-delgado, el sitio se mostrará en un formato móvil de forma fácil.

 

Skeleton

 

Skeleton es una pequeña colección de archivos CSS y JS que pueden ayudarle a desarrollarrápidamente los sitios para que se vean hermosos en cualquier tamaño, ya sea una pantalla de17 ” de un ordenador portátil o un iPhone.

 

Bootstrap 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 12/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Bootstrap ofrece HTML simple y flexible, CSS y Javascript para conocidos componentes deinterfaz de usuario y las interacciones. En otras palabras, es un conjunto de herramientas defront-end para acelerar el desarrollo. Creado y mantenido por Mark Otto y Jacob Thornton enTwitter.

 

320 and Up 

La práctica común en el diseño web Responsive es empezar con el escritorio de tamañocompleto como punto de partida y de allí hacer escalas en pantallas de menor tamaño. Loscreadores de 320 and Upq lo tienen en el reverso. Ellos dijeron que debe comenzar a diseñar enlos navegadores pequeños y desde entonces será su forma de trabajo. La versión actualizada delas características de 320 and Up versión cinco, CSS3 con incrementos de consulta al medio:480, 600, 768, 992 y 1382px, “atmósfera” de diseño (color, textura y tipografía) separados deldiseño, los estilos de arranque para los botones, los formularios, las tablas y más.

 

FitText 

FitText hace los tamaños de fuente flexibles. Use este plugin en su diseño Responsive paralograr titulares escalables que llenen el ancho del elemento padre. Este plugin jQuery funcionainflando el tipo web para llenar su elemento padre. Es por eso que todavía puede obtener un

texto de anchura completa que no importa cuál sea el tamaño de su pantalla. Funciona bien conLettering.js, o cualquier otra propiedad CSS3 que usted se lanza en ella.

 

inuit.css 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 13/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

inuit.css es un framework CSS equipado con plugins llamados iglúes, que amplían el marcobásico para agregar funcionalidad más específica. Tiene un constructor de cuadrícula comosistema personalizado para la creación de iglús de malla fija o fluido del sistema.

 

Mobile Boilerplate 

Mobile Boilerplate es una plantilla base creada por los desarrolladores de HTML5 Boilerplate,para ayudar a los desarrolladores a crear aplicaciones móviles para web móvil rápidamente.Cuenta con cross-browser para la vista de optimización para Android, iOS, IE Mobile, Nokia yBlackberry. También soporta el almacenamiento en caché del servidor Apache, la compresión ylos demás valores predeterminados de configuración.

 

Respond.js 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 14/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Respond.js es rápido y ligero para min/max-ancho CSS3 Preguntas de Medios (para Explore 6-

8, y más). El objetivo de este script es proporcionar un rápido y ligero (3 kilobyte minified / 1kilobyte gzipped) script para permitir diseños de web Responsive en los navegadores que noapoyan Media Query CSS3 – en particular, Explorer 8 e inferior. Este script remendaráprobablemente el soporte a otros navegadores que no apoyan esta propiedad.

 

 Adapt.js 

Adapt.js es un archivo de peso ligero en JavaScript que determina qué archivo CSS puedecargar antes de que el navegador vea una página. Si el navegador se inclina o se cambia eltamaño, Adapt.js simplemente comprueba su ancho, y sirve sólo el CSS que se necesita,cuando es necesario.

 

mediaQuery Bookmarklet 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 15/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

mediaQuery Bookmarklet proporciona una representación visual de las actuales dimensionesde visualización y consulta a los medios de comunicación.

 

Respons ive Data Table Roundup 

Ésta colección de mesa comisariada por Chris Coyier, discute cómo las tablas deben aparecercuando el tamaño de la pantalla se reduce. Se completa con ejemplos y códigos fuente que sepuede ver como una ayuda para su propio diseño web Responsive.

 

 Adapt ive Images 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 16/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Adaptive Images detecta el tamaño de pantalla de su visitante y automáticamente crea,cachés y entrega a los dispositivos apropiados a escala con reversiones de las imágenesapropiadas en HTML empotradas en su página web. No hay cambios de márgenes necesarios. Sepretende para el uso con los diseños Responsive para ser combinado con las técnicas fluidas deimagen.

 

Seamless Responsive Photo Grid 

Seamless Responsive Photo Grid es una cuadrícula que se puede utilizar para hacer que lasimágenes muestren borde a borde en la ventana del navegador sin espacios. La idea detrás deeste truco de Chris Coyier es tejar las fotos y hacer el flujo en una serie de columnas deizquierda a derecha a lo largo de toda la página. Al establecer el ancho de imágenes a 100%, seocupará exactamente de la anchura de una columna. El número de columnas depende deltamaño del navegador. A medida que el tamaño de la pantalla se hace más pequeño, la redfunciona por tener preguntas a los medios para probar el ancho del navegador y ajustar elnúmero de columnas en consecuencia. Puede cambiar el tamaño de su navegador a su alrededory ver las cosas que se mueven muy rápido.

 

Slabtext 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 17/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Slabtext es un plugin de jQuery para la producción de grandes titulares, negrita y capacidad derespuesta Responsive. En pocas palabras, el guión se divide en filas de titulares antes decambiar el tamaño de cada fila para llenar el espacio horizontal disponible. El número ideal decaracteres para establecer en cada fila se calcula dividiendo la anchura disponible por el tamañode fuente CSS – la secuencia de comandos utiliza entonces este recuento del carácter ideal paradividir el título en combinaciones de palabras que se muestran como líneas separadas de texto.

 

Convert a Menu to a Dropdown for Small Screens 

Chris Coyier explica cómo hacer un menú de navegación para convertir en una lista desplegablecuando se navega por el sitio web en una pantalla pequeña. Esa es una mejor opción que unvínculo muy pequeño.

 

Media Queries 

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 18/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

 

Media Queries cuenta con una importante colección de diseños web Responsive que sepueden ver como una inspiración para su diseño.

 

Bibliografía:

Responsive Web Design with HTML5 and CSS3 por Ben FrainWordPress Meet Responsive Web Design por Michael PickDelivering Web to Mobile por Mark PowerResponsive Design Guide porMatt Crist, Alec Francesconi, Andrew Paradise, George WhiteGoMobile por Jason WilsonMobile-First Responsive Web DesignResponsive Web Design por Tim DavisonResponsive Web Design: Enriching the User Experience por Brett S. GardnerHow to Build a Mobile Website: Know Your OptionsResponsive Web Design Increases SalesResponsive Design and Small Screen Optimization por Patrick Hamann

Artículos relacionados:

 

33 Estupendos Temas de Comercio Electrónico para WordPress

24 Plantillas Responsive Bootstrap por ThemeForest…

10 plantillas excelentes para OpenCart que sus clientes no pueden resistirse

 

L o s M e r c a d o s On l i n e d e E n v a t o  : e b o o k s , t u t o r i a l e s , víd e o s , c u r s o s , t em a s p a r a  

W o r d P r e s s   y A p p  

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 19/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 20/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 21/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 22/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

Comentarios (14)Trackbacks (0)Deja un comentario Trackback

31 de agosto de 2012 en 6:13 PM | #1 Responder | Cita

Responsive web design es un enfoque que sugiere que el diseño web deberesponder al comportamiento del usuario y al medio ambiente sobre la base del

Herramientas Web 2.0

CSS, css3, desarrolladores web, diseño de sitios web, diseño web, herramientas, HTML5,responsive, usuarios de internet, Web

Compartir esto:

Facebook 141 StumbleUpon Pinterest Twitter  123

Correo electrónico Google LinkedIn 25 Más

Google+

 Eduardo Area

Eduarea

     

     

Relacionado

La verdad detrás de diseño WebResponsive: ¿Es la próxima granesperanza o todo es un bombo?

23 Ejemplos de Grandes Sitios deDiseño Web Responsive

+25 Plugins Asombrosos deResbalador jQuery Responsive

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 23/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

tamaño de pantalla, la plataforma y la orientación.

El diseño Responsive le permite llenar los espacios en blanco en las clases dedispositivos a través de la aplicación de las redes de fluidos, imágenes flexibles,y (cuando sea posible) las consultas de los medios.

Las rejillas de fluido se refieren a diseños de fluido donde las unidades de rejillacambian el tamaño según el tamaño de la pantalla. Se trata de definir suspropios parámetros para varios objetos del código como columnas, el espacio ylos contenedores. El tamaño y el espacio son los dos componentes principalesque se centran en la creación de su sistema de red flexible. Ya sea que estáusando un sistema de red prefabricado o crear una solución personalizada,

utilizando porcentajes (o EMS) en lugar de píxeles como sus unidades demedida.

Las imágenes de movimiento flexible y escala con la red flexible. Esto significaque la escala está en función de los atributos HTML de altura y anchura para elcontenido más el texto en dispositivos más pequeños. La otra forma de lasimágenes de escala se les recorta con la ayuda de la propiedad dedesbordamiento de CSS. Los recipientes alrededor de las imágenes cambiaránpara adaptarse a los nuevos entornos de visualización. Una forma más estácargando diferentes versiones de imagen a un servidor y la visualización de laversión de tamaño adecuado y dinámico en función del dispositivo utilizado.

Consultas de medios de comunicación (Media Queries) permiten a losdiseñadores crear múltiples diseños utilizando los mismos documentos HTML deforma selectiva que sirve al estilo basado en las características de la aplicación

del usuario, tales como el tamaño de la ventana del navegador, la orientación, laresolución de pantalla, el color. Actúan como los comentarios condicionales queson capaces de indicar el dispositivo utilizado y envían un código diferente paralos diferentes atributos del dispositivo, en otras resoluciones de pantalladiferentes las palabras objetivo con diferentes estilos.

Las resoluciones de pantalla: Las resoluciones comunes incluyen 320px deanchura de retrato y 480px la anchura de paisaje para los smartphones, 768pxde anchura de retrato y 1024px la anchura de paisaje para las tablets (yresoluciones netbook típicas) así como varias resoluciones de monitor deescritorio. Una disposición que sólo provee alimentación para resolucionespredeterminadas a menudo es referida como siendo adaptable, mientras queuna disposición realmente sensible será construida usando EMS o porcentajes,permitiendo a un nivel infinito del escalamiento.

31 de agosto de 2012 en 7:16 PM | #2 Responder | Cita

La información aportada tanto en este post como en vuestro BLOG es muyvaliosa.Solo haría el aporte de que Responsive web Design está siendo muy valoradopor Google para el buen posicionamiento en buscadores .Pueden ver el articulo de posicionamiento en buscadores en el siguiente enlace:http://audivproduccions.blogspot.com.es/2012/08/mas-informacion-sobre-responsive-web.html

Un saludo

2 de septiembre de 2012 en 8:11 AM | #3 Responder | Cita

I like the helpful info you provide in your articles. I’ll bookmark your blog andcheck again here frequently. I am quite sure I will learn many new stuff righthere! Good luck for the next!

2 de septiembre de 2012 en 10:16 PM | #4 Responder | Cita

Reblogged this on El blog de Rocío Román.

6 de septiembre de 2012 en 4:07 PM | #5 Responder | Cita

Hola creo que estos sitios web nos ayudan a adquirir más conocimientos y atener herramientas básicas a la hora de implementar estrategias en un negocio

gracias.Saludos

10 de septiembre de 2012 en 11:40 PM | #6 Responder | Cita

Muy buena colección de herramientas, sólo echo a faltar el framework

AudivProduccions

AmedarConsulting

Group

El blogde Rocío

Diseñoweb

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 24/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/[25/03/2014 01:57:12 p.m.]

Foundation 3.0, por lo demás está genial. Screenfly es excelente!

19 de noviembre de 2012 en 1:59 PM | #7 Responder | Cita

Excelente información! Gracias por este resumen tan completo, vi un par decositas que me pueden ser muy útiles. Muchas gracias por compartir estainformación. Estaré atenta a sus nuevas publicaciones. Saludos!

29 de diciembre de 2012 en 11:55 AM | #8 Responder | Cita

Gran post con elementos casi imprescindibles si queremos empezar a realizardiseño adaptable. Creo que sería interesante añadir Modernizr, es de granayuda para detectar las funcionalidades de los browser que nos visitan y poderactuar en consecuencia (cargar o no scripts necesarios, css’s alternativos) etc…

29 de enero de 2013 en 12:20 PM | #9 Responder | Cita

Si ya en 2012 todo apuntaba hacia ella, 2013 será el año de la tecnologíaresponsive. Ha dejado de ser optativo para ser algo básico en los diseños de lossites.

Tomo nota de algunas herramientas que no conocía. ¡Muchísimas gracias!

11 de marzo de 2013 en 5:04 PM | #10 Responder | Cita

I would like to appreciate the actual efforts you get on paper this informativearticle.

I am hoping a similar best performance of your stuff in the futuretoo. In reality your creative composing abilities offers influencedme to begin my very own BlogEngine blog site right today.Actually the blogging and site-building will be dispersing it’s means rapidly. Thearticle is really a great illustration of this.

1 de mayo de 2013 en 6:05 AM | #11 Responder | Cita

Muy buena información. Gracias.

http://www.mercadeowebefectivo.com

5 de mayo de 2013 en 10:20 AM | #12 Responder | Cita

En http://www.haztuweb.es están todos pasos para crear una página web gratiscon Blogger y en pocos minutos. Está muy bien explicado, sencillo y fácil.

30 de mayo de 2013 en 10:06 PM | #13 Responder | Cita

Hay una herramienta que me pasaron en la universidad: http://herramientas-online.com/responsive/responsive-design-test-online.php sirve para hacer untest a las páginas web moviles con responsive design.

12 de marzo de 2014 en 3:17 PM | #14 Responder | Cita

PC Users :

Excelente, es siempre una buena opción utilizar plantillas para iniciartus proyectos.http://www.pcuserspanama.com

Cómo Utilizar las Piezas del Teléfono Móvil Roto Como Herramientas deSupervivencia [infografía] Introducción a la Automatización de Marketing Social [Infografía]

Sandra –DiseñoWeb

DOSESTUDIO

Iván

Alberto

Myles

Cristian

Bonilla

Abeled

Carlota

PC Users

Deja un comentario

7/17/2019 + 30 Herramientas útiles de Diseño Web Responsive _ Eduarea's Blog

http://slidepdf.com/reader/full/-30-herramientas-utiles-de-diseno-web-responsive-eduareas-blog 25/25

0 Herramientas útiles de Diseño Web Responsive | Eduarea's Blog

ArribaBlog de WordPress.com. El tema INove.