Principios de Estilo para Desarrollo Web

Introducción

La Guía de estilo web para nuestro sitio tiene como objetivo establecer un marco de intervención controlado para su interfaz. Para ello, se han establecido pautas para un desarrollo coherente y comprensible que permita un correcto mantenimiento del portal.

Estructura

La interfaz se construye sobre una retícula de tres filas.

• En la primera fila, en la parte superior, se encuentra el nombre de nuestra tienda, “MiTienda”. Un poco más abajo, se presenta un índice de las páginas a las que se puede acceder:
  • Página principal
  • Complementos
  • Camisetas
  • Pantalones
  • Vestidos
• En la segunda fila, se encuentra información de nuestros productos, ya sea una breve descripción o unas fotos.
• En la tercera fila, se encuentra el logo de nuestro sitio web, un pequeño menú y una foto de nuestra modelo principal.

Tipografía

Para el sitio web, se ha empleado Times New Roman, una de las tipografías estándar en HTML que aseguran una perfecta legibilidad en la web. Se utiliza en su versión regular y a un tamaño mínimo de 0.6em.

Usos del Color

Colores Primarios Corporativos

Nuestro sitio web destaca por la utilización de una gama con predominio del rosa oscuro para la parte superior, rosa claro para la parte central y gris oscuro para la parte inferior.

(Nota: Considerar añadir información sobre colores secundarios).

Logo y Marca Denominativa

Nuestro logo es un diseño exclusivo de nuestra tienda. Se muestra en todas las páginas de nuestro sitio web y tiene un tamaño de 414 x 114 px.

Imágenes

Las imágenes de nuestro sitio web tienen diferentes tamaños.

• La imagen de cabecera del sitio web es un conjunto de nuestras camisetas que ocupa un tamaño de 1000 x 400 px.
• Además, se dispone de varias imágenes de un tamaño más reducido en las que se muestran nuestros productos; estas imágenes tienen un tamaño medio de 400px.

Contenido

En el contenido de nuestro sitio web, destacan la localización física de nuestras tiendas y la descripción de nuestros productos, que se encuentran explicados detalladamente en sus secciones.

Imagen de Ejemplo

Enlazar CSS

Al aplicar las reglas de estilo a un documento HTML, existen tres formas de hacerlo:

• Estilos en línea.
• Hojas de estilos incrustadas.
• Hojas de estilos externas: vinculadas o importadas.

Atributo: Es lo que queremos modificar en la etiqueta; en el ejemplo anterior, el color y la alineación.

Valor: Hace referencia a una instancia del atributo; en nuestro ejemplo, sería 'verde' para el color y 'centrado' para la alineación del texto.

Ejemplo: p {color:green;text-align:center;}

Selectores CSS: Clase vs. ID

Primero, debemos saber cuál es la diferencia entre selector de clase y selector de ID.

• Los selectores de ID están pensados para que el elemento que seleccionan sea único (solo se puede asignar un identificador dado a un elemento de la página).
• Sin embargo, las clases están pensadas para poder definir el mismo estilo a varios elementos de la página. Es decir, se puede asignar una misma clase a varios elementos de la página sin problemas.