Diferencia entre revisiones de «Tareas LC2 2012»

De Casiopea
(Encargo Clase 4)
m (Protegió «Tareas LC2 2012»: Término del Ramo 2012 (‎[edit=sysop] (indefinido) ‎[move=sysop] (indefinido)) [en cascada])
 
(No se muestran 151 ediciones intermedias de 24 usuarios)
Línea 3: Línea 3:
 
</div>
 
</div>
  
 +
__TOC__
  
__TOC__
 
 
=Tareas=
 
=Tareas=
  
==Encargo Clase 1==
+
<pre>
 +
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
 +
</pre>
 +
 
 +
 
 +
==Encargo Clase 1 | Google Site Personal==
 
Creación de un Google Site con las clases y tareas del taller como contenido.
 
Creación de un Google Site con las clases y tareas del taller como contenido.
  
Línea 35: Línea 46:
 
*Camila De la Vega https://sites.google.com/site/camiladcordova/home/
 
*Camila De la Vega https://sites.google.com/site/camiladcordova/home/
 
*Christopher Fattori: https://sites.google.com/site/cfattoriead/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==
+
 
 +
 
 +
==Encargo Clase 2 | Deconstrucción Diario==
 
Deconstrucción de una página de diario.
 
Deconstrucción de una página de diario.
 +
 +
