Rediseño para portada del sitio e.ad

De Casiopea


TítuloPropuesta para portada del sitio de la escuela
Tipo de ProyectoProyecto de Taller
Palabras Clavesitio web, framework, CSS, HTML, Less
Período2012-2012
AsignaturaConstrucción de Diseño Gráfico 4
Del CursoTaller de Construcción DG 4 - 2012
CarrerasDiseño Gráfico
Alumno(s)Alison Saravia
ProfesorHerbert Spencer
URLhttps://github.com/alisonsaravia/Propuesta-sitio-de-la-escuela-e.ad.git

INTRODUCCIÓN

A lo largo del trimestre se planteó desarrollar una propuesta gráfica para el sitio web de la escuela, por medio de HTML y cascadas de estilo (CSS). Crear lo que llamamos "Framework" que corresponde a una estructura de soporte bien definida para la web. A continuación se presenta desde el punto de vista de "niveles de acercamiento" el modo en el que se fue trabajando para llegar a la propuesta final.

Nivel I

Corresponde a la definición de los conceptos básicos con los que se va a trabajar

Conceptos:

  • INTERFAZ: Cuando se habla de Sitios Web, se denomina interfaz al conjunto de elementos de la pantalla que permiten al usuario realizar acciones sobre el Sitio Web que está visitando. Por lo mismo, se considera parte de la interfaz a sus elementos de identificación, de navegación, de contenidos y de acción.
  • HTML: Corresponde al lenguaje de códigos que presenta la estructura del sitio web y su contenido ya sea escrito o de fotos.Funciona por medio de etiquetas y atributos.
  • CSS: Cascadas de estilo, lenguaje de códigos que se enfoca en los atributos visuales del sitio web, por ejemplo el tamaño y color de una tipografía, o los márgenes de una columna, etc.
  • JAVA: Corresponde a la interacción y comportamiento que va tener el sitio.
  • CODA:Programa de edición de texto utilizado para realizar la propuesta del sitio web. Permite abrir archivos HTML,CSS y Java entre otros,además de la edición de ellos.
  • LESS:LESS es una ampliación a las hojas de estilo CSS, pero a diferencia de estas funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, operaciones aritmeticas, entre otras, para acelerar y enriquecer los estilos en un sitio web.

Nivel II

Lenguaje de Interfaz

Primer acercamiento a lo que es el diseño de interfaces web. Se prueba el color, el diseño y se corrigen las fallas esenciales. En primer lugar no existe una estructura definida, más adelante se le da solución a este primer problema. Lo segundo, es que no existe una clara definición de lo que se quiere hacer. Debe existir un orden y un mayor cuidado al momento del diseño de interfaces.

Interfaces web.png

Más adelante se le da solución a los problemas gráficos diseñando directamente con códigos HTML y CSS.


Nivel III

Comienzo del trabajo con lenguaje de códigos.

En base al proyecto de código libre EGGL descargado de Github.com y por medio de tutoriales en internet se editan los archivos para realizar pruebas. Eggl.jpg




PRUEBA 1: Header de la página. Se crea el logo de la escuela, mapa de navegación y un buscador.


Header.jpg Header2.jpg

Buscador1.jpg Buscador2.jpg


PRUEBA 2: Contenedores.

Contenedor.jpg Contenedor2.jpg

En resumen, en este nivel realicé pruebas sobre el header y los contenedores pero aun sin estructura, lo cual no permite dimensionar realmente como se va a visualizar la portada del sitio. La solución es basarse en columnas predeterminadas o grillas, lo cual se va a mostrar a continuación.

Nivel IV

A partir de las pruebas anteriores comienzo el diseño real del sitio

Sin basarme en el sitio EGGL, comiezo a guiarme por tutoriales vía internet, prueba y error en el mismo programa, dándole forma estructural clara al sitio.

GRILLA

Para mantenerme en la línea general que tiene actualmente la página web de la escuela, opté por seguir utilizando 3 columnas para ordenar los elementos de la página.

Grillaaa.png

Nivel V

Selección Tipográfica Final

Las fuentes utilizadas para ésta propuesta son San serif, ya que para la visualización de sitios web es más óptimo. La principal fuente utilizada es:

  • Bebas Neue

Bebas.jpg

A su vez, para otros textos, siguiendo la línea "san serif" se utilizaron tanto la Helvética como la Arial.

783px-Helvetica Neue typeface weights.svg.png

Nivel VI

Aplicando Responsive design

Permite poder visualizar la página web en formato web, tablet y móvil


  • Webb.png


  • Movil.png


Aplicaciones Extras

Para poder realizar la portada fue necesaria la utilización de lenguaje "javascript" para las siguientes secciones:

  • Menú de navegación.
  • Galería de imágenes.
  • "Agenda."


Programas utilizados

complementos

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

Editor de texto "coda2"

Compilador "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.

PROPUESTA FINAL

ARCHIVOS HTML, CSS, IMÁGENES, Y ARCHIVOS JAVA PARA VISUALIZAR LA PROPUESTA OPTIMIZADA PARA FIREFORX:

Archivo:Propuesta sitio web escuela.zip