UNIVERSIDAD NACIONAL HERMILIO VALDIZÁN – HUÁNUCO

FACULTAD DE CIENCIAS ADMINISTRATIVAS Y TURISMO

ESCUELA PROFESIONAL DE CIENCIAS ADMINISTRATIVAS

FALTA DE SITIOS WEB RESPONSIVOS EN EL SECTOR TURISMO DE LA CIUDAD

DE HUÁNUCO - 2023

MÓDULO: MARKETING III

UNIDAD TEMÁTICA:
MARKETING DIGITAL
DOCENTE:
ZEVALLOS CHOY, Edward
AUTORES:
CASTRO ALONZO, Najely
COTRINA ORDOÑEZ, Anhely
MUNGUIA DAZA, Fiorella
PANDURO TUCTO, Dayana
SOTOMAYOR ESCUDERO, Jeann

HUÁNUCO- 2023
 DEDICATORIA

Principalmente dedicamos este trabajo a Dios puesto que nos brinda sabiduría,

amor y paciencia, nos ayuda en los momentos más difíciles brindándonos valores que

nos fortalezcan no solo como trabajo de grupo, sino como personas. A la vez también

dedicamos este trabajo al Dr. Zevallos Choy , Edward por encomendarnos la labor de

realizar la presente monografía que amplía nuestras capacidades intelectuales.

2
 AGRADECIMIENTO

Agradecemos a Dios en primer lugar por darnos la oportunidad de seguir

viviendo, a nuestros padres por apoyarnos y darnos amor; como también a nuestras

familias por estar siempre con nosotros.

3
 ÍNDICE
INTRODUCCIÓN
CONTENIDO TEMÁTICO
CAPÍTULO I : DESARROLLO PRINCIPAL DE LA PÁGINA WEB
RESPONSIVE
1.1 ¿Qué es la web responsive?
1.1.1 Surgimiento de la web responsive
1.1.2 Versión para móviles
1.2 El creador de la web responsive Ethan Marcotte
CAPÍTULO II
EL DISEÑO DE LA WEB Y SUS ELEMENTOS
2.1 La web de hoy
2.2.1 Características
2.2.2 Beneficios
CAPÍTULO III
MEDIA QUERIES
3.1¿Qué es la Media Queries?
3.2 Importancia del uso de Media Quares dentro del diseño web responsive
3.2.1 Adaptación a múltiples dispositivos
3.2.2 Mejora de la experiencia del usuario
3.2.3 Optimización de Carga y Rendimiento
3.3 Operadores lógicos para las Media Queries
CAPÍTULO IV
BREAKPOINTS PARA DISEÑO RESPONSIVE
4.1 ¿Qué son los Breakpoints?
4.1.1 Los breakpoints no deben orientarse a dispositivos
4.2 ¿Cómo saber el lugar donde colocar un breakpoint?
CAPÍTULO V
EXPERIENCIA DEL USUARIO Y CASOS DE ÉXITO
5.1. Experiencia del usuario ux
5.2. CASOS DE ÉXITOS DE PAGINAS WEB RESPONSIVAS
CONCLUSIONES
ANEXO
BIBLIOGRAFÍA

4
 INTRODUCCIÓN

En los últimos años hemos visto, cómo muchas empresas han tenido en cuenta la
importancia del internet y la tecnología, y cómo estas pueden adaptarlo como una
estrategía de comunicación para que así pueda llegar a los usuarios y aumente su
visibilidad en línea. El internet se ha convertido en una pieza fundamental para las
empresas, ya que pueden crear sus propias páginas webs y les ayude a facilitar su
trabajo.
A medida que el acceso a internet se ha diversificado, las expectativas de los
usuarios también han evolucionado. La mayoría de las personas esperan poder
acceder a la información, servicios y productos que necesitan desde cualquier lugar
y en cualquier momento. Un sitio web responsivo no solo satisface estas
expectativas, sino que también tiene un impacto significativo en áreas como el
posicionamiento en motores de búsqueda, la retención de usuarios y la imagen de
marca.
En la actualidad, el sector del turismo se encuentra en constante evolución y
adaptación para satisfacer las cambiantes demandas de los viajeros y turistas. Sin
embargo, a pesar de todos los avances tecnológicos y la creciente importancia de la
presencia en línea en esta industria, persiste una problemática preocupante: la falta
de sitios web responsivos.

