Desarrollo Web Front-End utilizando Diseño Adaptativo. Ing. Henry Llanos Carranza

Transcripción

1 Desarrollo Web Front-End utilizando Diseño Adaptativo Ing. Henry Llanos Carranza

2 Objetivos Desarrollo Web Front-End utilizando Diseño Adaptativo 2

3 Objetivos Conocer el uso Diseño Adaptativo en el Diseño y Desarrollo Web. Utilizar un Framework Front-End como complemento para el Diseño y Desarrollo de Aplicaciones Web. Dar importancia al uso del Diseño Adaptativo en mejora de la Experiencia de los Usuarios en su navegación Web. 3

4 Índice Desarrollo Web Front-End utilizando Diseño Adaptativo 4

5 Índice Antecedentes. Desarrollo y Diseño Web. Front-End en el Desarrollo Web. Experiencia del Usuarios Web. Diseño Web Adaptativo. 5

6 Índice Frameworks para Diseño Web Adaptativo. Framework Bootstrap. Resumen. Dudas y Preguntas. 6

7 Antecedentes Desarrollo Web Front-End utilizando Diseño Adaptativo 7

8 Antecedentes Evolución de Dispositivos TI 8

9 Antecedentes Evolución del Diseño Web : 9

10 Antecedentes Evolución de Diseño Web 1990 : HTML 1991: Primer Website 1992: Diseño basado en Tablas 1998: Diseño basado en CSS / Website en PHP 1996: Flash y JavaScript 1994 : Creación del W3C 2003: CSS & Web : Web Móvil 2010: HTML5 10

11 Antecedentes Evolución de Diseño Web Adaptativo 2000: Diferencias entre Diseño Impreso y Web 2009: Diseño Fluido 2010: Diseño Adaptativo 2011: One Web 2011: Diseño Adaptable del Boston Globe 2012: Diseño Web Adaptable como un Estándar de Diseño Front End. 11

12 Antecedentes Evolución de Diseño Web Adaptativo 2000: Jhon Alssop plantea en su articulo A Dao of Web Design los problemas en Diseñar los sitios Web, basándonos en Diseños de Impresión físicos. El concluye que la Web necesita Adaptarse a tamaños, colores y tipografías 12

13 Antecedentes Evolución de Diseño Web Adaptativo 2009: Ethan Marcotte en su articulo Diseño Web con Rejillas Fluidas, plantea el Diseño Fluido. Es decir utilizar columnas o rejillas en el Diseño Web para que se adapte a las pantallas de cada dispositivo. Utiliza medidas relativas en porcentajes para los contenidos. 13

14 Antecedentes Evolución de Diseño Web Adaptativo 2010: Ethan Marcotte en su articulo Responsive Web Design, define las bases del Diseño Web Adaptativo. Propone adaptar la Usabilidad del Diseño a los diferentes dispositivos para navegar en la Web. Utiliza técnicas como Adaptar, Colapsar y Ocultar contenidos además del Diseño Fluido 14

15 Antecedentes Evolución de Diseño Web Adaptativo 2011: Jeremy Keith en One Web y There is no Mobile Web. Plantea una Unica Web, es decir un solo contenido el cual debe Adaptarse Automáticamente a cada Dispositivo

16 Antecedentes Evolución de Diseño Web Adaptativo 2011: El sitio web Boston Globe es el primer medio de comunicación en utilizar Diseño Adaptativo

17 Antecedentes Evolución de Diseño Web Adaptativo 2012: El Diseño Web Adaptativo se convierte en una necesidad ante la aparición de diferentes dispositivos para navegar el la Web. 17

18 Antecedentes Evolución de Diseño Web Adaptativo 18

25 Desarrollo y Diseño Web Desarrollo Web Front-End utilizando Diseño Adaptativo 25

26 Desarrollo y Diseño Web 26

27 Desarrollo y Diseño Web Como acabamos de ver el Diseño y Desarrollo Web en la actualidad implica Dominar un conjunto de Tecnologías y Técnicas las cuales permitan Adaptar los Contenidos a cualquier Dispositivo. 27

28 Desarrollo y Diseño Web No todos estamos capacitados o tenemos las habilidades para dominar todas las técnicas y tecnologías revisadas Para el Diseño y Desarrollo de un Sitio Web Integral debemos formar equipos de trabajo con diferentes especialidades y habilidades. 28

29 Desarrollo y Diseño Web Entre las diferentes Especialidades para el Desarrollo y Diseño Web tenemos: Front End Developer Back End Developer Full Stack Developer 29

30 Front End Developer: Desarrollo y Diseño Web Esta relacionado con la interacción del Usuario con el Diseño a través de : Interfaz. Usabilidad. La Experiencia del Usuario. 30

31 Front End Developer: Desarrollo y Diseño Web Este especialista maneja las siguientes tecnologías: Lenguajes de Programación en HTML5, CSS, JavaScript o JQuery. Frameworks para Diseño Front-End. 31

32 Back End Developer: Desarrollo y Diseño Web Es el especialista encargado de la arquitectura que le da soporte al Front End, utiliza las siguientes 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

33 Full Stack Developer: Desarrollo y Diseño Web Es aquel especialista que combina las habilidades de un Front y Back End Developer. convirtiéndolo en un experto. Utiliza y aprende las ultimas tecnologías en Diseño y Desarrollo Web. Se preocupa de las necesidades de los usuarios. 33

