Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Producción Digital I
Wenceslao Zavala
www.producciondigitalup.com [email protected]
21 de Agosto 2019
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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/
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Adaptable a Diferentes Dispositivos
3
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Cronograma de Trabajo
Trabajos Prácticos cursadaSe entregan a la clase siguiente a la que fue pedido.
Evaluación de Medio Término2 de Octubre 2019
Asistencias:2 faltas consecutivas o 3 faltas en la cursada =
RECURSA
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
HTML + CSS
6
<contenidos> apariencia {}
HTML CSS
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Sistemas Operativos
- Win10 Win8 Win7 Vista WinXP Linux Mac Mobile
Feb-2019 0.7% 5.2% 18.0% 0.1% 0.3% 5.9% 10.3% 0.4%
Dic-2018 49.5% 5.6% 19.3% 0.1% 0.3% 5.7% 9.8% 0.4%
Dic-2017 41.0% 8.3% 26.7% 0.1% 0.5% 5.5% 9.8% 0.3%
Dic-2016 30.9% 11.1% 34.6% 0.2% 0.0% 1.0% 5.6% 9.8%
Dic-2015 15.5% 16.3% 44.5% 0.4% 0.1% 2.3% 5.6% 9.9%
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Navegadores
- Chrome IE/Edge Firefox Safari Opera
2019 79.7 % 4.0 % 10.0 % 3.4 % 1.6 %
2018 79.6 % 3.8 % 10.1 % 3.4 % 1.7 %
2017 77.0 % 3.9 % 12.4 % 3.3 % 1.6 %
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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%
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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.)
10
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Adaptable a Diferentes Dispositivos
11
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
¿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.
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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”
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Diseñando Experiencia de Usuario
UsabilidadDiseño Centrado
en el usuario
Modelo ConceptualDisciplinas
Metodología
Experiencia de Usuario (UX)UX = Metodología x Disciplinas
+
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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
El DCU es una metodología de trabajo de diseño en la
investigación y participación de quienes serán los usuarios finales de un determinado
producto o servicio..
Diseño Centrado en el usuario
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Experiencia de Usuario
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Experiencia de Usuario
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Experiencia de Usuario
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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?
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Elementos de la Experiencia de Usuario
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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.?
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Estructura del Proyecto WebDiseñ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."
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Arquitectura de la Información
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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.
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Wireframes
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Wireframes
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
HTML + CSS
31
<contenidos> apariencia {}
HTML CSS
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
HTML
Hyper Text Mark-up Language
Lenguaje de Marcas de Hipertexto
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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".
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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)
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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.
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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>
CSS
Cascading Style Sheet
Hojas de Estilo en Cascada
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;
}
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
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Etiquetas de un documento HTML
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
HTML + CSS
42
<contenidos> apariencia {}
Etiqueta HTML Regla CSS
index.html estilos.css
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
¿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”>
En el caso de CSS en el mismo HTML se utiliza:
<style type="text/css"></style>
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Caja de elemento HTML
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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.
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Propiedades CSS de Caja
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Cómo relacionar HTML + CSS
51
Etiqueta HTML Regla CSS
<div class="azul"> </div>
.azul { color: #FFF;background-color: #0033CC;
}
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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)
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Desarrollo Proyecto de un Sitio de un Corto Animado
Realizar un proyecto web de un sitio a elección
(no existente)
Trabajo Práctico N°1
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
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
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 (28/08/19).
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).
Wenceslao Zavala | Producción Digital I - Universidad de Palermo
Producción Digital I
Wenceslao Zavala
www.producciondigitalup.com [email protected]
21 de Agosto 2019
Top Related