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

69

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

Muchas gracias!!!

Ing. Henry Llanos CarranzaDocente Cibertecphllanos@cibertec.edu.pehllanosc@hotmail.com

80