EL HIPERTEXTO Y LA WEB

La World Wide Web, comúnmente llamada Web o WWW, nace a principios de los años 90, aunque
sus orígenes se remontan a mucho tiempo antes, ya que es fruto de la confluencia de la teoría
hipertextual y de las redes de ordenador.
Fue creada por Tim Berner-Lee del Centro
Europeo de Física Nuclear (CERN) con el
objetivo de servir como herramienta para
la búsqueda y transmisión de información
entre los científicos.

El hipertexto es la base funcional y estructural de la World Wide Web. Podríamos

decir que la Web es un hipertexto de
escala planetaria puesto que
cualquier usuario puede poner su
página en la red y establecer enlaces
a cualquiera de los documentos
disponibles en ella. La Web es un
sistema hipertextual preparado para
recorrer diferentes páginas web
dispuestas en servidores accesibles
desde cualquier ordenador conectado
a Internet y enlazadas unas con otras
conformando una estructura similar a
la de la tela de araña, típicamente
una red hipertextual asociativa, o
mejor dicho, la red hipertextual por
antonomasia. Las páginas web se
enlazan unas a otras dentro de cada
hiperdocumento o sitio web y pueden
conectarse a otros hiperdocumentos
o sitios web llevando al usuario de un
servidor a otro sin necesidad de teclear
ninguna ruta.

En la Web, cada nodo es una página,

y cada palabra remarcada (puede ser
con determinado color o subrayada)
representa la entrada de un enlace.
La Web también permite relacionar
documentos multimedia (imágenes,
sonidos, vídeo, etc.) y recursos
residentes en múltiples servidores
mundiales y ofrece un nuevo y más
extenso medio para estudiar las consecuencias del hipertexto convertido en
hipermedia.

La Web se ha convertido en uno de los servicios principales de Internet. En pocos

años, casi toda la información disponible en la red se ha volcado a la Web y se
han ido abandonando otros métodos cómo Gopher, con su estructura jerárquica
de acceso a la información, o las técnicas documentales que ofrecía Wais. La
World Wide Web ha triunfado y millones de documentos se encuentran accesibles
mediante este sistema de almacenamiento y acceso a la información.

La Word Wide Web constituye una gran red documental de estructura hipertextual.
El éxito de este modo de presentar la información, se debe principalmente a la
flexibilidad del protocolo HTTP y a las capacidades del lenguaje HTML. En la base
de ambos, está la estructura hipertextual de los documentos creados, de donde
protocolo y lenguaje, toman sus nombres: Hypertext Transfer Protocol e Hypertext
Markup Language. Lo cierto es que en la Web hoy existen otros muchos lenguajes
tanto para estructurar la información como para conceptualizarla y que a través de
la Web no sólo se accede a
información, sino que la Web se ha
convertido en la interfaz más utilizada
hoy en día para la prestación de
muchos de los servicios de Internet
debido, sobre todo, además de a su
capacidad hipertextual, a sus
capacidades hipermediales,
dinámicas e interactivas.

Las páginas Web precisan de una

conexión a Internet y de un programa
de navegación que deberá estar
disponible en el ordenador del
usuario o cliente web, ya que el funcionamiento de la Web se basa en el modelo
cliente-servidor. El programa de navegación se denomina navegador, browser,
visualizador, explorador, visor, lector u hojeador (la traducción de la palabra
browser no está claramente definida, aunque en los últimos años parece haber
triunfado finalmente la palabra navegador). El primer navegador fue Mosaic
desarrollado por el NCSA (The National Center for Supercomputing Applications), y
hoy los navegadores más populares son Internet Explorer, Netscape Navigator,
Opera, Firefox, etc; aunque existen otros muchos.

Analizaremos aquí distintos aspectos de la Word Wide Web como son la historia
de la Web, sus aspectos tecnológicos -centrándonos en el modelo de cliente-
servidor, los protocolos web y las funciones y tipos de navegadores que se
precisan para visualizar las páginas-; así como el enfoque de la Web como
hipertexto de alcance universal. Sin embargo, hay que tener en cuenta que la Web
no es Internet, sino una pequeña parte de ella. Por lo tanto, también es preciso
analizar los distintos aspectos relacionados con la red Internet, como son la
historia de Internet, sus aspectos tecnológicos (protocolos, direcciones IP, URL,
dominios, etc.) y los distintos servicios que presta la red de redes. En capítulos
aparte se estudiarán otros aspectos relacionados con la búsqueda y recuperación
de información en la Web y otras actividades relacionadas como son la
descripción, localización, indización, clasificación y resumen de documentos en la
Web. También merecen una mención aparte la puesta en práctica de nuevos
desarrollos en el campo de los lenguajes hipertextuales que permiten dotar de una
semántica a los documentos contenidos en la Web - lo que se ha venido en
denominar la Web Semántica-, y el desarrollo de los nuevos Servicios Web, así
como el auge y popularidad de la llamada Web 2.0 basada en redes sociales y
cooperativasl.

En cuanto a la utilización del término World Wide Web, todavía existen

oscilaciones y algunos autores utilizan el artículo masculino al intentar
castellanizar el término inglés -el Web-, y otros prefieren usar el femenino por
corresponder la traducción a este género -la Web, la telaraña-.

QUE ES UN HIPERTEXTO

Hipertexto

Hipertexto en informática, es el nombre que recibe el texto que en la pantalla de un dispositivo

electrónico conduce a otro texto relacionado. La forma más habitual de hipertexto en documentos
es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos (lexias). Si
el usuario selecciona un hipervínculo el programa muestra el documento enlazado. Otra forma de
hipertexto es el strechtext que consiste en dos indicadores o aceleradores y una pantalla. El
primer indicador permite que lo escrito pueda moverse de arriba hacia abajo en la pantalla. El
segundo indicador induce al texto a que cambie de tamaño por grados.

Es importante mencionar que el hipertexto no esta limitado a datos textuales, podemos encontrar
dibujos del elemento especificado, sonido o vídeo referido al tema. El programa que se usa para
leer los documentos de hipertexto se llama “navegador”, el "browser", "visualizador" o "cliente" y
cuando seguimos un enlace decimos que estamos navegando por la Web.

El hipertexto es una de las formas de la hipermedia, enfocada en diseñar, escribir y redactar texto
en una media.

Orígenes

La palabra hipervinculo aparece por primera vez en el artículo No more teachers's dirty looks, de
Ted Nelson en referencia a un sistema en el que los archivos de texto, voz, imágenes y vídeo
pudieran interactuar con los lectores. Anteriormente, en 1945, Vannevar Bush propuso un sistema
con características parecidas al que llamó memex en su artículo As We May Think, publicado en el
número de julio de 1945 de la revista The Atlantic Monthly.
En éste hablaba de la necesidad de máquinas de procesamiento de información mecánicamente
conectadas para ayudar a los científicos a procesar la gran cantidad de información que se había
generado por los esfuerzos en la investigación y el desarrollo durante la Segunda Guerra Mundial,
cuyo fin ya se veía cercano. En el año 1960, Douglas Engelbart y Ted Nelson, desarrollaron un
programa de computador que pudiera implementar las nociones de hipermedia e hipertexto. En
los años ochenta, después de que comenzaran a crearse las primeras computadores personales,
IBM lanzó el sistema de guía y enlace para sus computadoras, mientras que Macintosh desarrolló
la Intermedia y la HyperCard

Origen de la Web
§1 Sinopsis

Hasta el verano de 1991, el uso de Internet era bastante restringido; todo se reducía a
usuarios en Universidades y centros de Investigación repartidos por el mundo que accedían
a los servicios que proporcionaba la Red, mediante programas cuya utilización exigía
secuencias de comandos totalmente crípticos para el profano. Casi todas las máquinas
utilizaban el SO. Unix, cuyo manejo no tiene precisamente fama de sencillo, y cuyo
intérprete de comandos (un sistema de órdenes por las que el operador indica al sistema que
quiere que haga), no es lo que podríamos calificar como muy "intuitivo". El resumen era
que si uno quería, por ejemplo, conectar con un servidor FTP ( 8.2) en un organismo o
institución remota, consultar sus fondos, "bajarse" un fichero e imprimirlo, tenía que hacer
todo esto a "pedal" (la Red solo era utilizada por especialistas).

Así las cosas, el británico Berners-Lee (al que se considera

el padre de la Web), que a la sazón trabajaba en el CERN
de Ginebra ,empezó a escribir un programa que le
permitiera almacenar información. De modo magistral, dio
forma y aplicación a un par de conceptos que ya habían
sido formulados anteriormente de forma más o menos vaga
y genérica: El hipervínculo, que conducía directamente al
concepto de hipertexto [,de ahí al de páginas HTML
Tim Berners-Lee
(páginas Web) que a su vez, darían origen a un nuevo
servicio de Internet (mejor diríamos una nueva forma de
usar la Red) que acabaría arrasando, y a un nuevo paradigma de arquitectura de la
información: Los "Hypermedia".

Las páginas de hipertexto, con sus hipervínculos enlazando información en cualquier parte
del mundo, tejen una telaraña mundial, de ahí el nombre que recibió, Telaraña Mundial,
"World Wide Web" [5], abreviadamente "La Web"; WWW o W3 .

Nota: no confundir "la Web" con "la Red". La Red (con mayúsculas) es Internet y como
hemos visto, estaba inventada bastante antes. La Web es uno de los muchos servicios que
proporciona Internet, aunque actualmente ha devenido en el principal y casi único para el
profano. Además, como la Web es, entre otras cosas, una "interfase" para utilizar la red (de
tremendo éxito), muchos de los servicios se han "maquillado de Web", adoptando formas
compatibles con los navegadores.

Por Web se pueden entender tres cosas distintas: el proyecto inicial del CERN, el conjunto
de protocolos desarrollados en el proyecto o el espacio de información formado por todos
los servidores interconectados (el denominado «hiperespacio»); cuando se habla de la Web
habitualmente se hace referencia a esto último.

Las ideas básicas de la Web son tres:

• La desaparición de la idea de un servidor único de información mantenido por un equipo

de profesionales dedicado. Cualquiera puede crear sus propios documentos y referenciar en
ellos a otros documentos. Así pues, no existe una autoridad central en la Web.

• La especificación de un mecanismo para localizar de forma unívoca documentos

distribuidos geográficamente. Cada documento tiene una dirección llamada Uniform
Resource Locator, URL. Esta dirección indica no sólo la localización del documento, sino
también el mecanismo para acceder a él (es decir, el protocolo, que en el caso de una
página web es el HTTP).

• La existencia de una interfaz de usuario uniforme que esconde los detalles de los formatos
y protocolos utilizados para la transferencia de la información, simplificando por tanto el
acceso a la misma. Los programas que utilizan estas interfaces son denominados
examinadores (browsers), visualízadores o, más comúnmente, navegadores.

El elemento básico de la Web es la página web, un documento que contiene enlaces de

hipertexto a otros documentos relacionados que pueden estar localizados en la propia
máquina o en máquinas remotas. De esta forma, siguiendo los enlaces se puede navegar por
la red visitando páginas ubicadas en distintos lugares como si formaran una unidad.

El protocolo de la Web especifica un formato para escribir los documentos que forman
parte de ella: es el Hypertext Markup Language (HTML). Sin embargo, también es posible
acceder a documentos de otros formatos a través de la interfaz web sin necesidad de
reescribirlos, gracias a las funcionalidades incorporadas por los navegadores.

La Web comenzó siendo un medio para el intercambio de información básicamente textual,

pero debido a su popularización ha ido incrementando su contenido y actualmente puede
utilizarse para transmitir cualquier tipo de medio, como gráficos, imágenes, audio, vídeo o
animaciones.
Se habla entonces de hipermedia, que es la ampliación del concepto de hipertexto con la
inclusión de cualquier tipo de medio (hipermedia = hípertexto + multimedia). En un
documento hipermedia no sólo hay que indicar los enlaces entre las partes del documento,
sino también las relaciones temporales entre ellas (sincronización).

Otro aspecto a tener en cuenta es el hecho de que los nuevos medios suelen dar lugar a
ficheros de gran tamaño (sobre todo en el caso de los medios continuos como el audio o el
vídeo), lo cual puede hacer muy costosa su transmisión a través de la red.

FUNCIONAMIENTO DE LA WEB

La Web funciona siguiendo el denominado modelo cliente-servidor, habitual en las aplicaciones

que funcionan en una red. Existe un servidor, que es quien presta el servicio, y un cliente, que es
quien lo recibe.

Cliente web

El cliente web es un programa con el que el usuario interacciona para solicitar a un servidor web el
envío de páginas de información. Estas páginas se transfieren mediante el protocolo HTTP.Las
páginas que se reciben son documentos de texto codificados en lenguaje HTML. El cliente web
debe interpretar estos documentos para mostrárselos al usuario en el formato adecuado.

Además, cuando lo que se recibe no es un documento de texto, sino un objeto multimedia (vídeo,
sonido, etc.) no reconocido por el cliente web, éste debe activar una aplicación externa capaz de
gestionarlo.Entre los clientes web (también conocidos como visualizadores o navegadores) más
usuales están el Netscape Navigator y el Microsoft Internet Explorer. La mayoría de ellos soportan
también otros protocolos, como el FTP (File TransferProtocol), para la transferencia de ficheros, y
el SMTP (Single Mali Transfer Protocol), para el envío y la recepción de correo electrónico. La
Figura mas abajo muestra una página web visualizada con el Internet Explorer.

Servidor web

El servidor web es un programa que está permanentemente escuchando ¡as peticiones de

conexión de los clientes mediante el protocolo HTTR
El servidor funciona de la siguiente manera: si encuentra en su sistema de ficheros el documento
HTML solicitado por el cliente, lo envía y cierra la conexión; en caso contrario, envía un código de
error que cierra la conexión. El servidor web también se ocupa de controlar los aspectos de
seguridad, comprobando si el usuario tiene acceso a los documentos.

El proceso completo, desde que el usuario solicita una página hasta que el cliente web
se la muestra con el formato adecuado, es el siguiente:

1. El usuario especifica en el cliente web la dirección (URL) de la página q desea

consultar.

2. El cliente establece la conexión con el servidor web.

3. El cliente solicita la página deseada.

4. El servidor busca la página que ha sido solicitada en su sistema de ficheros, Si

la encuentra, la envía al cliente; en caso contrario, devuelve un código] de error.

5. El cliente interpreta los códigos HTML y muestra la página al usuario.

6. Se cierra la conexión.

Es muy probable que la página solicitada no exista físicamente, sino que se cree en
el momento de su petición (por ejemplo, combinando una plantilla de documento con
los resultados de la consulta a una base de datos). En estos casos el servidor web cede
el control al denominado servidor de aplicaciones, que es quien se encarga de construir
la página. Una vez creada la pasa al servidor web, que a su vez la envía al cliente. El
esquema general de la transferencia de páginas web es pues el que se muestra en la
Figura siguiente.
 Esquena de transferencia

La conexión siempre se libera al terminar la transmisión de la página. Volviendo

sobre el modelo de las aplicaciones cliente-servidor, se puede decir que se sigue el
denominado modelo de transacciones: el cliente realiza una petición, el servidor la
atiende e inmediatamente se cierra la comunicación. Las transacciones son, pues,
independientes, y no se mantiene una memoria entre las sucesivas peticiones. Esto es
un grave inconveniente para muchas aplicaciones en las cuales esta memoria es
fundamental, como por ejemplo las operaciones de compra a través de la Web. No
obstante, existen mecanismos para resolver el problema, como el uso de cookies o de
bases de datos, y que se comentarán más adelante.

Otro aspecto importante es el hecho de que se establece una conexión impediente

para cada documento u objeto que se transmite. Es decir, si una página contiene, por
ejemplo, cuatro imágenes, entonces se establecen cinco conexiones independientes:
una para la página propiamente dicha y otras cuatro para las imágenes.

ALTERNATIVAS DE CREACION DE PAGINAS WEB

Existen diversos lenguajes de desarrollo para las páginas web entre estos están html editor,
dreamwever, flash, php….cada una con un solo objetivo crear web dinamicas e interactivas para la
satisfacción de los usuarios.

Seguramente muchos se estaran preguntando si vale la pena aprender HTML cuando hay
tantas herramientas disponibles para la creación de páginas Web. Se los conoce con el
nombre de editores WYSIWYG (pronúnciese "guisigüig") y responde a la siglas de las
palabras "What you see" (lo que ves en el programa) "is what you get" (es lo que obtenés
en el navegador).
A pesar del avance de estos programas, para todo aquel que quiera
edificar un buen sitio, vale la pena apredender HTML. Por varios motivos:
 Siempre es interesante saber que se está haciendo y, por sobre todas las cosas, ser
capaz de controlar el comportamiento de las páginas.
 Los navegadoresquizá no puedan soportar por completo una determinada página
creado con un editor y, en cambio, si una creada con HTML "puro".
 Si de verdad queremos saber cómo los usuarios visualizarán nuestros documentos y
cómo debemos de crearlos para no quedar atados a un navegador en concreto, hemos de
conocer HTML.

Otra pregunta fundamental que puede surgir es si deben utilizarse estas herramientas o si
se debe trabajar con un simple editor de textos. Para esta pregunta existen respuestas
para todos los gustos. Cualquiera que haya trabajado con un editor HTML, habrá
comprobado cómo puede ahorrarle buena parte del trabajo más pesado. También,
probablemente, haya tenido que hacer modificaciones en el código fuente. Nuestra
recomendación es que, si usan un editor, utilicen uno que permita un fácil acceso y
edición del codigoHTML.

Existen muchos y excelentes programas comerciales de este tipo, pero si

tu presupuesto es limitado o si tus intenciones no son ambiciosas en
exceso puedes utilizar alguno de los muchos programas shareware o
freeware que se ofrecen por Internet. Lo más recomendable para aprender el lenguaje
HTML es el uso de editores que permiten trabajar con el código. A continuación, te
mostramos una tabla con varios programas de edición:

Programa Descripción
Editor de HTML muy popular que soporta los últimos estándares y
extensiones del web: Microsoft Internet Explorer 4, Netscape
Communicator 4, WebTV, Dynamic HTML, Cascading Style Sheets, HTML
HotDog
3.2 y HTML 4.0. Incluye asistentes, consejos y tutoriales para un fácil
aprendizaje. Incluye diversos conectores que pueden ser descargados de
la Red y actualizados.
Herramineta para la edición de páginas web sencilla de usar. Incluye un
asistente para la creación de páginas, numerosos efectos de diseño y
HoTMetaLpro
herramientas de tratamiento de imágenes. Incluye la posibilidad de editar
el código fuente de las páginas.
Potente editor de HTML que incluye diseñadores y previsualizadores de
tablas, formularios, marcos y mapas, y prueba de páginas mediante
Netscape o Explorer. Ofrece la posibilidad de comprobar la ortografía de
HTMLLedPro
los documentos. Permite importar documentos en formato RTF (Rich Text
Format), abrir y guardar documentos remotos, y hacer búsquedas y
reemplazos globales.
Quizas el más difundido de los editores. Permite ver el codigo fuente de
las paginas, admite previsualizacion de tablas, formularios, marcos y
Microsoft
mapas, y prueba de páginas mediante Netscape o Explorer. mediante
FrontPage
Netscape o el Explorer. Incluye asistente y tutoriales; y permite abrir y
modificar documentos remotos.

HERRAMIENTAS DEL DISEÑO WEB

Fases: diseño y maquetación

 * Adobe Photoshop:Esta aplicación sólo está disponible en Windows, y es el más caro, aunque
es el más usado y gracias a ello dispone de una gran comunidad de usuarios con los que poder
contar ante cualquier problema. Con él crearemos el diseño, así como las imágenes que usemos
en la maquetación.

* GIMP: Es el equivalente de software libre más próximo a Photoshop. Al ser libre es posible
conseguirlo gratuitamente, y de hecho cualquier distribución GNU/Linux lo incluye. Al igual que en
Photoshop, con él podremos crear el diseño y las imágenes de la maquetación HTML. También
disponible en Windows

Fase: maquetación

* Inkscape: El equivalente en Windows es Adobe Fireworks. Es un excelente editor gráfico

vectorial con el que poder crear iconos, banners, y demás dibujos de forma muy fácil y sencilla,
incluso para aquellos que no tengan demasiados conocimientos en edición gráfica digital.

* Adobe Fireworks: El editor de gráficos vectoriales más fácil de usar que he tenido la
oportunidad de usar, aunque no lo eché de menos cuando descubrí Inkscape. Al igual que su
compañero Photoshop es muy caro, y más aún si tenemos una gran alternativa gratuita como es
Inkscape.

Fases: maquetación, programación cliente

* Dreamweaver, Aptana, Amaya: Estas herramientas las describí en mi anterior artículo sobre
los principales editores web del mercado, así que os remito a él para más información. Con ellos
crearemos el código HTML/CSS (maquetación), siendo Aptana la opción más profesional para la
programación cliente (Javascript).

Fase: programación servidor

* Zend Studio: Sin duda el mejor IDE existente en el mercado para desarrollo web con PHP. Es
comercial, aunque no demasiado caro teniendo en cuenta la excelente herramienta que es.
Además es posible descargarlo desde la web de Zend para probarlo durante 30 días.
 Con él crearemos fácilmente la aplicación web en PHP. Aunque podremos usar igualmente
cualquier editor. Una muy buena alternativa es Eclipse con el plugin PHP.

Otra aplicación muy útil que está muy ligada a Zend Studio es Zend Platform, un módulo para
Apache que permite depurar una web directamente en el navegador (Internet Explorer o Firefox),
además de otras funciones más complejas, como alertas configurables para que nos envíe un
email por cada error ocurrido en la web, o cuando un script sobrepase un tiempo determinado de
ejecución, por ejemplo.

Fase: prueba local

* Apache Instalar un servidor web Apache en la máquina donde desarrollamos es fundamental.

De esta manera haremos pruebas rápidamente: editamos un fichero PHP, vamos al navegador,
actualizamos, y vemos los cambios.

Fases: pruebas en local, depuración

* Firefox / Firebug / Web Developer Extension: Firefox es sin duda la mejor herramienta creada
en los últimos tiempos para los desarrolladores web, y con Firefox sus dos extensiones más útiles
para nuestra profesión: Firebug y Web Developer.

Con Firebug podremos depurar Javascript, editar HTML y CSS en la misma página para ver los
cambios en tiempo real, consultar los tiempos de carga de la página en conjunto, de las imágenes,
javascripts, hojas de estilo, etc, así como sus tamaños, etc. Y Web Developer nos ofrece
herramientas muy útiles como ver las cookies de la web, ocultar imágenes, cambiar el tamaño del
navegador a resoluciones estándar, etc.

Subir ficheros al servidor del hosting

Una vez hayamos concluido todas las fases anteriores, y nuestro proyecto esté listo, deberemos
subirlo al servidor del hosting.
La herramienta a utilizar dependerá de las opciones que nos ofrezca el hosting, que
desgraciadamente en la mayoría de los casos es solamente el antiguo FTP. En Dreamweaver y
Zend Studio tenemos un cliente FTP y SFTP (SSH), y la tarea consistirá simplemente en configurar
el FTP y copiar y pegar los directorios que queramos subir.

Confío en que esta guía sirva de ayuda a la hora de afrontar un desarrollo web. Hay que tener muy
en cuenta las fases de desarrollo y usar las herramientas adecuadas: la que nos resulte más fácil de
usar, la más económica, la que mejor conozcamos, etc.

Elementos de una página web

Una página web tiene contenido que puede ser visto o escuchado por el usuario final. Éstos
elementos incluyen, pero no exclusivamente:

• Texto. El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene
instaladas (a veces se utiliza una tecnología de fuentes incrustadas, con lo que vemos en el
monitor una fuente que realmente no poseemos, pero es poco frecuente.) El texto editable puede
marcarse con el ratón o el teclado y copiarse a otra aplicación, como el bloc de notas (muchos de
los elementos textuales de las páginas, en especial los títulos, botones de navegación, etc. son
realmente gráficos, y su texto no es editable.)

• Imágenes. Son ficheros enlazados desde el fichero de la página propiamente dicho. Se puede
hablar de tres formatos casi exclusivamente: GIF, JPG y PNG. Hablamos en detalle de este tema en
la sección de Gráficos para la Web.

• Audio, generalmente en MIDI, WAV y MP3.

• Adobe Flash.

• Adobe Shockwave.

• Gráficas Vectoriales (SVG - Scalable Vector Graphics).

• Hipervínculos, Vínculos y Marcadores.

La página web también puede traer contenido que es interpretado de forma diferente
dependiendo del navegador y generalmente no es mostrado al usuario final. Éstos elementos
incluyen, pero no exclusivamente:
• Scripts, generalmente Java Script.

• Meta tags.

• Hojas de Estilo (CSS - Cascading Style Sheets).

• Plantillas de diseño web

Aplicaciones de Internet

Las Aplicaciones de Internet, consisten en el aprovechamiento de la experiencia del usuario en

herramientas y funciones de escritorio tan naturales como copiar, cortar y pegar, redimensionar
columnas, y ordenar etc., con el alcance y la flexibilidad de presentación y despliegue que ofrecen
las aplicaciones o páginas Web junto con lo mejor de la multimedia (voz, vídeo, etc.).

e puede decir que las RIA son la nueva generación de las aplicaciones y es una tendencia ya
impuesta por empresas como Macromedia, Sun o Microsoft que se encuentran desarrollando
recursos para hacer de este tipo de aplicaciones una realidad. Estas aplicaciones están basadas en
plataformas J2EE o .NET, con un front-end Flash y utilizan una arquitectura Cliente/Servidor
asíncrona, segura y escalable, junto con una interfaz de usuario Web.

Entre los beneficios principales de aplicaciones RIA tenemos un mejoramiento importante en la

experiencia visual, que hacen del uso de la aplicación algo muy sencillo, ofrece mejoras en la
conectividad y despliegue instantáneo de la aplicación, agilizando su acceso, garantizan la
desvinculación de la capa de presentación es decir acceso a la aplicación desde cualquier
computador en cualquier lugar del mundo.

La Pagina Web: es una fuente de información adaptada para la World Wide Web (WWW),pueden
ser cargadas de un ordenador o computador local, llamado Servidor Web, el cual servira de apoyo
para los estudiantes.

Una página Web está compuesta por uno o varios documentos html relacionados entre sí
mediante hipervínculos (enlaces).

Atributos de una pagina web

Atributos de una pagina web

Las páginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la
página muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o
de los enlaces. Estos atributos se definen en la etiqueta <body> y, como decíamos son generales a
toda la página.

Lo mejor para explicar su funcionamiento es verlos uno por uno.

Atributos para fondos

bgcolor: especificamos un color de fondo para la página.Hemos aprendido a construir cualquier

color, con su nombre o su valor RGB. El color de fondo que podemos asignar con bgcolor es un
color plano, es decir el mismo para toda la superficie del navegador.

background: sirve para indicar la colocación de una imagen como fondo de la página. La imagen se
coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del
fondo de la página. En capítulos más adelante veremos como se insertan imágenes con HTML y los
tipos de imágenes que se pueden utilizar.

Ejemplo de fondo

Vamos a colocar esta imagen como fondo en la página.

La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la

página. En este caso se colocaría la siguiente etiqueta <body>

<body background="fondo.jpg">

Consejo: siempre que coloquemos una imagen de fondo, debemos poner también un color de
fondo cercano al color de la imagen.

Esto se debe a que, al colocar una imagen de fondo, el texto de la página debemos colocarlo en un
color que contraste suficientemente con dicho fondo. Si el visitante no puede ver el fondo por
cualquier cuestión (Por ejemplo tener deshabilitada la carga de imágenes) puede que el texto no
contraste lo suficiente con el color de fondo por defecto de la web.

Creo que lo mejor será poner un ejemplo. Si la imagen de fondo es oscura, tendremos que poner
un texto claro para que se pueda leer. Si el visitante que accede a la página no ve la imagen de
fondo, le saldrá el fondo por defecto, que generalmente es blanco, de modo que al tener un texto
con color claro sobre un fondo blanco, nos pasará que no podremos leer el texto
convenientemente.

Ocurre parecido cuando se está cargando la página. Si todavía no ha llegado a nuestro sistema la
imagen de fondo, se verá el fondo que hayamos seleccionado con bgcolor y es interesante que sea
parecido al color de la imagen para que se pueda leer el texto mientras se carga la imagen de
fondo.

Color del texto

text: este atributo sirve para asignar el color del texto de la página. Por defecto es el negro.

Además del color del texto, tenemos tres atributos para asignar el color de los enlaces de la
página. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la página para
que los usuarios puedan identificarlos fácilmente. Para ello suelen aparecer subrayados y con un
color más vivo que el texto. Los tres atributos son los siguientes:

link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito)

vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitado. Es el color
que tendrán los enlaces que ya hemos visitado. Por defecto su color es morado. Este color debería
ser un poco menos vivo que el color de los enlaces normales.

alink: es el color de los enlaces activos. Un enlace está activo en el preciso instante que se pulsa. A
veces es difícil darse cuenta cuando un enlace está activo porque en el momento en el que se
activa es porque lo estamos pulsando y en ese caso el navegador abandonará la página
rápidamente y no podremos ver el enlace activo más que por unos instantes mínimos.

Ejemplo de color del texto

Vamos a ver una página donde el color de fondo sea negro, y los colores del texto y los enlaces
sean claros. Pondremos el color de texto balnco y los enlaces amarillos, más resaltados los que no
estén visitados y menos resaltados lo que ya están visitados. Para ello escribiríamos la etiqueta
body así:
<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" vlink="ffff00">

Márgenes

Con otros atributos de la etiqueta <body> se pueden asignan espacios de margen en las páginas, lo
que es muy útil para eliminar los márgenes en blanco que aparecen a los lados, arriba y debajo de
la página. Estos atributos son distintos para Internet Explorer y para Netscape Navigator, por lo
que debemos utilizarlos todos si queremos que todos los navegadores los interpreten
perfectamente.

leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer.

topmargin: para indicar el margen arriba y debajo de la página. Para iexplorer.

marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)

marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)

Tenemos un artículo sobre la utilización de estos atributos para hacer diseños avanzados con
tablas en distintas definiciones de pantalla, que puede ser interesante de leer.

Un ejemplo de página sin margen es la propia página de DesarrolloWeb.com, que estás visitando
actualmente. (Por lo menos a la hora de escribir este artículo) Además, vamos a ver otra página sin
márgenes, por si alguien necesita ver el ejemplo en estas líneas.

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">

<table width=100% bgcolor=ff6666><tr><td>

<h1>Hola amigos</h1>
<br>

<br>

Gracias por visitarme!

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

</body>

Esta página tiene el fondo blanco y dentro una tabla con el fondo rojo. En la página podremos ver
que la tabla ocupa el espacio en la página sin dejar sitio para ningún tipo de margen.

Atributo ACTION: en los formularios basados en CGI es siempre el nombre de un programa CGI
situado en el servidor Web y normalmente en el directorio cgi-bin.

Atributo ENCTYPE: la codificación por defecto de todos los formularios es, según el esquema
MIME, application/x-www-form-urlencoded. Un conjunto de datos de formulario se representa
del siguiente modo:

* Los nombres de campos y los valores son preprocesados: los espacios son reemplazados por el
símbolo +, y los caracteres son sustituidos como en los URL, es decir, los caracteres no
alfanuméricos se representan con un signo de porcentaje y dos dígitos hexadecimales que indican
el código ASCII del carácter (%HH). Los saltos de línea (empleados en campos de múltiples líneas),
se representan con pares CRLF (sustituidos por %0D%0A).

* Los campos se listan en el orden en el que aparecen en el documento, con los nombres
separados del valor por el símbolo = y los pares separados entre sí por el símbolo &. Los campos
con valores nulos pueden ser omitidos, en particular, los campos no seleccionados en entradas
booleanas no deben aparecer en los datos, pero los campos ocultos que tengan el atributo VALUE
sí.

Atributo METHOD: el método de consulta depende de los efectos que el formulario tenga es decir,
si el envío va a producir cambios en cualquier documento o programa que no sea nuestro visor

Atributos para imagenes en la pagina web

El uso de imágenes también tiene que ser realizado con cuidado porque aumentan el tiempo de
carga de la página, lo que puede ser de un efecto nefasto si nuestro visitante no tiene una buena
conexión o si es un poco impaciente. Por ello es recomendable siempre optimizar las imágenes
para Internet, haciendo que su tamaño en bytes sea lo mínimo posible, para facilitar la descarga,
pero sin que ello comprometa mucho su calidad.

En este capitulo no explicaremos como crear ni tratar las imágenes, únicamente diremos que para
ello se utilizan aplicaciones como Paint Shop Pro, Photoshop o Gimp. Tampoco explicaremos las
particularidades de cada tipo de archivo: GIF, JPG o PNG y la forma de optimizar nuestras
imágenes. Un capitulo posterior al respecto será dedicado a este menester: Formatos gráficos
para páginas web.

Las imágenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) o JPG
(para fotos). Estos archivos los podemos obtener desde diversas vías, como por ejemplo nuestra
cámara digital, aunque también pueden ser creados por nosotros mismos con algún editor gráfico
o pueden ser descargados gratuitamente en sitios web especializados.

Así pues, en estos primeros capítulos nos limitaremos a explicar como insertar y alinear
debidamente en nuestra página una imagen ya creada.

La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta etiqueta no posee su
cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de nuestro
archivo gráfico mediante el atributo src (source).

La sintaxis queda entonces de la siguiente forma:

<img src="camino hacia el archivo">

Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Las reglas
siguen siendo las mismas, lo único que cambia es que, en lugar de una página destino, el destino
es un archivo gráfico.

Aparte de este atributo, indispensable obviamente para la visualización de la imagen, la etiqueta

<img> nos propone otra serie de atributos de mayor o menor utilidad, que listamos a
continuación:

Atributo alt Dentro de las comillas de este atributo colocaremos una brevísima descripción de la
imagen. Esta etiqueta no es indispensable pero presenta varias utilidades.

Primeramente, durante el proceso de carga de la página, cuando la imagen no ha sido todavía

cargada, el navegador mostrara esta descripción, con lo que el navegante se puede hacer una idea
de lo que va en ese lugar.
Esto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por la red con una
opción del navegador que desactiva el muestreo de imágenes, con lo que tales personas podrán
siempre saber de qué se trata el gráfico y eventualmente cambiar a modo con imágenes para
visualizarla.

Además, determinadas aplicaciones para discapacitados o teléfonos vocales que no muestran

imágenes ofrecen la posibilidad de leerlas por lo que nunca esta de más pensar en estos
colectivos.

En general podemos considerar como aconsejable el uso de este atributo salvo para imágenes de
poca importancia y absolutamente indispensable si la imagen en cuestión sirve de enlace.

Atributos height y width Definen la altura y anchura respectivamente de la imagen en píxeles.

Todos los archivos gráficos poseen unas dimensiones de ancho y alto. Estas dimensiones pueden
obtenerse a partir del propio diseñador grafico o bien haciendo clic con el botón derecho sobre la
imagen vista por el navegador para luego elegir propiedades sobre el menú que se despliega.

El hecho de explicitar en nuestro código las dimensiones de nuestras imágenes ayuda al navegador
a confeccionar la página de la forma que nosotros deseamos antes incluso de que las imágenes
hayan sido descargadas.

Así, si las dimensiones de las imágenes han sido proporcionadas, durante el proceso de carga, el
navegador reservara el espacio correspondiente a cada imagen creando una maquetación
correcta. El usuario podrá comenzar a leer tranquilamente el texto sin que este se mueva de un
lado a otro cada vez que una imagen se cargue.

Además de esta utilidad, el alterar los valores de estos dos atributos, es una forma inmediata de
redimensionar nuestra imagen. Este tipo de utilidad no es aconsejable dado que, si lo que
pretendemos es aumentar el tamaño, la perdida de calidad de la imagen será muy sensible.
Inversamente, si deseamos disminuir su tamaño, estaremos usando un archivo más grande de lo
necesario para la imagen que estamos mostrando con lo que aumentamos el tiempo de descarga
de nuestro documento innecesariamente.

Es importante hacer hincapié en este punto ya que muchos debutantes tienen esa mala
costumbre de crear gráficos pequeños redimensionando la imagen por medio de estos atributos a
partir de archivos de tamaño descomunal. Hay que pensar que el tamaño de una imagen con unas
dimensiones de la mitad no se reduce a la mitad, sino que resulta ser aproximadamente 4 veces
inferior.

Atributo border
Definen el tamaño en píxeles del cuadro que rodea la imagen.

De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es particularmente útil cuando
deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. En dicho caso
tendremos que especificar border="0".

Atributos vspace y hspace

Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros
elementos que la rodean, como texto, otras imágenes, etc.

Atributo lowsrc

Con este atributo podemos indicar un archivo de la imagen de baja resolución. Cuando el
navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de
baja resolución (que ocupa muy poco y que se transfiere muy rápido). Posteriormente descarga y
muestra la imagen de resolución adecuada (señalada con el atributo src, que se supone que
ocupará más y será más lenta de transferir).

Este atributo está en desuso, aunque supone una ventaja considerable para que la descarga inicial
de la web se realice más rápido y que un visitante pueda ver una muestra de la imagen mientras se
descarga la imagen real.

Truco: Utilizar imagenes como enlaces

Ni que decir tiene que una imagen, lo mismo que un texto, puede servir de enlace. Vista la
estructura de los enlaces podemos muy fácilmente adivinar el tipo de código necesario:

<a href="archivo.html"><img src="imagen.gif"></a>

EJEMPLOS DE IMAGEN

Esta imagen tiene los atributos: align=left ,

hspace=10 , width=250 , hight=170 , border=1 ,
alt="Mono" y como quiero que después de estos
comentarios el texto salte debajo de la imagen
escribo:
<br clear=all>
Formatos de imágenes

Existen muchos formatos para guardar imágenes que tienen diferentes extensiones bmp, tiff,
dib, wmf, etc. En internet se usan básicamente dos: GIF y JPG. Ambos formatos comprimen las
imágenes para reducir su tamaño, de este modo se asegura una transferencia más rápida por la
red. Esto es importante, ya que si la imagen se tarda en cargar, es posible que el visitante de
nuestra pàgina la abandone por ello. En los casos en que es necesario poner una imagen con una
resolución elevada para ver los detalles, es mejor colocar una imagen pequeña y usarla como
enlace que nos conduzca a la imagen final. De ese modo el visitante ya sabe la imagen que va a
cargar y puede ser más paciente.

Esto se hace como vimos en la página de enlaces

<a href="URL de la imagen final"><img src="URL de la imagen que se ve con la página"></a>

Formato GIF

El formato GIF usa 256 colores y se emplea sobretodo con imágenes pequeñas como iconos. No
se suele usar con fotos porque da más calidad el formato JPG. Aunque el formato GIF no tiene
pérdidas de calidad en la compresión, es decir muestra la imagen tal como es en formato bmp por
ejemplo, pero reduciendo su tamaño considerablemente.

Tiene dos características que lo hacen muy atractivo para el diseño de las páginas Web.

Una de ellas, es que uno de sus colores se puede hacer transparente (en el subformato Gif89a),
no mostrándose en la pantalla. Si se elige el color que bordea el motivo principal da la sensación
de que la imagen tiene la forma de ese motivo ( en realidad todas las imágenes son rectangulares).
Puedes ver ese efecto en las pequeñas imágenes que adornan este manual.

Para hacer transparente un color hay que usar editores de imágenes, como por ejemplo:

LView en http://www.lview.com (Shareware, 21 días de prueba, 1.36 Mb)

Paint Shop Pro en http://www.jasc.com (Shareware, 30 días, 3.1 Mb)

o el más profesional Adobe Photoshop

 Otra característica, es que se pueden ensamblar varias imágenes, que se muestran como si
ALIGN=RIGTH , WIDTH=32 , HEIGHT=32fuera una sola, de modo que da la sensación de
movimiento. Estas imágenes se llaman Gifs animados y como ves también se pueden hacer
transparentes. Hay programas específicos para hacer Gifs animados, algunos son:

GIF Construction Set en http://www.mindworkshop.com/alchemy/gifcon.html (1.46 Mb,

Shareware)

WWW Gif Animator en http://stud1.tuwien.ac.at/~e8925005/ (277 Kb, Shareware)

También puedes encontrar imágenes ya creadas de todos los tipos en algunas páginas de
Internet, que son como bibliotecas de imágenes. Puedes mirar en

