{"id":37581,"date":"2013-11-06T08:35:33","date_gmt":"2013-11-06T07:35:33","guid":{"rendered":"https:\/\/promocionalia.es\/web\/2013\/11\/06\/manual-de-introduccion-al-diseno-web-para-iniciacion-de-webmasters\/"},"modified":"2024-05-07T18:24:52","modified_gmt":"2024-05-07T16:24:52","slug":"manual-de-introduccion-al-diseno-web-para-iniciacion-de-webmasters","status":"publish","type":"post","link":"https:\/\/promocionalia.es\/web\/manual-de-introduccion-al-diseno-web-para-iniciacion-de-webmasters\/","title":{"rendered":"Manual de Introducci\u00f3n al dise\u00f1o web para iniciaci\u00f3n de webmasters"},"content":{"rendered":"

Este art\u00edculo es recopilaci\u00f3n del manual on line \u00abIntroducci\u00f3n al dise\u00f1o web\u00bb del portal www.desarrolloweb.com<\/a> con lo que en ning\u00fan momento pretendemos plagiar ning\u00fan contenido.<\/p>\n

 <\/p>\n

Introducci\u00f3n al dise\u00f1o web<\/p>\n

Primeros pasos para aquellas personas que deseen crear su propia p\u00e1gina web, desde el punto de vista del dise\u00f1ador. Motivaci\u00f3n a seguir, programas a utilizar, etc.<\/p>\n

Listado de los cap\u00edtulos:<\/p>\n

1.- Pr\u00f3logo a los primeros pasos en el dise\u00f1o web
Consideraciones a tener en cuenta a la hora de dise\u00f1ar una p\u00e1gina web.<\/p>\n

2.- Introducci\u00f3n al dise\u00f1o web
Datos a tener en cuenta a la hora de empezar en el dise\u00f1o web, pues la web es un canal de publicaci\u00f3n con caracter\u00edsticas muy especiales.<\/p>\n

3.- El color en la web
El color es uno de los elementos m\u00e1s poderosos de que disponemos a la hora de comunicar emociones en un sitio web. La mayor\u00eda de estas emociones son percibidas de un modo sutil e inconsciente.<\/p>\n

4.- Caracter\u00edsticas especiales de la publicaci\u00f3n web
Diferencias espec\u00edficas de la publicaci\u00f3n de contenidos en la web con respecto a otros medios como podr\u00edan ser la televisi\u00f3n.<\/p>\n

5.- \u00bfAlgo m\u00e1s sobre el dise\u00f1o web?
Es importante tomarnos el trabajo en serio al hacer una p\u00e1gina web: redactar sin faltas y organizar la informaci\u00f3n debidamente.<\/p>\n

6.- Herramientas para profesionales del dise\u00f1o web
Herramientas que podemos utilizar para dise\u00f1ar una p\u00e1gina web con excelentes resultados. Algunas recomendaciones importantes y otras para trabajos m\u00e1s espec\u00edficos.<\/p>\n

7.- Dise\u00f1o adecuado
El dise\u00f1o gr\u00e1fico, industrial, de identidad, debe ser adecuado al producto, persona, empresa que representa. Luego podemos entrar a debatir otros aspectos del dise\u00f1o.<\/p>\n

8.- Dise\u00f1o Web. Problemas generales
Los princiapales problemas que nos podemos encontrar a la hora de decidir el dise\u00f1o para nuestra web.<\/p>\n

9.- Conclusi\u00f3n a la introducci\u00f3n al dise\u00f1o web
\u00daltimos apuntes de inter\u00e9s para el dise\u00f1o de p\u00e1ginas web.<\/p>\n

10.- Diapositivas de la conferencia Dise\u00f1o web para dispositivos m\u00f3viles
Diapositivas o slides de la conferencia impartida en febrero de 2012, en M\u00e9xico, sobre dise\u00f1o web para dispositivos m\u00f3viles.<\/p>\n

11.- La importancia de la web m\u00f3vil
Algunos datos de inter\u00e9s que nos pueden motivar para aprender a dise\u00f1ar webs para dispositivos m\u00f3viles.<\/p>\n

12.- Caracter\u00edsticas del uso de la Internet M\u00f3vil
El uso de Internet en dispositivos m\u00f3viles es diferente del uso que se realiza en ordenadores personales.<\/p>\n

13.- Taller de Responsive Web Design
V\u00eddeo del taller de Responsive Web Design emitido en directo el 24 de abril de 2012, tratando el dise\u00f1o adaptable a todos los dispositivos.<\/p>\n

14.- V\u00eddeo: Fundamentos de Responsive Web Design
Sesi\u00f3n 1 de 3 de Responsive Web Design preparatoria para el curso que vamos a organizar en DesarrolloWeb.com y EscuelaIT, donde veremos los fundamentos del dise\u00f1o adaptable y diversos trucos \u00fatiles con CSS.<\/p>\n

15.- V\u00eddeo: Medidas e im\u00e1genes relativas en Responsive Web Design
V\u00eddeo que trata sobre medidas relativas en las CSS e im\u00e1genes flexibles para realizar Responsive Web Design.<\/p>\n

16.- Webcast de Dise\u00f1o Web
Grabaci\u00f3n en v\u00eddeo de la emisi\u00f3n en directo sobre dise\u00f1o web abordando el proceso desde cero, Wireframing, clientes y formatos de trabajo, concepci\u00f3n est\u00e9tica.<\/p>\n

17.- Dise\u00f1o web adaptativo
C\u00f3mo adaptar tus dise\u00f1os para reproducirlos con \u00e9xito en distintos formatos y dispositivos.<\/p>\n

18.- Dise\u00f1o web con crowdsourcing
\u00bfQu\u00e9 es el crowdsourcing? Detallamos algunos ejemplos de su utilizaci\u00f3n en el dise\u00f1o de webs.<\/p>\n

19.- Prototipado en el proceso de dise\u00f1o web
C\u00f3mo debe realizarse el prototipado de un sitio web, durante el proceso de dise\u00f1o. Selecci\u00f3n de herramientas que nos sirven para proyectar las secciones de una web, conocido como prototipado, mockup o wireframing.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

1.- Pr\u00f3logo a los primeros pasos en el dise\u00f1o web
Consideraciones a tener en cuenta a la hora de dise\u00f1ar una p\u00e1gina web.<\/p>\n

 Hace unos d\u00edas, durante una cena, mi padre me pregunt\u00f3 qu\u00e9 era exactamente eso de los chats, \u00abo lo que quiera que la gente hace cuando se escribe a trav\u00e9s de Internet\u00bb. Es un hombre un tanto suspicaz ante las nuevas tecnolog\u00edas, de manera que me vi obligado a lidiar en tres frentes a la vez, a\u00f1adiendo adem\u00e1s el hecho de que la pregunta, planteada con intenciones solapadas, son\u00f3 como un aldabonazo y me desconcert\u00f3 unos segundos. Las tres l\u00edneas de ataque de las que hablo eran las siguientes: una, la que me obligaba a describir de manera superficial las bases tecnol\u00f3gicas de los chats, ya que mi padre los hab\u00eda comparado con sistemas de comunicaci\u00f3n m\u00e1s convencionales, y yo deb\u00eda establecer las distancias adecuadas. En segundo lugar, le expliqu\u00e9 los elementos de la pr\u00e1ctica, como por ejemplo la interfaz t\u00edpica de un software de chat o las funciones b\u00e1sicas: flujo de texto en tiempo real y transmisi\u00f3n de archivos, as\u00ed como el modo en que los chats se organizan y pueden ser disfrutados en diversas salas; se conoce que cosas muy elementales. En tercer lugar le suger\u00ed la utilidad de los chats, sus ventajas frente a otras formas de comunicaci\u00f3n a distancia y le expliqu\u00e9, de forma m\u00e1s general ya, que pese a su postura, Internet constituye en gran medida el sistema sangu\u00edneo del futuro, aunque en el mejor de los casos se trate arterias de fibra de carbono… De ah\u00ed pasamos a conversar acerca de cuestiones mucho m\u00e1s diversas en torno a la Red, pero esto ya no ten\u00eda importancia. Un tema u otro era un asunto de formas.<\/p>\n

En realidad, yo no siento mucha atracci\u00f3n por los chats gen\u00e9ricos, y si acaso opto por aplicaciones de mensajer\u00eda instant\u00e1nea. Pero aquella conversaci\u00f3n me revel\u00f3 algunas de las bases que, despu\u00e9s, me ayudar\u00edan a responder a una usuaria en cierto foro de dise\u00f1o web. Su pregunta era: \u00abAunque no s\u00e9 mucho de ordenadores, siempre estoy enganchada, y ahora quiero hacer mi propia p\u00e1gina web. \u00bfPor d\u00f3nde empiezo?\u00bb<\/p>\n

Desde luego eso era toda una declaraci\u00f3n de intenciones y no exist\u00eda, ni existe, una respuesta infalible. El desarrollo web es un proceso creativo e \u00edntimo, como lo es la navegaci\u00f3n en Internet; \u00bfd\u00f3nde voy si me conecto a la Red? Pues eso depende de ti. Es m\u00e1s: lo probable es que muy pronto ya ni siquiera dejes que otros usuarios compartan y fisguen en tu historial. De la misma manera, una vez que empezamos a dise\u00f1ar, decidimos que nadie puede entrometerse en nuestra forma de trabajar. \u00bfCierto?<\/p>\n

Entonces, \u00bfquiere esto decir que no hay una especie de protocolo de principiantes? Oh, s\u00ed que hay un protocolo, un camino de baldosas que todos solemos seguir para llegar a nuestro destino (naturalmente, el destino de cada usuario es distinto, y mientras m\u00e1s diferente e ingenioso, mayor ser\u00e1 el aprendizaje).<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

2.- Introducci\u00f3n al dise\u00f1o web
Datos a tener en cuenta a la hora de empezar en el dise\u00f1o web, pues la web es un canal de publicaci\u00f3n con caracter\u00edsticas muy especiales.<\/p>\n

 Como en el caso de los chats, podemos considerar que existen tres directrices elementales que sirven de gu\u00edas. Una de ellas es el conocimiento tecnol\u00f3gico de Internet; estamos obligados a saber c\u00f3mo funciona de manera general, desde las conexiones de ordenador hasta el valor de los servidores, pasando por la arbitraria congesti\u00f3n de las l\u00edneas telef\u00f3nicas y, desde luego, considerando los diversos navegadores que hay en el mercado, adem\u00e1s de prestar atenci\u00f3n a la necesidad de instruirnos, aunque sea un poco, en el lenguaje HTML. Es muy dif\u00edcil tomarse en serio a alguien que no tiene constancia de que, echando un vistazo al c\u00f3digo fuente de una p\u00e1gina, hallar\u00e1 etiquetas tan b\u00e1sicas como y . Estos conocimientos t\u00e9cnicos nos informan de nuestras posibilidades creativas; no basta con crear una preciosa imagen y colgarla en nuestra p\u00e1gina principal, si no sabemos que dicha imagen podr\u00eda tardar un minuto en cargarse… Y a d\u00eda de hoy \u00e9sa s\u00ed es una verdad infalible.
En segundo lugar, estamos obligados a saber trabajar. No es m\u00e1s dif\u00edcil que eso; si trabajas en modo c\u00f3digo, debes dominar el HTML y, mejor a\u00fan, el HTML y otros lenguajes de uso com\u00fan en la Red. Si empleas software de tipo WYSIWYG (lo que ves es lo que obtienes, en espa\u00f1ol), debes ser capaz de conocer las funciones de tu programa. Desde luego que detenerse a leer las instrucciones es aburrido, y provoca lo que se conoce como \u00abcurva de aprendizaje\u00bb, pero es la \u00fanica manera de llegar a entender y desarrollar todas las posibilidades t\u00e9cnicas e imaginativas que te permiten las diferentes aplicaciones del mercado. Si usas DreamWeaver, aprende DreamWeaver; puede que conozcas FrontPage, por ejemplo, pero eso no conduce a ninguna parte. Son programas distintos que necesitan procesos de instrucci\u00f3n diversos.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

3.- El color en la web
El color es uno de los elementos m\u00e1s poderosos de que disponemos a la hora de comunicar emociones en un sitio web. La mayor\u00eda de estas emociones son percibidas de un modo sutil e inconsciente.<\/p>\n

 Al componer nuestros dise\u00f1os, hemos de conocer cu\u00e1les son los efectos psicol\u00f3gicos que producen y c\u00f3mo debemos elegir y combinar nuestra gama para que esa comunicaci\u00f3n emocional resulte positiva o, de otro modo, corremos el riesgo de que nuestra p\u00e1gina web luzca como el ch\u00e1ndal de la selecci\u00f3n ol\u00edmpica de Espa\u00f1a en Londres 2012.
Si bien es cierto que el color es un arma de comunicaci\u00f3n, tambi\u00e9n lo es que podemos prescindir de \u00e9l. Hay peri\u00f3dicos, pel\u00edculas, libros, fotograf\u00edas y hasta p\u00e1ginas web en blanco y negro que cumplen sobradamente su objetivo y que incluso pueden ser est\u00e9ticamente impactantes.<\/p>\n

El color es subjetivo: cada persona, dependiendo de sus rasgos culturales o sociales, su estado de \u00e1nimo u otras circunstancias personales, lo va a interpretar de manera distinta. De hecho, el pigmento ni siquiera es una propiedad intr\u00ednseca de un objeto. Desde este punto de vista (nunca mejor dicho), el color no existe y es s\u00f3lo la forma que nuestra retina (y cerebro) tiene de percibir las cosas, dependiendo de la longitud de onda de la luz reflejada. En realidad, yo me alegro de que as\u00ed sea porque para ser algo inexistente, coloreado queda el mundo bastante chulo, \u00bfno crees?<\/p>\n

Los ordenadores actuales disponen de una paleta de m\u00e1s de diecis\u00e9is millones de colores. Demasiadas opciones. Son tantos que ni siquiera las mujeres han sido capaces de ponerles nombres a todos. Pero no te preocupes, la mayor\u00eda son indistinguibles para la vista y adem\u00e1s, c\u00f3mo se represente un color en la pantalla va a depender de qu\u00e9 modelo de computadora, tarjeta gr\u00e1fica o pantalla tengas, de qu\u00e9 sistema operativo y navegador est\u00e9s usando o de c\u00f3mo hayas calibrado tu monitor. Este aspecto es de gran importancia cuando se dise\u00f1an p\u00e1ginas web corporativas, ya que tu cliente puede que se ponga un poco tiquismiquis a la hora de representar un color determinado, coincidente con un c\u00f3digo Pantone de su libro de estilo corporativo. Si bien en un folleto impreso podemos reproducir una tonalidad con bastante precisi\u00f3n, al trabajar para un medio digital, tendremos que conformarnos con aproximaciones.<\/p>\n

En esta p\u00e1gina puedes testar c\u00f3mo de bueno eres diferenciando los matices crom\u00e1ticos.<\/p>\n

El sistema que utiliza nuestro hardware para recrear los colores se llama RGB, acr\u00f3nimo anglosaj\u00f3n que toma el nombre de los colores a partir de los cuales derivan todos los dem\u00e1s: rojo, verde y azul (Red, Green, Blue). El RGB tiene una gama crom\u00e1tica m\u00e1s amplia que la utilizada habitualmente para impresi\u00f3n, llamada cuatricrom\u00eda (CMYK) y que se basa en cuatro planchas que se superponen. Cada color RGB tiene una nomenclatura hexadecimal en el c\u00f3digo HTML. Por ejemplo, el azul se representa como #0000FF.<\/p>\n

En los \u00faltimos diez a\u00f1os, la tecnolog\u00eda ha dado enormes pasos en materia \u00f3ptica, y tanto las tabletas como los dispositivos m\u00f3viles de \u00faltima generaci\u00f3n, disponen de soporte con mayor profundidad de color que los antiguos monitores mamotreto que utiliz\u00e1bamos hasta hace bien poco para nuestros equipos de sobremesa. Esto quiere decir, por si te lo estabas preguntando, que hoy por hoy puedes pasar ol\u00edmpicamente de la estridente paleta Web-Safe para tus dise\u00f1os en la Web.<\/p>\n


<\/p>\n

El color, en su m\u00e1s amplia acepci\u00f3n, tiene tres dimensiones b\u00e1sicas:<\/p>\n

Tono: se trata de la propiedad que hace distintos a los colores entre s\u00ed. Los primarios son el amarillo, el rojo y el azul; siendo el verde, naranja y violeta los secundarios.
Saturaci\u00f3n: es el grado de pureza de un color con respecto al gris. Por ejemplo, tus pantalones vaqueros tienen un azul menos saturado despu\u00e9s de unos cuantos lavados.
Luminosidad: indica cuan brillante u oscuro es un color.
Como he comentado antes, la percepci\u00f3n depende de cada uno, as\u00ed que, para gustos, los colores. No obstante, podemos atribuir algunas caracter\u00edsticas m\u00e1s o menos comunes que te ayudar\u00e1n a escoger la coloraci\u00f3n m\u00e1s indicada para cada proyecto:
Blanco: pureza, pulcritud, limpieza, luz.
\u00dasalo para fondos y para facilitar la lectura. Va bien con cualquier otro color.
Gris: neutral, formalidad, tristeza, equilibrio.
Estupendo para complementar al negro y al blanco. Puedes jugar con diferentes tonos de gris para combinar con todos los dem\u00e1s colores.
Negro: caro, elegante, misterio, sobriedad, duelo.
Ideal para productos de gama alta y para a\u00f1adir contraste. El negro es la ausencia de color y permite a los tintes adyacentes cobrar mayor protagonismo.
Rojo: fiesta, pasi\u00f3n, peligro, ansiedad, calor, est\u00edmulo, provocaci\u00f3n, agresi\u00f3n.
\u00dasalo para llamar la atenci\u00f3n, pero siempre en dosis moderadas.
Azul: pasivo, fr\u00edo, suave, unidad, confianza, frescor.
Comb\u00ednalo con naranjas, verdes o met\u00e1licos. Tiende a contraerse, a hacer una superficie m\u00e1s peque\u00f1a.
Amarillo: calor, animaci\u00f3n, cobard\u00eda, mentira, visibilidad, enfermedad, luz.
Combina bien con otros colores, y como el rojo, es ideal para resaltar. De hecho, la bandera espa\u00f1ola se dise\u00f1\u00f3 roja y amarilla para poder ser bien visible en el mar a largas distancias. Adem\u00e1s es un color c\u00e1lido y expansivo.
Verde: ecol\u00f3gico, alimento, paz, envidia, celos, calma, equilibrio.
Combina bien con el azul o el marr\u00f3n y activa la creatividad (R. Wiseman, 2009).
Naranja: energ\u00eda, juego, est\u00edmulo, atenci\u00f3n, salud, alegr\u00eda.
Procura no abusar de este color, muy dominante y expansivo al ser la mezcla de rojo y amarillo.
Violeta: nobleza, espiritualidad, riqueza, psicodelia, misterio.
M\u00e9zclalo con colores suaves y poco dominantes para crear un efecto equilibrado.
Rosa: dulce, femenino, suavidad, debilidad, infancia. Ideal para proyectos en donde la mujer es el p\u00fablico objetivo principal, aunque en grandes dosis resultar\u00e1 cursi. Nunca lo utilices para la web de un grupo de heavy metal.
La web www.colormatters.com realiz\u00f3 una encuesta a escala mundial entre m\u00e1s de 130.000 sujetos para determinar qu\u00e9 efectos producen los colores en la gente. He aqu\u00ed algunos de sus resultados:<\/p>\n

Color preferido: azul
Color menos af\u00edn: amarillo oscuro
Calidad: oro
Poder: rojo
Buena suerte: verde
Mala suerte: negro
Barato: marr\u00f3n
Delicioso: rojo
Sexy: rojo
Tecnolog\u00eda punta: plateado
Deidad: blanco
Dignidad: azul oscuro
Recuerda que todos estos conceptos no dejan de ser en cierto grado asociaciones abstractas, basadas en su mayor parte en el bagaje cultural de cada uno. Por ponerte un ejemplo, el color del luto en la cultura occidental es el negro, aunque no siempre fue as\u00ed: en la \u00e9poca medieval, la realeza vest\u00eda de blanco en los funerales. En china tambi\u00e9n \u00e9ste es el color utilizado para las exequias. En Egipto es el naranja, en Brasil y Tailandia el violeta y en la India es el marr\u00f3n.
Para un acercamiento m\u00e1s cient\u00edfico a la teor\u00eda del color, podemos echar mano de la rueda del color. Tambi\u00e9n es un punto de partida \u00fatil para saber c\u00f3mo se relacionan entre s\u00ed a la hora de realizar nuestros dise\u00f1os. En la rueda se disponen los colores del espectro y se unen el rojo y el violeta de los extremos, formando un c\u00edrculo.<\/p>\n

La rueda muestra los colores complementarios enfrentados, de modo que cada color tiene a su \u00abnegativo\u00bb en el lugar opuesto. He aqu\u00ed una versi\u00f3n esquem\u00e1tica. Los colores primarios est\u00e1n representados un poco m\u00e1s grandes (puede que ya te hayas dado cuenta de que en el modelo RGB, se utiliza como primario el verde en lugar del amarillo) y los terciarios un poco m\u00e1s peque\u00f1os.<\/p>\n

<\/p>\n

Complementarios: \u00fasalos sin miedo para crear contraste. Por ejemplo, el violeta y el amarillo. Otra opci\u00f3n menos dr\u00e1stica consiste en elegir un color y los dos m\u00e1s cercanos de su complementario.
An\u00e1logos: son los dos adyacentes en la rueda. Mezclados, que no revueltos, son una apuesta segura.
Tr\u00edadas: se consiguen seleccionando tres colores equidistantes entre s\u00ed, por ejemplo, los tres primarios constituyen una tr\u00edada. Se trata de una mezcla equilibrada.
Para terminar, un \u00faltimo consejo: no llenes de colorines tu p\u00e1gina sin ton ni son. Aparte de que corres un significativo riesgo de que te quede una horterada, a tus visitantes les costar\u00e1 centrar el foco en lo verdaderamente importante y se les cansar\u00e1 la vista. Hazme caso, la humanidad te estar\u00e1 agradecida.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

4.- Caracter\u00edsticas especiales de la publicaci\u00f3n web
Diferencias espec\u00edficas de la publicaci\u00f3n de contenidos en la web con respecto a otros medios como podr\u00edan ser la televisi\u00f3n.<\/p>\n

 En tercer lugar es fundamental saber que Internet no es una conferencia telef\u00f3nica, un CD-ROM o televisi\u00f3n a la carta. La Red sufre limitaciones propias y disfruta tambi\u00e9n de posibilidades m\u00e1s extensas y personales. As\u00ed, cuando dise\u00f1amos nuestros sitios web, debemos entender que el visitantes no espera lo mismo de nuestras p\u00e1ginas que de un programa de TV, incluso aunque ambos traten el mismo tema.
Tomemos por ejemplo un documental sobre los elefantes africanos. E imaginemos a un ciudadano muy interesado en dichos animales, que en un momento del d\u00eda debe elegir entre ver la vida de los elefantes en televisi\u00f3n, o buscar informaci\u00f3n en Internet a prop\u00f3sito de lo mismo. Nosotros tenemos la obligaci\u00f3n de dise\u00f1ar una p\u00e1gina web al respecto. \u00bfTomar\u00edamos inspiraci\u00f3n de la televisi\u00f3n? Quiz\u00e1s alguna, pero si sabemos lo que nos conviene, no pasar\u00edamos de ah\u00ed. Por ejemplo, la tele se encuentra a un m\u00ednimo de dos metros del televidente; el monitor de la computadora, a unos palmos; el texto debe ser estrecho para no irritar al navegante. En la tele eso da igual. A la tele tambi\u00e9n le es indiferente mostrar cientos de tomas, cientos de perspectivas y cientos de sonidos emitidos por los elefantes africanos. El web apenas podr\u00eda hacer eso, en condiciones est\u00e1ndar de conexiones de 56kb. Pero nosotros podemos crear enlaces a p\u00e1ginas que traten todas y cada una de las costumbres del enorme paquidermo. La televisi\u00f3n, no…<\/p>\n

La pregunta, sintetizada, es \u00e9sta: \u00bfqu\u00e9 damos al navegante para hacerle fiel a nuestros contenidos aunque tan s\u00f3lo sea durante una sesi\u00f3n? Le damos personalizaci\u00f3n, le damos contenidos, le damos libertad, le damos ingenio, le damos belleza, le damos oportunidades, le damos buen gusto, le damos comodidad, le damos datos, le damos s\u00edntesis, le damos gr\u00e1ficos, le damos informaci\u00f3n detallada, le damos esquemas, le damos conocimientos en tres palabras o sabidur\u00eda en textos de tres kil\u00f3metros, le damos todo y m\u00e1s, le damos, en fin, lo que sea que busca. \u00bfEstamos en condiciones de hacer estas cosas? M\u00e1s nos vale.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

5.- \u00bfAlgo m\u00e1s sobre el dise\u00f1o web?
Es importante tomarnos el trabajo en serio al hacer una p\u00e1gina web: redactar sin faltas y organizar la informaci\u00f3n debidamente.<\/p>\n

 Hay m\u00e1s cosas, cierto. El dise\u00f1o enfocado a la Red suele ser hijo de la receptividad, como cualquier otro tipo de dise\u00f1o. M\u00e1s all\u00e1 del aprendizaje t\u00e9cnico, que consiste en leer informaciones a veces aburridas y engorrosas, existe un modo complementario y muy excitante de aprender. Como dec\u00eda, hablamos de receptividad. De ver lo que otros muchos hacen con un talento que parece inagotable, y dejar que lo que vemos sedimente en nuestro trabajo; desde el dise\u00f1o gr\u00e1fico de los sitios web, desde las im\u00e1genes que incluyen y que a veces definen su identidad, hasta la manera en que escriben sus textos. Dejadme decir que pocas cosas me parecen tan divertidas y poco serias como un p\u00e1rrafo mal escrito. \u00bfEs que desenvolvernos en un entorno digital nos da derecho a escribir mal? Sin duda que no. Los textos deben ser sugestivos, esclarecedores o enigm\u00e1ticos, pero siempre llamativos y eficientes.
Hace poco visitaba un sitio web de cierta gran empresa y termin\u00e9 pregunt\u00e1ndome si la redacci\u00f3n hab\u00eda corrido a cargo de alg\u00fan narrador extranjero. El texto era breve y directo, pero comet\u00eda fallos gramaticales tan evidentes que era lo que m\u00e1s llamaba la atenci\u00f3n; incluso m\u00e1s que el bonito y \u00abefervescente\u00bb dise\u00f1o. Tengamos en cuenta que si nos consideran poco aplicados, no nos tomar\u00e1n como una alternativa razonable. (Y olvidemos la idea de que alguien nos pague por nuestro trabajo.)<\/p>\n

Miremos, analicemos, aprendamos de los dem\u00e1s. Es un proceso basado en la febril actividad de nuestro rat\u00f3n. Tendremos que hacer clic cientos, miles de veces, antes de que el efecto de los maestros del web deje huella en nosotros. Para empezar podemos observar los estudios y casos de grandes empresas del medio como Adobe y Macromedia, que incluyen secciones ex profeso muy interesantes; y tambi\u00e9n tenemos la oportunidad de mirar las p\u00e1ginas de las agencias de publicidad y dise\u00f1o; con frecuencia sus mejores trabajos est\u00e1n hechos para s\u00ed mismos, y no para sus clientes.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

6.- Herramientas para profesionales del dise\u00f1o web
Herramientas que podemos utilizar para dise\u00f1ar una p\u00e1gina web con excelentes resultados. Algunas recomendaciones importantes y otras para trabajos m\u00e1s espec\u00edficos.<\/p>\n

 Despu\u00e9s necesitas el software que interpretar\u00e1 tus deseos, inquietudes y talentos y les dar\u00e1 la forma que quieras \u0097en el mejor de los casos\u0097, de manera que puedas transferirlo todo a un servidor web abierto al p\u00fablico. Tampoco aqu\u00ed existe acuerdo. Todo depender\u00e1 de si trabajas en modo html \u00971st Page 2000 es una aplicaci\u00f3n reconocida y gratuita\u0097 o WYSIWYG, cuyo espectro es tambi\u00e9n muy amplio, desde el popular y dom\u00e9stico FrontPage de Microsoft, hasta los profesionales y valiosos DreamWeaver o GoLive!, pasando por los accesibles pero potentes Namo Web Editor o NetObjects Fusion…<\/p>\n

Tampoco viene mal disponer de alg\u00fan programa de dise\u00f1o gr\u00e1fico. De una manera elemental podemos decir que los hay de dos tipos m\u00e1s o menos puros, y un tercer tipo mixto. En uno de los casos se trata de aplicaciones de dibujo vectorial, es decir, aquellas que generan gr\u00e1ficos desde cero mediante herramientas de trazado geom\u00e9trico, fundamentalmente, pero tambi\u00e9n a mano alzada; dicho de una forma m\u00e1s llana, hablamos de dibujos de l\u00edneas y curvas. Pero no nos confundamos. Estos programas son madre de muchas de las mejores ilustraciones que vemos tanto en la Red como en publicidad impresa y en los envases de productos cotidianos. Actualmente se asume que Adobe Illustrator es el mejor en este campo; sin embargo, compite con el cl\u00e1sico indiscutible CorelDraw, adem\u00e1s de con Macromedia Freehand. Y, no obstante, existen alternativas baratas y eficientes, bien criticadas y admiradas en los medios, como ZonerDraw 4 o Xara.<\/p>\n

El segundo de los casos cuando hablamos de gr\u00e1ficos es el retoque fotogr\u00e1fico; o lo que es lo mismo, el trabajo de dise\u00f1o visual sobre im\u00e1genes que normalmente combinan fotograf\u00edas reales con objetos dise\u00f1ados y efectos visuales. Tambi\u00e9n Adobe y Corel se disputan el pastel, de momento favorable al primero. Sus estrellas son Photo Shop y Photo Paint. Las alternativas m\u00e1s accesibles suelen ser Paint Sho Pro de Jasc y Ulead Photo Impact.<\/p>\n

Una tercera opci\u00f3n es el software que combina retoque fotogr\u00e1fico y dibujo vectorial; cada vez m\u00e1s, \u00e9sta es una posibilidad que traen de serie todos los grandes programas, de manera que no hace falta cambiar de aplicaci\u00f3n para mezclar los modos de trabajo gr\u00e1fico.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

7.- Dise\u00f1o adecuado
El dise\u00f1o gr\u00e1fico, industrial, de identidad, debe ser adecuado al producto, persona, empresa que representa. Luego podemos entrar a debatir otros aspectos del dise\u00f1o.<\/p>\n

 \u00bfQu\u00e9 significa adecuado?<\/p>\n

El dise\u00f1o es una representaci\u00f3n formal y por tanto suele ser el primer punto de contacto entre la persona y el producto \/ servicio \/ persona.<\/p>\n

Para que un dise\u00f1o sea adecuado se disponer de la informaci\u00f3n necesaria para conocer al cliente, mercado, consumidores, producto \/ servicio.
Con esta informaci\u00f3n realizar los prototipos necesarios.
Desarrollar el dise\u00f1o final.<\/p>\n

Estilos Vs. Adecuaci\u00f3n<\/p>\n

Hay dise\u00f1adores \/ consultores \/ \u00abgur\u00fas\u00bb que defienden un estilo frente a la adecuaci\u00f3n del dise\u00f1o a la necesidad.<\/p>\n

El estilo sea \u00abneutro\u00bb, \u00abbarroco\u00bb, \u00ablimpio\u00bb, \u00abalem\u00e1n\u00bb, \u00abamericano\u00bb no es m\u00e1s que un estilo y por tanto no puede ser el punto de partida para el desarrollo del dise\u00f1o.<\/p>\n

El punto de partida debe ser el entendimiento de la necesidad del cliente.<\/p>\n

Las necesidades del cliente pueden depender de multitud de factores y no se pueden generalizar. Cada momento, cada regi\u00f3n, cada canal, cada precio, cada consumidor, hace que la necesidad sea diferente.<\/p>\n

La mejor herramienta que puede demostrar el dise\u00f1ador es la comprensi\u00f3n y entendimiento para luego poder realizar la soluci\u00f3n gr\u00e1fica.<\/p>\n

Dise\u00f1o<\/p>\n

La adecuaci\u00f3n del dise\u00f1o frente al estilo hace que los valores del mismo sean algo m\u00e1s universales y duraderos.<\/p>\n

Es decir, si uno defiende un estilo (neutro, barroco) se puede ver comprometido por la realidad del entorno.<\/p>\n

Los valores del dise\u00f1o con los que me siento identificado suelen ser del estilo:
Ayuda.
Cumple.
Duradero.
Se integra (con las personas, sistemas, usuarios).
El dise\u00f1o debe ayudar a las personas.
La ayuda puede ser de muchos tipos, puede ayudar a la gente a ganar m\u00e1s dinero, a leer con m\u00e1s facilidad, a saltar m\u00e1s alto, a pasar un buen rato.<\/p>\n

El dise\u00f1o cumple su funci\u00f3n
El dise\u00f1o debe cumplir la funci\u00f3n asignada. El dise\u00f1o es una \u00abutilidad\u00bb para llegar a un fin.<\/p>\n

Duradero.
Lo ef\u00edmero nos lleva al consumismo desmedido. Tender a que el dise\u00f1o sirva hoy, ma\u00f1ana, dentro de 10 a\u00f1os. Esta lecci\u00f3n me ha llevado tiempo aprenderla.<\/p>\n

Integrado
Este concepto hace referencia a que el dise\u00f1o se ha de integrar en los procesos naturales de las personas. No hay que crear nuevos obstaculos, sino dotar a las personas de mejores herramientas.<\/p>\n

Dise\u00f1o no es dise\u00f1o gr\u00e1fico y no es dise\u00f1o industrial<\/p>\n

En muchas conversaciones se cita \u00abdise\u00f1o\u00bb aplic\u00e1ndolo sin mucho criterio a disciplinas que pasan por el dise\u00f1o industrial, gr\u00e1fico, identidad…<\/p>\n

Visto desde fuera no pasa nada, pero desde dentro es como si hablando de deportes se citara el futbol, las barras paralelas y la nataci\u00f3n como si fueran la misma cosa. Supongo que una cosa es ser espectador de sill\u00f3n y otra subirse a una barra paralela a dar dos mortales.<\/p>\n

Dise\u00f1o gr\u00e1fico. Comunicaci\u00f3n
Color. Forma. Tipograf\u00eda. Im\u00e1genes.<\/p>\n

Dise\u00f1o industrial. Producto.
Procesos industriales. Ergonom\u00eda. Materiales.<\/p>\n

\u00abDise\u00f1o\u00bb. Proceso \u00abcreativo\u00bb.
El proceso creativo de resolver un problema se puede llamar \u00abdise\u00f1o\u00bb pero es un t\u00e9rmino tan vago que por lo general no quiere decir nada.<\/p>\n

Buscar soluciones sin ataduras<\/p>\n

El dise\u00f1o debe adecuarse a la resoluci\u00f3n del problema, evitando que un estilo nos condicione una forma de pensar o buscar soluciones.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

8.- Dise\u00f1o Web. Problemas generales
Los princiapales problemas que nos podemos encontrar a la hora de decidir el dise\u00f1o para nuestra web.<\/p>\n

 Uso de Flash<\/p>\n

Las Facilidades y Utilidades que presenta flash son innumerables a la hora de interactividad, e impacto visual. Por otra parte la interactividad mejora notablemente en conexiones de cliente\/servidor en sus \u00faltimas versiones, desafortunadamente las webs 100% flash pueden traer algunos problemas en la incorporaci\u00f3n a buscadores.<\/p>\n

Interactividad<\/p>\n

El dise\u00f1ador a la hora de buscar una soluci\u00f3n a la interactividad deber\u00e1 tomar en cuenta a que p\u00fablico est\u00e1 orientado el sitio. Unos de los principales problemas que se presenta en la interactividad, es la complejidad que el dise\u00f1ador le agrega al site, y sin opci\u00f3n de volver atr\u00e1s, o mostrar un mapa del site, logrando as\u00ed que el usuario navegue secciones de subsecciones y quede perdido dentro de la p\u00e1gina. Una p\u00e1gina deber\u00e1 ser lo que se llama APT (a prueba de tontos) as\u00ed logra el objetivo deseado, que el usuario encuentre su b\u00fasqueda.<\/p>\n

Incompatibilidad<\/p>\n

En este tema entramos en una dura lucha entre los exploradores m\u00e1s famosos del mercado, pero a la hora de ser \u00fatil en este rubro, se puede invocar a flash ya que se ejecuta con su proyector y muy rara vez tendr\u00e1s problemas. Hay que tener mucho cuidado cuando se hacen p\u00e1ginas din\u00e1micas, con php, asp, etc… Y tambi\u00e9n con los CSS que se va a incluir en la hoja de estilo, esto te puede traer algunos dolores de cabeza ya que los exploradores interpretan diferente y algunos dejan pasar de largo c\u00f3digo y otros no, o definen c\u00f3digo diferente. Entonces ah\u00ed se entra en una disputa no solo con el cliente que quiere que su sitio se vea en todos los navegadores, sino tambi\u00e9n con uno mismo al intentar hacer que las cosas funcionen en varios navegadores. Una soluci\u00f3n viable es conocer a fondo los exploradores mas usados en el mercado, y saber como interpretan c\u00f3digo.<\/p>\n

Formularios Web<\/p>\n

Estoy seguro que a la mayor\u00eda le molesta completar formularios Web. Estos mismos si bien son \u00fatiles, pueden lograr que un usuario deje de hacer su consulta y se retire del sitio. En mi opini\u00f3n estos formularios deben ser absolutamente claros y concisos, y por supuesto evitar hacer preguntas in\u00fatiles, sin olvidar que el formulario debe ser corto. (Preferencia general de los usuarios). Es \u00fatil configurar una auto respuesta para que le quede al usuario un comprobante de lo consultado, ya que este mail puede causar un visita futura.<\/p>\n

Uso desconsiderado de Ventanas<\/p>\n

Actualmente nos encontramos invadidos por las publicidades en pop-ups, evite el uso de pop-ups en el sitio, primero porque ya los exploradores m\u00e1s vendidos traen una herramienta para bloquearlos y resulta molesto para el visitante tener que activarlo para ver el material que busca.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

9.- Conclusi\u00f3n a la introducci\u00f3n al dise\u00f1o web
\u00daltimos apuntes de inter\u00e9s para el dise\u00f1o de p\u00e1ginas web.<\/p>\n

\u00bfExiste vida m\u00e1s all\u00e1 de los gr\u00e1ficos est\u00e1ticos?<\/p>\n

En realidad s\u00ed. La opci\u00f3n m\u00e1s com\u00fan es Flash de Macromedia, que permite crear pel\u00edculas realmente complejas e interactivas combinando ilustraciones embebidas, gr\u00e1ficos vectoriales, sonidos y ActionScript, el lenguaje de comandos espec\u00edfico de Flash, am\u00e9n de otras posibilidades muy bien conocidas. Adicionalmente est\u00e1 disponible el formato vectorial SVG, del que es accesible un manual en Desarrollo Web.<\/p>\n

Conclusi\u00f3n<\/p>\n

En conclusi\u00f3n, el trabajo del desarrollador web (esa especie de alquimista obligado a dominar y combinar variables tan dispares, y a veces de apariencia incompatible, como la usabilidad y el atractivo de cara al usuario, y la efectividad t\u00e9cnica de cara a la empresa que paga sus honorarios, como por ejemplo en el caso de tiendas on-line), este trabajo, dec\u00eda, es un proceso largo que requiere un enorme grado de instrucci\u00f3n y aprendizaje t\u00e9cnico, pero tambi\u00e9n generosas dosis de intuici\u00f3n y anticipaci\u00f3n. A fin de cuentas, la Red muta y crece cada poco tiempo, y no podemos quedar atr\u00e1s. Buena suerte.<\/p>\n

Por d\u00f3nde continuar<\/p>\n

En DesarrolloWeb.com se ha publicado otro manual de dise\u00f1o que seguro que resultar\u00e1 interesante para aquellos que quieran profundizar en el tema: Curso pr\u00e1ctico de dise\u00f1o web.<\/p>\n

Podemos concer algunos programas interesantes para el dise\u00f1o en la categor\u00eda de dise\u00f1o de la secci\u00f3n de programas.<\/p>\n

Tambi\u00e9n tenemos otros contenidos sobre dise\u00f1o clasificados en nuestro directorio, donde encontraremos otros manuales, categor\u00edas, art\u00edculos y enlaces a otras webs.<\/p>\n

Esperamos que esta introducci\u00f3n al dise\u00f1o haya resultado interesante.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

10.- Diapositivas de la conferencia Dise\u00f1o web para dispositivos m\u00f3viles
Diapositivas o slides de la conferencia impartida en febrero de 2012, en M\u00e9xico, sobre dise\u00f1o web para dispositivos m\u00f3viles.<\/p>\n

 Por medio de este art\u00edculo estoy compartiendo con todos los interesados las diapositivas de la conferencia que realic\u00e9 el 25 de febrero de 2012 en la Ciudad de M\u00e9xico, para el evento Mejorando.la\/conferencia. En ese segundo d\u00eda del evento habl\u00e9 sobre el dise\u00f1o web para dispositivos m\u00f3viles, un tema que tiene mucha transcendencia en estos momentos.
La web estuvo tradicionalmente dominada por los ordenadores de escritorio, tanto laptop como desktop. Sin embargo la tendencia actual hace suponer que en 2014, osea, dentro de muy poco, habr\u00e1 m\u00e1s dispositivos m\u00f3viles conectados a Internet que ordenadores con sistemas operativos tradicionales. Por ello, y por muchos otros motivos que explico en la conferencia, para nosotros desarrolladores nos resulta especialmente importante actualizar nuestras t\u00e9cnicas de dise\u00f1o y maquetaci\u00f3n, de modo que los resultados que obtengamos sean compatibles tambi\u00e9n con la web m\u00f3vil.<\/p>\n

Ante el planteamiento explicado en el p\u00e1rrafo anterior, nace esta conferencia en la que pretendo mostrar cu\u00e1les son las corrientes de dise\u00f1o m\u00e1s actuales que nos permiten encarar un desarrollo que sea compatible con la web en movilidad. Para explicar todo ello con el detalle que nos permite la duraci\u00f3n limitada de la exposici\u00f3n, se desarrollaron los siguientes puntos:<\/p>\n

1) Importancia de la web m\u00f3vil
Donde mostramos por medio de una serie de gr\u00e1ficas hasta que punto la web m\u00f3vil es importante y le va ganando terreno a la web focalizada para ordenadores de escritorio.<\/p>\n

2) Caracter\u00edsticas y usabilidad del dise\u00f1o m\u00f3vil
Cu\u00e1les son las caracter\u00edsticas que se suponen deseables para las webs bien construidas para dispositivos m\u00f3viles.<\/p>\n

