muestra/oculta

Grupo de Apoyo a la Teleenseñanza

Inicio » Tema del Mes » Desarrollo Web básico

Desarrollo Web nivel básico

Las páginas web son uno de los elementos básicos para el desarrollo de contenidos y para presentar y difundir información. Por ello, desde el GAT, y habida cuenta de las demandas del profesorado, vamos a dedicar el tema de este mes a introducir los conceptos y habilidades básicas necesarias para hacer una página web.

Datos

foto

José Francisco Rives

Administrador de Sistemas y Programador

Fecha de publicación

15 de febrero de 2005

Nivel del artículo:

Principiante / Medio

Indice de contenidos

Utilidades

Las páginas web son uno de los elementos básicos para el desarrollo de contenidos y para presentar y difundir información. Por ello, desde el GAT, y habida cuenta de las demandas del profesorado, vamos a dedicar el tema de este mes a introducir los conceptos y habilidades básicas necesarias para hacer una página web.

Supondremos que el usuario no tiene ningún conocimiento previo sobre la matería y solamente ha trabajado con herramientas de Office como Word o PowerPoint (Haber usado alguna de ellas de un modo básico es suficiente).

Podemos establecer un paralelismo entre un documento de Word y una página web. Un documento de Word no es más que un archivo con extensión .doc que se crea con un programa llamado Microsoft Word. Del mismo modo una página web es un archivo, un documento, con extensión .htm (o .html) que se crea con ciertos programas. Los archivos de word pueden contener, además de texto con distintos formatos, otros elementos como gráficos e imágenes. Del mismo modo, una página web, como sabemos puede contener imágenes y otros elementos. Un elemento carácterístico, aunque no privativo, de las páginas web son los enlaces. Los enlaces permiten acceder, desde una página, a otra página web.

Una vez hemos construido la página web con la herramienta pertiente el siguiente paso es publicarla, ya sea en el Campus Virtual SUMA o en internet. Este mes nos centraremos en la publicación en SUMA.

Podemos dar entonces una primera defición práctica y básica de una página web: Se trata de un documento, un archivo, con extensión .htm que puede contener texto imágenes y enlaces a otras páginas.

Este mes mostraremos cómo realizar de forma sencilla una página web con Word u Openoffice, así como, partiendo desde cero, la forma de instalar y utilizar un programa gratuito y de gran utilidad como NVU cuya utilidad específica es la creación de páginas web.

Mi primera página web con Word y OpenOffice

Es usual que se comience a hacer páginas web con herramientas ya conocidas, como es el caso de Word de Microsoft Office o de OpenOffice. La idea es guardar el documento como una página web. En el siguiente video puede encontrar una explicación detallada de cómo hacerlo.

También es posible crear páginas web con OpenOffice, puede seguir un tutorial similar al anterior en el enlace al final de la página. Antes de ello es conveniente saber que la creación de páginas web con herramientas como Word no permite obtener resultados óptimos, ya que estas aplicaciones introducen código en la página que puede ocasionar problemas si tratamos de editar la misma con otra aplicación.

Lo cierto es que si quiere obtener resultados sencillos, puede realizar una página web incluyendo imágenes y enlaces a otras páginas, utilizando Word u Open Office.

Qué programa específico utilizo para crear páginas web

NVU es un programa para crear páginas web tanto en modo visual como en modo código. Dicho de otra forma, se trata de un editor web, es decir de una aplicación orientada exclusivamente a crear páginas web, a diferencia de lo que ocurría con Word y OpenOffice, donde crear una página web es una opción en la que guardar nuestro documento.

Para descargarte el programa desde nuestro servidor pulsa en el siguiente enlace

Para instalarlo no tienes más que hacer doble clic en el archivo y sigue las instrucciones. NVU también está disponible para MAC y LINUX. Puedes descargarte el programa, así como obtener información adicional en la página del proyecto NVU:

Si has usado alguna vez el Composer de Netscape te recomendamos que te instales NVU, ya que el proyecto NVU ha tomado el testigo de Netscape y de Composer. Las sucesivas versiones de Composer serán NVU.

Una vez tenga instalado el programa puede abrirlo y ver el entorno. Posteriormente puede consultar los siguientes vídeos explicativos.

Notas sobre algunos aspectos avanzados

Vamos a presentar en esta sección algunos aspectos más avanzados que tienen que ver con otras aplicaciones para el desarrollo como Dreamweaver, el uso de JavaScript, Hojas de Estilo en Cascada, etc. Con esto enlazaremos con el tema de Desarrollo web Avanzado, que trataremos en los próximos meses.

En este tema del mes intentaremos explicar todos los conceptos de manera que cualquier persona que no sepa de creación de páginas web pueda entenderlo. En todas las referencias visuales que se verán se ha utilizado NVU 0.90 que aconsejamos a todos aquellos que quieran empezar a editar páginas web y crearlas de forma sencilla y con soporte para la mayoría de estándares. Además NVU es gratuito y libre y se puede descargar en cualquier momento de su página web www.nvu.com tanto en un instalador como en un zip que sólamente hay que descomprimir, además también está disponible para otros Sistemas Operativos aparte de Windows como MacOSX y Linux.

