Manual de Kompozer: módulo 2 - Conceptos básicos sobre publicación Web

1 05 2009

La World Wide Web y las páginas Web

Internet, un mundo interconectadoLa World Wide Web es un servicio gráfico de Internet capaz de proporcionar una red de documentos interactiva. Fue inventada por un laboratorio suizo, el CERN, en 1991. Es el servicio de Internet con mayor éxito y que crece con más rapidez. Su éxito se debe a la facilidad de uso, a la capacidad de presentar información diversa, actualizada y proveniente de cualquier punto del planeta y a la sencillez con la que es posible crear y publicar documentos en este sistema. Por supuesto que no es un “lugar”; se trata, en realidad, de secciones de información separadas y almacenadas en ordenadores denominados servidores web, estando todos ellos conectados a través de diversos medios (satélites, líneas telefónicas, fibra óptica,…) y entendiéndose con un protocolo (lenguaje) común.

Cuando se navega por la Web utilizamos un “navegador web”, un programa como Internet Explorer o Mozilla Firefox, con el que es posible acceder a los ficheros almacenados en dichos servidores. El navegador solicita una página a un servidor (proporcionándole la información necesaria sobre su dirección en Internet) y éste se la envía. Para establecer el intercambio de información, los exploradores y los servidores utilizan un conjunto de reglas de comunicación llamadas Protocolo de Transferencia de Hipertexto (HTTP); por este motivo, todas las direcciones de páginas Web comienzan con http:// aunque no es necesario teclear estos caracteres en los navegadores actuales.

Los ficheros a los que accedes se denominan páginas Web, que pueden contener:

  • Texto.
  • Hipervínculos. Para explorar la WWW los usuarios navegan de una página a otra señalando y haciendo clic en hipervínculos de texto o gráficos, que son puntos del documento que permiten acceder a otra sección del mismo (hipervínculos internos) o a otro documento (hipervínculos externos). Se les denomina también vínculos, enlaces, nodos o links. Los exploradores suelen señalar la presencia de un hipervínculo en el documento mediante la transformación de la apariencia del puntero del ratón: generalmente, al colocarse encima de un hipervínculo, se transforma en una mano que señala algo.
  • Tablas.
  • Formularios.
  • Marcos (frames).
  • Imágenes estáticas o en movimiento.
  • Sonidos y otros elementos multimedia.
  • Etc.

Las páginas Web son los documentos básicos de la World Wide Web. Están basadas en la tecnología hipermedia, que integra las posibilidades de los multimedia y del hipertexto, con lo que se puede “navegar” en un mar de información textual, gráfica y sonora. Un sitio Web no es más que una colección de páginas Web enlazadas que contienen información relacionada.

El lenguaje HTML

Hasta hace poco la creación de páginas Web era algo reservado, principalmente, a usuarios con grandes conocimientos de informática, puesto que “debajo” de una página, del texto e imágenes que contiene, descansa un lenguaje propio de páginas Web: el Lenguaje de Marcas de HiperTexto (Hypertext Markup Languaje) o HTML. Algo así como un “armazón” informático que no ves cuando navegas por las páginas, pero que está allí, tras lo que sí ves, para hacer que eso exista.
Este formato, diseñado inicialmente por Tim Berners-Lee, el creador de la World Wide Web, y ampliado posteriormente por distintos grupos de trabajo y organismos, permite que ordenadores de distinto tipo y, con distintos sistemas operativos, puedan ver de la misma forma el contenido de la red.

Html, lenguaje propio de páginas WebEl HTML, cuando apareció, hacia 1991, estaba diseñado para contener únicamente texto e imágenes de un modo básico. Posteriormente, se le fueron añadiendo otras capacidades y características y, actualmente, permite la inclusión de vídeo, sonido e incluso imágenes y audio en tiempo real. Es pues, un lenguaje en permanente evolución. A medida que este lenguaje evoluciona, las nuevas versiones de los exploradores agregan funcionalidades más avanzadas, como controles ActiveX, programas VBSript, programas CGI, programas Java, Flash, etc., que refuerzan, sobre todo, las características interactivas de la tecnología hipermedia.

