Archivo

Posts Tagged ‘desarrolladores web’

Artículos y Tutoriales para Empezar con jQuery

24 de septiembre de 2013 Deja un comentario

JQueryEl frontend (En ciencias de la computación, el frontend es responsable de reunir información en diversas formas de la transformación y del usuario, para que se ajusten a una especificación del backend que puede utilizar. El frontend tiene una interfaz entre el usuario y el back-end. Los extremos frontal y posterior se pueden distribuir entre uno o más sistemas ) de los desarrolladores web han pavimentado el camino para los estándares más claros. En el transcurso de los años se han hecho lentamente los navegadores web que se han acondicionado para hacer páginas web propias de esta manera. Y ahora, con el lanzamiento del HTML5 estándar, las cosas se están moviendo más rápido que nunca. Por lo tanto, no es ninguna sorpresa que jQuery ha dado un salto en el punto de mira como el principal para animaciones/biblioteca de efectos.

jQuery es una biblioteca JavaScript rápida, pequeña y rica en funciones. Hace las cosas como documento HTML recorrido y la manipulación, el control de eventos, animación y Ajax mucho más simple con un API fácil de usar que funciona a través de una multitud de navegadores. Con una combinación de flexibilidad y extensibilidad, jQuery ha cambiado la forma en que millones de personas escriben JavaScript.

Ajax

Todos sabemos cuán poderoso el jQuery puede ser. La experiencia de usuario es siempre #1 en mi lista de verificación del diseño web y debería estar en el suyo. Es por eso que he reunido una colección de 22 tutoriales  impresionantes alrededor del jQuery UI. Si tiene preguntas o similares tutoriales, por favor, comparta sus comentarios en el área de discusión a continuación.

 

Tutoriales jQuery en español

 

Tutorial jQuery

Fundamentos de jQuery: Libro gratuito de jQuery en español

 

Fundamentos jQuery

Los 51 Mejores Tutoriales y Ejemplos de jQuery

 

51 mejores tutoriales sobre jQuery

 

Hay cosas en toda la Web acerca de jQuery, pero la búsqueda de los mejores tutoriales para empezar puede ser difícil. Estos son ejemplos y tutoriales de maestros jQuery para mantenerte en el camino correcto.

Vamos a empezar con los maestros del jQuery y con algunos de sus mejores tutoriales, entonces vamos a pasar a los tutoriales más categorizados, hojas de trucos y hacks.

 

jQuery for Absolute Beginners Video Series

 

jQuery for absolute beginners

 

Así se mire por donde se mire, “jQuery va” y “jQuery que”. Para el último año, esta biblioteca ha sido la favorita de los Javascript. Pero ¿tiene la sensación de que no se puede parecer a aprender la cosa porqué… No sé por qué? ¿No le gusta cómo los cursos actuales suponen que saben mucho más de lo que hacen? Si esto suena a verdad, le pueden ayudar.

A partir de hoy, están iniciando una serie de vídeos que cada día le enseñará EXACTAMENTE cómo utilizar la biblioteca jQuery en sus propios proyectos. Vamos a empezar por descargar el marco, creando la primera función, examinando sintaxis, y mucho más. Cada día van a publicar unos cinco o diez minutos “régimen de entrenamiento” que se expande en lo que ya ha aprendido. Por lo que no hay razón alguna para luchar contra él. Aprender esta cosa del porqué… No sé por qué, y empezar a ganar más dinero en ThemeForest.net con sus nuevas habilidades.

 

Quick Tip: Learning jQuery 1.4 $.proxy

 

Quick Tip Learning jQuery 1.4′s $.proxy

 

Una de mis nuevas características favoritas de jQuery 1.4 es el nuevo método de $.proxy. Nos permite la posibilidad de un contexto particular de la fuerza cuando que llama a un método. En JavaScript, puede haber ocasiones cuando es difícil aguantar a esta palabra clave. Por ejemplo, cuando está unida a un controlador de eventos, esto ahora se refiere al objetivo del controlador, en lugar de su objeto deseado. Si esto suena un poco confuso, no se preocupe; El consejo rápido en un vídeo de cuatro minutos de hoy, que debe aclarar las cosas. 

 

Supersized 3.1 jQuery Plugin

 

Supersized 3.1 jQuery Plugin – Fullscreen Background Slideshow with Flickr Support

 

Supersized acaba de ser reescrito desde cero. Es más rápido, con más opciones, animaciones, y ha añadido soporte Flickr.

 

jQuery Cheat Sheet

 

La memorización de los cientos de métodos y los controladores de jQuery puede derretir tu cerebro. Considere el uso de esta hoja de trucos como referencia.

 

