Programación web.: octubre 2014

¿Qué es un 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.

¿Cuál es la sintaxis de un 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.

¿Qué tipos de selectores existen en un 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

Ejemplos de lenguaje de presentación:

Se podría diseñar una práctica donde se empleen los conceptos y lleguen a:

Programación web.

viernes, 24 de octubre de 2014

Aprendiendo Javascript jugando con CodeCombat

jueves, 23 de octubre de 2014

Actividad #16

ACTIVIDAD #15

sábado, 11 de octubre de 2014

Actividad # 13.

1. Definición de maquetación.

2. Buscar 3 ejemplos de maquetación en HTML (publique imágenes)

3. diseñar un estructura (maquetación) para su sitio web.

martes, 7 de octubre de 2014

Actividad #12