Producción Digital I - fido.palermo.edufido.palermo.edu/servicios_dyc/blog/docentes/... · Diseño...

Wenceslao Zavala | Producción Digital I - Universidad de Palermo

Producción Digital I

Lic. Wenceslao Zavala23 de Agosto 2017


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


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


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.


Adaptable a Diferentes Dispositivos

5


HTML & CSS

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

Lenguaje para armar páginas web


HTML + CSS

7

<contenidos> apariencia {}

HTML CSS


Sistemas Operativos

- Win10 Win8 Win7 Vista WinXP Linux Mac Mobile

Feb-

201732.2% 10.5% 33.6% 0.2% 1.0% 5.7% 10.5% 6.2%

Dic-2016 30.9% 11.1% 34.6% 0.2% 0.0% 1.0% 5.6% 6.4%

Sep-

201628.0% 11.4% 37.0% 0.2% 0.0% 1.3% 5.8% 5.7%

Jun-

201624.0% 13.0% 39.8% 0.3% 0.1% 1.5% 6.0% 54%

Mar-

201619.5% 14.7% 42.4% 0.4% 0.1% 1.9% 5.5% 5.1%


Navegadores

- Chrome IE/Edge Firefox Safari Opera

2017 74.1 % 4.8 % 15.0 % 3.6 % 1.0 %

2016 73.7 % 4.8 % 15.5 % 3.5 % 1.1 %


Resoluciones de Pantallas

DateOther

high

1920x

1080

1366x

768

1280x

1024

1280x

800

1024x

768Lower

January

201731.6% 17% 35% 5% 4% 3% 4.4%

January

201630.7% 18% 35% 6% 4% 3% 3.3%

January

201532.7% 16% 33% 7% 5% 4% 2.3%

January

201434% 13% 31% 8% 7% 6% 1.0%

January

201336% 11% 25% 10% 8% 9% 1.0%


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


Adaptable a Diferentes Dispositivos

12


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


¿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


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


Experiencia de Usuario

Sentidos

Comportamiento

Conocimiento

Deseos

Motivaciones

Usabilidad

Accesibilidad

Inte

rfaz Productos y

Servicios

Diseño

Centrado en

el usuario

Interacción

Arquitectura de

Información



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”


Diseñando Experiencia de Usuario

UsabilidadDiseño Centrado

en el usuario

Modelo ConceptualDisciplinas

Metodología

Experiencia de Usuario (UX)UX = Metodología x Disciplinas

+


Definiendo Usabilidad

Que mide la Usabilidad:

• Facilidad de aprendizaje:

menos errores

• 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


¿Qué es el Diseño Centradoen el Usuario?


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.

Investigación

Investigación generativa con usuarios

Prototipado

Diseño: ExperienciaInteracciónInterfacesArquitectura de Información

Validación

Investigación evaluativa con usuarios

Implementación

ConstrucciónTesteo

iterar


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

La estrategia es donde todo

comienza:

• ¿Para qué queremos publicar

el sitio?

• ¿Qué quieren los usuarios?


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


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

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.


Wireframes


HTML (HyperText Mark-up Language)


HTML

Hyper Text Mark-up Language

Lenguaje de Marcas de Hipertexto


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


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

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

2009: se aprueba HTML5.


Elementos HTML

abro la etiqueta

<nombreelemento> contenido aquí </nombreelemento>

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

cierro la etiqueta(comienza con /)

contenido


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


HTML + CSS

47

<contenidos> apariencia {}

HTML CSS


Caja de elemento HTML


Propiedades CSS de Caja


Wireframe HTML

Pie de Página(en general la información menos importante)

Cuerpo(seguido del contenido)

Encabezado(lo primero que quiero que vea el usuario)



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



Entregable:

Un archivo de procesador de

texto (word o similar) con los

puntos mencionados.

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


Producción Digital I

Lic. Wenceslao Zavala23 de Marzo 2017

Producción Digital I - fido.palermo.edufido.palermo.edu/servicios_dyc/blog/docentes/... · Diseño...

Documents

Transcript of Producción Digital I - fido.palermo.edufido.palermo.edu/servicios_dyc/blog/docentes/... · Diseño...