Tareas LC2 2012

LC2 2012 | Tareas LC2 2012 | Examen LC2 2012

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.

• Daniela Pardo: https://sites.google.com/site/danielapardolc2/clases
• José Miguel Ortega: https://sites.google.com/site/josemiguelortegalc2/
• Gabriela Pérez :https://sites.google.com/site/bitacoralenguajecomputacional2/
• Catalina Reyes Navarro: https://sites.google.com/site/bitacoradecreyes
• Nathaly Sepúlveda : https://sites.google.com/site/nbsepulvedasoto/
• Carlos Chávez : https://sites.google.com/site/cchavezgatica/trabajos
• Idar González: https://sites.google.com/site/idargonzalez/
• Juan Antonio Godoy: /https://sites.google.com/site/jagblc1eadpucv/
• Andrea Cifuentes: https://sites.google.com/site/lc2andreacifuentes/
• Danila Ilabaca: https://sites.google.com/site/danilailabacalc2/
• Karla Vargas: https://sites.google.com/site/karlavlc12012/
• Simón Sandoval: https://sites.google.com/site/simonsandovalguzman/
• Alison Saravia: https://sites.google.com/site/alisonsaravialc2/
• Michelle Camus: https://sites.google.com/site/michellecamusl/
• Samira Bajbuj: https://sites.google.com/site/samirabajbujlc2/
• Carolina Núñez: https://sites.google.com/site/carolinanunezvergara/
• Lucas León: https://sites.google.com/site/lucasleonr/
• María Ignacia Falcone: https://sites.google.com/site/lcmignaciafalcone/
• Francisca Wevar: https://sites.google.com/site/notblackmagic/
• Paulina Buvinic: https://sites.google.com/site/paulinabuvinic/
• Nicol Valenzuela: https://sites.google.com/site/nicolvalenzuelapucv/
• javiera Rojas: https://sites.google.com/site/javieraignaciarojass/
• Bernardo Silva: https://sites.google.com/site/bernardosilvacatrilef/
• Camila De la Vega https://sites.google.com/site/camiladcordova/home/
• Christopher Fattori: https://sites.google.com/site/cfattoriead/home
• Franco Matías Baldassare Rodríguez:https://sites.google.com/site/baldassaredesign/

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

• Bernardo Silva:Archivo:Encargo II LC2 - 2012.pdf

• Christopher Fattori: Archivo:Chris Fattori - Deconstrucción pagina de Diario El País.pdf

• Daniela Pardo: Archivo:Estructuración Diario.pdf
• José Miguel Ortega : Archivo:JoseMiguelOrtegaLaTercera.pdf
• Gabriela Pérez: Archivo:El mercurio decosntruccion diagramacion y estilos gaby.pdf
• Catalina Reyes Navarro: Archivo:Mercuriocatalinareyes.pdf
• Carlos Chavez: Archivo:Wireframecarlos chavez.pdf
• Idar González: Archivo:DeconstrucciónLa tercera Idar.pdf
• Juan Antonio Godoy: Archivo:EL MERCURIO VALPO.pdf
• Danila Ilabaca: Archivo:Deconstruccióndiariodanila.pdf
• Alison Saravia: Archivo:Deconstrucciónalison.pdf
• Michelle Camus Archivo:Camus2encargo.pdf
• Karla Vargas: Archivo:Tarea 1.pdf
• Samira Bajbuj: Archivo:Deconstrucción de la página.pdf
• María Ignacia Falcone: Archivo:Tarea 2 LC2.pdf
• Francisca Wevar: Archivo:Composicióndeestilos FranWevar.pdf
• Paulina Buvinic: Archivo:PBuvinic Tarea II.pdf
• Nicol Valenzuela: https://sites.google.com/site/nicolvalenzuelapucv/a-p-u-n-t-e-s/tareas
• Simón Sandoval: Archivo:Deconstrucción de una página.pdf
• Nathaly Sepúlveda: Archivo:Tareaunolc2.pdf
• Lucas León:Archivo:Deconstruccion Portada.pdf
• Javiera Rojas:Archivo:TAREA LC2.pdf
• Carolina Núñez:Archivo:Decontrupaginacaro1.pdf
• Camila De la Vega: Archivo:TareaIILc2-Camiladcordova.pdf
• Franco Baldassare: Archivo:Franco Baldassare T1.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

• Karla Vargas: [2]
• Paulina Buvinic:[3]
• José Miguel Ortega: [4]
• Carlos Chávez: Archivo:CCHG-mercuriovalpo-estilo.zip
• Simón Sandoval:[5]
• Catalina Reyes: [6]
• Francisca Wevar: [7]
• Daniela Pardo: Archivo:DPT - La Tercera - Estilos.pdf, Archivo:DPT - La Tercera - Estilos Tipográficos.zip