3) Documentos HTML optimizados para m\u00f3viles
Un r\u00e1pido vistazo a los elementos que deben tener las p\u00e1ginas web optimizadas para dispositivos m\u00f3viles y que nos permiten cambiar la forma como \u00e9stos interpretan una p\u00e1gina web.<\/p>\n

4) Responsive Web Design
Este es el item m\u00e1s relevante de la exposici\u00f3n, en el que se explica el concepto Responsive Web Design, que propone hacer sitios web que se ven correctamente en todos los dispositivos y ordenadores de escritorio. Se repasan diversos elementos adicionales como las CSS3 Media Queries, one web, im\u00e1genes fluidas, etc.<\/p>\n

5) Recursos \u00fatiles: Frameworks y librer\u00edas para el dise\u00f1o y animaci\u00f3n en la web m\u00f3vil
Un recorrido a algunos de los recursos m\u00e1s destacables para hacer dise\u00f1o web y animaci\u00f3n para dispositivos m\u00f3viles y para implementar las bases del Responsive Web Design. En este punto se comentan desde frameworks CSS preparados para dise\u00f1o web m\u00f3vil (algunos que se basan en Responsive Web Design y otros que se quedan a medio camino), librer\u00edas Javascript para creaci\u00f3n de sitios enfocados para m\u00f3viles, pollyfils para implementar Media Queries en navegadores que aun no las soportan, librer\u00edas para hacer im\u00e1genes fluidas, softwares para animaci\u00f3n en m\u00f3viles, etc.<\/p>\n