HyperText Markup Language (HTML) conceptos básicos

HTML es el lenguaje con el que están construidas las páginas web generalmente y es el más estándar soportado por todos los navegadores web en una versión u otra del estándar.

En relidad un archivo HTML no es más que texto y etiquetas que indican cómo visualizar la página. Es por esto que no se ve igual una página vista en distintos navegadores ya que HTML sólo puede describir cómo se quiere que se vea la página pero el trabajo de generarla a partir del archivo es trabajo del navegador y pueden surgir diferencias en el proceso.

Vamos a ver cómo es una página web por dentro. Vamos a tomar como ejemplo una página web de ejemplo que hemos creado y que podéis ver en la siguiente imagen.

Web de ejemplo HTML básico

Si intentamos abrir una página web con un editor de texto como el simple Bloc de Notas veremos realmente cómo está formada.

Las etiquetas están encerradas entre los símbolos "<" y ">" y como vemos hay multitud de etiquetas distintas, por lo que en muchos casos usamos editores de páginas web visuales en los que no es necesario conocer las etiquetas ni para qué sirven cada una de ellas.

Una página web muy básica se puede componer de la siguiente manera

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Las etiquetas principales son <html> que indica el comienzo de la página y que se finaliza con </html> indicando el final de la página web. Dentro de esta etiqueta, un documento HTML se divide en una cabecera (encerrada entre las etiquetas <head></head>) y un cuerpo del documento -que es lo que veremos- (encerrado entre las etiquetas <body></body>).

Como se puede ver una página tiene un título que se encuentra dentro de la cabecera y encerrado entre las etiquetas <title></title>.

Otros elementos de una página web

Etiquetas con atributos

Podemos encontrarnos con etiquetas que contienen atributos, por ejemplo la etiqueta <body> puede contener atributos para poder especificar...

Un color de fondo: <body BGCOLOR="#FFFFFF">
Una imagen de fondo: <body BACKGROUND="imagen.jpg">

Saltos de línea
Para indicar un salto de línea con una etiqueta HTML deberemos poner <br> esto nos permitirá escribir frases con saltos de línea ya que el navegador no interpreta las pulsaciones de la tecla "INTRO" como saltos de línea.
Párrafos

Si queremos especificar un párrafo de texto deberemos encerrarlo entre las etiquetas <p> </p> como en el siguiente ejemplo.

<p> Lo que escribamos dentro lo verás como un párrafo aparte </p>

Imágenes

Se pueden insertar imágenes pero éstas estarán fuera del documento y lo único que haremos es especificar con una etiqueta la imágen que queremos que aparezca.

<IMG SRC="lecci3a.jpg" WIDTH=150 HEIGHT=110>

Como se puede ver hemos indicado también con los atributos WIDTH y HEIGHT el ancho y alto de la imagen. La imágen deberá estar en la misma carpeta que el archivo HTML.

Tablas

Las tablas son un elemento básico con el que se puede posicionar los contenidos y dividir las secciones de una página web. Una tabla la componen las siguientes etiquetas...

<table><td><tr></tr></td></table>

Las etiquetas <table> </table> encierran todo el contenido de la tabla. Las etiquetas <td></td> indican las columnas, cuantas más etiquetas de este tipo pongamos más columnas tendrá la tabla. Por último las etiquetas <tr></tr> indican las filas contenidas en la columna en la que están encerradas.

Es interesante conocer cómo están hechas las páginas web, pero en la mayoría de ocasiones nos será más rápido usar un editor de páginas web visual para crearla como si fuera un procesador de texto sin que tengamos que saber qué etiquetas está colocando internamente en el fichero.

JavaScript

JavaScript es un lenguaje de programación simple usado dentro de las páginas web para añadir interacción y poder de decisión. Es lo que diferencia a una página web llamada "estática" de una web "dinámica", esta última integra elementos como posibilidad interacción del usuario para introducir texto u opciones, capacidad de desición y de realizar comprobaciones como la de saber qué navegador se está usando para ver la página y dibujar contenidos diferentes dependiendo del tipo de navegador usado.

JavaScript se puede usar embebido en la página - dentro del código HTML -, o en un archivo externo con extensión .js

Por ejemplo podríamos usar JavaScript para abrir una ventana con un tamaño determinado y algunas opciones determinadas al pulsar en un enlace poniendo este código.

<a src=" javascript:window.open('otrapagina.html','nombreventana', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');">Enlace</a>

Incluso que aparezca un mensaje al pulsar en el enlace.

<a href="javascript: alert('Esto es un mensaje de prueba')">Haz clic aquí </a>

