Creación del sitio web del Laboratorio F1

Jonatan Grandmontagne García

Universidad de León, España

jon@usuarios.retecal.es

Este documento muestra como se ha diseñado el sitio web donde se expone el proyecto realizado, proporcionando información sobre los servidores instalados, así como la documentación y herramientas generadas. Las herramientas usadas han sido: lenguaje html, hojas de estilo en cascada (CSS) y un editor para escribir HTML y CSS.

Introducción

El lenguaje html estructura documentos. La mayoría de los documentos tienen estructuras comunes (títulos, párrafos, listas...) que van a ser definidas por este lenguaje mediante etiquetas. Cualquier cosa que no sea una etiqueta es parte del documento mismo.

El lenguaje html está limitado a la hora de aplicarle forma a un documento. Esto es así porque fué concebido para otros usos (científicos sobretodo), distinto a los actuales, mucho más amplios. Las hojas de estilo son una ampliación del lenguaje html de forma que aumentan su potencia.

Lenguaje html

Este lenguaje no describe la apariencia del diseño de un documento sino que ofrece a cada plataforma que le de formato según su capacidad y la de su navegador (tamaño de la pantalla, fuentes que tiene instaladas...). Por ello y para no fustrarnos, no debemos diseñar los documentos basándonos en como lucen en nuestro navegador sino que debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte fácil de leer y entender.

Básicamente, los documentos escritos en html constan del texto mismo del documento y las etiquetas que pueden llevar atributos. Esto llevado a la práctica, vendría a ser:

<etiqueta> texto afectado </etiqueta>

Creación del sitio web del Laboratorio F1

La etiqueta del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva. No todas las etiquetas tienen principio y final Tres son la etiquetas que describen la estructura general de un documento y dan una información sencilla sobre él. Estas etiquetas no afectan a la apariencia del documento y solo interpretan y filtran los archivos html.

<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.

<HEAD>: Especifica el prólogo del resto del archivo. Son pocas las etiquetas que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de él. En head no hay que colocar nada del texto del documento.

<BODY>: Encierra el resto del documento, el contenido.

<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Texto
</BODY>
</HTML>

Hojas de estilo

El modo de fucionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a:

• Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.

• Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a toda la página.

• Una porción del documento, aplicando estilos visibles en un trozo de la página.

• Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con margenes, sin ellos...

La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además esta sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si antes el HTML se nos quedaba corto para maquetar las páginas y teníamos que utilizar trucos para conseguir nuestros efectos, ahora tenemos muchas más herramientas que nos permiten definir esta forma:

• Podemos definir la distancia entre líneas del documento.

• Se puede aplicar identado a las primeras líneas del párrafo.

• Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.

• Y mucho más, como definr la visivilidad de los elementos, margenes, subrallados, tachados...

La sintaxis es bastante sencilla y repetitiva. Vamos a verla:

• Para definir un estilo se utilizan atributos como font-size,text-decoration... segudos de dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos atributos separados por punto y coma.

  Ejemplo:  font-size: 10pt; text-decoration: underline; color: black;

• Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos encerrados entre llaves.

  Ejemplo:  H1{text-align: center; color:black}

A continuación mostraremos el código existente en la hoja de estilo usada en nuestro site.

body {
background-color: Black;
}
p,ul,ol {
color: #A9A9A9;
font-size: 70%;
font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
text-align: justify;
}
h1, h2, h3, h4, h5, h6
{
font-family: "Trebuchet MS", Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}
h1
{
color: Silver;
font-size: 100%;
font-weight: bold;
}
h2
{
color: Silver;
font-size: 120%;
font-weight: normal;
border: 1px solid Silver;
border-width: 0px 0px 1px 0px;

padding-bottom: 0px;
}
h3
{
color: Silver;
font-size: 100%;
font-weight: bold;
border-width: 0px 0px 1px 0px;
padding-bottom: 0px;
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.nav {
color: #8B0000;
font-weight: bold;
text-decoration: none;
font-size: 80%;
font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}
.title {
color: Silver;
font-weight: bold;
text-decoration: none;
font-size: 70%;
font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}
.small {
color: Silver;
font-size: 60%;
font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}
.footer {
color: Black;
font-size: 60%;
font-family: Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
text-align: center;
}

a {
color: White;
font-weight: bold;
text-decoration: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: underline overline;
}
a:hover {
color: Red;
text-decoration: underline overline;
}

Estructura del sitio web

La estructura del sito web es bastante sencilla. En la página principal tenemos un menú que nos permitirá movernos fácilmente por todo el site. Las secciones de las que consta el site son las siguientes:

• Presentación: Breve introducción al proyecto realizado.

• Documentación: Enlaces a la documentación generada.

• Equipos utilizados: Se indican los servidores y los servicios instalados en cada uno.

• Recursos: Archivos y recursos modificados por el grupo GSO para adaptarlo a la situación

Más información

A continuación se listarán una serie de enlaces a sitios web de los cuales se ha obtenido ayuda para la realización de este proyecto:

www.programacion.com (http://www.programacion.com)

www.aqs.es/web/files/xml-roadmap.pdf (http://www.aqs.es/web/files/xml-roadmap.pdf)

www.w3.org (http://www.w3.org)

www.vespito.com/css2 (http://www.vespito.com/css2)

zvon.org (http://zvon.org/) gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm (http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm)

www.tejedoresdelweb.com (http://www.tejedoresdelweb.com/)

Sobre este documento

Se otorga permiso para copiar, distribuir y/o modificar este documento bajo los términos de la Licencia de Documentación Libre GNU, versión 1.1 o cualquier versión posterior publicada por la Free Software Foundation. Puedes consultar una copia de la licencia en http://www.gnu.org/copyleft/fdl.html (http://www.gnu.org/copyleft/fdl.html)

Este documento ha sido escrito en formato XML utilizando la DTD de DocBook (http://www.docbook.org). Mediante este sistema, puede ser fácilmente transformado a múltiples formatos (HTML, TXT, PDF, PostScript, LaTeX, DVI, ...). Se recomienda su utilización como herramienta de documentación potente y libre.