1- INTRODUCCIÓN AL DISEÑO WEB.

1.1 TERMINOLOGÍA EN INTERNET.

Antes de entrar en materia, vamos a repasar algunos términos que serán utilizados
constantemente a lo largo del curso. Es muy posible que el alumno esté ya familiarizado con
dicha terminología, pero no está de más repasarla.

No podemos empezar a programar una página Web sin antes conocer la terminología
utilizada, debemos tener claros algunos conceptos, tales como "sitio", "página", "portal",
"servidor Web", etc. Todos estos términos (junto con otros muchos) aparecen recogidos en el
Glosario de términos del curso. Aún así, vamos a revisar ahora algunos de ellos.

Internet

Internet (en ocasiones llamado simplemente "la Red"), es un sistema mundial de redes de
ordenadores, un conjunto integrado por las diferentes redes de cada país del mundo, por
medio del cual un usuario en cualquier ordenador puede (en caso de contar con los permisos
apropiados), acceder a la información de otra computadora de la red, y poder incluso tener
comunicación directa con otros usuarios en otras computadoras.

Fue concebida por la agencia de nombre ARPA ("Advanced Research Projects Agency ") del
gobierno de los Estados Unidos en el año 1969, y se la conocía inicialmente como
"ARPANET". El propósito original fue crear una red que permitiera a los investigadores en un
Campus poder comunicarse a través de los sistemas de cómputo con investigadores en otras
Universidades.

Hoy en día, Internet es un medio de comunicación público, cooperativo y autosuficiente en

términos económicos, accesible a cientos de millones de personas en el mundo entero.
Físicamente, Internet usa parte del total de recursos actualmente existentes en las redes de
telecomunicaciones. Técnicamente, lo que distingue a Internet es el uso del protocolo de
comunicación llamado TCP/ IP ("Transmission Control Protocol/ Internet Protocol").

Para muchos usuarios de Internet, el correo electrónico (e-mail) ha reemplazado prácticamente

al servicio postal para breves mensajes por escrito. El correo electrónico es la aplicación de
mayor uso en la red. También se pueden realizar conversaciones "en vivo" con otros usuarios
en otras localidades usando el IRC ("Internet Relay Chat") y otros programas similares, así
como enviar y recibir archivos. Más recientemente, el software y hardware para telefonía en
Internet permite conversaciones de voz en línea.

WWW

World Wide Web, o simplemente "Web", es el universo de información accesible a través

de Internet, una fuente inagotable del conocimiento humano.

El componente más usado en Internet es, definitivamente, el WWW. Su característica

sobresaliente es el texto remarcado, un método que permite referencias cruzadas
instantáneas. En la mayoría de los Sitios Web, ciertas palabras aparecen en texto de otro color
Módulo 4
Creación de contenidos WEB

diferente al resto del documento (por lo general, este texto está subrayado) Al seleccionar una
palabra o frase, uno es transferido al sitio o página relacionado con ella. En algunas ocasiones
hay botones, imágenes, o porciones de imágenes que pueden activarse mediante un clic,
sirviendo también como enlaces a otros sitios.

Usando el Web, se tiene acceso a millones de páginas de información. La exploración en el

Web se realiza por medio de un software especial denominado "navegador" o "explorador"
(en inglés, "browser"). La apariencia de un Sitio Web puede variar ligeramente dependiendo
del explorador que se use. Así mismo, las versiones más recientes disponen de una
funcionalidad mucho mayor, como animación, realidad virtual, sonido y música.

Sitio Web

Se conoce como "sitio web" o, simplemente, "sitio", a un conjunto de documentos

vinculados con atributos compartidos, tales como temas relacionados, un diseño similar o
un objetivo común. Es un conjunto de archivos electrónicos y páginas Web referentes a un
tema en particular, que incluye una página inicial de bienvenida (generalmente denominada
"home page"), con un nombre de dominio y dirección en Internet específicos.

Son empleados por instituciones públicas y privadas, organizaciones e individuos, para

comunicarse con el mundo entero. En el caso particular de las empresas, este mensaje tiene
que ver con la oferta de sus bienes y servicios a través de Internet, y, en general, para hacer
más eficientes sus funciones de mercadotecnia.

No es necesario que su Sitio Web se localice en el sistema de cómputo (es decir, la red de
ordenadores) de su negocio. Los documentos que integran el Sitio Web pueden estar ubicados
en un equipo en otra localidad, o incluso en otro país. El único requisito es que el equipo en el
que residan los documentos esté conectado a la red mundial de Internet. Este equipo de
cómputo o "servidor Web", como se le denomina técnicamente, puede contener más de un
sitio Web y atender concurrentemente a los visitantes de cada uno de los diferentes sitios.

