Archivos de la categoría ‘Responsive Web Design’

Fuente: Martín Beas Núñez

Enlace: http://martinbeasnunez.com.ar/blog/temas-gratis-responsive-design-wordpress/

Boilerplate y Bootstrap

Publicado: 26 de septiembre de 2012 en Responsive Web Design

Fuente: Propia a través de la asistencia al curso de Responsive Web Design.

Boilerplate con WordPress usando las funciones de wordpress (con php).

Normalizer.css de boilerplate es un reset.

CMS. Las funciones de wordpress se encuentran en codex de wordpress.

Code snipets, trozos de código para usar en css.http://www.webinterfacelab.com/snippets

Joomla o Druppal (framework más potente que wordpress o Joomla).

Googlebot

http://support.google.com/webmasters/bin/answer.py?hl=es&answer=182072

Plugin de wordpress instalar a partir de sublime text 2.

 

Fuente: alistapart

Enlace: http://www.alistapart.com/articles/responsive-web-design/

25 de Mayo de 2010

Diseño Web Responsivo (Responsive Web Design)

Traducción de Responsive Web Design de A List Apart

Artículo original por Ethan Marcotte. Traducción al español por Marcelo Mazza.

El control que los diseñadores conocen en el medio impreso y desean frecuentemente en el medio web, es simplemente una función de las limitaciones de la página impresa. Debemos aceptar el hecho de que la web no tiene esas mismas limitaciones, y diseñar entonces para su flexibilidad. Pero primero, debemos «aceptar el flujo y reflujo de las cosas.»

John Allsopp, «A Dao of Web Design«

El arquitecto inglés Christopher Wren bromeó alguna vez diciendo que su profesión «apuntaba a la Eternidad», y hay algo atractivo en esa fórmula: a diferencia de la web, que siempre parece estar apuntando al corto plazo, la arquitectura es una disciplina definida por su permanencia. Los cimientos de un edificio definen su plano, que define su estructura, que da forma a la fachada. Cada fase del proceso arquitectónico es más inmutable, más invariable que la anterior. Las decisiones creativas modelan, literalmente, un espacio físico, definiendo la forma en que la gente se moverá a través del mismo por décadas o incluso siglos.

Trabajar en la web, sin embargo, es una cuestión completamente diferente. Nuestro trabajo está definido por su transitoriedad, y es a menudo refinado o reemplazado en el lapso de uno o dos años. Las ventanas de ancho inconsistente, las resoluciones de pantalla, las preferencias de los usuarios y las fuentes instaladas son sólo algunos de los intangibles con los que negociamos cuando publicamos nuestro trabajo, y, a través de los años, nos hemos vuelto muy hábiles para ello.

Pero el panorama está cambiando, quizás más rápidamente de lo que nos gustaría. Se espera que la navegación mobile supere a la navegación desde una computadora de escritorio entre tres a cinco años. Dos de las tres consolas dominantes en materia de videojuegos tienen navegadores web (y uno de ellos es verdaderamente excelente). Estamos diseñando para mouses y teclados, para keypads T9, para dispositivos controladores de juegos, para interfaces táctiles. Dentro de poco, nos enfrentaremos con la mayor cantidad de dispositivos, modos de entrada y navegadores con la que nunca antes nos hemos enfrentado.

(más…)

Fuente: Desarrolloweb

Enlace: http://desarrolloweb.com/articulos/sesion-3-responsive-web-design.html

Con este artículo presentamos la tercera y última grabación de las sesiones sobre Responsive Web Design realizadas en directo por Daniel Martínez, @Wakkos. En esta ocasión dedicaremos el tiempo a explorar las Mediaqueriesde CSS3, explicando las maneras de aplicar estilos CSS que solo afecten a aquellos dispositivos que tienen determinadas características.Las Mediaqueries, como nos explicará @Wakkos, son básicamente condicionales. A través de una sintaxis determinada podemos definir enunciados que se pueden cumplir -o no- en determinados casos, como que el área disponible del navegador tenga unas dimensiones mínimas o unas máximas, o como que el dispositivo que nos visita esté posicionado en «portrait» (vertical) o «landscape» (horizontal), o que se esté imprimiendo la página en la impresora o visualizándose en la pantalla de un ordenador.

Por medio de esas características definidas en el condicional de los mediaqueries podemos luego asignar estilos CSS para aplicarse en casos tan concretos como se desee y básicamente es lo que nos permitirá diseñar sitios web que se adapten a todos los dispositivos que podrían llegar a visitarlos. Pues bien, eso es básicamente sobre lo que ronda toda esta sesión, en la que se ofrecerán diversos ejemplos que nos ayudarán a entender la potencia de estos enunciados condicionales disponibles desde CSS3.

 

Nota: Antes de continuar comentando esta última sesión quiero señalar, para las personas que van a ver el vídeo, que se comenzó la charla con un pequeño ejemplo de mediaqueries que no funcionó a la primera, pero que se solucionó antes de acabar la transmisión.