En definitiva, mucho material para poco tiempo de charla. Con ello se explic\u00f3 muchas veces con demasiada velocidad, pero sin dudas lo iremos viendo en DesarrolloWeb.com con m\u00e1s detenimiento en diversos art\u00edculos.<\/p>\n

El v\u00eddeo de la conferencia se puede ver en un art\u00edculo publicado aqu\u00ed en DesarrolloWeb.com.<\/p>\n

El PDF con las transparencias lo he puesto a disposici\u00f3n en el siguiente enlace: Slides de la conferencia de dise\u00f1o web m\u00f3vil.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

11.- La importancia de la web m\u00f3vil
Algunos datos de inter\u00e9s que nos pueden motivar para aprender a dise\u00f1ar webs para dispositivos m\u00f3viles.<\/p>\n

 A la hora de dise\u00f1ar un sitio web cada d\u00eda debemos tener m\u00e1s en cuenta que est\u00e9 optimizado tambi\u00e9n para m\u00f3viles. En este art\u00edculo pretendo ponerlo de manifiesto a partir de una serie de informaciones que seguramente nos servir\u00e1n a todos.
Muchos de los datos que voy a dar ser\u00e1n de sobra conocidos por los lectores, quiz\u00e1s alguno de ellos resulte m\u00e1s revelador, pero en realidad hoy pocas personas desconocen que la web m\u00f3vil est\u00e1 tomando mayor fuerza cada mes que pasa. Quiz\u00e1s aun menos de los lectores carezcan en la actualidad de alg\u00fan tipo de dispositivo m\u00f3vil, con el que poder acceder a Internet, ya sea smartphone o tablet, con lo cual todav\u00eda les resultar\u00e1 m\u00e1s patente la necesidad de hacer un contenido web que se vea correctamente en todos los aparatos que puedan llegar a consumirlo.<\/p>\n

