Producción Digital Iproducciondigitalup.com/clases/Clase_01-2018.pdf · Realizar un proyecto web...

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

Producción Digital I

Wenceslao Zavala

www.producciondigitalup.com | [email protected]

22 de Marzo 2018


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


Objetivo de la Asignatura

Conocer y entender las herramientas y técnicas necesarias para maquetar un sitio web adaptable a diferentes dispositivos.


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-2018 42.3% 7.6% 25.6% 0.1% 0.5% 5.6% 10.3% 7.9%

Dic-2017 41.0% 8.3% 26.7% 0.1% 0.5% 5.5% 9.8% 7.9%

May-2017 34.9% 9.8% 31.7% 0.2% 0.7% 5.6% 10.5% 0.2%

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

Sep-2016 28.0% 11.4% 37.0% 0.2% 0.0% 1.3% 5.8% 5.7%


Navegadores

- Chrome IE/Edge Firefox Safari Opera

2018 77.9 % 4.1 % 11.8 % 3.3 % 1.5 %

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

Date Other high

1920x1080

1366x768

1280x1024

1280x800

1024x768 Lower

January 2018 32.9% 18% 34% 4% 3% 2% 6.1%

January 2017 31.6% 17% 35% 5% 4% 3% 4.4%

January 2016 30.7% 18% 35% 6% 4% 3% 3.3%

January 2015 32.7% 16% 33% 7% 5% 4% 2.3%

January 2014 34% 13% 31% 8% 7% 6% 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)

• 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


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 GilmoreThe 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 usuarioInteracció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

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


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

44

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


Producción Digital I

Wenceslao Zavala

www.producciondigitalup.com | [email protected]

22 de Marzo 2018

Producción Digital Iproducciondigitalup.com/clases/Clase_01-2018.pdf · Realizar un proyecto web...

Documents

Transcript of Producción Digital Iproducciondigitalup.com/clases/Clase_01-2018.pdf · Realizar un proyecto web...