Lenguaje para la Portada del sitio ead
Título | Lenguaje para la Portada del sitio ead |
---|---|
Tipo de Proyecto | Proyecto de Taller |
Palabras Clave | portada, sitio ead, propuesta personal, css, less, EGGL |
Del Curso | Taller de Construcción DG 4 - 2012, |
Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
Alumno(s) | Nicole Arce |
Profesor | Herbert Spencer |
URL | https://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.
Primer acercamiento a la interfaz gráfica
Wireframes
Mapa de divs
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.
La siguiente pantalla muestra las columnas para las que fueron pensadas los contendores
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
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.
id en el html
estilo dado por un id
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.