Unidades de Medida,Hojas de Estilo y Listas Personalizadas

Unidades de Medida

Uno de los elementos más importantes del diseño web son las medidas porque tiene un gran efecto en la accesibilidad de un sitio web.
En CSS el valor de una propiedad, tal cómo font-size, se puede expresar en unidades de longitud o en unidades de porcentaje. veamos las unidades que tenemos disponibles:

Unidades de longitud 

1.      1- Unidades absolutas

• ·         in (pulgadas)

• ·         cm (centímetros)

• ·         mm (milímetros)

• ·         pt (puntos)

• ·         pc (picas)

• ·         px (pixeles)

2.       2-Unidades relativas

• ·         em

• ·         ex

3.      3- Unidades de porcentaje

• ·         %

La mejor es em

Con este tipo de medidas el autor mantiene un control relativo ya que, en relación con el tamaño de fuente por defecto del usuario, puede especificar cuanto mas grande o mas pequeña se ha de visualizar la letra de la página.

¿Por qué no utilizar unidades absolutas?

Las unidades absolutas como px (pixeles), cm (centímetros), pt (puntos), permiten un control exacto de la apariencia de la página, siempre y cuando, claro está, que esta se visualice en el entorno preciso para el que fue

Ejemplos de unidades de medida

.

Utilizando em Texto normal: 3em, 2em,1em. Utilizando ex Texto normal: 3ex, 2ex,1ex. Utilizando px Texto normal: 20px, 15px,10px. Utilizando in Texto normal: 1in, 0.5in. Utilizando cm Texto normal: 2cm, 1cm. Utilizando mm Texto normal: 20mm, 10mm. Utilizando pt Texto normal: 18pt, 12pt. Utilizando pc Texto normal: 5pc.

                 Listas Personalizadas

 Bueno nosotros pudimos encontrar que  Una  lista, o listado, es una enumeración de dos o más elementos y suelen disponerse de tal forma que se facilite la distinción entre ellos. Las listas originalmente están pensadas para citar, numerar y definir cosas a través de características, o al menos así lo hacemos en la escritura de textos. Sin embargo, las listas finalmente se utilizan para mucho más que enumerar una serie de puntos, en realidad son un recurso muy interesante para poder maquetar elementos diversos, como barras de navegación, pestañas etc.

Podemos definir que hay diferentes tipos de listas

·  Numerada u ordenada.
·  No ordenada.
·  Listas de glosario o de definición.
·  Menús.
·  Usadas con párrafos cortos.

Listas no ordenadas

Probablemente el tipo de listas más usados en las páginas web son las listas no ordenadas. Como hemos adelantado antes a modo de ejemplo, este tipo de lista queda delimitada por la etiqueta <UL>...</UL> (UL proviene de Unordered List, que significa lista no ordenada). Dentro de estas etiquetas insertaremos cada elemento con la etiqueta <LI>. Veamos un ejemplo ligeramente más completo que el anterior:

Mi ordenador tiene las siguientes características:         <UL>           <LI>Procesador Pentium 166           <LI>CD-ROM 8x           <LI>Tarjeta de sonido 16 bits           <LI>Tarjeta de vídeo con 2 Mb         </UL>

Listas ordenadas

Las listas ordenadas sirven también para presentar información, en diversos elementos o items, con la particularidad que éstos estarán predecidos de un número o una letra para enumerarlos, siempre por un orden.

Para realizar las listas ordenadas usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento sera igualmente indicado por la etiqueta <li>, que ya vimos en las listas desordenadas.

que se corresponde con el siguiente código: 

Un buen equipo adaptado a las nuevas tecnologías consta de: <OL> <LI>CPU rápida <LI>Impresora a color de buena definición. <LI>Altavoces y cámara de vídeo. <LI>Módem de velocidad 28K o superior. </OL>

Listas de glosario o Definicion

Este tipo de listas es usado, como su nombre indica, para crear glosarios, es decir listas de definiciones o de descripciones. El principio y final de este tipo de listas se delimitan con la etiqueta <DL>...</DL > (DL: Definition List, Lista de definición). La inserción de elemento es ligeramente distinta a la del resto de listas ya que no se usa la etiqueta <<LI>>. Esto es así porque en este caso cada uno de los elementos de lista está compuesta de dos partes:

• La palabra que queremos definir: para insertar la palabra usaremos la etiqueta <DT> que proviene de Definition Term (Término de definición). Esta nueva etiqueta funciona de forma muy similar a <LI> y la instrucción de fin (</DT>) es igualmente optativa.
• La definición o descripción de esa palabra: una vez indicada la palabra es hora de poner su definición. Para ello usamos otra nueva etiqueta: <DD>

  

Directorios y menús

Las listas vistas hasta ahora son, sin duda, las más usadas, pero existen otros dos tipos que están algo más olvidadas por los creadores de webs: las listas de directorio y las listas de menú.
Las listas de menú son usadas cuando los elementos de lista son frases de una sola línea mientras que las listas de directorio fueron creadas para ser usadas cuando son términos cortos que pueden ser mostrados en múltiples columnas.

A continuación mostramos un ejemplo de listas de menú y listas de directorio

  Hojas de Estilo

¿Qué son las hojas de estilo o cascading style sheets?

CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar un documento en pantalla, por impresora, por voz.

 

¿Para que sirve?

CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentacin del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.

¿Cómo funciona?

El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.

Se denominan "hojas de estilo en cascada" porque se pueden definir múltiples hojas y los estilos pueden aplicarse a todas las páginas (con un sistema predefinido para resolver conflictos).

Las hojas de estilo pueden utilizarse para:

• lograr una apariencia uniforme de todo el sitio al activar una sola definición de estilo en cada página,
• cambiar un aspecto en todo el sitio Web con tan sólo editar unas pocas líneas,
• hacer que los códigos HTML sean más fáciles de leer ya que los estilos se definen por separado,
• permitir que las páginas se carguen más rápido ya que hay menos cantidad de HTML en cada página,
• posicionar los elementos de la página de una manera más uniforme.

 

Compatibilidad con los navegadores

A pesar de las recomendaciones de W3C, no todos los navegadores muestran las hojas de estilo de la misma forma. El explorador Microsoft Internet Explorer 3.0 fue el primero que integró hojas de estilo y su uso se hizo más común con las versiones 4.0 y superiores de Internet Explorer y Netscape Navigator.

Navegadores que admiten hojas de estilo:

• Microsoft Internet Explorer 3.0 (parcialmente)
• Microsoft Internet Explorer 4 x
• Microsoft Internet Explorer 5 x
• Microsoft Internet Explorer 6 x
• Netscape Navigator 4.x
• Netscape Navigator 6.x
• Netscape Navigator 7.x
• Mozilla x.x
• Firefox x.x
• Opera 5.x
• Opera 6.x
• Opera 7.x
• Camino 0.8x
• Safari 1.xx