Se verán varios ejemplos de Mediaqueries afectando a diversos casos típicos que se podrían necesitar en Responsive Web Design. Lo más normal es definir los estilos CSS para anchos máximos y mínimos de la pantalla del dispositivo, pero existen otras posibilidades que también se comentarán.

Pero aparte del propio código CSS y todo lo relacionado con el desarrollo del sitio, Daniel también nos ofrece algunos consejos que tienen más que ver con el modo de encarar el trabajo cuando deseamos diseñar una web adaptable. Responderá a preguntas tales como ¿Debo hacer una hoja de estilos para cada resolución? ¿A qué resoluciones debo optimizar un sitio web? ¿Las mismas soluciones aplicadas para una web son adecuadas para otras? Todo eso y mucho más se contestará en este vídeo, así como muchas más preguntas realizadas por los asistentes a la charla en vivo.

Como en todas las charlas anteriores, también se ofrecieron muchos recursos interesantes, como un listado de dispositivos y las características de los mismos, que nos ayudarían a definir mediaqueries específicas para cada uno. O un script del lado del cliente que nos puede permitir cargar el contenido de una capa, o no, atendiendo a determinadas circunstancias.

También veremos por encima otro de los elementos esenciales cuando queremos diseñar webs para móviles, el Viewport. En este caso no se profundizó mucho, pero sí lo suficiente para darnos cuenta que tanto mediaqueries como viewport trabajan en conjunto para hacer webs adaptables.

Luego pasamos a la clásica ronda de preguntas en la que se realizaron la más variada gama de cuestiones relacionadas con el diseño web y que Daniel contestó gentilmente para todos los interesados. Sin duda, cualquier persona podrá obtener mucho provecho no solo de la charla de Daniel, sinto también a través de las respuestas a las dudas de los asistentes.

Sesión 2 de 3 de Responsive Web Design

Publicado: 17 de septiembre de 2012 en Responsive Web Design

Fuente: Desarrolloweb

Enlace: http://desarrolloweb.com/articulos/segundo-video-responsive-web-design.html

En este vídeo vamos a seguir con las sesiones sobre Responsive Web Design, abordando la manera de hacer sitios que se adapten a las características de cada dispositivo. Es la segunda entrega de unas clases impartidas por el diseñador Daniel Martínez @Wakkos.

A lo largo de más de una hora, veremos muchas cosas que, estamos seguros, serán de mucha utilidad a todos aquellos que se dedican al diseño web en cualquiera de sus expresiones. Esto es porque, en realidad, aunque todo el material que se va a ofrecer está pensado para hacer webs adaptables a los dispositivos, son básicamente consejos de hojas de estilo en cascada que todos debemos conocer.

Para profundizar en este nuevo modelo de diseño web, Responsive Web Design, hablaremos sobre algunos de los asuntos más consultados, como las unidades CSS o las imágenes flexibles.

 

Nota: Estas sesiones están siendo realizadas en vivo entre un grupo de participantes reducido, aunque la grabación está mediante esta entrega a disposición de todos los interesados en aprender diseño web multidispositivo.

Comenzamos explicando qué son las medidas relativas de las CSS, las conocidas por las siglas «em» y las medidas de porcentaje. Estas medidas son las más básicas en los diseños «responsive», sin embargo y aunque debemos amar lo relativo y odiar lo absuluto, no debemos olvidarnos de otras medidas como los píxeles, que nos servirán para hacer cosas como asignar la anchura máxima o mínima a un elemento.

Luego explicaremos muchos aspectos relacionados con las unidades y cómo aplicarlos a tamaños de fuentes tipográficas y a tamaños de los elementos. Veremos que las unidades relativas basan su tamaño en una proporción del contenedor padre, y cómo podemos definirlas de un modo que nos resulten cómodas de calcular. Aquí, calculadora en mano, se explicarán algunas fórmulas que nos harán entender cómo se deben especificar las unidades «em», junto con algunas referencias destacadas a webs que tratan sobre las medidas relativas y el uso de las mismas en el Responsive Web Design.

Luego se verá de qué manera trabajar con imágenes flexibles, es decir, que se redimensionan para ocupar todo el espacio disponible en el contenedor. Se explicará de qué manera asignar las dimensiones de las imágenes y cómo evitar algunos efectos indeseables como el pixelado que se produce al estirarlas.

A continuación se pasará a la ronda de preguntas donde se tocarán aspectos de diverso calado, como presentaciones «slider» adaptables, librerías para adaptar imágenes, frameworks CSS, imágenes de background, sprites CSS, el modo de definir medidas relativas sin perder la noción del nivel de anidación de etiquetas, la posibilidad de usar medidas absolutas en algunos casos en diseños responsive, etc.

Fuente: Desarrolloweb

Enlace: http://desarrolloweb.com/articulos/taller-responsive-web-design.html