Los sitios web responsivos son esenciales para el sector turismo, ya que permiten
que los viajeros y potenciales clientes accedan a información vital, realicen reservas
y planifiquen sus viajes de manera eficiente desde una variedad de dispositivos
tecnológicos, como computadoras de escritorio, tabletas y teléfonos móviles. La falta
de adaptabilidad en los sitios web de empresas turísticas puede dar lugar a una
experiencia de usuario deficiente, dificultades en la búsqueda de información
relevante, pérdida de oportunidades de negocio y, en última instancia, un impacto
negativo en la industria en su conjunto.
Por ello en el capítulo I abordaremos el desarrollo principal de las páginas webs,
dentro de ello veremos que es la web responsive, el surgimiento, la versión para
móviles y el creador del diseño responsive.

5
En el capítulo II mencionaremos sus características y beneficios del diseño web
responsive o adaptativo como tal ayudará a reducir el tiempo de desarrollo,
garantizando así la visualización correcta en cualquier dispositivo y mejorará la
experiencia del usuario. Promoverá la facilidad de lectura, navegación con un
mínimo redimensionamiento, planificación y desplazamiento a través de técnicas.

Continuamente en el capítulo III explicamos acerca de la Media queries , son una

parte fundamental del sistema web responsive lo cuál nos van a permitir aplicar
diferentes estilos a distintos dispositivos basándose en las características así como
la resolución de pantalla o la orientación del dispositivo.

Seguido a ello en el capítulo IV haremos referencia a los breakpoints que en

muchas ocasiones presenta un desarrollo eficiente para las empresas con la
optimización de sus páginas web, haciendo que este se adapte a las acciones del
usuario y facilitando la búsqueda de información conjunto a los intereses de este
mismo.
Posteriormente, en el capítulo V se expone y detalla sobre las experiencias del
usuario UX, los aspectos claves de la experiencia del usuario y explicando los
casos de éxitos generada de las páginas web responsivas.

6
 CONTENIDO TEMÁTICO
CAPÍTULO I : DESARROLLO PRINCIPAL DE LA PÁGINA WEB
RESPONSIVE

1.1 ¿Qué es la web responsive?

La web responsive o también llamada web adaptativa, viene a ser una técnica en la
que podemos crear y solucionar los problemas o errores de diseño de una página
web, esta se basa en el contenido, para que se pueda adaptar a cualquier
dispositivo tecnológico y así los clientes puedan tener una mejor experiencia
navegando en las páginas webs.
Según (Real Academia Española, 2022), la palabra “responsive” o en español
“responsivo” significa perteneciente o relativo a la respuesta, pero si lo relacionamos
con la página web esto significa que puede transformarse a cualquier cambio de
mecanismo ya sea un celular o computadora u otro dispositivo tecnológico.

1.1.1 Surgimiento de la web responsive

En la actualidad la web ha tenido que ir adaptándose a los cambios que ha surgido
en cuanto a los aparatos tecnológicos, antes los usuarios navegaban en las
computadoras, pero hoy en día, según (Fernandez, 2023) la industria de los
celulares a crecido aceleradamente, ya que en los datos estadísticos se muestra
que a fines del año 2022, el 90% de la población del mundo dispone de un celular.

1.1.2 Versión para móviles

Comúnmente, si las personas querían acceder a las páginas webs, estas solo
estaban adaptadas al diseño o formato de las computadoras.
Tras el aumento de popularidad del acceso a la red en los celulares o el lanzamiento
al mercado de los dispositivos informáticos como las tablets,se fueron creando
diferentes modelos de diseño de una misma página web, para que se puedan
adaptar particularmente a los celulares, laptops y tablets, esto quiere decir que
tenían que crear una página web repetidamente y conservar el layout para una
variedad de dispositivos tecnológicos, pero el problema era que la persona que
tenía su página web estaba obligada a hacer un trabajo triple ya que sí él deseaba

7
crear o cambiar su página, debía tener en cuenta que tenía que actualizar cada
página web de los diferentes dispositivos donde se encontraba.
Con la aparición de internet en los televisores, automóviles y otros campos, el
problema se volvió más grave. ¿Hacer una versión para cada dispositivo que salga?
Esa no es la solución, por eso se decidió crear páginas webs adecuadas para
cualquier dispositivo donde queramos utilizarlo, ya sea ahora o en el futuro, esto es
lo que nos brindan las páginas web responsive.