En el momento de escribir estas l\u00edneas DesarrolloWeb.com no tiene un dise\u00f1o optimizado para m\u00f3vies, pero lo tendr\u00e1 en breve! No obstante, eso no quiere decir que yo como director del proyecto piense que no se debe dise\u00f1ar para m\u00f3viles, muy al contrario. Al hacer este estudio de dise\u00f1o web para dispositivos, que vamos a ir publicando en diversos art\u00edculos, me he terminado de convencer de esta necesidad y tengo un compromiso conmigo mismo de cambiar la situaci\u00f3n. Espero que a vosotros tambi\u00e9n os convenza de ello.<\/p>\n

El desarrollo tecnol\u00f3gico y el hardware dominador de cada d\u00e9cada
A lo largo de las pasadas d\u00e9cadas diversos sistemas han tomado fuerza puntual, para dejar paso luego a distintos tipos de m\u00e1quinas m\u00e1s avanzadas y por tanto con mayores capacidades de procesamiento o mayores posibilidades de penetrar en el mercado de consumo.
En la siguiente gr\u00e1fica se puede ver retrospectivamente la historia de los equipos inform\u00e1ticos para la computaci\u00f3n a lo largo de su relativamente corto periplo entre nosotros. Podremos comprobar como cada d\u00e9cada m\u00e1s o menos existe un dominador del mercado.<\/p>\n


