Producción Digital I. Lic. Wenceslao Zavala 23 de Agosto Wenceslao Zavala Producción Digital I - Universidad de Palermo

Transcripción

1 Producción Digital I Lic. Wenceslao Zavala 23 de Agosto 2017

2 Trabajo Práctico N 1 Desarrollo Proyecto de un Sitio de un Artista Realizar un proyecto web de un sitio a elección (no existente) En el informe del proyecto el alumno deberá establecer los siguientes puntos: Etapa de Estrategia Objetivo del Sitio Necesidades del Usuario Etapa de Alcance Especificaciones funcionales Requerimientos de contenido Etapa de Estructura Diseño de Interacción. Definir que interacciones podrá realizar el usuario Arquitectura de la Información (mapa del sitio): Definir las secciones (pantallas principales) que habrá en el sitio con sus contenidos. Boceto o wireframe de la pantalla de inicio

3 Cronograma de Trabajo Trabajos Prácticos cursada Se entregan a la clase siguiente a la que fue pedido. Trabajo no entregado en fecha, se descuenta el 20% de la nota del trabajo por semana. 3 clases sin entregar, incompleto = rehacer Examen Parcial 1 parte teórico - 2 parte práctico = 25 de Octubre 2017 Asistencias: 2 faltas consecutivas o 3 faltas en la cursada = RECURSA Trabajo Práctico de Examen Final Se realiza un nuevo sitio que responda a las consignas solicitadas

4 Objetivo de la Asignatura Conocer y entender las herramientas y técnicas necesarias para maquetar un sitio web adaptable a los diferentes dispositivos logrando una experiencia de usuario positiva.

5 Adaptable a Diferentes Dispositivos 5

6 HTML & CSS Lenguaje para armar páginas web <!DOCTYPE html> <html> <title>título de la Página</title> <body> <h1>éste es un Titular o encabezado</h1> <p>esto es un párrafo</p> </body> </html>

7 HTML + CSS HTML CSS <contenidos> apariencia {} 7

8 Sistemas Operativos - Win10 Win8 Win7 Vista WinXP Linux Mac Mobile Feb % 10.5% 33.6% 0.2% 1.0% 5.7% 10.5% 6.2% Dic % 11.1% 34.6% 0.2% 0.0% 1.0% 5.6% 6.4% Sep Jun Mar % 11.4% 37.0% 0.2% 0.0% 1.3% 5.8% 5.7% 24.0% 13.0% 39.8% 0.3% 0.1% 1.5% 6.0% 54% 19.5% 14.7% 42.4% 0.4% 0.1% 1.9% 5.5% 5.1%

9 Navegadores - Chrome IE/Edge Firefox Safari Opera % 4.8 % 15.0 % 3.6 % 1.0 % % 4.8 % 15.5 % 3.5 % 1.1 %

10 Resoluciones de Pantallas Date Other high 1920x x x x x 768 Lower January % 17% 35% 5% 4% 3% 4.4% January % 18% 35% 6% 4% 3% 3.3% January % 16% 33% 7% 5% 4% 2.3% January % 13% 31% 8% 7% 6% 1.0% January % 11% 25% 10% 8% 9% 1.0%

11 Convenciones Web Diseño Web El Monitor: Unidad de Medida (pixel) Dimensión de Trabajo (según pantalla del usuario promedio) El Color: Colores seguros para la Web (colores hexadecimales) Colores de pantalla (RGB) Las imágenes: 72 Resolución (DPI) Paleta de colores (RBG - Escala de grises - hexadecimales) Formatos JPG - GIF - PNG Las Fuentes Tipográficas: Verdana (creada para la computadora) Arial, Courrier, Times, Georgia, Geneva (predeterminadas S.O.) 11

12 Adaptable a Diferentes Dispositivos 12

13 UX? Se ocupa de relevar y diseñar las interacciones de una persona con un producto o servicio de una organización y crear una experiencia alrededor de ello.

