DesarrolloWeb.com > Manuales > Videotutoriales de Responsive Web Design

ej. css Buscar

Login | Registro

Por Daniel Martnez Seguira@Wakkos

26 de marzo de 2015 0 Comentarios Diseo web

Sesin dedicada a acercar el Responsive Web Design a las personas quedesean mejorar sus prcticas en el mundo del diseo web.

FundamentosdeResponsiveWebDesign

Esta sesin ha sido realizada para introducir el conceptode Responsive Web Design de una manera amena yresumida, impartida por Daniel Martnez @Wakkos conmotivo de la nueva convocatoria del Curso de Responsivede EscuelaIT que comienza esta semana.

Se celebraron dos clases y cada una de ellas se ha divididoen varios vdeos para facilitar el acceso a la informacin.En esta ocasin vamos a hablar de los "Fundamentos delResponsive Web Design".

Qu es Responsive Web Design

En dos palabras, podemos decir que Responsive Web Design es "Diseo web". Hoy no cabe la duda sobre sihacer un sitio responsive o no. Lo ms importante en una web es el contenido, lo que debemos de tenersiempre a mano y lo que debe de mostrarse bien en diferentes condiciones.

Cuando pensamos en "Responsive" generalmente pensamos en resoluciones y tamaos de pantalla, perohay mucho ms detrs, ya que las resoluciones no son el nico parmetro que puede variar entre distintosusuarios o sistemas que puedan visitar una web.

Un diseo web Responsive (aunque "responsivo" existe en el diccionario preferimos no traducir la palabra ysi acaso nos gusta ms llamarlo "adaptable") se reconoce porque si agrandamos, o empequeecemos, laventana del navegador el contenido se va adaptando para que se vea correctamente, llegando a cambiarlos bloques que se visualizan en el layout de la web.

Pero como decimos en Responsive no solo nos tenemos que centrar en las diferencias de pantalla, tambinexisten distintos sistemas operativos, navegadores, existen condiciones en las que quizs no tenemosacceso a lenguajes como Javascript. Incluso en lo que respecta a velocidades de conexin.

Por qu el diseo tiene que ser adaptable

En cierto modo Responsive Web Design no es ms que accesibilidad, del contenido. Todo lo que tiene quever con disponibilizar un contenido para todo el mundo lo pueda consumir de la mejor manera, estrelacionado con el concepto de Responsive.

Todo aquel que construye una web tiene un objetivo y presenta un contenido para que ste se cumpla.Obviamente, las tcnicas que puedas desempear para que ese contenido sea correctamente consumido,son siempre positivas y deseables.

Si nos remontamos a la historia de la web, todos comenzamos diseando a 800x600, o incluso en tamaosmenores de la web, luego pasamos a disear para 1024 y tuvimos que reformular las pginas con las quetrabajbamos. Pero luego llegaron los telfonos inteligentes, con el iPhone, en el cual era posible navegarpor Internet. Rpidamente salieron otros smartphones capaces de navegar por Internet, con pantallasdistintas y sin embargo no aprendimos la leccin y tratamos de disear orientados a esos tipos depantallas, creando versiones de las webs optimizadas para ciertas resoluciones.

Hasta hace pocos aos no nos dimos cuenta de la necesidad de ser "future friendly" y pasar de la etapa dedisear para una resolucin determinada. Hay que disear para cualquier tipo de sistemas, siendoamistosos con el futuro y disear de manera que la web no la tengas que cambiar cada vez que apareceuna nueva resolucin de pantalla, o tipo de dispositivo.

La web debe ser vista en todos lados y por todo el mundo! Existente ahora o que pueda existir en el futuro.

Dnde comienza y hasta donde llega el responsive webdesign

Al definir un contenido de una web debemos pensar en responsive, por lo tanto, esta filosofa comienzaincluso antes de ponerte a disear nada.

Piensa en esto: si le damos a una persona un litro de agua, pero tiene un vaso de 200ml no va a entrar todoel agua en su vaso y por la tanto es posible que no se la pueda beber. Si el agua es el contenido de unaweb, debemos comenzar por entregarla de una manera en la cual las personas, tengan el contenedor quetengan, sean capaces de consumirla.

Por supuesto, el contenido debe mostrarse en la mayor cantidad de dispositivos que puedan consultarla.

Pero esa filosofa debe acompaar todas y cada una de las etapas de desarrollo, desde su concepcin o ladefinicin de los objetivos y por tanto del contenido a mostrar, su implementacin y algo tan importante yque veremos ms tarde que es la optimizacin.

Como puedes apreciar Responsive es una disciplina tan apasionante como amplia y en la que entran enjuego muchos factores. Como diseadores o desarrolladores es nuestra responsabilidad dominarla y usarlos recursos y tecnologas a nuestra mano para poder sacar el mximo partido de nuestra web y llevar sucontenido a todo tipo de clientes con sus caractersticas.

Sobre todo esto trataremos en nuevas sesiones en abierto que vendrn a continuacin, pero si te interesaaprender de una manera ms rpida, completa, ms agradable y con garanta de estar aprendiendo lasmejores prcticas, estudia con nosotros en el Curso de Responsive que empieza hoy en EscuelaIT.

Te dejamos con el corte del vdeo de esta sesin dedicada a introducir el concepto bsico del diseoadaptable y su necesidad en la web de hoy.

Seguira@Wakkos

Daniel es un diseador grfico convertido a web que vive dentro de Internet

desde el ao 95. Amante del diseo y estilismo en las diferentes expresiones,

siempre ha destacado creando diseos adaptados a las ltimas tendencias. Es

una de esas personas que ha formado parte de todas las generaciones

dedicadas al diseo web, desde el estilo "Geocities" de los 90, hasta Responsive

Web Design actualmente.

Diseador grfico convertido a web

AutorDaniel Martnez

Subir

ManualVideotutoriales de Responsive Web Design

Vdeo sobre mediaqueries en Responsive Web Design

2

Tweet

51

Compartir

Superpowered Audio EngineAndroid, iOS and OSX Low Latency, Cross Platform Mobile

3

Compartir

12

Recomendar

Principales

Manuales

FAQs

En directo

Vdeos

Monotemticos

Desde cero

HTML, CSS

Javascript, Ajax

Diseo, ASP

Blogging

Actualidad

De inters

Agenda

Powered by:

Desarrolloweb.com Copyright Publicidad Acerca de Datos legales P. de cookies Contacta

Comentarios Enviar un comentario al artculo