Embed Size (px)
DESCRIPTION
Lenguaje de presentación programacion web
Citation preview
Unidad 3 Lenguaje de presentación
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 }}
Tipos Descripciónall 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:
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:
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:
¡Ojo! Cabecera en cuanto a maquetación. ¡No tiene nada que ver con la etiqueta head!
<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 practica con los temas:
3.2 Sintaxis Lenguaje de presentacion.
3.3 Selectores Lenguaje de presentacion.
3.4 Tipos de medios Lenguaje de presentacion.
3.5 Modelo de caja Lenguaje de presentacion
Se podría diseñar una práctica donde se empleen los conceptos y lleguen a:
Instituto Tecnológico de HuatabampoProgramación WEBUnidad 3 Lenguaje de presentaciónLedezma Morales Felipe
NoCtrl:10600325
