Producción Digital I. Wenceslao Zavala de Agosto 2018

Transcripción

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

2 Objetivo de la Asignatura Conocer y entender las herramientas y técnicas necesarias para maquetar un sitio web adaptable a diferentes dispositivos. Ejemplo: circle.squarespace.com/

3 Adaptable a Diferentes Dispositivos 3

4 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 = 31 de Octubre 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

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

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

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

8 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 %

9 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%

10 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.) 10

11 Adaptable a Diferentes Dispositivos 11

12

13

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

15 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

16 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

17 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

18 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

19 Experiencia de Usuario

22 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?

23 Elementos de la Experiencia de Usuario

24 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.?

25 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

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

27 Arquitectura de la Información

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

29 Wireframes

30 Wireframes

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

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

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

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

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

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

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

38 CSS Cascading Style Sheet Hojas de Estilo en Cascada

39 Qué es una Regla CSS Es donde se definen las propiedades que tendrá un elemento HTML y la forma de relacionarlo. Consta de dos partes: el selector y la declaración El selector es un término (como P, H1, el nombre de una clase o un ID) que identifica el elemento a darle formato, y la declaración define los elementos de estilo. body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }

40 Tipos de Reglas (selectores) CSS Etiquetas HTML [TAG] modifica todas las instancias de la etiqueta, como p, h1 o DIV. Es el nombre es la etiqueta HTML, y no se necesita atributo para aplicarlo Clase [CLASS] puede ser aplicado en múltiples elementos dentro de un mismo HTML. todos los nombres de las reglas de clase empiezan por un punto (.) usa el atributo class para aplicarlo ID [ID o DIV] aplicables a un sólo elemento dentro del HTML. el nombre de la regla comienza con # usa el atributo id para aplicarlo

41 Etiquetas de un documento HTML

42 HTML + CSS Etiqueta HTML Regla CSS <contenidos> apariencia {} index.html estilos.css 42

43 Cómo vincular HTML con CSS? Mediante la vinculación con archivos externos La vinculación con archivos CSS externos, se hacen dentro de las etiquetas <head></head>, y con el elemento <link> del HTML. <link type= text/css rel= stylesheet href= estilo.css >

44 Caja de elemento HTML

45

46

47

48

49 Piet Mondrian Piet Mondrian es un artista holandés mejor conocido por sus pinturas abstractas. El arte que es abstracto no muestra cosas que sean reconocibles, como personas, objetos o paisajes. En cambio, los artistas usan colores, formas y texturas para lograr su efecto.

50 Propiedades CSS de Caja

51 Cómo relacionar HTML + CSS Etiqueta HTML Regla CSS <div class="azul"> </div>.azul { color: #FFF; background-color: #0033CC; } 51

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

53 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 Corto Animado 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

54 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/08/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).

55 Producción Digital I Wenceslao Zavala consultas@producciondigitalup.com 22 de Agosto 2018