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

  • Deconstrucción Diagramación y Estilos 20Minutos1-01.jpg

    Página Original

  • Deconstrucción Diagramación y Estilos 20Minutos2-02.jpg

    Deconsrtucción: Grilla y Elementos

  • Deconstrucción Diagramación y Estilos 20Minutos3-03.jpg

    Lista de Estilos Tipográficos y de Imagen

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.

Archivo:LaCAV Mapa de Navegación.png
Mapa de Navegación CAV
  • Wireframe CAV Movil Home

    Wireframe CAV Movil Home

  • Wireframe CAV Movil Noticia

    Wireframe CAV Movil Noticia

  • Wireframe CAV Tablet Home

    Wireframe CAV Tablet Home

  • Wireframe CAV Tablet Noticia

    Wireframe CAV Tablet Noticia

  • Wireframe CAV Web Home

    Wireframe CAV Web Home

  • Wireframe CAV Web Noticia

    Wireframe CAV Web Noticia



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

Archivo:Wireframe Móbil 320x480+scroll.fw.png Archivo:Wireframe Móbil 480x320+scroll.fw.png 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:

  • Interfaz CAV Movil Home

    Interfaz CAV Movil Home

  • Interfaz CAV Movil Home 320px

    Interfaz CAV Movil Home 320px

  • Interfaz CAV Movil Noticia

    Interfaz CAV Movil Noticia

  • Interfaz CAV Movil Noticia 320px

    Interfaz CAV Movil Noticia 320px

  • Interfaz CAV Tablet Home

    Interfaz CAV Tablet Home

  • Interfaz CAV Tablet Noticia

    Interfaz CAV Tablet Noticia

  • Interfaz CAV Web Home

    Interfaz CAV Web Home

  • Interfaz CAV Web Noticia

    Interfaz CAV Web Noticia 


/*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
Obtenido de «https://wiki.ead.pucv.cl/index.php?title=Tareas_LC2_2012&oldid=199725»
Política de privacidad
Acerca de Casiopea
Descargos
Creative Commons Con Reconocimiento y Compartir Igual 4.0
Powered by MediaWiki
Powered by Semantic MediaWiki