1.2 El creador de la web responsive Ethan Marcotte

Ethan Marcotte es el diseñador que acuñó la palabra "Diseño web adaptable" fue
quien difundió un artículo sobre "List Apart" y publicó un libro.
Allí, describe todas las situaciones y estrategias relacionadas con el diseño
adaptativo.No es el primer diseñador en considerar adaptar el diseño de su sitio web
a diferentes necesidades, pantalla (de hecho, los creadores del estándar CSS han
creado tecnología para producir Sitio web responsivo), pero fue él quien utilizó el
término tan popular hoy en día.

8
 CAPÍTULO II
EL DISEÑO DE LA WEB Y SUS ELEMENTOS
2.1 La web de hoy
Es importante recordar que en la actualidad al crear “páginas web”, debemos
buscar que estas sean suficientemente inteligentes para que así puedan adaptarse
a cualquier circunstancia.
Es esencial tener en claro que en el mundo existen miles y millones de dispositivos
que pueden acceder a un sitio web. Los desarrollos web deben ser capaces de
mostrarse adecuadamente en todos los dispositivos. Esta amplia gama de
ordenadores y dispositivos tiene características muy diferentes.
2.2.1 Características

La técnica del diseño web responsive va a permitir adaptar adecuadamente los

contenidos de las páginas webs, al ancho del área de despliegue de cada
dispositivo a través de las siguientes soluciones (Ceballos, 2013)
1. Diseño fluido mediante cuadrículas flexibles o fluid grid: “Se fundamenta en
proporciones en lugar de píxeles. Esto permite que el sitio web se muestre en
diferentes formatos, dependiendo del dispositivo utilizado”. (Ceballos, 2013)
2. Utilización de media queries: “Orientadas a configurar el ancho, alto y
resolución dependiendo de las características del dispositivo donde se
consulte el sitio” (Ceballos, 2013)
3. Ancho de las imágenes, objetos, videos o medios similares: “Es flexible y su
tamaño se modifica por medio de porcentajes. Por esta razón, se recomienda
que se almacenen en el tamaño más grande en la que se va a mostrar y su
ancho máximo será equivalente al 100% de su tamaño, teniendo en cuenta
que el tiempo de carga puede ser lento en dispositivos móviles” (Ceballos,
2013)
4. El tamaño de las fuentes tipográficas: “Se establece en em2 en vez de
pixeles” (Ceballos, 2013)

2.2.2 Beneficios

El diseño web responsive ofrece distintos beneficios, tales para los usuarios y los
que lo desarrollan, entre las que se incluyen:

9
● Reduce costos: Se da debido a que el código es más corto y no se necesitan
versiones diferentes para la implementación en cada dispositivo conocido
● Eficiencia en la actualización: Se usa una única plantilla para la utilidad de la
página, lo que hace que la modificación sea eficiente
● Mejora la usabilidad: Las características de uso del sitio se adaptan
automáticamente en cada dispositivo
● Adaptación de la interacción: Al ser un sitio fluido, la información se organiza
para mostrar lo principal de contenidos para la visita del usuario.
● Utilización de imágenes, videos y otros medios: Los recursos se
redimensionan proporcionalmente, manteniendo una calidad óptima en
pantalla.
● Tamaño relativo: Al estar en relación, es compatible con diferentes
resoluciones y distintos dispositivos.
● Única dirección (URL): Optimizan los motores de búsqueda, ya que en los
resultados aparece una única URL

CAPÍTULO III

10
 MEDIA QUERIES
3.1¿Qué es la Media Queries?

Media Queries es una herramienta importante y esencial para poder implementar

los sitios web responsivos ya que es el aliado fundamental de los diseñadores web
y va a permitir crear experiencias de usuario de forma adaptativas y personalizadas
según las características del medio en el que se visualiza una página web, también
va a servir para lograr definir los estilos condicionales y características en el cuál los
medios se visualizan .Su uso es esencial en la creación de sitios web modernos y
receptivos.(Miguel Angel, 2015, pág 19)

La Media Queries va a permitir a los diseñadores crear sitios web que se visualicen
y funcionen correctamente en diferentes variedades de dispositivos lo cuál va a
mejorar la accesibilidad y usabilidad de cada uno de ellos.