<\/p>\n

La fuente de esta informaci\u00f3n es Morgan Stanley y en el estudio nos muestran que en realidad la etapa dominada por los dispositivos ya pas\u00f3. De hecho, aun no sabemos qu\u00e9 tipo de hardware va a dominar la presente d\u00e9cada o si simplemente los dispositivos van a continuar creciendo sin definirse otro formato de m\u00e1quina para la computaci\u00f3n.<\/p>\n

Pero la siguiente gr\u00e1fica, obtenida del mismo estudio de Morgan Stanley, es todav\u00eda m\u00e1s reveladora.<\/p>\n


<\/p>\n

Como se puede ver, tanto Internet para ordenadores de escritorio como Internet para tel\u00e9fonos m\u00f3viles est\u00e1 en crecimiento. Sin embargo, debido las pendientes de ambos usos de la Red, en un breve espacio de tiempo el n\u00famero de usuarios de la Internet M\u00f3vil habr\u00e1 superado al de los usuarios de ordenadores de escritorio. El cruce entre las dos l\u00edneas de crecimiento se prev\u00e9 para 2014. No falta nada!<\/p>\n

Importancia de la optimizaci\u00f3n de sitios web para m\u00f3viles
Hay otra infograf\u00eda que tambi\u00e9n nos ofrece unas gr\u00e1ficas interesantes, sobre todo para quienes nos dedicamos a hacer webs, para ver hasta qu\u00e9 punto trae fuerza este crecimiento de usuarios de Internet en movilidad. Se llama Crecimiento de la importancia de la optimizaci\u00f3n web para m\u00f3vil y de ella he extra\u00eddo otras im\u00e1genes sobre las que deseo llamar la atenci\u00f3n.<\/p>\n