14 Qué implica construir experiencias? El valor se encuentra en la capacidad de los productos y servicios de brindar experiencias positivas, únicas y memorables. Joseph Pine II y James H Gilmore The experience economy 14

15 Una buena experiencia se manifiesta cuando un usuario percibe emociones y sensaciones positivas.

16 Interfaz Experiencia de Usuario Sentidos Comportamiento Conocimiento Deseos Motivaciones Diseño Centrado en el usuario Interacción Arquitectura de Información Productos y Servicios Usabilidad Accesibilidad

17 Experiencia de Usuario Es la capacidad de una interfaz de generar sensaciones y emociones positivas durante el proceso de interacción con quien la utiliza. Sensaciones y emociones positivas: Amigable Intuitivo Entretenido Divertido Adictivo

18 Diseñando Experiencia de Usuario Modelo Conceptual Disciplinas Usabilidad + Metodología Diseño Centrado en el usuario Experiencia de Usuario (UX) UX = Metodología x Disciplinas

19 Que mide la Usabilidad: Facilidad de aprendizaje: menos errores Definiendo Usabilidad Eficiencia de uso: realizar las tareas más rápido Recordación: recuera cómo usarlo para la próxima Tolerancia a los errores: cuanto se equivoca Satisfacción de uso: más lealtad

20 Qué es el Diseño Centrado en el Usuario?

21 Diseño Centrado en el usuario Definición: El DCU es una metodología de trabajo de diseño de interfaces en la investigación y participación de quienes serán los usuarios finales de un determinado sitio web, software o aplicación. iterar Investigación Prototipado Validación Implementación Investigación generativa con usuarios Diseño: Experiencia Interacción Interfaces Arquitectura de Información Investigación evaluativa con usuarios Construcción Testeo

22 Experiencia de Usuario

25 Los 5 planes (Jesse James Garret.The Elements of User Experience) La Superficie trae todo lo visual unido: Cómo será el aspecto del producto final? El Esqueleto hace concreta a la estructura: Qué componentes permitirá a la gente a usar el sitio? La Estructura da forma al alcance: Cómo encajan y se comportan las piezas del sitio? El alcance transforma la estrategia en requisitos: Qué características del sitio se necesidad incluir? La estrategia es donde todo comienza: Qué queremos para publicar el sitio? Qué quieren los usuarios?

26 Elementos de la Experiencia de Usuario

27 Estrategia del Proyecto Web Estrategia La estrategia es donde todo comienza: Para qué queremos publicar el sitio? Qué quieren los usuarios?

28 Estrategia del Proyecto Web Objetivo: Cual es el objetivo de la realización del Sitio. Definir las metas del proyecto; éstas deben ser generales y específicas, con el fin de contar con el mayor detalle posible de lo que se desea conseguir. Audiencia: A quién va dirigido el sitio? Hacia qué grupo de personas (uno o más) estará enfocado el sitio. Función: Qué valor agregado tendrá el visitante del sitio? Qué se desea brindar en el sitio? Qué segmento del mercado espera ocupar? Estará orientado a generar una comunidad, newsletter, etc.?

29 Cuál será el mensaje, filosofía del sitio Cuáles serán los contenidos. Alcance del Proyecto Web Una vez recopilados los datos, podremos definir las acciones y el tipo de comunicación que utilizaremos para desarrollar la interfaz. Qué acciones realizan los usuarios en el sitio. Qué tecnología utilizaremos para desarrollar la interface. "El buen diseño viene de una buena planificación Una buena planificación de la estructura, presentación y comportamiento, lleva a una experiencia de usuario positiva

30 Elementos de la Experiencia de Usuario

31 Estructura del Proyecto Web Diseño de Interacción: Relacionado a describir el comportamiento y definir cómo el producto se acomoda y responde a dicho comportamiento. "El arte y la ciencia de organizar espacios de información con el fin de ayudar a los usuarios a satisfacer sus necesidades de información. La actividad de organización, clasificación y rotulado de los contenidos del sitio web para soportar la usabilidad y la buscabilidad."