34 Full Stack Developer: Desarrollo y Diseño Web Puede traducir las necesidades del negocio desde los modelos de datos y llevarlos hasta la interfaz del usuario. Integra Tecnologías y define Arquitecturas escalables en el tiempo. 34

35 Front-End en el Desarrollo Web Desarrollo Web Front-End utilizando Diseño Adaptativo 35

36 Front-End en el Desarrollo Web 36

41 Desarrollador Front-End en el Desarrollo Web 41

42 Front-End en el Desarrollo Web Diseñador 42

43 Front-End en el Desarrollo Web Desarrollador y Diseñador Web Front-End 43

44 Experiencia del Usuario Web Desarrollo Web Front-End utilizando Diseño Adaptativo 44

45 Experiencia del Usuario Web 45

49 Experiencia del Usuario Web Es la experiencia que van tener los usuarios finales al utilizar los sitios web. Muchas veces no se toma en cuenta al usuario en la etapa de Desarrollar y Diseñar sitios web. 49

50 Experiencia del Usuario Web Usabilidad Navegabilidad Diseño Necesidades del Usuario Necesidades del Negocio Contenido Interactividad 50

51 Diseño Web Adaptativo Desarrollo Web Front-End utilizando Diseño Adaptativo 51

52 Diseño Web Adaptativo 52

55 Diseño Web Adaptativo Es una técnica de Diseño y Desarrollo Web Front End en las cuales permite la adaptabilidad de los contenidos cualquier dispositivo. 55

56 Diseño Web Adaptativo Se basa en el concepto de ONE WEB es decir construir una Web para Todos y Accesible desde cualquier Dispositivo. 56

57 Diseño Web Adaptativo Ventajas El ahorro de costos es considerable, puesto que se desarrolla y diseña una sola versión adaptable a cualquier dispositivo. Los usuarios actuales utilizan diferentes dispositivos para navegar en la web. 57

58 Diseño Web Adaptativo Ventajas Desarrollo y Diseño Web asequible, esto gracias a los frameworks Front End lo cuales permiten ahorrar horas de trabajo. Aporta mayor Usabilidad en la experiencia web. Genera Valor Agregado al Diseño y Desarrollo Web. 58

59 Diseño Web Adaptativo Ventajas Gran Impacto en los usuarios por ser una tecnología relativamente nueva. Facilidad para las actualizaciones. Permite asociar a las Marcas representadas con la innovación y creatividad. 59

60 Diseño Web Adaptativo Desventajas Pocas opciones de configuración personalizada. El Diseño no satisface en su totalidad a las necesidades del usuario en dispositivos móviles. El tiempo de que se toma es mayor en comparación con el Diseño y Desarrollo en sitios Web Nativos. 60

61 Framework para Diseño Web Adaptativo Desarrollo Web Front-End utilizando Diseño Adaptativo 61

62 Framework Framework Diseño Web Adaptativo Es una estructura conceptual y de soporte tecnológico definido y probado. Se utiliza como un esquema para la implementación de algún tipo de tecnología. Poseen un conjunto de librerías predefinidas y herramientas listas para usar. 62

63 Framework Diseño Web Adaptativo Principales Frameworks Front End Twiter Bootstrap HTML5 Boilerplate Foundation Yahoo Pure HTML Kickstart Skeleton 63

64 Framework Diseño Web Adaptativo Principales Frameworks Front End Less Framework Gridless Angular JS Zebra 52 Framework Layer CSS 64

65 Framework Bootstrap Desarrollo Web Front-End utilizando Diseño Adaptativo 65

66 Framework Bootstrap Es unos de los principales Frameworks de Diseño y Desarrollo Front End en la actualidad. Framework elegante, intuitivo y con mucha aceptación entre los diseñadores y desarrolladores. 66

67 Framework Bootstrap Permite el Diseño y Desarrollo Web de manera rápida. Permite crear interfaces limpias y simples. Framework para Diseño Adaptativo. 67

68 Framework Bootstrap Utiliza Media Queries HTML5 y Sistema de Rejillas para el Diseño Adaptativo. 68

69 Framework Bootstrap 69

70 Framework Bootstrap Integra lo anterior con componentes y comportamientos JavaScript como JQuery. 70

71 Framework Bootstrap Es soportado por la mayoría de navegadores. 71

72 Framework Bootstrap Se puede utilizar a través de plantillas predefinidas como base para el Diseño. 72

73 Framework Bootstrap 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) 73

74 Framework Bootstrap Estructura del Framework 74

75 Resumen Desarrollo Web Front-End utilizando Diseño Adaptativo 75

76 Resumen Revisamos los Antecedentes del Diseño y Desarrollo Web. Aprendimos en que consiste el Diseño y Desarrollo Web en la actualidad. Verificamos que habilidades son necesarias para ser un Desarrollador y Diseñador Web Front End. 76

77 Resumen Conocimos en que consiste la Experiencia Web de los usuarios. Aprendimos sobre el Diseño Adaptativo. Revisamos los Frameworks Front End para el Diseño Adaptativo. Utilizamos el Framework Bootstrap. 77

78 Dudas y Preguntas Desarrollo Web Front-End utilizando Diseño Adaptativo 78

79 Dudas y Preguntas 79

80 Muchas gracias!!! Ing. Henry Llanos Carranza Docente Cibertec 80