3.2 Importancia del uso de Media Quares dentro del diseño web responsive

La importancia de Media Queries en los diseño web responsivo son fundamentales

ya que en la era actual posee diversidades de dispositivos. De tal forma garantizan
que tu sitio web sea accesible y funcional para así lograr obtener una audiencia
amplia y variada.El uso de Media Queries es fundamental dentro diseño web
responsivo por estas razones importantes

3.2.1 Adaptación a múltiples dispositivos

Actualmente, las personas ingresan a los sitios web desde diversas variedades de
dispositivos que poseen diferentes tamaños de pantalla, pueden ser
celulares ,tabletas,laptops hasta computadoras de escritorio y televisores. Las
Media Queries van a permitir que un sitio web se logré adaptar automáticamente a
estos distintos dispositivos que existen hoy en día

3.2.2 Mejora de la experiencia del usuario

Si se desarrolla un diseño web responsive de manera legible y funcional en

cualquier dispositivo, se va a lograr una reducción al momento de tener la necesidad

11
de hacer zoom o desplazarse horizontalmente. Dicho movimiento va a permitir que
el usuario obtenga una experiencia agradable y satisfactoria.

3.2.3 Optimización de Carga y Rendimiento

Los Media Queries facilitan que se pida cargar recursos, como imágenes y estilos,
ya que son específicos para el dispositivo, lo cuál va a reducir el tiempo de carga y
mejora el rendimiento del sitio web. Esto es esencial para dispositivos móviles con
conexiones más lentas.

3.3 Operadores lógicos para las Media Queries

Según (Miguel Alvares,2015,pág 21) Los operadores lógicos van a permitir Media
Queries más específicas y precisas de tal forma se va a lograr controlar como se
muestra tu diseño en distintos dispositivos. Si se desea realizar una combinación de
distintas condiciones se va a poder hacer el uso de operadores lógicos, de una
manera similar a como se usan en lenguajes de programación.
Son cuatro los operadores lógicos :

• Operador and : Se va a tener que cumplir dos condiciones para que puedan ser
considerados en la evaluación como verdadera
• Operador not: Se va a utilizar cuando una condición específica no se cumpla d
• Operador only: Va a garantizar que los estilos solo se apliquen en dispositivos
que cumplen con las condiciones especificadas y evita que otros dispositivos los
hereden accidentalmente.Este operador es muy importante para evitar conflictos
con versiones más antiguas de navegadores
• Operador or: No existe como tal, pero se puede colocar diversas condiciones
separadas por comas y al momento de cumplirse cualquiera de ellas, se va a poder
situar diversos estilos de Media Queries

CAPÍTULO IV
BREAKPOINTS PARA DISEÑO RESPONSIVE

12
4.1 ¿Qué son los Breakpoints?

El diseño web responsive implica muchas cosas, entre las cuales está la
optimización de tres elementos básicos, navegador y sistema operativo, velocidad y
ancho de pantalla. En este caso de los breakpoints intentaremos profundizar acerca
de la optimización de pantallas, los tipos de pantalla y los avances que debe dar su
diseño para poder adaptarse. Identificamos que el diseño responsivo responde a los
cambios en la ventana del navegador. Al realizar la acción de acercar o alejar la
imagen, la plantilla de página cambia para adaptarse mejor ante estas acciones.
Estirando la pantalla, se notará que al presentarse solo una columna de
dimensiones pequeñas, se convierte en dos columnas presentando el ancho de
pantalla más grande, si se continúa realizando estas acciones en la pantalla, pasa a
observarse tres columnas y así sucesivamente como se haya establecido por el
diseñador. A está acción en el que el diseño está en constante cambio por la
manipulación de las ventanas se le denomina breakpoints y se dan gracias al media
queries.

4.1.1 Los breakpoints no deben orientarse a dispositivos