Al igual que los edificios, oficinas y casas, los Sitios Web requieren de una dirección particular
para que los usuarios puedan acceder a la información contenida en ellos. Estas direcciones, o
"URL' s" (por sus siglas en inglés "Uniform Resource Locator"), aparecen cotidianamente en
todos los medios de comunicación (como prensa escrita, radio, televisión, revistas,
publicaciones técnicas, etc) y en el propio Internet a través de los motores de búsqueda (del
inglés "search engines"). Los nombres de estos sitios Web obedecen a un sistema mundial de
nomenclatura y están regidos por el ICANN ("Internet Corporation for Assigned Names and
Numbers").

Los Sitios Web pueden ser de diversos géneros, destacando los sitios de negocios, servicios,
comercio electrónico en línea, imagen corporativa, entretenimiento y sitios informativos. Un
tipo particular de sitios Web son los denominados "portales" (definidos más abajo).

Portal de Internet

Un portal es un sitio Web que sirve (o pretende servir) como sitio de partida a los usuarios
que se conectan al World Wide Web. Se trata de sitios que los usuarios de la red tienden a
visitar como sitios "ancla".

La idea es emplear estos portales para localizar la información y los sitios que nos interesan, y
a partir de ahí comenzar nuestra actividad en Internet. Un Sitio Web no es considerado un

2
Módulo 4
Creación de contenidos WEB

portal cuando se trata de un sitio robusto, importante, o si contiene información relevante. Un

portal, es más bien, una plataforma de despegue para la navegación en el Web.

Los portales tienen un gran reconocimiento en Internet por el poder de influencia que ejercen
sobre grandes comunidades de internautas.

Página Web

Una página es un documento electrónico que contiene información específica de un tema en

particular, y que está almacenado en algún ordenador que se encuentre conectado a la red
mundial de información (Internet), de tal forma que puede ser consultado por cualquier persona
que se conecte a la red mundial de comunicaciones (y que cuente con los permisos
apropiados para hacerlo). El término "documento Web" es sinónimo del de "página Web".

Una página Web tiene la característica peculiar de que el texto se combina con imágenes
para hacer que el documento sea dinámico y permita que se puedan ejecutar diferentes
acciones, una tras otra, a través de la selección de texto remarcado o de las imágenes,
acción que nos puede conducir a otra sección dentro del documento, abrir otra página Web,
iniciar un mensaje de correo electrónico o transportarnos a otro Sitio Web totalmente distinto a
través de sus hipervínculos.

Una página Web es la unidad básica del World Wide Web, y está escrito en el lenguaje de
programación HTML, que es el lenguaje estándar utilizado en la Red. Cualquier navegador
que use las normas estándares de visualización de documentos web podrá leer e interpretar
HTML, dando como resultado la visualización de la página en una ventana del explorador.
Existen diversos programas que permiten generar código HTML, con los que podemos
crear y modificar páginas sin necesidad de saber HTML. Algunos ejemplos son Microsoft
Frontpage y Macromedia Dreamweaver.

Las páginas pueden ser elaboradas por los gobiernos, instituciones educativas, instituciones
públicas o privadas, empresas o cualquier otro tipo de asociación, y por los individuos
particulares.

Documento Web

Un "documento Web" es lo mismo que una "página Web" (ya definida en el tema anterior) En
el lenguaje cotidiano, las palabras "documento" y "página" no son sinónimas: un documento es
un único cuerpo de trabajo (como puede ser un libro), mientras que una página sería un
elemento dentro de ese trabajo. Pero ambos términos sí significan lo mismo en Web: un único
archivo en disco, que se recupera e interpreta mediante un navegador Web.

Página Principal o de Inicio

La "página principal" o "de inicio" de un sitio Web es la primera página que se carga.
Normalmente, se pretende que esta página dé al público una idea general del contenido del
sitio.

Publicar un sitio

Es el proceso de hacer que un Web sea público en el World Wide Web o en una intranet (es
decir, una red local de ordenadores). Para ello, se deben copiar todas las páginas y archivos

3
Módulo 4
Creación de contenidos WEB

de los que conste el sitio, bien al servidor Web conectado a Internet, bien a la red de área local
(dependiendo del caso).

Servidor

Es un equipo que ofrece servicios en una red. Hay distintos tipos de servidores,
dependiendo de qué tipo de servicio presten a los usuarios.

Por ejemplo, un servidor de archivos -o, simplemente, servidor - es un equipo que funciona en
una red y que almacena archivos, proporcionando acceso a ellos. Otros ejemplos de
servidores son los servidores de correo, los servidores web y los servidores proxy, entre otros.

Servidor Web

En el World Wide Web, el servidor es un equipo que alberga páginas web y que responde a
peticiones del protocolo HTTP.

4
Módulo 4
Creación de contenidos WEB

1.2 INTRODUCCIÓN AL DISEÑO DE SITIOS WEB.

Antes de comenzar la construcción de un sitio Web, debemos determinar qué tipo de

estructura es la más adecuada para el mismo: es decir, cómo van a estar estructuradas las
páginas que compongan el sitio. Para ello, debemos:

• Establecer los objetivos de nuestro sitio.

• Tener en cuenta hacia quién va dirigido (qué tipo de personas esperamos que lo
visiten).
• Determinar los contenidos que vamos a mostrar (texto, imágenes, vídeos, enlaces a
otras páginas, banners de publicidad, formularios, buscadores, listas, ...).
• Desglosar dicho contenido por temas principales.
• Estructurar la información en un conjunto de páginas, pensar en cómo vamos a
relacionarlas después (mediante links), etc.

En función de toda esta información, elegiremos una estructura u otra para diseñar nuestras
páginas Web. También hay que tener en cuenta que toda página debe ser consistente,
atractiva y de fácil manejo y mantenimiento. En el apartado 1.4 estudiaremos formas
estándares de estructurar la información, y el modo de elegir la más apropiada para nuestro
sitio.

Por ejemplo, si estuviésemos preparando el diseño de la Web de un periódico, deberíamos

incorporar, en la página principal, los links a las diferentes secciones del mismo (Nacional,
Internacional, Sociedad, Cultura, Deportes, etc.) Asimismo, sería interesante presentar los
titulares del día, con enlaces a las páginas en las que estén desarrolladas las noticias
correspondientes, etc.

Una vez que tenemos clara la estructura que va a tener nuestro sitio, debemos decidir sobre
otras cuestiones, como pueden ser, por ejemplo:

• ¿de cuántas páginas va a constar?

• ¿cuál va a ser la apariencia general de dichas páginas?
• ¿queremos introducir formularios, buscadores, listas desplegables,...?
• ¿disponemos de todos los archivos (imágenes, vídeos, etc.) que vamos a necesitar?

Aunque pueda parecer innecesario, haber reflexionado sobre todo esto antes de empezar a
programar es una tarea muy útil que nos simplificará el trabajo posterior.

Dedicar algunos minutos a planificar nuestro sitio Web nos ayudará a programarlo de
manera más eficiente.

5
Módulo 4
Creación de contenidos WEB

1.3 ESTABLECER EL CONTENIDO Y LOS OBJETIVOS.

El "contenido" es un término general que hace referencia a toda la información que vamos a
mostrar en las páginas de nuestro sitio. Esta información puede ser de muchas clases: texto,
gráficos, imágenes, vídeos, formularios interactivos, etc. Si le comentara a alguien de lo que
"trata" una página Web, estaría describiéndole su contenido.

¿Qué tipo de contenido puede poner en Web? Casi todo lo que se le ocurra. A continuación
exponemos algunos tipos de contenido que son populares en Web en la actualidad:

• Información personal: Puede comunicar todo lo que alguien pueda desear conocer
acerca de usted, como sus características personales (aficiones, currículum,
fotografía,...), trabajos que haya realizado, etc.
• Aficiones o intereses particulares: Un documento Web podría contener información
acerca de un tema o afición en especial, o algo en lo que esté interesado. Por ejemplo,
puede tratarse de una Web sobre música, sobre arte, sobre naturaleza, sobre
deportes,....
• Publicaciones: Periódicos, revistas y otro tipo de publicaciones se prestan
particularmente bien para ser publicadas en la red, pues tienen la ventaja de poder ser
actualizadas de forma más inmediata y fácil que sus contrapartidas impresas.
• Perfiles de compañías: Es una manera de ofrecer información acerca de una empresa:
dónde está ubicada, a qué se dedica, presentaciones de trabajos, hojas de datos,
informes, colaterales de mercadotecnia, sus contactos, ... Dicha página podría incluso
presentar software de demostración, si ésta fuera la actividad de la empresa.
• Documentación en línea: El término "documentación en línea" puede referirse a
cualquier cosa, desde tarjetas de referencia rápida hasta documentación de referencia
completa, desde cursos interactivos hasta módulos de capacitación.
• Catálogos de compra: Si su empresa vende artículos, poner su catálogo en la red es
una forma muy eficaz de conseguir que sus clientes tengan acceso a todo lo que tiene
disponible, así como a sus precios. Asimismo, si los precios cambian, únicamente tiene
que actualizar los documentos Web para reflejarlos. Con los formularios interactivos
puede permitir a los lectores que ordenen en línea los productos.
• Encuestas y opiniones: La interactividad y los formularios en Web permiten la
participación de los usuarios en encuestas de opinión, buzones de sugerencias,
comentarios sobre sus páginas Web o sobre sus productos, etcétera. También están
muy extendidos los foros de discusión sobre cualquier tema que se pueda imaginar.

A la hora de elegir los contenidos, es imprescindible establecer los objetivos del sitio. ¿Qué
queremos que los internautas hagan en nuestra presentación? ¿Podrán buscar información
específica sobre algo?, ¿leerán cada página y pasarán a la siguiente sólo cuando hayan
terminado la que están leyendo, o podrán elegir caminos alternativos para moverse por el
sitio?, ¿tendrán que introducir datos personales?, ¿darán su opinión?, ¿tendrán acceso a
páginas de fuera de nuestro sitio?,...

Cuanto más claros tengamos los objetivos, mejor podremos determinar los contenidos
de nuestro web, y, por tanto, su estructura.

Los objetivos no deben ser muy pretenciosos, ni tener sentido únicamente para nosotros, los
programadores del sitio. Es importante que la persona que visite nuestro web capte cuáles son
esos objetivos.

6
Módulo 4
Creación de contenidos WEB

Una página podría tener un único objetivo: la página principal de un sitio personal o de interés
especial tendrá como objetivo permitir que el lector visualice y explore la información que le
estamos proporcionando.

Al establecer los objetivos, nos estamos preparando para diseñar, organizar y escribir nuestras
páginas Web de manera que se logren esos propósitos, en la medida de lo posible. Además,
conseguiremos que la información no sea confusa, sino que esté bien estructurada y
organizada.

No es imprescindible establecer todos los objetivos en este preciso instante. Por el

momento, basta con definir una idea general de lo que pretendemos que sea nuestro sitio.
Posteriormente, cuando estemos programando las páginas, podremos refinar estos objetivos.

7
Módulo 4
Creación de contenidos WEB

1.4 ESTRUCTURA DEL SITIO WEB.

Lo primero que tenemos que hacer es organizar el contenido en función de unos temas
principales: con los objetivos en mente, separaremos el contenido por temas o secciones
principales, reuniendo bajo un mismo tema la información que esté relacionada. Normalmente,
los objetivos (definidos en la sección anterior) y los temas están estrechamente relacionados.

Con el fin de dar la mayor claridad posible a nuestras páginas, debemos estructurar bien la
información que vamos a mostrar en ellas. Algunas estructuras estándares de organización
de la información son las siguientes:

• Jerárquica
• Lineal
• Lineal con alternativas
• Combinación de Lineal y Jerárquica
• Web

Jerárquica

Probablemente, la forma más lógica y sencilla de estructurar documentos Web sea hacerlo de
una manera jerárquica o en forma de menú, tal como ilustra la Figura 1.1. Las jerarquías y
los menús se prestan especialmente bien para los documentos en línea y con hipertexto. Por
ejemplo, la mayoría de los sistemas de ayuda en línea son jerárquicos.

Se da comienzo con una lista o menú de temas principales. La selección de alguno de estos
temas conduce a una lista de "subtemas", que a su vez lleva a la explicación de un tema en
particular.

En una organización jerárquica, es fácil para los lectores conocer su ubicación en la

estructura; sus opciones consisten en moverse hacia arriba para obtener información más
general, o hacia abajo para obtener información más específica. Al proporcionar un vínculo
hacia el nivel superior le permite al lector regresar de manera rápida y fácil a alguna posición
conocida.

Figura 1.1.- Estructura jerárquica.

8
Módulo 4
Creación de contenidos WEB

Dentro de la jerarquía, la página base proporciona el panorama más global del contenido que
se encuentra por debajo de ella. La página base también define los vínculos principales hacia
las páginas de la parte más baja de la jerarquía.

Sin embargo, debe evitarse la inclusión de demasiados niveles y demasiadas elecciones ya

que puede resultar aburrido para el lector.

Lineal

Otra forma de organización de documentos es la lineal o secuencial, muy similar a la manera

en que se escriben los documentos impresos. En una estructura lineal como la ilustrada en la
Figura 1.2, la página base es el título, o introducción, y cada página sigue en forma
secuencial a partir de dicha estructura. En una estructura estrictamente lineal, existen vínculos
que se mueven de una página a otra, normalmente hacia adelante y hacia atrás. También se
puede incluir un vínculo a la "base" que lleve con rapidez a la primera página.

El contexto es por lo general fácil de encontrar en una estructura lineal, pues existen muy
pocos lugares adonde ir. Una organización lineal es muy rígida y limita la libertad de los
lectores para explorar, así como la libertad que tiene usted para presentar información. Las
estructuras lineales son buenas para colocar material en línea en lugares donde la información
también tiene una estructura muy lineal poco común (tales como cuentos cortos, instrucciones
paso a paso o entrenamiento basado en la computadora), o cuando explícitamente desea
evitar que el lector salte de un lado a otro.

Figura 1.2.- Estructura lineal.

Lineal con alternativas

Podemos suavizar la rigidez de una estructura lineal permitiéndole al lector que se desvíe de
la trayectoria principal. Por ejemplo, puede tener una estructura lineal con alternativas que
se ramifiquen desde un mismo punto (véase la Figura 1.3). Las ramificaciones se pueden
reunir con la rama principal en algún punto posterior, o bien pueden continuar su trayectoria
separada hasta que cada una llegue a un "final".

Figura 1.3.- Estructura lineal con alternativas.

9
Módulo 4
Creación de contenidos WEB

Combinación de las estructuras Lineal y Jerárquica

Una forma popular de organizar los documentos en Web consiste en una combinación de las
estructuras lineal y jerárquica, como muestra la Figura 1.4. Esta estructura aparece con mayor
frecuencia cuando se ponen en línea documentos muy estructurados pero lineales. Por
ejemplo, los populares archivos FAQ ("Frequently Asked Questions", que significa "Preguntas
más Frecuentes") utilizan esta estructura.

Figura 1.4.- Estructura combinación lineal-jerárquica.

La combinación de documentos lineales y jerárquicos funciona bien siempre que existan las
pistas adecuadas con respecto al contexto. Debido a que el lector puede moverse hacia
arriba y hacia abajo o hacia adelante y hacia atrás, es fácil perder la posición mental dentro
de la jerarquía cuando se atraviesan límites jerárquicos al moverse hacia adelante y hacia
atrás. Por ello, debemos intentar facilitar al lector la tarea de localizar su situación dentro del
árbol de documentos.

Web

Una Web ("telaraña") es un conjunto de documentos con poca o ninguna estructura global
real. Lo único que ata a cada página es un vínculo que la relaciona con, al menos, otra
página, de modo que el conjunto de todas las páginas es una red sin ninguna forma
predefinida (véase la Figura 1.5) El lector vaga de un documento a otro siguiendo los
vínculos presentes.

Figura 1.5.- Estructura Web (telaraña).

10
Módulo 4
Creación de contenidos WEB

Las estructuras Web tienden a ser de flujo libre y permiten que el lector vague sin rumbo fijo
por su contenido. Asimismo, son excelentes si pretende que el contenido sea laberíntico o sin
relación, o si desea fomentar la visualización. La World Wide Web es, en sí misma, una
estructura Web gigantesca.

El mayor inconveniente de las organizaciones Web consiste en que es demasiado fácil

perderse en ellas. Sin una estructura global del contenido, le será difícil encontrar la relación
entre el lugar donde se encuentra y hacia dónde se dirige y a menudo, en dónde ha estado. El
contexto es difícil, y a menudo la única forma para encontrar el camino de regreso para salir
de una estructura Web consiste en retroceder siguiendo 1as huellas de los pasos. Las
estructuras Web pueden ser extremadamente desorientadoras e inmensamente frustrantes
si tiene un objetivo específico en mente.

Para resolver el problema de la desorientación, se pueden utilizar pistas en cada página.

Considere las dos ideas siguientes:

• Proporcionar un camino de salida: "Regreso a la página base" sería un vínculo

excelente.

• Incluir un mapa de la estructura general, con una indicación "usted se encuentra aquí"
en algún lugar del mapa. No es preciso que se trate de un mapa visual real, sino
proporcionar algún tipo de contexto que será de gran ayuda para evitar que los lectores
se pierdan.

En este punto, somos nosotros quienes debemos decidir qué estructura (de todas las
anteriores) es la más indicada para nuestro sitio Web.

11
Módulo 4
Creación de contenidos WEB

1.5 ELEMENTOS DE UNA PÁGINA WEB.

Toda página Web es, a simple vista, parecida a cualquier otro documento: puede contener
texto, imágenes, tablas..., todo ello organizado de una manera determinada. Sin embargo,
nosotros ya sabemos que una página Web no es sólo una recopilación de datos, sino que
contiene (implícitamente) una serie de códigos (etiquetas) que permiten dar formato a la
página en el navegador. ¿Qué queremos decir con "dar formato a la página"? Pues, por
ejemplo, distribuir el texto en columnas, poner letras en negrita, asignar color al texto, rodear
una imagen con texto, etc. El programa navegador con el que abramos la página interpreta los
códigos HTML de la misma, y muestra en una ventana la información contenida con el formato
que determinan dichos códigos.

Por consiguiente, para mejorar el aspecto de una página Web, debemos conocer todas las
posibilidades que nos ofrece HTML, para así poder aprovecharlas al máximo. Es por ello que,
aunque diseñemos las páginas con un editor como FrontPage o Dreamweaver, debemos
conocer, al menos, lo más importante del código HTML.

Repasemos los principales componentes que suelen aparecer en una página Web típica:

Texto

El texto editable el aquél que vemos al abrir una página Web en el explorador. Se muestra en
pantalla con alguna de las fuentes que el usuario tiene instaladas (Arial, Times New Roman,
Verdana, etc), y con unas propiedades (de tamaño, color, etc) determinadas. El texto editable
podemos seleccionarlo con el ratón o el teclado, y copiarlo a otra aplicación, como el bloc de
notas. También podemos hacer la operación inversa: escribir el texto en un editor normal y
corriente, y después pegarlo en el fichero HTML, aunque esto es poco corriente.

Muchos de los elementos textuales que aparecen en las páginas Web son, en realidad,
gráficos, y su texto no es editable. Por ejemplo, los títulos, botones de navegación,
hiperenlaces, etc.

Imágenes

Son archivos que no "pertenecen" al fichero en el que está "escrita" la página, sino que están
enlazados desde éste con un código HTML que indica al navegador cuál es el nombre del
archivo que contiene la imagen, dónde está ubicado, qué dimensiones tiene, si es un enlace a
otro sitio, etc.

Sólo debemos insertar imágenes cuando sea necesario, ya que aumentan considerablemente
la cantidad de información que debe transferirse por la red. Por esta razón, es conveniente
optimizar las imágenes que vayamos a insertar en la página. Los formatos más utilizados
para las imágenes son .GIF y .JPG, ya que dichas imágenes están comprimidas.

Conviene disponer de algún programa adicional para trabajar con las imágenes, como: Adobe
Photoshop, Paint Shop Pro, etc.

Elementos multimedia

Los elementos multimedia son fundamentalmente ficheros de sonido, video y películas Flash.
Añadir este tipo de ficheros a nuestras páginas siempre resulta atractivo, si bien, debido al

12
Módulo 4
Creación de contenidos WEB

tamaño de este tipo de ficheros, solo es recomendable añadirlos a nuestras páginas cuando su
aportación sea imprescindible para transmitir la información que deseamos al visitante.

Formularios

Son una mezcla de texto y, en ocasiones, gráficos, que permiten al visitante de la página
enviar información (por ejemplo, consultando un catálogo, solicitando más información,
comunicando su opinión, o votando en una encuesta). Existen diferentes modelos de
formulario:

• algunos, simplemente, envían la información por correo electrónico

• otros funcionan ejecutando un programa guión en el servidor.

Marcos

Los marcos nos permitirán visualizar varias páginas Web dentro de la misma ventana.

Hojas de estilo (CCS)

Las hojas de estilo permiten dar formato a nuestras páginas de manera cómoda, potente y
flexible. Una hoja de estilos se puede definir como una colección de reglas que definen la
apariencia de una página Web al ser debidamente interpretadas por los navegadores.

Código JavaScript

JavaScript es un lenguaje de programación que es interpretado y ejecutado por el navegador,

que sirve para crear páginas Web dinámicas en el cliente. Es muy utilizado para conseguir
diferentes efectos visuales: en particular, los efectos de cambio de imagen al pasar el ratón
por encima. Los programas escritos en este lenguaje (llamados "scripts" ó "guiones") se
insertan en un documento HTML. Estudiaremos JavaScript en el Tema 4.

Código Java

Java es un lenguaje de programación orientado a objetos, independiente de plataforma (es

decir, que se puede ejecutar en cualquier ordenador) Al igual que JavaScript, también permite
crear diferentes efectos, interactividad, etc, pero no está orientado únicamente a la
programación Web, sino que tiene muchísimas otras aplicaciones. Este lenguaje no lo
estudiamos en el presente curso dada su complejidad.

Código ASP

ASP ("Active Server Pages") es un lenguaje que proporciona un método eficiente y sencillo
de crear sitios Web con páginas dinámicas y acceso a bases de datos, para desarrollar
páginas Web activas en el servidor. Una página ASP es un tipo especial de página HTML
que contiene unos pequeños programas (también llamados "scripts") que son ejecutados en
servidores Microsoft Internet Information Server ("IIS") antes de ser enviados al usuario
para su visualización en forma de página HTML. Habitualmente, esos programas realizan
consultas a bases de datos, y los resultados de esas consultas determinan la información que
se envía a cada usuario específico. Los ficheros de este tipo llevan el sufijo .asp.

13
Módulo 4
Creación de contenidos WEB

Shockwave/ Flash

Interesantes imágenes fijas o animaciones interactivas de tipo vectorial, extremadamente

compactas. Es preciso disponer de un plug-in para poder verlas en el navegador, aunque las
versiones más recientes lo incluyen y es gratis. Estos programas se pueden obtener de la
página de Macromedia, que es un buen ejemplo del uso de este tipo de componentes para
páginas web, cada vez más utilizados.

14
Módulo 4
Creación de contenidos WEB

1.6.- LENGUAJES DE PROGRAMACIÓN WEB.

Se pueden diseñar dos tipos de páginas Web:

• Páginas Web estáticas: Formadas únicamente por texto estático y enlaces a otras
páginas. Para construir este tipo de páginas se utiliza HTML. Son páginas muy
sencillas de crear y que en muchas ocasiones dependiendo de la información que se
pretenda dar a conocer son más que suficiente, siempre y cuando esta se presente de
manera ordenada.

Cuando un servidor Web recibe una petición de una página Web estática, el servidor
envía la página al navegador solicitante sin realizar ninguna otra operación, tal y como
se muestra en la figura 1.6.

Figura 1.6.- Modelo de funcionamiento de página Web estática.

Normalmente las páginas estáticas llevan una de las siguientes extensiones htm o html.

• Páginas Web dinámicas: Se trata de páginas en las que aparecen determinados

efectos especiales de animación y en las que el usuario puede interactuar. Para el
diseño de este tipo de páginas se requiere el conocimiento de lenguajes de
programación: javascript, actionscript, visual Basic script, etc.

En estas páginas el código que añade el dinamismo va “incrustado” en el HTML de la

página.

Estas páginas además de su atractivo visual presentan otras ventajas menos

conocidas, pero de gran importancia. Por ejemplo, cuando una página Web muestra
información que cambia con cierta frecuencia (páginas de e-commnerce, páginas de

15
Módulo 4
Creación de contenidos WEB

diarios de noticias, páginas que contienen programación de TV, etc.) se debe recurrir al
diseño de páginas dinámicas. En caso contrario sería necesario diseñar una página
web estática cada vez que cambia la información que contiene (diariamente,
semanalmente, cada vez que cambia una condición de compra/venta determinada en el
caso de las páginas de e-commnerce, etc.). Para crear este tipo de páginas se realizan
programas que obtienen la información de bases de datos y actualizan los contenidos
en función a la nueva información. En este caso, en lugar de hablar de diseño de
páginas Web, se habla de desarrollo de aplicaciones Web.

En función del lugar en el que se ejecuten las aplicaciones Web se habla de:

1.- Aplicaciones Web del lado del cliente: El cliente Web es el encargado de
ejecutarlas en la máquina del usuario. Son las aplicaciones tipo Java o Javascript: el
servidor proporciona el código de las aplicaciones al cliente y éste, mediante el
navegador, las ejecuta. Es necesario, por tanto, que el cliente disponga de un
navegador con capacidad para ejecutar aplicaciones (también llamadas scripts, en el
caso de Javascript; ó applets en el caso de Java).

Normalmente, los navegadores permiten ejecutar aplicaciones escritas en lenguaje

Javascript, aunque pueden añadirse mas lenguajes mediante el uso de plugins
diseñados para funcionar con cada navegador en concreto, siendo algunos de los más
conocidos: Java, Flash Macromedia, Adobe Acrobat...

Plugin: Un plugin (o plug-in) es un programa de ordenador que interactúa con otro programa para
aportarle una función o utilidad específica, generalmente muy específica. Este programa adicional
es ejecutado por la aplicación principal. Los plugins típicos tienen la función de reproducir
determinados formatos de gráficos, reproducir datos multimedia,... En el caso que nos ocupa, el de
la navegación web, el programa principal sería el navegador web, mientras que el plugin sería por
ejemplo el JRE Plugin (Java Runtime Environment Plugin, ó Plugin de Entorno de Ejecución Java),
que va a permitir ejecutar aplicaciones Java (llamadas Applets) dentro de nuestro navegador.

Las 4 principales soluciones para la implementación de aplicaciones web en el cliente

son:

• JavaScript

Este lenguaje de scripts está soportado de forma nativa en la mayor parte de los
navegadores, aunque existen algunas pequeñas diferencias entre la implementación
del intérprete JavaScript, por lo que a veces un script que funciona correctamente en un
navegador puede no funcionar correctamente ó incluso generar errores en otro
diferente.

Debido a su gran difusión y a que es muy útil en cualquier tipo de aplicación Web, en el
capítulo 3 se estudiará Javascript en profundidad.

• Applets de Java (Tecnología de Sun Microsystems)

La gran mayoría de los navegadores para los distintos sistemas operativos soportan la
ejecución de estos applets mediante el uso de plugins gratuitos. Una de las grandes
ventajas es que goza de la enorme riqueza de la tecnología Java y que (al menos en
teoría) la ejecucución de un applet sobre diferentes navegadores debe ser idéntica,

16
Módulo 4
Creación de contenidos WEB

pués el applet es realmente ejecutado por la máquina virtual de java del equipo (la JVM
ó Java Virtual Machine).

• Controles ActiveX (Tecnología Microsoft).

Los usuarios de navegadores que no son de Microsoft (osea que no son Internet
Explorer) requieren de plugins especiales para soportarlos, y en muchos casos no hay
plugins disponibles para determinados navegadores. Suelen ser dependientes del
sistema operativo por lo que no funcionarán el plataformas no Microsoft. Es la
respuesta de Microsoft a los Applets de Java.

• DHTML (Es el acrónimo de Dynamic HTML ó HTML dinámico).

Su uso queda restringido a la generación de interfaces gráficas dinámicas mediante el

uso de capas ó layers.

Combinado con Javascript y CSS (Cascade Style Sheet ó páginas de estilos) es muy
usado para la creación de menús de usuario, árboles de contenido, etc...

2.- Aplicaciones Web del lado del servidor: En este caso es el servidor Web el que
ejecuta la aplicación. En este caso, pasa la página a una ampliación de software
especial que se crear la página que se enviará al cliente en función de los datos
solicitados por este último. Este software especial encargado de generar la página se
denomina servidor de aplicaciones. El servidor de aplicaciones lee el código de la
página y genera la página en función de las instrucciones del código y elimina el código
de la página. El resultado es una página estática que el servidor de aplicaciones
devuelve al servidor Web, que a su vez la envía al navegador del cliente, que lo único
que recibe para procesar es código HTML. Este proceso se muestra en la figura 1.7.

Figura 1.7.- Modelo de funcionamiento de página Web dinámica del lado del servidor.

17
Módulo 4
Creación de contenidos WEB

Puesto que las secuencias de comandos se ejecutan en el servidor, y NO en el cliente,

es el servidor el que hace todo el trabajo necesario para generar las páginas que se
envían al navegador. Las secuencias de comandos quedan ocultas a los usuarios,
estos solo reciben el resultado de la ejecución en formato HTML. Desaparece por tanto
el problema de si el cliente puede o no ejecutar sentencias de comandos, el servidor
Web solo envía el resultado en código HTML standard interpretable por cualquier
navegador.

Una de las aplicaciones más típicas de las páginas dinámicas es el acceso a

información contenida en bases de datos del servidor. En este caso, el servidor de
aplicaciones no puede comunicar directamente con la base de datos ya que el formato
de estas últimas es ilegible para el servidor de aplicaciones. Para realizar el acceso a la
base de daros, el servidor requiere de un software denominado controlador de base
de datos. Un controlador de base de datos es software que actúa como intérprete entre
el servidor de aplicaciones y la base de datos de forma que permite a la aplicación Web
leer y manipular datos que, de otro modo, resultarían indescifrables. Una vez que el
controlador establece la comunicación, la consulta se ejecuta en la base de datos y se
crea un juego de registros que se devuelve al servidor de aplicaciones, que los utiliza
para crear la página que enviará al cliente que realizo la solicitud. El esquema de este
proceso se muestra en la figura 1.8.

Figura 1.8.- Modelo de funcionamiento de página Web dinámica con acceso a bases de datos.

18
Módulo 4
Creación de contenidos WEB

Cómo es lógico, las aplicaciones Web del lado del servidor, además del HTML y del
código del servidor, pueden contener scripts del lado del cliente.

Las aplicaciones de servidor (a las que nos referiremos usualmente a partir de ahora
como páginas dinámicas del lado del servidor, ó simplemente páginas dinámicas)
suelen ser la opción por la que se opta en la mayoría de las ocasiones para realizar
aplicaciones Web.

Las principales ventajas de estas páginas dinámicas, ejecutándose del lado del servidor
son:

1. Al ejecutarse ésta en el servidor y no en la máquina del cliente, éste (el

navegador) no necesita ninguna capacidad adicional, como sí ocurre en el caso
de querer ejecutar aplicaciones Javascript o applets de Java, en cuyo caso hará
falta que el cliente disponga de un intérprete de JavaScript o un entorno de
ejecución de Java, respectivamente.

2. El comportamiento de la aplicación y el resultado obtenido son perfectamente

predecibles pues es el mismo servidor el que realiza todo el proceso de
generación de la página.

3. El acceso a base de datos (fundamental en cualquier aplicación Web, como se

verá más adelante), archivos u otros recursos necesarios por la aplicación es
llevado a cabo únicamente por el servidor Web.

4. El proceso se lleva en el servidor: No dependemos de la potencia de cálculo y

recursos (fundamentalmente memoria RAM) del cliente, que hipotéticamente
puede ser muy reducida.

Imaginar la siguiente situación: Una aplicación está funcionando en el lado del

cliente y esta necesita acceder a una base de datos para generar el informe de
ventas de una empresa. Accedemos a la página Web que genera dicho informe
desde un ordenador a kilómetros de distancia: ¡Deberíamos dejar una puerta
abierta a la base de datos de la empresa desde mundo exterior!
Aún en el caso de que solucionáramos los problemas de conectividad
(encaminar la salida del servidor de bases de datos hasta el router de salida a
internet), y de seguridad (es decir, abrir el puerto de conexión a la base de datos
en el firewall y -por la cuenta que nos trae- implementar mecanismos de
autentificación), los datos que devolverían todas las consultas a la base de
datos tendrían que viajar por la red para ser interpretados por la aplicación y
generar la salida deseada: podríamos mandar miles ó millones de bytes para
posiblemente generar un sólo número.

Estos riesgos de seguridad no sólo afectan al lado del servidor, sino también al
lado del cliente (un caso típico es el de los Applets de Java, que no permitirán

19
Módulo 4
Creación de contenidos WEB

conectarse a un servidor que no sea el mismo que ha servido la página que

contiene el applet).

Las aplicaciones del lado del servidor necesitan de alguna tecnología para la
generación de Web dinámicas. Estas tecnologías implementan en ocasiones un
lenguaje propio; otras veces utilizan un lenguaje de propósito general; y en otras
permiten el uso de distintos lenguajes.

Entre estas tecnologías destacan:

• PHP (PHP Hypertext Preprocessor, ó Preprocesador de Hipertexto)

Desarrollado por la comunidad GNU. Utiliza el lenguaje PHP, que tiene una sintaxis
bastante parecida a C. En el capítulo 4 se hace una breve introducción a PHP.

• JSP/Servlets (Java Server Pages)

Basados en tecnologías Java de la compañia Sun Microsystems.

• ASP (Active Server Pages) De la casa Microsoft.

El lenguaje utilizado es Visual Basic Script (una variación de Visual Basic). También
permite el uso del lenguaje JavaScript (del lado del servidor!).

• XML (eXtensible Markup Language ó Lenguaje Extensible de Marcas)

Esta tecnología es cada día más importante y se usa junto con la mayoría de
tecnologías restantes. En rigor no se podría considerar que exista un lenguaje XML,
aunque es muy común el uso de esta expresión en vez de la de tecnología XML.

• CGI (Common Gateway Interface)

Es una interfaz de llamada a un script en el servidor, normalmente escrito en lenguajes

Perl, C ó C++, aunque en teoría se podría integrar con practicamente cualquier otra
tecnología/lenguaje.

• .NET

Tecnología de Microsoft (que viene a ser la contrapartida de esta compañia para el

Java de Sun). Permite el uso de múltiples lenguajes de programación: ASP.NET,
Java.NET, VisualBasic.NET, C# (se lee como: "c sharp"), ...

Normalmente las páginas dinámicas llevan una extensión que indica el tipo de
tecnología/lenguaje usado para su generación (aunque en realidad no tiene porque ser
así):

• .php
• .jsp
• .asp
• .aspx (tecnología .NET)

20
Módulo 4
Creación de contenidos WEB

En la siguiente tabla se resumen algunas de estas tecnologías.

Tecnología de servidor Lenguaje

ASP.NET Visual Basic

C#

Active Server Pages (ASP) VBScript

JavaScript

JavaServer Pages (JSP) Java

PHP PHP

21