<\/p>\n

Esta primera gr\u00e1fica no nos dice demasiado. Efectivamente, el crecimiento supera un 1000% en un a\u00f1o y medio, aunque no deja de ser un todav\u00eda peque\u00f1o porcentaje (7%) del tr\u00e1fico en general. Claro que la gr\u00e1fica termina en octubre de 2011 y continuando esa tendencia, durante 2012 cambiar\u00e1 bastante. Sin embargo, cabe dar una mayor atenci\u00f3n a los siguientes datos que nos aporta el estudio.<\/p>\n


<\/p>\n

La imagen habla por si misma, pero por concretar alguna cosa, vemos que del top 500 de Alexa, solo aproximadamente el 22% de los sitios tienen un sitio optimizado para dispositivos m\u00f3viles. Si nos limitamos a los comercios online, menos del 5% tienen un sistema de compras construido pensando en la Internet M\u00f3vil. Esos datos contrastan con los siguientes de la infograf\u00eda, en los que vemos hasta qu\u00e9 punto una versi\u00f3n para m\u00f3viles provoca un mayor grado de satisfacci\u00f3n del usuario, as\u00ed como una tasa de retorno m\u00e1s elevada. El 85% de los usuarios se sentir\u00eda m\u00e1s comprometido con un comercio online optimizado para m\u00f3viles y el 51% ser\u00eda m\u00e1s favorable a hacer negocios con un sitio que tuviera versi\u00f3n para dispositivos en movilidad.<\/p>\n

Conclusi\u00f3n
Podr\u00edamos aportar infinidad de datos estad\u00edsticos por los cuales convencernos para actualizar nuestros conocimientos para la web m\u00f3vil. Quiz\u00e1s estar\u00eda un poco de m\u00e1s, puesto que realmente todos nos hacemos a la idea que cada d\u00eda el mundo de los dispositivos en movilidad va ganando fuerza.
No es una cuesti\u00f3n de dificultad, como veremos en adelante, pues con los conocimientos que ya tienes te resultar\u00e1 muy sencillo llegar a entender las particularidades del dise\u00f1o para la web m\u00f3vil. Tampoco es una cuesti\u00f3n de dejar de lado a los ordenadores de escritorio, para centrarnos exclusivamente en los dispositivos m\u00f3viles, sino en hacer las cosas de manera que funcionen correctamente en cada uno de los sistemas que pueden consumir un sitio web. Existen diversas v\u00edas para ello y con diversas filosof\u00edas. Tambi\u00e9n es algo que estudiaremos con calma en lo sucesivo.<\/p>\n

Quiz\u00e1s s\u00ed es una cuesti\u00f3n de tiempo, pues tanto lo necesitar\u00e1s para reciclar tus habilidades, como lo deber\u00e1s invertir para producir sitios con esos detalles ,que los optimicen atendiendo a las caracter\u00edsticas de cada dispositivo. El tiempo es algo que te pertenece y no te podemos regalar, pero al menos s\u00ed vas a tener todo el apoyo de DesarrolloWeb.com para conseguir los objetivos y para ello estaremos publicando en los pr\u00f3ximos meses mucha documentaci\u00f3n que te servir\u00e1 para aprender todo aquello que necesitas para comenzar a desarrollar webs en distintos tipos de dispositivos.<\/p>\n

De momento este art\u00edculo se queda por aqu\u00ed. Esperamos al menos haber provocado tu inter\u00e9s para aprender a dise\u00f1ar webs para m\u00f3viles. Por supuesto, que esas ganas de aprender se transformen en un breve espacio de tiempo en conocimientos que te ayuden en tu d\u00eda a d\u00eda como desarrollador.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

12.- Caracter\u00edsticas del uso de la Internet M\u00f3vil
El uso de Internet en dispositivos m\u00f3viles es diferente del uso que se realiza en ordenadores personales.<\/p>\n

 En el art\u00edculo anterior explicamos algunos detalles acerca de la necesidad y urgencia que tenemos los desarrolladores de reciclar nuestros conocimientos, de modo que podamos comenzar a dise\u00f1ar webs que se comporten bien en dispositivos m\u00f3viles. Realmente no dejan de ser una serie de datos estad\u00edsticos, con la simple intenci\u00f3n de motivarnos en el aprendizaje.
En este art\u00edculo vamos a entrar a comentar algunos otros datos interesantes, sobre las caracter\u00edsticas del uso de la Internet M\u00f3vil, pero que no dejan de ser meramente te\u00f3ricos. Por esa raz\u00f3n todav\u00eda vamos a retrasarnos antes de ponerse manos a la obra. Cuento con vuestra paciencia. Quiz\u00e1s lo que voy a comentar en las siguientes l\u00edneas no dejen de ser verdades que como usuario de un smartphone ya habr\u00e1s experimentado, no obstante siempre est\u00e1 bien traerlas a la palestra y concretarlas en nuestro conocimiento.<\/p>\n

\u00bfQui\u00e9n no ha usado su tel\u00e9fono m\u00f3vil mientras que camina por la calle? Si nunca has cometido esta temeridad, pues felicidades por no estar tan enganchado a la tecnolog\u00eda. Quiz\u00e1s tu esperanza de vida sea mayor que la mayor\u00eda de tus colegas, pero con m\u00e1s raz\u00f3n tendr\u00e1s que prestar atenci\u00f3n a lo siguiente. Pasear con m\u00f3vil en la mano es un claro ejemplo de c\u00f3mo el uso de los m\u00f3viles es distinto al uso de Internet en ordenadores de escritorio, pero hay m\u00e1s. A continuaci\u00f3n voy a dar tres detalles que a mi juicio condicionan sobre manera el uso que las personas hacemos de los dispositivos m\u00f3viles.<\/p>\n

Generalmente est\u00e1s haciendo otras cosas
Cuando estamos trabajando con un ordenador de escritorio, ya sea un laptop o desktop, generalmente estamos totalmente centrados en lo que est\u00e1 pasando por la pantalla. Al trabajar con el ordenador personal solemos estar sentados c\u00f3modamente en una silla y una mesa y con todos los sentidos en nuestra m\u00e1quina. Sin embargo, el uso de Internet en un dispositivo m\u00f3vil no suele ser as\u00ed. Las personas cuando usamos los m\u00f3viles estamos haciendo mil cosas diferentes. Los hay que usan Internet en sus dispositivos de movilidad mientras comen, mientras ven la televisi\u00f3n o mientras caminan por la calle.
Con ello, queda patente que nuestros sentidos encuentran est\u00edmulos de la vida real mientras se conectan con el mundo online. En muchas ocasiones es hasta m\u00e1s cr\u00edtico para ellos lo que est\u00e1n viendo en la pantalla de la TV que los art\u00edculos que est\u00e1n simplemente hojeando en su m\u00f3vil. Es m\u00e1s importante el plato que tienen delante que las actualizaciones de Facebook de sus amigos, que est\u00e1n revisando mientras come.<\/p>\n


<\/p>\n

En la anterior imagen podemos ver un dato interesante recogido en una infograf\u00eda de Microsoft Tag. El 86% de los usuarios de m\u00f3viles se conectan a Internet mientras ven sus programas de televisi\u00f3n. A vista de ese dato queda patente que debemos construir webs para m\u00f3viles bajo otra perspectiva de la que se usa para los ordenadores de escritorio.<\/p>\n

Pero volviendo al caso de caminar usando el m\u00f3vil, pensemos que una situaci\u00f3n como esa, no solo conlleva que el usuario est\u00e9 fij\u00e1ndose en otras cosas, como un sem\u00e1foro en rojo, cruzarse con otras personas sin atropellarlas ni ser atropellado, etc. Tambi\u00e9n puede perder el foco de nuestro sitio web por otros asuntos como recibir el reflejo del sol sobre la pantalla del tel\u00e9fono o la llegada de avisos en aplicaciones de mensajer\u00eda.<\/p>\n

