1

Índice

Introducción 4

Capítulo 1. Diseño Web Responsivo 14

1.1 ¿Qué es RWD? 14

1.1.1 Conceptos precursores al término 15

1.1.1.1 A Dao of Design 15

1.1.1.2 Progressive Enhancement 16

1.1.1.3 Fluid Grids 17

1.1.1.4 Mobile First 18

1.1.2 Término por Ethan Marcotte 19

1.2 ¿Cómo funciona? 20

1.3 ¿Por qué se usa? 22

1.4 Ventajas 24

1.5 Desventajas 25

Capítulo 2. Partiendo del Concepto Básico: Flexible Layouts 27

2.1 Tipos de Layouts 27 2.1.1 Layout Fijo 28 2.1.2 Layout Fluido 30 2.1.3 Layout Elástico 32 2.1.4 Layout Hibrido 33

2.2 Implementación de Layouts 34 2.1.1 Mostly Fluid 34 2.1.2 Column Drop 35 2.1.3 Layout Shifter 36 2.1.4 Tiny Tweaks 36 2.1.5 Off Canvas 37

2.3 Frameworks 38 2.3.1 Ventajas y desventajas de su aplicación 39 2.3.2 Ejemplos de Frameworks 40

Capítulo 3. Aspectos Técnicos: Responsive para el Programador 42

3.1 Media Queries 42 3.2 Viewport 44 3.3 Medidas Relativas 46 3.4 Tipografía Flexible 47 3.5 Imágenes Flexibles 47 3.6 Optimización de Contenido 49

Capítulo 4. Aspectos Visuales: Responsive para el Diseñador

4.1 Interfaz 4.2 Menú 4.3 Imágenes 4.4 Tipografías 4.5 Iconos 4.6 Videos

2

Capítulo 5. Creación de un Sitio Web Responsivo

5.1 Pautas para la creación de un sitio web adaptable

Conclusiones

Imágenes seleccionadas

Lista de referencias bibliográficas

Bibliografía

3

Índice de figuras

Figura 1. Mostly Fluid Pattern

Figura 2. Column Drop Pattern

Figura 3. Layout Shifter Pattern

Figura 4. Tiny Tweaks Pattern

Figura 5. Ejemplo del layout Tiny Tweaks

Figura 6. Off Canvas Pattern

4

Introducción

El avance acelerado de la tecnología ha causado cambios considerables en la forma de

comunicarse. Actualmente, la mayoría de los aparatos electrónicos tienen acceso al

Internet, que es un medio un medio de comunicación relevante hoy en día.

A causa de la variedad de gadgets por los que se puede navegar, el diseño web tiene

que migrar a estas necesidades y diseñar sitios para los diferentes tamaños de pantalla.

Por tal motivo surge la exigencia, tanto para los diseñadores como los programadores, de

crear un diseño web multidispositvo que permitiese su buen funcionamiento.

El Diseño Web Responsivo como su nombre lo indica, es un diseño que responde a la

resolución de pantalla del dispositivo del cual se está navegando adaptándose a él según

sus dimensiones teniendo la posibilidad de ampliar, contraer o reestructurar su interfaz y,

a su vez, se optimizan sus contenidos para su correcta reproducción.

Desarrollar este tipo de sitos evita tener que hacer distintos diseños para cada una de las

resoluciones y trae como resultado una mejor experiencia de usuario con un uso más

práctico y accesible.

En la sociedad actual, cada vez son más los dispositivos y los usuarios que buscan un

rápido y fácil acceso a la red desde sus dispositivos móviles. Se estima que el futuro del

diseño web apunte en su totalidad hacia el desarrollo de páginas responsivas, es un tema

que comienza a surgir desde finales del año 2013 y actualmente ha tomado fuerza

convirtiéndose en una necesidad, de tal magnitud que Google ha comenzado a exigir a

los webmasters la optimización móvil, valorando aquellas que tengan una buena

usabilidad. Responsive se ha instalado en el mundo del desarrollo web y ha despojado a

todos aquellos sitios que no respondan a las necesidades del mercado actual.

El presente Proyecto de Graduación (PG) pretende servir como una guía para entender

los conceptos básicos y, posteriormente, poder desarrollarlos llevándolos a la práctica

con la creación de un sitio, tanto en aspectos técnicos como visuales.

5

Se elige éste tema por ser un proyecto de contenido actual que sigue evolucionando; así

también por la importancia del internet, el cual se ha convertido en una herramienta

esencial en el diario vivir.

El PG busca resolver la problemática ¿Cuáles son las pautas a seguir para la

construcción de un Sitio Web Responsivo?

El objetivo general es diseñar un sitio web multidispositivo que responda a los estándares

de diseño y comunicación, estableciendo las características técnicas y visuales para

poder lograr un sitio de calidad. Se tiene como objetivos específicos, fundamentar el uso

del diseño responsivo e investigar su funcionamiento, además de analizar las ventajas

que puede llegar a tener así como sus falencias, analizar y explorar las técnicas de

implementación de los layouts que permiten que el sitio pueda ser adaptable, explorar las

herramientas que se emplean para su buena reproducción basados en el lenguaje

HyperTextMarkupLanguage, versión 5 (HTML5) y Cascading Style Sheets versión 3

(CSS3), así también establecer los principios de diseño que demuestren como crear un

sitio que tenga una adecuada visualización y experiencia de usuario.

Éste PG se ubica en la categoría de Proyecto Profesional, ya que sea desea analizar la

necesidad social y de mercado para posteriormente llegar a conclusiones que permitan

crear un propio proceso de construcción y, con base a esto, culminar con la producción

de un sitio web adaptativo que pretende cubrir la necesidad detectada en la etapa de

investigación.

El proyecto se encuentra dentro de la línea temática de Medios y Estrategias de

Comunicación ya que se concentra en el desarrollo de múltiples estrategias de

comunicación online con el objetivo de posicionar empresas en los medios digitales, los

cuáles han modificado el modo de vida de los usuarios dentro del mercado de internet y

proponiendo al diseño web como una actualización que mejora el desarrollo corporativo.

6

Para poder realizar el presente PG se recurrió a una serie de antecedentes que tuvieran

relación con la temática de éste. La Facultad de Diseño y Comunicación cuenta con una

gran cantidad de publicaciones de contenidos innovadores y rigor científico como

Proyectos de Investigación, Tesis de Maestría, Proyectos de Graduación y, Actas y

Cuadernos escritos por alumnos y profesores de la Universidad de Palermo. Todo el

material antes mencionado sirve de consulta y apoyo. A continuación se mencionarán

diez de ellos relacionados a la línea temática del presente.

Reynoso, M. (2014). Multiplicidad digital. Proyecto de Graduación. Facultad de Diseño y

Comunicación. Buenos Aires: Universidad de Palermo. Éste PG se toma como

antecedente y como un referente bibliográfico para la realización del presente. Se trata de

un ensayo que hace referencia al uso de tecnologías para acceder a la red. Menciona

primeramente los datos técnicos a cerca de la composición de la estructura de un

website, posteriormente relata su evolución y uso actual, enfocándose en los sitios web

orientados a dispositivos móviles. Utiliza como caso de estudio, de igual manera que el

presente, al Diseño Web Responsivo, describe características de su uso y

funcionamiento para al final concluir destacando la importancia que éste tiene

actualmente. Se relaciona con éste PG ya que la temática central es la misma,

valiéndose de los fundamentos expuestos por la autora de este ensayo para después

llevarlos a la práctica. Se diferencia en que, al ser éste un Proyecto Profesional, se toman

las técnicas y conceptos de RWD, para desarrollarlos en un proyecto web que se

realizará en el transcurrir del mismo. Asimismo, pretende aportar pautas para su creación

tomando en cuenta al programador si dejar atrás al diseñador, es decir, crear un proceso

de diseño que contemple al diseñador y programador.

De la misma manera se describe a Salgueiro, G. (2013). Diseño de interfaces web

efectivas y usables. Proyecto de Graduación. Facultad de Diseño y Comunicación.

Buenos Aires: Universidad de Palermo. Como su nombre lo menciona éste maneja un

término básico en el mundo web, interfaz. Describe a ésta como un elemento de

7

interacción entre el sitio web y el usuario, tomándolo como un elemento relevante para

lograr que una aplicación sea exitosa. De aquí desprende y toma un concepto que se

maneja con mayor frecuencia en materiales digitales enfocados a internet, Experiencia de

Usuario o User Experiencie (UX), que se encarga de estudiar las interacciones entre el

usuario y sistema. La relación de ésta temática con respecto al presente, está vinculada

de tal manera que al hablar de RWD, en otras palabras y debido a su concepción básica,

se está hablando de una interfaz. Cuyo principal aporte y funcionamiento es la capacidad

que tiene ésta de adaptarse a algún dispositivo.

Una publicación que funciona también como material de apoyo es Zavala, W. (2005).

Pautas que hacen a un desarrollador web profesional. Reflexión Académica en Diseño y

Comunicación Nº VI. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de

Palermo. Éste escrito contiene las pautas básicas y esenciales que debe tener en cuenta

todo desarrollador web al momento de crear un sito. Establece aquellas que se deben

cumplir estrictamente si se quieren lograr las funciones de comunicación. Otorga

importancia a la UX y la usabilidad, menciona las premisas básicas para que un sitio

tenga probabilidades de alcanzar el éxito. Hace referencia a autores como Keith Instone,

Jakob Nielsen, Jeffrey Veen y Kali Romiglia, que mencionan que es el cliente quien

diseña la funcionalidad de un sitio y exigen a los desarrolladores sitios que les

proporcionen una buena experiencia.

Como ya se mencionó estos patrones de usabilidad, deben estar presentes en todos los

sitios. También es el caso del diseño web responsivo ya que se debe seguir tomando en

cuenta todas estas consideraciones como cimientos para crear un contenido dinámico e

interactivo que, aparte de ser usable, sea creativo sin olvidar los principios básicos del

desarrollo web.

Igualmente, se encuentra Zavala, W. (2011). Lo que hay que saber para desarrollar un

sitio web. Reflexión Académica en Diseño y Comunicación NºXVI. Facultad de Diseño y

Comunicación. Buenos Aires: Universidad de Palermo. Es una publicación escrita por el

8

mismo autor a la anterior y profesor de la facultad de Diseño y Comunicación, Wenceslao

Zavala. Profundiza sobre algunas cuestiones ya mencionados; la usabilidad como factor

importante de la UX y habla de ésta como la capacidad de una interfaz de generar

sensaciones y emociones positivas durante el proceso de interacción con quien la utiliza,

en este caso los usuarios, quienes son el principal objetivo e indicador de un sitio web

exitoso. Esto se logra, primeramente, facilitándoles la búsqueda de información y

después creando experiencias positivas al momento de navegar. Otro tema relevante

relacionado con esto es Search Engine Optimization (SEO) y la importancia de los

buscadores. Priorizar el crear un código limpio para que los buscadores, puedan indexar

y encontrar rápidamente el sitio que se está desarrollando, y a su vez, su buena

optimización para alcanzar un buen posicionamiento web. Éstos son temas que se deben

considerar en el ámbito web y toda persona relacionada a la creación de contenidos en la

red. Como menciona el autor, el diseño y el desarrollo son dos factores que deben de ir

de la mano, una página web no es sólo un buen diseño, sino también debe considerarse

una buena programación para, que aparte de que los buscares indexen el sitio, tenga

una correcta funcionalidad y usabilidad. El uso de multidispositivos fue un obstáculo

importante para poder lograr estos principios, es por eso que surgen distintas

alternativas para poder cumplirlos.

Otro antecedente es Cortez, D., De Bisschop, N., Pérez, J., Salvietti., (2006). Nuevas

tendencias en el diseño de páginas web. Creación y Producción en Diseño y

Comunicación Nº10. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de

Palermo. Éste articulo contiene un poco de historia relacionado con la invención del

internet y describe cómo han ido evolucionando las páginas web con el transcurrir del

tiempo. Compara los primeros sitios creados hasta los últimos y más innovadores que se

pueden encontrar en la red. Analiza todas las características de diseño presentadas en

su estructura, tanto de imágenes, colores, tipografías, figuras, proporciones y estructuras

9

que se han ido modificando día a día. Menciona las tendencias utilizadas en los sitios

actuales y cómo la percepción de los usuarios se ha ido modificando paralelamente.

El vínculo entre este tema con el PG se relaciona en la tendencia a ir modificando

principalmente en sus proporciones e interfaz, no sólo como una tendencia estética, sino

por las necesidades que los consumidores, la tecnología y los nuevos dispositivos

demandan.

Así mismo se expone a Alliey, L., Milagro, A. (2009). Diseño de la interfaz gráfica web en

función de los dispositivos móviles. Caso de estudio: diarios digitales. Cuadernos del

Centro de Estudios de Diseño y Comunicación Nº38. Facultad de Diseño y

Comunicación. Buenos Aires: Universidad de Palermo. El Cuaderno No. 38 del Centro de

Estudios de Diseño y Comunicación, contiene este proyecto realizado por Ana Milagro y

Luzardo Alliey, titulado Diseño de la interfaz gráfica web en función de los dispositivos

móviles. Este tema tiene una gran relación al del presente PG, el cual también su

principal prioridad es poder diseñar sitios web multidispositivos, tales como celulares y

tabletas.

El proyecto menciona la problemática y contradictoria hipótesis del crecimiento

vertiginoso que ha tenido el uso de dispositivos móviles y a su vez el poco y mínimo

acceso a la web a través de estos. Debido a que no se le ha tomado la importancia

requerida que los gadgets demandan y los desarrolladores muestran su poca

preocupación acerca del tema. Una posible alternativa a resolver esta problemática

mencionada por los autores es RWD propuesto por el presente PG, el cual pretende

indagar y llegar a una solución a la problemática presentada en éste antecedente.

Además, Méndez, S. (2011). Empresas online. Web 2.0: un nuevo medio de

comunicación entre las empresas y sus públicos. Proyecto de Graduación. Facultad de

Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Éste PG titulado

Empresas Online, consiste en aplicar técnicas de investigación científica que permitan

reflejar el conocimiento a través de un análisis crítico del impacto que se tiene con un el

10

uso de las Tecnologías de Información y Comunicación (TICs), de las empresas en línea.

Específicamente en herramientas de la web como; blogs, micro blogs y redes sociales

para las comunidades corporativas. Así también como un fenómeno de interacción de

usuarios con la tecnología y como herramientas, Wikipedia, Youtube, Flickr y blogs, micro

blogs como Twitter. El dilema o problema es en la interacción personalizada entre usuario

y empresa o la web y la empresa. Cuáles son los beneficios de uso de la web dentro de

un mundo globalizado, y el desconocimiento de su uso para empresas específicamente

en Argentina, por eso es el interés de estudio.

Al tratarse del mundo 2.0 y el de internet, este tema se vincula al propuesto en el

presente PG debido a que las empresas necesitan un plan de comunicación completo

para poder lograr los objetivos de difusión. Un buen plan de comunicación, implica el uso

adecuado de redes sociales y un sitio web multiplataforma. Así como las redes sociales

adaptaron ya sus sitios para poder ser vistos desde distintos dispositivos. ¿Por qué los

sitios web no deberían de hacerlo?

En siguiente lugar Muguillo, M. (2011). Mobile Marketing nueva herramienta de

comunicación. El teléfono móvil y la publicidad. Proyecto de Graduación. Facultad de

Diseño y Comunicación. Buenos Aires: Universidad de Palermo. María Julia Murillo

autora del PG menciona y destaca el uso de celulares como principal herramienta de

comunicación publicitaria actual. Se analiza el mercado, la nueva especie de usuarios y

consumidores, tomando en cuenta que éstos son cada vez más selectivos y exigentes

con aquello que quiere mostrar una pieza publicitaria. Se introduce al Mobile Marketing

como elemento que surge consecuentemente de la evolución tecnológica enmarcada por

la telefonía celular. Se estudia el mercado actual el cual se busca explotar mediante el

estudio de su consumo.

En el presente, se plantea al diseño responsivo como un método de diseño de sitios web

que son una publicitaria para dispositivos móviles y, que de igual manera a la publicación

11

ya mencionada, abastece a esos consumidores actuales que se encuentran en la

búsqueda incesante de la innovación.

De la misma manera Machese, J. (2010). Web 2.0 y la nueva audiencia activa. Ensayos

Contemporáneos. Proyecto de Graduación. Facultad de Diseño y Comunicación. Buenos

Aires: Universidad de Palermo. El objeto de estudio del PG es, como su nombre lo

indica, la Web 2.0 cuya principal característica es convertir al usuario en agente social

activo, participando en la generación de contenidos de un sitio. Al ser el público el

autogestor de contenidos, el usuario puede crear contenidos desde cualquier

instrumento, ya no sólo desde una computadora, sino a partir de una tablet o un celular, y

a su vez pretende que éste pueda ser visualizado de una manera óptima en cualquier

otro aparato. Aquí es donde radica, lo que ya se ha mencionado, la trascendencia que

puede llegar a tener un sitio web perteneciente al mundo 2.0 si éste tiene la capacidad de

adecuarse a cualquier dimensión de pantalla.

Para finalizar Valverde, J. (2011). Impreso vs. Online. Proyecto de Graduación. Facultad

de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Es una investigación

que consistió en determinar las fortalezas y debilidades de lo impreso y lo online o digital,

debido a las exigencias de los profesionales. La línea temática de investigación es la

vertiginosa revolución en los avances de la tecnología, como la creación de nuevos

dispositivos, la demanda y su consumo, siendo la web, la más importante y revolucionaria

fuente de información instantánea, cambiando notablemente los medios de

comunicación. El proyecto consiste en la realización y comparación minuciosa del diseño

editorial de una versión en papel y otra digital del diario La Nación, considerando seis

elementos gráficos; la grilla o estructura, la tipografía, el uso de márgenes, las

misceláneas y el color empleado y el reparto de blancos. Se desarrolló el ensayo del

diseño editorial mediante una configuración visual, favoreció la comparación del lenguaje

gráfico y digital. Por lo que los medios de comunicación y los diseñadores, tienen el gran

12

reto y desafío de adaptarse a tan acelerados cambios que atraviesan, requiriendo de

adaptaciones constantes de los contenidos.

Los antecedentes funcionan como elementos de apoyo para conformar el marco teórico y

confeccionar el diseño metodológico. De esta manera se puede establecer la información

necesaria que conforma el presente PG para profundizaren ella y así cumplir con los

objetivos específicos y generales planteados.

El presente Proyecto de Graduación consta de cinco capítulos; en el primero se define

que es el Diseño Web Responsivo y sus diferencias con los distintos métodos diseño

web. Se nombran sus principales atributos y conceptos básicos, definiendo cada una uno

de ellos y la importancia de estos para que el sitio funcione adecuadamente en cualquier

aparato. A su vez, explica cómo surge la necesidad de crear este tipo de diseño como

una alternativa de diseño multidispositivo, analizando al usuario actual y sus

necesidades. Se menciona al internet móvil y la variedad de dispositivos desde los que,

hoy en día, se puede acceder a la red. Se concluye examinando sitios web responsivos

marcando sus ventajas y desventajas.

El segundo capítulo se orienta a un concepto básico y elemental que hace que el RWD

funcione, los layouts o grilla de contenido. Se desarrolla en todo un capitulo ya que se

explica los tipos de layouts que pueden existir, sino también ejemplifica las distintas

maneras en que pueden ser implementados proporcionando opciones de funcionamiento

de los sitios web. A su vez se analiza y explica el funcionamiento de los frameworks, una

herramienta que se implementa actualmente en la construcción de estructuras

adaptables.

En seguida, el tercer capítulo trata sobre las funciones técnicas de este tipo de diseño. Se

desarrolla una guía para el programador sobre los aspectos a considerar al momento de

programar. Abarca todos los aspectos de código que ayudan a la creación del sitio

responsivo conociendo las distintas técnicas y herramientas para implementar la interfaz.

13

El cuarto menciona los aspectos visuales, comienza con la creación de la interfaz, y a su

vez del layout, para que exista una buena UX desde cualquier aparato. Se diseñan las

interfaces para las distintas resoluciones de pantalla considerando el concepto Mobile

First. Se mencionan los elementos que ayudan a que el contenido pueda estar

optimizado y reproducido de la mejor manera y se exploran las nuevas tendencias del

diseño web.

Para finalizar el PG se crea un sitio web responsivo, en el último capítulo, estableciendo

las pautas que se deben seguir para que sea elaborado. Se plantea un proceso de

diseño, desde objetivo general del proyecto hasta su lanzamiento. Se proponen

recomendaciones a la hora de crear el sitio web y se enfoca en reunir los aspectos

técnicos y visuales, en su debido orden. Se realizan los objetivos propuestos y analizados

durante todo el proyecto en cuestiones de diseño, usabilidad y experiencia de usuario.

El contenido que se eligió se vincula con la carrera de Diseño de Imagen y Sonido debido

a que se trata de un medio de comunicación multimedial, que hace uso de imágenes y

mensajes visuales en soporte digital, para crear diseños teniendo en cuenta las

estrategias comunicativas y estéticas. Los aportes que proporciona este tema en relación

a la carrera ya mencionada, es marcar las pautas para la construcción de un sitio web

responsivo, sino también darse cuenta que el internet ya no está solamente en las

computadoras de escritorio sino en más dispositivos móviles y debido a esto buscar

alternativas que permitan estar al alcance de la tecnología y el comercio actual.

El diseño web se encuentra en constante crecimiento, por tanto, todas las personas que

se encuentran sumergidas en esta área deben de estar en incesante investigación

innovadora y práctica diaria. Se debe adaptar a los frecuentes cambios y desarrollar

habilidades técnicas y de diseño para crear completas experiencias digitales para los

usuarios.

14

Capítulo 1. Diseño Web Responsivo.

A lo largo de este primer capítulo se introduce al lector a conocer a fondo la temática

centrar de este PG, se hace un proceso de investigación en que se estudia con

profundidad al Diseño Web Responsivo o Responsive Web Design (RWD) según las

siglas en inglés. Primeramente se define el término, investigando su origen de acuerdo a

algunos conceptos que sirvieron como precursores para poder desarrollarlo, pasando

desde sus primeros indicios desde que John Allsopp comienza a hablar de las diferencias

entre el diseño impreso y el digital, hasta que se establece el término cuando Ethan

Marcotte lo concreta como una nueva filosofía de diseñar. Posteriormente se conoce la

herramienta, determinando cuál es su función y definiendo sus principios básicos. Una

vez expuesto esto se realiza un análisis de su uso, justificando su implementación de

acuerdo al análisis del al avance de la tecnología, los dispositivos móviles y los hábitos

del usuario actual. Para concluir, se realiza una observación en el mercado exponiendo

las ventajas y desventajas de su implementación.

1.1 ¿Qué es RWD?

El RWD es una filosofía de diseño web a la que se originó a partir del trabajo de

profesionales en busca de una solución a dificultades técnicas que, generalmente, se han

ido planteando según variaban los hábitos de los usuarios y la tecnología.

Como ya se mencionó en la introducción del éste PG, se trata de un diseño

multidispositivo que tiene como objetivo responder a la resolución de pantalla, teniendo

como principal cualidad la capacidad de adaptación. Esto es posible de acuerdo a

algunas técnicas de desarrollo web que permiten crear una interfaz flexible que, a su vez,

permite optimizar sus contenidos para su correcta reproducción en los dispositivos

móviles con los que se cuentan hoy en día.

15

1.1.1 Conceptos precursores al término.

Para poder llegar a un concepto, generalmente existen una serie de antecedentes que

dan origen a su creación. Tratando de entender de mejor manera el RWD, el presente PG

hace un paso por algunas ideas que surgieron con antelación, que originaron algunas

problemáticas que engloban este tema y ayudan a conocer de mejor manera sus

características.

Si bien RWD es un término que surgió en los más recientes años, tiene sus orígenes

desde varios años atrás. Durante la primera década del siglo veinte surgieron una serie

de conceptos que buscaban resolver problemáticas técnicas presentadas en el mundo de

la web. Entre ellas surgía la complicada tarea que se enfrentaba un diseñador al crear

para medios digitales y no impresos, de similar manera se trataba el problema de la

incompatibilidad de navegadores, así como, a partir de la inclusión de los dispositivos

móviles, la necesidad considerarlos como primer lugar al momento de diseñar y de crear

disitintos sitios web para cada una de las resoluciones. A continuación se desarrollaran

cada uno de estos conceptos en orden cronológico ascendente, para comprender como

surge el termino RWD.

1.1.1.1 A Dao of Design.

En el año 2000 John Allsopp expone las diferencias que hay entre el diseño impreso y el

diseño web en un artículo titulado A Dao of Web Design. De acuerdo a la comparativa

que hace entre lo impreso y lo digital Allsopp (2000) plantea las dificultades que tiene el

diseñador cuando se trabaja en un medio como la web. Se comienzan a tomar los

conceptos del diseño web responsivo, descubriendo que en los medios digitales se

enfrenta a diferentes variables como dispositivos con distintas capacidades, tamaños de

pantalla, orientación de las mismas, entre otras cosas que no están en el control del

diseñador. Caso contrario a lo que sucede cuando se diseña para medios impresos,

donde se saben las medidas de manera concreta. Se plantea que el diseñador debe

16

tener la capacidad de adaptarse debido a que en el diseño web existen una cantidad de

variables que pueden modificar el diseño.

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things. [El control que los diseñadores conocen en el medio de impresión, y, a menudo desean en el medio web, es simplemente una función de la limitación de la página impresa. Debemos aceptar el hecho de que la web no tiene las mismas limitaciones, y el diseño de esta flexibilidad. Pero primero, hay que ‘aceptar el flujo y reflujo de las cosas.’]. (Allsopp, 2000).

En un artículo titulado Ethan Marcotte on how responsive web design came about

publicado por el portal web Creative Bloq establece que Marcotte se refiere a dicha

publicación de la siguiente manera:

…we should take the web on its own terms and stop defining it by the physical boundaries of the printed page. The industry kept having this discussion about when it was 'safe' to upgrade the width of our designs. [John's article] urged us to think about making designs that followed the shape of the browser, to letting the user's preferences take hold”. […debemos de tomar la web en sus propios términos y no definirla más por los límites físicos de la página impresa. La industria siguió teniendo esta discusión acerca de cuando era ‘seguro’ para actualizar el ancho de nuestros diseños. El artículo nos impulsó a pensar en hacer diseños que siguieron a la forma del navegador, para dejar que las preferencias del usuario se apoderen.] (Ethan Marcotte on how responsive web design came about, 2014)

De acuerdo a esta publicación se daban los primeros pasos a pensar de manera fluida y

ver al diseño para medios digitales como un nuevo enfoque. Está impulso a varios

diseñadores a salirse del entorno impreso y demostrar que la web podría ser un medio

poderoso el cual debería ser aprovechado de mejor manera.

1.1.1.2 Progressive Enhancement.

Posteriormente Champion (2003) propone una filosofía llamada Progressive

Enhancement, la cual surge a partir de otro concepto llamado Graceful Degradation el

cual establece que los usuario con navegadores más actuales tengan un cierto nivel de

experiencia, pero también permite ser usado con navegadores antiguos ofreciendo un

nivel bajo en su experiencia de usuario.

17

Al cual Kadlec se refiere de la siguiente manera: “El concepto no es especialmente

amigable con el futuro. Muestra una falta de respeto a los usuarios de navegadores más

antiguos e ignora la creciente realidad de que hay nuevos dispositivos móviles, que

también cuentan con navegadores menos capaces” (2012, p. 15). En cambio, la mejora

progresiva propone que se comience con una base usable para todos y se incrementa la

riqueza de la experiencia para quienes utilicen mejores y modernos medios de acceso, a

su vez se promueve hacer mejoras técnicas en los sitios web cada vez que un navegador

sea actualizado garantizando así que se mantenga técnicamente a la vanguardia.

Para que pueda existir una mejora progresiva se deberían cumplir algunos parámetros

como que el diseño web debe permitir el acceso correcto a todo el contenido de la página

independientemente del navegador y su versión del cual sea visitado. Una vez cumplida

esta consigna establece que se deben utilizar instrucciones moderadas del lenguaje CSS,

primero creando las reglas principales que puedan ser soportadas por todo navegador y

posteriormente pensar en aquellas que sean soportadas por navegadores modernos y

justificando su uso con una mejor experiencia para el usuario.

1.1.1.3 Fluid Grids.

De acuerdo a estos dos planteamientos propuestos tanto por Allsopp como por

Champion, se ponían sobre la mesa dos de los aspectos fundamentales que hacen que

una web no pueda ser vista adecuadamente, la resolución de pantalla y los navegadores.

Son dos variables a las que se enfrenta el RWD, la primera debido al avance de la

tecnología y la a numerosa cantidad de tamaños de pantalla con la llegada de los

dispositivos móviles y la segunda, visto desde la parte técnica, a la discapacidad de los

navegadores de estandarizar reglas de comportamiento para que puedan ser

reproducidas los sitios por igual en cualquiera de ellos.

Marcotte (2009) comienza a entrar en el tema y pública un artículo titulado Fluid Grids

donde define el concepto de Diseño Fluido, como solución a la adaptación de pantalla a

18

cada dispositivo. La propuesta de Marcotte radica en el uso de medidas relativas y no en

tamaños definidos en pixeles sino en porcentajes para que de esta manera el sitio tenga

un contenedor que sea el 100% de la pantalla y los demás elementos se redimensionen

dependiendo de su resolución.

Actualmente Marcotte, se refiere a su publicación de la siguiente manera:

For a long time, fluid layouts were a nice-sounding theory, rather than something I'd be comfortable using on client projects. As a designer, there's nothing worse than maximizing a window on a huge monitor and seeing uncomfortably long lines of text. So it wasn't until media queries began gaining some traction, I started to realize you could have the fluidity and also preserve a little bit of control over it. [Durante mucho tiempo, los diseños fluidos parecían ser una buena teoría, en lugar de algo que estaría cómodo utilizando en proyectos de clientes. Como diseñador, no hay nada peor que la maximización de una ventana en un gran monitor y ver incómodamente largas líneas de texto. Así que no fue hasta que los media queries comenzaron ganando algo de tracción, empecé a darme cuenta que podría tener la fluidez y también preservar un poco de control sobre él.] (Ethan Marcotte on how responsive web design came about, 2014)

Como lo menciona el mismo autor Fluid Grids trajo un aporte que era el uso de medidas

relativas para que su estructura fuera elástica, pero se enfrentó al problema de que los

elementos que estaban en el contenido quedaban desproporcionados. Esta publicación

fue un buen inicio para Marcotte y comenzaba el reto de trabajar con medidas relativas

teniendo el control de ellas y sus elementos.

1.1.1.4 Mobile First.

En este mismo año nace un concepto básico para el diseño multidispositivo. Mobile First

fue escrito por Wroblewski (2009) en el cual expone su filosofía que es bastante simple,

diseñar pensando en primer lugar en los dispositivos móviles. Una de sus justificaciones

es debido a que un dispositivo móvil tiene menor ancho de banda que una computadora,

por lo tanto es conveniente centrarse primero en un diseño que tenga más limitaciones.

Por otro lado, el concepto se fundamenta en acelerado cambio en la manera de navegar

de los usuarios por lo que pretende llegar a mayor número de personas y optimizar su

contenido en algo básico y funcional. Como resultado se tendrán sitios más fáciles de

navegar y entender, con menor carga cognitiva y visual. Ahora, cada pieza de

19

información, cada enlace, debe ganarse su lugar. Esto ayuda a priorizar contenidos y

funcionalidades eliminado lo innecesario: las páginas son más cortas y sencillas y la

navegación más racional.

La metodología Mobile First para RWD ayuda a que las páginas sean más accesibles,

favorece a todos los usuarios, pero sin duda especialmente a los usuarios con

discapacidad cognitiva, a los usuarios que utilizan lectores de pantalla o a los usuarios

que tienen una discapacidad motora y utilizan dispositivos de entrada alternativos.

1.1.2 Término por Ethan Marcotte.

Las publicaciones anteriores dieron pie a que Ethan Marcotte sentara las bases técnicas

y conceptos básicos del diseño web responsivo escritos en su libro Responsive Web

Design en el año 2010, es aquí cuando se le atribuye el concepto. Dicha publicación

funciona como referente bibliográfico para el presente PG debido a que es la primera

publicación en la que se define a este tipo de diseño. Marcotte se basa en los principios

de Arquitecture Responsive para crear un nuevo concepto de intercambio de información

continuo y constructivo.

Recientemente, una disciplina emergente llamada ‘Arquitecture Responsive’ ha empezado a preguntar cómo pueden espacios físicos responder a la presencia de personas pasando por ellos. Mediante una combinación de robótica y materiales elásticos, los arquitectos están experimentando con instalaciones de arte y estructuras en paredes que se doblan, flexionan y expanden conforme las multitudes se acercan a ellas. Se pueden sincronizar sensores de movimiento con sistemas de control climático para ajustar la temperatura de una habitación y la luz ambiental con base en la cantidad de personas que ocupan la misma. Hay empresas que ya han creado “tecnología de vidrios inteligentes” que se opaca automáticamente cuando los ocupantes de una habitación llegan a un límite determinado, brindándoles una capa adicional de privacidad. (Marcotte, 2011, p.9)

En esta cita explica la relación que existe entre los espacios físicos y la manera en la que

serían influenciados por las personas que los habitan. Por ejemplo, si se transporta este

pensamiento en términos de la de la web, se busca que el diseño tanto del espacio dela

presentación y los contenidos estén vinculados. Independientemente de las técnicas y

20

conceptos relacionados a la web, el libro menciona a RWD como una nueva forma de

pensar sobre el diseño en general,

Se puede concluir estableciendo que el Diseño Web Responsivo es una filosofía, un

nuevo enfoque, cuyo objetivo es solucionar los problemas ocasionados por la diversidad

de resoluciones y dispositivos. A diferencia de otras metodologías de diseño que

pretenden resolver la misma problemática, RWD busca ser una solución única, es decir,

no tener que desarrollar un sitio web para cada resolución de pantalla, tipo de dispositivo

e inclusive orientación del mismo. Este enfoque tiene como objetivo central ocasionar en

el cliente una buena experiencia de usuario, considerando sus nuevas prácticas en la red,

y su manera de navegar por medio de distintos aparatos.

1.2 ¿Cómo funciona?

Una vez definido el concepto de Diseño Web Responsivo, se profundizará en cómo

funciona esta forma de diseñar y desarrollar sitios multidispositivo.

Como ya se mencionó, su función principal consiste en cambiar la apariencia de un

diseño. El sitio web necesita modificarse ya sea colapsando, adaptando e incluso

ocultando contenido para que se pueda visualizar en cualquier tamaño de pantalla, para

poder lograr esto se utiliza el mismo lenguaje de programación que cualquier otro tipo de

desarrollo web, se refiere a los lenguajes básicos como lo son HTML5 y CSS3. Aunque

cabe mencionar que la clave radica en las hojas de estilo, es aquí donde se logran alterar

los aspectos técnicos para su adecuada adaptación. Las hojas de estilo sirven para darle

presentación a cada elemento que se tiene en las páginas web y de esta manera

modificar la apariencia tanto de su estructura como del contenido.

Con anterioridad se solían realizar dos web en paralelo, una para la computadora y otra

para los dispositivos móviles. En un principio parecía ser una solución eficaz a los

primeros problemas que surgieron con la aparición de la red móvil, pero posteriormente

se percataba que requería más esfuerzos y recursos para poder ejecutarla. En cambio,

21

Marcotte (2011) menciona que RWD se basa en la construcción de un solo sitio como

solución única a todas las variables de aparatos, de esta manera no es necesario

redirección el trafico proveniente de los móviles a otro directorio y propone hacer un

desarrollo basado en prácticas de flexibilidad, fluidez.

En seguida se mencionara conceptos básicos para poder comprender el funcionamiento

un sitio web responsivo para posteriormente, en el capítulo 3, poder describir y desarrollar

cada uno de estos detalladamente.

En su libro, Marcotte (2011) explica que la implementación de RWD tiene tres principios

básicos. El primero se trata de crear un diseño web fluido, se basa en la creación de

layouts definidos en porcentajes que se ajustan a los anchos de la pantalla. Desde la

aparición de la web se acostumbraba a tener valores absolutos expresados en pixels, se

utilizaban las mismas premisas y reglas que se ejecutan en los medios impresos, pero

como describe Allsopp ha llegado la hora de evolucionar y entender que los medios

digitales exigen sus propias principios a la hora de diseñar.

El diseño fluido consiste en ajustar el tamaño de su dimensión horizontal de manera

automática, tiende a ocupar todo el ancho de la pantalla sin importar cuál sea el

dispositivo donde sea visualizada, para poder lograrlo todos los elementos tienen

distintos valores expresados en porcentajes que al sumarlos logren ocupar el 100% de

tamaño horizontal del monitor de esta manera se garantiza que sus proporciones se

mantengan iguales.

Después habla sobre un segundo concepto que se refiere a los contenidos que van

dentro de los layouts, estos pueden ser fuentes, imágenes y elementos multimedia.

Para poder posicionar estos elementos se sugiere mantener el concepto del diseño fluido,

es decir, utilizar valores relativos tanto para sus dimensiones como su posicionamiento.

En el caso de las imágenes se propone manejar sus medidas en porcentajes, mientras

que en las tipografías en una unidad de medida llamada em, el nombre de em está

relacionado con la letra M originalmente, la unidad se deriva de la anchura de su letra

22

mayúscula en el tipo de letra dado. Ésta medida se caracteriza porque su valor está en

relación al tamaño de su contexto.

Y por último menciona a los Media Queries que ofrece CSS3 permitiéndo aplicar estilos

condicionalmente teniendo en cuenta parámetros de la pantalla. La implementación de

este recurso está orientado a configurar el alto, ancho y resolución dependiendo de las

características del dispositivo desde donde se consulte el sitio.

1.3 ¿Por qué se usa?

Con la llegada de los Smartphones cambio el modo de comunicarse y navegar por

internet, esto suponía un reto importante ya que cambiaban los paradigmas acerca del

uso de la red a través de una computadora. A partir de este hecho surge un crecimiento

exponencial del uso de estos dispositivos y fue tomando cada vez más importancia el

pensar en comunicar a través de este medio. De acuerdo con Kemp (2015) en el informe

Digital, Social & Mobile Worldwide in 2015 el año 2014 fue un año clave para el

crecimiento del mercado digital. Según su estudio revela que actualmente el 42% de la

población mundial tiene acceso a internet, la red móvil logró superar el 50% de los

usuarios activos en el mundo representado en 3.649 millones de aparatos, desplazando

al mercado de las computadoras de escritorio. Sus estadísticas revelan que inclusive a

finales del año 2014 el número de usuarios con conexiones móviles activos supero la

población total del mundo. Además, se vendieron 1.245 millones de Smartphones en el

mundo, estimando que para el año 2020 estos serán los responsables del 80% del tráfico

en la red.

De similar manera, el artículo Revolución Móvil: los usuarios y el negocio viven en los

Smartphones publicado por el diario La Nación, afirma que actualmente el acceso a la red

a través de dispositivos móviles en Argentina ha incremento debido a que el 84% de los

celulares son Smartphones. Actualmente en el país siguen siendo más los usuarios que

23

acceden a la red a través de una computadora pero se estima que a finales del año 2016

esto cambie y el mercado mobile sea el que domine el tráfico en internet.

Como las estadísticas lo avalan el mercado ahora se encuentra en la red móvil debido a

su drástico crecimiento siendo éste el que hoy en día, tiene más tráfico y numero

usuarios, ahora las empresas buscan impactar en él, ya que pretenden llegar a la

mayoría de sus consumidores. En pleno año 2015, sería desacertado pensar en tener un

sitio web que no sea adaptable a dispositivos móviles. Y aún más ahora que Google está

evitando mostrar los sitios web que no cuenten con un diseño adaptativo, con esta

actualización del algoritmo, resulta una exigencia para poder posicionar un sitio en el

buscador que a la vez impulsará el desarrollo para múltiples pantallas. Inclusive su no se

adoptan las medidas requeridas se podría correr el riesgo de desaparecer de las

primeras posiciones del buscador Google. Con esto se busca garantizar la experiencia,

usabilidad y navegabilidad.

El Diseño Web Responsivo se usa por éstas dos principales razones, los usuarios están

invadiendo la red móvil y se pretende llegar a ellos, una vez que se llega a ellos se

procura mantenerse y perdurar. Como se mencionó anteriormente RWD es una nueva

forma de pensar el diseño que busca principalmente la adaptación, y en ese proceso se

debe entender al público actual como un nuevo usuario que con el uso de gadgets se

convirtió en un nuevo estilo de vida, transformando su comportamiento y su necesidad de

mantenerse siempre comunicado. Por lo tanto, está técnica de diseño se crea para

brindar una buena experiencia de usuario proporcionando todas las herramientas

necesarias para que se pueda navegar cómodamente, adaptándose no solo al

dispositivo, sino principalmente al usuario moderno, contemplando que sus hábitos han

cambiado, que éste ahora busca el fácil y rápido acceso a la información.

24

1.5 Ventajas.

El Diseño Web Responsivo aporta distintas ventajas a la hora de implementarse. Sin

embargo, estas ventajas pueden apreciarse desde distintos roles o perspectivas dentro

del desarrollo web.

La primera de las ventajas, a nivel empresarial, es la reducción de costos en el desarrollo,

ya que el objetivo es único y claro con una sola implementación válida tanto para

dispositivos de escritorio como para móviles. La creación de webs específicas para

dispositivos aumenta el costo de desarrollo. Sin embargo, un solo desarrollo de un portal

web accesible desde cualquier dispositivo es bastante más barato.Por ejemplo, como no

es necesario alojar distintas versiones de la web no es necesario ser propietario de

distintos dominios o el coste adicional de desarrollar una aplicación móvil.

Otra ventaja que aporta es la gran eficiencia a la hora de realizar los procesos de

mantenimiento y actualización del contenido, ya que con un solo cambio se podrá ver

reflejado en todos los dispositivos. Sin embargo, si se poseen distintos desarrollos para

cada plataforma se deberá realizar este proceso pudiendo provocar posibilidades de error

e inconsistencia además de un consumo mayor de recursos. Si desea realizar un cambio

en la identidad corporativa del negocio y desear cambiar el color principal de la página

web, con RWD solo sería suficiente con modificar CSS, mientras que con distintas

versiones se deberían modificar todas las hojas de estilos todas las webs o aplicación

móvil.

Lo que todos los estudios reflejan es la mejora de la usabilidad, ya que la navegación por

parte del usuario es mucho más cómoda, adaptándose la web al medio correspondiente

facilitando la navegación. Además a nivel de consumo por parte del cliente provoca un

gran impacto ya que se suele asociar el desarrollo con grandes niveles de creatividad e

innovación tecnológica.

Otras de las ventajas, dejando aparte la usabilidad y la interacción, se trata del

posicionamiento web. Este tipo de desarrollos ayudan al posicionamiento de la web en

25

los rankings de buscadores debido a sus características. Una de ellas se trata de poseer

una única Uniform Resource Locator (URL), ya que cuando se fragmentaron los

desarrollos para diversos dispositivos se emplearon distintos dominios o subdominios

para la versión correspondiente, no estando los desarrollos alineados a nivel de SEO.

Ahora se puede emplear una URL para todos los soportes que aporten la centralización

de todo el tráfico para poder manejarlo de manera eficiente, creando informes reales del

tráfico producido obteniendo una visión completa de todo el tráfico y acumulando todos

los enlaces o pageranks. Además todas las acciones que sean necesarias que desee

tomar el SEO para posicionar la web serán mucho más productivas si las desarrolla sobre

una sola web que si se tiene que hacer con varios.

Además otro ejemplo, es que antes cuando un usuario accedía a una web a través de un

dispositivo móvil y compartía una URL esta llegaba a una serie de usuarios que no

obligatoriamente deben de estar en un medio móvil. Para solucionar este problema era

necesario crear redirecciones que dirijan a los clientes hacia el sitio web

adecuado respecto del dispositivo conectado para no perder la experiencia de usuario.

Ya que con RWD todos los dispositivos acceden a una misma dirección, ya no son

necesarias las redirecciones. Además el acceso a la web desde un Smartphone permite

como desarrolladores web sacar beneficio de las tecnologías móviles explotando

funcionalidades como la geo localización y los eventos táctiles.

1.6 Desventajas.

Como todas las tecnologías el Diseño Web Responsivo también tiene sus falencias que

se deben tener en cuenta a la hora de implementar esta filosofía.

Uno de los problemas que puede repercutir en RWD son los tiempos de carga, ya que el

usuario debe descargar todo el código fuente, aún sin ser necesario, e incluso si el diseño

no está optimizado con imágenes adaptadas a distintas resoluciones, debe descargar

imágenes de gran resolución sin ser necesario, sino simplemente reescala pero mantiene

26

el mismo peso que tenía lo que hace que el tiempo de carga aumente en gran medida.

En un dispositivo móvil la espera en los tiempos de carga se ve afectada en la

experiencia del usuario en el sitio web. De un lado factores como el tipo de conexión en el

que se encuentra el usuario en el momento, si es 3G o Wifi, y de otro la optimización del

contenido del sitio afecta al peso y tiempo de carga.

Aunque se han comentado las ventajas SEO, también presenta desventajas, ya que las

descripciones en títulos, imágenes y contenidos son comunes tanto para usuarios de

dispositivos móviles como no, siendo distinto el objetivo de las palabras claves en

búsquedas móviles como búsquedas desde computadoras de escritorio.

Aunque aporta ventajas para el desarrollador web, también éste debe de emplear más

tiempo en optimizar el diseño para las distintas resoluciones respecto de un

desarrollo web no responsivo, el tiempo de desarrollo es mayor que con otros modos, ya

que no lleva mucho tiempo y, aunque la tendencia se está instaurando muy rápidamente,

no está estandarizado al 100%, como barrera de entrada aún no hay muchos expertos

que dominen este desarrollo completamente.

Actualmente otra desventaja que se podría presentar son los costos, hay menos

empresas especializadas y por ello son más caras, los costos de actualización y de

mantenimiento también son mayores, de similar manera los tiempos para la creación del

sitio puede alargarse más de lo esperado. Se podría llegar a pensar en un plan b si no se

dispone de recursos económicos ni temporales para contar con una web adaptada al

dispositivo móvil.

27

Capítulo 2. Partiendo del Concepto Básico: Flexible Layouts.

En el presente capitulo se pretende explicar el funcionamiento de los layouts, el primer

concepto fundamental que establece Marcotte y los cuales son la base estructural del

RWD, se reconocerán los tipos de layouts existentes así como la implementación y

funcionamiento de los mismos, para finalizar el capítulo se investigara es uso de

frameworks como un recurso usado contantemente para poder desarrollar sitios web

responsivos.

Los layouts suelen utilizarse para nombrar al esquema de distribución de los elementos

dentro un diseño. Es habitual que un diseñador que se dedica a la creación de páginas

web desarrolle un layout, wireframing o prototypado que no es más que una especie de

croquis que muestra tablas o espacios en blanco, con la finalidad que a partir de éste la

página web comience a desarrollarse con sus contenidos específicos. Si se traslada este

concepto a términos de arquitectura, como ejemplificaba Marcotte, el layout sería el plano

de una casa donde se marcan todos y cada uno de sus espacios. Y de acuerdo a su

ideología de ver al diseño responsivo como una nueva forma de pensar el diseño se llega

a la necesidad de crear estructuras que puedan flexibles y tengan la capacidad de

adaptación.

De similar manera Allsop (2000) reconoció que la flexibilidad es lo que convierte a la web

en un medio único y de mayor potencia que los medios impresos. Anteriormente los

layouts en la web eran fijos, no se modificaban en sus dimensiones, tamaño y estructura,

sus medidas eran concretas. Es decir, se seguía pensando la web de la misma forma en

que se diseña una revista, solo diferenciándose que una era en un medio digital y sus

medidas eran expresadas en pixels, pero de igual manera se concebía a la web como un

soporte fijo, inclusive se estandarizaron medidas fijas que funcionaban como un lienzo

que no podía variar y era visible en todas las pantallas, tomando en cuenta que antes

solo se diseñaba para computadoras cuyos monitores tenían medidas muy similares.

Tuvieron que pasar doce años para que la industria finalmente tomara las ideas

28

propuestas por Allsopp y se comenzara a pensar en crear ideologías y fundamentos

propios para el diseño digital.

Actualmente el primer paso, si se busca lograr un diseño web responsivo, es dejar atrás

la idea de tener layouts fijos, y crear estructuras flexibles que responder a las

dimensiones del dispositivo.

Mickley (2009) en el libro Flexible Web Design define cuatro tipos de layouts: de ancho

fijo, liquido, elástico, e híbridos, siendo éste último la combinación entre cualquiera de los

anteriores.

2.1.1 Layout Fijo.

Éste es el que se ha venido usando por mucho tiempo en el diseño web, ya que

anteriormente los sitios eran visitados en su mayoría desde una computadora de

escritorio cuyos monitores tenían resoluciones relativamente parecidas, tales como 800

por 600 o 1024 por 768.

En un artículo titulado Optimal width for 1024px resolution? Escrito por Moll (2006)

sostiene que el salto de resoluciones de pantalla de 800 x 600 pixeles a 1024 x n se

había concretado en aquellos años. Por lo cual propone estandarizar los anchos de las

páginas web a esta resolución de pantalla, en un principio se hablaba de 974px como el

ancho ideal, posteriormente 984px hasta que se logró homogenizar en 960px que no era

un numero casual sino que era muy amigable al ser un numero divisible entre por 3, 4, 5,

6, 8, 10, 12 y 15 por lo que ofrecía una variedad de opciones de medición.

Una de las principales virtudes de trabajar con este tipo de layouts es que el diseñador

tiene más control sobre cada uno de los elementos, al tener una medida exacta como lo

son esos 960px que permiten delimitan la zona de diseño, se puede hacer la demás

composición con cálculos matemáticos para lograr dimensiones absolutas de todos los

elementos que van a conformar el sitio web. De esta manera se puede reproducir un

29

maquetado exacto a como se planea en un principio en la propuesta visual, logrando así

diseños que son más consistentes.

Si bien resulta una buena manera para producir sitios web que gráficamente pueden ser

muy firmes debido a la exactitud de sus medidas, maneja el mismo concepto que la forma

de pensar en diseñar para medios impresos, son fijos. En este caso se está limitando la

flexibilidad del diseño, marcando el lienzo sobre el que se va a trabajar por lo que origina

muchas limitantes que, hoy en día, proporcionarían una mala experiencia para el usuario

a causa de su nula capacidad de adaptación.

La mayor desventaja que presentan los layouts fijos son que el diseñador toma

decisiones con base va a varias suposiciones, principalmente sobre la dimensión de

pantalla de los visitantes. Antes podría ser un problema menor, ya que eran menos los

usuarios que tenían resoluciones de pantalla menores o mayores a la medida estándar.

Sin embargo ahora podría resultar una dificultad debido a la aparición de los dispositivos

móviles, por lo que tomar esa importante decisión implicaría limitar mucho el alcance del

sitio web.

Por ejemplo, considerando que el sitio está hecho con un contenedor de 960px, si uno

de los usuarios accedía a la página a través de un dispositivo con una resolución de

pantalla menor a 800px, éste solo podría visualizar una parte del sitio web y el navegador

colocaría unas barras de navegación horizontales y/o verticales que por lo generan poca

comodidad al momento de navegar. Por otra parte, si se ingresaba a la página desde

pantallas más grandes, también presentaba problemas. Si alguien con un gran monitor

viera el mismo sitio generaría un espacio en blanco alrededor del contenedor del diseño,

restando mucho espacio de trabajo desperdiciado y también visualmente no era bueno

como parte de un diseño

Estos obstáculos se presentaban considerando que el usarlo mantenía maximizada la

ventana de su navegador, ahora el pensar en que una persona podría tener el control del

tamaño de su ventana generaba más restricciones presentadas por este tipo de layout.

30

Actualmente la mayoría de los sitios que carecen de responsividad emplean este tipo de

layout que de acuerdo al dispositivo, como tablets y celulares, son ampliados o reducidos

en sus dimensiones con la finalidad de que quepan en la pantalla. Esto genera que todos

los elementos que se encuentran en él se modifiquen, presentando una problemática

cuando el texto es reducido de manera importante, siendo poco legible y el usuario se ve

obligado a hacer zoom y navegar de manera incomoda.

El tamaño del texto también puede variar dependiendo de la elección de los usuarios. El

tamaño de la tipografía que viene por default en casi todos los navegadores es de 16px.

Sin embargo, aunque en menor medida, el usuario es capaz de alterar este valor

generando un cambio importante en el diseño del sitio web. Aparte de modificar la

legibilidad del texto de acuerdo a su longitud de línea, ya que podría haber líneas de texto

muy largas o cortas que no favorezcan a la velocidad de lectura.

Los layouts fijos son buenos y de gran utilidad en ciertas situaciones, donde se necesita

una reproducción más exacta, precisa y constante de un diseño web. No se consideran

obsoletos, mucho menos cuando todavía muchos diseñadores los emplean, pero se les

tiene que dar utilidad solamente en los momentos adecuados. La principal desventaja

que presenta es que, como un nombre lo indica, se trata de un layout fijo, que de acuerdo

con el presente PG es algo que se busca superar para darle entrada a diseño flexibles y

dinámicos, que puedan abastecer las exigencias por el actual mercado digital.

2.1.2 Layout Fluido.

Este tipo de layout, a diferencia del anterior, utiliza medidas relativas. En estos sus

dimensiones están determinadas por porcentajes y no por pixels. De esta manera se

asegura que el diseño pueda ocupar el 100% del ancho de la pantalla, es decir, no

importa si el usuario está entrando al sitio desde una computadora de escritorio de

1024px o de un dispositivo móvil de 768px, los porcentajes harán que se ajusten al ancho

de la pantalla sea pequeña o grande.

31

Con este tipo de diseño fluido en muchas ocasiones se evitan las barras de

desplazamiento horizontal de la venta, dado que éste puede adaptarse a la anchura de la

ventana del navegador, de esta manera se evita que el público solo vea una parte del

sitio web o bien se elimina el espacio en blanco mostrado en un layout fijo en pantallas de

gran dimensión.

Sin embargo, aunque este tipo de diseño garantiza una estructura flexible que no pierde

proporciones y que puede ser visualizada en cualquier dispositivo sin importar su medida,

tiene un gran desventaja que son las longitudes de línea de texto. Las líneas de texto

pueden llegar a ser demasiado grandes si se está visualizado desde pantallas muy

amplias o bien demasiado cortos si lo vemos desde un celular. Como bien se mencionó

en el subtema anterior, la longitud de línea de texto es un elemento importante a tener en

cuanta ya que se debe garantizar que el visitante de la página web pueda leer la

información que se le esta proporcionado de manera cómoda.

Asimismo, otra debilidad que presenta se refiere a los tamaños de las imágenes,

generalmente sus mediadas están expresadas en pixels, que es una medida absoluta, Si

bien la estructura es flexible, su contenido no. Por lo que si una imagen es pequeña

cuando se vea en una pantalla grande dejara mucho espacio en blanco, en caso contrario

si la imagen es muy grande y se ve en un dispositivo de resolución pequeña, por más que

la estructura se acomode la imagen sobrepasa las dimensiones de la pantalla generando

las barras de desplazamiento. A causa de esta problemática se comenzó a poner las

imágenes como imágenes de fondo de un div o cuadro del layout, esta flexibilidad evita

que las barras de desplazamiento horizontal de aparecer y hace pleno uso del espacio de

la pantalla disponible en el dispositivo de cada usuario, sin embargo según la W3C no es

la forma correcta de colocar imágenes ya que están indexadas en el código CSS y no el

HTML, por lo tanto debilita la optimización del sitio y la posibilidad de que esta sea

indexado en los buscadores.

32

Los layouts líquidos funcionan en un rango más amplio de escenarios de visión,

Implementando estrategias RWD y apoyándose en media queries y CSS se puede

optimizar la visión para diferentes resoluciones, haciendo que este tipo de layouts sea

una buena estrategia. Sin embargo, también existen varios problemas que se deben

solucionar ya que todo esto no es suficiente para asegurar que el diseño se vea

adecuadamente tanto en un teléfono como en una televisión respetando las preferencias

de los usuarios de cómo les gusta ver la web.

2.1.3 Layout Elástico.

Como lo menciona Mickley (2009) los layouts elásticos funcionan de la misma manera

que los layouts fluidos, excepto que sus medidas están determinadas por el tamaño

tipográfico usando la medición em. Por ejemplo si el texto tiene un tamaño de fuente de

16px, un em correspondería con 16 pixels calculando los tamaños proporcionalmente.

Con este tipo de layouts se garantiza que la anchura del contenedor siempre mantenga la

longitud de línea apropiada, se erradican los problemas que presentaban los dos

anteriores. Y de esta manera las proporciones entre tipografía y tamaño del layout no se

pierden escalándose de manera proporcional en cualquier dispositivo.

Desafortunadamente, en éste tampoco se tiene el control total sobre las medidas ya que

al tomar medidas según la tipografía, ésta puede ser alterada por el usuario desde la

configuración del navegador, provocando un aumento o reducción importante en sus

dimensiones, de esta manera se puede presentar los mismo problemas de la barra

horizontal o espacios en blanco.

De similar manera que los líquidos, éstos varían sus mediciones en cuanto a estructura, y

en este caso tipografía, pero no en el de las imágenes, provocando que el diseño se

altere.

El gran benéfico que aporta es la capacidad de mantener proporciones intactas entre

estructura y tamaño tipográfico. Diseñar esquemas que permanecen proporcionales

33

pueden ayudar a una amplia variedad de personas y que estas pueden leer la

información de manera cómoda.

2.1.4 Layout Hibrido.

Por último está el hibrido el cual combina dos o más de los layouts anteriores. A

diferencia de que éste tiene la capacidad de mezclar tanto medidas relativas como

absolutas, es decir se pueden mezclar pixels con porcentajes o em.

La mayoría de los diseños web se construyen con la idea de columnas, si las columnas

son explícitamente visibles en el diseño. Cada columna puede tener su propia unidad de

medida y ser pensado en forma individual como fijo, líquido o elástico

Esta técnica se emplea generalmente cuando se necesita dar medidas fijas a alguna

columna que tenga elementos con medidas absolutas, por ejemplo cuando se quiere

insertar un anuncio en un sitio web cuyas medidas están estandarizadas y se deben

respetar.

Los diseños híbridos ofrecen más ventajas que los diseños de líquidos y elásticos. Pero

son a veces difíciles de construir debido a las matemáticas involucradas.

Debido a la mezcla de porcentajes con pixels surgen dos conceptos de CSS nuevos que

ayudan a manejar de mejor manera las dimensiones de los elementos; max-whidth y min-

whidth, estos permiten establecer límites en las medias, comúnmente se utilizar anchos

expresados en porcentajes pero están delimitados por la cantidad de pixels, por ejemplo,

para que una imagen no vaya a redimensionarse más de su tamaño original.

Una vez indagado sobre cada uno de los tipos de layouts que puede presentar una web,

se puede llegar a concluir que cada método tiene sus propias ventajas y limitaciones. En

el caso de diseñar un sitio web responsivo, ninguno de estos es el único e idóneo para

hacerlo. Aunque lo más probable es que se pueda de servir de recursos propuestos tanto

por el líquido, elástico e hibrido ya que se busca que la web sea flexible y no fija sin

capacidad de adaptación

34

2.2 Implementación de Layouts.

Estos tipos de layouts ya mencionados pueden tener distintas técnicas de

implementación. En un RWD éstas se refieren al comportamiento de su estructura

dependiendo de las variables en tamaños de pantalla.

Las técnicas a continuación mostradas fueron diseñadas por Wroblenski (2013) en un

artículo titulado Multi-Device Layout Patterns que publicó en su portal web. Éstas fueron

realizadas y categorizadas debido a una investigación que hace el autor acerca de los

patrones que se presentan con mayor frecuencia que se utilizan hoy en día en los sitios

web responsivos.

2.1.1 Mostly Fluid.

Dentro de todas las técnicas ésta se considera como el patrón predominante entre los

sitios web responsivos. Se emplea comúnmente en los frameworks, que son una

herramienta útil para desarrollar estructuras web y los cuales se detallaran más adelante.

Este patrón se basa en la cantidad de columnas que presenta de acuerdo al dispositivo,

generalmente en dimensiones pequeñas como la de un Smartphone se encuentran todas

las columnas, una por arriba de la otra, ocupando todo el ancho de la pantalla; y entre

más se agrande la dimensión del dispositivo estas se acomodan una del lado de la otra

tanto como el ancho del navegador lo permita. (Ver figura 1).

Cuando las pantallas son grandes o medianas, comúnmente se le suele agregar un

wrapper que es una especie de contenedor que define el ancho máximo de la estructura

del sitio web, esto se hace con la finalidad de tener más el control sobre los elementos,

por ejemplo para que las imágenes no accedan las dimensiones de su tamaño original.

Ésta consideración se toma de los típicos layouts fijos que muestran el contenido

centrado y delimita el espacio del diseño dejando espacios en blanco a los costados. De

acuerdo con esto se origina el nombre de mayormente fluido, ya que la estructura

principal de los layouts no cambia hasta que se llega a resoluciones pequeñas donde se

35

vuelve totalmente fluida y aplica la caída de columna, colocándose una debajo de la otra

y modificando su altura dependiendo de su contenido, es decir, entre más angosto sea la

dimensión de la pantalla el contenido se ira acomodando de manera vertical y su altura

será mayor.

Una de las mayores ventajas de este patrón es que, en general, solo se necesita un

punto de interrupción entre las pantallas grandes y las pequeñas. Se puede observar que

en cada salto de dimensión entre móvil, tablet y escritorio puede haber pequeños

cambios, ya sea de navegación, organización o quizás de contenido.

2.1.2 Column Drop.

En español el nombre de esta técnica es Ciada de Columna, el cual se nombró en el

tema anterior. Ésta se refiere también a un patrón multicolumna que funciona de similar

manera que el Mostly Fluid, donde las columnas también caen una debajo de la otra

hasta llegar a convertirse en una sola columna, pero a diferencia que las columnas no

son tan flexibles debido a que el tamaño de los elementos suele permanecer constante.

Es decir, tal vez una columna puede ser fluida mientras que otros permanece con

dimensiones fijas, se asemeja a lo que se conoció en temas anteriores como un layout

hibrido. (Ver figura 2).

Se puede notar esta diferencia en como las columnas se agrandan o no dependiendo de

los puntos de quiebre o breakpoints, tema que se verá con más detalle en el próximo

capítulo. Esta caída de columnas está determinada por el número de columnas y el

momento en el que el diseño pida espacio para una buena usabilidad.

36

2.1.3 Layout Shifter.

También conocido como Cambio de Layout a causa de que presenta más variaciones en

cuanto al diseño de su estructura dando la impresión de un cambio de layout de acuerdo

al dispositivo (Ver figura 3).

Aunque se adapta de manera adecuada a los distintos tamaños de pantallas puede llegar

a ser más complejo, por tal motivo es menos usado que los anteriores. Para desarrollar

este patrón se requiere de más tiempo y trabajo para ajustar todos los elementos a cada

una de las resoluciones y puntos de quiebre.

Debido a que está determinado principalmente por los breakpoints es menos fluido que

los anteriores, se pueden llegar a ver variaciones notorias entre un tamaño de pantalla y

otra, cambiando de manera importante jerarquías y posición de las columnas. Por

ejemplo una columna horizontal que en gran resolución ocupa todo el ancho de la

pantalla, puede variar de manera drástica en una pantalla menor colocándose de manera

vertical, como lo muestra el gráfico anterior.

A causa de sus considerables variaciones es más complejo de mantener los elementos

que se encuentran dentro de una columna intacta, y es posible que se deban realizar

cambios dentro de ellos, no solo en el diseño, sino de contenido general. Comúnmente

este tipo de layouts se jerarquiza la importancia del contenido y suele omitirse contenido

menos relevante en los dispositivos pequeños.

Se puede establecer que este patrón maneja dos técnicas explicadas en los temas

anteriores, en algunos casos el layout funciona como una caída de columnas mientras

que en otros se mantiene la organización pero fluyendo el contenido proporcionalmente.

2.1.4 Tiny Tweaks.

Éste patrón permite realizar pequeños cambios en el diseño. Los cambios en su

estructura son prácticamente nulos sino se concentra en las modificaciones de los

37

elementos que conforman el sitio web. Puede llegar ajustar el tamaño de la fuente, de las

imágenes o desplazar el contenido de diferentes maneras. (Ver figura 4).

Por lo general este layout tiene una estructura simple que cuenta con dos únicas

columnas, una para el menú y otra para el contenido. Para un correcto funcionamiento es

ideal que éstos tengan menús ideales para landing pages o que funcionen para celulares

así como para pantallas grandes, su contenido debería de ser con pocos elementos que

sean capaces de reacomodarse o varias sus tamaños.

Como se observa en el grafico anterior no presenta cambios importantes debido a que

solo se muestran las columnas o wireframe mas no su contenido, que en realidad es

donde se presentan las variaciones.

Para entender mejor el funcionamiento de este patrón se muestra la siguiente imagen

(ver figura 5) donde se puede apreciar que la estructura no presenta variaciones pero si

sus elementos que se encuentran dentro de ella. Se puede observar que las imágenes se

reducen en dimensión a medida que reduce la pantalla, de igual manera que los textos.

Es importante en esta técnica considerar elementos de diseño que hagan que los

elementos no se vean desproporcionados o que alguno de ellos tome más relevancia que

otro cuando cambia de dimensión y no es una decisión pesada por el diseñador. De igual

manera es importante considerar elementos claves como márgenes, paddigns y espacios

entre líneas de texto.

2.1.5 Off Canvas.

Por ultimo esta la técnica Off Canvas expuesta por Wroblenski (2013) la cual se asemeja

al diseño que presentan las apps para móviles. Funciona como si fuese un lienzo grande

donde se tiene toda la estructura del sitio web y la pantalla funciona como el espacio

visible de alguna parte de este creando así una navegación cómoda para el usuario. (Ver

figura 6).

38

Como se puede observar en el gráfico, en tamaños grandes puede poseer distinto

diseño, pero al llegar a dimensiones pequeñas, se sacan del lienzo y se superponen en la

parte visible a través de alguna interacción del usuario. Para ello debe de ayudar de

JavaScript.

Este layout se centra en resoluciones pequeñas con la finalidad de aprovechar el espacio

disponible y no tomar el tamaño de la pantalla como un obstáculo y expandirse más allá

de sus límites. Por lo general una capa que se oculta, en la mayoría de los casos es la

columna de navegación, ya que en términos de usabilidad, está siempre debería de estar

disponible en la pantalla, y como sucedía en las técnicas anteriores el menú podía

desaparecer si se iban acumulándose las columnas.

En muchas aplicaciones web, es común emplear un espacio a un lado de la pantalla,

donde se ocultan opciones de navegación hasta que se interactúa con un elemento que

hace que el contenido de la pantalla se deslice y se superponga esta capa. Un ejemplo

común es la app móvil HTML5 de Facebook.

Además se puede aprovechar no solo para tamaño Smartphones sino también para

aplicaciones web cuando la dimensión de la pantalla es de una tablet. Este patrón aporta

originalidad, ahorro de espacio y sobre todo innovación.

2.3 Frameworks.

De acuerdo con Karlsson (2014) un framework para front-end es un conjunto de

conceptos y herramientas que facilita el trabajo de diseñar una web proporcionando una

base o esqueleto para la creación nuevos diseños. En RWD ésta estructura proporciona

la posibilidad adaptarlo a distintas resoluciones y tamaños de pantalla a través de

sistemas de grids, layouts u otros mecanismos.

La mayoría de los desarrollos web comparten una estructura simular, por lo tanto el

objetivo de estos frameworks es proporcionar una estructura común para desarrolladores

39

web, y de esta manera agilizar el proceso de maquetado aportando la reutilización de

elementos básicos y repetibles.

Éstos suelen consistir en una estructura de archivos y directorios de código estándar

divididos en elementos HTML, CSS y JavaScript. En general la mayoría de estos

frameworks comparten características como proporcionar un código CSS para diseñar

cualquiera de los layouts mencionados en el capítulo anterior, lo que se conocen como

grids o cuadriculas, suelen contener definiciones de tipografía, soluciones para el

problema de las incompatibilidades de los distintos navegadores como reset css, y

componentes avanzados de interfaces de usuario.

2.3.1 Ventajas y Desventajas de su aplicación.

El empleo de un framework posee una serie de ventajas para el desarrollador web, pero

también inconvenientes como lo menciona un artículo publicado por el blog online 4R

Soluciones.

A continuación se detallaran las principales ventajas e inconvenientes de emplear este

tipo de herramientas a la hora de diseñar páginas web responsivas.

La principal ventaja del uso de estas herramientas es la rapidez que aportan debido a que

no es necesario implementar todo de una manera manual y desde cero, este tipo de

frameworks aporta ciertas funcionalidades ya implementadas proporcionando agilidad

sobre todo a la hora de maquetar los diseños. Además esta agilidad será bien recibida

por los clientes que siempre exigen el tiempo como mayor valor.

El apoyo de la comunidad web con ciertos de estos frameworks provoca que los

desarrolladores compartan conocimiento y buenas prácticas sobre estos, además estas

herramientas se han ido perfeccionando de tal manera que aportan un código limpio y

ordenado. Contribuyen a la hora de decidir factores como los saltos necesarios de media

queries para cada dispositivo e incluso algunas herramientas proporcionan soluciones a

los problemas comunes en CSS y de compatibilidad de navegadores.

40

En contraposición a las ventajas de emplear un framework, se detallan las desventajas

que pueden presentarse al no emplear ninguno de ellos y trabajar de manera manual.

Al trabajar con un framework se pierde en libertad, ya que está limitando a ajustar el

diseño a un grid preestablecido y a los requerimientos de la herramienta. Sin embargo,

creando un diseño de forma manual o artesanal, se genera un código flexible y siempre

bajo control aunque haya que invertir mayor tiempo en su desarrollo. Además el empleo

de un framework requiere de tiempo de aprendizaje para poder manejarlo.

2.3.3 Ejemplos de Frameworks.

En seguida se recopilarán una colección de frameworks para la creación de diseños web

responsivos. Si bien el más usado actualmente por la comunidad web es Bootstrap 3,

existen otras opciones que pueden funcionar como una buena opción para la creación de

layouts.

Bootstrap 3, como ya se mencionó, es uno de los más populares del mercado, habiendo

sido desarrollado por el equipo de Twitter. Bootstrap ha sido creado pensando en ofrecer

la mejor experiencia de usuario tanto para móvil como para desktop, utilizando una grilla

responsiva de 12 columnas y trae integrado algunos complementos, plugins de

JavaScript, formulario, sliders, entre otros.

La principal cualidad que presenta este framework es que maneja el concepto creado por

Luke Wroblewski de Mobile First, que a diferencia de otro genera una mejor experiencia

de usuario para los usuarios de dispositivos móviles.

Por otro lado Foundation en su web se dice ser el framework más avanzado para front-

end. Éste ha sido desarrollado con SASS, un potente preprocesador de CSS que hace de

Foundation un framework fácilmente personalizable que se sirve de las nuevas

tecnologías y funciona con IE8+. Posiblemente sea uno de los frameworks más

avanzados que existen en la actualidad.

41

De similar manera existe Gumby que es un framework responsivo con un grid de 960px.

Gumby permite descargar la grilla con una opción de 12 columnas, de 16 columnas o

bien la opción hibrida 12/16. Al igual que Bootstrap 3 lleva integrado estilos y plugins para

ahorrar trabajo de desarrollo, como son formularios, botones, menús desplegables y

otros. Una de las principales ventajas que presenta esta herramienta es que también

incluye plantillas de Photoshop para editar los diseños de los websites.

Y por último se menciona a Aeon, que es un framework que viene codificado en HTML5 y

con un grid CSS3 de hasta 1104px. El JavaScript se carga en paralelo, lo que mejora el

tiempo de carga. Tal y como indican en su página web es fácil de usar y de entender. Es

un framework minimalista con sólo 120 líneas de código para su funcionamiento.

Existe gran variedad de herramientas que permiten la construcción de layouts flexibles,

actualmente es importante considerarlas que pueden ahorrar tiempo de trabajo y

desarrollo de un sitio web. Es importante analizar sus características y los servicios que

ofrecen para poder utilizar la adecuada de acuerdo a las pretensiones que se tienen del

sitio web.

En este capítulo se analizó el aspecto esencial y que hace que los sitios flexibles puedan

funcionar. Partiendo desde las descripciones de cada uno de los layouts existentes, las

diferentes maneras de implementarlos y las herramientas con las que se cuentan

actualmente para poder desarrollarlos. Una vez entendió la manera funciona las

estructuras flexibles, será más fácil poder comprender los aspectos técnicos y visuales,

que se detallaran en los capítulos siguientes, para la creación de un sitio web responsivo.

42

Capítulo 3. Aspectos Técnicos: Responsive para el Programador.

En el presente capitulo se busca introducirse en las técnicas de CSS3 Y HTML5 para

poder desarrollar sitios web responsivos. Mediante estas cuestiones técnicas se busca

crear estructuras flexibles que permitan lograr un buen RWD. Una vez analizado la

manera de implementar los distintos tipos de layouts ahora se busca llevarlos a la

práctica y explicar cómo se pueden desarrollar mediante el uso de div, media queries,

viewport, medidas relativas, fuentes flexibles, imágenes flexibles y la optimización de su

contenido.

3.1 Media Queries.

La nueva versión de CSS3 ha evolucionado el concepto de los media queries. Hasta

ahora éstos solo habían sido empleados para mostrar la presentación en dispositivos

como impresoras. Sin embargo, con esta nueva versión se emplea este concepto un

paso más allá para detectar el tipo de dispositivo conectado a la web, consiguiendo la

posibilidad de adaptarse al dispositivo concreto a través de distintos factores como

pueden ser ancho y alto de la ventana del navegador, ancho y alto del dispositivo, la

resolución del dispositivo o la orientación de la pantalla del dispositivo.

A la hora de utilizar los media queries se debe tener en cuenta el ancho de ventana del

navegador y no la resolución de pantalla del dispositivo. Por ejemplo si se define una

mediaquerie como la siguiente:

<link rel="stylesheet" media="screen and (min-device-width: 960px)" href="960.css” />

El atributo min-device-width tiene en cuenta la resolución del dispositivo a la hora de

ejecutar el CSS, esto quiere decir que si se reduce el ancho del navegador, seguirá

mostrándose de la misma manera ya que la resolución seguirá manteniéndose, por lo

que no se adaptará al nuevo ancho de ventana. Por lo tanto, lo más adecuado es

parametrizar estas acciones teniendo en cuenta el ancho de ventana del navegador y no

de la resolución del dispositivo. Por ejemplo tomemos la siguiente media querie:

43

@media screen and (min-width: 960px) { /* Código CSS*/ }

Ésta es una expresión condicional por el cual si se cumplen las condiciones que se

especifiquen se aplicará el código CSS que se encuentre en su interior. La primera

condición, en este ejemplo screen, indica el tipo de dispositivo que mostrará la salida, por

ejemplo, una impresora o una pantalla y el segundo parámetro indica el ancho de

ventana, para este ejemplo el ancho de pantalla ha de ser como mínimo 960 pixeles para

que se interprete el código.

Además se pueden incorporar varias condiciones, por ejemplo, especificar un máximo y

un mínimo para el ancho de pantalla, como lo muestra la siguiente línea de codigo;

@media screen and (min-width: 480px) and (max-width: 960px) { /* Código CSS*/ }

Éste indica que se ejecutará el código CSS que tenga un ancho de pantalla entre 480

pixeles y 960 pixeles ambos incluidos.

Además de las características para determinar las resoluciones y anchos de pantalla, se

puede determinar otros parámetros, como por ejemplo la orientación del dispositivo,

importante en dispositivos móviles:

@media screen and (orientation: landscape) { /* Código CSS*/ }

Una vez que se conoce como crear puntos de ruptura mediante los media queries, la

incógnita se basa en resolver como se deben de determinar los puntos o medidas

concretas en lo que se debe crear un punto de ruptura.

La forma convencional de determinar estos saltos ha sido teniendo en cuenta anchos

determinados de ciertos dispositivos, por ejemplo 320px que es el ancho del iPhone,

768px que es el ancho del iPad y 1024px soportado por la mayoría de los equipos de

escritorio. Confiar en unas medidas estándar para definir unos puntos de ruptura no es lo

más adecuado. Si se comienza a definir puntos de ruptura teniendo en cuenta

resoluciones de dispositivo para llegar a una medida común, se corre el riesgo de que el

mercado de dispositivos vaya desapareciendo o modificándose ya que está en constante

crecimiento, apareciendo nuevos dispositivos con diversas características en lo que a

44

tamaños de pantalla se refiere. Por lo tanto, la mejor aproximación es usar la propia

intuición ya que el mismo diseño exigirá cuando establecer el siguiente salto y

reorganización de los elementos.

3.2 Viewport.

El termino viewport se refiere a la zona visible de un navegador, es decir se limita por el

ancho del navegador. Sin embargo, todo cambia al mostrarse en un dispositivo móvil. A

pesar de este tipo de pantalla, los navegadores por defecto intentan mostrar el sitio

completo con el objetivo de proveer una experiencia web completa, pero esto no es

totalmente adecuado.

La mayoría de los navegadores móviles escalan las páginas HTML al ancho del viewport

para que se pueda ver completa en la pantalla. Sin embargo, HTML5 propone una meta

tag para controlar esta acción. El tag viewport permite decir al navegador que emplee el

ancho del dispositivo como ancho de viewport y así además se puede desactivar la

escala inicial por defecto del navegador. Esta meta tag se debe emplear en las

cabeceras HTML dentro de la etiqueta <head>.

Básicamente debido a esta función se va indicar como debe de comportarse el

navegador a la hora de mostrar en la pantalla un diseño web. Un ejemplo de uso de esta

etiqueta es el siguiente:

<meta name="viewport" content="width=device-width, initial- scale=1, maximum-

scale=1">

Por defecto los navegadores muestran un ancho determinado de página dependiendo del

terminal y el navegador, por ejemplo, en el caso de iPhone el ancho por defecto es de

980 pixeles. Esto tiene un inconveniente, porque además de mostrarse la página web

reducida no se aplicarán los media queries definidos. A causa de esta etiqueta se pueden

establecer parámetros como el ancho, el alto o el zoom de la pantalla.

45

La meta viewport posee una lista de parámetros clave-valor separadas por comas. Un

ejemplo de las distintas propiedades aplicables son width, height, initial-scale, minimum-

scale, maximum-scale, user-scalable.

Con la propiedad width se puede indicar el ancho que tomará la página renderizada en el

dispositivo. Esta propiedad permite indicar un valor estático en pixels para páginas con

contenido fijo, pero para el objetivo de este PG, se puede indicar el valor device-width,

que representa el ancho real del dispositivo, adaptándose la web al viewport y así

pudiendo llevar a cabo las media queries.

Por otro lado, la propiedad height representa al igual que la propiedad anterior una

medida de la pantalla, en concreto indica el alto, aunque esta propiedad no posee

demasiada utilidad funciona exactamente igual que la propiedad width, teniendo el

parámetro device- height por el cual se toma el alto de la pantalla del dispositivo.

La propiedad initial-scale indica el zoom inicial que se está aplicando a la página. Si se

visita alguna página desde un dispositivo móvil sin RWD se puede observar como es

necesario realizar zoom para poder leer el contenido o acercarte a cierta parte de la web.

Este parámetro permite indicar el tanto por cierto, por lo que si se coloca un valor de 0,9

se podrá ver inicialmente un zoom del 90% respecto el ancho total. De similar manera

que la propiedad anterior existe Maximum/Minimum Scale que funciona para indicar el

zoom por defecto inicial, con estas dos propiedades se puede indicar cuál será la escala

máxima y mínima a la hora de establecer zoom.

Para finalizar, la propiedad User-Scalable está directamente relacionada con la anterior,

ya que se puede controlar la acción del usuario a la hora de hacer zoom. Con un valor

booleano, de esta manera se logra indicar si permite que el usuario pueda manipularlo

para visualizar la web.

Respecto al tema de la etiqueta viewport la comunidad web considera de malas práctica

el empleo de las etiquetar user-scalable y minium-scale, ya que por ejemplo se considera

46

un gran problema de accesibilidad a personas con problemas de visión el impedir no

poder moverse en la página con total libertad o limitando el zoom.

3.3 Medidas Relativas.

Hasta ahora los diseños webs tomaban medidas absolutas en pixels basadas en

resoluciones concretas. Por otro lado, con esta filosofía se emplean porcentajes y

unidades como los em en los diseños con el objetivo de mantener los elementos flexibles.

Las unidades relativas acercan a este concepto, proporcionando herramientas para

adaptarse a las enormes variaciones de los tamaños de pantalla, densidad de pixels y los

niveles de zoom.

Mientras las media queries son el secreto esencial de las webs responsivas, para la

mayor parte del trabajo se va a tener que trabajar con unidades de medida relativas.

Usando un layout flexible, dejando atrás los anchos fijos en los elementos. Esto significa

que todos los elementos de del diseño modifican su tamaño proporcionalmente entre sí.

La idea básica de un layout fluido es utilizar la fórmula que provee Marcotte (2011) para

convertir dimensiones absolutas basadas en pixeles en unidades relativas.

Por ejemplo se tiene un layout de 800pixeles de ancho con dos columnas, una de ellas

580px y la otra de 220px, y se quiere transformar estas medidas a porcentajes se debe

de dividir el objetivo entre el contexto padre, para ejemplo; 580/800=72,5%

220/800=27,5% y rn el código CSS se deben emplear estos porcentajes;

#column1 {width: 72.5%;} #column2 {width: 27.5%;}

Como menciona Marcotte solo se necesita cambiar la manera de pensar, olvidando que

se está diseñando para medio impresos con medidas absolutas y comenzar a tomar las

medidas necesarias en porcentajes, empleando unos sencillos cálculos siempre teniendo

cuidado de no escoger el contexto equivocado por lo que se debe de tomar la referencia

adecuada, el elemento del cual toma la referencia.

47

3.5 Tipografía Flexible.

Las fuentes flexibles están estrechamente relacionadas con los layouts elásticos. Para

que un diseño sea totalmente fluido al dispositivo, además de los anchos de los

elementos, deben de considerarse los tamaños de fuente de los textos. Como se ha

comentado anteriormente los em son la medida adecuada, ya que esta unidad, es al

tamaño de fuente lo que los porcentajes son a los pixeles.

Por defecto cada navegador tiene definido un tamaño de fuente predeterminado, si se

determina el atributo font-size al 100% se establece que la fuente tendrá un tamaño

respectivo al 100% con su tamaño de fuente relativo. Por lo tanto, tomará su medida

relativa. Si el texto se encuentra dentro de la etiqueta body, el tamaño relativo que toma

es el de navegador y en algunos casos puede ser un tamaño de 14 a otros que puede ser

16 pixels. Lo que concuerda en todos los navegadores es que el 100% del tamaño

corresponde a 1em en ese navegador. Si se determina el tamaño predeterminado de la

fuente a otra medida mayor, por ejemplo 24 pixels, 1 em correspondería a esa medida.

Se recomienda a la hora de desarrollar diseños responsivo acostumbrarse a definir

fuentes en em, y calcular los tamaños determinados a través de la fórmula de Ethan

Marcotte. Una buena práctica es definir en la etiqueta body el tamaño base de la fuente,

por ejemplo determinar el tamaño por defecto del navegador: body {font-size: 100%}

Con esta decisión esta será la referencia para el resto de elementos del diseño.

3.6 Imágenes Flexibles.

Uno de los mayores problemas que presenta un diseño responsivo es trabajar con

imágenes. Hay diversas técnicas para redimensionar imágenes proporcionalmente y

muchas de ellas son fáciles de implementar. Sin embargo, la opción más popular descrita

por Marcotte (2011) es el uso del atributo max-width. img { max-width: 100%;}

Con esta técnica se le indica al navegador que el ancho de la imagen nunca debe

superar el ancho de su contenedor, por lo tanto, gracias a este atributo nunca se

48

desbordarán del div que lo contiene sin romper la estructura del diseño, por lo cual, si el

div determina su ancho respecto al ancho del navegador, la imagen se redimensionará

para dar una sensación única de flexibilidad.

Además de servir para imágenes también tiene bastante utilidad en otros tipos de objetos

multimedia. Por ejemplo, si se desea insertar un video de cualquier fuente externa como

Youtube pero se pretende que éste se adapte al tamaño, también se le aplicar la misma

regla: img, object, embed, video {max-width: 100%}

Sin embargo, la técnica de las imágenes fluidas tiene sus desventajas, ya que aunque la

imagen se redimensione en dispositivos de menor tamaño, el peso de las imágenes es el

mismo que el de la imagen al 100%, por lo tanto la carga de la imagen en un dispositivo

móvil puede llegar a ser un problema.

La solución a este problema sería cargar una imagen con distintas resoluciones y que se

cargue dinámicamente dependiendo del tamaño de pantalla. Sin embargo, no es nada

sencillo, existen distintas implementaciones y soluciones por partes de la comunidad,

pero ninguna es la idónea. Los desarrolladores web utilizan una variedad de hacks para

evitar el problema empleando cachés y otras técnicas para mejorar en rendimiento, pero

para que realmente se resuelva el problema, la web necesita nuevas herramientas por lo

que el W3C está trabajando en una posible solución muy próxima

La idea para resolver esta problemática sería determinar que se va a cargar una imagen

y darle distintas fuentes para consumir. Además de determinarle en que breakpoint debe

cargarse la imagen, se podría elegir la imagen dependiendo de la definición que permite

el dispositivo móvil, si se trata de una resolución estándar o para pantallas dpi.

Pero esta solución de momento es una propuesta del W3C que se encuentra en

desarrollo, cuando HTML5 se transforme en un estándar es posible que esta solución

esté disponible y se evitarán todo este tipo de problemas.

49

3.7 Optimización de Contenido.

Una de las técnicas empleadas en RWD es la de ocultar o mostrar elementos según el

tipo de resolución. Aunque se han visto las técnicas para transformar proporcionalmente

los elementos y reorganizarlos, muchos desarrolladores emplean esta técnica para

proporcionar una navegación más simple, un contenido más específico o simplemente

privar de la funcionalidad a determinado dispositivo. Favorablemente CSS permite

mostrar u ocultar elementos.

En CSS existe la opción display, la cual se le puede asignar el parámetro none, así el

elemento HTML al que se le aplique esta propiedad se verá oculto. display:none

Esta técnica se emplea tanto para ocultar o mostrar contenido en resoluciones pequeñas

como grandes, un ejemplo de ello es cambiar el tipo de navegación ocultando un bloque

y haciendo mostrar otro. Por otro lado, existe otra opción en CSS llamada visibility,

que se puede establecer a valor hidden. Sin embargo, esta opción esconde el

contenido pero el elemento permanece en la misma posición a diferencia de

display:none que oculta totalmente como si no estuviera en el DOM.

Con esta habilidad para manejar la visibilidad de los elementos abre las puertas a

distintas transformaciones, adaptar diseños, reorganizar elementos y abrir la mente del

diseñador para mostrar al usuario lo que realmente se desea mostrar, optimizando su

contenido y a su vez mejorando el rendimiento del sitio.

El rendimiento web es uno de los factores que más preocupan a los desarrolladores,

sobre todo al trabajar con la filosofía RWD, ya que transmitir la página web a un

dispositivo móvil requiere un coste que las conexiones 3G deben asumir a pesar de no

proporcionar la misma velocidad que una red cableada. Por lo tanto, no todo es la forma

en que se ve, si no también cuenta el tiempo, para muchos oro y para los clientes la

decisión de permanecer en la web o abandonarla.

Existen multitud de herramientas online y plugins para analizar los tiempos de carga y

optimizar los recursos para lograr la experiencia de usuario más cómoda. Entre ellos se

50

encuentran GTMetrix, Firebug o Pingdom. Estas herramientas evalúan el rendimiento de

un website y proporcionan un informe de los puntos que se deben mejorar aportando

ciertas recomendaciones.

Entre las razones de optimizar los tiempos de carga las páginas web se encuentran

mejorar la experiencia de usuario causando una impresión positiva en el cliente o

minimizar los problemas de latencia por las distancias entre los clientes los servidores.

Desde el punto de vista empresarial usar buenas prácticas de optimización hace al

desarrollador más profesional y excelente desde la visión del cliente, lo que permite

incrementar los ingresos y beneficios.

En seguida se presentarán algunas consideraciones a tomar en cuenta para poder

desarrollar un sitio web responsivo que tenga un buen rendimiento.

Aunque se ha recomendado la técnica de la visibilidad de los elementos con el parámetro

display, no es una buena opción rellenar el código de display:none, ya que aunque el

elemento contenga este atributo y no se visualice igualmente se descargará todo el

contenido y se incluirá en el código por lo que los tiempos de cargas serán mayores.

También se recomienda incluir las hojas de estilos CSS y los documentos JS en un único

fichero, ya que cada fichero necesitará una nueva petición HTTP por parte del navegador

incrementando los tiempos de carga. Asimismo se recomienda que estos ficheros sean

externos, y evitar incluir etiquetas CSS o styles o embeber código JavaScript en el HTML.

La razón principal es que estos ficheros se guardan en la caché del navegador, y no es

necesario volver a descargarlos, aunque esto puede ser un inconveniente mientras se

está desarrollando, borrando repetidas veces la caché para probar el nuevo código.

Además del tema de la caché encapsulando código en ficheros externos, se evita la

repetición de código aligerando el documento HTML.

Se recomienda poner los enlaces a las hojas de estilos en el header ya que los

navegadores por defecto no cargan la página web hasta haber obtenido las hojas de

estilos manteniendo el viewport en blanco. Por otro lado, los JavaScript se recomiendan

51

ponerlos después del body, justamente por lo contrario, para poder visualizar la página

cuanto antes correctamente mientras se termina de descargar los scripts

correspondientes. Además se debe de que tener en cuenta que los redireccionamientos

son un gran inconveniente para la optimización, ya que estos aumentan potencialmente

los tiempos de espera.

Conociendo los aspectos técnicos de código que se mencionaron en el presente capitulo

y tomando en cuenta estas consideraciones se puede llegar a desarrollar un sitio web

responsivo que contenga una estructura flexible y se logre adaptar a cualquier de los

dispositivos. Es importante considerar las necesidades del proyecto y del cliente para

hacer determinaciones correctas de acuerdo a la manera de programar el sitio de manera

adecuada para poder lograr una mejor reproducción y provocar mejores experiencias en

el usuario.

52

Imágenes Seleccionadas.

Figura 1: Mostly Fluid Pattern. Fuente: LukeW (2015). Multi-Device Layout Patterns. (2012). Recuperado el

15/09/12 de http://www.lukew.com/ff/entry.asp?1514

Figura 2: Column Drop Pattern. Fuente: LukeW (2015). Multi-Device Layout Patterns. (2012). Recuperado el 15/09/12 de http://www.lukew.com/ff/entry.asp?1514

53

Figura 3: Layout Shifter Pattern. Fuente: LukeW (2015). Multi-Device Layout Patterns. (2012). Recuperado el 15/09/12 de http://www.lukew.com/ff/entry.asp?1514

Figura 4: Tiny Tweaks Pattern. Fuente: LukeW (2015). Multi-Device Layout Patterns. (2012). Recuperado el 15/09/12 de http://www.lukew.com/ff/entry.asp?1514

Figura 5: Ejemplo del layout Tiny Tweaks. Fuente: Responsive Web Design (2013). SlideShare (2015). Recuperado el 15/09/12 de http://www.slideshare.net/aaronbernardo1/responsive-web-design-bridging-the-gap-between-art-directors

54

Figura 6: Off Canvas Pattern. Fuente: LukeW (2015). Multi-Device Layout Patterns. (2012). Recuperado el 15/09/12 de http://www.lukew.com/ff/entry.asp?1514

55

Lista de Referencias Bibliográficas.

Allsopp, J. (2000). A Dao of Web Design. (2000). Recuperado el 22/08/15 de http://alistapart.com/article/dao

Bigio, P. (2015, 6 de julio). Revolución móvil: los usuarios y el negocio viven en los

Smartphones. La Nación. Recuperado el 31/08/2015 de http://www.lanacion.com.ar/1807622-revolucion-movil-los-usuarios-y-el-negocio-viven-

enlos-smartphones Champion, S. (2003). Progressive enhancement. New York: Hesketh Editorial ComScore (2015). Device Essentials. (2015). Recuperado el 31/08/2015 de

http://www.comscore.com/esl/Prensa-y-Eventos/Comunicados-de-prensa/2011/6/comScore-Introduces-Device-Essentials

Ethan Marcotte on how responsive web design came about. (2014, Junio 9) [11 parrafo].

Creative Bloq [Revista en línea]. Disponible en: http://www.creativebloq.com/netmag/ethan-marcotte-how-responsive-web-design-came-

about-61411189 Kadlec, T. (2012). Implementing responsive design: building sites for an anywhere,

everywhere web. Berkeley: New Riders. Citado en: Reynoso, M. (2014). Multiplicidad digital. Proyecto de Graduación. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en: http://fido.palermo.edu/servicios_dyc/catalogo_de_proyectos/detalle_proyecto.php?id_proyecto=3032

Marcotte, E. (2011). Responsive Web Design. (4° Ed.). New York: A Book Apart Editorial. Marcotte, E. (3 de marzo de 2009) A List Apart. [posteo en blog]. Disponible en:

http://alistapart.com/article/fluidgrids Mickley, Z. (2011). Flexible Web Design. Berkeley: New Riders Editorial. Moll, C. (2006). Optimal width for 1024px resolution? (2006). Recuperado el 08/09/15 de

http://www.cameronmoll.com/archives/001220.html Kemp, S. (2015). Digital, Social & Mobile Worldwide in 2015. (2015). Recuperado el

30/08/2015 de http://wearesocial.net/blog/2015/01/digital-social-mobile-worldwide-2015/ Wroblewski, L. (2011). Mobile First. New York: A book apart.

Wroblewski, L. (2012). Multi-Device Layout Patterns. (2015). Recuperado el 15/09/2015 de http://www.lukew.com/ff/entry.asp?1514

56

Bibliografía

Anderson, T., Elloumi, F. (2004). Theory and Practice of Online Learning .Athabasca: Creative Commons.

Bernal, A. (2010). Influencia de las redes sociales en los medios de comunicación.

Zamora: Comunicación Social. Berners-Lee, T. (2001). The Semantic Web. (s.l.): Scientific American Magazine. Casillas J. (2005). Comunicación masiva. El Prisma. Apuntes para estudiantes

universitarios y profesionales. (2005). Recuperado el 22/05/14 de http://www.elprisma.com/apunes/comunicación_y_periodismo/comunicacionmasiva.html

Coppola, R. (1997). ¿Qué es Internet? (12º Ed.) Caracas: PcNews. Fernández, A. (2003). Las nuevas adicciones. Madrid: Tea Ediciones. Ferrero, M. (2001). Internet y los Portales como nuevo espacio para los medios de

comunicación. (2001). Recuperado el 22/05/14 de www.las5w.com.ar Fumero, A., Roca, G. (2007). Web 2.0. Madrid: Fundación Orange. Hicks, Atkins, Irish, Weakley, Rieger, Porter, Carson, Ta’eed, Stocks. J. T. P. R. B. P. R.

C. E. J. (2012). Smashing Book #2: Responsive Design. (2° Ed.). Freiburg: Smashing Media.

Jeffrey, V. (2001). Arte y Ciencia del Diseño Web. Madrid: New Riders. Krug, E. (2000). Don’t make me think. (2º Ed.). New York: Pearson. Laclau, J. (2008). Microsoft: su versión para Internet. (2010). Recuperado el 27/05/14 de

http://www.infobrand.com.ar/notas/10148-Microsoft:-su-versi%C3%B3n-2008-para-Internet---Silverlight

Lozada, P. (s.f.). Evolución de la Web. (s.f.) Recuperado el 23/05/14 de

http://profesores.elo.utfsm.cl/~tarredondo/info/networks/Evolucion_Web.pdf Lynch, P., Horton, S. (2009). Web Style Guide. (3° Ed.) New Haven: Yale University. Martí, J. (2011). El uso de la web en las diferentes generaciones. (2011). Recuperado el

24/05/14 de http://www.xarxatic.com/el-uso-de-la-web-en-las-diferentes-generaciones. Marcotte, E. (2011). Responsive Web Design. (4° Ed.). New York: A Book Apart Editorial. Nieto, A., Rouhiainen, l. (2012). La Web Empresa 2.0. (2° Ed.) Madrid: Global Marketing

Strategies. Osuna, C., Busón, C. (2008). Convergencia de medios. La integración tecnológica en la

era digital. Barcelona: Icaria Editorial. PuroMarketing (2014). Web Cerebral: la transformación de la Web 4.0 (2014).

Recuperado el 21/05/14 de http://www.puromarketing.com/12/11439/cerebral-transformacion.html

57

Ramonet, I. (2009). La catástrofe perfecta. Galicia: Icaria editorial S.A y Éditions Galilée. Spiekerman, E. (2013). Webfonts: A Designers Guide. Berlin: Font Shop. Ureña, A. (2011). Las Redes Sociales en Internet .Barcelona: Estudios del ONTSI. Vivar, J., Arruti, A. (2001). Ciberperiodismo. Madrid: Limusa. Woolgar S. (2002). ¿Virtual society? Technology, cyberbole, reality. Oxford: Oxford

University Press. Wroblewski, L. (2011). Mobile First. New York: A book apart. Zanoni, L. (2008). El imperio digital. Buenos Aires: Ediciones B

58

Lista de antecedentes.

Alliey, L., Milagro, A. (2009). Diseño de la interfaz gráfica web en función de los dispositivos móviles. Caso de estudio: diarios digitales. Cuadernos del Centro de Estudios de Diseño y Comunicación Nº38. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_articulo=6997&id_libro=321

Cortez, D., De Bisschop, N., Pérez, J., Salvietti., (2006). Nuevas tendencias en el

diseño de páginas web. Creación y Producción en Diseño y Comunicación Nº10.Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_articulo=3560&id_libro=25

Machese, J. (2010). Web 2.0 y la nueva audiencia activa. Proyecto de Graduación.

Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_libro=163&id_articulo=613

Méndez, S. (2011). Empresas online. Web 2.0: un nuevo medio de comunicación entre

las empresas y sus públicos. Proyecto de Graduación. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_articulo=8140&id_libro=374

Muguillo, M. (2011). Mobile Marketing nueva herramienta de comunicación. El teléfono

móvil y la publicidad. Proyecto de Graduación. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_libro=336&id_articulo=7487

Reynoso, M. (2014). Multiplicidad digital. Proyecto de Graduación. Facultad de Diseño y

Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/catalogo_de_proyectos/detalle_proyecto.php?id_proyecto=3032

Salgueiro, G.(2013). Diseño de interfaces web efectivas y usables. Proyecto de

Graduación. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/catalogo_de_proyectos/detalle_proyecto.php?id_proyecto=2048

Valverde, J. (2011). Impreso vs. Online. Proyecto de Graduación. Facultad de Diseño y

Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/proyectograduacion/detalle_proyecto.php?id_proyecto=2521

Zavala, W. (2005). Pautas que hacen a un desarrollador web profesional. Reflexión

Académica en Diseño y Comunicación Nº VI. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en

59

http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_articulo=799&id_libro=121

Zavala, W. (2011). Lo que hay que saber para desarrollar un sitio web. Reflexión

Académica en Diseño y Comunicación NºXVI. Facultad de Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Disponible en http://fido.palermo.edu/servicios_dyc/publicacionesdc/vista/detalle_articulo.php?id_libro=270&id_articulo=6503

60

Producción de contenidos curriculares.

De acuerdo a los contenidos de la carrera de Diseño de Imagen y Sonido de la

Universidad de Palermo, se asocian tres materias en las cuales presentan contenidos

que sirvieron como conceptos fundamentales para la realización del presente Proyecto de

Graduación.

Primeramente se presenta la materia de Producción Digital I cuya finalidad está

relacionada con la solución de productos de diseño web, adquiriendo los fundamentos y

conceptos generales de utilidad, función y comunicación en el campo digital. Esta se

relaciona de manera importante al contenido del presente PG cual el principal tema y

objetivo general se basa en la producción de un sitio web que funcione como elemento de

comunicación en la era digital.

Posteriormente se nombra a la materia de Diseño de Imagen y Sonido II que tiene como

objetivo incorporar elementos fundamentales del lenguaje digital y audiovisual, la

conceptualización y la creatividad. Se aproxima al diseño de contenidos web, al ejercicio

del pensamiento proyectual y a los caminos de sustitución entre la idea de diseño y su

concretización. De acuerdo a los fines de esta asignatura tiene en común al Diseño

Adaptable los aspectos de conceptualización y creatividad porque a partir de una idea se

crea un diseño que se materializa en un producto digital.

Por último se cita a la asignatura de Producción Digital III pues se vincula a éste PG de

manera en que, como lo establece la finalidad de la materia, se estructura, piensa y

produce un proyecto digital de multimedia online.

61

Palabras Claves.

Soporte Digital

Diseño

Diseño Web

Programación

Interfaz

Dispositivo Móvil

Experiencia de Usuario

Usabilidad

Internet

Tecnología de las comunicaciones