jquery12_colorcharge

Developing a Digg-Style Input Form With CSS3 and jQuery

 

Developing a Digg-Style Input Form With CSS3 and jQuery

 

Digg es una de las cadenas de noticias sociales más populares hasta la fecha. Ellos cosechan un público masivo de millones de miembros. Recientemente, la compañía se ha forjado una nueva dirección con el lanzamiento de Digg v4. Todo el sistema ha sido sustituido por las nuevas estadísticas y seguidores / que sigue en las redes.

 

How to Load In and Animate Content with jQuery

 

How to Load In and Animate Content with jQuery

 

En este tutorial van a tomar su sitio web promedio todos los días y mejorar con jQuery. Irán añadiendo funcionalidad Ajax para que el contenido se cargue en el contenedor pertinente en lugar de que el usuario tenga que desplazarse a otra página. También estarán integrando algunos efectos impresionantes de animaciones.

 

Simple jQuery 3-Tier Dropdown Menu

 

Simple jQuery 3-Tier Dropdown Menu

Reading & Editing HTML Attributes in jQuery

 

Quick Tip – Reading & Editing HTML Attributes in jQuery

 

Los Atributos jQuery permiten cierta edición interesante para pasar una vez una página que ya ha cargado. Los Atributos HTML que tuvieron que permanecer estáticos en una hora se pueden ajustar con sólo unas pocas líneas de código. Este tutorial se centrará en uno en particular – attr.

 

Building a jQuery Powered Tag Cloud

 

Building a jQuery Powered Tag Cloud

 

Un tag-cloud o nube de etiquetas es una gran manera de mostrar a los visitantes de su blog los principales temas de interés que están disponibles. También hay información adicional contenida en una etiqueta de nube. Aparte de los vínculos, que es lo que da una idea de los temas que abarca su sitio web, también pueden mostrar como los distintos temas populares. Otra gran cosa sobre las nubes de etiquetas es que pueden ser utilizadas para describir la frecuencia de nada, se puede vincular a los artículos, las entradas de blog, las imágenes, el vídeo, o cualquier otra cosa que tenga en abundancia en su sitio.

 

s3Slider jQuery Plugin

 

s3Slider jQuery Plugin

 

Boban creó un maravilloso plugin  jQuery de “contenido destacado”. Ha visto este efecto muchas, muchas veces. Ahora puede implementar fácilmente la funcionalidad en sus propias aplicaciones web.

 

An Introduction to jQuery Templating

 

An Introduction to jQuery Templating

 

JavaScript Templating es una idea ingeniosa: le permite convertir fácilmente JSON a HTML sin tener que analizar. En la conferencia Microsoft MIX10, anunciaron que están empezando a contribuir al equipo jQuery. Uno de sus esfuerzos es el de proporcionar un plugin. En esta sugerencia, aquí se muestra cómo utilizar.

 

Integrating PHP and jQuery: New Premium Tutorial

 

Integrating PHP and jQuery New Premium Tutorial

 

Para que pueda trabajar con PHP, y tener un conocimiento básico de jQuery, pero aún no ha descubierto la manera de combinar los dos en sus proyectos? Si es así, tenemos todo lo que necesitas hoy mismo! En este tutorial, Además, aprenderá a aprovechar las ventajas de PHP y MySQL de declaraciones preparadas para consulta en una base de datos, cómo pedir que devuelve los datos con jQuery, y, a continuación, cómo filtrar a través de los artículos devueltos y los muestra en la página, añadiendo un toque de animaciones. Si esto suena interesante, dar de nuevo a Nettuts , y convertirse en un miembro Premium para ver este útil tutorial en vídeo.

 

Create Portfolio Website With CSS/jQuery

 

Create Portfolio Website With CSS jQuery

 

Desde hace algunas semanas he empezado el aprendizaje jQuery, y hoy pensé ¿por qué no recibir un tutorial de jQuery y css?. Así que vengo con este increíble tutorial (increíble para mí al menos), que sólo utiliza puro CSS y jQuery para diseñar un sitio web de portafolio adecuado para cualquier alojamiento compartido, sin photoshop o cualquier otro programa de diseño requerido. Aquí vamos …

 

Create an Apple Style Menu and Improve it via jQuery

 

CREATE AN APPLE STYLE MENU AND IMPROVE IT VIA JQUERY

 

Desde que escribieron su último tutorial sobre cómo crear un menú desplegable sólo con multinivel CSS, tienen una gran cantidad de visitantes que querían saber cómo crearon la navegación principal de kriesi.at. (Un menú llamado kwicks). El interés en los menús extraordinarios parece ser alto en la actualidad, por lo que hoy le van a enseñar cómo se hace esto.

 

