Desarrollo Web Front-End utilizando Diseño...
80
Desarrollo Web Front-End utilizando Diseño Adaptativo Ing. Henry Llanos Carranza
Transcript of Desarrollo Web Front-End utilizando Diseño...
Desarrollo Web Front-Endutilizando Diseño Adaptativo
Ing. Henry Llanos Carranza
ObjetivosDesarrollo Web Front-End utilizando Diseño
Adaptativo
2
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
ÍndiceDesarrollo Web Front-End utilizando Diseño
Adaptativo
4
Índice
•Antecedentes.
•Desarrollo y Diseño Web.
•Front-End en el Desarrollo Web.
•Experiencia del Usuarios Web.
•Diseño Web Adaptativo.
5
Índice
•Frameworks para Diseño Web Adaptativo.
•Framework Bootstrap.
•Resumen.
•Dudas y Preguntas.
6
AntecedentesDesarrollo Web Front-End utilizando Diseño
Adaptativo
7
Antecedentes
Evolución de Dispositivos TI
8
Antecedentes
Evolución del Diseño Web : http://evolutionofweb.appspot.com/
9
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
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.
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
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
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
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
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
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
Antecedentes
Evolución de Diseño Web Adaptativo
18
Antecedentes
Evolución de Diseño Web Adaptativo
19
Antecedentes
Evolución de Diseño Web Adaptativo
20
Antecedentes
Evolución de Diseño Web Adaptativo
21
Antecedentes
Evolución de Diseño Web Adaptativo
22
Antecedentes
Evolución de Diseño Web Adaptativo
23
Antecedentes
Evolución de Diseño Web Adaptativo
24
Desarrollo y Diseño WebDesarrollo Web Front-End utilizando Diseño
Adaptativo
25
Desarrollo y DiseñoWeb
26
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
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
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
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
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
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
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
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
Front-End en el Desarrollo WebDesarrollo Web Front-End utilizando Diseño
Adaptativo
35
Front-End en el DesarrolloWeb
36
Front-End en el DesarrolloWeb
37
Front-End en el DesarrolloWeb
38
Front-End en el DesarrolloWeb
39
Front-End en el DesarrolloWeb
40
Front-End en el DesarrolloWeb
Desarrollador
41
Front-End en el DesarrolloWeb
Diseñador
42
Front-End en el DesarrolloWeb
Desarrollador y Diseñador Web Front-End
43
Experiencia del Usuario WebDesarrollo Web Front-End utilizando Diseño
Adaptativo
44
Experiencia del UsuarioWeb
45
Experiencia del UsuarioWeb
46
Experiencia del UsuarioWeb
47
Experiencia del UsuarioWeb
48
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.
Experiencia del UsuarioWeb
50
Usabilidad Navegabilidad DiseñoNecesidades del Usuario
Necesidades del Negocio
Contenido Interactividad
Diseño Web AdaptativoDesarrollo Web Front-End utilizando Diseño
Adaptativo
51
Diseño Web Adaptativo
52
Diseño Web Adaptativo
53
Diseño Web Adaptativo
54
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.
Diseño Web Adaptativo
56
Se basa en el concepto de ONE WEB es decirconstruir una “Web para Todos” y “Accesibledesde cualquier Dispositivo”.
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.
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.
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.
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.
Framework para Diseño Web Adaptativo
Desarrollo Web Front-End utilizando Diseño Adaptativo
61
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.
Framework Diseño WebAdaptativo
63
Principales Frameworks Front End•Twiter Bootstrap•HTML5 Boilerplate•Foundation•Yahoo Pure•HTML Kickstart•Skeleton
Framework Diseño WebAdaptativo
64
Principales Frameworks Front End•Less Framework•Gridless•Angular JS•Zebra•52 Framework•Layer CSS
Framework BootstrapDesarrollo Web Front-End utilizando Diseño
Adaptativo
65
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.
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/
Framework Bootstrap
68
•Utiliza Media Queries HTML5 y Sistema deRejillas para el Diseño Adaptativo.
http://getbootstrap.com/
Framework Bootstrap
70
• Integra lo anterior con componentes ycomportamientos JavaScript como JQuery.
http://getbootstrap.com/
Framework Bootstrap
71
•Es soportado por la mayoría de navegadores.
http://getbootstrap.com/
Framework Bootstrap
72
•Se puede utilizar a través de plantillaspredefinidas como base para el Diseño.
http://startbootstrap.com/
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/
Framework Bootstrap
74
Estructura del Framework
http://startbootstrap.com/
ResumenDesarrollo Web Front-End utilizando Diseño
Adaptativo
75
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
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
Dudas y PreguntasDesarrollo Web Front-End utilizando Diseño
Adaptativo
78
Dudas y Preguntas
79
