Producción Digital I. Wenceslao Zavala. 22 de Marzo 2018

Transcripción

1 Producción Digital I Wenceslao Zavala consultas@producciondigitalup.com 22 de Marzo 2018

2 En el informe del proyecto el alumno deberá establecer los siguientes puntos: Etapa de Estrategia Objetivo del Sitio Necesidades del Usuario 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) 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 = 24 de Mayo 2018 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 diferentes dispositivos.

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 % 7.6% 25.6% 0.1% 0.5% 5.6% 10.3% 7.9% Dic % 8.3% 26.7% 0.1% 0.5% 5.5% 9.8% 7.9% May % 9.8% 31.7% 0.2% 0.7% 5.6% 10.5% 0.2% Dic % 11.1% 34.6% 0.2% 0.0% 1.0% 5.6% Sep % 11.4% 37.0% 0.2% 0.0% 1.3% 5.8% 9.8% 5.7%

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

10 Resoluciones de Pantallas Date Other high 1920 x x x x x768 Lower January % 18% 34% 4% 3% 2% 6.1% 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%

11 El Monitor: Unidad de Medida (pixel) Dimensión de Trabajo (según pantalla del usuario promedio) El Color: Convenciones Web Diseño Web Colores seguros para la Web (colores hexadecimales) Paleta de colores (RBG - Escala de grises - hexadecimales) Las imágenes: 72 Resolución (DPI) 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 Experiencia de Usuario Sentidos Comportamiento Conocimiento Deseos Motivaciones Diseño Centrado en el usuario Interacción Arquitectura de Información Interfaz Productos y Servicios Usabilidad Accesibilidad

17 Sensaciones y emociones positivas: 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. 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 Objetivo: Cual es el objetivo de la realización del Sitio. Definir las metas del proyecto; éstas Estrategia del Proyecto Web 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.?

28 Cuál será el mensaje, filosofía del sitio Cuáles serán los contenidos. Qué acciones realizan los usuarios en el sitio. 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é 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

29 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."

30 Arquitectura de la Información

31 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.

32 Wireframes

33 Wireframes

34 Wireframes

35 Wireframes

36 HTML (HyperText Mark-up Language)

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

38 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".

39 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)

40 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.

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

42 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>

43 Etiquetas de un documento HTML

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

45 Caja de elemento HTML

46 Propiedades CSS de Caja

47 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)

48 En el informe del proyecto el alumno deberá establecer los siguientes puntos: Etapa de Estrategia Objetivo del Sitio Necesidades del Usuario 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) 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

49 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 (29/03/18). 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).

50 Producción Digital I Wenceslao Zavala consultas@producciondigitalup.com 22 de Marzo 2018