• Gabriela Perez: [8]
• Idar González: [9]
• Alison Saravia Ortiz: Archivo:Alison Saravia Tarea 3.zip
• Michelle Camus: [[10]]
• Juan Antonio Godoy: Archivo:JAGB-DIARIO-ESTILOS.zip
• Javiera Rojas:Archivo:JIRRESTILOSDIARIO.pdf
• Danila Ilabaca:Archivo:Daniladiario.pdf [11]
• Nathaly Sepúlveda: [12]
• Bernardo Silva: Archivo:Carpeta recreacion BS.rar
• Franco Baldassare: Archivo:Baldassare Lc2 wire+estilos de parrafos.pdf
• Nicol Valenzuela: [13]
• María Ignacia Falcone: Archivo:MIFA-diario-estilos files.rar
• Carolina Núñez: Archivo:Carolina Núñez V- tarea 3.rar
• Samira Bajbuj: Archivo:Cascadas de estilo.zip
• Camila De la Vega: Archivo:Css camiladcordova.pdf
• Nicol Valenzuela

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 Noticia

• 

  Wireframe CAV Tablet Home

• 

  Wireframe CAV Tablet Noticia

• 

  Wireframe CAV Web Home

• 

  Wireframe CAV Web Noticia

• Bernardo Silva:
  Archivo:BS - LC2 - mapa de navegación .jpg

  Mapa de Navegación Revista "La Magia Azul"
  Archivo:WireFrame Bernardo Silva.zip, Archivo:Bernardo Silva - encargo 4 - wireframes.pdf

• Christopher Fattori:Archivo:Chris Fattori - Diseño Contenido revista MásDeco-versión 2.pdf//[14]

• Catalina Reyes: Archivo:Wireframe1.1creyes.pdf

• Danila Ilabaca:Archivo:Wireframe,danila.pdf

• Nathaly Sepúlveda: [15]

• Karla Vargas:Archivo:Arquitectura.pdfArchivo:Wireframe web.pdfArchivo:Wireframe tablet.pdfArchivo:Wireframe android.pdf

• Andrea Cifuentes:[16]

• Simón Sandoval: [17], Archivo:Arquitectura de contenidos.pdf, Archivo:Wireframes Simón Sandoval.pdf

• Gabriela Pérez: [18]

• José Miguel Ortega: Archivo:Wireframeortegalc2.pdf

• Samira Bajbuj: WireframesMapa de navegación

• Carlos Chávez: Archivo:Wireframe revista mi casa (carlos Chavez).pdf

• María Ignacia Falcone: Archivo:MIFA-wireframesvive.rar Archivo:Wireframesvive.pdf

• Juan Antonio Godoy: Archivo:Wireframes LC2 JAGB.zip

• Idar González: Archivo:IAGD - wireframes revista ConozcaMas.pdf

• Alison Saravia: [19], Archivo:Wireframes Alison Saravia.zip

• Michelle Camus: Archivo:WireframeMCamus.pdf

• Daniela Pardo: Archivo:Mapa de Información.pdf:

Archivo:Wireframe Móbil 320x480+scroll.fw.png Archivo:Wireframe Móbil 480x320+scroll.fw.png

• Camila De la Vega: Archivo:Wireframe revistaWow camiladcordova.pdf

• Carolina Núñez: [[20]]

• Paulina Buvinic: Archivo:PBuvinic LC2 Tarea IV.pdf

• Francisca Wevar: Archivo:T4 WIREFRAMES Y AI FRAN WEVAR.pdf

• Javiera Rojas: Archivo:TAREA WIREFRAMS J.R.R.pdf

• Franco Baldassare: Archivo:Franco Baldassare Tarea Wareframes.pdf

• 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 320px

• 

  Interfaz CAV Movil Noticia

• 

  Interfaz CAV Movil Noticia 320px

• 

  Interfaz CAV Tablet Home

• 

  Interfaz CAV Tablet Noticia

• 

  Interfaz CAV Web Home

• 

  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

• Christopher Fattori:Archivo:Chris Fattori-Wireframe web-interactivo.rar

• Karla Vargas M* Archivo:Diseño Web.pdf
• Samira Bajbuj [21]
• Nathaly Sepúlveda [22]
• Carlos Chávez* Archivo:Propuesta grafica (carlos chavez).pdf
• Francisca Wevar Archivo:T5 VISUALIZACIÓNYESTILOS FRAN WEVAR.pdf
• Gabriela Perez [23]
• José Miguel Ortega [[24]]
• María Ignacia Falcone Archivo:MIFA- diseñoweb.rar
• Danila Ilabaca: [25]
• Juan Antonio Godoy Archivo:Diseños Web LC2 JAGB.zip
• Idar González Archivo:IAGD - Diseño interfaz revista ConozcaMas.pdf
• Daniela Pardo Archivo:Diseño Visual.pdf
• Simón Sandoval:[26], Archivo:1. Web.pdf, Archivo:2. Tableta.pdf, Archivo:3. Smartphone.pdf
• Paulina Buvinic:Archivo:PaulinaBuvinic LC2 Tarea V.pdf
• Carolina Núñez: [[27]]
• Javiera Rojas:Archivo:Diseño revista J.R.R.pdf
• Bernardo Silva: Archivo:Bernardo Silva - Web LC2.zip
• Franco Baldassare: Archivo:Franco Baldassare Ware frame web simulada con cascadas.pdf
• Nicol Valenzuela

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