Leandro Alesga .(2023) menciona que los breakpoints son utilizados mayormente
para alcanzar un alto nivel de eficiencia y eficacia del programa.
Uno de los puntos más importantes porque la gente suele tener menos experiencia
en diseño web responsivo y normalmente piensan que el diseño web responsivo
tiene objetivos predeterminados.Se deben utilizar puntos de interrupción. Pueden
ser de diferentes tamaños en dispositivos como iPhones, iPads, computadoras con
pantalla estándar,Tal y como se apreció en la introducción a la Guía Responsive,
una de las razones por la que se basa en la filosofía del diseño es para no crear
sistemas nuevos para cada dispositivo ya que se haría un trabajo infinito y estar en
constante actualización con los nuevos modelos. Si insistes en crear puntos de
interrupción en tu cabeza usando dimensiones unitarias, lo que obtendrás será que
tendrás que crear saltos a cientos de dispositivos. Cuando lanzan un nuevo modelo
o marca . Por supuesto, no deseas actualizar las redirecciones para que la página
se vea bien en ellas. Es imposible cubrir todos los dispositivos, todas las marcas y
modelos, no puedes saber todo tamaños de pantalla, tamaños que existen hoy y
tamaños que podrían existir mañana.

13
4.2 ¿Cómo saber el lugar donde colocar un breakpoint?
Si no se está realizando breakpoints dirigidos a los dispositivos, ¿cómo tener el
conocimiento y la certeza de saber dónde colocarlos? La respuesta está en cómo
organizas tu diseño. En otras palabras, los puntos de interrupción deben coincidir
con el diseño de su sitio web. Para tener conocimiento de dónde colocar la pausa de
las media queries ,se tiene que estirar la pestaña del navegador,comience con una
ventana gráfica de tamaño reducido, se debe seguir estirando el ancho hasta
empezar a darte cuenta de que tu diseño se ve peor. Esto no significa que los
usuarios están constantemente cambiando estas dimensiones de la pestaña del
navegador .Es más bien parte de los diseñadores el hecho de generar diferentes
tamaños para los dispositivos .Al seleccionar cualquier página web responsiva se
podrá apreciar como mientras jugamos con las dimensiones, agrandando o
reduciendo el tamaño las columnas suelen distorsionarse o dejan espacios vacíos,
es ahí que se requiere colocar este breakpoint.

4.3 Breakpoints grandes y pequeños

Tenga cuidado al establecer puntos de interrupción. No se debe considerar puntos

para cambiar el diseño en relación a teléfonos móviles, tablets o monitores de
ordenador HD. Como se viene mencionando, no es este es el objetivo incluso si
conserva una versión HTML del diseño. a veces solo los puntos de interrupción
pueden simplemente cambiar la alineación de los elementos y el tamaño del texto,
accesorios, etc. El punto en el que insertas una consulta de medios puede estar en
cualquier lugar. A veces necesitas algo tan simple como una imagen basada en
ciertas dimensiones, deseas cargarlo de modo que el texto circundante lo rodee. O
aumentar un poco el tamaño de la página fuente. No importa cuán pequeño sea el
cambio, si sientes que es bueno para tu apariencia, es el motivo para crear una
nueva "Solicitud de medios". Por eso hay tantos puntos de interrupción importantes
y cambia el diseño de la página, por eso afecta más significativamente a la
estructura y a otros pequeños puntos de rotura intermedios que hacen pequeños
ajustes para arreglar las piezas que merecen la pena arreglar. para todo lo que
repetimos el punto anterior, es importante establecer puntos de interrupción en tus

14
diseños, estima el momento adecuado para realizarlos, acerca y aleja la ventana del
navegador decide cómo y cuándo.

CAPÍTULO V
EXPERIENCIA DEL USUARIO Y CASOS DE ÉXITO

15
5.1. Experiencia del usuario ux
La experiencia del usuario (UX, por sus siglas en inglés, User Experience) es un
concepto que ha sido definido y abordado por diversos autores y expertos en
diseño, tecnología y psicología. Aquí tienes algunas definiciones de la experiencia
del usuario según varios autores:

Donald Norman, uno de los precursores del diseño centrado en el usuario, definió la
experiencia del usuario como "cualquier aspecto de la interacción del usuario con un
sistema, incluidos el diseño gráfico, la respuesta del sistema y la estructura de la
información".

Según Jakob Nielsen, experto en usabilidad web, describe la experiencia del usuario
como "la percepción de los usuarios y las respuestas que resultan del uso de un
sistema, producto o servicio".

Se cita a Jesse James Garrett, en su libro "The Elements of User Experience",

describe la experiencia del usuario como "la suma total de las interacciones de un
usuario con un producto o servicio y la percepción resultante de esas interacciones".

Norman también introdujo la idea de la "UX pragmática" y la "UX emocional". La