No tiene intención este manual de mostrarte cómo utilizar el lenguaje HTML (puedes localizar múltiples páginas en Internet con información precisa al respecto) pero te mostraremos, a modo de ejemplo, algunas cuestiones sencillas para que comprendas cómo actúa Kompozer “por debajo” de lo que realizas en él:

  • El HTML se genera a partir de código constituido por etiquetas o tags, que definen cómo se presenta la página Web y permite a los navegadores interpretarlo de forma que lo que tú veas a través del navegador sea una página atractiva.
  • Las etiquetas tendrán una marca de inicio y una de final: por ejemplo, es una etiqueta de inicio y es una etiqueta de final, que caracterizan el principio y el final de un documento HTML.
  • Por tanto, todos los documentos HTML deben estar entre las etiquetas <HTML> y </HTML> .
  • El documento en sí está dividido en dos zonas principales:
  • El encabezamiento, que se encierra con las etiquetas <HEAD> y </HEAD> que contiene información del documento, que no se verá en la pantalla principal, como el título del documento (comprendido entre las etiquetas <TITLE> y < , información para los buscadores de páginas web y otras cuestiones de interés.
  • El cuerpo, parte fundamental del documento, todo lo que aparecerá en la pantalla principal (texto, imágenes, elementos multimedia, etc.). Está comprendido entre las etiquetas <BODY> y </BODY>.

Ejemplo típico:

<html>
<head>
<title>Mi primera página Web</title>
</head>
<body>Este es el texto que se vera en la pagina cuando me conecte a ella con un navegador Web <br>
Este parrafo ira en una linea aparte.
</body>
</html>

Introduces el texto tal cual está en un sencillo editor de notas y lo guardas con la extensión html. Sólo tienes que hacer doble clic sobre él para que el navegador predeterminado de tu equipo lo abra y puedas visualizar el aspecto final de esta página que estás construyendo. Con HTML puedes dar formato al texto, es decir, configurar el tipo, el color y el tamaño de la fuente, incluir imágenes y otros elementos multimedia, editar sus características, insertar enlaces y muchísimo más.

Pero, afortunadamente con las aplicaciones de edición y creación de páginas Web actuales, como es el caso de Kompozer, no necesitarás conocer nada de HTML para realizar tus sitios Web (aunque para diseñadores Web medios y avanzados sí será necesario). El programa utiliza una interfaz muy similar a un procesador de textos, en la que el usuario añade texto y le da formato, inserta imágenes y elementos multimedia… y de forma automática, es la aplicación la que genera las correspondientes etiquetas HTML sin necesidad de tu intervención. Esto se conoce como LO-QUE-VES-ES-LO-QUE-OBTIENES (WYSIWYG, What-You-See-Is-What-You-Get). Ahora bien, si eres capaz de combinar las posibilidades que Kompozer te ofrece y tus conocimientos de lenguaje HTML los resultados serán mucho más precisos, creativos y potentes.

Para conocer más sobre el lenguaje HTML visita:
http://roble.pntic.mec.es/apuente/html/
Excelente manual del lenguaje HTML para diseñadores básicos, medios y avanzados realizado por Ángel Ricardo Puente Pérez, Asesor Técnico Docente del Área TIC de la Dirección General de Infraestructuras y Servicios de la Consejería de Educación de la Comunidad de Madrid.

Una vez que finalices tu sitio Web, éste debe publicarse en la Web para que pueda ser visto por el resto del mundo. Publicar un sitio Web lleva consigo la copia de las páginas y ficheros del ordenador en el que el sitio Web ha sido creado a un servidor Web. Pero esta cuestión será abordada con posterioridad.

Cuestiones preliminares

Cuidado con los nombres de los archivos

Cuando diseñes un sitio Web, con objeto de evitar problemas con los nombres de los archivos, es muy importante que los que crees (tanto páginas html, imágenes, carpetas,…) cumplan los siguientes requisitos:

  • Utilizar una sola palabra como nombre de un archivo.
  • Que no tenga más de 8 caracteres.
  • Que no tenga vocales con tildes, ni mayúsculas, ni eñes ni espacios en blanco.

Cabe recordar que hasta hace poco no se podían emplear dichos caracteres en las URL. Ten en cuenta que todos los servidores no tienen el mismo sistema operativo (de hecho son una minoría los que tienen un sistema operativo Windows). Por tanto, es importante, para evitar problemas con los nombres de archivo cuando quieras “subirlos” al servidor, que se tengan en cuenta las reglas descritas anteriormente. De lo contrario, puede ocurrir que tu sitio Web funcione perfectamente en tu equipo (en lo que se llama en local) y en cambio, en el servidor de Internet en el que está publicado, no.

Atención a la resolución de la pantalla

Con respecto a la resolución de la pantalla, actualmente las resoluciones estándar en la Web son la de 800 x 600 píxeles o 1024 x 768 píxeles, hecho al que ha contribuido la generalización de monitores de 17 e incluso 19 pulgadas en los equipos nuevos. Con los monitores de 15 pulgadas, el estándar en la Web era de 800 x 600 píxeles. Por tanto, te recomendamos que crees tu sitio Web con una resolución de 1024 x 768, por lo que antes de ejecutar el programa es conveniente que ajustes tu escritorio a dicha resolución.

Cuidado con el “tamaño” de las páginas

Es realmente frustrante, cuando visitamos una Web, tener que esperar “mucho” tiempo para que la página sea completamente mostrada en pantalla. Las páginas compuestas de texto, gráficos y elementos multimedia generan una impresión agradable; sin embargo son más lentas para mostrarse al visitante. Debes prestar especial atención al tamaño y “peso” de las imágenes, por tanto, tendrás que utilizar casi obligatoriamente un programa de edición de imágenes. Te recomendamos Photofiltre en Windows (muy sencillito, ideal para que nuestros alumnos de Primaria lo utilicen) o el potente software libre Gimp (tanto en Windows como Linux).

Atención a la navegabilidad de las páginas

Un factor importante es la forma de presentar la información. Hay que tener en cuenta que a medida que la cantidad de páginas de una Web aumenta, es cada vez más difícil para las visitas encontrar lo que necesitan. La mejor forma de ofrecer la información es organizarla en áreas definidas, permitiendo así que la navegación sea muy intuitiva. Si las visitas necesitan emplear mucho tiempo para encontrar la página buscada, es casi seguro que no van a regresar posteriormente. Por tanto, tendrás que diseñar botones y menús de navegación que faciliten el acceso a las páginas de tu sitio.

Atención al diseño de la Web

Debes considerar la paleta o combinación de colores que quieras usar, el tipo o tipos de fuentes a utilizar (no abuses de su variedad, no todos los equipos con las que los visitantes navegan por tu Web dispondrán de ellas), coloca elementos de navegación tales como una barra de navegación con botones o cualquier enlace de texto a otras páginas, realiza titulares, logos identificativos, prepara las ilustraciones y otros tipos de material gráfico, diseña textos de todos los tipos, recuerda poner los avisos sobre propiedad o copyright…

Crea tu primer sitio Web

Como paso previo antes de la utilización de Kompozer debes tomar algunas decisiones sobre lo que será tu primer sitio Web. Tendrás que organizar el posible contenido en un sistema de archivos de forma ordenada.

Si tu sitio va a contener un pequeño número de páginas y pocas imágenes, puedes almacenar todos los archivos en una única carpeta o único directorio sobre el que construirás la Web: por ejemplo, te recomendamos crees en tu directorio personal una carpeta que se llame webcurso, que será la que te permita incluir en ella todos los archivos que vas a utilizar en la realización de este curso online.

Ahora bien, lo habitual es que tu sitio Web sea algo más complejo y que vaya creciendo en un futuro, por lo que es mucho más recomendable crear una estructura de subcarpetas o subdirectorios para poder localizar una página en concreto y para que todos los archivos que utilices (seguramente una lista muy numerosa) estén perfectamente clasificados y organizados. Establecer esta estructura lógica de directorios (denominada también mapeado del sitio Web) es esencial para la planificación de una Web que pretenda crecer en el futuro. Llega a ser incluso más importante que comenzar a añadir enlaces e imágenes a tus páginas porque te ayudará a especificar el camino correcto para cada fichero que se referencia en las páginas.

Aunque esta estructura es muy personal y va a depender del tipo de sitio que diseñes y de sus intenciones te recomendamos una esencial:

  • Crea la carpeta webcurso en tu directorio personal
  • Crea subcarpetas en su interior llamadas: imagenes (las fotos, dibujos, etc. se incluirán aquí), multimedia (para alojar en ella audio, sonidos, música, gifs animados, vídeos…), archivos (utilízala para incluir en ella documentos en formato PDF, DOC, ODT… que mostrarás en tu sitio).
  • Y si tu sitio contiene múltiples páginas tendrás que crear subcarpetas específicas para ellas.

Te ayudará mucho dibujar con lápiz y papel esta estructura y establecer los nombres de los directorios y subdirectorios de manera que sean cortos y descriptivos.

Módulo 2 - Manual Kompozer: Conceptos básicos - Formato PDF
Archivo para editar con OpenOffice: formato ODT

Estadísticas Este artículo ha sido visitado  5400  veces


Acciones

Informaciones

2 Comentarios a “Manual de Kompozer: módulo 2 - Conceptos básicos sobre publicación Web”

23 09 2009
Rayner (00:23:07) :

Saludos soy Rayner, quisiera saber como poner un video en mi pagina WEB hecha en NVU, si no lo saben en NVU pueden indicarme el modo de hacerlo en Kompozer, gracias.

23 09 2009
Rayner (00:24:25) :

Saludos soy Rayner, quisiera saber como poner un video en mi web hecha en kompozer, gracias.

Enviar un comentario


*
Para demostrar que eres un usuario (no un script de spam), introduce la palabra de seguridad mostrada en la imagen.
Anti-Spam Image