Dpw2_u3_a1_gudg.docx

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-disenoresponsive-para-tu-pagina-web

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

10