32 Arquitectura de la Información

33 Wireframes Prototipo de baja fidelidad o también llamado wireframe es una representación esquemática del contenido que tendrá la interfaz. Sirve par representar las decisiones estructurales de diseño, es decir los elementos principales que formarán parte de cada pantalla sin ahondar en detalles estéticos o funcionales.

34 Wireframes

35 Wireframes

36 Wireframes

37 Wireframes

38 Wireframes

39 HTML (HyperText Mark-up Language)

40 HTML Hyper Text Mark-up Language Lenguaje de Marcas de Hipertexto

41 HTML Hiper: es lo contrario de lineal. Texto: se explica por sí solo. Marcado (etiquetas): es lo que se hace con el texto. Se marca el texto del mismo modo que en un programa de edición de textos con encabezados, viñetas, negrita, etc. Lenguaje: es el HTML. W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global".

42 Historia de HTML 1980: Origen de HTML: Tim Berners-Lee, propone un nuevo sistema de "hipertexto" para compartir documentos. 1991: primer documento formal con la descripción de HTML. 1993: primera propuesta oficial para convertir HTML en un estándar. 1994: Nace la W3C (World Wide Web Consortium) 1995: estándar HTML : se publica la versión HTML 3.2 (applets de Java y mejora de las imágenes) 1998: se publica la versión HTML 4.0 (hojas de estilos CSS, posibilidad de incluir pequeños scripts, mejora de la accesibilidad, tablas complejas y mejoras en los formularios)

43 Historia de HTML 1999: última especificación oficial denominada HTML 4.01, revisión y actualización de la versión HTML : la W3C estandariza la versión de XHTML, una versión avanzada de HTML y basada en XML 2004: Apple, Mozilla y Opera se organizan en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group). 2006: la W3C reconoce que no es bueno el XHTML, y se une con WHATWG en el Proyecto Web Applications 1.0, actualmente conocido como HTML : se aprueba HTML5.

44 Elementos HTML abro la etiqueta cierro la etiqueta (comienza con /) <nombreelemento> contenido aquí </nombreelemento> <parrafo> Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial. </parrafo> contenido Hay dos tipos de etiquetas: o etiquetas de inicio, <html> o etiquetas de cierre, </html>

45 Estructura básica del documento <!DOCTYPE> <html> <head> <title>título del documento</title> </head> <body> <h1>encabezado de nivel 1</h1> <h2>encabezado de nivel 2</h2> <p>texto, texto, texto, texot</p> </body> </html>

46 Etiquetas de un documento HTML

47 HTML + CSS HTML CSS <contenidos> apariencia {} 47

48 Caja de elemento HTML

49 Propiedades CSS de Caja

50 Wireframe HTML Encabezado (lo primero que quiero que vea el usuario) Cuerpo (seguido del contenido) Pie de Página (en general la información menos importante)

51 Trabajo Práctico N 1 Desarrollo Proyecto de un Sitio de un Artista Realizar un proyecto web de un sitio a elección (no existente) En el informe del proyecto el alumno deberá establecer los siguientes puntos: Etapa de Estrategia Objetivo del Sitio Necesidades del Usuario Etapa de Alcance Especificaciones funcionales Requerimientos de contenido Etapa de Estructura Diseño de Interacción. Definir que interacciones podrá realizar el usuario Arquitectura de la Información (mapa del sitio): Definir las secciones (pantallas principales) que habrá en el sitio con sus contenidos. Boceto o wireframe de la pantalla de inicio

52 Entregable: Un archivo de procesador de texto (word o similar) con los puntos mencionados. Trabajo Práctico N 1 Fecha de entrega: Clase N 2 (30/08/17). Modo de Entrega: Se debe entregar en un archivo de word o similar El nombre del archivo debe ser el Apellido del alumno/a. (Ej.: zavala.doc).

53 Producción Digital I Lic. Wenceslao Zavala 23 de Marzo 2017