Icon Bazaar (http://www.iconbazaar.com/)

Rose's Backgrounds Archive (http://www.wanderers2.com/rose/animate.html)

Free graphics wonderland (http://www.jetlink.net/~gini/)

Rainfrog's Web Art (http://www.rainfrog.com/webart)

Fairy's Free Icons (http://www.dewa.com/freeicon)

GIF Animation Designs (http://www.webpromotion.com/stock.html

Icon Gallery (http://cool.deu.net/galerie/icon/menue_noframe.htm)

Over the Rainbow (http://www.geocities.com/SiliconValley/Heights/1272/rainbow.html)

Formato JPG

El formato JPG usa 16.7 millones de colores, por lo que se emplea con imágenes de alta
resolución. Con este formato se obtiene un grado de compresión más alto que con el GIF y además
ésta se puede regular: Cuanto mayor sea la compresión, más pérdida de calidad, respecto de la
imagen original. De hecho cada vez que abrimos y guardamos de nuevo una imagen en formato
JPG, distorsionamos un poco la imagen.
 Todas las fotos de buena calidad usan este formato.

Imágenes entrelazadas (GIF) y progresivas (JPG)

Cuando se carga una imagen normal en el navegador, éste va mostrándola de arriba a abajo . Se
puede conseguir que se visualize por capas. En la primera capa vemos la imagen de un modo
borroso y luego se va haciendo cada vez más nítida. Esto tiene la ventaja de que se da uno cuenta
enseguida, del tema de la imagen y si no es lo que buscas, puedes interrumpir la descarga. Se
puede conseguir en los dos formatos y es una característica muy conveniente en las imágenes
web.

OPTIMIZACION DE LAS IMÁGENES EN LA WEB

Interfaz gráfica

Frente a la limpieza de ventanas de DeBabelizer, que sólo observa una apertura con la ventana de
herramientas principales, Fireworks e ImageReady nos ofrecen una interfaz más cercana a las ya
conocidas de otras aplicaciones de las respectivas compañías: FreeHand y Photoshop. Al menos
unen lo mejor de cada una de ellas.

En ImageReady destaca la facilidad de poder recuperar las últimas imágenes tratadas desde la
función Recent Files, ubicada en el menú File, algo que no contemplan las otras herramientas aquí
comentadas.

Por su parte, el manual que incluye Fireworks facilita de una manera más clara que la ofrecida en
las otras aplicaciones comentadas una descripción de las distintas ventanas que despliega este
programa, especificando aquellas que sólo son visibles desde Macintosh o la versión disponible
para Windows.

La ventana de herramientas principales de Fireworks observa el despliegue de sus opciones en

siete de ellas, con lo que queda ampliada a 32 posibilidades de trabajo desde este mismo lugar, lo
cual facilita bastante el trabajo por no tener que estar buscando dentro de las opciones de menú
aquello que permita hacer lo que deseamos realizar. También ofrece la posibilidad de manipular la
presentación en pantalla de algunas de sus ventanas de trabajo, como la de la paleta de colores.

Frente a Fireworks e ImageReady, DeBabelizer ofrece una interfaz más complicada de entender a
primera vista. Una vez que se comprende su manejo resulta potente pero continúa siendo poco
amigable. Frente a esta interfaz juegan con ventaja las otras dos herramientas ya que emplean,
como se ha indicado anteriormente, referencias de otras ya existentes en Photoshop y FreeHand,
resultando más habituales para los usuarios.

En los tres productos la imagen a tratar aparece en una ventana diseñada específicamente para
ella. La de ImageReady resulta la más completa, ya que desde ella podemos ver el resultado de la
imagen optimizada sin necesidad de abrir otras ventanas de diálogo como en Fireworks o
DeBabelizer. Sin embargo, en este último, es destacable la facilidad ofrecida a la hora de
ofrecernos datos relativos a la imagen desde su misma ventana de trabajo frente a las opciones
dadas por Fireworks o ImageReady. Además, siempre que deseemos tener más información sobre
la imagen se puede acudir a la función Properties, ubicada bajo el menú View.

Frente a las otras dos opciones, DeBabelizer indica presencialmente, y de una manera destacada,
si la imagen lleva asociada una paleta, ya que esta aparecerá bajo la ventana antes indicada por
omisión. Esta paleta se sitúa originariamente en la base de la ventana que contiene la imagen,
aunque es posible moverla y así adaptarla mejor a las preferencias de cada usuario.

Abrir e importar una imagen

ImageReady es el producto que menos formatos soporta a la hora de poder abrir archivos gráficos
desde él. Además, estos formatos han de estar en mapa de bits. Lo que resulta de agradecer es
que en ellos respeta las capas y canales que pueda incluir el archivo original a tratar. Sobre el
tamaño máximo de píxeles que soporta no hay ninguna especificación por parte del fabricante.

Por el contrario, Fireworks sí especifica que admite abrir una imagen de 6.000 x 6.000 píxeles
como máximo; además de ofrecer la posibilidad de abrir imágenes tanto en mapa de bits como
vectoriales sin necesidad de ningún tipo de conversión previa y respetando las indicaciones de
canales y capas que puedan tener en su procedencia (permite importar imágenes desde
programas como FreeHand 7.0 y superiores, también desde las generadas mediante Photoshop e
Illustrator).

Por otra parte, al igual que ImageReady observa las especificaciones más usadas de Photoshop,
Fireworks hace lo propio con FreeHand. Por ello, los usuarios habituados a manejar estas
aplicaciones de composición y retoque gráfico, tendrán una adaptación muy rápida al manejo de
las herramientas equivalentes de cada fabricante.

No obstante, DeBabelizer es el mejor en lo que a la importación de imágenes se refiere. Abre la

mayoría de ellas y si ve que no es un formato reconocido por él en un primer momento (de entre
el vasto soporte de archivos gráficos), ofrece la posibilidad de intentar abrirlo usando otras
opciones (esta característica es accesible a través de la función Reader, ubicada en el apartado
Preferences dentro del menú File). También permite consultar datos sobre la imagen antes de ser
abierta; desde el formato al número de imágenes que la componen, en el caso de los archivos que
se correspondan con una película o GIF animados. Por contra, DeBabelizer no mantiene las capas,
canales y demás efectos con los que pueda contar la imagen original.
Frente a este cúmulo de ventajas, el usuario debe ser consciente de la imposibilidad de crear una
imagen directamente desde DeBabelizer. Este es un programa de optimización de imágenes, no de
creación. Incluso sus capacidades destinadas a efectos propios de la Web son inferiores frente a
las otras dos opciones.

Exportar la imagen resultante

En formatos destinados a grabar o exportar la imagen resultante, el grado de posibilidades es

parejo a los descritos en el anterior punto. DeBabelizer contempla en este apartado también
muchas más opciones que Fireworks y este último destaca sobre ImageReady. No obstante, ha de
tenerse en cuenta que todos ellos contemplan los formatos JPEG y GIF como principales formatos
de archivo para la publicación de gráficos en páginas web.

Una de las funciones más potentes de ImageReady es la que permite ver cómo será la imagen al
visualizarla sobre entornos tanto Macintosh como Windows. También es posible asignar el
número de colores a los que deseemos convertir la imagen (2, 4, 8, 16, 32, 64, 128, 256 u otros).
Adicionalmente, permite asignar transparencia sobre un color deseado, en el caso de que el
formato de salida sea GIF. Todo ello antes de decidirnos a grabar o exportar la imagen definitiva.
Por si esto no fuese suficiente, mediante el atajo de teclado Comando-Opción+P lanza el
navegador que el usuario haya preseleccionado en las preferencias de la aplicación. Al seleccionar
la función Preview in, que se encuentra en el menú File, el usuario podrá ver la imagen editada en
el navegador; teniendo así la certeza de comprobar el resultado tal y como lo vería el usuario final.

La optimización obtenida siempre puede ser mejorada al guardarse la imagen original de una
manera automática bajo la solapa “original”, que también está dispuesta en la ventana de trabajo.

Adicionalmente, ImageReady también consiente introducir datos de Copyright (marca de agua) en

la imagen resultante de la edición. El único problema que presenta en este sentido es que el
tiempo de bajada previsto es mayor que si no se usa dicha opción (el triple en la prueba realizada).

DeBabelizer admite grabar en los mismos formatos en los que puede abrir la imagen y exportarla
pudiendo seleccionar el usuario qué partes de ellas desea conservar, ya sean scripts, paletas, listas
de trabajo o catálogos de estilo asociados a la imagen.

Módulos adicionales

Al igual que ImageReady y Fireworks, DeBabelizer acepta todos los módulos de Adobe Photoshop
(a partir de la versión 2.0). Para ello sólo hay que indicarle, desde el menú de Preferencias, la ruta
en la que está ubicada la carpeta que contiene los módulos a utilizar por la aplicación. Esta es la
forma para que las tres herramientas consigan incrementar las posibilidades de edición y
aplicación de efectos a las imágenes con las que se esté trabajando.
Macros

ImageReady permite automatizar una serie de tareas. Incluso las ejerce sobre los contenidos
completos de aquella carpeta que le asigne el usuario. La manera de crear este tipo de macros es
similar a la que ya se aplica en Photoshop 4.0. Por su parte, DeBabelizer también admite el uso de
macros, aunque en este caso la construcción se base en un lenguaje de instrucciones bastante
completo (aunque también es posible grabar acciones realizadas por el usuario). Frente a estos
dos, Fireworks no contempla el uso de las macros de una forma clara.

Optimización del color

La optimización del color es uno de los apartados de mayor relevancia para cualquier usuario que
vaya a destinar sus imágenes a la edición en páginas web. Del proceso seguido y la herramienta
empleada dependerá la calidad y aproximación a los resultados buscados. En este apartado
echaremos un vistazo a las funciones encontradas tanto en DeBabelizer como en ImageReady y
Fireworks para esta tarea.

El software ImageReady elimina de la paleta asociada al archivo los colores no usados, con lo que
optimiza el peso total del archivo. También puede bloquear colores para que no sufran grandes
cambios en el proceso de compresión de la imagen. Adicionalmente, avisa al usuario en el caso de
que se use un color que no pertenezca a la paleta segura para la Web, aunque continúe
permitiendo el uso de éstos, aunque no es recomendable.

Si bien las posibles conversiones de una paleta a otra son más sencillas de realizar y previsualizar
con DeBabelizer que con ImageReady, frente a esto necesita, como contrapartida, tener asociada
a la imagen una paleta de color propia; es decir, la imagen debe estar grabada en algún formato
que haya ajustado la paleta para poder realizar este proceso (GIF, JPEG, etc.). ImageReady no tiene
esto en cuenta y puede manipular la paleta de cualquier imagen. Fireworks, por su lado, destaca
menos en estas posibilidades, aunque no por ello desmerece en los resultados logrados.

Con respecto a ImageReady hay que tener cuidado con las posibilidades ofrecidas desde la opción
Optimize (ubicada en la parte superior de la misma ventana de la imagen) ya que allí el software
ofrecerá el resultado conseguido por los datos que le hayamos asignado desde la ventana lateral
denominada también con el nombre Optimize. Estos son realmente buenos dentro del software,
aunque tras observarlo sobre Netscape Communicator 4.0 la imagen pierde algo de calidad, sobre
todo cuando se compara a 256 colores.

Textos sobre la imagen

ImageReady permite escribir textos sobre la imagen, pudiendo modificar la fuente incluso una vez
se haya confirmado su inclusión al pulsar sobre el botón OK del cuadro de texto. Para conseguirlo
sólo hemos de situar el ratón sobre el texto que queramos modificar y hacer clic sobre él. Cada vez
que escribamos un texto independiente ImageReady creará un canal nuevo. No hace falta
seleccionar por nosotros mismos el canal donde se encuentra el texto que deseamos modificar,
basta con seleccionar el texto directamente en la pantalla de trabajo y el software se encarga del
resto. Un aspecto que debe tenerse en cuenta es que ImageReady no permite el cambio de color
en las distintas palabras, o letras, dentro de un mismo texto.

Por su parte, Fireworks permite cambiar la fuente en un mismo texto, lo cual es una mejora con
respecto a ImageReady. También permite adaptar un texto a una forma previa, algo que ya sucede
en FreeHand y que no acepta ImageReady. DeBabelizer, por su parte, no da grandes posibilidades
a los textos que queramos introducir y es el peor entre los tres en este apartado.

Cambio de escala

DeBabelizer es quizá uno de los mejores productos con los que nos hemos encontrado a la hora de
realizar cambios de escala y resolución de la imagen a tratar. El sistema de compresión que utiliza
es bastante bueno y sus resultados destacan frente a los dados por Fireworks e ImageReady.

Imágenes animadas

DeBabelizer admite formatos propios de vídeo digital y facilita su manipulación buscando

optimizar fotograma por fotograma. Sobre el formato QuickTime observa algunas consideraciones
específicas ya que, entre otras cosas, no puede manipular las pistas de sonido de estas películas.
También puede dar problemas al usar una paleta distinta a la de QuickTime.

En DeBabelizer el mejor método es usar las funciones de BatchList o Batch Automation, y se han
de considerar aspectos tales como que los fotogramas de una misma animación han de tener el
mismo tamaño y misma profundidad de color (color depth); también se pueden utilizar varias
paletas para hacer una animación. Sin embargo esto es desaconsejable en vista de los resultados
que se consiguen. Decir que este sistema es más complicado que el ofrecido por Fireworks e
ImageReady, aunque ofrece la posibilidad de hacerlo en más formatos que estos otros dos
productos.

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos
contenidos.
En un principio nos podría parecer que las tablas son raramente útiles y que pueden ser utilizadas
principalmente para listar datos como agendas, resultados y otros datos de una forma organizada.
Nada más lejos de la realidad.

Hoy, gran parte de los diseñadores de páginas basan su maquetación en este tipo de artilugios. En
efecto, una tabla nos permite organizar y distribuir los espacios de la manera más optima. Nos
puede ayudar a generar texto en columnas como los periódicos, prefijar los tamaños ocupados por
distintas secciones de la página o poner de una manera sencilla un pie de foto a una imagen.

Puede que en un principio nos resulte un poco complicado trabajar con estas estructuras pero, si
deseamos crear una página de calidad, tarde o temprano tendremos que vérnoslas con ellas y nos
daremos cuenta de las posibilidades nos ofrecen.

Para empezar, nada más sencillo que por el principio: las tablas son definidas por las etiquetas
<table> y </table>.

Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imágenes que darán
forma y contenido a la tabla.

Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida por
otra etiqueta y su cierre: <tr> y </tr>

Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida
por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será donde coloquemos nuestro
contenido.

Aquí tenéis un ejemplo de estructura de tabla:

<table>

<tr>
<td>Celda 1, linea 1</td>

<td> Celda 2, linea 1</td>

</tr>

<tr>

<td> Celda 1, linea 2</td>

<td> Celda 2, linea 2</td>

</tr>

</table>

El resultado:

Celda 1, linea 1 Celda 2, linea 1

Celda 1, linea 2 Celda 2, linea 2

Nota: Hasta aquí hemos visto todas las etiquetas que necesitamos conocer para crear tablas.
Existen otras etiquetas, pero lo que podemos conseguir con éllas se puede conseguir también
usando las que hemos visto.

Por poner un ejemplo, señalamos la etiqueta <th>, que sirve para crear una celda cuyo contenido
esté formatedo como un título o cabecera de la tabla. En la práctica, lo que hace es poner en
negrita y centrado el contenido de esa celda, lo que se puede conseguir aplicando las
correspondientes etiquetas dentro de la celda. Así:

<td align="center"><b>contenido de la celda</b></td>.

A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud cuando les incorporamos
toda una batería de atributos aplicados sobre cada tipo de etiquetas que las componen. A lo largo
de los siguientes capítulos nos adentraremos en el estudio de estos atributos de manera a
proporcionaros los útiles indispensables para una buena puesta en página.