primera se refiere a la eficacia y facilidad de uso, mientras que la segunda se
relaciona con las respuestas emocionales y estéticas de los usuarios al interactuar
con un sistema.

ISO 9241-210: La norma ISO 9241-210 define la experiencia del usuario como "las
percepciones y respuestas de una persona que resultan del uso o la anticipación del
uso de un producto, sistema o servicio".

Estas definiciones subrayan la importancia de la percepción del usuario y su

experiencia global al interactuar con un producto, sistema o servicio. La UX no se
limita únicamente a la interfaz de usuario, sino que abarca aspectos emocionales,
cognitivos y funcionales de la interacción. En última instancia, una buena
experiencia del usuario busca satisfacer las necesidades y expectativas del usuario,

16
así como mejorar la eficiencia y la satisfacción en la interacción con un producto o
servicio

La experiencia del usuario (UX, por sus siglas en inglés, User Experience) en
páginas web responsivas se refiere a cómo los visitantes perciben y se relacionan
con un sitio web que ha sido diseñado para adaptarse de manera efectiva a
diferentes dispositivos y tamaños de pantalla, brindando una experiencia positiva y
coherente en todas las plataformas.

5.1.1 Aspectos clave de la experiencia del usuario en páginas web

responsivas:

a) Navegación Intuitiva: La navegación en una página web responsiva debe

ser intuitiva y fácil de entender en todos los dispositivos. Los menús y la
estructura de la información deben adaptarse de manera eficiente para que
los usuarios puedan encontrar lo que están buscando sin esfuerzo.

b) Diseño Adaptativo: Un diseño web responsivo implica que el diseño, los

elementos gráficos y el contenido se ajusten y se vean bien en diferentes
tamaños de pantalla. Esto garantiza que los usuarios tengan una experiencia
visualmente agradable sin importar el dispositivo que utilicen.

c) Carga Rápida: La velocidad de carga es un factor crítico en la experiencia

del usuario. Las páginas web responsivas deben optimizarse para cargar de
manera rápida en dispositivos móviles, evitando tiempos de espera
frustrantes.

d) Legibilidad y Usabilidad: El texto y los elementos de la página deben ser

legibles y fáciles de interactuar en pantallas pequeñas. Los botones y enlaces
deben ser lo suficientemente grandes para que los usuarios puedan tocarlos
fácilmente en dispositivos táctiles.

e) Contenido Relevante: La experiencia del usuario se beneficia de la

presentación de contenido relevante y valioso en todas las versiones del sitio.

17
 Esto puede incluir la adaptación de contenido específico para dispositivos
móviles y la eliminación de elementos no esenciales en pantallas más
pequeñas.

f) Consistencia Visual: Mantener una apariencia y sensación consistentes en

todas las plataformas contribuye a una experiencia coherente del usuario.
Los colores, las tipografías y los estilos deben mantenerse uniformes en todo
el sitio.

g) Interacción Táctil: En dispositivos móviles, la interacción táctil es

fundamental. Los elementos interactivos deben responder de manera
adecuada a los gestos táctiles, como el desplazamiento, el pellizco y el toque.

h) Pruebas y Retroalimentación: Realizar pruebas exhaustivas en diferentes

dispositivos y recopilar comentarios de los usuarios ayudará a identificar
problemas y áreas de mejora en la experiencia del usuario.

i) Optimización para SEO Móvil: Para una experiencia del usuario efectiva, es
importante que el sitio web también está optimizado para motores de
búsqueda en dispositivos móviles, lo que mejora la visibilidad en los
resultados de búsqueda móvil.

Por ende, una página web responsiva busca proporcionar a los usuarios una
experiencia agradable y consistente, independientemente del dispositivo que utilicen
para acceder al sitio. El objetivo es garantizar que los visitantes puedan navegar
fácilmente, consumir contenido y realizar acciones en la web de manera eficiente y
satisfactoria.

5.2. CASOS DE ÉXITOS DE PAGINAS WEB RESPONSIVAS

A continuación, te presento algunos casos de éxito de páginas web responsivas:

18
Estas páginas web se destacan por su capacidad para proporcionar una experiencia
de usuario excepcional en diferentes dispositivos y tamaños de pantalla, lo que ha
contribuido al éxito de sus estrategias de marketing y atractivo para los visitantes:

Airbnb: Airbnb, una plataforma de alquiler de alojamientos, ha tenido un gran éxito

con su sitio web responsivo. Los usuarios pueden buscar, reservar y administrar
alojamientos desde sus dispositivos móviles de manera fácil y efectiva. La
navegación es intuitiva y la presentación de imágenes y detalles del alojamiento se
adapta perfectamente a diferentes pantallas.

Booking.com: Booking.com es otro ejemplo de una página web responsiva líder en

la industria de viajes. Ofrece a los usuarios una experiencia consistente y eficiente al
buscar y reservar hoteles, hostales y otros alojamientos en todo el mundo,
independientemente del dispositivo que utilicen.

TripAdvisor: TripAdvisor, un sitio web de reseñas de viajes y planificación de viajes,

ha desarrollado una página web responsiva que permite a los usuarios buscar y leer
reseñas de hoteles, restaurantes y atracciones en dispositivos móviles y tabletas. La
funcionalidad de reserva y planificación de viajes se adapta de manera efectiva a
diferentes pantallas.

Expedia: Expedia es una agencia de viajes en línea que ofrece una experiencia de
usuario fluida en su página web responsiva. Los usuarios pueden buscar y reservar
vuelos, hoteles y paquetes de viaje desde una variedad de dispositivos, lo que
facilita la planificación de viajes en cualquier lugar y en cualquier momento.

Lonely Planet: Lonely Planet, una editorial de guías de viaje, ha optimizado su sitio
web para dispositivos móviles, lo que permite a los viajeros acceder a información
de viajes esencial y guías de destino mientras están en movimiento. La presentación
de contenido se adapta de manera efectiva a diferentes pantallas, lo que mejora la
experiencia del usuario.

Hotels.com: Hotels.com, un sitio web de reserva de alojamientos, ofrece una

experiencia de usuario coherente en su versión móvil y de escritorio. Los usuarios

19
pueden buscar y reservar alojamientos con facilidad en diferentes dispositivos, y el
programa de fidelización premia a los clientes habituales.

Estos son solo algunos ejemplos de páginas web responsivas exitosas. En todos
estos casos, la adaptación efectiva a diferentes dispositivos ha contribuido
significativamente a la satisfacción del usuario y al éxito de sus estrategias de
negocio en su respectiva industria y sector.

CONCLUSIONES
● Se puede concluir que “responsive" abarca muchas áreas, ideas, prácticas,
técnicas que incluso pueden desarrollarse con el tiempo. En tanto que surgen
nuevos sistemas y equipos únicos, surgen nuevas necesidades, cuyas

20
 consultas se responden utilizando tecnología reformulada o utilizando la
tecnología actual.
● Los beneficios permiten que los sitios web se adapten a una variedad de
dispositivos, garantizando una experiencia de usuario óptima. Por lo tanto, el
diseño web responsive no es solo una tendencia, sino una necesidad en el
diseño y desarrollo web moderno.
● Las Media Queries juegan un papel muy importante dentro de los sitios web
responsivos ya que es fundamental porque permiten a los diseñadores y
desarrolladores web crear sitios web adaptables y receptivos que satisfacen
las necesidades de un público.
● Los breakpoints por su parte son una herramienta para gestionar y optimizar
las páginas web, gracias al mejoramiento del software se puede navegar
mucho más cómodo
● Las páginas web responsivas no son simplemente una opción, sino una
necesidad en el mundo actual. Proporcionan ventajas significativas en
términos de experiencia del usuario, visibilidad en motores de búsqueda y
competitividad en el mercado, lo que las convierte en una inversión crucial
para cualquier empresa o entidad en línea.

ANEXO

En la actualidad, el ámbito del marketing digital ha experimentado una

transformación significativa, superando limitaciones que permiten a empresas, tanto
grandes como pequeñas, expandirse y facilitar la comercialización y venta de sus

21
productos. En el caso de las empresas turísticas, estas dependen en gran medida
de la afluencia de turistas a sus destinos para ofrecer sus servicios.

El empleo de tecnologías en el sector turístico está en constante evolución en otros

países , pero si nos referimos en el Perú y en nuestra regiòn Huánuco se observa
un crecimiento lento en la adopción de estas herramientas. Cada vez más
industrias reconocen la importancia de la tecnología como un medio para
promocionar sus establecimientos, productos y servicios.