Animated Skills Diagram with Raphaël

 

ANIMATED SKILLS DIAGRAM WITH RAPHAËL

 

En este tutorial le muestran cómo crear un diagrama usando Raphaël – una pequeña biblioteca JavaScript que es ideal para trabajar con gráficos vectoriales. La idea es muy simple: se basa en algunos arcos utilizando funciones matemáticas y nos va mostrando un porcentaje de habilidad en un círculo principal […]

 

Better Check Boxes with jQuery and CSS

 

Better Check Boxes with jQuery and CSS

 

En este breve tutorial, vamos a crear un reemplazo para las casillas del navegador por defecto en la forma de un simple plugin de jQuery. Se mejorará progresivamente sus formas, pero, al mismo tiempo recurriremos a los controles por defecto si no se dispone de JavaScript.

 

Converting jQuery Code to a Plugin

 

Converting jQuery Code to a Plugin

 

Cuando se trata de la organización de manera eficiente del código de jQuery, una de las mejores opciones está en convirtir ciertas partes del mismo en un plugin. Hay muchas ventajas en esto – el código se vuelve más fácil de modificar y seguir, y las tareas repetitivas se manejan de forma natural. Esto también mejora la velocidad con que se desarrolla, como la organización de programas que promueve la reutilización de código.

Por esta razón hoy vamos a demostrar el proceso de conversión de código a un plugin. Vamos a tomar el código de este tutorial de CSS3 seleccionando el reemplazo de jQuery y convertirlo en un preparado plugin para uso jQuery.

 

Tutorial rápido de jQuery

 

jQuery

 

El primer paso a la hora de trabajar con jQuery es seleccionar los elementos del árbol de documento sobre los que queremos trabajar. Para ello se utiliza la función jQuery, pasando como argumento a la función una cadena con un selector, la mayoría de los cuales utilizan una sintaxis similar a la de CSS 3 (ver Tutorial rápido de CSS). El engine que utiliza jQuery para seleccionar elementos se llama Sizzle, y puede descargarse y utilizarse de forma aislada.

 

jQuery Tutorial de w3schools

 

jQuery tutorial

 

En W3Schools encontrará una referencia completa de todos los objetos y métodos de jQuery.

 

Artículos relacionados:

 

+25 Plugins Asombrosos de Resbalador jQuery Responsive

La verdad detrás de diseño Web Responsive: ¿Es la próxima gran esperanza o todo es un bombo?

15 Memorables Plugins jQuery Timeline: Introduzca Líneas de Tiempo en su Página Web

15 Temas Impresionantes Responsive para WordPress (Theme Junkie)

+60 Útiles Deslizadores o Sliders de Imagen jQuery Responsive

+ 30 Herramientas útiles de Diseño Web Responsive

 

 

Los Mercados Online de Envato: ebooks, tutoriales, vídeos, cursos, temas para WordPress y Apps

Anuncios

+25 Plugins Asombrosos de Resbalador jQuery Responsive

20 de septiembre de 2013 3 comentarios

JQueryCon casi todos los aspectos de la Internet móvil, más y más desarrolladores web que nunca son contratados principalmente para asegurar que los sitios web adquieran capacidades de respuesta. En efecto, como la informática móvil continúa calentándose, la demanda para las plantillas Responsive para WordPress, los temas y los plugins HTML, están también en aumento. Entre los elementos web que necesitan para ir Responsive para mantenerse al día con los tiempos, son los mecanismos de escaparate de imágenes en los sitios web.

Nos referimos a los deslizadores, carruseles, galerías, acordeones y otros nombres que son características comunes de los sitios web, y que se ven muy bien en la mayoría de los sitios que utilizan uno para mostrar contenido y las imágenes clave. Estas cosas tienen que ir receptivas para así lograr el 100% de respuesta de un sitio determinado. Los Sliders con un diseño Responsive escalan las imágenes y la tipografía para adaptarse al tamaño de la pantalla. Esto es importante ya que todos queremos deslizadores para captar la atención del usuario, un regulador de tamaño fijo en un dispositivo móvil puede conseguir que los visitantes se muevan muy rápidamente.

Para hacer las cosas más fácil, puede hacer uso de algunos recursos increíbles en la Web que implica los plugins jQuery slider. jQuery como la conocemos, es la biblioteca de JavaScript ligera que hace que sea posible para nosotros atravesar documentos HTML, manejar eventos, ejecutar animaciones y añadir AJAX, y hacer maravillas en los deslizadores, etc
Para colmo de males, estamos mostrando algunos de los plugins jQuery slider que no sólo están muy bien en su propio derecho, sino que sobre todo son de diseño Responsive, es decir, accesibles desde cualquier tamaño de navegador. Vamos a ver estos plugins jQuery slider Responsive y una serie de opciones en función de sus necesidades. Puede encontrar soluciones de alta calidad y de código abierto, así que puedes disfrutar de las maravillas de jQuery, incluso sin tener que gastar.