Se conectan para ver algo concreto, con menor tiempo para consumirlo
Como segundo detalle cabe destacar tenemos la objetividad del uso de la Internet m\u00f3vil. Es decir, las personas que se conectan a Internet en un dispositivo de movilidad no lo hacen sencillamente porque quieran pasar el rato. Bueno, quiz\u00e1s en muchos casos as\u00ed sea, pero generalmente desean obtener algo concreto. Si fuera para hacer largas horas de ocio, quiz\u00e1s preferir\u00edan conectarse en sus ordenadores, con una gran pantalla y unas interfaces para entrada de datos m\u00e1s c\u00f3modas, como el teclado.
El caso es que, en muchos casos, nos conectamos a Internet porque queremos saber la direcci\u00f3n concreta de un lugar al que nos dirigimos. O bien porque no sabemos llegar a una direcci\u00f3n y queremos ver la ruta en un mapa. Quiz\u00e1s simplemente porque queremos el tel\u00e9fono de alg\u00fan proveedor o porque queremos \u00abmatar\u00bb 10 minutos de espera, comunicando con nuestros amigos y seguidores, antes de sentarnos en la silla de tortura del dentista.<\/p>\n

En definitiva, casi siempre que nos conectamos a Internet en el m\u00f3vil es porque queremos hacer algo concreto, pero lo que es m\u00e1s importante, queremos una respuesta r\u00e1pida, porque nuestro tiempo para obtenerla tambi\u00e9n es m\u00e1s reducido. Por ello, al construir un sitio para m\u00f3viles no tenemos que pensar que nuestro usuario tiene tiempo de navegar por 10 p\u00e1ginas antes de encontrar aquello que busca. A ser posible, se lo tenemos que entregar de una manera r\u00e1pida y objetiva.<\/p>\n

Velocidad de conexi\u00f3n y planos de datos limitados
Hoy, afortunadamente, la velocidad de conexi\u00f3n a Internet por telefon\u00eda m\u00f3vil es razonablemente buena, no obstante, las conexiones de Red de nuestra oficina u hogar contin\u00faan siendo sensiblemente mejores. Eso es algo que debemos tener en cuenta a la hora de planificar un sitio web optimizado para m\u00f3viles. Unido a la objetividad que ser\u00eda deseable en la respuesta, seg\u00fan el punto comentado anteriormente, hace que nuestro sitio para m\u00f3viles se deba dise\u00f1ar ajustando al m\u00e1ximo la cantidad de bytes a transferir en los accesos.
Adem\u00e1s, los planos de datos para los tel\u00e9fonos m\u00f3viles tambi\u00e9n tienen algo que nos debe motivar a reducir al m\u00e1ximo el peso de las webs enfocadas a este tipo de dispositivos de acceso. No es otra cosa que la cantidad de transferencia mensual que tu paquete de datos te disponibiliza. Aunque las operadoras en muchos casos se empe\u00f1en en decirnos cosas como \u00abofrecemos internet ilimitada de 500Mb\u00bb, la realidad es que hacen m\u00e1s gracia que otra cosa.<\/p>\n

Sobre ese asunto de la Internet M\u00f3vil limitada hay unas diapositivas que tienen incluso un par de momentos de humor negro, con los que uno no sabe si re\u00edr o llorar. Son de donde he extra\u00eddo la imagen anterior y est\u00e1n accesibles para cualquier interesado en la materia. El mencionado trabajo se llama \u00abEl final del ancho de banda ilimitado\u00bb.<\/p>\n

Conclusi\u00f3n
No me cabe duda que todav\u00eda habr\u00e1 otros patrones que ilustren el comportamiento t\u00edpico de los usuarios que se conectan a Internet en sus dispositivos m\u00f3viles, sin embargo, los vistos en este art\u00edculo nos dan ya una buena idea de c\u00f3mo las costumbres difieren de las que venimos desempe\u00f1ando en ordenadores tradicionales.
Con estas ideas y nuestro sentido com\u00fan estoy seguro que cualquier lector podr\u00eda hacerse ya una lista de buenas ideas para desempe\u00f1ar su pr\u00f3ximo sitio web optimizado para m\u00f3viles. No obstante, continuaremos en esta l\u00ednea en el siguiente texto, que dedicaremos a explicar las reglas de usabilidad m\u00e1s importantes a la hora de dise\u00f1ar webs enfocadas a dispositivos m\u00f3viles.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

13.- Taller de Responsive Web Design
V\u00eddeo del taller de Responsive Web Design emitido en directo el 24 de abril de 2012, tratando el dise\u00f1o adaptable a todos los dispositivos.<\/p>\n

 Responsive Web Design es una corriente de dise\u00f1o que hoy resulta revolucionaria pero que a buen seguro en el futuro ser\u00e1 algo de lo m\u00e1s normal. Se trata de un modelo de trabajo por el que se dise\u00f1e un \u00fanico sitio que se adapte perfectamente a todos los dispositivos que puedan consumirlo, desde ordenadores de escritorio a netbooks, tablets, tel\u00e9tonos m\u00f3viles, 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\u00e1tica tenemos un material muy interesante para todos los lectores de DesarrolloWeb.com, en un taller de Responsive Web Design emitido en directo el d\u00eda 24 de abril de 2012 y que ahora puedes ver en diferido en este mismo art\u00edculo de DesarrolloWeb.com.<\/p>\n

En el taller se vieron de modo general varias de las claves del dise\u00f1o 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\u00ed como las mediaqueries e CSS3, que ser\u00edan el colof\u00f3n para la implementaci\u00f3n del responsive.<\/p>\n

Tambi\u00e9n se nombraron algunos paquetes y librer\u00edas para facilitar la vida de los desarrolladores, entre otras muchas cosas. Finaliz\u00f3 el evento con la t\u00edpica ronda de preguntas, donde los asistentes masacraron literalmente al ponente con muchas dudas interesantes para todos los que queremos hacer la web de la \u00faltima generaci\u00f3n, la Internet Multidispositivo.<\/p>\n

El ponente que estuvo a cargo de esta charla fue @Wakkos, experto convencido de la web como un \u00fanico 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\u00edneas.<\/p>\n

Sin m\u00e1s, os dejo con el webcast de Responsive Web Design, que estoy seguro encantar\u00e1 a todos los que nos dedicamos a construir sitios web.<\/p>\n

 <\/p>\n

 {youtube}http:\/\/www.youtube.com\/watch?v=sCvhhBySYzE<\/a>{\/youtube}<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

14.- V\u00eddeo: Fundamentos de Responsive Web Design
Sesi\u00f3n 1 de 3 de Responsive Web Design preparatoria para el curso que vamos a organizar en DesarrolloWeb.com y EscuelaIT, donde veremos los fundamentos del dise\u00f1o adaptable y diversos trucos \u00fatiles con CSS.<\/p>\n

 Esta es la primera de las tres sesiones gratuitas que vamos a impartir en DesarrolloWeb.com sobre Responsive Web Design, en la que hemos repasado algunos aspectos te\u00f3ricos y diversos aspectos pr\u00e1cticos sobre las hojas de estilo en Cascada.
A lo largo de una hora y 20 minutos Daniel Mart\u00ednez nos ofrece diversas gu\u00edas para comenzar a pensar en Responsive cuando encaramos el dise\u00f1o de una web. El objetivo es que se adapte a todos los dispositivos que puedan visitarla, independientemente de sus caracter\u00edsticas. Adem\u00e1s, yo ofrezco una introducci\u00f3n en la que explico cu\u00e1l es el objetivo de estas tres sesiones y la din\u00e1mica que vamos a implementar para ellas y en el curso que realizaremos en breve.<\/p>\n

En cuanto a contenido sobre Responsive Web Design, aunque esta ha sido una sesi\u00f3n mayormente te\u00f3rica, el ponente nos ha dejado diversos trucos y an\u00e1lisis de las posibilidades de Responsive, como son los siguientes:<\/p>\n

Nuevas maneras de navegar por Internet, c\u00f3mo debemos encarar el trabajo de dise\u00f1ar una web en la Internet Multidispositivo
C\u00f3mo utilizan Responsive sitios web de referencia y los diferentes layouts que se adaptan a dispositivos seg\u00fan su anchura
Estilos CSS para adaptar las cajas a distintas anchuras, min-width y max-width
Diferencias entre Float e Inline-block
Modelo de caja en CSS3 y mejoras con el atributo box-sizing
Trucos para compatibilizar algunos atributos de CSS en Internet Explorer
Luego pasamos a una ronda de preguntas en la que los asistentes participaron con diversas preguntas en las que Daniel que fue aportando muchas otras ideas y trucos relacionados con el contenido visto previamente.
Entre las preguntas que se realizaron se tocaron asuntos relacionados con el modelo de caja, resoluciones necesarias a tener en cuenta al hacer responsive, compatibilidad de CSS con exploradores viejos, tama\u00f1os de im\u00e1genes para distintos dispositivos, etiquetas sem\u00e1nticas del HTML5, proporciones deseables al asignar espacios para maquetar una web, etc.<\/p>\n

En definitiva, se realizaron diversas aproximaciones a la tem\u00e1tica del Responsive Web Design que servir\u00e1n para poder comprender mejor esta nueva manera de concebir el dise\u00f1o de un sitio web. Aclaramos por \u00faltimo que estas son nuestras primeras pruebas en la retransmisi\u00f3n de aulas en v\u00edvo a trav\u00e9s de GoToMeeting, que salieron bastante dignas aunque hay diversos aspectos que se mejorar\u00e1n en siguientes entregas.<\/p>\n

Muchas gracias a todos por vuestra atenci\u00f3n y recordar que para m\u00e1s informaci\u00f3n de nuestro curso de Dise\u00f1o web adaptable a todas las plataformas pod\u00e9is consultar la siguiente URL:<\/p>\n

http:\/\/www.escuela.it\/cursos\/responsive-web-design\/<\/p>\n

Por \u00faltimo, antes de dejaros con la grabaci\u00f3n, proporcionamos un enlace para descargar el c\u00f3digo de los ejemplos realizados por Daniel a lo largo de este v\u00eddeo.<\/p>\n

 <\/p>\n

 {youtube}http:\/\/www.youtube.com\/watch?v=XlmylrWlENU<\/a>{\/youtube}<\/p>\n

 <\/p>\n

 <\/p>\n

