Embed Size (px)
Citation preview
Unidad 3 Lenguaje de presentación.
Un lenguaje de presentación define un conjunto de etiquetas y atributos válidos
y que ofrecen un significado visual para cada elemento del lenguaje, sino que
ofrece un número de reglas sintácticas para poder crear documentos. Uno de
los lenguajes más comunes para presentar información web es HTML.
3.1 Introducción Lenguaje de presentación
Un lenguaje de presentación define un conjunto de etiquetas y atributos válidos
y que ofrecen un significado visual para cada elemento del lenguaje, sino que
ofrece un número de reglas sintácticas para poder crear documentos. Uno de
los lenguajes más comunes para presentar información web es HTML.
El lenguaje de presentación es aquel que indica el formato del texto. Este tipo
de marcado es útil para maquetar la presentación de un documento para su
lectura, pero resulta insuficiente para el procesamiento automático de la
información.
El marcado de presentación resulta más fácil de elaborar, sobre todo para
cantidades pequeñas de información. Sin embargo resulta complicado de
mantener o modificar, por lo que su uso se ha ido reduciendo en proyectos
grandes en favor de otros tipos de marcado más estructurados.
Se puede tratar de averiguar la estructura de un documento de esta clase
buscando pistas en el texto. Por ejemplo, el título puede ir precedido de varios
saltos de línea, y estar ubicado centrado en la página. Varios programas
pueden deducir la estructura del texto basándose en esta clase de datos,
aunque el resultado suele ser bastante imperfecto.
3.2 Sintaxis Lenguaje de presentación
El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de
base al que llamamos etiqueta. A través de las etiquetas vamos definiendo los
elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un
documento HTML estará constituido por texto y un conjunto de etiquetas para
definir la forma con la que se tendrá que presentar el texto y otros elementos
en la página.
La etiqueta presenta frecuentemente dos partes: Una apertura de forma
general <etiqueta> Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que
caracterizan a esta etiqueta. Así por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento
HTML escribimos una frase con el siguiente código:
<b>Esto está en negrita</b>
El resultado Será: Esto está en negrita
Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML
escribiéramos:
<p>Hola, estamos en el párrafo 1</p>
<p>Ahora hemos cambiado de párrafo</p>
El resultado sería:
Hola, estamos en el párrafo 1
Ahora hemos cambiado de párrafo
Además de todo esto, un documento HTML ha de estar delimitado por la
etiqueta <html> y </html>. Dentro de este documento, podemos asimismo
distinguir dos partes principales:
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas
de índole informativo como por ejemplo el título de nuestra página.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde
colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas
como las que hemos visto. El resultado es un documento con la siguiente
estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para
catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
</html>
Las mayúsculas o minúsculas son indiferentes al escribir etiquetas. A notar
que las etiquetas pueden ser escritas con cualquier tipo de combinación de
mayúsculas y minúsculas. <html>, <HTML> o <HtMl> son la misma etiqueta.
Resulta sin embargo aconsejable acostumbrarse a escribirlas en minúscula ya
que otras tecnologías que pueden convivir con nuestro HTML (XML por
ejemplo) no son tan permisivas y nunca viene mal coger buenas costumbres
desde el principio para evitar fallos triviales en un futuro.
3.3 Selectores Lenguaje de presentación
Los selectores identifican a un elemento dentro de la página Web para luego
poder definir sus propiedades. Los distintos tipos de selectores abarcan desde
el simple nombre de las etiquetas usadas en HTML (BODY, P, CODE, TABLE,
UL, etc.) hasta complejas combinaciones que permiten un juego muy amplio de
selecciones dentro de la página.
El conocimiento en profundidad de los distintos selectores es uno de los
aspectos más complejos del lenguaje de las Hojas de Estilo y también el que
nos permite sacar el máximo provecho de las CSS.
Existen muchos editores de páginas Web que facilitan la labor de crear y
aplicar Hojas de Estilo, pero los selectores que se pueden definir con estos
programas son sólo los más elementales. La complejidad que pueden alcanzar
los selectores contextuales escapan a las posibilidades de cualquier
herramienta y es ahí donde los diseñadores deberán apelar a sus propios
recursos.
En esta sección se explican los llamados selectores simples.
Selectores de tipos
Son los que identifican a un tipo de elemento dentro de los que conforman el
código HTML. Es decir, usan la misma palabra que la etiqueta (tag) sin los
signos < y >. Por ejemplo, TABLE selecciona todos los elementos <TABLE> de
la página. La siguiente regla identifica a los elementos <H1> de la página y los
alinea centralmente:
H1 {text-align: center}
Quienes no conozcan a fondo todos las etiquetas del lenguaje HTML, pueden
consultar el Listado de elementos de HTML 4.0, que contiene una pequeña
definición sobre cada marca. Teóricamente al menos, todos los elementos de
ese listado pueden utilizarse como selectores en las CSS. Ver
Los selectores de tipo tienen la ventaja de que, con un simple cambio en la
Hoja de Estilo, podemos modificar el aspecto de todos los elementos de ese
tipo en todas las páginas de nuestro sitio. Esa es también su limitación: su
utilidad se limita al caso en que todos los elementos de un tipo tengan la misma
apariencia en cada una de nuestras páginas. ¿Qué sucede si en ciertos casos
queremos usar un párrafo con características diferenciadas?
Selectores de clases
La cuestión planteada en el punto anterior se resuelve creando una nueva
clase de párrafo. El selector de clases consta de un punto (.) seguido por el
nombre de la clase que hayamos creado (el nombre lo elegimos nosotros).
Supongamos que para publicar un reportaje queremos contar con un párrafo
especial que denominaremos "pregunta":
P.pregunta {font-weight: bold; font-style: italic}
Ahora, a los párrafos que corresponden a las preguntas del entrevistador en el
supuesto reportaje les agregamos el atributo CLASS dentro de la marca de la
página HTML:
<P class="pregunta">Esta es una pregunta del reportero</P>
Todos los párrafos de la clase "pregunta" aparecerán con texto en itálicas
negritas para diferenciarlos de los párrafos normales. Observen que en el tag
de la página HTML la sintaxis difiere de la CSS: luego de la palabra CLASS
sigue un signo igual (=) y entre comillas ("") el nombre de la clase.
Si bien estos selectores requieren un agregado en el código HTML de las
páginas, nos permiten una amplia libertad para crear diversas variantes de un
mismo elemento. Más aún, podemos crear una clase genérica para aplicar a
cualquier elemento de la página y no sólo a los párrafos. Basta con suprimir en
el estamento el primer selector y dejar únicamente el punto (.) y el nombre de la
clase:
.contraste {color: #FFFF00; background-color: #000000}
En este caso, la clase "contraste" equivale a cualquier elemento con el atributo
class="contraste". Por ejemplo:
<H1 class="contraste">Un título con contraste</H1>
<P class="contraste">Un párrafo con contraste</P>
<OL CLASS="contraste">Una lista con contraste</B>
Es tanta la flexibilidad que nos brindan los selectores de clases que hasta nos
permitirían hacer nuestras páginas casi exclusivamente con sólo dos elementos
de HTML: DIV y SPAN (que no tienen ningún formato predeterminado) y luego
crear todas las clases que necesitemos. Esta práctica es desaconsejada por el
W3C en una nota que aparece en la Recomendación CSS2 al final de la
sección 5.8.3 Selectores de clases. Ver
Selectores de ID
Los selectores de ID funcionan de manera muy similar a los selectores de
clases, salvo que, a diferencia de estos últimos, sólo pueden aplicarse a un
elemento de la página. Quiere decir que si hay un elemento que tiene asignado
el atributo ID="principal" no podrá haber otro ID con igual valor (es decir, con el
mismo nombre). La sintaxis en la CSS también es similar, solamente que en
vez de usar un punto se utiliza el carácter de numeral (#):
H1#titulo1 {text-align: center}
#volanta {font-style: italic}
En el primer caso, aquel elemento H1 con ID="titulo1" de la página será
centrado. En el segundo, cualquier elemento que tenga asignado el atributo
ID="volanta" irá en itálicas.
Los selectores de ID no tienen el grado de flexibilidad de los selectores de
clases, por ejemplo, pero son una opción para aquellos casos en que se
necesite identificar de modo exclusivo un determinado elemento de la página.
Selectores de atributos
Los selectores de atributos permiten seleccionar elementos de la página según
sus propiedades o el valor asignado a estas propiedades. Supongamos que
hemos creado varias clases de párrafos y queremos identificar a todos aquellos
que tengan especificado el atributo CLASS (cualquiera sea el valor de ese
atributo) para darle un margen izquierdo de 1 cm:
P[CLASS] {margin-left: 1cm}
Ahora, si queremos seleccionar solamente aquellos párrafos que tengan el
atributo CLASS="pregunta", debemos usar:
P[CLASS="pregunta"] {margin-left: 1cm}
Podemos usar varios selectores de atributos para hacer aún más específica la
regla. Supongamos que a ciertos párrafos con class="pregunta" también le
hemos asignado el atributo WIDTH y queremos darle un margen izquierdo de 2
cm.
P[CLASS="pregunta"][WIDTH] {margin-left: 2cm}
Hemos visto dos formas que pueden tomar estos selectores: [atributo] y
[atributo=valor]. Adicionalmente, existen dos fórmulas para este tipo de
selectores que se utilizan cuando a un determinado elemento se le han
asignado una lista de valores en vez de un solo valor (más adelante en esta
guía veremos los casos específicos).
[atributo~=valor] se usa para seleccionar los elementos que tienen como
atributo una lista de palabras separadas por espacios, una de las cuales es
exactamente valor.
[atributo|=valor] se usa para seleccionar los elementos que tienen como
atributo una lista de palabras separadas por guiones, comenzando por valor.
Veamos un ejemplo de los dos casos:
IMG[ALT~="logotipo"] {border: solid}
P[LANG|="en"] {font-family: "Times New Roman", Serif}
El primero selecciona las imágenes cuyo atributo ALT tiene en su valor la
palabra logotipo, como en ALT="logotipo de la compañía" o ALT="éste es
nuestro logotipo". El segundo, selecciona los párrafos que tienen asignado
como valor del atributo LANG palabras que comienzan con en, como en-US o
en-cockney.
Quizás todo esto les parezca una complicación excesiva, pero debe
considerarse que el lenguaje de las CSS es abarcativo e intenta satisfacer
necesidades que quizás nosotros ignoramos, como puede ser el hecho de
tener de mezclar distintos lenguajes en nuestros documentos y poder aplicar a
cada uno un estilo particular. También se debe tomar en cuenta que las Hojas
de Estilo están pensada no solamente para HTML sino para otro lenguajes,
como XML, para los cuales ciertos selectores pueden resultar de mayor utilidad
que en HTML.
Selector universal
El selector universal se escribe con un asterisco (*) y representa a cualquier
elemento de la página. Por ejemplo, con:
* {color: red}
Todos los elementos de la página tendrán como color de primer plano el rojo.
Sin mencionarlo, ya hemos usado en los ejemplos anteriores de esta página
algunos selectores universales, porque cuando éste va acompañado de otro
selector se puede omitir. Por eso, los siguientes dos selectores son
exactamente iguales:
*#volanta {font-style: italic}
#volanta {font-style: italic} /* el asterisco se ha omitido */
Resulta de utilidad cuando queremos inicializar todos los elementos de nuestra
página con determinadas propiedades generales.
Agrupamiento
Cuando tenemos varios selectores que comparten las mismas declaraciones
pueden agruparse en una lista separada por comas (,). No se trata de un tipo
de selector especial sino de una fórmula abreviada para aplicar las mismas
propiedades a distintos selectores en un solo paso. Por ejemplo, si tenemos:
H1 {font-family: Arial, Sans-serif}
P {font-family: Arial, Sans-serif}
TABLE {font-family: Arial, Sans-serif}
#volanta {font-family: Arial, Sans-serif}
Podemos simplificarlo de este modo:
H1, P, TABLE, #volanta {font-family: Arial, Sans-serif}
3.4 Tipos de medios Lenguaje de presentación
HTML permite a los autores diseñar documentos que saquen partido de las
características de los medios en los que el documento vaya a ser representado
(p.ej., pantallas gráficas, pantallas de televisión, dispositivos de mano,
navegadores basados en voz, dispositivos táctiles Braille, etc.). Al especificar el
atributo media, los autores permiten a los agentes de usuario cargar y aplicar
las hojas de estilo de manera selectiva.
Las siguientes declaraciones de ejemplo se aplican a elementos H1. Cuando
se proyecten en una reunión de negocios, todos ellos aparecerán en azul.
Cuando se impriman, aparecerán centrados.
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue }
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
Este ejemplo añade efectos de sonido a los vínculos para su uso en salidas por
voz:
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
El control de medios es particularmente interesante cuando se aplica a hojas
de estilo externas, ya que los agentes de usuario pueden ahorrar tiempo si
obtienen de la red únicamente aquellas hojas de estilo que se apliquen el
dispositivo actual. Por ejemplo, los navegadores basados en voz pueden evitar
la descarga de hojas de estilo diseñadas para la representación visual.
Hay dos maneras de especificar las hojas de estilos dependientes de los
medios:
· Desde una hoja de estilo con las reglas: @import o @media
@import url("archivo.css" ) tipo de medio;
@media tipo de medio{/* la hoja de estilo para el tipo de medio va aquí */}
· Especificando el medio de destino dentro del lenguaje del
documento
<html>
<head>
<title>Vínculo a un tipo de medio</title>
<link rel="stylesheet" type="text/css" media= "tipo_medio1, tipo_medio2"
href="archivo.css">
</head>
<body>
<p>Texto, texto, texto</p>
</body>
</html>
Los posibles valores para tipos de medios:
all | brille | embossed | handheld | print | projection | screen | speech | tty | tv
Una regla @media especifica los tipos de medios. Veamos unos ejemplos del
uso de la regla @media:
· @media print{body { font-size: 10pt }}
· @media screen{body { font-size: 12px }}
Tabla 3.1
Tipos Descripción
all Todos los dispositivos.
braille Dispositivos táctiles braille.
embossed Impresoras braille.
handheld Dispositivos de mano(pantallas pequeñas, ancho de
banda reducidos, etc.).
print Para documentos paginados y mostrados en vista de
impresión.
projection Dispositivos de proyección de presentaciones.
screen Pantallas a color de equipos informáticos.
speech Para sintetizadores de voz.
tty Dispositivos de visualización con capacidades limitadas.
tv Televisores.
3.5 Modelo de caja Lenguaje de presentación
El modelo de caja describe las cajas que se generan a partir de los elementos
HTML. El modelo de caja también contiene opciones detalladas en lo referente
al ajuste de márgenes, bordes, relleno (padding) y contenido de cada elemento.
La siguiente imagen muestra cómo se construye el modelo de caja:
Figura 3.1 modelo de caja
En realidad, todos los elementos de una web (párrafos, enlaces, imágenes,
tablas, etc.) son cajas rectangulares. Los navegadores sitúan estas cajas de la
forma que nosotros les hayamos indicado para maquetar la página.
Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de
maquetación. Esto es, aparecen solos, insertando “saltos de línea”. Los
elementos inline siguen el flujo, y están contenidos dentro de elementos de
bloque.
Por ejemplo, un párrafo sería un elemento block (no podemos tener un párrafo
al lado del otro, sino que dos párrafos seguidos aparecerán uno abajo del otro.
En cambio, un enlace es un elemento inline, ya que no “corta” el texto donde
está metido
Estas dos diferencias son importantes, pero hay que tener en mente que
ambos tipos comparten el modelo de caja, que es el que aparece en la
siguiente figura:
Figura 3.2 caja
Las propiedades más importantes de una caja son: width (ancho), height (alto),
padding (relleno), border (borde) y margin (margen).
Ancho y alto
Width representa el ancho de la caja. Pero es el ancho interior, es decir, si
bordes, márgenes, ni padding. Podemos indicar este ancho en medidas
absolutas (normalmente píxeles) o relativas (normalmente %).
Aunque los elementos inline tienen width, si la modificamos con CSS no
veremos ningún resultado visual. Esto es porque el ancho de estos elementos
se establece automáticamente para que se ajuste a las dimensiones del
elemento inline.
Por ejemplo, si tenemos un enlace que consiste en un texto de cinco
caracteres, el ancho (width) de este elemento será lo que ocupen esos cinco
caracteres.
Sobre el alto de la caja, se controla con la propiedad height, y todo lo que
hemos dicho antes sobre el ancho, también se aplica aquí.
Padding
Con padding establecemos la distancia de “relleno” entre el límite interior de la
caja y el exterior (borde).
Si queremos poner un padding de 20 píxeles para toda la caja, lo haríamos así:
padding : 20 px;
Podemos establecer un padding distinto para cada lado, usando los sufijos -top
(superior), -bottom (inferior), left (izquierda) y right (derecha):
padding-top: 10px;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 20px;
Podemos abreviar lo anterior en una sola línea, indicando primero el padding
superior y luego siguiendo el orden de las agujas del reloj. Es decir, nos
quedaría: arriba, derecha, abajo, izquierda. El ejemplo anterior se acortaría así:
padding: 10px 20px 5px 30px;
Otro atajo útil es especificar sólo dos medidas: una corresponderían al padding
superior e inferior, y la otra al lateral. Si queremos que los paddings superior e
inferior sean de 10 píxeles, y los laterales (izquierdo y derecho) de 20 píxeles,
escribimos:
padding: 10px 20px;
Bordes
Si queremos que nuestra caja tenga bordes, lo conseguimos con la propiedad
border. Tiene la siguiente sintaxis:
border: width | style | color
Como habrás supuesto, width especifica el grosor del borde. Normalmente es
una medida en píxeles, pero también podemos utilizar las palabras thin (fino),
medium (normal) y thick (grueso). Por supuesto, cómo de gordo es thick queda
a interpretación del navegador.
En cuanto a style, es el tipo de borde. Hay bastantes, pero los más comunes
son: solid (línea continua), dashed(línea discontinua), dotted (línea de puntos)
y double (línea continua doble).
Por último, color indica el color del borde.
Podemos escoger un tipo de borde diferente para cada lado con los sufijos -
top, -bottom, -left y -right. Por ejemplo, para poner que algo tenga el borde
inferior de 1 píxel a puntitos rojos:
border-bottom: 1px dotted #f00;
Para eliminar el borde, simplemente ponemos que tiene de grosor 0 píxeles o
que el estilo del borde es none. Esto es muy importante con las imágenes, ya
que si tenemos una imagen enlazando a algo, los navegadores la ponen con
un reborde muy feo. Así que esto se ha convertido ya en un fijo de las hojas de
estilos:
img { border: none; }
Márgenes
Los márgenes se controlan con la propiedad margin, y es la distancia entre el
borde de la caja y los elementos que la rodean.
En cuanto a la forma de usarla, es igual que con la propiedad padding, así que
la forma de escribir y los atajos es exactamente la misma. Por ejemplo, si
queremos márgenes superior e inferior de 20 píxeles, y laterales de 5 píxeles:
margin: 20px 5px;
Para centrar un elemento de bloque, podemos hacer uso de auto:
margin: 0px auto;
Capas
Vamos a hablar de una etiqueta XHTML que nos quedó por ver y está
estrechamente ligada con CSS: <div>. Esta etiqueta se encarga de crear una
capa, que es un elemento de bloque que sirve de contenedor a otros
elementos de bloque e inline.
¿Para qué nos sirven? Primero, para organizar semánticamente nuestra
página. El atributo id tiene carga semántica, así que si queremos poner en la
cabecera3 de nuestra web el título y el menú, haríamos esto:
<div id="header">
<h1>Mi blog</h1>
<ul id="menu">
<li><a href="..." title="...">Principal</a></li>
<li><a href="..." title="...">Acerca de</a></li>
<li><a href="..." title="...">Enlaces</a></li>
</ul>
</div>
El otro uso de las capas es el de maquetar. Por ejemplo, el layout típico de un
blog tiene cuatro capas: la cabecera, la del contenido principal, la de la barra
lateral y la del pie de página. Mediante CSS, podemos controlar la disposición
de estas capas, y así conseguir el diseño que queramos.
Floats
Los floats son probablemente una de las cosas que más cuesta dominar. Lo
que hacen los floats es alterar el flujo de la página, “incrustando” en él un
elemento de bloque. El ejemplo más típico es el de si queremos poner una
imagen acompañando a un texto, y que el texto “envuelva” a la imagen. Esto lo
conseguimos creando una clase como la siguiente:
.izquierda {
float: left;
}
Podemos indicar tanto left (izquierda) como right(derecha). Después de un
float, suelen ocurrir sucesos paranormales. La mayoría de ellos suelen
desaparecer mediante la propiedad clear, que se encarga de “anular” los floats.
Los valores que admiten son left, right y both (que significa “ambos”).
Volviendo al ejemplo de layouts de blogs, lo normal es poner el contenido y la
barra lateral mediante floats. Lo que suele pasar es que una de estas dos
columnas pasa por encima del pie de página, en lugar de quedar el pie al final
de todo. Esto se suele arreglar así:
#footer {
clear: both;
}
3.6 Aplicación en documento web.
Consiste en aplicar los temas anteriores en un documento web, una práctica
con los temas:
3.2 Sintaxis Lenguaje de presentación.
3.3 Selectores Lenguaje de presentación.
3.4 Tipos de medios Lenguaje de presentación.
3.5 Modelo de caja Lenguaje de presentación
Se podría diseñar una práctica donde se empleen los conceptos y lleguen a:
Figura 3.3 diseño