Nota: Tenga en cuenta que algunos de los enlaces de abajo son enlaces de afiliados y voy a ganar una comisión si compra a través de esos enlaces (sin costo adicional para usted). Le recomiendo que haga su propia investigación independiente antes de comprar cualquier producto o servicio. Este artículo no es una guía, una recomendación o endoso de productos específicos.

Leer más…

+ 30 Herramientas útiles de Diseño Web Responsive

31 de agosto de 2012 21 comentarios

Con la gran popularidad de las tablets y los teléfonos inteligentes, la demanda de diseño de sitios web Responsive es más demandado que 30 herramientas para el diseño web Responsivenunca. En este momento, los sitios web que más y más personas están adoptando los diseños Responsive y esta tendencia se espera que sea más intensa a medida que el porcentaje aumente de los usuarios de Internet móvil. Este desarrollo ha creado una enorme demanda de los servicios de diseñadores y desarrolladores web con dominio en este sistema altamente adaptable de diseños de página web. Ya podemos ver que responden a temas de WordPress, disponibles en proveedores de las principales temáticas que respondan a los retos de la adopción de diferentes tamaños de pantalla.

Como era de esperar, algunas útiles herramientas que respondan al diseño web han surgido recientemente para apoyar el proceso de diseño y desarrollo de sitios web Responsive. Gracias a 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 para utilizarse? ¿Qué herramientas necesitamos para estar por delante del juego Responsive? Si eres un diseñador web o programador considerando la posibilidad de explorar y posiblemente especializarse en el diseño web Responsive, ha venido al lugar correcto. Estamos compartiendo con ustedes algunas de las herramientas más útiles y recursos para ayudarle a construir una caja 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 que responden en este artículo. Esperamos que esta colección le pueda ayudar a entrar en el mundo del diseño Responsive y marcar la diferencia. Si te gusta este artículo, por favor ayúdenos a difundir la palabra haciendo clic en los botones de los medios sociales. También estaremos encantados 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 un sitio para proporcionar una visualización óptima en la experiencia de navegación con fácil lectura y con un mínimo de cambio en el tamaño, velocidad, desplazamiento y-a través de una amplia variedad 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 de proporción-redes e imágenes flexibles.

  • Las consultas a los medios de comunicación permiten a la página utilizar diferentes reglas de estilo CSS basadas en las características del dispositivo cuando el sitio está siendo mostrado, 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 las unidades 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 que se muestre fuera de su elemento contenedor.

Diseños Responsive, Responsively Wireframed

 

30 herramientas para el diseño web responsive

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

 

Responsive Web Design Sketch Sheets

 

30 herramientas para el diseño web responsive

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

 

Less Framework 4

 

30 herramientas para el diseño web responsive

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

 

Multi-Device Layout Patterns

 

30 herramientas para el diseño web responsive

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

 

Fluid Grids

 

30 herramientas para el diseño web responsive

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 columnas y el tamaño de las columnas y los canales de comunicación.

 

Simple Grid

 

30 herramientas para el diseño web responsive

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 como sea posible. Incluso las ranuras de la rejilla de anidación no requiere clases adicionales.

 

Simple Device Diagram

 

30 herramientas para el diseño web responsive

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 ancho ideal para el diseño de los sitios de disposición 3, 4 sitios de diseño, etc.

 

ProtoFluid

 

30 herramientas para el diseño web responsive

Protofluid es una herramienta que permite hacer prototipos rápidos de diseños fluidos, CSS y diseñ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 HTML5 o un juego en forma de un único JavaScript incluido.

 

1140 CSS Grid

 

30 herramientas para el diseño web responsive

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 que utiliza preguntas a los medios para servir a una versión móvil, que esencialmente apila todas las columnas en la parte superior de uno al otro por lo que el flujo de información sigue teniendo sentido. Aunque la resolución lo mejor para esta rejilla CSS es una de 1280px, todavía funciona igual de bien con pantalla de 1024px, ya que todo se puede ver al igual que en la pantalla de 1280px y todo el camino hasta las pantallas de los móviles. Es una gran herramienta para los diseñ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

 

30 herramientas para el diseño web responsive

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

 

Gridless

 

30 herramientas para el diseño web responsive

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

 

Responsive Design Sketchbook

 

