Estilos de la página web

INSTITUTO TECNOLÓGICO SUPERIOR

"CENTRAL TÉCNICO"

Tema: Estilos de la página web.

Alumno: Carranza Zambrano Jackson.

                                                                                             

Docente: Ing. Julio Calvopiña Herrera, MSc.

Año Lectivo: 2014 - 2015.

La forma en que se ven todos los elementos de nuestra página web depende del estilo.

El estilo se compone de distintas propiedades y sus valores correspondientes. Las propiedades pueden ser el color de la fuente, el tamaño, la alineación, los márgenes, etc... Los valores dependen de cada propiedad, por ejemplo, a la propiedad color le podemos asignar valores como red (rojo), blue (azul), ... y a la propiedad tamaño fuente le podemos asignar un valor en porcentaje 100%, 120%, ... o en pixels 12px, 15px, ....

El formato a seguir para definir una propiedad es: propiedad: valor; o propiedad: valor1 valor2 valor3; si puede tener varios valores.

Por ejemplo, si queremos que el texto sea de color rojo y un tamaño de fuente de 120%, escribiriamos el siguiente estilo:

color:red; font-size:120%

y obtendríamos el siguiente resultado:

Texto rojo a 120%

¿Dónde escribimos el estilo? Hay varias formas de hacerlo, como vamos a ir viendo a lo largo del curso, pero lo más recomendable es agrupar todas las declaraciones de estilos en un solo lugar, definiendo un bloque dentro de la etiqueta Head que contega la definición de estilos. Para ello, tenemos que incluir en la etiqueta <style type="text/css"> ... </style> y definir dentro los estilos correspondientes a cada elemento de nuestra página, como puedes ver al principio de esta página.

Si queremos que un estilo afecte a todos los elementos de la página, debemos definir un estilo para la etiqueta body. En esta etiqueta se suele definir el color de fondo y los valores genéricos de color y tamaño del tipo de letra. En nuestro ejemplo hemos definido el estilo delbody así:

body {font-family: Verdana,Arial,sans-serif;
font-size: 15px;color: #735846;text-align: justify;background-color: #3d2e2a;}

Que quiere decir que, el tipo de letra o fuente, será Verdana, ( o Arial si no existe Verdana, o sans-serif si no existen las anteriores); el tamaño será 15 pixels, el color será el definido por el valor #735846 (en este tema básico sobre colores  puedes ver qué quiere decir esto), la alienación del texto será justificada y el color de fondo de la página será el #3d2e2a.

A continuación vamos a definir el estilo de la etiqueta H1, de la siguiente forma:

h1{ margin-left: 80px;
margin-top: 20px;
font-size: 180%;
color: #d38451;}

Que quiere decir que todas las cabeceras H1 tendrán un margen izquierdo de 80 pixels (si no se pone la unidad, se toman pixels), un margen superior de 20 pixels, un tamaño de letra de 180% y el color #d38451 , como puedes comprobar en la imagen del principio de este punto, la cabecera "Bienvenido a Floramics" queda así:

Es decir, el color y tamaño de este estilo han prevalecido sobre los ya definidos en la etiqueta Body.

Siguiendo con nuestro ejemplo, a continuación definimos un mismo estilo para las cabeceras H2 y H3, pero como queremos que la cabecera H3 tenga un color diferente, volvemos a definir otro estilo a continuación para H3 con el valor del color deseado. Es decir, el valor válido es el último valor definido, por esto los estilos se llaman CSS (Cascade Style Sheet. Hojas de estilo en cascada). Más adelante hablaremos más sobre el orden de aplicación de los estilos.

A continuación definimos el estilo de los párrafos (etiqueta p) con un line-height (interlineado) de 1.5em (en este tema básico sobre unidades de medida  puedes ver qué quiere decir em) , una identación de 15 pixels y un margen de 35 pixels.

Con lo definido hasta ahora el texto que escribamos en los párrafos tomará las propiedades definidas en los estilos de la etiqueta Body y de la etiqueta p, pero ¿Cómo podemos cambiar el color de una palabra concreta dentro de un párrafo? Para hacer esto tenemos que definir un nuevo tipo de estilo: las clases. Definir un estilo de clase es muy sencillo, basta escribir un punto y un nombre elegido por nosotros, por ejemplo:

.azul { font-weight: bold;
color: #6C6CCA;}

Así hemos definido un estilo para la clase azul con tipo de fuente negrita y color #6C6CCA.

Una vez definida la clase, para aplicársela a una palabra basta utilizar la etiqueta span enmarcando la palabra. Por ejempo, para asignarle la clase azul a la palabra información (que esta dentro de un párrafo), escribiriamos:

<p>En esta web encontrarás <span class="azul">información </span> sobre la 
asociación y nuestra colección de fotografías de 
flores.</p>
  

Lo cual, haría que el párrafo se viese así:

Puedes observar que la clase azul ha "añadido" las propiedades color azul y negrita a la palabra información, manteniendo las otras propiedades que ya tenía por pertenecer a un párrafo. Es decir, los estilos van sumando propiedades sin eliminar las que ya se tienen.

Independencia entre el contenido y el formato.

Con los estilos CSS conseguimos dar formato a las páginas web de una forma que no existía hasta que aparecieron ellos: separando el formato del contenido. Por un lado tenemos la definición de estilos y por otro lado el propio texto de la página. Este concepto es muy importante porque hace que el trabajo de creación y mantenimiento de una página web sea más sencillo.

Hasta que aparecieron los estilos CSS el formato y el texto estaban mezclados. Ahora se pueden separar y los estilos CSS nos proporcionan las herramientas para hacerlo, aunque también es posible mezclarlo todo. En este curso procuraremos hacerlo bien.

Siguiendo esta forma de hacer las cosas obtendremos páginas web en las que cambiar su aspecto sea algo sencillo, simplemente habrá que modificar un estilo en un solo lugar.

 Aún es posible aplicar  formato sin separarlo  del contenido, si quieres ver lo que no hay que hacer, mira este tema básico.

Aspectos estéticos de una página web

Combinación de colores Cuando un objeto o figura de un color dado se encuentra en contacto con otro objeto de color diferente, se produce lo que llamamos combinación de colores. En el diseño web, el contraste entre los diferentes colores empleados para decorar y los colores propios de las imágenes, resulta determinante a la hora de definir la estética de la página. Las propiedades de los colores (luminosidad, valor, temperatura y saturación), hace que haya muchas variedades de colores y, por ende, muchas posibilidades de combinaciones y contrastes. El contraste entre elementos con diferencias en la luminosidad de los colores, puede verse muy claramente en la combinación del color blanco con el negro, ya que estos son los extremos de la luminosidad. El contraste por luminosidad es uno de los más empleados en el diseño de páginas web, fundamentalmente en el destaque de los textos sobre el fondo sobre el que se colocan. En la siguiente figura, podremos apreciar combinación de colores cuya diferencia radica en la luminosidad. También es posible emplear los demás tipos de contrastes de colores, como los contrastes por el valor, por la saturación, etc. Cuando el contraste se produce entre colores complementarios, las diferencias son muy nítidas, aunque las diferencias que se producen son extremas, lo que hace que debamos emplear este tipo de contraste de color con sumo cuidado, porque se pueden producir estridencias que pueden dar problemas estéticos importantes al diseño en su conjunto. Hasta hace unos años, era frecuente encontrar diseños web en los que se empleaba una combinación de colores seleccionados de una paleta muy exigua, de apenas 256 colores, dada la tecnología que se empleaba para formar colores en los monitores. Con el avance tecnológico de los últimos años, esto se ha resuelto y los diferentes hardware y software pueden crear e interpretar una gama de colores de varios millones de ellos, lo que permite una gran libertad a los diseñadores web. Tipos de forma y su utilización en el diseño web Las formas pueden dividirse en tres tipos básicos: las formas geométricas, las formas naturales y las formas abstractas. Lasformas geométricas es en lo primero que pensamos cuando se habla de formas. No son frecuentes en la naturaleza dada la regularidad de las mismas. Los cristales son uno de los pocos ejemplos de formas geométricas naturales. El empleo de la forma geométrica en todo tipo de diseño es muy frecuente, dado que generalmente se trata de objetos simétricos y regulares, lo que brinda a quien lo contempla, sensación de seguridad, orden y prolijidad. Las formas geométricas más usuales en el diseño web son el cuadrado, el rectángulo, el triángulo y el círculo. La página que mostramos a continuación es un ejemplo de empleo de la forma geométrica. Las formas naturales también tienen un empleo frecuente, ya que permite una rápida asociación con un mensaje. La mayoría de las formas naturales empleadas en el diseño web son extraídas de imágenes. La siguiente página web nos muestra un ejemplo de ello: Las formas abstractas constituyen el terreno menos explorado, aunque en los últimos años se ha producido un incremento en su empleo, gracias a la aparición de nuevas tendencias en el diseño, asociadas a tendencias artísticas como el arte abstracto o el pop art. Dentro de esta categoría también se incluyen aquellos elementos creados para representar algo sin emplear una imagen del mismo. Un claro ejemplo de esto son los íconos, que sirven para que los usuarios reciban el mensaje de que desde allí se puede acceder a un contenido, mediante una representación gráfica basada en una forma. El siguiente es un ejemplo de utilización de formas abstractas: En este ejemplo, el logotipo está formado por una forma que es la abstracción de un corazón. Si bien todos sabemos que se trata de un corazón, en realidad no es la imagen de un corazón, sino de una representación abstracta del mismo. Muchas formas abstractas son símbolos empleados universalmente y se las emplea para enviar a los usuarios un mensaje de fácil comprensión. Utilidad de la forma en el diseño web Como cualquier otro elemento de diseño web, la forma puede emplearse de muchas formas y en múltiples funciones. El único límite con que cuenta el diseñador es el límite que tenga su propia imaginación. La forma puede servir como método para agregar interés al diseño. La forma como elemento decorativo es un excelente recurso y puede utilizarse como fondo, como decoración de espacios en blanco o para ilustrar contenidos. La repetición de una o varias formas da lugar a motivos que pueden ser empleados como fondo de diseño. Este es el fundamento de los pattern o fondos decorativos. También sirve como forma de mantener el interés. Si, por ejemplo, una página web debe presentar un texto extenso, la utilización de formas como elemento decorativo puede hacer que el lector no pierda el interés al extenderse en la lectura. Las listas no ordenadas, llevan al inicio de cada ítem algún tipo de forma. Lo más frecuente en este tipo de decoraciones es el uso de formas geométricas, aunque también pueden emplearse formas naturales (una hoja, una flor, un animal, etc.). Otra función aplicable a la forma es la de organizar o separar elementos. La separación entre contenidos y secciones se ve enormemente enriquecida con la aplicación de formas. Así el diseñador puede organizar la página en secciones y separar los elementos entre si, algo que resulta imprescindible para brindar, además de dar un aspecto ordenado, una división entre los diferentes elementos que permita una mejor visibilidad de los mismos. Algo que resulta imprescindible en todo buen diseño, es dirigir la vista del usuario por las secciones que el diseñador entiende que son más importantes. La utilización de formas como elemento para dirigir la vista del usuario es muy recurrente en el diseño de páginas web, ya que los atributos de la forma son ideales para llamar la atención de los lectores hacia aquellas secciones de mayor interés. La colocación de una forma colorida y llamativa junto a un texto, dirigirá fácilmente la atención del usuario hacia el mismo. La forma tiene una serie de atributos que permiten al diseñador explorar una gran cantidad de posibilidades, tanto desde el punto de vista decorativo como medio para entregar un mensaje al usuario. Esto se debe en parte a que tenemos la tendencia natural a interpretar mejor los contenidos visuales. De todos los elementos de diseño, la forma es el que mayor cantidad de posibilidades ofrece al diseñador.

 

Link: http://www.aulaclic.es/paginas-web/t_3_2.htm
Link: https://sites.google.com/site/disenodepag/home/aspectos-esteticos-de-una-pagina-web

“La imaginación es más importante que el conocimiento. 
El conocimiento es limitado, 
mientras que la imaginación no”
 (Albert Einstein)