'''[[Andrea Cifuentes]]''': Deconstrucción Diario 20 Minutos - Barcelona - España. [http://wiki.ead.pucv.cl/index.php/Archivo:Deconstrucci%C3%B3n_Diagramaci%C3%B3n_y_Estilos_20Minutos.pdf| descargar PDF]
 +
<gallery>
 +
Image:Deconstrucción Diagramación y Estilos 20Minutos1-01.jpg|Página Original
 +
Image:Deconstrucción Diagramación y Estilos 20Minutos2-02.jpg|Deconsrtucción: Grilla y Elementos
 +
Image:Deconstrucción Diagramación y Estilos 20Minutos3-03.jpg|Lista de Estilos Tipográficos y de Imagen
 +
</gallery>
 +
 +
*Bernardo Silva:[[Archivo:Encargo_II_LC2_-_2012.pdf]]
 +
{{#widget:SlideShare
 +
|doc=encargoiilc2-2012-120831191419-phpapp02
 +
|width=425
 +
|height=348
 +
}}
 +
 +
*Christopher Fattori:  [[Archivo:Chris Fattori - Deconstrucción pagina de Diario El País.pdf]]
 +
 +
{{#widget:SlideShare
 +
|doc=chrisfattori-deconstruccinpaginadediarioelpas-120901120230-phpapp02
 +
|width=425
 +
|height=348
 +
}}
 +
 
*Daniela Pardo: [[Archivo:Estructuración Diario.pdf]]
 
*Daniela Pardo: [[Archivo:Estructuración Diario.pdf]]
 
*José Miguel Ortega : [[Archivo:JoseMiguelOrtegaLaTercera.pdf]]
 
*José Miguel Ortega : [[Archivo:JoseMiguelOrtegaLaTercera.pdf]]
Línea 44: Línea 81:
 
*Carlos Chavez: [[Archivo:Wireframecarlos_chavez.pdf]]
 
*Carlos Chavez: [[Archivo:Wireframecarlos_chavez.pdf]]
 
*Idar González: [[Archivo:DeconstrucciónLa tercera Idar.pdf]]
 
*Idar González: [[Archivo:DeconstrucciónLa tercera Idar.pdf]]
*Juan Antonio Godoy: [[Archivo:Wieframe_el_mercurio4.pdf‎‎‎]]
+
*Juan Antonio Godoy: [[Archivo:EL MERCURIO VALPO.pdf‎‎‎]]
 
*Danila Ilabaca: [[Archivo:Deconstruccióndiariodanila.pdf]]
 
*Danila Ilabaca: [[Archivo:Deconstruccióndiariodanila.pdf]]
 
*Alison Saravia: [[Archivo:Deconstrucciónalison.pdf]]
 
*Alison Saravia: [[Archivo:Deconstrucciónalison.pdf]]
*Andrea Cifunetes: [[Archivo:Deconstrucción Diagramación y Estilos 20Minutos.pdf]]
+
*Michelle Camus [[Archivo:Camus2encargo.pdf‎‎‎‎]]
*Michelle Camus [[Archivo:Encargo2mcamus.pdf‎‎‎]]
 
 
*Karla Vargas: [[Archivo:Tarea 1.pdf]]
 
*Karla Vargas: [[Archivo:Tarea 1.pdf]]
 
*Samira Bajbuj: [[Archivo:Deconstrucción_de_la_página.pdf]]
 
*Samira Bajbuj: [[Archivo:Deconstrucción_de_la_página.pdf]]
Línea 57: Línea 93:
 
*Simón Sandoval: [[Archivo:Deconstrucción_de_una_página.pdf‎]]
 
*Simón Sandoval: [[Archivo:Deconstrucción_de_una_página.pdf‎]]
 
*Nathaly Sepúlveda: [[Archivo:Tareaunolc2.pdf‎]]
 
*Nathaly Sepúlveda: [[Archivo:Tareaunolc2.pdf‎]]
*Nicol Valenzuela: [[Archivo:La_tercera_Deconstrucción.pdf]]
 
 
*Lucas León:[[Archivo:Deconstruccion_Portada.pdf]]
 
*Lucas León:[[Archivo:Deconstruccion_Portada.pdf]]
 
*Javiera Rojas:[[Archivo:TAREA LC2.pdf]]
 
*Javiera Rojas:[[Archivo:TAREA LC2.pdf]]
 
*Carolina Núñez:[[Archivo:Decontrupaginacaro1.pdf]]
 
*Carolina Núñez:[[Archivo:Decontrupaginacaro1.pdf]]
*Bernardo Silva: [[Archivo:Encargo_II_LC2_-_2012.pdf]]
 
 
*Camila De la Vega: [[Archivo:TareaIILc2-Camiladcordova.pdf]]
 
*Camila De la Vega: [[Archivo:TareaIILc2-Camiladcordova.pdf]]
*Christopher Fattori: [[Archivo:Chris Fattori - Deconstrucción pagina de Diario El País.pdf]]
+
*Franco Baldassare: [[Archivo:Franco_Baldassare_T1.pdf]]
 +
[[Archivo:Franco_Baldassare_T1,_parte_2.pdf‎]]
 +
*Nicol Valenzuela
 +
 
 +
[[Archivo:La tercera.png|thumb|200px|center|Original La Tercera]]
 +
[[Archivo:La tercera Deconstrucción.png|thumb|200px|center|Deconstrucción La Tercera]]
 +
[[Archivo:La tercera reproducción.png|thumb|200px|center|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.[http://wiki.ead.pucv.cl/index.php/Archivo:ANCR-diario-estilo-Version1.zip| descargar zip][[Image:Captura de pantalla html css estilos tipograficos diario20.png|thumb| 400px|right|Versión 1: Pantallazo estilos tipográficos Diario20 HTML+CSS]]
 +
<pre>
 +
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;
 +
}
 +
</pre>
 +
 
 +
*Christopher Fattori:
 +
[[archivo:CGWFM-EL_PAIS-Estilos_Indd_y_Css.rar]]
 +
 
 +
[[IMAGEN:CGWFM-El_País-Estilo.jpg|400px|]]
 +
 
  
==Encargo Clase 3==
 
 
*Karla Vargas: [http://dl.dropbox.com/u/51056595/Tarea%202.rar]
 
*Karla Vargas: [http://dl.dropbox.com/u/51056595/Tarea%202.rar]
 
*Paulina Buvinic:[https://dl.dropbox.com/u/50990529/Paulina%20Buvinic%20%3A%20Tarea%20III.zip]
 
*Paulina Buvinic:[https://dl.dropbox.com/u/50990529/Paulina%20Buvinic%20%3A%20Tarea%20III.zip]
 
*José Miguel Ortega: [https://dl.dropbox.com/u/51050661/JMOF-LaTercera.zip]
 
*José Miguel Ortega: [https://dl.dropbox.com/u/51050661/JMOF-LaTercera.zip]
*Carlos Chávez: [https://dl.dropbox.com/u/51139182/CCHG-mercuriovalpo-estilo.rar]
+
*Carlos Chávez: [[Archivo:CCHG-mercuriovalpo-estilo.zip]]
 
*Simón Sandoval:[https://dl.dropbox.com/u/37092362/Tarea%20III%2C%20Sim%C3%B3n%20Sandoval%20Guzm%C3%A1n.zip]
 
*Simón Sandoval:[https://dl.dropbox.com/u/37092362/Tarea%20III%2C%20Sim%C3%B3n%20Sandoval%20Guzm%C3%A1n.zip]
 
*Catalina Reyes: [http://dl.dropbox.com/u/51026388/Catalina%20Reyes%20Navarrio%20-%20Tarea%203.zip]
 
*Catalina Reyes: [http://dl.dropbox.com/u/51026388/Catalina%20Reyes%20Navarrio%20-%20Tarea%203.zip]
 
*Francisca Wevar: [http://dl.dropbox.com/u/87153988/FJWO-diario-estilo.rar]
 
*Francisca Wevar: [http://dl.dropbox.com/u/87153988/FJWO-diario-estilo.rar]
*Daniela Pardo: [[Archivo:DPT - La Tercera - Estilos.rar]]
+
*Daniela Pardo: [[Archivo:DPT - La Tercera - Estilos.pdf]], [[Archivo:DPT - La Tercera - Estilos Tipográficos.zip]]
*Gabriela Perez: [https://www.dropbox.com/s/xuyrlls4rg99t2w/Tarea%203%20LC2%20Gabriela.rar]
+
 
 +
*Gabriela Perez: [http://dl.dropbox.com/u/51004032/Tarea%203%20LC2%20Gabriela.zip]
 
*Idar González: [https://www.dropbox.com/s/sj2meha7hrpp8rm/IAGD-LaTercera-estilos.zip]
 
*Idar González: [https://www.dropbox.com/s/sj2meha7hrpp8rm/IAGD-LaTercera-estilos.zip]
*Juan Antonio Godoy: [[Archivo:JAGB-DIARIO-ESTILO.rar‎]]
+
*Alison Saravia Ortiz: [[Archivo:Alison_Saravia_Tarea_3.zip]]
*Michelle Camus: [[https://dl.dropbox.com/u/51001006/encargo2mcamus.zip‎]]
+
*Michelle Camus: [[https://dl.dropbox.com/u/51050661/encargo3mcamus.zip]]
 +
*Juan Antonio Godoy: [[Archivo:JAGB-DIARIO-ESTILOS.zip‎]]
 
*Javiera Rojas:[[Archivo:JIRRESTILOSDIARIO.pdf]]
 
*Javiera Rojas:[[Archivo:JIRRESTILOSDIARIO.pdf]]
*Danila Ilabaca: [https://dl-web.dropbox.com/get/danila/DANILA%20ILABACA.zip?w=f718284c]
+
*Danila Ilabaca:[[Archivo:daniladiario.pdf]] [https://www.dropbox.com/sh/kqvu5ymmqti8dhs/k7iw7KL_Qi/DANILA%20ILABACA%20TAREA%203.zip]
 
*Nathaly Sepúlveda: [http://dl.dropbox.com/u/51003947/NBSS-Diario%20-Css.rar]
 
*Nathaly Sepúlveda: [http://dl.dropbox.com/u/51003947/NBSS-Diario%20-Css.rar]
 
*Bernardo Silva: [[Archivo:Carpeta_recreacion_BS.rar]]
 
*Bernardo Silva: [[Archivo:Carpeta_recreacion_BS.rar]]
*Andrea Cifuentes: [https://www.dropbox.com/s/al846f1o53exfb4/ANCR-diario-estilo-Version1.zip]
+
*Franco Baldassare: [[Archivo:Baldassare Lc2 wire+estilos de parrafos.pdf]]
 
*Nicol Valenzuela: [https://www.dropbox.com/s/gswldhdanykdi7n/Tarea%203.rar]
 
*Nicol Valenzuela: [https://www.dropbox.com/s/gswldhdanykdi7n/Tarea%203.rar]
 
*María Ignacia Falcone: [[Archivo:MIFA-diario-estilos files.rar]]
 
*María Ignacia Falcone: [[Archivo:MIFA-diario-estilos files.rar]]
*Christopher Fattori: [[Archivo:Chris_Fattori-El_País-Estilo.pdf]] //[[archivo:CGWFM-EL_PAIS-Estilos_Indd_y_Css.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
 +
[[Archivo:ScreenshotCSS.png|thumb|300px|center|Screenshot prueba css. Descarga Archivo comprimido [http://dl.dropbox.com/u/55123791/LC2%20Tareas/Tarea%203.rar]]]
  
==Encargo Clase 4==
+
==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.
  
 +
[[Image:LaCAV Mapa de Navegación.png|thumb|600px|center|Mapa de Navegación CAV]]
  
*Danila Ilabaca: [https://dl-web.dropbox.com/get/Public/DANILA%20TAREA%204%20copia.zip?w=f7d4cd1b]
+
<gallery>
 +
Image:Wireframe CAV MovilHome.png|Wireframe CAV Movil Home
 +
Image:Wireframe CAV MovilNoticia.png|Wireframe CAV Movil Noticia
 +
Image:Wireframe CAV TabletHome.png|Wireframe CAV Tablet Home
 +
Image:Wireframe CAV TabletNoticia.png|Wireframe CAV Tablet Noticia
 +
Image:Wireframe CAV WebHome.png|Wireframe CAV Web Home
 +
Image:Wireframe CAV WebNoticia.png|Wireframe CAV Web Noticia
 +
</gallery>
  
*Nathaly Sepúlveda: [http://dl.dropbox.com/u/51003947/wireframes.%20NBSS.rar]
+
*Bernardo Silva: [[Image:BS - LC2 - mapa de navegación .jpg|300px|thumb|center|Mapa de Navegación Revista "La Magia Azul"]][[Archivo:WireFrame Bernardo Silva.zip]], [[Archivo:Bernardo Silva - encargo 4 - wireframes.pdf]]
  
*Karla Vargas:[[Archivo:Arquitectura.pdf]][[Archivo:Wireframe_web.pdf‎]]
 
  
*Andrea Cifuentes:[https://www.dropbox.com/sh/tad6qwxwuawwe7j/jpd7yQNuxY]
+
*Christopher Fattori:[[Archivo:Chris Fattori - Diseño Contenido revista MásDeco-versión 2.pdf]]//[https://www.dropbox.com/s/042w01yuiaf8d51/Chris_Fattori-Wireframe_web-interactivo.rar]
 +
{{#widget:SlideShare
 +
|doc=chrisfattori-diseocontenidorevistamsdeco-versin2-120901123449-phpapp01
 +
|width=425
 +
|height=348
 +
}}
 +
 
 +
 
 +
*Catalina Reyes: [[Archivo:Wireframe1.1creyes.pdf]]
 +
{{#widget:SlideShare
 +
|doc=wireframe1-1creyes-120901050239-phpapp02
 +
|width=425
 +
|height=348
 +
}}
 +
 
 +
*Danila Ilabaca:[[Archivo: wireframe,danila.pdf]]
  
*Simón Sandoval: [https://dl.dropbox.com/u/37092362/Tarea%20N%C2%BA4%2C%20Wireframes%20Tell%20Magazine.zip]
+
*Nathaly Sepúlveda: [http://dl.dropbox.com/u/51003947/wireframes.%20NBSS.zip]
  
*Gabriela Pérez: [http://dl.dropbox.com/u/51004032/Lc2%20encargo%20wireframes%20Gabriela%20Perez.rar]
+
*Karla Vargas:[[Archivo:Arquitectura.pdf]][[Archivo:Wireframe_web.pdf‎]][[Archivo:Wireframe tablet.pdf]][[Archivo:Wireframe android.pdf]]
  
*Christopher Fattori:[[Archivo:Chris Fattori - Diseño Contenido revista MásDeco-versión 2.pdf]]//[https://www.dropbox.com/s/042w01yuiaf8d51/Chris_Fattori-Wireframe_web-interactivo.rar]
+
*Andrea Cifuentes:[https://www.dropbox.com/sh/tad6qwxwuawwe7j/jpd7yQNuxY]
  
*Bernardo Silva: [[Archivo:WireFrame Bernardo Silva (1).rar]]
+
*Simón Sandoval: [https://dl.dropbox.com/u/37092362/Tarea%20N%C2%BA4%2C%20Wireframes%20Tell%20Magazine.zip], [[Archivo: Arquitectura de contenidos.pdf]], [[Archivo:Wireframes Simón Sandoval.pdf]]
  
*Catalina Reyes: [[Archivo:Wireframe1.1creyes.pdf]]
+
*Gabriela Pérez: [http://dl.dropbox.com/u/51004032/Encargo%20wireframes%20dise%C3%B1o%20%2B%20Diagrama%20de%20contenidos.zip]
  
 
*José Miguel Ortega: [[Archivo:Wireframeortegalc2.pdf]]
 
*José Miguel Ortega: [[Archivo:Wireframeortegalc2.pdf]]
  
*Samira Bajbuj: [http://dl.dropbox.com/u/9994077/Wireframes%20LC2/Wireframes.zip Wireframes][http://wiki.ead.pucv.cl/images/a/a8/Mapa_de_navegaci%C3%B3n_revista.png Mapa de navegación]
+
*Samira Bajbuj: [http://dl.dropbox.com/u/9994077/Sitio%20Revista%2090%2B10%20LC2/wireframes/Wireframes.zip Wireframes][http://wiki.ead.pucv.cl/images/a/a8/Mapa_de_navegaci%C3%B3n_revista.png Mapa de navegación]
** No se puede abrir archivo de Wireframes
 
  
 
*Carlos Chávez: [[Archivo:Wireframe_revista_mi_casa_(carlos_Chavez).pdf]]
 
*Carlos Chávez: [[Archivo:Wireframe_revista_mi_casa_(carlos_Chavez).pdf]]
  
*María Ignacia Falcone:  [[Archivo:MIFA-wireframesvive.rar]]
+
*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: [https://www.dropbox.com/s/brmjrjp1nuxxh7k/Mapa%20de%20navegación%20Revista%20DeNovios%20-%20¿cuáles%20son%20los%20contenidos.jpg]
+
*Alison Saravia: [https://www.dropbox.com/s/brmjrjp1nuxxh7k/Mapa%20de%20navegación%20Revista%20DeNovios%20-%20¿cuáles%20son%20los%20contenidos.jpg], [[Archivo:Wireframes_Alison_Saravia.zip]]
  
 
*Michelle Camus: [[Archivo:WireframeMCamus.pdf]]
 
*Michelle Camus: [[Archivo:WireframeMCamus.pdf]]
  
* Daniela Pardo: [[Archivo:Mapa de Información.pdf]], [[Archivo:DPT-Wireframes.rar]]  
+
* Daniela Pardo: [[Archivo:Mapa de Información.pdf]]:
 +
[[Archivo:Wireframe Móbil 320x480+scroll.fw.png|100px]]
 +
[[Archivo:Wireframe Móbil 480x320+scroll.fw.png|100px]]
 +
[[Archivo:Wireframe Tableta Vertical 768x1024.fw.png|100px]]
 +
[[Archivo:Wireframe Web 1024x768.fw.png|100px]]
  
 
*Camila De la Vega: [[Archivo:Wireframe_revistaWow_camiladcordova.pdf]]
 
*Camila De la Vega: [[Archivo:Wireframe_revistaWow_camiladcordova.pdf]]
  
*Carolina Núñez: [[Archivo:Wireframe.rar ]]
+
*Carolina Núñez: [[http://wiki.ead.pucv.cl/images/b/b0/Wireframe_y_map.pdf]]
  
 
*Paulina Buvinic: [[Archivo:PBuvinic_LC2_Tarea_IV.pdf‎ ]]
 
*Paulina Buvinic: [[Archivo:PBuvinic_LC2_Tarea_IV.pdf‎ ]]
Línea 134: Línea 297:
 
*Javiera Rojas: [[Archivo:TAREA WIREFRAMS J.R.R.pdf]]
 
*Javiera Rojas: [[Archivo:TAREA WIREFRAMS J.R.R.pdf]]
  
==Encargo Clase 5==
+
*Franco Baldassare: [[Archivo:Franco_Baldassare_Tarea_Wareframes.pdf]]
 +
 
 +
*Nicol Valenzuela:
 +
[[Archivo:Mapa de navegacion vive digital.png|thumb|500px|center|Mapa de Navegación]]
 +
 
 +
[[Archivo:WIREFRAMEWEBVD.png|thumb|300px|center|Wireframe Web]]
 +
[[Archivo:Wireframe cont web.png|thumb|300px|center|Wireframe Web contenido]]
 +
[[Archivo:Wieframe tablet.png|thumb|200px|center|Wireframe Tablet]]
 +
[[Archivo:Wireframes tablet cont.png|thumb|200px|center|Wireframe Tablet contenido]]
 +
[[Archivo:Wireframe Iphone.png|thumb|100px|center|Wireframe Móvil]]
 +
[[Archivo:Wireframe Iphone cont.png|thumb|100px|center|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]]''':
 +
 
 +
<gallery>
 +
Image:Interfaz CAV MovilHome.png|Interfaz CAV Movil Home
 +
Image:Interfaz CAV MovilHome320.gif|Interfaz CAV Movil Home 320px
 +
Image:Interfaz CAV MovilNoticia.png|Interfaz CAV Movil Noticia
 +
Image:Interfaz CAV MovilNoticia2.gif|Interfaz CAV Movil Noticia 320px
 +
Image:Interfaz CAV TabletHome.png|Interfaz CAV Tablet Home
 +
Image:Interfaz CAV TabletNoticia.png|Interfaz CAV Tablet Noticia
 +
Image:Interfaz CAV WebHome.png|Interfaz CAV Web Home
 +
Image:Interfaz CAV WebNoticia.png|Interfaz CAV Web Noticia
 +
</gallery>
 +
 
 +
<pre>
 +
 
 +
/*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;
 +
}
 +
</pre>
 +
 
 +
*Catalina Reyes
 +
Archivo .zip contiene originales en formato Fireworks y códigos css
 +
[[Archivo:Revistazoocreyes.zip]]
  
*Christopher Fattori: [https://www.dropbox.com/s/d30gr7413dakyxe/Chris%20Fattori%20-%20Dise%C3%B1o%20Contenido%20%20revista%20M%C3%A1sDeco-versi%C3%B3n%202.pdf]//[[Archivo:Chris Fattori-Wireframe web-interactivo.rar]]
+
[[Archivo:Paginawebzoo2.fw.png|120px|Diseño web]] [[Archivo:Zoomagazinecreyes22.png|120px|Diseño web]]          [[Archivo:Mobilezoomagazine11.png|60px|Diseño móvil]] [[Archivo:Mobilezoomagazine22.png|60px|Diseño móvil]]        [[Archivo:tabletzoo.png|100px|Diseño tablet]] [[Archivo:tabletzoo22.png|100px|Diseño tablet]]
 +
 
 +
*Christopher Fattori:[[Archivo:Chris Fattori-Wireframe web-interactivo.rar]]
 +
{{#widget:SlideShare
 +
|doc=diseodeinterfaz-120901143213-phpapp02
 +
|width=425
 +
|height=348
 +
}}
  
 
*Karla Vargas M* [[Archivo:Diseño_Web.pdf‎]]
 
*Karla Vargas M* [[Archivo:Diseño_Web.pdf‎]]
 
*Daniela Pardo [[Archivo:DPT - Wireframes - Revista.rar]]
 
 
*Samira Bajbuj [http://db.tt/1reZ9Bvk]
 
*Samira Bajbuj [http://db.tt/1reZ9Bvk]
 
*Nathaly Sepúlveda [http://dl.dropbox.com/u/51003947/NBSS-tarea5.rar]
 
*Nathaly Sepúlveda [http://dl.dropbox.com/u/51003947/NBSS-tarea5.rar]
*Catalina Reyes [[Archivo:Revistazoocreyes.zip]]
 
 
*Carlos Chávez* [[Archivo:Propuesta_grafica_(carlos_chavez).pdf‎]]
 
*Carlos Chávez* [[Archivo:Propuesta_grafica_(carlos_chavez).pdf‎]]
 
*Francisca Wevar [[Archivo:T5 VISUALIZACIÓNYESTILOS FRAN WEVAR.pdf]]
 
*Francisca Wevar [[Archivo:T5 VISUALIZACIÓNYESTILOS FRAN WEVAR.pdf]]
*Gabriela Perez [http://dl.dropbox.com/u/54479424/Encargo%20wireframes%20dise%C3%B1o%20%2BCss.%20GPP.rar]
+
*Gabriela Perez [http://dl.dropbox.com/u/51004032/Dise%C3%B1o%20Visual%20GPP.LC2.zip]
 
*José Miguel Ortega [[https://dl.dropbox.com/u/51050661/ortegaLC2web.zip]]
 
*José Miguel Ortega [[https://dl.dropbox.com/u/51050661/ortegaLC2web.zip]]
 
*María Ignacia Falcone [[Archivo:MIFA- diseñoweb.rar]]
 
*María Ignacia Falcone [[Archivo:MIFA- diseñoweb.rar]]
*Danila Ilabaca: [https://dl-web.dropbox.com/get/danila/lc2%2025%20julio%20DANILA%202.zip?w=255281e9]
+
*Danila Ilabaca: [https://www.dropbox.com/sh/kqvu5ymmqti8dhs/l5jPnczPGX/DANILA%20TAREA%205%20.zip]
*Juan Antonio Godoy [[Archivo:LC2.PDF.PNG.rar]]
+
*Juan Antonio Godoy [[Archivo:Diseños Web LC2 JAGB.zip]]
*Idar González [https://dl.dropbox.com/s/jciva0i7is9kfni/IAGD%20Wireframes%20y%20WEB.zip?dl=1]
+
*Idar González [[Archivo:IAGD - Diseño interfaz revista ConozcaMas.pdf]]
 
*Daniela Pardo [[Archivo:Diseño Visual.pdf]]
 
*Daniela Pardo [[Archivo:Diseño Visual.pdf]]
*Andrea Cifuentes: [https://www.dropbox.com/sh/tpvfhjyv3ap9gzr/BtiiQpjTh4]
+
*Simón Sandoval:[https://dl.dropbox.com/u/37092362/Tarea%20V%20LC2%2C%20Sim%C3%B3n%20Sandoval%20G..zip], [[Archivo:1. Web.pdf]], [[Archivo:2. Tableta.pdf]], [[Archivo:3. Smartphone.pdf]]
*Simón Sandoval:[https://dl.dropbox.com/u/37092362/Tarea%20V%20LC2%2C%20Sim%C3%B3n%20Sandoval%20G..zip]
+
*Paulina Buvinic:[[Archivo:PaulinaBuvinic LC2 Tarea V.pdf]]
*Paulina Buvinic:[https://dl.dropbox.com/u/50990529/P.Buvinic%20%3A%20Wireframe%20y%20Dise%C3%B1o.zip]
+
*Carolina Núñez: [[http://wiki.ead.pucv.cl/images/6/6e/Web_carolina.rar]]
*Carolina Núñez: [[Archivo:Web.rar]]
+
*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
 +
[[Archivo:Interfazwebvd.png|thumb|300px|center|Interfaz web Vive Digital]]
 +
[[Archivo:Look feel cont web.png|thumb|300px|center|Interfaz web Contenido Vive Digital]]
 +
[[Archivo:InterfazTabletvd.png|thumb|300px|center|Interfaz Tablet Vive Digital]]
 +
[[Archivo:Interfaztabletcontenido.png|thumb|300px|center|Interfaz Tablet Contenido Vive Digital]]
 +
[[Archivo:InterfazIphonevd.png|thumb|100px|center|Interfaz Móvil Vive Digital]]
 +
[[Archivo:Look feel Iphone cont.png|thumb|100px|center|Interfaz Móvil Contenido Vive Digital]]

Revisión actual del 15:50 5 sep 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.


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