#Win8JSApps | 2.- Guía de estilos
-
Upload
quique-fdez-guerra -
Category
Engineering
-
view
91 -
download
5
description
Transcript of #Win8JSApps | 2.- Guía de estilos
![Page 1: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/1.jpg)
Guía de estiloWindows 8 Apps
Quique Fdez. GuerraCKGrafico
![Page 2: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/2.jpg)
Haz más con menos, céntrate en el contenido y no en los efectos
Rápido y fluido, todo al alcance de una forma simple
Auténticamente digital, si está en una pantalla ha de parecer que lo está
Diseño en Windows 8
![Page 3: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/3.jpg)
Demo
Diferentes estilosen Windows 8
![Page 4: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/4.jpg)
Layout
![Page 5: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/5.jpg)
![Page 6: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/6.jpg)
Texto Segoe
Elementos UI
Iconos Segoe UI SymbolElementos HTML
![Page 7: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/7.jpg)
Podemos clasificarlos principalmenteen tres tipos de logosLos logos simples o iconosque son muy sencillos
Logos de imagen horizontal ylogos anchos y cuadrados
Logos para nuestras apps
![Page 8: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/8.jpg)
Demo
Elementos HTMLLogos, Iconos y Tiles
![Page 9: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/9.jpg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere neque mi, ac dictum nulla lobortis et. Suspendisse id fringilla dolor, sed elementum ligula. Duis vel elementum mi, eget dictum justo. Nulla vehicula malesuada egestas. Duis in turpis at purus convallis hendrerit sagittis vel tortor. Aenean semper lectus et li.
Tenemos -ms-grid en IE
La Grid
Siempre podemos hacer unaNo te limites a una lista en forma de gridRecuerda que el responsive aquí si importa
![Page 10: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/10.jpg)
Las aplicaciones tiene una estética bastante marcada, aunque podemos salirnos del caminoLos diseños se deben adaptar a varias resoluciones y tamaños
Otras Apps te pueden servir de inspiración
![Page 11: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/11.jpg)
Demo
De web a App(ejemplo inventado)
![Page 12: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/12.jpg)
![Page 13: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/13.jpg)
![Page 14: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/14.jpg)
![Page 15: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/15.jpg)
Esquema
Colores
EstructuraWeb
Ciudades Guía Secciones
Noticias Contenido
1..n
1 1..n
Otros elementosLogin/Registro
BuscadorMucho textoImportancia imágenes
1
1..n
![Page 16: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/16.jpg)
![Page 17: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/17.jpg)
Buscar
>
![Page 18: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/18.jpg)
Buscar
4
6
4
7
2 1
8
3
![Page 19: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/19.jpg)
Buscar
Barcelona
Guía de Barcelona, una de las grandes metrópolis…
![Page 20: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/20.jpg)
BuscarVolver
Barcelona
Guía de Barcelona, una de las grandes metrópolis del Mediterráneo que tiene mil dimensiones y miles de espacios llenos de colorido y densidad histórica. Romana, gótica, modernista, futurista...El visitante nunca queda defraudado de su derroche de vida y color.
Barcelona no sólo es una ciudad para hacer una visita detenida, sino para volver. Nunca faltan en la urbe atractivos culturales para ello.
Tradición y modernismo se conjugan en esta ciudad, a la que guiarte.com dedica una de sus más extensas guías.
EL PATRIMONIOBARCELONÉS
LAS RAMBLAS
EL BARRIOGÓTICO
LA CATEDRALDE BARCELONA
PLAZA DEL REY
SANTA MARÍADEL MAR
![Page 21: #Win8JSApps | 2.- Guía de estilos](https://reader038.fdocuments.co/reader038/viewer/2022103116/559252421a28abc93c8b4648/html5/thumbnails/21.jpg)
(function(Gracias){ })(this.despedida);
Quique Fdez. GuerraCKGrafico