Unidad 3 Lenguaje de Presentación

Unidad 3 Lenguaje de presentacin.
Un lenguaje de presentacin define un conjunto de etiquetas y atributos vlidos y que ofrecen un significado visual para cada elemento del lenguaje, sino que ofrece un nmero de reglas sintcticas para poder crear documentos. Uno de los lenguajes ms comunes para presentar informacin web es HTML. 3.1 Introduccin Lenguaje de presentacin Un lenguaje de presentacin define un conjunto de etiquetas y atributos vlidos y que ofrecen un significado visual para cada elemento del lenguaje, sino que ofrece un nmero de reglas sintcticas para poder crear documentos. Uno de los lenguajes ms comunes para presentar informacin web es HTML. El lenguaje de presentacin es aquel que indica el formato del texto. Este tipo de marcado es til para maquetar la presentacin de un documento para su lectura, pero resulta insuficiente para el procesamiento automtico de la informacin. El marcado de presentacin resulta ms fcil de elaborar, sobre todo para cantidades pequeas de informacin. 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 ms estructurados. Se puede tratar de averiguar la estructura de un documento de esta clase buscando pistas en el texto. Por ejemplo, el ttulo puede ir precedido de varios saltos de lnea, y estar ubicado centrado en la pgina. Varios programas pueden deducir la estructura del texto basndose en esta clase de datos, aunque el resultado suele ser bastante imperfecto.
3.2 Sintaxis Lenguaje de presentacin El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A travs de las etiquetas vamos definiendo los elementos del documento, como enlaces, prrafos, imgenes, 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 pgina. 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 cdigo: <b>Esto est en negrita</b> El resultado Ser: Esto est en negrita Las etiquetas <p> y </p> definen un prrafo. Si en nuestro documento HTML escribiramos: <p>Hola, estamos en el prrafo 1</p> <p>Ahora hemos cambiado de prrafo</p> El resultado sera: Hola, estamos en el prrafo 1 Ahora hemos cambiado de prrafo Adems 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 ttulo de nuestra pgina. El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde colocaremos nuestro texto e imgenes 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 pgina 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 imgenes </body> </html> Las maysculas o minsculas son indiferentes al escribir etiquetas. A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de maysculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minscula ya que otras tecnologas 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 presentacin Los selectores identifican a un elemento dentro de la pgina 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 pgina. El conocimiento en profundidad de los distintos selectores es uno de los aspectos ms complejos del lenguaje de las Hojas de Estilo y tambin el que nos permite sacar el mximo provecho de las CSS. Existen muchos editores de pginas Web que facilitan la labor de crear y aplicar Hojas de Estilo, pero los selectores que se pueden definir con estos programas son slo los ms elementales. La complejidad que pueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier herramienta y es ah donde los diseadores debern apelar a sus propios recursos. En esta seccin se explican los llamados selectores simples. Selectores de tipos Son los que identifican a un tipo de elemento dentro de los que conforman el cdigo 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 pgina. La siguiente regla identifica a los elementos <H1> de la pgina 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 pequea definicin sobre cada marca. Tericamente 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 pginas de nuestro sitio. Esa es tambin su limitacin: su utilidad se limita al caso en que todos los elementos de un tipo tengan la misma apariencia en cada una de nuestras pginas. Qu sucede si en ciertos casos queremos usar un prrafo con caractersticas diferenciadas? Selectores de clases La cuestin planteada en el punto anterior se resuelve creando una nueva clase de prrafo. 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 prrafo especial que denominaremos "pregunta": P.pregunta {font-weight: bold; font-style: italic} Ahora, a los prrafos que corresponden a las preguntas del entrevistador en el supuesto reportaje les agregamos el atributo CLASS dentro de la marca de la pgina HTML: <P class="pregunta">Esta es una pregunta del reportero</P> Todos los prrafos de la clase "pregunta" aparecern con texto en itlicas negritas para diferenciarlos de los prrafos normales. Observen que en el tag de la pgina 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 cdigo HTML de las pginas, nos permiten una amplia libertad para crear diversas variantes de un mismo elemento. Ms an, podemos crear una clase genrica para aplicar a cualquier elemento de la pgina y no slo a los prrafos. 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 ttulo con contraste</H1> <P class="contraste">Un prrafo 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 permitiran hacer nuestras pginas casi exclusivamente con slo dos elementos de HTML: DIV y SPAN (que no tienen ningn formato predeterminado) y luego crear todas las clases que necesitemos. Esta prctica es desaconsejada por el W3C en una nota que aparece en la Recomendacin CSS2 al final de la seccin 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, slo pueden aplicarse a un elemento de la pgina. 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 tambin es similar, solamente que en vez de usar un punto se utiliza el carcter de numeral (#): H1#titulo1 {text-align: center} #volanta {font-style: italic} En el primer caso, aquel elemento H1 con ID="titulo1" de la pgina ser centrado. En el segundo, cualquier elemento que tenga asignado el atributo ID="volanta" ir en itlicas.
Los selectores de ID no tienen el grado de flexibilidad de los selectores de clases, por ejemplo, pero son una opcin para aquellos casos en que se necesite identificar de modo exclusivo un determinado elemento de la pgina. Selectores de atributos Los selectores de atributos permiten seleccionar elementos de la pgina segn sus propiedades o el valor asignado a estas propiedades. Supongamos que hemos creado varias clases de prrafos 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 prrafos que tengan el atributo CLASS="pregunta", debemos usar: P[CLASS="pregunta"] {margin-left: 1cm} Podemos usar varios selectores de atributos para hacer an ms especfica la regla. Supongamos que a ciertos prrafos con class="pregunta" tambin 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 frmulas 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 (ms adelante en esta gua veremos los casos especficos). [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 imgenes cuyo atributo ALT tiene en su valor la palabra logotipo, como en ALT="logotipo de la compaa" o ALT="ste es nuestro logotipo". El segundo, selecciona los prrafos que tienen asignado como valor del atributo LANG palabras que comienzan con en, como en-US o en-cockney. Quizs todo esto les parezca una complicacin excesiva, pero debe considerarse que el lenguaje de las CSS es abarcativo e intenta satisfacer necesidades que quizs 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. Tambin se debe tomar en cuenta que las Hojas de Estilo estn 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 pgina. Por ejemplo, con: * {color: red} Todos los elementos de la pgina tendrn como color de primer plano el rojo. Sin mencionarlo, ya hemos usado en los ejemplos anteriores de esta pgina algunos selectores universales, porque cuando ste va acompaado 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 pgina 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 frmula 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 presentacin HTML permite a los autores disear documentos que saquen partido de las caractersticas de los medios en los que el documento vaya a ser representado (p.ej., pantallas grficas, pantallas de televisin, dispositivos de mano, navegadores basados en voz, dispositivos tctiles 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 reunin de negocios, todos ellos aparecern en azul. Cuando se impriman, aparecern 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 aade efectos de sonido a los vnculos 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 diseadas para la representacin 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 url("archivo.css" ) tipo de medio;
@import
@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>Vnculo 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 all braille embossed handheld
Descripcin Todos los dispositivos. Dispositivos tctiles braille. Impresoras braille. Dispositivos de mano(pantallas pequeas, ancho de banda reducidos, etc.).
print
Para documentos paginados y mostrados en vista de impresin.
projection screen speech tty tv
Dispositivos de proyeccin de presentaciones. Pantallas a color de equipos informticos. Para sintetizadores de voz. Dispositivos de visualizacin con capacidades limitadas. Televisores.
3.5 Modelo de caja Lenguaje de presentacin El modelo de caja describe las cajas que se generan a partir de los elementos HTML. El modelo de caja tambin contiene opciones detalladas en lo referente al ajuste de mrgenes, bordes, relleno (padding) y contenido de cada elemento. La siguiente imagen muestra cmo se construye el modelo de caja:
Figura 3.1 modelo de caja
En realidad, todos los elementos de una web (prrafos, enlaces, imgenes, tablas, etc.) son cajas rectangulares. Los navegadores sitan estas cajas de la forma que nosotros les hayamos indicado para maquetar la pgina.
Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetacin. Esto es, aparecen solos, insertando saltos de lnea. Los elementos inline siguen el flujo, y estn contenidos dentro de elementos de bloque. Por ejemplo, un prrafo sera un elemento block (no podemos tener un prrafo al lado del otro, sino que dos prrafos seguidos aparecern 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 ms 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, mrgenes, ni padding. Podemos indicar este ancho en medidas absolutas (normalmente pxeles) o relativas (normalmente %). Aunque los elementos inline tienen width, si la modificamos con CSS no veremos ningn resultado visual. Esto es porque el ancho de estos elementos se establece automticamente 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, tambin se aplica aqu. Padding Con padding establecemos la distancia de relleno entre el lmite interior de la caja y el exterior (borde). Si queremos poner un padding de 20 pxeles para toda la caja, lo haramos 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 lnea, indicando primero el padding superior y luego siguiendo el orden de las agujas del reloj. Es decir, nos quedara: arriba, derecha, abajo, izquierda. El ejemplo anterior se acortara as: padding: 10px 20px 5px 30px; Otro atajo til es especificar slo dos medidas: una corresponderan al padding superior e inferior, y la otra al lateral. Si queremos que los paddings superior e inferior sean de 10 pxeles, y los laterales (izquierdo y derecho) de 20 pxeles, 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 habrs supuesto, width especifica el grosor del borde. Normalmente es una medida en pxeles, pero tambin podemos utilizar las palabras thin (fino), medium (normal) y thick (grueso). Por supuesto, cmo de gordo es thick queda a interpretacin del navegador. En cuanto a style, es el tipo de borde. Hay bastantes, pero los ms comunes son: solid (lnea continua), dashed(lnea discontinua), dotted (lnea de puntos) y double (lnea 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 pxel a puntitos rojos: border-bottom: 1px dotted #f00; Para eliminar el borde, simplemente ponemos que tiene de grosor 0 pxeles o que el estilo del borde es none. Esto es muy importante con las imgenes, 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; } Mrgenes Los mrgenes 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 mrgenes superior e inferior de 20 pxeles, y laterales de 5 pxeles: 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 semnticamente nuestra pgina. El atributo id tiene carga semntica, as que si queremos poner en la cabecera3 de nuestra web el ttulo y el men, haramos 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 tpico de un blog tiene cuatro capas: la cabecera, la del contenido principal, la de la barra lateral y la del pie de pgina. Mediante CSS, podemos controlar la disposicin de estas capas, y as conseguir el diseo que queramos.
Floats Los floats son probablemente una de las cosas que ms cuesta dominar. Lo que hacen los floats es alterar el flujo de la pgina, incrustando en l un elemento de bloque. El ejemplo ms tpico es el de si queremos poner una imagen acompaando 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). Despus de un float, suelen ocurrir sucesos paranormales. La mayora 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 pgina, en lugar de quedar el pie al final de todo. Esto se suele arreglar as: #footer { clear: both; }
3.6 Aplicacin en documento web. Consiste en aplicar los temas anteriores en un documento web, una prctica con los temas: 3.2 Sintaxis Lenguaje de presentacin. 3.3 Selectores Lenguaje de presentacin. 3.4 Tipos de medios Lenguaje de presentacin. 3.5 Modelo de caja Lenguaje de presentacin Se podra disear una prctica donde se empleen los conceptos y lleguen a:
Figura 3.3 diseo

Unidad 3 Lenguaje de Presentación

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Unidad 3 Lenguaje de Presentación

Încărcat de

Drepturi de autor:

Formate disponibile

Unidad 3 Lenguaje de presentacin.

Especificando el medio de destino dentro del lenguaje del

@media print{body { font-size: 10pt }} @media screen{body { font-size: 12px }}

Tipos all braille embossed handheld

Para documentos paginados y mostrados en vista de impresin.

projection screen speech tty tv

Figura 3.1 modelo de caja

Figura 3.2 caja

Figura 3.3 diseo

S-ar putea să vă placă și