30 herramientas para el diseño web responsive

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 tiene una portada multi-red de bocetos en miniatura de ventanas múltiples. La última página es una página de un solo modelo con indicadores de quiebro.

 

Responsive PX

 

30 herramientas para el diseño web responsive

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

 

The responsinator

 

30 herramientas para el diseño web responsive

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

 

Screenfly

 

30 herramientas para el diseño web responsive

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

 

Responsive Web Design Testing Tool

 

30 herramientas para el diseño web responsive

Otra herramienta de prueba que le puede proporcionar una visión de su sitio web en tamaños de pantallas 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 sus sitios web Responsive mientras diseñas y construyes con ellas.

 

Adobe Shadow

 

30 herramientas para el diseño web Responsive

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

 

Golden Grid System

 

30 herramientas para el diseño web Responsive

Golden Grid Systeme tiene una rejilla plegable que se puede utilizar como punto de partida en el 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árgenes exteriores de la rejilla, lo que deja 16 columnas para su uso en el diseño. Las 16 columnas se pueden 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 cualquier tamaño de pantalla desde 240 hasta 2560 píxeles. El autor, Joni Korpi, tiene un muy buen consejo a sus usuarios. No utilice SGG como es. “Tómalo aparte, tome las piezas que más te gusten, y adaptarlas a su propia manera de trabajar”, eso es lo que dijo.

 

Gridpak

 

30 herramientas para el diseño web Responsive

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

 

Columnal

 

30 herramientas para el diseño web Responsive

Columnal es un sistema sensible CSS rejilla ayuda a los navegadores de escritorio y a los mó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 lo suficientemente estrecho-delgado, el sitio se mostrará en un formato móvil de forma fácil.

 

Skeleton

 

30 herramientas para el diseño web Responsive

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

 

Bootstrap

 

30 herramientas para el diseño web Responsive

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

 

320 and Up

 

30 herramientas para el diseño web Responsive

La práctica común en el diseño web Responsive es empezar con el escritorio de tamaño completo como punto de partida y de allí hacer escalas en pantallas de menor tamaño. Los creadores de 320 and Upq lo tienen en el reverso. Ellos dijeron que debe comenzar a diseñar en los navegadores pequeños y desde entonces será su forma de trabajo. La versión actualizada de las 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 del diseño, los estilos de arranque para los botones, los formularios, las tablas y más.

 

FitText

 

30 herramientas para el diseño web Responsive

FitText hace los tamaños de fuente flexibles. Use este plugin en su diseño Responsive para lograr titulares escalables que llenen el ancho del elemento padre. Este plugin jQuery funciona inflando 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 con Lettering.js, o cualquier otra propiedad CSS3 que usted se lanza en ella.

 

inuit.css

 

30 herramientas de diseño web Responsive

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

 

Mobile Boilerplate

 

30 herramientas de diseño web Responsive

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 y Blackberry. También soporta el almacenamiento en caché del servidor Apache, la compresión y los demás valores predeterminados de configuración.

 

Respond.js

 

30 herramientas de diseño web Responsive

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 / 1 kilobyte gzipped) script para permitir diseños de web Responsive en los navegadores que no apoyan 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

 

30 herramientas de diseño web Responsive

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

 

mediaQuery Bookmarklet

 

30 herramientas de diseño web Responsive

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

 

Responsive Data Table Roundup

 

30 herramientas de diseño web Responsive

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

 

Adaptive Images

 

30 herramientas de diseño web Responsive

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ágenes apropiadas en HTML empotradas en su página web. No hay cambios de márgenes necesarios. Se pretende para el uso con los diseños Responsive para ser combinado con las técnicas fluidas de imagen.

 

Seamless Responsive Photo Grid

 

30 herramientas de diseño web Responsive

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

 

Slabtext

 

30 herramientas de diseño web Responsive

Slabtext es un plugin de jQuery para la producción de grandes titulares, negrita y capacidad de respuesta Responsive. En pocas palabras, el guión se divide en filas de titulares antes de cambiar el tamaño de cada fila para llenar el espacio horizontal disponible. El número ideal de caracteres para establecer en cada fila se calcula dividiendo la anchura disponible por el tamaño de fuente CSS – la secuencia de comandos utiliza entonces este recuento del carácter ideal para dividir 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

 

30 herramientas de diseño web Responsive

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

 

Media Queries

 

30 herramientas de diseño web Responsive

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

 

Bibliografía:

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

 

BerubyLos  Mercados Online de Envato: ebooks, tutoriales, vídeos, cursos, temas para WordPress y App

do-you-really-need-responsive-design-info

A %d blogueros les gusta esto: