PDF de programación - El diseño web responsivo como parte de los avances tecnológicos

UNIVERSIDAD RAFAEL LANDÍVAR

FACULTAD DE ARQUITECTURA Y DISEÑO

LICENCIATURA EN DISEÑO GRÁFICO

El diseño web responsivo como parte de los avances tecnológicos. Material informativo para Orejitas Felices de Alemania.

PROYECTO DE GRADO

ANA LUCÍA MARÍN LUNA

CARNET10805-09

GUATEMALA DE LA ASUNCIÓN, SEPTIEMBRE DE 2013

CAMPUS CENTRAL

UNIVERSIDAD RAFAEL LANDÍVAR

FACULTAD DE ARQUITECTURA Y DISEÑO

LICENCIATURA EN DISEÑO GRÁFICO

El diseño web responsivo como parte de los avances tecnológicos. Material informativo para Orejitas Felices de Alemania.

PROYECTO DE GRADO

TRABAJO PRESENTADO AL CONSEJO DE LA FACULTAD DE

ARQUITECTURA Y DISEÑO

POR

ANA LUCÍA MARÍN LUNA

EL TÍTULO DE DISEÑADORA GRÁFICA EN EL GRADO ACADÉMICO DE LICENCIADA

PREVIO A CONFERÍRSELE

GUATEMALA DE LA ASUNCIÓN, SEPTIEMBRE DE 2013

CAMPUS CENTRAL

AUTORIDADES DE LA UNIVERSIDAD RAFAEL LANDÍVAR

RECTOR:
VICERRECTORA ACADÉMICA:
VICERRECTOR DE INVESTIGACIÓN Y PROYECCIÓN:
VICERRECTOR DE INTEGRACIÓN UNIVERSITARIA:
VICERRECTOR ADMINISTRATIVO:
SECRETARIA GENERAL:

P. ROLANDO ENRIQUE ALVARADO LÓPEZ, S. J.
DRA. MARTA LUCRECIA MÉNDEZ GONZÁLEZ DE PENEDO
DR. CARLOS RAFAEL CABARRÚS PELLECER, S. J.
DR. EDUARDO VALDÉS BARRÍA, S. J.
LIC. ARIEL RIVERA IRÍAS
LIC. FABIOLA DE LA LUZ PADILLA BELTRANENA DE LORENZANA

AUTORIDADES DE LA FACULTAD DE ARQUITECTURA Y DISEÑO

DECANO:

VICEDECANO:

SECRETARIA:

MGTR. HERNÁN OVIDIO MORALES CALDERÓN

ARQ. ÓSCAR REINALDO ECHEVERRÍA CAÑAS

MGTR. ALICE MARÍA BECKER ÁVILA

DIRECTORA DE CARRERA: MGTR. ANA REGINA LÓPEZ DE LA VEGA

NOMBRE DEL ASESOR DE TRABAJO DE GRADUACIÓN

MGTR. KARIN LUCRECIA ABREU LISCUTIN

TERNA QUE PRACTICÓ LA EVALUACIÓN

LIC. DANIA MARIA MOLLINEDO ROJAS
LIC. JOSÉ MIGUEL GUZMÁN TELLO
LIC. SERGIO JOSE DURINI SERRANO

Resumen
El Diseño Web Responsivo ha tomado un papel importante con
relación a la tecnología ya que es una técnica la cual optimiza
recursos en la realización de sitios Web. Se realiza de una manera
más compleja, sin embargo esta va a tener resultados óptimos en
lo que se está trabajando, así como también va a tener un mejor
manejo debido a que solo se tiene una administración en lugar de
tener varias administraciones para cada dispositivo en el cual se
quiere visualizar. El Diseño Web Responsivo puede manejar un
mismo diseño del sitio para los diferentes dispositivos por medio
del CSS mediante la reducción o eliminación de la visibilidad del
contenido creando jerarquías para que el usuario pueda observar
dentro del sitio lo más relevante en su comienzo y encontrando
la demás información conforme se va navegando en el mismo.
Se encontraron pros y contras a cerca de esta técnica debido a
que tiene mucho que ver el target al cual está dirigido, la función
que el sitio Web va a cumplir, el contenido que se va a colocar
en el mismo y cuál va a ser el objetivo de la empresa al crear el
sitio Web.

4.1 Sujetos de estudi
4.2 Objetos de estudio
4.3 Instrumentos
4.4 Procedimiento

Índice
1.Introducción
2. Planteamiento del problema
3. Objetivos de investigación
4. Metodología




5. Contenido teórico y experiencia de diseño












dispositivos actuales










6. Descripción de resultados

Diseño Web
HTML


CSS (Cascading style sheet)
Categorías de estilos

Versiones Web


Diferentes maneras de proveer

soluciones móviles
Diseño Web Responsivo





¿Qué es el Diseño Web Responsivo?
Características
Cómo se lleva a cabo el RWD
Viewports más comunes basados en los

Breakpoints
Componentes del lado del servidor
Administración de un sitio Web con RWD
¿Cuándo es necesario pensar en RWD?
RWD vrs móvil
¿Cuáles son los pros y contras del
DWR?








Experiencia de diseño



Video Designing for responsive Web
Video Responsive Web Design examples

Entrevista Maximiliano Martín
Entrevista Javier Castillo y Jepser Bernardino
Guías de observación sitios Web




7. Interpretacion y síntesis
8. Conclusiones y recomendaciones
9. Referencias
10. Anexos

33
35
45
63
74
76
78


1
2
4
5
5
5
6
6
8
8

8
9

11
12
12
13
15

23
24
24
24
24
25

25
26
26
29
33

1. Introducción
El diseño Web desde que comenzó ha sido parte del ser humano
debido a los avances tecnológicos que han ido surgiendo durante
los años. Conforme pasa el tiempo el ser humano lo ha hecho
parte de su día a día y con este varias personas han ido creando
nuevas técnicas o lo han ido desarrollando cada vez más
respondiendo a las necesidades y características de los usuarios
de los sitios Web. Conforme el tiempo la versión Web 1.0, esta
es la forma básica que existe, solo contiene texto, su función es
bastante rápida pero es bastante simple, esta fue evolucionando
hasta llevar a la versión Web 2.0 la cual creó un desarrollo en la
tecnología donde se une la Web con la plataforma, la inteligencia
colectiva y la arquitectura de la presentación, la cual logra una
comunidad de usuarios y una amplia gama de herramientas.
Luego esta evoluciona a la versión Web 3.0 esta trata de poder
llegar a enriquecer la comunicación aportando un valor añadido
a la información lo que la hace diferente y más inteligente. Y
por último se encuentra la versión Web 4.0 la cual tiene como
objetivo primordial poder unir las inteligencias para tener como
fin una comunicación entre personas para generar una toma de
decisiones.

Siendo estas 4 versiones parte de la evolución del diseño Web se
puede decir que conforme pasan los años la tecnología responde
más a las necesidades o exigencias que los usuarios transmiten
o dan a conocer. Por lo que en la investigación que se realizó se
determina qué es el Diseño Web Responsivo, cómo se lleva a
cabo, cuál es el aprovechamiento del mismo con relación a los
avances tecnológicos y cuándo se es necesario utilizar u optar
por crear sitios Web con Diseño Web Responsivo. Lo cual es
parte de las respuestas que se ha tenido ante a los avances
tecnológicos que se encuentran hoy en día en el mercado y la
utilización de los sitios Web en distintos dispositivos, siendo
estos computadoras desktop, laptops, tablets y Smartphones
entre otros.

El Diseño Web Responsivo ha tomado un papel importante con
relación a la tecnología ya que es una técnica la cual optimiza
recursos en la realización de sitios Web. Esto se realiza de una
manera más compleja, siendo esta la forma en la que se realiza
la programación del sitio Web para poder adaptar el diseño a los
diferentes dispositivos, sin embargo esta va a tener resultados
óptimos en lo que se está trabajando, así como también va a tener
un mejor manejo debido a que solo se tiene una administración
del sitio en lugar de tener varias administraciones para cada
dispositivo en el cual se quiere visualizar. El Diseño Web
Responsivo va a ser la respuesta para las empresas con alto
ranking de visitas de su sitio Web en los diferentes dispositivos
ya que de esta forma pueden tener la información necesaria en el
Sitio Web sin importar el dispositivo donde se esté visualizando.

Dentro de los pros de el Diseño Web Responsivo es que se
puede manejar un mismo diseño del sitio para los diferentes
dispositivos por medio del CSS (Cascading Style Sheet / hojas
de estilo en Cascada) mediante la reducción o eliminación de la
visibilidad del contenido creando jerarquías para que el usuario
pueda observar dentro del sitio lo más relevante en su comienzo
y encontrando la demás información conforme va navegando en
el sitio Web.

Una de las fallas o contras de esta técnica es de que en algunas
situaciones los sitios Web realizados con Diseño Web Responsivo
no van a ser compatibles con las versiones de los navegadores,
debido a que entre más antiguos estos sean la compatibilidad
de herramientas hacen que estos no se puedan observar en el
navegador, ya que los usuarios no actualizan los navegadores
constantemente. Sin embargo la funcionalidad de los sitios Web
con Diseño Web responsivo es muy efectiva si los navegadores
que se utilizan están actualizados cuentan con las versiones más
recientes. En los Smartphones y tablets no se cuenta con estas
fallas debido a que se actualiza automáticamente el navegador
para siempre tener la versión más nueva o más actualizada.

1

2. Planteamiento del problema
Los sitios Web son aquellos que están enfocados principalmente
a mostrar información (texto, imágenes, videos, animaciones,
etc). Dentro de ellos existe una gran variedad de clasificaciones
las cuales responden a las necesidades del visitante. Dichas
clasificaciones pueden ser por audiencia, dinamismo, apertura,
profundidad u objetivos.

Debido a los avances tecnológicos se ha cruzado por una
nueva generación de sitios Web, la cual es denominada 4.0.
Comenzando por la Web 1.0, la cual consistía en que la persona
se conectara a la Web y esta fuera utilizada como punto de
información de forma estática, es la forma más simple donde
el usuario no puede interactuar con el contenido. La Web 2.0