Responsive Web Design es una corriente de diseño que hoy resulta revolucionaria pero que a buen seguro en el futuro será algo de lo más normal. Se trata de un modelo de trabajo por el que se diseñe un único sitio que se adapte perfectamente a todos los dispositivos que puedan consumirlo, desde ordenadores de escritorio a netbooks, tablets, telétonos móviles, televisores, etc. En definitiva, se trata de construir la web para que se vea correctamente y aproveche las particularidades de todo dispositivo que hoy exista, o pueda existir en el futuro.Bajo esta temática tenemos un material muy interesante para todos los lectores de DesarrolloWeb.com, en un taller de Responsive Web Design emitido en directo el día 24 de abril de 2012 y que ahora puedes ver en diferido en este mismo artículo de DesarrolloWeb.com.

En el taller se vieron de modo general varias de las claves del diseño adaptable, como ejemplos de sitios que funcionan optimizados para diversos dispositivos, atributos CSS que nos sirven para poder adaptar los elementos a varias resoluciones de pantalla, así como las mediaqueries e CSS3, que serían el colofón para la implementación del responsive.

También se nombraron algunos paquetes y librerías para facilitar la vida de los desarrolladores, entre otras muchas cosas. Finalizó el evento con la típica ronda de preguntas, donde los asistentes masacraron literalmente al ponente con muchas dudas interesantes para todos los que queremos hacer la web de la última generación, la Internet Multidispositivo.

El ponente que estuvo a cargo de esta charla fue @Wakkos, experto convencido de la web como un único ente que tiene que visualizarse correctamente en todos aquellos medios donde se pueda llegar a consumir. El conductor de la charla fue @alvarezmiguelan, el director de DesarrolloWeb.com y el que os escribe estas líneas.

Sin más, os dejo con el webcast de Responsive Web Design, que estoy seguro encantará a todos los que nos dedicamos a construir sitios web.

 

Fuente: DesarrolloWeb

Enlace: http://www.desarrolloweb.com/en-directo/freelance-primera-cita-cliente-7422.html

07/09/2012 – Conseguir clientes no es sencillo y el proceso tiene sus distintas etapas. En este vídeo te enseñaremos algunos detalles que podemos cuidar para conseguir tener éxito en esas primeras citas con los clientes potenciales, para que acaben confiando en nosotros.Este es un programa #freelanceIO realizado por nuestro amigo y colaborador @ErickOjitoz, que de una manera amena, sencilla y concisa, nos ofrece consejos muy válidos para demostrar implícitamente al cliente que somos la persona que él necesita para llevar a cabo un proyecto.

Es la segunda entrega de una serie, que comenzamos a ver hace semanas sobre consejos para nuestro trabajo como freelances. En la primera entrega se ofrecieron las pistas para conseguir ganarte a tus clientes de manera general.

Ahora vamos a la carga con uno de los pasos más importantes para ganarte a un cliente, que es ofrecer una buena imagen en lo que sería la primera cita con ese cliente. Es decir, tenemos un cliente potencial, que nos está tomando en cuenta como un posible proveedor o desarrollador de un proyecto y en este momento simplemente estamos en esa primera cita en la que el cliente nos va a exponer sus necesidades.

¿De qué manera debemos comportarnos? ¿Cuáles son las señales que le deben indicar a nuestro cliente que somos la persona más adecuada para hacer su proyecto? ¿Cuáles son los errores que no debemos cometer en esa primera cita?

Se tratan muchos asuntos de interés para la comunidad, que nos preguntaron a través de Twitter y Youtube y que Erick nos respondió gentilmente. ¿Cómo recuperar un cliente que hemos perdido? ¿De qué manera tarificar un proyecto? ¿Cómo establecer límites a un cliente, especialmente cuando nos cuesta decir que «no» a cuando nos piden algo que se sale de nuestras responsabilidades?

Desde aquí felicitamos a @ErickOjitoz por este contenido tan interesante y esperamos que vuelva a estar con nosotros en otras ocasiones en un hangout para #freelanceIO.

El vídeo lo puedes ver un poco más abajo en este mismo artículo. Esperamos que todos estos consejos te sirvan mucho para mejorar tus actividades como freelance y acceder y retener a más clientes.

 

Fuente: desarrolloweb

Enlace: http://www.desarrolloweb.com/webcast-responsive-web-design.php

http://www.desarrolloweb.com/de_interes/boilerplate-responsive-web-design-7395.html

http://www.desarrolloweb.com/de_interes/boilerplate-responsive-web-design-7395.html#contenido_externo

1ª Sesión Responsive Web Design

Publicado: 5 de septiembre de 2012 en Responsive Web Design

http://escuela.it/cursos/responsive-web-design/

Ejercicio 1: Hacer una web en html5 que tenga logo, encabezado, menú y 6 entradas (3 arriba y 3 abajo).

Se puede emplear como ejemplo (coolvillage.es)

Recursos disponibles:

Aprender html5

http://www.desarrolloweb.com/articulos/aprende-html5-5-minutos.html

El front-end template que vamos a usar más adelante

http://html5boilerplate.com/

Uno de los mejores navegadores web

http://www.desarrolloweb.com/actualidad/dragonfly-1-0-herramientas-desarrrollo-web-opera-5195.html