Se ha identificado la falta de sitios web responsivos en el sector turismo en nuestra

región Huánuco, convirtiéndo en una problemática que plantea varios desafíos
importantes tanto para las empresas como para los usuarios. Esta problemática se
refiere a la ausencia de sitios web diseñados para adaptarse de manera eficaz a
diferentes tipos de dispositivos tecnológicos, como computadoras de escritorio,
tabletas y teléfonos móviles. A continuación, se explica esta problemática y sus
implicaciones:

Experiencia del usuario deficiente: Cuando un sitio web no es responsivo, su diseño

y contenido no se ajustan adecuadamente al tamaño y resolución de la pantalla del
dispositivo del usuario. Esto resulta en una experiencia de usuario negativa, con
elementos mal alineados, texto ilegible y botones inaccesibles. Los visitantes se
sienten frustrados y pueden abandonar el sitio en busca de alternativas más fáciles
de usar.

Pérdida de oportunidades de negocio: En el sector turismo, la capacidad de los

usuarios para navegar y reservar servicios en línea es esencial. Los sitios web no
responsive pueden dificultar la búsqueda de información sobre hoteles, vuelos,
atracciones turísticas, y otros servicios relacionados con el turismo. Esto puede
llevar a la pérdida de oportunidades de negocio, ya que los usuarios pueden optar
por sitios web más funcionales y receptivos.

Dificultades en la promoción de ofertas y promociones: Las empresas turísticas

dependen en gran medida de la promoción de ofertas y promociones para atraer a
los clientes. Un sitio web no responsive dificulta la presentación efectiva de estas

22
ofertas, lo que puede resultar en una menor participación de los usuarios y una
menor conversión en ventas.

Impacto en la imagen de marca: La falta de responsividad en un sitio web puede dar

la impresión de que una empresa no está actualizada tecnológicamente o no se
preocupa por la satisfacción del cliente. Esto puede dañar la imagen de marca de la
empresa y socavar la confianza de los usuarios.

Desafíos en la retención de clientes: Los sitios web responsivos no solo atraen a

nuevos clientes, sino que también contribuyen a la retención de clientes existentes.
La falta de responsividad puede hacer que los clientes habituales se sientan
incómodos y opten por buscar alternativas, lo que puede afectar la lealtad a la
marca.
En resumen, la falta de sitios web responsivos en el sector turismo genera una
problemática que afecta negativamente la experiencia del usuario, las oportunidades
de negocio, la promoción de ofertas, la imagen de marca y la retención de clientes.
Para abordar esta problemática, las empresas turísticas deben invertir en el
desarrollo de sitios web que sean completamente responsivos, lo que contribuirá a
mejorar la satisfacción del usuario y el rendimiento general del negocio en un
entorno cada vez más digital.

BIBLIOGRAFÍA

● Toapanta, A. (2023). Responsive Web Design - Manual completo. Retrieved

October 5, 2023, from Academia.edu website:

https://www.academia.edu/15179802/Responsive_Web_Design_Manual_com

pleto

23
● García, N. (2023). Responsive Web Design. Retrieved October 5, 2023, from

Academia.edu website:

https://www.academia.edu/17289808/Responsive_Web_Design

● Media Queries. (n.d.). Retrieved from

https://academicos.azc.uam.mx/jfg/cursos_extra/responsivos/08_Media_Quer

ies.pdf

● Alba García Ferro. (2018, March 13). Alsernet - Diseño Web | Diseño Tiendas

Online | SEO Coruña. Retrieved October 5, 2023, from Alsernet.es website:

https://www.alsernet.es/blog/breakpoints-diseno-responsive

● Garro, A. (2014). Módulo Media Queries | CSS 3. Retrieved October 5, 2023,

from Arkaitzgarro.com website: https://www.arkaitzgarro.com/css3/capitulo-

9.html

● Campos, O. (2012, April 24). ¿Cómo funciona el breakpoint en un depurador

de C/C++? Retrieved October 5, 2023, from Genbeta.com website:

https://www.genbeta.com/desarrollo/como-funciona-el-breakpoint-en-un-

depurador-de-c-c

● Labrada Martínez, E., & Ceballos, C. (n.d.). DISEÑO WEB ADAPTATIVO O

RESPONSIVO. Retrieved from

https://www.revista.unam.mx/vol.14/num1/art07/art07.pdf

24