Programación web II

Unidad 3. Diseño web profesional

Ingeniería en Desarrollo de Software

8º Semestre

Programa de la asignatura:
Programación web II

Unidad 3. Diseño web profesional

Actividades de aprendizaje

Clave:
15144843

Universidad Abierta y a Distancia de México

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 1

Programación web II
Unidad 3. Diseño web profesional

Actividad 1. Importancia del diseño responsivo con bootstrap

Actividad 1: Importancia del diseño responsivo con Bootstrap

Propósito: Conocer e identificar las características principales de un diseño

responsivo en web.
Hacerlo que se pide:

Hacer un mapa conceptual referente al concepto de diseño responsivo y subirlo

al foro.
Ingresa al Foro, lee detenidamente la participación de uno de tus
compañeros(as). Una vez que hayas leído la participación de tu compañero(a),
responde con una aportación a su participación.
.

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 2

Programación web II
Unidad 3. Diseño web profesional

INTRODUCCION

Con el paso de los días, la tecnología va avanzando a pasos gigantes, en estos

tiempos ya la mayoría de las personas cuentan con un dispositivo, llámese: Celular,
Tablet, PC, Laptop, Smartphone, Smartwatch, etc. Es por lo cual las paginas web
deben de ir evolucionando de tal manera que se puedan adaptar a cualquier
dispositivo y sistema operativo

Dicha adaptabilidad consiste en el tamaño de la pantalla de dicho dispositivo, es

decir se debe de adaptar a cualquier tamaño y entono donde se este ejecutando el
sitio web.

Por lo cual se creó el diseño Responsive, que consiste en adaptar los sitios web a
todas las pantallas y plataformas donde se ejecute.

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 3

Programación web II
Unidad 3. Diseño web profesional

DISEÑO RESPONSIVE.

Un diseño responsive consiste en adaptar el sitio web a cualquier plataforma,

entorno o dispositivo que se este ejecutando el sitio web.

En otras palabras, adaptar un diseño web a un diseño responsive consiste en

calibrar y adaptar los elementos de la web de tal forma que se ajusten al ancho de
cada dispositivo para poder tener una visualización óptima y mostrar los mismos
contenidos para que cualquier persona pueda acceder a ellos sin ningún tipo de
dificultad.

CARACTERISTICAS

- Adaptar el ancho de la web al ancho del dispositivo.

El diseño pasa de ser un diseño horizontal a un diseño vertical, la web se adapta al

ancho del dispositivo, el scroll horizontal desaparece, siendo más cómoda la
navegación y la visualización de la web. La fluidez de contenido hace que el usuario
no tenga que desplazarse horizontalmente.

- Reorganización de los contenidos y elementos de la web.

Los contenidos deben de disponerse de tal forma que se puedan ver correctamente
en todas las pantallas. Reajustar el tamaño y la separación entre los contenidos
(Textos, imágenes, botones…) según el ancho del dispositivo para que la
navegación resulte fácil.

- Simplificar.

En una versión móvil no podemos mostrar todo lo que aparece en una pantalla de
ordenador, hay que priorizar y seleccionar los elementos que sean necesarios,
eliminar objetos gráficos que únicamente son estéticos para poder tener menos
carga visual.

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 4

Programación web II
Unidad 3. Diseño web profesional

- Cambio de apariencia de algunos elementos.

El menú, por ejemplo, pasa de ser un menú visible a desplegable, un icono que, al
pinchar sobre él, se despliegan los elementos del menú para poder acceder a los
enlaces. Este cambio tiene por objetivo ahorrar espacio y optimizar, labor de gran
importancia en una versión móvil.

VENTAJAS DE UN DISEÑO RESPONSIVE

- Aumento de la velocidad de carga.

Como ya hemos dicho antes en un diseño responsive se eliminan los elementos

que no son necesarios por tanto al haber menos elementos que descargar, la web
se carga más rápido.

- No afecta negativamente al SEO.

Google ha informado a los webmaster que las webs con un diseño responsive
gozarán de una mejor posición de sus resultados de búsqueda en estos dispositivos
móviles.

Evita el contenido duplicado, únicamente existe una web y esta es la que se adapta
a los distintos dispositivos. No hay duplicidad en la URL.

- Ahorro de tiempo y de costes de mantenimiento debido a que la gestión de un

único sitio web es más económico.

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 5

Programación web II
Unidad 3. Diseño web profesional

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 6

Programación web II
Unidad 3. Diseño web profesional

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 7

Programación web II
Unidad 3. Diseño web profesional

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 8

Programación web II
Unidad 3. Diseño web profesional

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 9

Programación web II
Unidad 3. Diseño web profesional

BIBLIOGRAFIA

https://www.pometagrafica.com/web-responsive-beneficios/

http://www.staffcreativa.pe/blog/beneficios-diseno-web-responsive/

https://www.internacionalweb.com/noticias/caracteristicas-y-ventajas-del-diseno-
responsive-para-tu-pagina-web

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 10