(CIBERTEC) II Seminario de Periodismo & Redes Sociales (Cibertec - UPC) Lima - Perú
Desarrollo Web Front-End utilizando Diseño...
Transcript of Desarrollo Web Front-End utilizando Diseño...
![Page 1: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/1.jpg)
Desarrollo Web Front-Endutilizando Diseño Adaptativo
Ing. Henry Llanos Carranza
![Page 2: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/2.jpg)
ObjetivosDesarrollo Web Front-End utilizando Diseño
Adaptativo
2
![Page 3: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/3.jpg)
Objetivos
•Conocer el uso Diseño Adaptativo en el Diseño yDesarrollo Web.
•Utilizar un Framework Front-End comocomplemento para el Diseño y Desarrollo deAplicaciones Web.
•Dar importancia al uso del Diseño Adaptativo enmejora de la Experiencia de los Usuarios en sunavegación Web.
3
![Page 4: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/4.jpg)
ÍndiceDesarrollo Web Front-End utilizando Diseño
Adaptativo
4
![Page 5: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/5.jpg)
Índice
•Antecedentes.
•Desarrollo y Diseño Web.
•Front-End en el Desarrollo Web.
•Experiencia del Usuarios Web.
•Diseño Web Adaptativo.
5
![Page 6: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/6.jpg)
Índice
•Frameworks para Diseño Web Adaptativo.
•Framework Bootstrap.
•Resumen.
•Dudas y Preguntas.
6
![Page 7: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/7.jpg)
AntecedentesDesarrollo Web Front-End utilizando Diseño
Adaptativo
7
![Page 8: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/8.jpg)
Antecedentes
Evolución de Dispositivos TI
8
![Page 9: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/9.jpg)
Antecedentes
Evolución del Diseño Web : http://evolutionofweb.appspot.com/
9
![Page 10: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/10.jpg)
Antecedentes
Evolución de Diseño Web
10
1990 : HTML1991: Primer
Website
1992: Diseño basado en
Tablas
1994 : Creación del W3C
1996: Flash y JavaScript
1998: Diseño basado en CSS / Website en PHP
2003: CSS & Web 2.0
2008: Web Móvil
2010: HTML5
![Page 11: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/11.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
11
2000: Diferencias
entre Diseño
Impreso y Web
2009: Diseño Fluido
2010: Diseño
Adaptativo
2011: OneWeb
2011: Diseño
Adaptable del Boston
Globe
2012: Diseño Web Adaptable como un
Estándar de Diseño
Front End.
![Page 12: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/12.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
•2000: Jhon Alssop plantea en su articulo “A Daoof Web Design” los problemas en Diseñar lossitios Web, basándonos en Diseños de Impresiónfísicos. El concluye que la Web necesitaAdaptarse a tamaños, colores y tipografías
http://alistapart.com/article/dao
12
![Page 13: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/13.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo•2009: Ethan Marcotte en su articulo “DiseñoWeb con Rejillas Fluidas”, plantea el DiseñoFluido. Es decir utilizar columnas o rejillas en elDiseño Web para que se adapte a las pantallasde cada dispositivo. Utiliza medidas relativas enporcentajes para los contenidos.
http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#
13
![Page 14: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/14.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
•2010: Ethan Marcotte en su articulo “ResponsiveWeb Design”, define las bases del Diseño WebAdaptativo. Propone adaptar la Usabilidad delDiseño a los diferentes dispositivos para navegar enla Web. Utiliza técnicas como Adaptar, Colapsar yOcultar contenidos además del Diseño Fluido
http://xn--diseowebresponsive-q0b.org/
14
![Page 15: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/15.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
•2011: Jeremy Keith en “One Web” y “There isno Mobile Web”. Plantea una Unica Web, esdecir un solo contenido el cual debe AdaptarseAutomáticamente a cada Dispositivo.
http://adactio.com/articles/4938/
http://adactio.com/links/5058/
15
![Page 16: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/16.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
•2011: El sitio web Boston Globe es el primermedio de comunicación en utilizar DiseñoAdaptativo.
http://www.bostonglobe.com/
http://www.slideshare.net/TheMediaConsortium/media-consortium-bglobe
16
![Page 17: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/17.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
•2012: El Diseño Web Adaptativo se convierteen una necesidad ante la aparición de diferentesdispositivos para navegar el la Web.
17
![Page 18: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/18.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
18
![Page 19: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/19.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
19
![Page 20: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/20.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
20
![Page 21: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/21.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
21
![Page 22: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/22.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
22
![Page 23: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/23.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
23
![Page 24: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/24.jpg)
Antecedentes
Evolución de Diseño Web Adaptativo
24
![Page 25: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/25.jpg)
Desarrollo y Diseño WebDesarrollo Web Front-End utilizando Diseño
Adaptativo
25
![Page 26: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/26.jpg)
Desarrollo y DiseñoWeb
26
![Page 27: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/27.jpg)
Desarrollo y DiseñoWeb
Como acabamos de ver el Diseño y DesarrolloWeb en la actualidad implica Dominar unconjunto de Tecnologías y Técnicas las cualespermitan Adaptar los Contenidos a cualquierDispositivo.
27
![Page 28: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/28.jpg)
Desarrollo y DiseñoWeb
No todos estamos capacitados o tenemos lashabilidades para dominar todas las técnicas ytecnologías revisadas
Para el Diseño y Desarrollo de un Sitio WebIntegral debemos formar equipos de trabajo condiferentes especialidades y habilidades.
28
![Page 29: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/29.jpg)
Desarrollo y DiseñoWeb
Entre las diferentes Especialidades para elDesarrollo y Diseño Web tenemos:
•Front End Developer
•Back End Developer
•Full Stack Developer
29
![Page 30: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/30.jpg)
Desarrollo y DiseñoWeb
Front End Developer:
Esta relacionado con la interacción del Usuariocon el Diseño a través de :• Interfaz.•Usabilidad.• La Experiencia del Usuario.
30
![Page 31: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/31.jpg)
Desarrollo y DiseñoWeb
Front End Developer:
Este especialista maneja las siguientestecnologías:• Lenguajes de Programación en HTML5, CSS,
JavaScript o JQuery.• Frameworks para Diseño Front-End.
31
![Page 32: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/32.jpg)
Desarrollo y DiseñoWeb
Back End Developer:
Es el especialista encargado de la arquitecturaque le da soporte al Front End, utiliza lassiguientes tecnologías:• Lenguajes de Programación para Aplicaciones Web.•Manejadores de Base de Datos.• Tecnologías de Servicios Web.• Frameworks para Desarrollo Back-End.
32
![Page 33: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/33.jpg)
Desarrollo y DiseñoWeb
Full Stack Developer:
Es aquel especialista que combina las habilidadesde un Front y Back End Developer. convirtiéndoloen un experto.
Utiliza y aprende las ultimas tecnologías enDiseño y Desarrollo Web.
Se preocupa de las necesidades de los usuarios.33
![Page 34: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/34.jpg)
Desarrollo y DiseñoWeb
Full Stack Developer:
Puede traducir las necesidades del negocio desdelos modelos de datos y llevarlos hasta la interfazdel usuario.
Integra Tecnologías y define Arquitecturasescalables en el tiempo.
34
![Page 35: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/35.jpg)
Front-End en el Desarrollo WebDesarrollo Web Front-End utilizando Diseño
Adaptativo
35
![Page 36: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/36.jpg)
Front-End en el DesarrolloWeb
36
![Page 37: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/37.jpg)
Front-End en el DesarrolloWeb
37
![Page 38: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/38.jpg)
Front-End en el DesarrolloWeb
38
![Page 39: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/39.jpg)
Front-End en el DesarrolloWeb
39
![Page 40: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/40.jpg)
Front-End en el DesarrolloWeb
40
![Page 41: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/41.jpg)
Front-End en el DesarrolloWeb
Desarrollador
41
![Page 42: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/42.jpg)
Front-End en el DesarrolloWeb
Diseñador
42
![Page 43: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/43.jpg)
Front-End en el DesarrolloWeb
Desarrollador y Diseñador Web Front-End
43
![Page 44: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/44.jpg)
Experiencia del Usuario WebDesarrollo Web Front-End utilizando Diseño
Adaptativo
44
![Page 45: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/45.jpg)
Experiencia del UsuarioWeb
45
![Page 46: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/46.jpg)
Experiencia del UsuarioWeb
46
![Page 47: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/47.jpg)
Experiencia del UsuarioWeb
47
![Page 48: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/48.jpg)
Experiencia del UsuarioWeb
48
![Page 49: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/49.jpg)
Experiencia del UsuarioWeb
49
Es la experiencia que van tener los usuariosfinales al utilizar los sitios web.
Muchas veces no se toma en cuenta al usuario enla etapa de Desarrollar y Diseñar sitios web.
![Page 50: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/50.jpg)
Experiencia del UsuarioWeb
50
Usabilidad Navegabilidad DiseñoNecesidades del Usuario
Necesidades del Negocio
Contenido Interactividad
![Page 51: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/51.jpg)
Diseño Web AdaptativoDesarrollo Web Front-End utilizando Diseño
Adaptativo
51
![Page 52: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/52.jpg)
Diseño Web Adaptativo
52
![Page 53: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/53.jpg)
Diseño Web Adaptativo
53
![Page 54: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/54.jpg)
Diseño Web Adaptativo
54
![Page 55: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/55.jpg)
Diseño Web Adaptativo
55
Es una técnica de Diseño y Desarrollo WebFront End en las cuales permite laadaptabilidad de los contenidos cualquierdispositivo.
![Page 56: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/56.jpg)
Diseño Web Adaptativo
56
Se basa en el concepto de ONE WEB es decirconstruir una “Web para Todos” y “Accesibledesde cualquier Dispositivo”.
![Page 57: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/57.jpg)
Diseño Web Adaptativo
57
Ventajas
•El ahorro de costos es considerable, puesto quese desarrolla y diseña una sola versiónadaptable a cualquier dispositivo.
•Los usuarios actuales utilizan diferentesdispositivos para navegar en la web.
![Page 58: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/58.jpg)
Diseño Web Adaptativo
58
Ventajas
•Desarrollo y Diseño Web asequible, esto graciasa los frameworks Front End lo cuales permitenahorrar horas de trabajo.
•Aporta mayor Usabilidad en la experiencia web.
•Genera Valor Agregado al Diseño y DesarrolloWeb.
![Page 59: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/59.jpg)
Diseño Web Adaptativo
59
Ventajas
•Gran Impacto en los usuarios por ser unatecnología relativamente nueva.
•Facilidad para las actualizaciones.
•Permite asociar a las Marcas representadas conla innovación y creatividad.
![Page 60: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/60.jpg)
Diseño Web Adaptativo
60
Desventajas
•Pocas opciones de configuración personalizada.
•El Diseño no satisface en su totalidad a lasnecesidades del usuario en dispositivos móviles.
•El tiempo de que se toma es mayor encomparación con el Diseño y Desarrollo en sitiosWeb Nativos.
![Page 61: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/61.jpg)
Framework para Diseño Web Adaptativo
Desarrollo Web Front-End utilizando Diseño Adaptativo
61
![Page 62: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/62.jpg)
Framework Diseño WebAdaptativo
62
Framework
Es una estructura conceptual y de soportetecnológico definido y probado.
Se utiliza como un esquema para laimplementación de algún tipo de tecnología.
Poseen un conjunto de librerías predefinidas yherramientas listas para usar.
![Page 63: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/63.jpg)
Framework Diseño WebAdaptativo
63
Principales Frameworks Front End•Twiter Bootstrap•HTML5 Boilerplate•Foundation•Yahoo Pure•HTML Kickstart•Skeleton
![Page 64: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/64.jpg)
Framework Diseño WebAdaptativo
64
Principales Frameworks Front End•Less Framework•Gridless•Angular JS•Zebra•52 Framework•Layer CSS
![Page 65: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/65.jpg)
Framework BootstrapDesarrollo Web Front-End utilizando Diseño
Adaptativo
65
![Page 66: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/66.jpg)
Framework Bootstrap
66
•Es unos de los principales Frameworks deDiseño y Desarrollo Front End en la actualidad.
•Framework elegante, intuitivo y con muchaaceptación entre los diseñadores ydesarrolladores.
![Page 67: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/67.jpg)
Framework Bootstrap
67
•Permite el Diseño y Desarrollo Web de manerarápida.
•Permite crear interfaces limpias y simples.
•Framework para Diseño Adaptativo.
http://getbootstrap.com/
![Page 68: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/68.jpg)
Framework Bootstrap
68
•Utiliza Media Queries HTML5 y Sistema deRejillas para el Diseño Adaptativo.
http://getbootstrap.com/
![Page 70: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/70.jpg)
Framework Bootstrap
70
• Integra lo anterior con componentes ycomportamientos JavaScript como JQuery.
http://getbootstrap.com/
![Page 71: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/71.jpg)
Framework Bootstrap
71
•Es soportado por la mayoría de navegadores.
http://getbootstrap.com/
![Page 72: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/72.jpg)
Framework Bootstrap
72
•Se puede utilizar a través de plantillaspredefinidas como base para el Diseño.
http://startbootstrap.com/
![Page 73: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/73.jpg)
Framework Bootstrap
73
Empezar con Bootstrap
•Descargar el código CSS y JavaScript compilado.
•Descargar el Código fuente.
•Descargar el código fuente en formato SASS(lenguaje Script traducido a CSS)
http://startbootstrap.com/
![Page 74: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/74.jpg)
Framework Bootstrap
74
Estructura del Framework
http://startbootstrap.com/
![Page 75: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/75.jpg)
ResumenDesarrollo Web Front-End utilizando Diseño
Adaptativo
75
![Page 76: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/76.jpg)
Resumen
•Revisamos los Antecedentes del Diseño yDesarrollo Web.
•Aprendimos en que consiste el Diseño yDesarrollo Web en la actualidad.
•Verificamos que habilidades son necesarias paraser un Desarrollador y Diseñador Web FrontEnd.
76
![Page 77: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/77.jpg)
Resumen
•Conocimos en que consiste la Experiencia Webde los usuarios.
•Aprendimos sobre el Diseño Adaptativo.
•Revisamos los Frameworks Front End para elDiseño Adaptativo.
•Utilizamos el Framework Bootstrap.
77
![Page 78: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/78.jpg)
Dudas y PreguntasDesarrollo Web Front-End utilizando Diseño
Adaptativo
78
![Page 79: Desarrollo Web Front-End utilizando Diseño Adaptativoimy.laureate.net/Faculty/webinars/Documents/Serie de CIBERTEC...Objetivos •Conocer el uso Diseño Adaptativo en el Diseño y](https://reader031.fdocuments.co/reader031/viewer/2022013107/5bc3b7f809d3f299608d4900/html5/thumbnails/79.jpg)
Dudas y Preguntas
79