Tareas LC2 2012

De Casiopea

Tareas

AVISO

La etiqueta <gallery> no está funcionando por el momento,
debido a la reciente actualización de la wiki, ya envié un
mail a Herbert avisando del problema.

Andrea Cifuentes 


Encargo Clase 1 | Google Site Personal

Creación de un Google Site con las clases y tareas del taller como contenido.


Encargo Clase 2 | Deconstrucción Diario

Deconstrucción de una página de diario.

Andrea Cifuentes: Deconstrucción Diario 20 Minutos - Barcelona - España. descargar PDF

Archivo:Franco Baldassare T1, parte 2.pdf

  • Nicol Valenzuela
Original La Tercera
Archivo:La tercera Deconstrucción.png
Deconstrucción La Tercera
Archivo:La tercera reproducción.png
Reproducción La Tercera

Encargo Clase 3 | Reconstrucción Tipográfica Diario en CSS

Reproducir los estilos tipográficos de la página de diario en css.

Andrea Cifuentes: Reproducción en html+css de estilos tipográficos.descargar zip

Versión 1: Pantallazo estilos tipográficos Diario20 HTML+CSS
h1{
 font-family: Georgia, Times, serif;
 font-size:48pt;
 color:#231F20;
 text-transform:uppercase; 
 font-stretch: extra-condensed;
 font-weight: normal;
 }
h1 span{
 font-size:68pt; 
 font-weight: bold;
 }
h2{
 font-family: Times, serif;
 font-size: 18pt;
 color:#231F20;
 }
h2 span{
 font-family: Helvetica, Verdana, sans-serif;
 font-size: 16pt;
 color: #BF112D;
 font-stretch: condensed;
 font-weight: bold;
 }
h3{
 font-family: Helvetica, Verdana, sans-serif;
 font-size: 16pt;
 color:#231F20;
 font-stretch: condensed;
 }
h4{
 font-family: Times, serif;
 font-size:9pt;
 color:#231F20;
 font-weight: bold;
 }
p{
 font-family: Times, serif;
 font-size:9pt;
 color:#231F20;
 } 
p span{
 font-family: Helvetica, Verdana, sans-serif;
 font-weight: bold;
 font-stretch: condensed;
 } 
.numeropagina{
 font-family: Courier, serif;
 font-size: 22pt;
 color: #BF112D;
}
.fecha{
 font-family: Helvetica, Verdana, sans-serif;
 font-size:7pt;
 color:#231F20;
 font-weight: normal;
 }
.nose{
 font-family: Helvetica, Verdana, sans-serif;
 font-size:7pt;
 color:#231F20;
 font-weight: bold;
 }
.piedefoto{
 font-family: Helvetica, Verdana, sans-serif;
 font-size:8pt;
 color:#FFF;
 background-color: #BF112D;
 font-stretch: extra-condensed;
 }
.numpiedefoto{
 font-weight: bold;
 }
  • Christopher Fattori:

Archivo:CGWFM-EL PAIS-Estilos Indd y Css.rar

Archivo:CGWFM-El País-Estilo.jpg


Screenshot prueba css. Descarga Archivo comprimido [1]

Encargo Clase 4 | Wireframes Responsive Design

Elegir un medio impreso (revista). Construir su mapa de navegación para luego diseñar wireframes para su versiones web, tablet y móvil (1 wireframe para el home y 1 de una noticia o reportaje)

Andrea Cifuentes: Medio impreso elegido: Revista del Club de Amantes del Vino - Chile.



  • Nathaly Sepúlveda: [15]
  • Andrea Cifuentes:[16]
  • Gabriela Pérez: [18]

100px 100px Wireframe Tableta Vertical 768x1024.fw.png Wireframe Web 1024x768.fw.png

  • Carolina Núñez: [[20]]
  • Nicol Valenzuela:
Mapa de Navegación
Wireframe Web
Wireframe Web contenido
Wireframe Tablet
Wireframe Tablet contenido
Wireframe Móvil
Wireframe Móvil contenido

