Lenguaje para la Portada del sitio ead

De Casiopea



TítuloLenguaje para la Portada del sitio ead
Tipo de ProyectoProyecto de Taller
Palabras Claveportada, sitio ead, propuesta personal, css, less, EGGL
Del CursoTaller de Construcción DG 4 - 2012
CarrerasDiseño Gráfico
Alumno(s)Nicole Arce
ProfesorHerbert Spencer
URLhttps://github.com/Nicolearce/EGGL-Nicole-Arce

Punto de partida

se propone trabajar en base al proyecto EGGL https://github.com/hspencer/EGGL-ead, e[ad] Global Graphic Language: Principios gráficos de la e[ad] Escuela de Arquitectura y Diseño PUCV para todos los servicios digitales e impresos. Siendo este proyecto el punto de partida para desarrollar el proyecto personal. El proyecto nos introduce a la edición del código, existiendo páginas en LESS con elementos definidos y un orden semántico establecido.

Grillahs.png

Primer acercamiento a la interfaz gráfica

Tarea2-construccion.png

Wireframes

Ead-w1-a.png


Ead-w2.png

Mapa de divs

Mapadivsead2.png

Grilla

La propuesta se caracteriza por tener contenedores, el ancho los contenedores están dados por columnas, y el espacio entre ellos por @interColumna, el padding se lo doy al contenedor. Por lo que surge un problema, pues cuando le doy el padding este crece y no posee el ancho de columnas dado desde un principio.

Esquema-mbp.png

La siguiente pantalla muestra las columnas para las que fueron pensadas los contendores

Grilla-eadsitio.png

Propuesta tipográfica

Lato

es una tipografía typeface sin serif. La familia Lato pertenece a la fundición tyPoland, y fue publicada bajo la licencia open-source con el soporte de google, la podemos encontrar en Google web fonts Es una tipografía con proporciones clásicas, que pueden ser particularmente visibles en las de caja alta (Mayúsculas) esto le da armonía y elegancia Lato posee 5 pesos tipográficos.

Portada

Pantallazo1-sitio.png


Pantallazo2-sitio.png

Menú fijo

para facilitar la búsqueda y lectura de la página se piensa en una barra de menú fijo, que optimize la búsqueda dentro del sitio. Para lograr esto es necesario usar javascripts.

Fixedmenu.png

id en el html

Html-fixedmenu.png

estilo dado por un id

Less-fixedmenu.png


Fixedmenu-vis.png

Programas utilizados

complementos

complemento para firefox donde puedo ver y probar código en CSS, HTML y ver js de un sitio

complemento para firefox, donde puedes ver directamente el archivo less.

Editor de texto "coda2"

http://panic.com/coda/ Se ocupa el editor de texto coda2, pues permite abrir los archivos less y pintar el código, para facilitar la edición de los archivos less es necesario pintarlos, es sencillo hacerlo, sólo deber ir a coda-preferencias-editor-custom syntax mode-extension LESS-syntax mode CSS

Compilador "LESS"

http://incident57.com/less Compila los archivos less en el css, agilizando el trabajo, pues cada vez que se cambia algo en alguna hoja de less se actualiza el css, permite verificar errores y ayuda a combinar los javasripts.

Repositorio "Github"

https://github.com/ utilizado para subir el código de nuestras propuestas a la web.