Como se puede ver el uso de JavaScript nos permite multiplicar por mucho las opciones de una página web en HTML. No queremos dedicarnos a explicar JavaScript en sí ya que existen multitud de recursos en internet y páginas donde ofrecen minicursos o tutoriales gratuitos de JavaScript y qué se puede hacer con él. Dejaremos algunas reseñas y enlaces a tutoriales en castellano que se puden encontrar en la web.

CSS

Las hojas de estilo CSS son documentos de texto donde se indica el color, tamaño, etc.. del texto, tablas, y otros elementos HTML para modificar sus propiedades de forma unificada. Es una forma de dar un mismo valor a las propiedades de algunas etiquetas HTML.

Los documentos CSS nos permiten distribuir las propiedades comunes en "clases" de manera que posteriormente en nuestro fichero HTML indiquemos que una etiqueta es de una "clase" determinada.

No queremos entrar en demasiados detalles, en este apartado explicaremos cómo crear estilos CSS desde el editor de hojas de estilo de NVU.

NVU es un editor visual de páginas web gratuito continuación del antiguo Netscape Composer. Este editor permite también crear una hoja de estilos de forma sencilla. Tendremos que seleccionar la opción del menú Tools > CSS Editor. Aparecerá la ventana de creación de Hojas de Estilo.

Editor de Hojas de Estilo de NVU
Editor de Hojas de Estilo de NVU

Pulsando en el botón Style elt. nos aparecerá las opciones para darle un título a la hoja de estilos y poder crearla mediante el botón Create Stylesheet (Crear Hoja de Estilos). Daremos una descripción en el campo Title, una vez hemos pulsado en el botón de Crear Hoja de Estilos tendremos la opción de editar creando nuevos estilos pulsando sobre el botón Rule (Regla).

Creando una nueva regla...
Creando nuevas reglas...

Podremos entonces dar nombre a la nueva "clase" con la que podremos unificar todas las propiedades, o redefinir una clase ya constituida como por ejemplo los enlaces o links, pudiendo redefinir su aspecto por defecto.

Indicando el nombre de la nueva clase en la hoja de estilos
Indicando el nombre de la nueva clase en la hoja de estilos

Podemos ahora indicar las propiedades para esta regla, como formato de fuente (tipo de letra, color, opciones de subrayado, etc..), indicar tipos de borde y decoración (para las tablas y marcos), fondo (para poner un color de fondo o una imagen en tablas y marcos), y otras propiedades.

Modificando las propiedades de la clase creada
Modificando las propiedades de la clase creada

Una vez pulsamos en Close (Cerrar) para quitar el cuadro de edición de Hojas de Estilo podríamos por ejemplo escribir el texto de una página web y darle un formato único indicando a qué "clase" de los estilos creados queremos que se adapte, para esto deberíamos escribir el siguiente código HTML:

<font class="claseprueba">prueba de texto</font>

También podríamos crear enlaces a páginas web indicando esa clase para que tengan el aspecto que queramos, tablas, etc...

 

Si no decimos nada, NVU creará la hoja de estilos CONTENIDA dentro del fichero HTML, si visualizamos el código generado podemos ver cómo se ha indicado nuestras reglas de estilo dentro de el documento HTML...

<head>
<title>prueba</title>
<style title="Hoja de estilos de prueba" type="text/css">
.claseprueba { font-family: Times New Roman,Times,serif;
font-size: 20px;
color: rgb(153, 153, 0);
font-weight: bold;
font-style: normal;
text-decoration: underline overline;
}
</style>
</head>

Vemos que en la cabecera del documento ha introducido una nueva sección encerrada entre las etiquetas <style></style> y dentro contiene la declaración de nuestra clase. La desventaja de definir los estilos dentro del documento HTML es que no se puede reutilizar esos estilos en otros documentos y se tendrían que copiar toda la declaración de estilos en cada uno de los documentos que hagamos. Otra solución es crear un documento de hoja de estilos aparte con la extensión .css que también podemos hacerlo desde el editor de NVU. Si volvemos a abrir el editor de Hojas de Estilo, seleccionamos nuestra hoja de estilo y pulsamos sobre el botón Export stylesheet and switch to exported version (Exportar hoja de estilo y cambiar a la versión exportada). Nos aparecerá un cuadro de diálogo para guardar nuestro fichero .css que guardaremos junto a nuestro documento HTML. NVU automáticamente enlazará a esta hoja de estilos en vez de a los estilos contenidos dentro del documento.

Creando un fichero css externo
Creando un fichero css externo

Ahora las reglas estarán definidas en el fichero .css, podremos ahora crear nuevas páginas web y enlazarlas a esta hoja de estilos desde el editor de Hojas de Estilo de NVU pulsando sobre el botón Link elt. (Enlazar estilo) o introduciendo el siguiente código HTML en la cabecera de nuestra página...

<link href="estilo.css" rel="stylesheet" type="text/css">

Contenidos recientes

Comentarios recientes

Personal

Login
Ir al inicio de la página
Universidad de Murcia :: Avda. Teniente Flomesta, nº 5 - 30003-Murcia · Teléfono: +34 868 883000. Diseño y desarrollo: GAT