Encargo Clase 5 | Diseño Interfaz

A partir de la tarea anterior, diseñar la interfaz del sitio para todos sus soportes: móvil, tablet y web. Además determinar los estilos tipográficos (tamaño, color, bold/itálicas, familia), colores HEX, dimensiones de caja. Considerar títulos, enlaces, imágenes, listas, tablas, citas, formularios, etc.

Andrea Cifuentes:


/*Header*/

head{
 background-color: #000;
 height: 120px;
 width: 100%;
 }
.tabmenu{
 height: 50px;
 width: 160px;
 border-radius: 25%;
 }
#logo{
 height: 110px;
 width: 110px;
 }
.menu{
 font-family: Verdana,sans-serif;
 font-size: 15pt;
 font-weight: bold;
 color: #000;
 }

/*Content*/

#destacado{
 height: 300px;
 width: 640px;
 }
#wgmesadecata{
 width: 280px;
 height: 300px;
 }
.columna{
 width: 220px;
 height: 250px;
 }
.icon-fecha{
 width: 35px;
 height: 35px;
 }
#titulodestacado{
 font-family: Verdana,sans-serif;
 font-size: 16pt;
 font-weight: bold;
 color: #fff;
 }
#textodestacado{
 font-family: Verdana,sans-serif;
 font-size: 12pt;
 font-weight: normal;
 color: #fff;
 }
.titulocolumna{
 font-family: Verdana,sans-serif;
 font-size: 15pt;
 font-weight: bold;
 color: #000;
 }
.nombrevino{
 font-family: Verdana,sans-serif;
 font-size: 14pt;
 font-weight: bold;
 color: #C42D30;
 }
.nombrevina{
 font-family: Verdana,sans-serif;
 font-size: 14pt;
 font-weight: bold;
 color: #000;
 }
.texto{
 font-family: Verdana,sans-serif;
 font-size: 13pt;
 font-weight: normal;
 color: #000;
 }
.subtitulo{
 font-family: Verdana,sans-serif;
 font-size: 13pt;
 font-weight: bold;
 color: #000;
 } 
.enlacenormal{
 font-family: Verdana,sans-serif;
 font-size: 12pt;
 font-weight: normal;
 color: #C42D30;
 text-decoration: underline;
 }
.enlacearticulo{
 font-family: Verdana,sans-serif;
 font-size: 14pt;
 font-weight: bold;
 color: #C42D30;
 }
#fotoartículo{
 width: 640px;
 height: 300px;
 }
.piedefoto{
 font-family: Verdana,sans-serif;
 font-size: 11pt;
 font-weight: normal;
 color: #fff;
 }
.breadcrumb{
 font-family: Verdana,sans-serif;
 font-size: 11pt;
 font-weight: normal;
 color: #C42D30;
 }
.taglarge{
 font-family: Verdana,sans-serif;
 font-size: 18pt;
 font-weight: bold;
 color: #C42D30;
 }
.tagmedium{
 font-family: Verdana,sans-serif;
 font-size: 15pt;
 font-weight: bold;
 color: #C42D30;
 }
.tagsmall{
 font-family: Verdana,sans-serif;
 font-size: 12pt;
 font-weight: bold;
 color: #C42D30;
 }

/*Footer*/

footer{
 background-color: #4A4A4A;
 width: 100%;
 height: 120px;
 }
#facebookicon{
 width: 30px;
 height: 45px;
 }
#twittericon{
 width: 43px;
 height: 40px;
 }
  • Catalina Reyes

Archivo .zip contiene originales en formato Fireworks y códigos css Archivo:Revistazoocreyes.zip

Diseño web Diseño web Diseño móvil Diseño móvil Diseño tablet Diseño tablet

Interfaz web Vive Digital
Interfaz web Contenido Vive Digital
Interfaz Tablet Vive Digital
Interfaz Tablet Contenido Vive Digital
Interfaz Móvil Vive Digital
Interfaz Móvil Contenido Vive Digital