Diferencia entre revisiones de «Tareas LC2 2012»

De Casiopea
(Encargo Clase 2)
m (Protegió «Tareas LC2 2012»: Término del Ramo 2012 (‎[edit=sysop] (indefinido) ‎[move=sysop] (indefinido)) [en cascada])
 
(No se muestran 310 ediciones intermedias de 27 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 17: Línea 28:
 
*Carlos Chávez : https://sites.google.com/site/cchavezgatica/trabajos
 
*Carlos Chávez : https://sites.google.com/site/cchavezgatica/trabajos
 
*Idar González: https://sites.google.com/site/idargonzalez/
 
*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/
 
*Andrea Cifuentes: https://sites.google.com/site/lc2andreacifuentes/
 
*Danila Ilabaca: https://sites.google.com/site/danilailabacalc2/
 
*Danila Ilabaca: https://sites.google.com/site/danilailabacalc2/
Línea 22: Línea 34:
 
*Simón Sandoval: https://sites.google.com/site/simonsandovalguzman/
 
*Simón Sandoval: https://sites.google.com/site/simonsandovalguzman/
 
*Alison Saravia: https://sites.google.com/site/alisonsaravialc2/
 
*Alison Saravia: https://sites.google.com/site/alisonsaravialc2/
 +
*Michelle Camus: https://sites.google.com/site/michellecamusl/
 
*Samira Bajbuj: https://sites.google.com/site/samirabajbujlc2/
 
*Samira Bajbuj: https://sites.google.com/site/samirabajbujlc2/
 
*Carolina Núñez: https://sites.google.com/site/carolinanunezvergara/
 
*Carolina Núñez: https://sites.google.com/site/carolinanunezvergara/
 
*Lucas León: https://sites.google.com/site/lucasleonr/
 
*Lucas León: https://sites.google.com/site/lucasleonr/
 
*María Ignacia Falcone: https://sites.google.com/site/lcmignaciafalcone/
 
*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==
+
==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]]
*Gabriela Pérez: [[Archivo:el mercurio deconstruccion diagramacion y estilos gaby.pdf]]
+
*Gabriela Pérez: [[Archivo:el mercurio decosntruccion diagramacion y estilos gaby.pdf]]
 
*Catalina Reyes Navarro: [[Archivo:mercuriocatalinareyes.pdf]]
 
*Catalina Reyes Navarro: [[Archivo:mercuriocatalinareyes.pdf]]
 
*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:EL MERCURIO VALPO.pdf‎‎‎]]
 
*Danila Ilabaca: [[Archivo:Deconstruccióndiariodanila.pdf]]
 
*Danila Ilabaca: [[Archivo:Deconstruccióndiariodanila.pdf]]
*Andrea Cifunetes: [[Archivo:Deconstrucción Diagramación y Estilos 20Minutos.pdf]]
+
*Alison Saravia: [[Archivo:Deconstrucciónalison.pdf]]
 +
*Michelle Camus [[Archivo:Camus2encargo.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]]
 
*María Ignacia Falcone: [[Archivo:Tarea 2 LC2.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
 +
 +
[[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|]]
 +
 +
 +
*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]
 +
*José Miguel Ortega: [https://dl.dropbox.com/u/51050661/JMOF-LaTercera.zip]
 +
*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]
 +
*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]
 +
*Daniela Pardo: [[Archivo:DPT - La Tercera - Estilos.pdf]], [[Archivo:DPT - La Tercera - Estilos Tipográficos.zip]]
 +
 +
*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]
 +
*Alison Saravia Ortiz: [[Archivo:Alison_Saravia_Tarea_3.zip]]
 +
*Michelle Camus: [[https://dl.dropbox.com/u/51050661/encargo3mcamus.zip]]
 +
*Juan Antonio Godoy: [[Archivo:JAGB-DIARIO-ESTILOS.zip‎]]
 +
*Javiera Rojas:[[Archivo:JIRRESTILOSDIARIO.pdf]]
 +
*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]
 +
*Bernardo Silva: [[Archivo:Carpeta_recreacion_BS.rar]]
 +
*Franco Baldassare: [[Archivo:Baldassare Lc2 wire+estilos de parrafos.pdf]]
 +
*Nicol Valenzuela: [https://www.dropbox.com/s/gswldhdanykdi7n/Tarea%203.rar]
 +
*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
 +
[[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 | 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]]
 +
 +
<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>
 +
 +
*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]]
 +
 +
 +
*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]]
 +
 +
*Nathaly Sepúlveda: [http://dl.dropbox.com/u/51003947/wireframes.%20NBSS.zip]
 +
 +
*Karla Vargas:[[Archivo:Arquitectura.pdf]][[Archivo:Wireframe_web.pdf‎]][[Archivo:Wireframe tablet.pdf]][[Archivo:Wireframe android.pdf]]
 +
 +
*Andrea Cifuentes:[https://www.dropbox.com/sh/tad6qwxwuawwe7j/jpd7yQNuxY]
 +
 +
*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]]
 +
 +
*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]]
 +
 +
*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]
 +
 +
*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: [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]]
 +
 +
* 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]]
 +
 +
*Carolina Núñez: [[http://wiki.ead.pucv.cl/images/b/b0/Wireframe_y_map.pdf]]
 +
 +
*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:
 +
[[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]]
 +
 +
[[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‎]]
 +
*Samira Bajbuj [http://db.tt/1reZ9Bvk]
 +
*Nathaly Sepúlveda [http://dl.dropbox.com/u/51003947/NBSS-tarea5.rar]
 +
*Carlos Chávez* [[Archivo:Propuesta_grafica_(carlos_chavez).pdf‎]]
 +
*Francisca Wevar [[Archivo:T5 VISUALIZACIÓNYESTILOS FRAN WEVAR.pdf]]
 +
*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]]
 +
*María Ignacia Falcone [[Archivo:MIFA- diseñoweb.rar]]
 +
*Danila Ilabaca: [https://www.dropbox.com/sh/kqvu5ymmqti8dhs/l5jPnczPGX/DANILA%20TAREA%205%20.zip]
 +
*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:[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]]
 +
*Paulina Buvinic:[[Archivo:PaulinaBuvinic LC2 Tarea V.pdf]]
 +
*Carolina Núñez: [[http://wiki.ead.pucv.cl/images/6/6e/Web_carolina.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