15.- V\u00eddeo: Medidas e im\u00e1genes relativas en Responsive Web Design
V\u00eddeo que trata sobre medidas relativas en las CSS e im\u00e1genes flexibles para realizar Responsive Web Design.<\/p>\n

En este v\u00eddeo vamos a seguir con las sesiones sobre Responsive Web Design, abordando la manera de hacer sitios que se adapten a las caracter\u00edsticas de cada dispositivo. Es la segunda entrega de unas clases impartidas por el dise\u00f1ador Daniel Mart\u00ednez @Wakkos.
A lo largo de m\u00e1s de una hora, veremos muchas cosas que, estamos seguros, ser\u00e1n de mucha utilidad a todos aquellos que se dedican al dise\u00f1o web en cualquiera de sus expresiones. Esto es porque, en realidad, aunque todo el material que se va a ofrecer est\u00e1 pensado para hacer webs adaptables a los dispositivos, son b\u00e1sicamente consejos de hojas de estilo en cascada que todos debemos conocer.<\/p>\n

Para profundizar en este nuevo modelo de dise\u00f1o web, Responsive Web Design, hablaremos sobre algunos de los asuntos m\u00e1s consultados, como las unidades CSS o las im\u00e1genes flexibles.<\/p>\n

Nota: Estas sesiones est\u00e1n siendo realizadas en vivo entre un grupo de participantes reducido, aunque la grabaci\u00f3n est\u00e1 mediante esta entrega a disposici\u00f3n de todos los interesados en aprender dise\u00f1o web multidispositivo.
Comenzamos explicando qu\u00e9 son las medidas relativas de las CSS, las conocidas por las siglas \u00abem\u00bb y las medidas de porcentaje. Estas medidas son las m\u00e1s b\u00e1sicas en los dise\u00f1os \u00abresponsive\u00bb, sin embargo y aunque debemos amar lo relativo y odiar lo absuluto, no debemos olvidarnos de otras medidas como los p\u00edxeles, que nos servir\u00e1n para hacer cosas como asignar la anchura m\u00e1xima o m\u00ednima a un elemento.<\/p>\n

Luego explicaremos muchos aspectos relacionados con las unidades y c\u00f3mo aplicarlos a tama\u00f1os de fuentes tipogr\u00e1ficas y a tama\u00f1os de los elementos. Veremos que las unidades relativas basan su tama\u00f1o en una proporci\u00f3n del contenedor padre, y c\u00f3mo podemos definirlas de un modo que nos resulten c\u00f3modas de calcular. Aqu\u00ed, calculadora en mano, se explicar\u00e1n algunas f\u00f3rmulas que nos har\u00e1n entender c\u00f3mo se deben especificar las unidades \u00abem\u00bb, junto con algunas referencias destacadas a webs que tratan sobre las medidas relativas y el uso de las mismas en el Responsive Web Design.<\/p>\n

Luego se ver\u00e1 de qu\u00e9 manera trabajar con im\u00e1genes flexibles, es decir, que se redimensionan para ocupar todo el espacio disponible en el contenedor. Se explicar\u00e1 de qu\u00e9 manera asignar las dimensiones de las im\u00e1genes y c\u00f3mo evitar algunos efectos indeseables como el pixelado que se produce al estirarlas.<\/p>\n

A continuaci\u00f3n se pasar\u00e1 a la ronda de preguntas donde se tocar\u00e1n aspectos de diverso calado, como presentaciones \u00abslider\u00bb adaptables, librer\u00edas para adaptar im\u00e1genes, frameworks CSS, im\u00e1genes de background, sprites CSS, el modo de definir medidas relativas sin perder la noci\u00f3n del nivel de anidaci\u00f3n de etiquetas, la posibilidad de usar medidas absolutas en algunos casos en dise\u00f1os responsive, etc.<\/p>\n

 {youtube}http:\/\/www.youtube.com\/watch?v=r77y7OwkbhE<\/a>{\/youtube}<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

16.- Webcast de Dise\u00f1o Web
Grabaci\u00f3n en v\u00eddeo de la emisi\u00f3n en directo sobre dise\u00f1o web abordando el proceso desde cero, Wireframing, clientes y formatos de trabajo, concepci\u00f3n est\u00e9tica.<\/p>\n

 Estamos realizando una aproximaci\u00f3n al dise\u00f1o web de la mano de profesionales del mundo del dise\u00f1o, en una serie de emisiones en directo en DesarrolloWeb.com. Hemos comenzado con este v\u00eddeo que ahora os presentamos, en el que hemos abordado el proceso de dise\u00f1o desde cero.
En la transmisi\u00f3n, realizada en directo el pasado 4 de julio de 2012, estuvimos charlando de muchas de las tareas que se plantean en los primeros pasos de un dise\u00f1o web. Nos hemos centrado en el prototipado de la web y c\u00f3mo presentarlo al cliente, lo que se denomina en lenguaje de los dise\u00f1adores el \u00abwireframe\u00bb.<\/p>\n

A lo largo de casi dos horas de programa hemos explicado c\u00f3mo debe de ser el prototipo de una web que ser\u00eda presentado al cliente para su validaci\u00f3n, junto con muchas gu\u00edas de trabajo con el cliente en los primeros pasos de todo encargo que puedan realizarnos. Asimismo, hemos abordado muchos detalles del trato con el cliente, para llevar negociaciones en v\u00edas de conseguir que nos adjudiquen un trabajo. Hablando de estos asuntos nos hemos entretenido un buen rato, y es que existen muchas personas que tienen dudas al respecto sobre la operativa que ser\u00eda m\u00e1s aconsejable de implementar.<\/p>\n

Tambi\u00e9n hemos charlado bastante sobre cu\u00e1les son las tendencias de dise\u00f1o que actualmente est\u00e1n protagonizando la web, como el minimalismo o el Responsive Web Design. Temas que dan mucho para hablar y de los cuales casi todos tenemos una opini\u00f3n, pues ah\u00ed se entra mucho en los gustos de cada persona. Lo que s\u00ed existe es una l\u00ednea de trabajos creados por ilustres dise\u00f1adores de los cuales hemos comentado alguna que otra propuesta.<\/p>\n

El webcast ha corrido a cargo de Daniel Mart\u00ednez, @Wakkos, que nos ha ofrecido una vez m\u00e1s su animada participaci\u00f3n y sus siempre \u00fatiles consejos y gu\u00edas de dise\u00f1o. Adem\u00e1s, en esta ocasi\u00f3n hemos tenido el placer de contar con dos profesionales del mundo del dise\u00f1o web que se han ofrecido a abrir la emisi\u00f3n en directo y resolvernos alguna de las preguntas m\u00e1s habituales que todos los que no pertenecemos tan directamente al mundo del dise\u00f1o nos hacemos.<\/p>\n

Los dos colaboradores que nos han acompa\u00f1ado, aportando sus experiencias en la antesala de este webcast, son Luis Ter\u00e1n @luteran78 y Erick Ojitoz @ErickOjitoz, que han ofrecido su visi\u00f3n en temas de dise\u00f1o y desarrollo como los CMS, cu\u00e1les son los elementos m\u00e1s imporantes en todo dise\u00f1o web, las herramientas online que forman parte de sus favoritos y los trabajos de referencia en los que ellos se inspiran.<\/p>\n

Sin m\u00e1s, os dejamos con este v\u00eddeo que est\u00e1 repleto de joyitas y cantidad de informaci\u00f3n \u00fatil para las personas que se dedican al dise\u00f1o web, pero tambi\u00e9n para cualquier freelance en general. Esperamos que disfrut\u00e9is de la emisi\u00f3n tanto como nosotros hemos disfrutado realiz\u00e1ndola.<\/p>\n

En breve tendr\u00e9is m\u00e1s novedades, si quer\u00e9is!! para ello, como proponemos al final del v\u00eddeo, os animamos a tuitear a @Wakkos o a @deswebcom para decirnos si os apetece que realicemos otro webcast sobre este tema, y sobre los asuntos que os gustar\u00eda que abord\u00e1semos en la siguiente emisi\u00f3n. Os lo agradeceremos sinceramente \ud83d\ude42<\/p>\n

{youtube}http:\/\/www.youtube.com\/watch?v=apl3zblFQmw<\/a>{\/youtube}<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

17.- Dise\u00f1o web adaptativo
C\u00f3mo adaptar tus dise\u00f1os para reproducirlos con \u00e9xito en distintos formatos y dispositivos.<\/p>\n

 La cosa empez\u00f3 con un art\u00edculo de Ethan Marcotte llamado<\/span>Responsive Web Design<\/a>, en la revista \u00abA List Apart\u00bb. De forma resumida, el art\u00edculo propon\u00eda una alternativa viable en un ambiente de dispositivos, navegadores, tama\u00f1os y orientaciones de pantalla en permanente evoluci\u00f3n, mediante la creaci\u00f3n de sitios web flexibles, fluidos y adaptativos. En lugar de dar respuesta a las necesidades actuales de una versi\u00f3n web de escritorio adaptada a las resoluciones de pantalla m\u00e1s corrientes combinada con una versi\u00f3n espec\u00edfica para m\u00f3viles (que en muchas ocasiones es \u00abespec\u00edfica\u00bb para un tipo \u00fanico de m\u00f3vil), su idea consist\u00eda en abordar el problema de otra forma: utilizar presentaciones flexibles y fluidas que se adapten a pr\u00e1cticamente todas las pantallas.<\/span><\/p>\n

Conceptos b\u00e1sicos<\/h2>\n

Hay tres caracter\u00edsticas t\u00e9cnicas que suponen el eje de un dise\u00f1o web con estas capacidades:<\/span><\/p>\n