presentación de clase - Producción Digital I
Anuncio
Producción Digital I Wenceslao Zavala www.digitalup.guru [email protected] Objetivo de la Asignatura Conocer las herramientas y técnicas necesarias para lograr un sitio web adaptable a los diferentes dispositivos logrando una experiencia de usuario positiva. Planificación, diseño y Desarrollo de Sitios Web (respetando y utilizando normas de Usabilidad) 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> Cronograma de Trabajo Trabajos Prácticos cursada o Se entregan a la clase siguiente a la que fue pedido. o Trabajo no entregado en fecha, se descuenta el 20% de la nota del trabajo por semana. 3 clases sin entregar, tiene 0 (incompleto) o Si tiene 2 trabajos incompletos = RECURSA Examen Parcial o 1° parte teórico - 2° parte práctico = 27 de Octubre 2016 Asistencias: o 2 faltas consecutivas o 3 faltas en la cursada = RECURSA Trabajo Práctico de Examen Final o Se realiza un nuevo sitio que responda a las consignas solicitadas Sistemas Operativos - Win10 Win8 Win7 Vista WinXP Linux Mac Mobile Feb2016 17.8% 15.2% 43.1% 0.4% 2.1% 5.6% 10.4% 0.2% Dic1015 15.5% 16.3% 44.5% 0.4% 2.3% 5.6% 9.9% 5.3% Sep2015 10.6% 18.0% 47.6% 0.5% 2.7% 5.6% 10.0% 5.0% Jun2015 - 23.3% 50.7% 0.7% 3.4% 5.9% 9.9% 5.4% Mar2015 - 21.0% 52.8% 0.8% 4.7% 5.5% 9.8% 5.0% Navegadores - Chrome IE Firefox Safari Opera 2016 69.0 % 6.2 % 18.6 % 3.7 % 1.3 % 2015 62.5 % 8.0 % 22.9 % 3.9 % 1.5 % Resoluciones de Pantallas Date January 2016 Other high 1920 x1080 30.7% 18% 1366 x768 35% 1280 x1024 6% 1280 x800 4% 1024 x768 3% 800 x600 0.3% Lower 3% January 2015 32.7% 16% 33% 7% 5% 4% 0.3% 2% January 2014 34% 13% 31% 8% 7% 6% 0.5% 0.5% January 2013 36% 11% 25% 10% 8% 9% 0.5% 0.5% January 2012 35% 8% 19% 12% 11% 13% 1% 1% 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” Experiencia de Usuario Diseño Experiencia El Diseño de la experiencia es vital para que las personas interactúen con productos, servicios, información, entornos, organizaciones Experiencia de Usuario Experiencia de Usuario 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 Definiendo Usabilidad Que mide la Usabilidad: o Facilidad de aprendizaje: menos errores o Eficiencia de uso: realizar las tareas más rápido o Recordación: recuera cómo usarlo para la próxima o Tolerancia a los errores: cuanto se equivoca o Satisfacción de uso: mas lealtad 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 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 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? Elementos de la Experiencia de Usuario Estrategia del Proyecto Web Estrategia o La estrategia es donde todo comienza: o ¿Para qué queremos publicar el sitio? o ¿Qué quieren los usuarios? Estrategia del Proyecto Web Objetivo: o Cual es el objetivo de la realización del Sitio. o 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: o ¿A quién va dirigido el sitio? Hacia qué grupo de personas (uno o más) estará enfocado el sitio. Función: o o o o ¿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.? Alcance del Proyecto Web Alcance: o El alcance transforma la estrategia en requisitos: o ¿Qué características se necesitan incluir al 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. Cuál será el mensaje, filosofía del sitio Cuáles serán los contenidos. 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 Elementos de la Experiencia de Usuario 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." Arquitectura de la Información Wireframes Wireframes Wireframes Wireframes Wireframes Trabajo Práctico N°1 Desarrollo Proyecto de un Sitio Realizar un proyecto web de un sitio a elección (no existente). En el informe del proyecto el alumno deberá establecer los siguientes puntos: o Etapa de Estrategia Necesidades del Usuario Objetivo del Sitio o Etapa de Alcance Especificaciones funcionales Requerimientos de contenido o Etapa de Estructura Diseño de Interacción. Definir que interacciones podrá realizar el usuario Arquitectura de la Información (mapa del sitio): Definir todos los contenidos que habrá en el sitio, y realizar la categorización y etiquetado definiendo niveles, secciones y los contenidos. Boceto o wireframe de la pantalla de inicio del sitio a realizar Trabajo Práctico N°1 Entregable: Un archivo de procesador de texto (word o similar) con los puntos mencionados. Fecha de entrega: Clase N° 2 (24/08/16). 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). HTML (HyperText Mark-up Language) HTML Hyper Text Mark-up Language Lenguaje de marcas de hipertexto 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". 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 2.0. 1997: 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) Historia de HTML 1999: última especificación oficial denominada HTML 4.01, revisión y actualización de la versión HTML 4.0. 2000: 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 TechnologyWorking 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 HTML5. 2009: se aprueba HTML5. Elementos HTML cierro la etiqueta (comienza con /) abro la etiqueta <nombreelemento> contenido aquí </nombreelemento> <parrafo> contenido 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> 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> Etiquetas de un documento HTML Caja de elemento HTML 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) Trabajo Práctico N°1 Desarrollo Proyecto de un Sitio Realizar un proyecto web de un sitio a elección (no existente). En el informe del proyecto el alumno deberá establecer los siguientes puntos: o Etapa de Estrategia Necesidades del Usuario Objetivo del Sitio o Etapa de Alcance Especificaciones funcionales Requerimientos de contenido o Etapa de Estructura Diseño de Interacción. Definir que interacciones podrá realizar el usuario Arquitectura de la Información (mapa del sitio): Definir todos los contenidos que habrá en el sitio, y realizar la categorización y etiquetado definiendo niveles, secciones y los contenidos. Boceto o wireframe de la pantalla de inicio del sitio a realizar Trabajo Práctico N°1 Entregable: Un archivo de procesador de texto (word o similar) con los puntos mencionados. Fecha de entrega: Clase N° 2 (24/08/16). 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). Producción Digital I Wenceslao Zavala www.digitalup.guru [email protected]
