Gráfica Digital 2014

De Casiopea


Asignatura(s)Gráfica Digital
Año2014
Tipo de CursoOtro
TalleresDG 4º
ProfesoresKatherine Exss
AlumnosKarol Barrera, Carla Cárcamo, Ingrid Céspedes, Sofia Enriquez, Javiera Escudero, Constanza Johnson, Melany Marin, Carolina Núñez, Cindy Sanhueza, Javiera Ulzurrún, Mauro Villena, Alison Saravia
Palabras Clavediseño web, responsive
Carreras RelacionadasDiseño Gráfico

Gráfica Digital 2014 | Tareas Gráfica Digital 2014

Introducción y problemática

26 de Junio

El control que los diseñadores conocen en el medio impreso y desean frecuentemente en el medio web, es simplemente una función de las limitaciones de la página impresa. Debemos aceptar el hecho de que la web no tiene esas mismas limitaciones, y diseñar entonces para su flexibilidad. Pero primero, debemos "aceptar el flujo y reflujo de las cosas."[1]

  1. John Allsopp, "A Dao of Web Design"

Encargo 1

Frente a este hecho concreto en cuanto a parámetros y medidas estándar de resolución ¿cómo nos afecta a nosotros como diseñadores? ¿de qué manera influye que las nuevas tecnologías, dispositivos y los gustos y preferencias de las mismas personas van cambiando mucho más rápido de lo que pensamos?

Escribir de uno a tres párrafos breves como reflexión en la wiki, en la página Tareas Gráfica Digital 2014.

Encargo 2

Trabajo personal, donde cada uno tengo que elegir un sitio responsive para analizar el comportamiento de su interfaz en diferentes formatos.

  • Considerar al menos 3 formatos: Desktop, Tablet, Mobile
  • Analizar distintos elementos de la interfaz como: párrafos de textos, menús, imágenes, etc
  • Crear caso de estudio en la wiki con esta documentación

Listado de sitios por estudiar

  1. Carla Cárcamo | Earth Hour
  2. Constanza Johnson | McColl center
  3. Alison Saravia | Cafe Evoke
  4. Mauro Villena | Ted.com
  5. Ingrid Céspedes | The DO Lectures
  6. Cindy Sanhueza | I Travel York
  7. Melany Marin | Most Wanted
  8. Javiera Ulzurrún | The Brigade
  9. Javiera Escudero | Simon Collison/
  10. Karol Barrera | Forefathers
  11. Sofia Enriquez | London SE


Encargo 3

Clase de HTML5 y CSS3

Clase dictada por Maximilano Martin, Diseñador Gráfico titulado de PUCV, actualmente Socio Fundador y Dirección en IDA - Ideas Digitales Aplicadas Miembro en AIChile.

Contexto

Se presenta como un "nuevo" campo en el cual, el Diseño Gráfico tiene mucho que decir. Aunque para muchos el código parezca muy distante a lo que se comienza realizando de forma más manual. HTML y CSS se integran y son parte importante del Diseño Front.

  • Interpretación semántica de la información diseñada
  • Individualización del diseño y el contenido
  • Desarrollo sobre un administrador de contenidos como WordPress
  • Integración y creación de inteligencias Web.

¿Qué es HTML

Las siglas de HTML significan HyperText Markup Language, que se refiere a un lenguaje de marcado. Se puede comparar el Lenguaje de Marcado con la antigua industria editorial, ya que un manuscrito a esta imprenta llegaba con zonas marcadas para ser destacadas y jerarquizadas, con el fin de que el imprentero reconociera estas zonas, las entendiera y tradujera a lo que el escritor quería transmitir. Del mismo modo en Diseño Front se puede recibir una imagen(jpg,png) de la interfaz con el diseño que se quiere realizar. La misión del diseñador es llevar y traducir esta imagen a códigos. Y donde es importante identificar jerarquías de títulos, subtítulos y párrafos. En 1991 se crea HTML y se generan estándares, ya que se comienza a incurrir en malas prácticas, tales como la mezcla de HTML y CSS3.

En HTML sólo irá la estructura y el contenido, por otro lado se pone en la cascada de estilos o CSS (ej: si queremos poner un texto de color rojo).


Características del HTML
  1. Lenguaje de Marcado
  2. Otorga estructura semántica al contenido( <head> <body> <aside> <footer>)
  3. Describir estructura y contenido
  4. Complementar el texto con Objetos(hay imágenes, textos, vídeos que se pueden embeber)
  5. Se escribe en forma de “Etiquetas” (<etiqueta></etiqueta>)
  6. Rodeada por Corchetes Angulares(< >)

Estructura y contenido del HTML Estructurahtml.jpg

Elementos de bloque y elementos de línea

  • Los elementos de bloque utilizan el ancho total de la página, a menos que se indique lo contrario.
  • Los elementos de línea se posicionan por defecto hacia el lado izquierdo. Este no funciona con padding o margenes, amenos que se le indique que actué como bloque.

Ej: Un título es un elemento de línea.

Bloqueylilnea.jpg

Lo se dice para la máquina y lo que ve el humano

En la siguiente imagen se puede apreciar como es necesario entregar la misma cantidad de información al humano y a la máquina para que el mensaje llegue. Como en el lado derecho es escrito en códigos que se relacionan con el lado izquierdo, que significan lo mismo pero que se escriben de formas distintas.

Contenidohtmlmaquinahumano.jpg

Estructura de los elementos

Este lenguaje de marcado trabaja con etiquetas, que son herramientas fundamentales para que los navegadores interpreten el código, ya que estos nos muestran estructura, videos, imágenes y párrafos. De HTML4 a HTML se han incorporado nuevas etiquetas que nos permiten usar menos código en nuestros sitios.

  • section: Esta etiqueta sirve para poner secciones dentro de un documento. Por ponerlo de forma sencilla, funciona de una forma similar a la etiqueta div que nos separa también diferentes secciones.
  • article: sirve para poner artículos y publicaciones de usuarios.
  • header, footer: sirve para ahorrar código, anteriormente se debían agregar divs para generar estás zonas, pero ahora html5 reconoce esta etiqueta.
  • nav:sirve para realizar el menú de navegación.
  • audio y video:
  • embed:
  • canvas:

<etiqueta>'contenido'</etiqueta>


<a> vinculo o ancla </a>

El encargo

  • Tomar ejemplo de estudio y correrlo en local!
  • Replicar ejemplo de estudio y limpiarlo de recursos externos!
  • Visualizar/destacar estructura con bordes!
  • Entrega Carpeta con nombre