Guia de Redes

Diseo y Creacin de
Pginas Web
Aplicado al Sector
Turstico
por
Rosana Montes
http://lsi.ugr.es/rosana
Material de teora y prcticas de la asignatura
Informtica de Gestin II
Diplomatura de Turismo
Universidad de Granada
Attribution-NonCommercial-ShareAlike
CC BY-NC-SA
This license lets others remix, tweak, and build upon your work non-
commercially, as long as they credit you and license their new creations
under the identical terms.
Editorial copicentro , Gr-676/2010

ISBN: 84-927574-88-7
Granada, 2010
ndice de Contenidos
Tema I. Internet y sus ventajas para el sector turstico.............................................. 7
Internet es ............................................................................................................................................... 7
Clasificacin de las redes segn el mbito fsico......................................................................................9
Caractersticas tcnicas .....................................................................................................................................10
Familia de protocolos TCP/IP .........................................................................................................................13
Arquitectura Cliente / Servidor ......................................................................................................................14
El Servicio WWW .................................................................................................................................................15
Servicios y guas de informacin al turista................................................................................... 17
Bsqueda de informacin y reservas ............................................................................................. 22
Internet desde el punto de vista de las agencias de viajes y empresas tursticas ........ 26
Caractersticas del Comercio Electrnico...................................................................................................27
Tema II. Diseo de sitios Web tursticos...................................................................30

Recomendaciones ................................................................................................................................. 30
Pasos a realizar ....................................................................................................................................... 36
Caractersticas de un buen sitio web.............................................................................................. 42
Elementos de un sitio web ................................................................................................................. 48
Herramientas para la elaboracin de una Web.......................................................................... 52
Publicidad y promocin en Internet ............................................................................................... 55

Posicionamiento de nuestras pginas en buscadores..........................................................................57
Recomendaciones personales........................................................................................................................58
Noticias en prensa escrita................................................................................................................................58
Anuncios en la red ..............................................................................................................................................58
Imagen de marca de Internet.........................................................................................................................59
Tema III. Tecnologas para la creacin e implantacin de sitios Web.............60

El lenguaje HTML ................................................................................................................................... 61
Gua de referencia ...............................................................................................................................................65
Estructura de un documento HTML.............................................................................................................66
Terminologa .........................................................................................................................................................68
Elementos bsicos...............................................................................................................................................70
Estilos y formato..................................................................................................................................................73
Caracteres Especiales.........................................................................................................................................81
Listas de numeracin .........................................................................................................................................84
Imgenes ................................................................................................................................................................85
Enlaces .....................................................................................................................................................................87
Tablas .......................................................................................................................................................................92
Meta-etiquetas .....................................................................................................................................................97
Estilos con CSS......................................................................................................................................................98
Mapas de imagen............................................................................................................................................. 103
Formularios ......................................................................................................................................................... 104
Marcos .................................................................................................................................................................. 108
Enlaces avanzado ............................................................................................................................................. 110
Tecnologas y mtodos para dotar de interactividad y elementos multimedia a una

pagina Web............................................................................................................................................112
Lenguaje HTML y su evolucin a XML ..................................................................................................... 114
Tema IV. Comercio electrnico................................................................................... 116

Nuevas oportunidades de negocio...............................................................................................116
Intercambio Electrnico de Datos (EDI) ......................................................................................121
Modalidades de pago en Internet.................................................................................................122
Seguridad en las transacciones electrnicas.............................................................................125

Seguridad en la web........................................................................................................................................ 125
Cortafuegos ........................................................................................................................................................ 127
Seguridad en la transaccin......................................................................................................................... 129
Mtodos de encriptacin.............................................................................................................................. 130
Autentificacin................................................................................................................................................... 131
Protocolos seguros.......................................................................................................................................... 133
Nuevas tecnologas para el comercio..........................................................................................136

XML y el comercio electrnico.................................................................................................................... 136
Data Mining, Bots y Agentes Inteligentes .............................................................................................. 136
Tema V. Internet languages and the web 2.0 ............................................................ 138

Introduction ...........................................................................................................................................138
Internet as a Growing Net ................................................................................................................139

History................................................................................................................................................................... 139
Terminology ....................................................................................................................................................... 140
The Social Net. Communication goals..................................................................................................... 142
The human side of Internet.......................................................................................................................... 143
Accessibility considerations for people with disabilities................................................................... 143
The Web 2.0...........................................................................................................................................144
The use of the xhtml language to create web pages.............................................................147

Promoting Information to the Web.......................................................................................................... 147
Hypertext ............................................................................................................................................................. 147
Print vs. electronic medium .......................................................................................................................... 148
An introduction to XHTML............................................................................................................................ 149
XHTML Tags for an Easy-to-do Web........................................................................................................ 149
Description of individual course ....................................................................................................152
Tema VI. Apndices......................................................................................................... 158

Relacin de problemas de HTML...................................................................................................158
Ejercicios de HTML bsico ............................................................................................................................ 158
Ejercicios de HTML avanzado ...................................................................................................................... 161
Programa de la asignatura ...............................................................................................................164

Programa de Teora......................................................................................................................................... 164
Programa de Prcticas.................................................................................................................................... 165
Bibliografa de la asignatura ........................................................................................................................ 165
Evaluacin............................................................................................................................................................ 166
Requisitos mnimos de la WEB practica ......................................................................................167
Transferencia segura mediante SSH.............................................................................................168
Tema VII. Guiones de prcticas.................................................................................... 172

Sesin 1 ...................................................................................................................................................172
Sesin 2 ...................................................................................................................................................173
Sesin 3 ...................................................................................................................................................174
Sesin 4 ...................................................................................................................................................176
Sesin 5 ...................................................................................................................................................177
Sesin 6 ...................................................................................................................................................180
Sesin 7 ...................................................................................................................................................181
Sesin 8 ...................................................................................................................................................183
Sesin 9 ...................................................................................................................................................185
Sesin 10.................................................................................................................................................186
Tema I. Internet y sus

ventajas para el
sector turstico
Internet es
Para explicar Internet se utilizan muchas metforas, como la que

presenta a esta como una gran ciudad en la que tiene cabida 200
millones de personas, que cubre todo el planeta y que adems cuenta
con los siguientes servicios:
Oficinas de correo que han sustituido totalmente el correo
tradicional.
Una inmensa biblioteca gratuita que nos permite consultar
cualquier dato por ejemplo la enciclopedia mas grande del
mundo (wikipedia). Cada vez que hacemos un trabajo partimos
Pg. 7 Rosana Montes

Internet y sus ventajas para el sector turstico
del Internet, y se ha llegado a decir, que si no est en google...

no se puede hacer el trabajo.
El trabajo colaborativo no tiene lmites y ya no necesitamos
sitios fsicos de reunin. Las formulas se han modernizado y
podemos compartir documentos, presentaciones (Slide Share),
videos y hacer comentarios por ejemplo en audio (Voice
Thread).
Revistas temticas y especializadas que nos llevan a casa la
prensa del da. Muy habitual consultar los peridicos online
antes de empezar la jornada laboral.
Podemos realizar tambin una gran cantidad de actividades:
1. Quedar con los amigos para vernos o hablar de forma privada
2. Asistir a reuniones o foros de debate (newsgroup) en los que
intercambiamos ideas.
3. Ver las imgenes de las ultimas noticias, or la radio y ver
nuestros programas de TV. Adems no necesitamos nuestro
ordenador para ello y podemos usar el mvil o el iPod mientras
vamos en bus a la facultad.
4. Ver vdeos (You Tube) o escuchar msica (Spotify)
5. Ver paisajes de cualquier parte del mundo
6. Disfrutar de mundos virtuales (Second Life)
7. Consultar cualquier clase de informacin. Ej. cartelera de cine
8. Realizar tramites administrativos (Junta de Andaluca,
Hacienda)
9. Comprar de todo (Amazon)
10. Realizar transacciones con seguridad (bancos, compras)
11. Realizar trabajos coordinados con personas de otra parte
del mundo
12. Recibir cursos y enseanzas (Campus Andaluz Virtual)
13. Protegernos de virus informticos (anlisis online)
14. Colaborar con las ONGs
15. Disponer de servicios gratuitos: mensajes a mviles,
melodas, msica, juegos,...
16. Disponer de un nuevo medio de publicidad y de
marketing para la empresa.
Diplomatura de Turismo Pg. 8

A continuacin vamos a centrarnos en las caractersticas tcnicas de

Internet, para conocer no tanto qu se puede hacer sino cmo se
hace.
Clasificacin de las redes segn el mbito fsico
En funcin de la distancia que separa a los distintos elementos que

forman parte de una red de ordenadores, se puede establecer la
siguiente clasificacin:
Red de rea local o LAN (Local Area Network), que se caracteriza
por cubrir un rea geogrfica reducida, encontrndose normalmente
todos los nodos que la forman dentro del mismo edificio. Las
distancias suelen ser del orden de metros. Son las redes que
podemos montar en casa o en una oficina pequea.
Red de rea metropolitana o MAN (Metropolitan Area Network),
en la que las comunicaciones se realizan dentro de una ciudad o entre
un grupo de edificios cercanos. Las distancias tpicas no suelen
superar los 10 kilmetros. Un claro ejemplo de MAN sera la red de la
Universidad de Granada, que une e interconecta facultades que se
encuentran en varios puntos de la ciudad.
Pg. 9 Rosana Montes

Red de rea amplia o WAN (Wide Area Network), que es aqulla

que se emplea para interconectar ordenadores separados por grandes
distancias (superiores a 10 Km), extendindose incluso por varios
pases. Podemos hablar entonces de redes a nivel regional, de
comunidad autnoma, nacional o internacional.
Caractersticas tcnicas
Las redes metropolitanas y las de rea amplia suelen estar

constituidas a su vez por un conjunto de LANs interconectadas entre
s. El ejemplo ms claro de WAN es la red Internet.
Continuamente cambia para adaptarse a las nuevas necesidades,
siendo bastante beneficioso para todos sus usuarios que no imponga
restricciones en el hardware y que no pertenezca a ninguna
organizacin.

Para facilitar la comunicacin entre equipos es necesario identificar al

emisor y al receptor. De hecho, cada uno de los ordenadores o nodos
terminales de la red, a travs de los cuales se conectan los usuarios a
Internet, as como cada recurso hardware accesible, debe ser
identificado de forma unvoca. Este identificativo se conoce como
direccin IP y se suele escribir de la forma a.b.c.d, donde a, b, c y d
son nmeros entre 0 y 255, que son los valores que se pueden
obtener con los 8 bits que ocupa cada nmero. As, 150.214.191.169
y 130.65.3.254 son dos ejemplos de direcciones IP concretas.
Estas direcciones son gestionadas a escala mundial por IANA
(Internet Asigned Numbers Autority), si bien existen adems las
entidades regionales y locales, como RIPE (Rseaux IP Europens) en
Europa. En funcin del nmero de mquinas conectadas, la
organizacin deber solicitar a la entidad reguladora correspondiente
una clase para su red.
Los usuarios tienen la posibilidad de utilizar nombres, ms fciles de
usar y recordar que las direcciones numricas, para referirse a las
mquinas, gracias al servicio de nombres de Internet,
denominado DNS (Domain Name System), que es bsicamente una
base de datos distribuida de forma jerrquica por toda Internet. As,
por ejemplo, se podra asignar un nombre (con unas caractersticas
determinadas) a la direccin 150.214.191.169 y utilizarlo en su lugar.
Pg. 11 Rosana Montes

Los nombres deben permitir localizar de un modo rpido la ubicacin

del destino especificado, para ello se ide un sistema jerrquico
basado en el concepto de dominio y subdominio, con un formato de
acuerdo al siguiente esquema mostrado de:
nombre[subdominio.]subdominio.dominio
En el ejemplo: goliat es el nombre de la mquina, ugr es el
subdominio de la Universidad de Granada, y es indica el dominio
principal de Espaa.
El nmero de dominios y subdominios suele oscilar entre dos y tres,
si bien no existe un nmero prefijado de subdominios que puedan
aparecer en el nombre, aunque siempre tienen una estructura
jerrquica, o sea, los de la izquierda estn contenidos en los de la
derecha.
Algunos de los dominios ms conocidos son: .edu (instituciones
educacionales), .com (organizaciones comerciales), .gov
(instituciones gubernamentales), .mil (grupos militares), .net
(centros de soporte de redes), .org (otras organizaciones) y los
cdigos de pases, como por ejemplo: .es (Espaa), .fr (Francia), .de
(Alemania), etc.

Familia de protocolos TCP/IP

Un protocolo es un conjunto de reglas que regulan el intercambio de
informa-cin entre elementos que cooperan en la transmisin de
datos a distancia. Es muy similar al trmino protocolo cuando es
empleado por un embajador en otro pas. Debo saludar con la mano,
con un beso, dos, tres? Cules son las normas para que nos
comuniquemos cortes mente y no comentamos incorrecciones: los
protocolos.
El aglutinante que hace posible aunar semejante diversidad en

Internet es el conjunto de normas y lenguajes comunes de
comunicacin entre sistemas, conocido como familia de protocolos
TCP/IP. Bajo este nombre genrico se engloban ms de 100 normas
o protocolos abiertos (no dependientes de ninguna casa comercial)
que se han convertido en el estndar de facto para la comunicacin
entre ordenadores. Cada uno de los protocolos se especializa en dar
solucin a algn aspecto especfico de la compleja problemtica que
presenta la comunicacin de datos entre equipos informticos
diversos, a travs de medios diversos y con fines diversos. As, como
puede verse en la siguiente tabla, existen protocolos que definen la
forma concreta de funcionar una serie de aplicaciones.

Protocolo Propsito
SMTP (Simple Mail Transfer
Correo electrnico
Protocol)
TELNET Sesin remota
FTP (File Transfer Protocol) Transferencia de archivos
NNTP (Network News Transfer Distribucin de grupos de debate
Protocol) (newsgroups)
GOPHER Navegacin por directorios de texto
Protocolo de transporte de ficheros
HTTP (HyperText Transfer hipertexto del WWW, incluyendo los
Protocol) documentos MIME (Multipurpose Internet
Mail Extensions)
UDP (User Datagram Servicio de transporte de datos sin
Protocol) conexin (datagramas).
TCP (Transmission Control Servicio de transporte de datos con
Protocol) conexin.
IP (Internet working Protocol) Envo y recepcin de paquetes.
SLIP (Serial Line Internet Transmisin de paquetes IP por una lnea
Protocol) serie.
Transmisin de un protocolo por una lnea
PPP (Point to Point Protocol)
serie.
Los dos protocolos ms importantes son los que dan nombre a toda la
familia: TCP (Transmision Control Protocol) e IP (Internet Protocol).
Arquitectura Cliente / Servidor

La filosofa de trabajo ms extendida actualmente en informtica y
telecomunicaciones se conoce como modelo cliente/servidor y se
basa en la peticin de un servicio por parte de un programa cliente
(instalado en el nodo cliente), de cuya realizacin se encarga el
programa servidor (instalado en el nodo servidor), as como del envo
de los resultados al programa cliente, el cual los muestra en la
pantalla del usuario. Un mismo nodo puede actuar como servidor y
cliente al mismo tiempo. Por ejemplo: cuando se navega por
Internet, el programa cliente solicita la visualizacin de una
terminada pgina Web, y el servidor se la proporciona o da los
mensajes de error oportunos.

Internet se basa en este modelo y gracias a l se pueden realizar una

gran variedad de tareas, como: comunicarnos (va correo electrnico,
chat, videoconferencia, etc.) con otros usuarios, participar en foros
de debate (newsgroup), ver las imgenes de las ltimas noticias, or
la radio y ver la TV, consultar cualquier clase de informacin, etc.
El Servicio WWW
De todos los servicios, la Web, es el ms conocido y utilizado por los
internautas y ha sido uno de los principales desencadenantes del
xito actual de Internet. Este servicio ha hecho posible que Internet
se haya convertido por mritos propios en un mercado sin fronteras,
sumamente atractivo y en el que cada da que pasa se nos ofrece un
servicio aadido. Ya nadie se extraa si decimos que, sentados frente
al teclado de nuestro ordenador, hemos reservado nuestros billetes o
nuestro hotel para las prximas vacaciones, participamos en
subastas, hacemos la compra del supermercado, consultamos nuestra
cuenta bancaria o decidimos invertir en Bolsa. En esencia, la Web no
es otra cosa que un gigantesco conjunto formado por millones y
millones de ficheros que contienen informacin de todo tipo (textual,
grfica, sonora, etc.), distribuida entre millones de ordenadores y
escrita en un determinado formato, que puede ser interpretado de
forma adecuada por unos programas especficos, denominados

navegadores (en ingls, browsers), como los populares Microsoft

Internet Explorer y Netscape Navigator, entre otros.
Lo que se conoce como servicio World Wide Web (WWW) nos ofrece
muchos servicios como hemos enumerado aqu, pero adems
podemos aadir dos de los servicios ms importantes que interesan
al profesional del turismo:
Informacin sobre proveedores de servicios tursticos, agencias
de viajes, empresas, asociaciones de todo el mundo, etc.
Comercio electrnico para realizar reservas on line y poder
realizar transacciones financieras de forma rpida y cmoda.
El concepto fundamental sobre el que se asienta la Web es el
hipertexto, aunque es muy normal emplear otros trminos, como:
hipermedia, pginas HTML o simplemente pginas Web. El trmino
hipertexto fue acuado por primera vez por Ted Nelsol en 1965, y
haca referencia a la capacidad de disponer en un texto normal de
determinadas zonas que, activndose, nos trasladaran a otro texto y
as sucesivamente. El concepto de documento hipermedia est
basado en el anterior, pero salvando la limitacin de que el tipo de
documento enlazado no tiene por qu ser textual. As, podemos crear
documentos multimedia (mezcla de textos, imgenes, sonidos, vdeos
y/o animaciones) que tengan enlaces a otros documentos o
elementos multimedia.
En realidad, las pginas Web no son otra cosa que ficheros de texto
ASCII (texto plano) escritos en formato HTML (HyperText Markup
Language, o Lenguaje de Marcas Hipertexto), a las que se puede
acceder empleando el modelo cliente/servidor. El servidor Web se
encarga de enviar el contenido de las pginas Web solicitadas cuando
recibe una peticin desde otra mquina, por medio de un navegador
(programa cliente Web), que se ejecuta en la mquina del usuario
que quiere acceder al contenido de dichas pginas. En dicho envo, el
servidor no slo manda la pgina HTML, sino tambin todos aquellos
elementos externos a la misma, pero que forman parte de sta
(sonidos, imgenes o iconos, por ejemplo), de modo que en la
pantalla del usuario que ha realizado la peticin se visualice esa
pgina Web, tal y como fue diseada por su creador.
El protocolo por medio del cual se efecta la comunicacin entre los
clientes y el servidor se denomina HTTP (HyperText Transmission
Protocol, o Protocolo de Transmisin Hipertexto), que ofrece no slo
los mecanismos necesarios para enviar la informacin entre
mquinas, sino tambin servicios de encriptacin (ocultacin de datos
importantes) y autentificacin del cliente (identificacin mediante
nombre y contrasea).

Servicios y guas de informacin al turista

Esta claro que Internet es un medio complementario y paralelo a las
actividades ofrecidas por las agencias de viajes tradicionales. Su uso
est claramente extendido.
Ranking de los 10 sitios de viajes on line internacionales ms

visitados son:
1. Mapquest.com 2. 3. Expedia.com 4. Priceline.com 5. Excite.com
Travelocity.com
6. 7. Iflyswa.com 8. Mapsonus.com 9. AA.com 10. Mapblast.com

Lowestfare.com
Si nos centramos en los sitios de viajes on line Espaol podemos

mencionar adems de los propios de cada agencia de viaje
(www.alconviajes.es) algunos como: www.edreams.es, www.viajarahora.com,
www.excite.es (sin especificar ningn puesto o ranking).
Adems de estas pginas especializadas en localizar y mostrar ofertas

para nuestros viajes, podemos hablar de sitios webs dedicados a
proporcionar informacin sobre destinos tursticos. A este respecto,
las guas de viaje tiene su mbito en Internet. Algunos ejemplos son
mostrados en la siguiente transparencia.

Cuando viajamos queremos sacar el mximo partido a nuestra visita.

El tiempo disponible es limitado y es imprescindible disponer de una
gua que nos aconseje y que nos permita hacer una seleccin. Hay
guas de muchas clases. Atendiendo al mbito geogrfico que abarcan
existen:
- guas internacionales.
- nacionales, que se centran solo en el pas.
- regionales o inter-regionales que cubren una o varias comunidades
autnomas.
- guas locales centradas en una ciudad.
- guas personales, escritas por gente preocupada por difundir el
patrimonio turstico de su ciudad.
Atendiendo a su contenido y organizacin, el abanico de

posibilidades es muy amplio. Las hay que simplemente contienen
informacin de tipo geogrfico o de poblacin, pero tambin las hay
que se centran en detalles sobre la historia, el patrimonio cultural e
incluso la meteorologa.
Las hay genricas que abarcan todo tipo de informacin, y especificas
dedicadas al turismo verde, deportivo, etc. No hay ninguna empresa

de viaje on line que no incluya dentro de sus servicios una gama de

guas de lo ms completas.
Respecto al turismo en s, sabemos que es un fenmeno variable, ya

que la demanda modifica sus gustos y preferencias. En los ltimos
aos se han observado importantes cambios como:
- Incremento del turismo rural, deportivo y cultural.
- Viajeros que prefieren preparar sus propias excursiones haciendo
de esta forma su viaje a la carta, en lugar de excursiones
programadas y viajes cerrados.
- Se ha visto una tendencia a realizar los viajes ms cortos, en lugar
de un gran viaje en el periodo vacacional. Esto origina un mayor
flujo de viajes que son de menor duracin pero que se reparten
en el calendario anual.
- Tambin se ha demostrado una tendencia a destinos lejanos o
pases exticos.

Pues bien, precisamente estas tendencias encuentran un medio muy

apropiado en Internet. Se ha visto que a las personas que les gusta
viajar les atrae la flexibilidad de Internet (abierta las 24h, desde
nuestra casa y con gran facilidad).
Sin embargo la inclusin en Internet del mundo del turismo
(agencias, sitios de reservas, alquiler de coches, etc.) ha encontrado
una barrera, similar a cualquier otra disciplina. En general, la
competencia de empresas en Internet es brutal, y no importa como
de grande o pequea sea tu empresa: cualquier cosa puede pasar, la
idea ms simple puede convertirse en un xito, o la campaa ms
costosa puede simplemente no encontrar su pblico destino.
La competencia es an ms dura en Internet que en el mercado
normal. Los agentes establecidos deben mejorar su oferta,
desarrollando una confianza en la marca superior a la de la nueva
competencia y estableciendo alianzas de distribucin.

De hecho en USA se ha dado el caso de una unin de fuerzas: las

cuatro compaas de aerolneas ms importantes se han unido para
formar un portal comn.
Otras estrategias que se utilizan es la inclusin de los clientes que
entran en un portal, en un anillo de portales, en los que roten o
circulen pero sin irse fuera. Se trata pues de una alianza de
marketing para que si el cliente no ha encontrado lo que quera en mi
portal lo busque en el tuyo y viceversa.
A continuacin mostramos algunos ejemplos de servicios especiales
con los que una web de compaa de viajes pretende captar usuarios
y mantener la fidelidad de estos (que repitan con ellos la siguiente
vez que decidan preparar un viaje on line):
Fare Calendar: permite especificar la fecha idnea para viajar y
te proporciona ofertas para diferentes destinos.
Flight Price Matcher: permite especificar un precio mximo y el
buscador proporciona ofertas con una variedad de destinos y
fechas.
Flight Wizard: permite especificar un destino, y el buscador te
proporciona ofertas de vuelos con distintos precios y fechas,
pero para ese destino particular.

FareCalendar y Best Fare Finder, funcionan de forma similar. El

usuario elige un destino y recibe una lista de los vuelos ms baratos y
sus fechas. Te registras solo cuando vas a reservar.
Otro ejemplo de alianza nos lo da el caso de estudio de Twin Travel
con Sabre. La asociacin de ambos posibilita reservar pasajes areos,
alquiler de automviles y noches de hotel a travs de Internet. Al
ingresar dispondr de ms de 400 compaas areas, 40.000 hoteles,
50 empresas de alquiler de automviles alrededor del mundo. El
usuario deber registrarse una nica vez en el sitio y la informacin
de su tarjeta de crdito ser utilizada nicamente en el momento que
de confirmacin para se se emita la reserva realizada y no antes.
Bsqueda de informacin y reservas

Los buscadores son sitios Web que nos ayudan a encontrar en
Internet informacin de nuestro inters. Su uso es gratuito, ya que el
patrocinio de los mismos proviene de la publicidad que incluyen en
sus pginas.

Ofrecen dos tipos de bsquedas:

Por palabras clave: en un recuadro de texto se escriben
palabras o frases significativas para localizar la informacin
buscada. Entonces, el buscador contrasta los datos introducidos
con la informacin que tiene en su base de datos acerca de las
pginas Web que conoce (dadas de alta en l) y responde con
un listado que contiene las que se ajustan a las especificaciones
dadas. Este tipo de bsqueda se puede realizar, por ejemplo,
en Google.
Por categoras: todas las pginas del buscador estn ordenadas
por temas o categoras, hacindolas pertenecer a un mismo
anillo temtico o webring. As, cada pgina del listado tiene
al menos un enlace a la pgina siguiente y otro a la pgina
anterior del anillo. Es el caso, por ejemplo, de Yahoo, que est
organizado jerrquicamente por materias, desde los temas ms
generales hasta los ms especficos.
Tambin podemos encontrar distintos tipos de buscadores. Se pueden
clasificar en: generales, si incluyen en la bsqueda direcciones Web
de todo el mundo, y temticos si se dedican a la localizacin de todos
los recursos posibles sobre un mismo tema. Ejemplo de este ltimo
tipo es el portal turstico de Espaa (http://www.tourspain.com), que
recoge informacin sobre agencias de viajes, alojamientos (hoteles,
apartamentos, turismo rural, camping, etc.), guas tursticas, ocio,

restaurantes, revistas y publicaciones, rutas tursticas, transportes,

turismo activo y turismo cultural. Es un buscador especializado, que
est en ingls, o sea, totalmente orientado al pblico destino de dicha
informacin. Otros ejemplos de buscadores temticos son:
buscadores de software (ej.: http://www.todoprogramas.com)
de empresas (ej.: http://www.paginas-amarillas.es)
de becas y subvenciones (e http://www.ayudas.net)
de fotografas (ej.: http://www.wireimage.com)
bases de datos (ej.: http://www.internetinvisible.com)
de recursos financieros (ej.: http://www.buscafinanzas.com)
sobre universidades (ej.: http://www.universities.com)
Cada buscador tiene un mtodo propio de bsqueda, que suele ir en
los apartados de Sugerencias, Ayuda o Bsqueda Avanzada. Es
necesario conocer un pequeo lenguaje que permite personalizar la
bsqueda para que la lista de enlaces con los resultados sea la ms
efectiva. Para ello, se suelen utilizar una serie de operadores bsicos:
And / Y: para seleccionar las pginas que contengan todas las
palabras introducidas (ambas). Por ejemplo, si no tengo que estudiar
y hace buen tiempo, salgo a tomarme una tapa. Se cumplir slo
cuando ambas cosas se cumplan.
Or / O: selecciona las pginas que contienen algunas de las
palabras tecleadas (al menos una). Por ejemplo, si no tengo que
estudiar o hace buen tiempo, salgo a tomarme una tapa. Se cumplir
fcilmente si sale el sol, independientemente de lo que tenga que
estudiar.
Comillas (): para mostrar las pginas que contengan la frase
exacta que se encierra entre ellas. Este tipo de bsqueda es bastante
restrictiva, por lo que el nmero de resultados se reduce
considerablemente.
+: delante de una palabra, obliga a que esa palabra est
incluida en las pginas encontradas. Equivale al operador And.
-: delante de una palabra, elimina las pginas que contengan
dicha palabra. Equivale a exceptuando.
*: para localizar pginas con palabras con la misma raz que
acompaa a este operador. Es como el comodn de un juego de
cartas, ya que el asterisco sustituye a cualquier conjunto de
caracteres.
Los distintos operadores se pueden combinar en una misma
expresin. Por ejemplo:

"ofertas de trabajo" + adminis* -temporal

Con esta bsqueda queremos encontrar ofertas de trabajo que no
sean temporales y que estn relacionadas con administracin en
general.
El orden de los enlaces listados en el resultado de la bsqueda
depender de cada buscador, as como de como estn construidas las
pginas HTML en el sitio Web. Por ello es importante prestar atencin
a que las palabras clave formen parte de los ttulos, el orden
alfabtico, las etiquetas de cdigo HTML (llamadas metaetiquetas,
como las que permiten adjuntar palabras claves o una descripcin del
contenido de la pgina) y el nmero de veces que aparezcan nuestras
palabras en el texto de la pgina Web. Por lo general, el nmero de
resultados devueltos supera el millar, y eso es algo que suele
abrumar al navegante, que se conformar con visitar los primeros
resultados.
La evolucin de los buscadores ha dado lugar al boom desde 1999 de
los portales. Estos son sitios Web que incluyen multitud de servicios
y utilidades lo suficientemente atractivas como para que se
conviertan en punto de partida de los navegantes.
Entre los servicios que incluyen:
buscadores
webchats
webmail (correo que leemos desde el navegador web)
alojamiento gratuito de pginas personales
descarga de software (shareware y freeware)
el tiempo
noticias
horscopos, juegos, cines, deportes y todo lo relacionado con el
ocio
envo gratuito de mensajes a mviles
envo gratuito de fax
agencias de viajes on-line
Algunos adems incluyen:
enciclopedias y atlas (www.encarta.msn.com)
mapas de ciudades y carreteras (www.lycos.com/roadmap.html)
traductores y diccionarios (http://translator.go.com)
tarjetas electrnicas (e-cards) de felicitacin

postales de viajes (http://flyyy.excite.es/)

msica, vdeos, webcams, radio y subastas
agendas personales y planificadores
documentos y presentaciones compartidas
Internet desde el punto de vista de las agencias de

viajes y empresas tursticas
Cualquier medio de comunicacin puede servir de escaparate para la
compra venta de mercancas, como ocurre con la prensa, la radio y la
televisin. La masificacin de estos medios hace que las posibilidades
y la variedad de productos sean mucho mayores. Internet
proporciona unas caractersticas envidiables como medio de realizar
transacciones o publicidad, dada su interactividad y flexibilidad.
En la actualidad, cuando hablamos de comercializacin en Internet se
entiende todo aquello que puede ser fuente de ingresos y de
actividad econmica directa. Dejamos fuera los servicios externos o
indirectos como pueden ser las empresas de telecomunicaciones, que
dada la competitividad, estn al fin y al cabo, beneficiando a los
usuarios.
Atendiendo al tipo de actividad podemos hacer una clasificacin del
comercio directo:
1. Servicios de informacin de pago. Generalmente se ofrece
informacin y demostracin gratuita sobre el servicio por medio
de una pagina Web. Despus se debe abonar una cuota que
puede ser fija (mensual o anual) o puntual para cada servicio
concreto.
2. Venta directa de productos externos. Internet funciona como un
escaparate en el que se exponen catlogos y se pueden
encargar los productos de modo similar a la venta por correo.
Las ventajas de este sistema sobre el tradicional son muchas.
3. Publicidad. De modo similar a la televisin, la masa de usuarios
que visitan las pginas Web es un buen mercado de
compradores a los que hacer publicidad y marketing de
productos tanto internos como externos a Internet.
Otros servicios remotos. Cualquier servicio susceptible de
virtualizarse puede cobrar. Aqu se incluye desde,
evidentemente, los servicios informativos, las asesoras de
marketing Web, servicios legales y fiscales, traductores, hasta
servicios mdicos, psicolgicos o de parapsicologa.

Ventajas:
El usuario puede comparar precios y cotejar los productos sin
moverse del silln. Incluso puede utilizar agentes o asistentes
automticos para encontrar las ofertas o el producto deseado.
Tambin permite una automatizacin de la lista de la compra
de aquellos productos que adquirimos peridicamente. Todo
esto supone un considerable ahorro de tiempo para el
consumidor.
Localizacin de compradores y vendedores ms atractiva: se
pueden comprar productos desde sus propios pases de origen,
siempre que el coste de transporte no sea excesivo.
La privacidad de la compra queda asegurada (Ej. Puedes
comprarte un chupete sin que te de vergenza), adems de
que se puede configurar (Ej. Ingredientes de una pizza)
El precio puede reducirse a la mitad del ofrecido por otros
medios debido a la reduccin de costes de comercializacin, de
marketing, de distribucin; tampoco hay necesidad de
intermediarios ni dependientes y por ultimo, existe un mercado
potencial de muchos millones de compradores.
Los mecanismos de pago estn ya desarrollados y son mucho
mas cmodos, seguros y sencillos que los actuales por tarjeta
de crdito o contra reembolso.
Caractersticas del Comercio Electrnico

Seguir la actualidad del comercio electrnico es muy difcil, tanto por
los movimientos empresariales como por las novedades tecnolgicas.
No hay semana en la que no nos lleguen noticias de otra empresa
que ha surgido de la nada aportando una burrada de millones a sus
propietarios, que por lo general son un par de jvenes que todava no
se han quitado el acn. Eso cuando no se trata de otro mega-ultra-
portal-imprescindible estructurado en torno a la filial de alguna gran
empresa de las comunicaciones.
Qu es el comercio electrnico? De verdad vamos a poder pedir
una pizza de anchoas a travs de Internet a las once de la noche?
Podemos hacernos multimillonarios aunque hayamos suspendiendo
todas las asignaturas de Mercantil desde hace 6 aos? Una pgina
Web sobre la chinche asesina de las estepas siberianas puede
convertirse en un portal que cotice en la Bolsa de Nueva York? Hay
alguna forma de incrementar la facturacin de la tienda que hemos
abierto en un pueblo de la meseta castellana?

Cuando hemos preguntado o buscado en un texto referencias a cul

podra ser la caracterstica ms importante del comercio electrnico,
las opiniones se dividan principalmente en dos alternativas:
a) por un lado, favorece al usuario porque le permite buscar y
elegir entre una oferta ms amplia;
b) por otro, favorece al comerciante porque pone a su alcance un
mercado potencial de millones de clientes.
Para nosotros, sin embargo, la caracterstica ms importante es otra:
c) los requisitos para montar un negocio en Internet son
completamente distintos a los tradicionales.
De hecho, las dos anteriores nos parecen incluso equivocadas, como

veremos un poco ms adelante. Pensemos en un negocio
relativamente sencillo, una librera. Tradicionalmente, quien quisiera
montar una tienda de este tipo abierta al pblico tendra que hacer
frente a una serie de gastos considerables antes de abrir las puertas:
constitucin de la empresa, alquiler del local, reforma, mobiliario,
almacn, sueldos de personal y una considerable cantidad de
impuestos directos e indirectos. No todo el mundo tiene los 10
milloncetes que puede suponer, como mnimo, hacer todo esto, lo
que frenaba a un gran nmero de iniciativas empresariales.
En Internet, sin embargo, desaparecen muchos gastos. El alquiler del
local se sustituye por el del hospedaje en un servidor, mucho ms
barato. Todos los gastos de reforma y mobiliario se reducen al diseo
del sitio, que puede ser ms o menos caro en funcin de las
ambiciones estticas que tengamos. Casi no hace falta personal, pues
el mantenimiento se puede subcontratar en la empresa de hospedaje
y la atencin al cliente se realiza desde la pgina Web. Por ltimo,
aunque no menos importante, los impuestos que pagaremos son
mucho menores. De esta forma, personas que antes no podan ni
soar con abrir un negocio ahora tienen la oportunidad de iniciarlo
por una inversin mucho menor. Internet constituye un escaparate
ms engaoso que la vida real.
No podemos calibrar la solidez de una empresa por su sitio Web, ya
que tanto la gran cadena de libreras como el autnomo que da sus
primeros pasos tienen el mismo aspecto si contratan el diseo de su
sitio en la misma empresa.
Un ejemplo claro de lo que decimos, que desde nuestro punto de
vista reafirma la valoracin hecha, es el fenmeno de los valores
tecnolgicos en Bolsa. En los ltimos meses hemos visto cmo han
salido a cotizacin algunas empresas que han subido como la espuma
en poco tiempo... para caer con la misma velocidad de forma
impredecible.

Tradicionalmente, la valoracin que hacen los inversores para decidir

si un valor es o no atractivo se basa en un estudio de sus bienes, sus
resultados econmicos, la trayectoria de la empresa, el tamao de la
plantilla y cosas as. Con los valores tecnolgicos ocurre lo contrario.
Terra o cualquiera de estas empresas .com no se valoran por el
nmero de oficinas abiertas sino por las expectativas de facturacin
realizadas sobre un hipottico trfico e impacto meditico; cuantos
ms visitantes, ms atractiva es la empresa. No hay nada fsico en lo
que se apoye la cotizacin de estos valores y son presa fcil de la
especulacin ms draconiana.
Cualquiera puede crear un portal con una mnima inversin y salir a
Bolsa en poco tiempo multiplicando hasta el lmite la valoracin de las
acciones. Hace falta citar ejemplos? Basta con hojear los peridicos.

Diseo de Sitios Web Tursticos
Tema II. Diseo de

sitios Web tursticos
Recomendaciones
Una de las cosas que nos planteamos a la hora de disear un sitio

web, es qu informacin vamos a mostrar y cmo vamos a mostrarla.
Evidentemente si no vamos a ofrecer informacin, poco vamos a
ofrecer. Pues bien, cuando tengamos recopilada la informacin a
publicar deberemos organizarla, para que no se muestren pginas
demasiado pesadas, largas de leer o abrumadoras. Lo mejor es
cortar y separar el contenido para que se muestre en pginas
diferentes. De esta forma el usuario tambin decide si quiere leer
ms o si tiene suficiente con el texto ofrecido.
Necesitaremos proporcionar una imagen homognea, identificativa de
nuestro sitio, para ayudar al navegante a distinguir entre una pgina
de mi web y otra pgina fuera de esta. Esto es as porque al navegar
saltamos de una web a otra con suma facilidad. Sin embargo nuestro
objetivo ser hacer permanecer al usuario en nuestra web, y que la
visite con asiduidad. Por ello definir una imagen global que

mantendremos en todas nuestras pginas, har que el usuario

reconozca donde est, y si le gustan los contenidos, desee repetir.
Es importante ser conscientes del tamao o espacio de pantalla que

el usuario posee, para tratar de no llenarla. Muchos colores, texto e
informacin en un espacio pequeo puede suponer un impacto
negativo. Dan ganas de decir me voy de aqu! cuando nuestro
objetivo es justo lo contrario. Por ello es mejor ser simplistas o
sencillos con la primera imagen de nuestra web. De hecho se
recomienda no superar el 50% del espacio con informacin.
Por ejemplo, las webs con diferentes servicios de Google son
simplistas en el sentido que el fondo es blanco, hay alguna que otra
imagen con colores alegres y algo de texto, s, pero dejando espacio.

Si tienes que mostrar texto porque ests en una pgina especfica de

tu web con esa informacin, entonces procura emplear estilos y
formato de texto para evitar la monotona. Cualquier cosa vale:
cambiar el tamao, el color, la identacin, usar bordes de color,
incluir alguna imagen, etc.
Sin embargo no debemos irnos al otro extremo: el del abuso de

colores, textos de diferentes tamaos o colores muy chillones. Ilustra
este ejemplo la web de Ryanair, que adems cumple que cubre
prcticamente en su totalidad el espacio de pantalla del usuario.

De siempre se ha dicho que una imagen vale ms que mil palabras, y

es cierto. Por ejemplo, en el caso de facebook, la persona que llega a
ese sitio por primera vez obtiene una idea de intercomunicacin con
distintas personas independientemente de su localizacin fsica.

Las siguientes recomendaciones son igualmente importantes. El

hecho de mantener un estilo homogneo y consistente a lo largo del
conjunto de pginas, concuerda con la anterior recomendacin de
tener una imagen global. Al final todo se reduce a que mantengas los
colores y los fondos as como que crees a ser posible un logotipo
identificativo. Normalmente el logotipo suele ser adems un enlace a
la pgina de inicio, lo que ayuda as mismo a la movilidad (o facilidad
de navegacin) de nuestra web.
Hay que intentar conseguir:
Enlazar a la pgina de presentacin e incluso a otras pginas
que sean importantes, por ejemplo contenedores generales de
informacin.
Un mapa de la Web es til. Permite tener una idea general de
todo el contenido del sitio visitado, adems de ser un acceso
directo a cada pgina. Es igual al ndice de contenidos de un
libro. Si no piensas leerlo entero, el ndice te permite saber la
pgina por la cual debes abrir el libro para leer la parte que te
interesa.
Permitir re-localizar al usuario en caso de prdida en la web.
Esto implica mostrar la informacin de donde est actualmente
para que decida su prximo movimiento, tal y como aparece en
el siguiente ejemplo.

Igualmente si todo funciona bien (los enlaces), existen buenos

contenidos y todos ellos estn actualizados conseguiremos ms
puntos para nuestra imagen global de web. Es por ello que las
pginas en obras dan muy mala impresin y debemos evitarlas. Si no
tenemos un contenido, para qu lo enlazamos? Para qu
molestamos al usuario que tiene que pinchar, descargar otra pgina y
finalmente volver hacia atrs porque no hay nada? Para que vea la
imagen tan graciosa del obrero picando piedra! No, es mejor enlazar
a una pgina nicamente cuando sta est terminada.
Para dar la informacin sobre cmo de actualizada es nuestra web
(para lo bueno o para lo malo) debemos incluir como datos generales
en la pgina principal la fecha de ltima modificacin. Otra
informacin adicional podra ser la resolucin recomendada (ms
adelante trataremos el tema de la resolucin).
En general siempre es bueno pedir una segunda opinin a terceras
personas, con el fin de recibir comentarios adicionales, antes de
proceder a publicar las pginas. Que usen todos los enlaces porque
pueden detectar fallos que se nos haba pasado inadvertidos.

Pasos a realizar
Lo que queremos saber ahora es cmo empezar desde cero nuestra
web. Y todo esto sin saber an nada de creacin de pginas
utilizando el lenguaje HTML. Se trata de tener una idea y explotarla.
Conseguir la informacin que queremos presentar y pensar en la
mejor forma de presentarla. En el tema siguiente aprenderemos
como implementar la idea, pero que quede claro que lo primero es
pensar, planificar y disear, ms adelante vendr la accin, el hacerlo
desde cero en nuestro ordenador.
El esquema o diseo de la web vendr a ser la representacin grfica
aproximada de lo que deseamos ver finalmente en pantalla. Es
posible que lo que tengamos en mente sea posible de hacer, pero
tecnolgicamente avanzado (digamos que para gente especializada),
entonces deberemos encontrar la forma de simplificar la idea, pero
respetando en lo posible el concepto deseado. Por supuesto para
saber si podemos o no podemos implementar una determinada idea
necesitaremos conocer (aunque sea por encima) un amplio nmero
de tecnologas de programacin para la web. En este libro, se
presentarn algunas bsicas pero el material detallado se escapa del
mbito y del nivel del lector, quedando encuadrado en la Ingenieras
Tcnicas / Ingeniera Superior de Informtica, no en la Diplomatura
de Turismo.

Esquema a papel es un dibujo que representa el aspecto de la pgina

principal de nuestra web. Una vez que tenemos la idea de lo que
queremos hacer nos podemos plantear la estructura, enlaces o
pestaas que queremos tener. Dnde colocaremos la informacin de
contacto, el ttulo, la imagen principal etc. En caso de que queramos
una presentacin anterior a sta (una especie de splash windows
tpica de algunos programas y espacios web), disearemos la
segunda pgina, la que accedemos despus del texto de bienvenida.
Hacerlo a papel es lo idneo, aunque en Internet podemos encontrar
herramientas que nos ayuden a esta tarea, haciendo un dibujo
bastante profesional, ya que nos proporciona la mayora de widgets
que disponen las interfaces grficas de usuario tanto para
aplicaciones desktop como aplicaciones para dispositivos mviles.
La siguiente imagen muestra un diseo o sketch candidato para la
pgina web del proyecto WISHES (www.wishes.eu). Se ha realizado con
la aplicacin Balsamiq Mockups (www.balsamiq.com) por lo que el
ejemplo se denomina tambin mockup de wishes.

Lo siguiente a realizar es el grfico que represente la estructura de

nuestra web, intentando representar el nmero de pginas totales de
nuestra web y la interconexin de stas mediante enlaces. Por
supuesto que estos diagramas no son concluyentes, ya que podremos
ir variando y adaptando el esquema y diseo de nuestra web
conforme nos surjan ideas o localicemos ms contenido para publicar.
La siguiente imagen muestra un ejemplo de estructura web,
estructuras que suelen ser jerrquicas teniendo como nodo raz (nodo
del que descienden todos los dems) la pgina inicio de nuestra web.
Y finalmente obtenemos y recopilamos el contenido, es decir, las

imgenes y del texto que queramos publicar. Varias cosas al
respecto:
1. Es importante adecuar la informacin a su publicacin en
Internet. Puede ser que yo quiera utilizar una foto de mi
cmara digital, pero no puedo colocarla tal cual. Debemos
conocer el formato correcto de los archivos en internet, para
permitir el mayor nmero posible de personas sean capaces de
usar los ficheros que se descarguen de nuestra web.
2. Es importante generar contenidos. No puedo descargarme todo
de internet y recolorcarlo en una web como si fuese
originalmente mo. Es muy delicado el tema de los derechos de
autor en internet.

Para tratar el punto 1 anteriormente mencionado tratamos el tema de

los formatos de ficheros, que son representados mediante tres o
cuatro caracteres en la extensin del fichero, o un campo Tipo en
nuestro explorador de archivos. La siguiente tabla muestra una lista
de los formatos ms interesantes.
Extensin Comentario
.au Fichero de sonido (UNIX).
.avi Archivo de Vdeo (Microsoft).
.bmp Archivo Grfico de Windows (bitmap).
.class
Fichero binario que contiene cdigo compilado en
JAVA
.doc
Documento binario con formato propietario de
Microsoft (Word).
.eps
Archivo PostScript Encapsulado (Encapsulated
PostScript).
.gif
Archivo Grfico en Formato de Intercambio (Graphics
Interchange Format).
.flv Archivo de video de Flash

.gz Archivo comprimido con el gzip.

.hlp Fichero de ayuda.
.java Fichero de Texto que contiene cdigo fuente en JAVA
.jar Archivo ejecutable Java
.html Fichero hipertexto en html.
.jpg Archivo grfico comprimido bajo la norma JPEG.
.mid / .midi Archivo MIDI (sonido sintetizado).
.mov Archivo de vdeo (en formato QuickTime).
.mpg Archivo de vdeo comprimido bajo la norma MPEG.
.ps Archivo Postcript.
.png Portable Network Graphics
.rtf Archivo de Texto con Formato (Rich Text Format)
.swf Archivo ejecutable de Flash
.tar Ficheros empaquetados de UNIX.
.tga Archivo Grfico.
.tgz
Fichero empaquetado con tar y comprimido con gzip
(UNIX).
.txt Archivo de Texto.
.tif / .tiff Archivo Grfico en formato TIFF.
.txt Archivo de texto, generalmente en ASCII.
.wav
Archivo Multimedia (generalmente sonido) de
Microsoft.
.zip
Archivo comprimido con un algoritmo del tipo Lempel-
Ziv (zip/unzip, ...).
Para esta asignatura debemos destacar los formatos grficos y de

texto. De entre los primeros tenemos principalmente:
BMP: formato no comprimido y propietario de Microsoft. Nunca
se debe usar en una web ya que su tamao no es ptimo y
suele superar el MB (megabyte). Adems es un formato RAW y
no permite capas, transparencias o animaciones.
JPG: formato comprimido con prdidas que representa ms de
16 millones de colores.

GIF: formato simple de grficos con 256 colores mximo y

posibilidad de almacenar animaciones y transparencias.
PNG: formato originalmente creado para internet. Soporta
capas, compresin sin prdidas y transparencia.
Con respecto a los formatos de texto se desaconseja utilizar ficheros
editables binarios:
doc / xls / ppt / pps en el caso de Microsoft Office
odt / ods / odp en el caso de Open Office
para en su lugar utilizar ficheros de texto:
txt como texto simple ASCII
html como texto expresado en lenguaje de marcas HTML
y en el caso de ser documentos de texto binarios enriquecidos (con
formato, imgenes, ndices, etc.) lo mejor es usar el formato de
documento porttil PDF, ya que no es editable y puede ser protegido
de lectura y/o impresin mediante contrasea.
Sin embargo la mayora de publicaciones electrnicas se leen desde
la misma web en lugar de descargar el recurso como un fichero. En la
siguiente tabla tenemos algunas de las publicaciones electrnicas ms
conocidas a nivel nacional.
Peridico o Revista URL

ABC http://www.abc.es/
AVUI http://avui.datalab.es/
Canarias7 http://www.step.es/canarias7/
El Comercio de Gijn http://www1.uniovi.es/noticias/
El Correo Gallego http://205.161.179.68:8081/ecg/ecg_wel.htm
El Diario Vasco http://turnpike.net/emporium/D/donosti/diario.html
El Pas http://www.elpais.es/
El Peridico http://www.elperiodico.es/
Espaa hoy http://www.ucm.es/OTROS/Periodico/
Gaceta de los Negocios http://negocios.ms.wwa.com/gn/titulo.htm
Intereconoma http://negocios.ms.wwa.com/ie/dinero.htm
La Vanguardia http://vangu.ese.es/

La Voz http://www.intercom.es/lavoz/
Negocios On-Line http://negocios.ms.wwa.com/di/dinero.htm
Sport http://www.servicom.es/sport/
Suplemento Campus de El http://www.offcampus.es/elmundo.campus

Mundo
Suplemento Dominical El
http://www.larevista.el-mundo.es/
Mundo
Caractersticas de un buen sitio web

Internet no da segundas oportunidades y hay que captar enseguida la
atencin del visitante con un diseo original. Lo malo es que a veces
hay poco contenido detrs.
Si un navegante llega a cierta pgina que siempre est en obras,
es difcil de recorrer o no renueva su contenido con suficiente
regularidad, ste pierde su inters y no vuelve a dirigirse a ella. Los
sitios de comercio electrnico, aunque es una norma que se puede
aplicar a cualquiera, deben ser muy atractivos y fciles de utilizar y
dar una respuesta rpida. El peligro es pasar al otro extremo, disear
una pgina sumamente atractiva pero casi carente de contenido.
En el estudio que hemos realizado de ofertas de hospedaje nos
hemos encontrado un par de este tipo; vas de un lado a otro en
pginas llenas de grficos, animaciones, applets y chuladas, pero en
las que casi no hay contenido.
El segundo aspecto, la personalizacin, es la clave de la fidelizacin,
puesto que cuanta ms informacin se acumula sobre el cliente,
mejor se ajustan los contenidos presentados a sus intereses.
Tomamos algunas referencias de E-Business Technology Forecast, de
PriceWaterhouseCoopers, un libro estupendo que volveremos a citar
en otra parte, y nos centramos en el ejemplo de Amazon, que elabora
constantemente un perfil de sus clientes por afinidades. Segn su
anlisis de ventas, est claro que un lector europeo que haya
adquirido El Seor de los Anillos, de Tolkien, tiene muchas
posibilidades de estar interesado en El Hobbit, del mismo autor.
Lo que ha hecho Amazon es ofrecer esta informacin al lector,
volviendo a utilizar la que de una u otra forma le han proporcionado
otros lectores. Lo explicaremos con ms detalle. Pongamos por
ejemplo un lector de ciencia-ficcin y fantasa. Ha comprado todas las
obras de Tolkien, pero no saba que exista Douglas Adams hasta que
un compaero de laboratorio le dej una copia de la Gua del

Autostopista Galctico (un libro, por otro lado, recomendable para

todos los amantes del gnero). Si hubiese comprado todas estas
obras en Amazon, el sistema habra aadido este dato a su muestra
estadstica y, llegado a un umbral, elaborara un modelo de lector de
ciencia-ficcin que aplicara a todo aqul que mostrase inters por
Tolkien, Adams o Herbert. De alguna forma, Amazon se convierte en
ese-amigo-que-te-des-cubre-otros-libros.
Esta es una idea de lo que queremos tratar en este apartado: los
elementos que deberamos incluir en nuestro sitio web como
informacin a mostrar (no solo de texto vive una web). Considerarlo
igualmente como buenas prcticas de diseo.
Por ejemplo en la seleccin de los colores y fondos de nuestra pgina
tenemos que considerar nuestro pblico destino. No es lo mismo la
pgina web de la polica nacional (que debe ser algo serio, objetivo y
destinado al servicio de la sociedad y al cumplimiento de la ley), que
la de Pepsi, o el club deportivo We.
La siguiente imagen muestra una pgina web que claramente est
destinada a un pblico infantil. No solo estamos observando colores,
tambin imgenes que en una disposicin final da la sensacin de ser
un dibujo de un cuento y hace que esta pgina sea ms alegre que
otras.
Sin embargo la siguiente web es mas tcnica y recalca el sector

comercial en el que se enmarca.

Debemos ser especialmente cuidadosos en la parte de seguridad y

confianza en nuestra web, sobre todo si incluimos temas de e-
commerce y admitimos nmeros de tarjetas como sistema de pago
(podra ser contra reembolso y no sera tan peliagudo). En este

sentido es mejor no almacenar la informacin en nuestro propio

servidor (podramos sufrir un ataque informtico por un hacker
espabilado) y dejar que el cibercash (monederos digitales) cumplan
su objetivo.
Tambin debemos parecer profesionales y no un grupo de timadores
bajo un nombre chispeante. La confianza en la empresa se consigue
al proporcionar claridad en nuestros datos:
quines somos (perfil de la empresa) y dnde estamos
(direccin postal a ser posible).
staff o informacin sobre los empleados
publicacin de la poltica de la empresa por ejemplo en cuanto
a privacidad, garantas, servicios, costes de envo y
restricciones
igualmente la poltica en cuanto a cancelaciones de reserva,
debe ser lo ms clara posible.
sistema de ayuda en la Web
poltica de precios adecuada
Mejorar la navegabilidad implica sencillez de uso de nuestra web. Si

es fcil y rpido localizar la informacin el usuario no se frustra y un
usuario feliz es un usuario que repite en nuestra web. La web debe
conseguir un excelente flujo, donde la informacin aparezca ordenada
y de forma coherente. Para ello se utilizan marcos o frames que
parten la pantalla (lo que vemos en nuestro navegador) en zonas
horizontales y/o verticales que me permiten colocar informacin de
forma independiente al resto. Esto permite que yo actualice
nicamente una parte de la pgina y no todos los contenidos, lo que
acelera la carga.
En sitios webs grandes es conveniente incluir un mapa del sitio, bien
sea de tipo alfabtico o bien por temas y de esta forma el usuario
encontrar la temtica que busca. En ocasiones si buscamos algo
muy concreto el mapa no nos servir, pero s lo har alguna
herramienta de bsqueda por trmino (o palabras) al estilo de un
buscador, pero cuya bsqueda se centra nicamente en los
contenidos de la web.

Algo que ya se ha dicho pero conviene recordar es que para mejorar

la navegabilidad hay que evitar las pginas en obras (son un callejn
sin salida ya que son enlaces que no van a ninguna parte) y hay que
permitir siempre volver a la pgina principal (usualmente pinchando
en nuestro logo), para ofrecer una rpida salida de esa pgina a otras
reas.
A continuacin se menciona los descripciones para los iconos, pero
por qu y para qu?. Bueno, hemos dicho que una imagen vale ms
que mil palabras y hemos decidido sustituir un men con enlaces de
texto por iconos como estos:
Realmente el usuario sabe a qu pgina se va a ir cuando pulse

alguno de estos? Es mejor que el usuario no tenga que estrujarse la
cabeza para averiguar lo que un icono quiere decir: reservas,
destinos, etc. Y para ello la mejor solucin es hacer siempre uso en
nuestro cdigo web de la etiqueta ALT (que ya explicaremos ms
adelante).

La humanizacin del sitio Web es necesaria para evitar la sensacin

de falta de contacto personal entre el cliente y nuestra empresa, hay
que lograr que los clientes se sientan asistidos en todo momento y
esto se ve cuando le resulta fcil navegar y cuando encuentra los
contenidos con facilidad. Adems, es necesario incluir de forma muy
clara y accesible desde cualquier pgina Web, el apartado de FAQ y
de ayuda. Aclarar que una FAQ (Frecuently Asked Questions) debe
incluir todas aquellas preguntas sobre los servicios de nuestra pgina
que intuimos se puede preguntar el usuario. Debe emplear un tono
desenfadado y un lenguaje sencillo
La personalizacin de las pginas Web se refiere al aspecto ya
mencionado en el caso de Amazon. Ver y observar las preferencias de
una persona (como puede ser su idioma materno) y ofrecer una
configuracin especial y particular al usuario que ya registrado,
accede a nuestra web.

Elementos de un sitio web

Supongamos que tenemos acceso a un servidor de HTTP y queremos
introducir pginas para poner cualquier tipo de informaciones.
Deberamos considerar las siguientes cosas:
1. Voy a poner una sola pgina o todo un rbol de directorios?
2. Qu me interesa ms, pginas vistosas o mayor velocidad de
acceso a la informacin?
3. Voy a necesitar scripts?, y formularios?
4. Quiero que mis pginas estn asociadas siempre al mismo
servidor o quiero la mxima portabilidad?
5. Me interesa que las pginas se puedan usar sin servidor?
6. Quiero que la informacin sea til usando cualquier visor o
prefiero asumir que los usuarios disponen de uno en concreto?
Estas preguntas no son sencillas (posiblemente ni siquiera las
entendis) como tampoco lo son las respectivas. Sin embargo, en
funcin de stas la estrategia de diseo ser una u otra. Por ejemplo
podemos plantearnos pagar por algn servicio ofrecido por una
empresa diseo web. Pero podemos estudiar los elementos que
deben formar parte de un sitio Web turstico, tanto de un proveedor
de servicio, como de un intermediario o una agencia de viajes.
El punto 1 y uno de los ms importante sera disponer de informacin
interesante y actualizada. La clave es ofrecer un valor aadido, algo
que no puedan encontrar en otra parte. La informacin debe ser
actualizada de forma constante. Distingamos si somos o no
proveedores de servicios.
a) Proveedor de servicios tursticos
La pgina principal debe poseer los elementos esenciales que
le describan de una forma rpida. En caso de Web de un
alojamiento, actividad turstica, etc, deber tener:
-descripcin del servicio principal
-servicios de restauracin y complementarios que se
ofrecen
-mapa de cmo llegar al establecimiento
-informacin sobre la comarca
-si ofrece reservas on line o bajo peticin
b) Agencia de viajes central de reservas

Deber explicar qu tipo de servicios ofrece y bajo qu condiciones.

Si incluye un catlogo de productos, deber contener una descripcin
para cada uno de ellos, as como de los paquetes tursticos.
c) Comn a los dos
Cambio de moneda, informacin sobre el tiempo, sobre las
carreteras, sobre la comarca en la que se encuentra el servicio
(alojamiento o actividad), sobre temas culturales, naturaleza,
gastronoma, actividades, etc.
2. Catlogo de productos atractivo e interesante

Una de las ventajas que presentan los catlogos de Internet frente a
los catlogos impresos es que se pueden actualizar cuando se estime
oportuno, y adems, se puede incluir mucha ms informacin a unos
costes mucho ms econmicos.
3. Fotografas
Se utilizarn los formatos *.jpg y *.gif en sus variantes de carga
progresiva y dibujos animados. Ofrecen una calidad bastante buena y
sin embargo, no ocupan demasiado espacio. En cuanto al formato
*jpg se puede decidir el grado de calidad cuando se graba.

4. Imgenes panormicas
Son imgenes de 360 que permiten al cliente moverse con el ratn
por la imagen como si realmente estuviera dentro del hotel (Ej.
http://www.lanzaroteisland.com/). Es un elemento muy atractivo, sin
embargo se hace necesario que el cliente tenga instalado el plug-in
adecuado.
5. Vdeos
Se puede incluir un video del alojamiento o la comarca, con las
mismas ventajas e inconvenientes que en el apartado anterior.
6. Sonidos
Se pueden incluir sonidos asociados a eventos (clics) o bien
constantes de fondo. El plug-in para el sonido es algo muy comn
que ya viene con la prctica totalidad de los navegadores.
7. Webcams
Las webcams ofrecen informacin en imgenes en tiempo real. Este
sistema es muy atractivo, econmico y adems, el cliente no necesita
ningn plug-in para ver en el momento lo bonita que est la playa.

8. Idiomas del sitio Web

Es imprescindible que adems de estar en espaol, est traducido al
idioma del que provengan la mayora de nuestros clientes, ya sean
alemanes, holandeses o japoneses. Los clientes de dicho pas lo
entendern como una cortesa y es probable que lo comenten a
amigos y familiares.
En Internet ya se han creado empresas que proporcionan servicios de
traduccin on line. Lo que hacen estas, es que cuando un cliente
solicita nuestra Web en un idioma, la empresa de traduccin va
cogiendo las pginas desde nuestro servidor, las traduce on line, y se
las presenta al cliente en el idioma seleccionado.
El producto WizartWizTom para HTML permite traducir cualquier sitio
HTML (multilingual) a cualquier idioma (ruso, rabe, europeo...)
http://www.wizart.com, otro http://www.systransoft.com y por supuesto
http://translate.google.com
9. Formularios bien diseados

Los formularios re utilizarn para que el cliente nos haga una
consulta, para una peticin de reserva, o una reserva on line. Es
necesario que el formulario sea claro y sencillo de rellenar, y que
incluya los botones de cancelar envi, borrar datos y enviar. Las
opciones del formulario sern funcin de cmo estn creadas las
bases de datos de las que obtienen la informacin. En su diseo
debern participar los departamentos de reservas y de atencin al
cliente.
10. Reservas on line

Para un proveedor de servicios tursticos es fundamental contrastar el
apartado fecha de entrada y fecha de salida, con la base de datos de
disponibilidad de alojamiento o servicio, que pueden verse alteradas
por reservas telefnicas o in situ. Es fundamental que la base de
datos est siempre actualizada e integrada con el resto de sistema de
reserva de la empresa.
Para una agencia de viajes se debe integrar en su sistema
aplicaciones como las que ofrecen Amadeus.net o empresas como
Mercatour. De esta forma al rellenar sus datos el cliente, los
resultados aparecen integrados dentro del propio sitio Web de la
agencia, a pesar de que han utilizado las bases de datos que ofrecen
los anteriores mencionados.

Estos sistemas hacen posible que las agencias de viajes minoristas

compitan con las grandes agencias de viajes on line tipo Expedia,
Travelocity, etc.
11. Servicios adicionales en nuestro sitio Web

Se debe proporcionar un apartado de manera que se pueda enviar e-
mails a los clientes alojados o que hayan reservado alojamiento. De
esta manera el establecimiento posterior podr ponerse en contacto
con los clientes, ofrecindoles sus servicios personales.
Herramientas para la elaboracin de una Web
El elemento bsico y fundamental en nuestra particular caja de

herramientas lo constituyen los denominados editores HTML.
Aunque ste es un lenguaje de texto plano (o texto ASCII), es decir,
que se puede generar con cualquier editor ASCII (como el clsico edit
de MSDOS, o el bloc de notas de Windows), lo habitual consiste en

trabajar con alguna herramienta que evite la necesidad de tener que

introducir manualmente las mencionadas etiquetas, como pueden ser
HoTMetaL Pro, Microsoft FrontPage (en versin normal o Express),
HotDog Pro, HTML Assistant o el propio Microsoft Word, por citar tan
slo algunos ejemplos.
Para esta asignatura se solicitar que se utilice la misma herramienta
y de esa forma garantizamos que todo el mundo cuenta con la misma
ayuda y asistencia, por no decir con la misma dificultad o sencillez a
la hora de usar un programa. El editor en cuestin requerido es el
EditPlus y se encuentra para descargar en mi pgina web
http://lsi.ugr.es/rosana > Dip. Turismo, bajo el enlace Editor.
Como segundo elemento a tener en cuenta, mencionaremos los

programas de retoque o diseo grfico, con los que generar
imgenes, fondos, etc., mediante los que podremos dotar nuestras
propias pginas de contenidos grficos. En este caso, la propia Red se
encuentra repleta de ellos, con ejemplos tan evidentes como el
popular Paint Shop Pro, capaz de aceptar incluso plugins de Adobe
Photoshop y cuya ltima versin no tiene nada que envidiar a
programas tericamente ms potentes pero mucho ms caros como
Photoshop; o Lview Pro, una excelente aplicacin shareware idnea
para la creacin de fondos en formato GIF.
Adems de estos dos tipos bsicos de aplicaciones, existen elementos
adicionales (y opcionales), como pueden ser manuales de referencia
del lenguaje (en formato electrnico o en papel), iconos, fondos, GIFs
animados y fuentes o texturas, as como otros documentos
relacionados. Aunque la Red se encuentra repleta de este tipo de

elementos, personalmente recomendamos direcciones tan atractivas

como:
The Free Graphics Store (ausmall.com.au/freegraf),
Iconographics Design Free Graphics
(www.iconographics.com/clip_f.htm),
Texture Land (www.meat.com/textures),
Fonts & Things (www.fontsnthings.com) o
Jelanes Free Web Graphics (www.erinet.com/jelane/families).
Finalmente, tampoco dejaremos de lado otras aplicaciones que han
cobrado especial auge en los ltimos tiempos, como el popular
Dreamweaver. Tambin mencionaremos, aunque slo sea
brevemente, cmo hacer uso de alguna herramienta de FTP,
mediante la cual podremos proceder a la publicacin de las pginas
que seamos capaces de desarrollar.
A da de hoy, el programa lder en el mercado de creacin de sitios
web es, sin dudarlo un solo instante, Dreamweaver. Dicho
programa, ana una serie de caractersticas que le han permitido,
desde el mismo momento de su lanzamiento al mercado, ser
clasificado en un status superior al de los clsicos editores HTML.
A semejanza de otras aplicaciones del mismo estilo, como
Cyberstudio o Netfusion, Dreamweaver es una herramienta de
creacin de sitios web (ntese que evitamos intencionadamente los
trminos editor de cdigo HTML) en la que se ha puesto especial
inters en aunar las peculiares caractersticas de los editores de tipo
wysiwyg, lo que se ve es lo que se obtiene, con la potencia y
flexibilidad que proporciona un entorno de desarrollo.
El resultado es, simplemente, espectacular, y buena prueba de ello es
la popularidad de que goza el producto entre los ms afamados
diseadores de pginas web, tanto nacionales como extranjeros. Una
de las claves de dicha popularidad radica en la tecnologa
denominada Round Trip HTML, mediante la cual Macromedia
Dreamwaver hace posible el trabajo simultneo en la ventana de
cdigo y en la pantalla wysiwyg, de tal modo que cualquier cambio
efectuado en cualquiera de ellas se repercute de inmediato en la otra,
sin que el usuario del producto tenga que hacer nada en particular.
Ahora bien, pecaramos de simplistas si afirmsemos que toda la
potencia del producto reside en dicha tecnologa. Como antes
apuntbamos, Dreamweaver es mucho ms que eso y, entre otras
posibilidades, permite detalles tales como la perfecta integracin con
caractersticas multimedia y de programacin de scripts.

Otra de las aplicaciones que gozan de gran popularidad es Flash, una

herramienta dotada de avanzadas funciones que permiten crear
espectaculares contenidos dinmicos y multimedia orientados a la
Web, y sin necesidad de aprender ningn lenguaje de programacin
repleto de extraos comandos.
Entre otras posibilidades, Flash permite generar botones con efectos,
eventos y sentencias, de modo que interactuen frente a un usuario
final que acceda a una pgina dotada de ese tipo de tecnologa. Los
eventos y sentencias se denominan acciones y permiten ser
asociados, por ejemplo, a cuadros de dilogo, mens desplegables o
clips de pelcula.
Todo esto ha permitido que Flash se haya convertido en un estndar
de facto en el mercado, y la mejor prueba de ello lo constituye la
excelente difusin de que goza una pequea herramienta como es
el player o reproductor de Flash, instalado a da de hoy en millones
de navegadores de todo el mundo.
Publicidad y promocin en Internet

Una vez que hemos creado nuestro sitio Web y lo hemos alojado en
un servidor que nos ofrezca un buen servicio, nos queda lo ms
importante: promocionar nuestro sitio Web. De entre los 2.200
millones de sitios webs pblicos de Internet, hemos de conseguir
destacar entre todos ellos. Para ello hemos de conocer cmo funciona
Internet, aunque ello nos obligue a estar muy atentos, ya que en
Internet todo cambia muy deprisa.
Lo medios ms utilizados por los clientes de reservas on line son:

motores de bsqueda: 86%
recomendaciones personales: 61%
noticias en prensa escrita: 49%
anuncios en la red: 47%
anuncios en revistas: 44%
noticias en medios de la red: 41%
Adems podemos utilizar los siguientes medios de promocin mas

especficos para Internet.


Posicionamiento de nuestras pginas en buscadores

Para darse de alta, solo hay que escoger el enlace dentro del
buscador que ponga algo de aadir Web. Luego tan solo tenemos
que rellenar los campos que nos indiquen, que suele ser las palabras
clave, descripcin y URL de la pgina, adems de la direccin de
correo de contacto.
En las polticas del buscador tambin vendr descrito el tiempo que
suelen tardar en dar de alta, aunque lo normal es que luego manden
un correo electrnico para confirmar la inclusin.
A este respecto es importante escoger correctamente la cabecera de
las pginas Web (uso de etiquetas META name=).
Hay trucos para conseguir posicionar nuestra pgina en la cabecera
de una consulta.
1. utilizar algunas de las palabras clave en el ttulo de la pgina
2. escoger la categora y seccin adecuadas a la hora de dar de
alta la pgina
3. elegir adecuadamente las palabras clave, ponindolas tanto en
espaol como en los idiomas de nuestros clientes potenciales
4. incluir palabras en singular y en plural, con y sin acento,
empezando con mayscula, con minscula y todo en
maysculas
5. utilizar meta etiquetas
6. si hay diferentes secciones en el sitio Web, es conveniente dar
de alta cada pgina por separado en el buscador.
7. nunca se debe enviar la pgina a los buscadores mientras no
estn terminadas
8. comprobar regularmente en qu posicin se encuentra nuestra
pgina por si hubiera que hacer alguna modificacin en el
diseo para subir posiciones.
Darse de alta en todos los buscadores es prcticamente imposible, asi
que habremos de elegir:
los ms utilizados por todo el mundo, tipo yahoo, altavista,
lycos, ...
los buscadores temticos de turismo y viajes
los buscadores regionales que ms se utilicen en el pas de
donde provengan la mayora de nuestros clientes potenciales.

Recomendaciones personales
Los sistemas ms usuales a parte del boca-odo son esos correos
electrnicos en donde comentas a familiares o amigos tus ltimas
vacaciones y cmo conseguiste ese chollo, y por otro lado, los grupos
de noticias en donde puedes dejar una consulta y te responden
decenas de personas. Incluso las que no han participado
activamente, leen el correo y recogen dicha informacin.
Noticias en prensa escrita

Podramos anunciar nuestra Web en revistas impresas del sector
viajes, para incrementar de forma notoria el nmero de visitantes.
Luego, tan solo nos falta atraer y retener a los que nos visitan
movidos por ese artculo.
Anuncios en la red
El es sistema ms utilizado en Internet. Los banners son pequeos
rectngulos normalmente constituidos por una imagen animada,
colocados a menudo al principio de la pgina, que al hacer clic en
ellos, nos llevan a la pgina del anunciante.
Para incluir banners nuestros en determinados portales o en
publicaciones electrnicas como peridicos o revistas, es necesario
contratar espacio publicitario. Tambin podemos utilizar el servicio
intercambio de banners (http://banners.com.mx/index.html en espaol) de
forma gratuita. Consiste en ceder en nuestro sitio Web un espacio
para que otros puedan incluir sus banners, y de igual manera nuestro
banner aparecer en el resto de sitios que comparten este sistema.
A la hora de disear un banner, se han de tener en cuenta las
dimensiones estndar, que suele ser de 468x60 y de 88x31 pxeles y
adems que su tamao no supere los 10k. Estas limitaciones y el
hecho de que para hacer diseos llamativos en muchas ocasiones se
requiera la utilizacin de Java o de plug-ins, juega en contra de los
banners.
Existen otros mtodos de publicidad adems del banner. Las
ventanas emergentes o pop-up que contiene publicidad del
patrocinador del sitio Web o de cualquier empresa. Tiene como
ventaja frente al banner el hecho de poder incluir ms informacin,
pero, por otro lado tambin resulta ms incomoda a los usuarios que
visitan la pgina y no quieren ver la publicidad.
Internet ofrece el mayor nmero de criterios de segmentacin del
pblico al que quiere dirigir la publicidad: el pas, la informacin
buscada por el usuario, la hora, el navegador, el sistema operativo
utilizado, el contenido de la pgina Web, etc.

Por ello existen distintos modelos de contratacin de espacios

publicitarios: por tarifa fija, por impresiones (page view), por clic
through, y por cualificado.
Imagen de marca de Internet

En todo el material de nuestra empresa (catlogos, folletos, anuncios
impresos, etc.) y en el material de papelera (tarjetas de visita, fax,
sobres, papel,...) debe aparecer el URL de nuestra Web as como la
direccin de correo de atencin al pblico.
Las reglas de oro para que nos visiten y compren nuestro producto
son:
1. Escoger un buen Proveedor de Presencia en Internet
2. Promocionar correctamente nuestro sitio Web, dentro y fuera
de la Red
3. Realizar un diseo equilibrado y dirigido a nuestro pblico
objetivo
4. Realizar un mantenimiento del Web, actualizando la informacin
e innovando
5. Poseer dominio propio (ver aclaracin al final del apartado).
Y en nuestra Web:
6. Dar a nuestro clientes la opcin de recibir informacin, como
noticias o notificaciones de nuevos productos u ofertas
automticamente
7. Crear incentivas para que los clientes continuamente nos
visiten, como concursos, nuevas ofertas semanales, etc.
Cada pgina Web tiene su direccin o URL (Uniform Resource Locator
Localizador Uniforme de Recursos), que debemos escribir en el
navegador para visualizar su contenido. Ej. www.tourspain.com
Algunas empresas o entidades tienen un nombre de dominio propio,
en tal caso no tendran por que instalar un servidor propio para su
sitio Web.
En algunas ocasiones encontramos direcciones que llevan el signo ~
(alt+126) que suele utilizarse en las URL de pginas web personales.
Ej. www.ugr.es/~scu

Tecnologas para la creacin e implantacin de sitios Web
Tema III.
Tecnologas para la
creacin e
implantacin de sitios
Web
Para proporcionar el servicio WWW es necesario disponer de forma

permanente de un servidor web, que no es otra cosa que un
programa que se ejecuta en una mquina fsica (es decir, un
ordenador que, por extensin, tambin recibe el nombre de servidor
web) a la que se ha asignado una direccin nica o URL (Uniform
Resource Locator, o localizador uniforme de recursos), que la
identifica de forma unvoca. Hay muchas formas o sintaxis de
expresar un recurso o dar una URL, ya que depender del protocolo
que estemos utilizando. En la tabla que se muestra a continuacin se
muestran estas sintaxis con sus ejemplos correspondientes.

Sintaxis Ejemplo
ftp://usuario:contrasea@host:puerto/ruta ftp://ftp.rediris.es/gnu/
gopher://host/ruta gopher://gopher.uv.es/
http://host/ruta?bsqueda http://www.ivia.es/
nntp://host:port/nombregrupo/artculo nntp://alt.philosophy/340
telnet://usuario:contrasea@host:puerto telnet://jaguar.pue.udlap.mx
tn3270://usuario:contrasea@host:puerto tn3270://ariadna.bne.es
mailto:usuario@host mailto:sto@uv.es
Wais://host:port/database/wpath?bsqueda wais://wais.com/
File://host/ruta file:///C:/DOCTO/QUAL.HTM
El servidor web se encarga de enviar el contenido de las pginas web

que tiene almacenadas cuando el software recibe una solicitud desde
otra mquina, por medio de otro programa que se denomina cliente
web (aunque a ste se le conoce generalmente como navegador o
browser), y que se ejecuta en la mquina del usuario que quiere
acceder al contenido de dichas pginas.
En dicho envo, el servidor no slo manda la pgina HTML, sino
tambin todos aquellos elementos externos a la misma pero que
forman parte de sta (sonidos, imgenes o iconos, por ejemplo), de
modo que en la pantalla del usuario que ha realizado la peticin se
visualice el resultado original, tal y como fue diseado por su creador.
Recordemos que el lenguaje por medio del cual se efecta la
comunicacin entre los clientes y el servidor se denomina HTTP
(HyperText Transmission Protocol, o protocolo de transmisin de
hipertexto). Dicho lenguaje ofrece no slo los mecanismos necesarios
para enviar la informacin entre mquinas, sino tambin servicios de
encriptacin y autentificacin del cliente. Sin embargo, dado que se
no es nuestro objetivo, no aadiremos nada ms acerca del HTTP.
El lenguaje HTML
La WWW nos ofrece muchos servicios: informacin, juegos, msica,
noticias,... pero hay dos que realmente interesan al profesional del
turismo:
La informacin sobre proveedores tursticos, agencias,
empresas, as como sobre los gustos y preferencias potenciales de
clientes de cualquier parte del mundo

Comercio electrnico con posibilidad de realizar reservas y

transacciones financieras de manera rpida y eficaz.
Las pginas Web son unidades de informacin o ficheros
almacenados en ordenador, situados por todo el mundo en
ordenadores denominados servidores de pginas Web. Estos ficheros
se escriben empleando un lenguaje de marcas conocido como HTML.
Para poder visualizarlo necesitamos dos tipos de programas. Por un
lado un editor para escribir en este lenguaje y por otro lado un
navegador, para ver el resultado de lo que hemos escrito. En esta
asignatura utilizaremos el programa Editplus puesto que es un editor
simple que adems integra el navegador instalado por defecto en el
equipo y todo ello ocupando un espacio ridculo hoy en dia en el disco
duro: menos de 1 megabyte. Estas pginas las crearemos por tanto
con este editor o un simple block de notas, y lo guardaremos con
extensin .html que indica el lenguaje utilizado para su escritura.
Cuando varias pginas web estn agrupadas, entonces constituyen lo
que se llama un sitio web o lugar web. Tpicamente incluye otros
ficheros o recursos como imgenes, audio, o ficheros pdf a descargar.
Cada sitio web tiene una pgina principal o portada (en ingls home
page y en ocasiones front page) que es como la entrada al sitio. Es la
primera pgina que deberamos cargar en el navegador para ver en
su conjunto nuestro sitio, y en concreto para ver la portada de ste.
Existe una particularidad adicional con respecto a este fichero de
entrada a nuestro sitio web y es que se debe llamar index.html no
existiendo ninguna restriccin en cuanto al nombre del resto de
pginas html.
La anterior afirmacin es cierta, pero en parte falsa. Debemos
restringir el nombrado de nuestros archivos como buena prctica en
la creacin de sitios web. Este punto que puede parecer no tan
importante el el origen del 80% de las prcticas de cursos anteriores
(creacin de una web). No me canso de decirlo y explicarlo, si no
tenemos un estilo de nombrado introduciremos errores en nuestro
cdigo y la consecuencia ser que pginas que en nuestra casa se
visualizaban aparentemente bien, dejan de verse de forma completa
(falta una imagen, o un link deja de estar activo) una vez que estn
entregadas y subidas a un servidor de Internet en donde pasan a ser
un documento pblico accesible 24h y 365 das al ao.
Con estilo de nombrado nos referimos al hecho de nombrar a los
ficheros html que vayamos creando de una forma coherente con el
contenido del fichero pero adems evitaremos siempre incluir
caracteres como:
Espacio en blanco. En su lugar usaremos maysculas, guiones o
abreviaturas, ej: blancaNieves, blanca-nieves, blanca_nieves.
, u otros caracteres que podamos decir que son raros como

Acentos. No pasa nada por no usarlos, al contrario, evitamos

problemas.
Las pginas que forman el sitio estn organizadas mediante una

jerarqua de directorios y subdirectorios, ya que al fin y al cabo, son
archivos.
Cada diseador establece los contenidos del sitio web y su
distribucin en diferentes pginas, que pueden enlazarse la una con
la otra mediante hiperenlaces de muy diferente manera. La mayora
de los sitios estn diseados en estructura piramidal, lo que permite
al usuario ahondar en la informacin que ms le interese de una
forma sencilla.

La estructura de la web me est dando una idea visual de la

navegacin. Si en una web al entrar solo tengo una direccin posible,
como si se tratase de un instalador de aplicacin que simplemente
pincho en Siguiente, entonces estoy en un caso de estructura lineal.
Precisamente la idea de navegacin en Internet es cualquier cosa
menos lineal, ya que Internet es como leer un libro sin empezar en el
captulo 1 y terminar en el fin. El extremo opuesto sera una web sin
estructura en la que las pginas se vinculan unas a otras con enlaces,
pero sin orden ni concierto. Es el caos, el desorden y no es
recomendable favorecer que la gente se pierda!
La estructura a la cual debemos tender a la hora de enlazar cada uno
de los ficheros html que creemos es la estructura piramidal, que me
ir ofreciendo los contenidos de menos a ms, desde un raz que es
mi pgina principal a sucesivos niveles que amplan la informacin en
distintos grados, hasta que llegamos al nivel ms bajo que representa
el grueso de nuestro contenido o informacin. Todos los niveles
deben conectarse de alguna forma con el nivel superior para permitir
una mejor navegabilidad.

Gua de referencia
Las pginas web no son otra cosa que ficheros de texto ASCII (o
planos) escritos en formato HTML (HyperText Markup Language, o
lenguaje etiquetado de hipertexto), a las que se puede acceder por
medio de un esquema cliente servidor. Este formato especial se basa
en intercalar, a lo largo del texto que compone la pgina, una serie
de pares de marcas o etiquetas (tags) que indican caractersticas
especiales de dicho texto. Un tag no es otra cosa que un conjunto de
caracteres concreto, que posee un significado especfico y que se
interpreta de forma correcta por el software cliente o navegador. Este
conjunto de caracteres se encuentra encerrado entre los caracteres <
y > si es de apertura, o entre los caracteres </ y > si es de cierre.
Los navegadores o browsers son capaces de interpretar de forma
adecuada estas etiquetas que, salvo excepciones, van en pares
apertura/cierre, actuando as sobre el formato de presentacin visual
de la pgina.
De hecho, si cargamos una pgina web con nuestro navegador
habitual y pulsamos el botn derecho del ratn sobre la misma, se
desplegar un men en el que podremos seleccionar la opcin
correspondiente a Ver fuente. De este modo, se abrir una ventana
en la que podremos visualizar el texto ASCII de la mencionada
pgina, y si nos fijamos con atencin veremos las etiquetas
mencionadas.
Es muy til conocer este lenguaje aunque se de el caso de que en la
empresa en la que vayamos a trabajar no efectuemos la labor de
desarrollo web. Conocerlo implica saber aprovechar todas sus
ventajas y nos dar una idea del alcance real de nuestro portal, de lo
que se puede hacer sin necesidad de montar castillos de arena.
El objetivo de este tema ser por tanto conocer el lenguaje HTML y
ser capaces de trabajar con todos los elementos que seran deseables
en un sitio web comercial, destinado al sector turstico o simplemente
personal. Cada uno de los objetivos particulares se listan en la
transparencia siguiente.

Estructura de un documento HTML

El documento web es simplemente un documento de texto, que toma
su formato a partir del etiquetado. En general, dicho etiquetado sigue
un convenio similar al de los parntesis que se utilizan al escribir una
frmula matemtica: existen tantos de apertura como de cierre, y las
aperturas ms internas son las que primero se deben cerrar. Las
etiquetas, al igual que los parntesis, afectan nica y exclusivamente
a los caracteres delimitados por cada pareja principio/ fin. El conjunto
formado por las etiquetas de principio y final, ms los caracteres
delimitados por ambas, recibe el nombre de contenedor. Ahora bien,
ni todos los elementos necesitan una etiqueta de final, ni todos los
contenedores deben contener texto en su interior, valga la
redundancia.
Aunque no existe una norma al respecto, las etiquetas pueden
escribirse indistintamente en maysculas o minsculas, pero una
buena norma de estilo (y que simplifica notablemente el tiempo
dedicado a mantenimiento y revisin del cdigo de las pginas)
consiste en escribirlas todas en maysculas.
En toda pgina HTML debe aparecer un mnimo de cuatro etiquetas,
con independencia de su contenido. La primera de ellas es la etiqueta
o tag <HTML>, que informa al navegador del tipo de documento que

va a tratar. Anlogamente, su complementaria </HTML> indica al

navegador que el documento ha terminado, por lo que debe ser la
ltima del documento. Justo a continuacin de la etiqueta <HTML>
debe colocarse la etiqueta <HEAD>, la cual sirve como marca para
definir la cabecera del documento, dentro de la cual podremos aadir
informacin complementaria acerca de la pgina. En el interior de
esta cabecera debemos incorporar, obligatoriamente, el tag <TITLE>,
que sirve para aadir el ttulo de la propia pgina, el cual no
aparecer como texto del documento, sino en la barra del ttulo de la
ventana.
Dicho ttulo es el que usan los motores de bsqueda para incorporar

nuestra pgina a sus ndices de resultados. Sin embargo, en este
punto conviene hacer una llamada de atencin, dado que algunos
motores de bsqueda muestran los resultados en orden alfabtico:
resulta muy conveniente, por tanto, dedicar cierto tiempo a definir el
ttulo de nuestra pgina de presentacin, ya que ser la llave para
acceder a las restantes pginas y conviene que se site en las
primeras posiciones de los resultados ofrecidos por un buscador.
Finalmente, una vez concluida la cabecera de nuestro documento,
con la etiqueta </HEAD>, llega el momento de incorporar la ltima
etiqueta obligatoria de la pgina. Esta es <BODY>, y su misin
consiste en delimitar el cuerpo o parte central del documento.

Terminologa
Antes de adentrarnos en este mundo de etiquetas e ir conocindolas
de una en una conviene dejar claro una leyenda de colores utilizados
en los ejemplos, y que corresponde al cdigo de color empleado por
EditPlus (http://lsi.ugr.es/rosana/docencia/turismo/EditPlus.zip).
1. Azul implica etiqueta.
2. Rojo se utiliza para los atributos de las etiquetas
3. Rosa es el valor que le estamos dando a un atributo
4. Verde para los comentarios
5. Negro para el texto que se visualiza en el navegador
Posiblemente sea la primera vez que usted utilice un lenguaje de
programacin, de esos que usan los informticos para implementar
programas hablando con el ordenador. Seguro que usted piensa
adems que no se lleva demasiado bien con el ordenador y no crea
que terminar hablando con el, pero la verdad es que este lenguaje
es de los mas sencillitos y es ideal para aprender con l. Resulta, que
las etiquetas que debemos recordar coinciden con los trminos
anglosajones que tendramos en mente para crear una tabla, una
lista, poner algo de otro color, subrayar el texto etc. Recuerde que

con este lenguaje decimos cmo queremos ver el texto y las

imgenes de nuestra web. Pues bien, deber decirlo prcticamente en
ingls, pero simplificando mucho lo que se escribe, para hacerlo ms
fcil y rpido.
Adems de su parecido al ingls, este lenguaje tiene otras
particularidades que habr que recordar y que se enumeran en la
siguiente transparencia.

Elementos bsicos
Entendemos por elementos bsicos, aquellas etiquetas que son

fundamentales, como por ejemplo las etiquetas HML, HEAD, BODY y
TITLE que definen la estructura mnima de un documento HTML.
Hay otras tantas que son bsicas, por ejemplo las que nos permiten
crear espacios dentro del texto o entre prrafos. Si hemos dicho que
los espacios en blanco y los saltos de lnea no se interpretan (es
decir, se ignoran), entonces, cmo hacemos para que haya saltos de
lnea? Mediante la insercin de etiquetas que lo simulen.
Por ejemplo en este texto hay un salto de
lnea, y si el espacio fuese mayor podramos decir que tenemos
un salto de prrafo.
En el primer caso usamos la etiqueta BR (de break en ingls) y en el
segundo la etiqueta P (de paragraph en ingls). La particularidad de
los prrafos es que tienen un principio y un fin, y por eso se utiliza la
etiqueta de cierre de prrafo para permitir modificar alguna de las

propiedades habituales de los prrafos, y aplicar ese cambio al texto

contenido entre ambas. Por ejemplo, sabemos por los procesadores
de texto que podemos alinear los prrafos a la izquierda, a la derecha
o al centro.
En general todas los cierres de etiquetas son iguales al inicio salvo
que llevan una barra. En un caso hipottico sera: <tag> y </tag>.
Algunas etiquetas no necesitan cierre ya que no tienen que contener
nada, como es el caso del salto de lnea BR.
Uno de los elementos visuales ms tiles a la hora de dividir una
pgina web en partes claramente diferenciadas son las lneas
horizontales: etiqueta HR (de horizontal rule en ingls). Por defecto
se trata de lneas sombreadas que cuando se visualizan sobre un
fondo gris parecen barras tridimensionales, trazadas a todo lo ancho
de la pgina. Para aadirlas a nuestras pginas, bastar con hacer
uso de la etiqueta <HR>, aunque sta ofrece cuatro atributos
adicionales, que describimos a continuacin.
As, con <HR SIZE=n>, podemos especificar el grosor de la lnea,
siendo n el nmero de pxeles que sta ocupa; mientras que con <HR
WIDTH=n>, podemos especificar la anchura de la lnea, siendo n el
numero de pxeles. Por su parte <HR ALIGN=alineacin>, indica la
alineacin de la lnea, con los tres valores posibles de izquierda
(LEFT), centro (CENTER) y derecha (RIGHT). Finalmente, si
utilizamos <HR NOS-HADE> obtendremos una lnea sin sombreado
horizontal.
En este documento se utiliza las maysculas para destacar el nombre
de la etiqueta, pero en realidad es indiferente escribirlo en
maysculas o minsculas, eso s se recomienda hacerlo siempre
igual. Y es mas, yo recomiendo escribir en minsculas, ya que las
maysculas en Internet representa hablar en alto, o gritando.
A continuacin mostramos un ejemplo en el que se presentan con
mayor claridad las diferencias entre los tags presentados en este
apartado, y en el que tambin se ve un ejemplo de otro elemento
ntimamente relacionado con stos, pero al que apenas hemos
prestado atencin: se trata de la justificacin o alineado, referido
nica y exclusivamente al prrafo que est enmarcado por la etiqueta
de apertura y la correspondiente de cierre. Ntese que la ausencia de
acentos es intencionada. El cdigo fuente es el siguiente:
<HTML>
<HEAD>
<TITLE>Ejemplo 1 de pagina Web</TITLE>
</HEAD>
<BODY>
<P>Bienvenidos a nuestra primera pagina!</P>
<P>Esto es un ejemplo de utilizacion</P>

<P>del tag de parrafo</P>

<P>Y esto un ejemplo de utilizacion
<BR>del tag de retorno de linea</P>
<P ALIGN=right>Para concluir la pagina,
<BR>se muestra un ejemplo de alineacion derecha</P>
<P ALIGN=justify>Seguido de otro mas de alineacion
justificada. En este caso se requiere la presencia
de mas texto para apreciar el efecto.</P>
<P ALIGN=center>Y otro de alineacion centrada.</P>
<P>Notese que si no se indica nada, la alineacion por
defecto es a la izquierda</P>
</BODY>
</HTML>
Imagen 1 Resultado de nuestro primer ejemplo.

Estilos y formato
Ya hemos visto la estructura genrica de toda pgina .HTML,
compuesta siempre por una cabecera y un cuerpo, y aprendimos
igualmente a incorporar nuestro propio texto a cualquiera de estas
pginas. Con estos simples conocimientos ya es posible comenzar a
crear contenidos, dado que en toda pgina web lo realmente
importante es la informacin que contiene, no la forma en que sta
se presenta.
De hecho, aunque tradicionalmente se puede afirmar que una imagen
vale ms que mil palabras, en la Web sucede justo lo contrario; es
decir, las palabras (y, por tanto, la informacin que encierran) son
tanto o ms valiosas que las imgenes que puedan adornar nuestras
pginas (sin que ello suponga, por supuesto, un menosprecio de
stas y teniendo siempre en cuenta los mandamientos de diseo
que indicamos en el anterior tema). Ahora bien, la utilizacin masiva
de texto contradice precisamente una de las mencionadas reglas de
diseo, es decir, la de organizar la informacin y presentarla de
forma atractiva y legible. Pues bien, entre otros, el lenguaje HTML
nos ofrece el mecanismo de los denominados titulares o cabeceras,
que permiten estructurar el texto en distintos niveles de importancia,
mediante seis etiquetas distintas, desde <H1> hasta <H6>.

Cada etiqueta de cabecera (head y de ah la H) funciona como un

estilo de encabezado en un procesador de texto o como un nivel
dentro de un esquema, permitiendo as la elaboracin de una
estructura y subdivisin en el documento. Aunque se pueden utilizar
hasta seis niveles de titulares, por cuestiones de estilo y legibilidad
dentro de cada pgina es recomendable limitarse a un mximo de
cuatro. Ntese que puesto que los titulares no son prrafos, no
necesitan hacer uso de las etiquetas <P> y </P>. A modo de
ejemplo, en la Imagen 2 se muestra el resultado del siguiente cdigo:
<HTML>
<HEAD>
<TITLE> Uso de titulares </TITLE>
</HEAD>
<BODY>
<P> Esto es texto normal, para mostrar el uso de titulares
</P>
<H1> Esto es un titular de primer nivel </H1>
<H2> Esto es un titular de segundo nivel </H2>
<H3> Esto es un titular de tercer nivel</H3>
<H4> Esto es un titular de cuarto nivel</H4>
<H5> Esto es un titular de quinto nivel</H5>
<H6> Y esto es un titular de sexto nivel</H6>
</BODY>
</HTML>

Por estilo y formato de texto nos referimos al cambio en la

visualizacin del texto simple, o texto plano (aquel que aparece por
defecto). Podemos modificar el texto de muchas maneras posibles
como ya sabemos. Podemos usar la negrita, cursiva y subrayado, y
adems podemos hacer uso combinado de estos estilos, por ejemplo
negrita y subrayado, cursiva y negrita o bien todo junto.
Este mismo efecto se puede aplicar en HTML, tan solo hay que
agrupar ms de una etiqueta STRONG, EM, U, que contenga al texto
que queremos modificar. Es importante, eso s mantener un orden en
el cierre de etiquetas, un orden denominado por cajas: la primera
que se abre es la ltima en cerrarse.
Pero no hay cosa que ms modifique el aspecto de un texto que su
tipo de letra, tipo de fuente (o FONT), su color y su tamao. De
igual forma estos cambios se pueden realizar de forma
combinada en HTML gracias a la etiqueta FONT y sus atributos
FACE, COLOR y SIZE.

A modo de ejemplo, el resultado del siguiente cdigo se puede

visualizar en la Imagen 3:
<HTML>
<HEAD>
<TITLE> Ejemplo: Jugando con los tipos de fuente </TITLE>
</HEAD>
<BODY>
<P>Esta es la fuente por defecto en nuestro navegador </P>
<FONT FACE= Verdana>
<P> Ahora seleccionamos una fuente de tipo Verdana </P>
</FONT>
<FONT FACE= Arial, SIZE=1>
<P>A continuacin, cambiamos a una fuente de tipo Arial y
tamao 1
</FONT>
</BODY>
</HTML>

Como sera de suponer por lo que hemos visto hasta el momento,

sobre el texto podemos aplicar otras caractersticas que nos
permitirn mostrar un resultado an ms atractivo, como por ejemplo
el centrado (mediante la etiqueta <CENTER>), el enfatizado
mediante negritas (con la etiqueta <STRONG>) o el enfatizado
mediante cursiva (con la etiqueta <EM>).
<HTML>
<HEAD>
<TITLE>ejemplo</TITLE>
</HEAD>
<BODY>
<P> Este es el formato de prrafo que se usa por defecto
</P>
<CENTER> <P> Este es el mismo formato de prrafo, con
centrado </P> </CENTER>
<P>Esto muestra cmo resaltar texto en
<STRONG>negrita</STRONG> </P>
<P> Y esto muestra cmo resaltarlo en <EM> cursiva </EM>
</P>
</BODY>
</HTML>

En ocasiones deseamos que esos coloridos y cambios se efecten en

el texto tan simple que se usa por defecto. Para ello se usa
modificadores (atributos) de la etiqueta BODY, ya que como
recordamos engloba a todo el texto visible y por tanto afecta de
forma global a todo el texto de una pgina HTML.
Podemos modificar el color del texto cuando:
text: es el normal
link: es un enlace
alink: es un enlace activo
vlink: es un enlace visitado
La forma de proporcionar valores para el color es variada ya que
podemos especificar un color por su nombre anglosajn (pink, gray,
orange) o bien podemos dar su representacin en hexadecimal que
podemos obtener de un selector, habitual en los programas de
edicin de imgenes.

Ahora que hemos explicado los fundamentos ms bsicos del

lenguaje, haremos una parada para explicar una norma no escrita
pero de cumplimiento generalizado en la Red, referente al estado de
actualizacin de las pginas. Es decir, lo habitual es que a la hora de
disear nuestras pginas web reservemos al menos una lnea
(generalmente en la parte inferior de las mismas), destinada a
mostrar tanto la fecha de creacin como la fecha de ltima
actualizacin de los contenidos
La utilidad de dicha informacin consiste en permitir a nuestros
visitantes hacerse una idea bastante aproximada de la calidad de los
contenidos (como es natural, no deberamos esperar unos contenidos
frescos en unas pginas que no se han actualizado en los ltimos
tres aos, por ejemplo), pero se convierte tambin en un arma de
doble filo, ya que nos exigir una mayor dedicacin al mantenimiento
de las mismas. Este ltimo es un elemento del que no habamos
hablado hasta el momento pero, haciendo un breve inciso en el hilo
de nuestra narracin, debemos dejar claro que el diseo de nuestras
pginas web es una actividad sumamente gratificante y bastante
absorbente, a poco que deseemos ofrecer un mnimo de calidad. Al
igual que sucede con otras actividades que podamos realizar con el
ordenador, el diseo de pginas web es una labor de ndole creativa
y, como tal, motivadora.

Slo con que nos metamos en este mundillo nuestra curiosidad ir en

aumento, y nuestro inters por aprender nuevas tcnicas ser una
constante. En relacin con el tema de las fechas tenemos que dejar
claro que para stas no se requieren nuevas etiquetas, sino que es
preferible aadir dicho texto con un tamao muy reducido. Como
nota adicional tenemos que decidir si disearemos nuestras pginas
en castellano o en ingls, dado que en este ltimo caso el convenio
de notacin es diferente: 10-8-00 no significa 10 de agosto, sino 8 de
octubre. Por ello, es aconsejable indicar explcitamente el mes.
<HTML>
<HEAD>
<TITLE> Otro ejemplo de pgina personal </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Bienvenidos a mi nueva pgina personal! </H1>
</CENTER>
<P> Esta pgina est en construccin, pero los contenidos se
actualizarn en breve </P>
<HR>
<P>
<CENTER>
<FONT FACE=Arial, SIZE=1> Pgina creada el 10 de
Octubre de 2001 </FONT>
</CENTER> </P>
</BODY>
</HTML>

Caracteres Especiales
Cuando escribimos en html usamos determinados caracteres para
indicar < aqu empieza una etiqueta o > se terminaron los atributos,
y muchos otros ms. Qu ocurre cuando yo intento escribir el texto
15 < 17? Se pensar que quiero empezar una etiqueta? Pues s, no
podemos mezclar el significado de estos caracteres, por lo que
debemos usar un cdigo que al renderizar la pgina sea reemplazado
por el carcter que queramos mostrar. Como siempre debemos
buscar el trmino en ingls para dar con el nemotcnico a usar. Por
ejemplo: 15 is less than 17 y el texto a escribir sera 15 < 17.
Ntese que todos los cdigos empiezan por el carcter & y terminan
por ; pero entonces estoy con el mismo problema! Si uso en mi
texto & pensar que estoy iniciando un cdigo y estoy en el mismo
caso que con <. Es por ello que no podemos escribir & directamente y
en su lugar lo reemplazaremos por un cdigo para carcter especial.
Es cierto que esta no es la nica motivacin de estos cdigos, lo es
adems la riqueza de caracteres de otros idiomas (incluido el nuestro
con sus acentos y la ), y el hecho de no disponer de determinados
caracteres directamente por teclado, como es el caso del copyright
.
A continuacin os muestro algunos ejemplos de cdigos especiales y
los caracteres que se renderizan al usarlos.
< < > >
& & " "
Caracteres especiales del HTML 2.0

Á À
É È
Í Ì
Ó Ò
Ú Ù
á à
é è
í ì
ó ò

ú ù
Ä Â
Ë Ê
Ï Î
Ö Ô
Ü Û
ä â
ë ê
ï î
ö ô
ü û
Ã å
Ñ Å
Õ Ç
ã ç
ñ Ý
õ ý
Ø ÿ
ø Þ
Ð þ
ð Æ
ß æ
Caracteres especiales del HTML 3.2
¼
½ ¡
¾ £

© ¥
® §
ª ¤
² ¦
³ «
¹ ¬
¯
µ º
¶ ´
· ¨
° ±
¸ »
¿
Otros caracteres especiales
× ¢
÷ €


Listas de numeracin
Las listas son elementos muy sencillos y cotidianos. Todos hacemos

una para organizar las tareas de estudio o para hacer la compra en el
supermercado. Lo importante es saber dnde empiezan y terminan
para usar los delimitadores de lista, y empezar cada elemento de lista
(list item o LI) con la etiqueta adecuada.
Tenemos varios tipos de lista:
Lista ordenada (OL) en la que los tems tienen un siguiente y
un anterior.
Lista desordenada (UL) como es este caso en la que usan
vietas.
Listas de definicin (DL) para indicar, por ejemplo, trminos de
un glosario. En este caso los tems son ms complejos ya que
hay que distinguir entre el trmino de definicin (DT) y los
datos que definen en s el trmino.

Imgenes
Las imgenes son los elementos ms enriquecedores de nuestra web,

y los que aportan ms colorido y grafismo al aspecto global de la
pgina. Su importancia es mucha, pero su uso es bien simple.
Lo mnimo que hay que hacer para incluir una imagen es decir dnde
est y como se llama haciendo uso del atributo SRC (source u origen)
dentro de la etiqueta IMG (image). De forma ms amplia podemos
especificar el alto y el ancho de la imagen en nmero de pxeles o
bien en tamaos relativos (porcentuales), si queremos borde o
contorno de imagen, y tambin podremos dar un texto alternativo /
descriptivo a esta. Este texto ALT es de gran importancia para las
personas discapacitadas que utilizan software especial que lee el
contenido de aplicaciones pginas web, por lo que es muy
importante rellenarlo a pesar de no ser un atributo obligatorio.

Hagamos un pequeo inciso en el mundo de las etiquetas para saber

cmo vamos por ahora en el mundo del HTML. A estas alturas ya se
habrn hecho muchos ejercicios en clase, pero lo ms importante es
que ya habris practicado en el aula de prcticas la creacin de
pginas web.
Seguramente muchos habis tenido dificultades ya que simplemente
no estis habituados a expresar vuestras ideas en un lenguaje, ya
que lo normal es entrar con el ratn en algn men y hacer un
cambio dentro de los parmetros que se os sugiere.
Es por ello que llegados a este punto hago una recopilacin de los
errores mas habituales, para que no pensis que solo os pasa a
vosotros. Es muy importante destacar que los errores en HTML no se
avisan, y es posible que tengamos muchos sin saberlo. No obstante
hay que evitarlos e intentar corregirlos ya que de existir, el resultado
y la salida por pantalla es indeterminada: puede verse bien o
puede ser un autntico estropicio as que revisa tu cdigo!!

Enlaces
Cuando se estn diseando pginas web hay que intentar, de acuerdo
con las reglas de diseo que sealamos en la entrega previa, que
stas sean concisas, lo cual nos obligar a dividir nuestros contenidos
en un conjunto de pginas y, consecuentemente, a incorporar enlaces
entre todas ellas. Es ms, en HTML se pueden definir tres tipos
distintos de enlaces:
- enlaces dentro de una misma pgina,
- enlaces a otras pginas situadas dentro del propio sistema y
- enlaces hacia pginas situadas en otros sistemas.
Los enlaces o referencias dentro de una misma pgina nos conducen
hacia otro punto de la misma pgina web en la que nos encontramos.
Los enlaces dentro del propio sistema apuntan a otros elementos
(grficos, imgenes, sonidos) o bien a otras pginas, generalmente
creadas por nosotros mismos, que se alojan dentro del mismo
servidor. Finalmente, los enlaces hacia otros sistemas apuntan a
pginas alojadas en otros servidores. Para establecer un enlace
usaremos una etiqueta del tipo <A HREF></A>, con una sintaxis
ligeramente diferente en funcin del tipo de enlace que queramos
establecer.

As, para establecer un enlace dentro de la misma pgina usaremos

una etiqueta auxiliar, del tipo
<A NAME=nombre_enlace> </A>
posicionada en el sitio al que queremos establecer el enlace. Al
mismo tiempo, en el punto desde el que vamos a efectuar el enlace,
utilizaremos la etiqueta:
<A HREF=#nombre_enlace>Enlace dentro de la pgina </A>
Para establecer un enlace a otra pgina o archivo local usaremos la

sintaxis
<A HREF=nombre_archivo> Enlace a un archivo local </A>
Ntese que, al igual que en el caso del enlace anterior, las comillas
son obligatorias y cuando visualicemos el resultado en nuestro
navegador aparecern subrayadas las palabras situadas entre el
smbolo > de la etiqueta <A HREF> y el smbolo < de la etiqueta
</A>.
Finalmente, para establecer un enlace hacia una pgina situada en un
servidor remoto, utilizaremos la misma sintaxis que se emplea en el
caso de un enlace local, con la nica diferencia de tener que indicar la
direccin o URL completo dentro de las comillas.
Adems de los indicados en el punto anterior, existe un tipo particular
de enlace que permite que los visitantes de nuestras pginas puedan
ponerse en contacto con nosotros por medio del correo electrnico
para enviarnos sugerencias, comentarios, etc. Su sintaxis es similar
a la que hemos visto en los prrafos anteriores, aunque con una
ligera diferencia:
<A HREF=mailto:direccin>Texto</A>
Otra posibilidad ms elaborada consiste en utilizar una imagen como
activador de un enlace, es decir, que al pulsar encima de la imagen
fusemos directos a dicho enlace. Para ello, la sintaxis es
relativamente sencilla, y bastar con escribir en el cdigo de nuestra
pgina
<A HREF=enlace><IMG SRC=nombre_imagen></A>
En el siguiente cdigo, se muestran ejemplos de distintos tipos de

enlaces:
<HTML>
<HEAD>
<TITLE> Mi pgina personal avanza </TITLE>
</HEAD>
<BODY>
<CENTER>

<H1> Bienvenidos a mi nueva pgina personal! </H1>

</CENTER>
<P> Esta pgina est en construccin, pero los contenidos se
actualizarn en breve. Si deseas enviarme cualquier
sugerencia, puedes <A HREF=mailto:rosana@ugr.es>
escribirme.</A></P>
<P> Desde esta pgina tambin puedes acceder a informacin
de <A HREF=www.intel.com> Intel </A> y <A
HREF=www.amd.com>AMD</A> </P>
<HR>
<P><FONT FACE=Arial SIZE=1> Pgina creada el 7 de mayo de
2001. Fecha de ltima actualizacin, 24 de Octubre de 2001
</FONT></P>
</BODY>
</HTML>

Cuando creamos un enlace a una pgina o recurso de Internet

debemos hacerlo especificando su protocolo, que por norma general
es el del servicio web. Por eso si estoy indicando mis referencias o
bookmarks favoritos usaremos:
<a ref=http://www.google.es>Un buen buscador</a>
Una de las cosas que nos puede resultar mas complicado es

referenciar documentos, pginas html o imgenes llammosles
recursos de forma generalque no se encuentren en la misma
localizacin fsica en disco que el fichero que estamos editando.
Recuerda que en el momento en el que no pongas el nombre del
protocolo seguido del :// pensar que buscas un recurso local, es
decir, un fichero llamado www.google.es en el caso del ejemplo
anterior.
Entonces si yo quiero publicar un PDF con los resultados de una
encuesta por ejemplo, lo primero que me debo plantear es dnde
est ese fichero? Si est en el mismo sitio ordenador que el resto de
recursos entonces debemos especificar la ruta relativa al recurso.
La ruta relativa es la opuesta a la absoluta, pero nunca debemos usar
la ruta absoluta (la que empieza desde el raz de la unidad). Esta ruta
comienza en la misma carpeta que el fichero que estamos editando
(para ponerle la etiqueta de enlace, claro) y puede mirar hacia arriba

(representado por los smbolos ..) hacia carpetas contenedoras, o

bien hacia abajo en busca de carpetas contenidas, hasta que
encontremos el recurso buscado.
Por ejemplo editamos un fichero listado.html que est en la carpeta
contenido y queremos crear un enlace que permita descargar la
encuesta.pdf que est en la carpeta datos. Desde contenido cmo
accedemos a datos? Pues subiendo un nivel, ya que eso nos
localizara en web y es de web donde cuelga datos.
<A HREF=../datos/encuesta.pdf>Ver encuesta (PDF)</A>
Ahora bien, si la situacin hubiese sido esta, entonces nuestro enlace

se modificara, ya que datos est contenida por la carpeta actual y
vamos hacia abajo simplemente escribiendo el nombre de los
directorios por los que pasamos:
<A HREF=datos/encuesta.pdf>Ver encuesta (PDF)</A>

Tablas
Otro elemento sumamente til para estructurar la informacin en

nuestras pginas son las tablas, las cuales no sirven nicamente para
mostrar datos organizados en filas y columnas, sino tambin para
dividir los contenidos en distintas zonas horizontales o verticales.
No obstante, aqu nos centraremos nicamente en la primera
posibilidad, en el significado ms clsico de tabla, reservando la otra
para ms adelante. Para ello, dentro de nuestras pginas HTML, las
tablas se delimitan con los tags <TABLE> y </TABLE>, intercalando
dentro de stos los contenidos correspondientes a la tabla y tres tipos
de etiquetas adicionales, que permiten organizar dichos contenidos:
<TH> para informacin de cabecera (junto con </TH>); <TR>, para
informacin de fila; y <TD>, para los datos propiamente dichos
(junto con </TD>).
Para verlo con mayor claridad, la imagen de la pgina siguiente
muestra el resultado correspondiente al cdigo.
<HTML>
<HEAD>

<TITLE> Ejemplo de uso de tablas </TITLE>

</HEAD>
<BODY>
<CENTER> <H1> Anlisis qumico </H1> </CENTER>
<P> En la fabricacin de nuestro delicioso refresco
intervienen nicamente componentes naturales,
cuyo anlisis se muestra a continuacin:
</P>
<CENTER>
<TABLE BORDER>
<TR> <TH> Elemento </TH>
<TH>Cantidad (mg/l)</TH>
<TR> <TD> Carbonatos </TD>
<TD> 255,1 </TD>
<TR> <TD> Nitratos </TD> <TD> 23,8
</TD>
<TR> <TD> Sulfuros </TD> <TD> 2,1
</TD>
<TR> <TD> Calcio </TD> <TD> 55,3
</TD>
<TR> <TD> Magnesio </TD> <TD> 47,4
</TD>
</TABLE>
</CENTER>
<HR>
<P> <FONT FACE=Arial, SIZE=1> Pgina creada el 7 de mayo
de 2001. Fecha de ltima actualizacin, 9
de mayo de 2001</FONT> </P>
</BODY>
</HTML>

Ahora bien, no podemos concluir este apartado sin mencionar tres

parmetros que nos permitirn controlar distintos aspectos de
nuestras tablas. El primero de ellos es el de justificacin, ALIGN, que
puede ser izquierda (LEFT), derecha (RIGHT) o centrada (CENTER).
Dicho parmetro se puede usar indistintamente con los tags <TH> y
<TD>. Por ejemplo, con <TD ALIGN=RIGHT> conseguiremos que
el contenido de la celda en cuestin quede justificado a la derecha. El
segundo parmetro de inters es BORDER, que aparece en el anterior
ejemplo y que se usa en el tag TABLE para indicar que las celdas de
la tabla deben estar delimitadas por lneas.
Finalmente, contamos tambin con el parmetro WIDTH para
especificar el ancho total de la tabla (junto con <TABLE>) o de cada
columna (junto con el tag <COL>). Este parmetro se usa en
conjuncin con otro parmetro adicional, UNITS, que puede tomar los
valores PIXEL(es decir, puntos de pantalla) o RELATIVE(es decir,
porcentaje sobre el ancho total de la pgina). As, por ejemplo, con:
<TABLE WIDTH=50%> </TABLE>
definimos que el ancho de la tabla es la mitad del tamao de la
pgina, con independencia de la resolucin existente en el puesto
cliente.

Los aspectos avanzados de las tablas vienen con la personalizacin

general de los espacios de la tabla y el uso de la combinacin de
celdas. La etiqueta <CAPTION></CAPTION> introduce un texto de
ayuda sobre la tabla que aparecer sobre esta.
Por lo general el tamao de la celda se ajusta al texto; si el texto es
ms ancho la columna se ensanchar.
Sin embargo podemos establecer un espacio, independientemente del

texto el espaciado de ste con respecto a las lneas o bordes de la
celda. Esto se hace con el atributo cellpadding que con un valor de
30 deja la tabla anterior de la siguiente forma.
Sin embargo tambin podemos especificar la distancia entre las

celdas siendo equivalente a decir el grosor de las lneas del borde de
la celda. Este parmetro que se especifica en valore de pxel se
denomina cellspacing, y lo hemos puesto de forma exagerada a 30.
Si combinamos los dos valores a un tamao de 15 pxeles, el

resultado es el siguiente, que es con diferencia distinto al de la tabla
original.

El segundo aspecto avanzado de las tablas es la combinacin de

celdas en horizontal (colspan) y en vertical (rowspan). Cuando
combinamos celdas debemos asegurar que el nmero total de celdas
de datos equivalen a las dimensiones de la tabla que tenemos en
mente de forma inicial. Por ejemplo la siguiente tabla 3 x 3 puede
sufrir un cambio considerable de aspecto.
Combinando en horizontal las celdas con el texto lunes, martes

y mircoles. A la vista eso equivale a tener una nica celda en
la primera fila y a que sta vale por tres. Aqu usamos
colspan=3
Combinando en vertical los datos sbado y puente. Esto implica
que la segunda fila, tercera celda sufre una alteracin y vale
por dos: rowspan=2. Pero hay ms cambios, ya que la celda
que contiene puente desaparece (est contenida en la de
sbado que es ms grande. Si desaparece puente, la tercera
fila tiene solo dos celdas de datos.
Veamos esos cambios primero con el resultado deseado y segundo

con su cdigo HTML.

<HTML>
<HEAD>
<TITLE> Tablas avanzadas </TITLE>
</HEAD>
<BODY>
<TABLE border="1" cellspacing="5" cellpadding="10">
<TR>
<TD colspan="3">lunes martes miercoles</TD>
</TR>
<TR>
<TD>jueves</TD>
<TD>viernes</TD>
<TD rowspan=2>sabado puente</TD>
</TR>
<TR>
<TD>domingo</TD>
<TD>fiesta</TD>
</TR>
</TABLE>
</BODY>
</HTML>
El elemento colgroup puede emplearse para agrupar columnas y

formatearlas conjuntamente. El nmero de columnas se especifica
con el atributo span y cada columna tiene un elemento col.
<colgroup>
<!la primera a la derecha>
<col align=right>
<!las cuatro siguientes centradas>
<col span=4 align=center>
</colgroup>
Es posible alinear el texto verticalmente con el atributo valign que

puede tomar los valores top | middle | bottom | baseline (por defecto
a middle). Se usa como se muestra en el siguiente ejemplo:
<th colspan=4 valign=top>
Meta-etiquetas
Son etiquetas que no pretenden modificar nuestra pgina y por tanto
no estn dentro de la etiqueta BODY sino que lo estn en HEAD.
Proporcionan informacin de utilidad al navegador, y es utilizado por
los motores de bsqueda para obtener ms informacin sobre la
pgina web, por ejemplo el tema en general que trata o los trminos
(keywords) que mejor la describe.

El atributo NAME = keywords | description (autor + generator) indica

el tipo de informacin que se va a describir en el atributo CONTENT.
La etiqueta <!DOCTYPE> indica la versin concreta de HTML que
utilizamos.
El uso general de las meta-etiquetas no es obligatorio pero s muy
recomendable y debe estar (aunque sea repetido) en cada uno de los
ficheros de nuestra web.
Estilos con CSS

Las hojas de estilo o Cascade Style Sheet (CSS) son uno de nuestros
mejores aliados para conseguir un aspecto homogneo y una mayor
claridad en nuestro cdigo.
Para comprender con mayor claridad la importancia y la potencia de
este mecanismo, baste con recordar que en apartados anteriores
hemos aprendido los tags o etiquetas de HTML que nos permitan
definir tanto el tamao como el tipo de letra de un prrafo o palabra,
o bien el nivel de estructura correspondiente (por medio de los
encabezados o headings).

Sin embargo, a menos que hiciramos uso de estilos estandarizados

o incluso aunque modificsemos stos, lo cierto es que para
garantizar que el aspecto que veran los potenciales visitantes de
nuestras pginas sera el mismo que nosotros habamos diseado
inicialmente, venamos obligados a dedicar una enorme cantidad de
tiempo a retocar, una por una, la mayor parte de las etiquetas
correspondientes a caractersticas del texto. Y eso sin contar con la
posibilidad de errores en pginas que no se ajustasen al diseo
deseado simplemente porque alguna etiqueta se nos hubiese pasado
sin modificar.
La tediosa situacin descrita se puede evitar de una forma muy

sencilla por medio de la aplicacin de reglas de carcter general que
se definen en las hojas de estilo. stas permiten controlar tanto el
formato del texto como los colores, la posicin de las imgenes y
muchas otras caractersticas propias de las pginas HTML.
La ventaja fundamental de la utilizacin de hojas de estilo consiste en
que stas son sencillas de definir y se pueden aplicar de manera
general a todas nuestras pginas, permitiendo as que stas ofrezcan
un aspecto homogneo. Es ms, modificar en el mnimo tiempo
posible el aspecto de aquellas pginas que se basan en la utilizacin
de hojas de estilo es tan simple y tan rpido como efectuar las
modificaciones sobre la correspondiente hoja de estilo, lo que
garantiza que los cambios se aplicarn de forma inmediata a todas
las pginas HTML.

Ahora bien, para entender mejor el concepto, vamos a hacer un

breve inciso. Cualquiera que haya utilizado en alguna ocasin un
procesador de textos habr visto (e incluso usado) los estilos. stos
permiten, aplicados en un punto concreto del texto, garantizar que el
aspecto de todo el documento ser homogneo. Adems, cualquier
cambio en la definicin de un estilo concreto se puede propagar de
forma inmediata a travs de todo el documento.
Pues bien, salvando las diferencias, la funcin de las hojas de estilo
es muy similar a la de los estilos propios de un documento, con la
salvedad de que en el caso de la pgina web el equivalente al
documento de texto es en realidad un conjunto de documentos (el
conjunto de pginas HTML).
En realidad, y para hablar con total propiedad, debemos mencionar la
existencia de tres posibilidades distintas en lo que respecta a la
utilizacin de las hojas de estilo en las pginas de un sitio web:
1. aplicar estilos definidos a elementos individuales dentro de una
pgina,
2. crear una hoja de estilos incrustada o embebida en una pgina,
3. y vincular pginas a una hoja de estilos externa.
Estos niveles de aplicabilidad son los que dan el nombre de cascade a
este lenguaje de estilos. Los comentamos ahora de forma individual
La modificacin en lnea de etiquetas concretas dentro de una pgina

HTML, ampliando por ejemplo el tamao en puntos de un cierto tipo
de encabezado, es quiz la forma ms simple de aplicacin de estilos,
pero es tambin la ms ineficaz, puesto que la modificacin de estilo
se aplicar nica y exclusivamente a la etiqueta seleccionada, y no
podremos reutilizar dicha regla. Un ejemplo de este tipo de estilo se
puede observar en el siguiente fragmento de cdigo:
<P>Aqu tenemos texto estndar</P>
<P STYLE="color:blue" > Ahora es de color azul</P>
<P>Aqu contina el texto estndar</P>
Como se puede observar, la utilizacin del atributo o modificador

style dentro del tag de prrafo permite aplicar una modificacin
concreta (en este caso el color azul al texto) tan slo dentro de ese
prrafo.
El siguiente paso consiste en incluir dentro de la propia pgina HTML
la hoja de estilo correspondiente, de modo que sta se aplicar nica
y exclusivamente a dicha pgina. Son los estilos incrustados o
embebidos.

Una hoja de estilos incrustada es un tipo de hoja de estilos en

cascada, es decir, incrustada dentro de las etiquetas <HEAD> de una
pgina. Los estilos de una hoja de estilos incrustada slo se pueden
utilizar en esa misma pgina.
Un ejemplo de este tipo de estilo se puede observar en el cdigo del
siguiente ejemplo:
<HTML>
<HEAD>
<TITLE>Hojas de estilo incrustadas</TITLE>
<STYLE TYPE="text/css">
H1 {font-size: 20pt; font-style:italic}
</STYLE>
</HEAD>
<BODY>
En este ejemplo se puede observar que la etiqueta <STYLE> se

incluye en la cabecera del documento (dentro de los tags HEAD), lo
cual resulta lgico ya que este tipo de ajustes afecta al documento
completo. Tambin hay que llamar la atencin acerca del atributo
TYPE="text/css", lo cual implica que estamos usando el mecanismo
de hojas de estilo presente en HTML 4.0 (hablaremos con mayor
detalle de este punto en un apartado posterior de esta misma
leccin).
Puede que queramos habilitar o deshabilitar CSS, por si alguna
caracterstica de estilo no se encuentra disponible (es decir, se
muestra como desactivada) o si queremos impedir la utilizacin de
hojas de estilo para asegurar compatibilidad con todo tipo de
navegadores.
Las hojas de estilos externas son la solucin en aquellos casos en que
se desea aplicar los mismos estilos de forma coherente en algunas o
en todas las pginas del sitio Web. Al definir los estilos en una o ms
hojas de estilos externas y vincularlas a las pginas, se asegura la
coherencia de la apariencia en todas esas pginas. De hecho, si se
decide cambiar un estilo, slo se necesita hacer un cambio en la hoja
de estilos externa, el cual se ver reflejado a su vez en todas las
pginas vinculadas a esa hoja de estilos.
Normalmente, una hoja de estilos externa utiliza la extensin de
nombre de archivo .css (cascade style sheet u hoja de estilo en
cascada), un trmino poco afortunado que describe en realidad un
conjunto de reglas para usar las hojas de estilo, es decir, en otras
palabras y salvando las distancias pertinentes, algo as como una
hoja de estilo acerca de las hojas de estilo.
Ahora bien, llegados a este punto conviene hacer un brevsimo inciso,
puesto que por la mente de ms de uno debe estar circulando la
misma pregunta: qu sucede si tenemos una pgina con hojas de

estilo incrustadas o definidas individualmente? Bien, en ese caso nos

hallamos ante una situacin de precedencia, y la respuesta es
realmente sencilla, dado que los estilos incrustados o definidos para
esa pgina tendrn prioridad sobre las propiedades especificadas en
la hoja de estilos externa.
La hoja de estilos en cascada (CSS) define los estilos que puede
aplicar a las pginas o a los elementos de pgina. Cada definicin de
estilo, o regla de estilo, consiste en un selector seguido de las
propiedades y los valores de ese selector. A continuacin se muestran
ejemplos simples de reglas de estilo definidas en una hoja de estilos:
H1 { font-size: x-large; color: green }
H2 { font-size: large; color: blue }
.note { font-size: small }
#footer { font-family: serif }
Los dos primeros ejemplos, H1 y H2 son selectores que modifican las

propiedades de formato de etiquetas HTML estndar. Las propiedades
de los selectores y los valores se encuentran dentro de corchetes { },
siendo font-size una propiedad y x-large el valor de la propiedad
tamao fuente. Adicionalmente se pueden especificar propiedades
mltiples para un selector separando cada una de ellas con un punto
y coma. As, en el ejemplo, .note es un selector de clase y #footer es
un selector de Id.
Conviene destacar que al utilizar hojas de estilos en cascada, se
puede establecer una variedad ms amplia de propiedades que al
utilizar slo formato HTML estndar, entre las que se incluyen efectos
de fuente (como versalita, es decir, todos los caracteres en
maysculas o espaciado entre caracteres expandido), propiedades de
prrafo (como sangra, interlineado y espaciado antes o despus),
propiedades de bordes y sombreado (como recuadros y colores de
fondo) o propiedades de ubicacin (como ajuste de texto alrededor
de los elementos de pgina, ubicacin absoluta o relativa de los
elementos de pgina y orden z (de adelante hacia atrs) de los
elementos de pgina.
Dada la amplitud del tema, suficiente por s sola para llenar toda un
mes de clases, para obtener ms informacin acerca de la estructura
y las reglas para definir una hoja de estilos en cascada y sobre
propiedades vlidas y valores es recomendable consultar las
especificaciones del World Wide Web Consortium (W3C) sobre
hojas de estilo en cascada (en la direccin http://www.w3c.org).

Mapas de imagen
Al igual que una imagen puede contener un enlace, podemos hacer

que porciones de la imagen acten de anchors (o anclajes, que es en
s la abreviatura del enlace). Todos los elementos de un mapa de
imagen quedan contenidos en <map></map> y debe llevar un
nombre que lo identifique dentro de la pgina html que estamos
editando.
Despus definimos las zonas geomtricas dentro de la imagen que
queremos activar. Cada zona se designa con una etiqueta area,
teniendo que indicar manualmente las coordenadas de la regin
activa. Estas formas son de tres tipos: crculos, rectngulos y
polgonos de un numero ilimitado de puntos.
El crculo se especifica mediante tres valores: las coordenadas
x, y del centro y el valor r del radio.
El rectngulo se define mediante cuatro puntos. Los dos
primeros son la coordenada (x,y) en pixeles de la esquina
superior izquierda, y los segundos (x,y) la coordenada de la
esquina inferior derecha del rectngulo.
El polgono se define con un nmero par de valores, en
concreto, el doble de los puntos que estemos usando para

definir la forma poligonal. Automticamente el ltimo punto

especificado se unir al primero.
Una vez indicada la geometra (el area), debemos indicarle sta a la
imagen. Para ello empleamos el nombre asignado a la etiqueta map.
En el siguiente ejemplo definimos un mapa simple, y se lo asignamos
a la imagen que hemos utilizado para obtener las coordenadas de las
figuras.
<MAP NAME=mapa>
<AREA HREF=form.html SHAPE=rect COORDS=10, 10, 30,
30 ALT=Ir al formjulario>
</MAP>
<IMG SRC=foto.gif WIDTH=90 HEIGHT=70 USEMAP=#mapa>
El mapa siempre se definir con anterioridad al uso de la imagen.
Formularios
Si somos navegantes asiduos de la Red, habremos observado que en
numerosas pginas existen formularios mediante los que se puede
recabar informacin adicional de sus visitantes. Este potente
mecanismo permite dotar de mayor interactividad a dichas pginas,
puesto que establecen un canal de comunicacin a travs del cual se
pueden utilizar las respuestas del usuario para diferentes propsitos,
como gestionar pedidos o alimentar una base de datos.
La forma ms simple de declarar un formulario dentro de una pgina
HTML consiste en utilizar el tag <FORM ACTION=URL
METHOD=post>, aadiendo el tag </FORM> al final de ste. En
este caso, URL es el nombre de un programa CGI que reside en el
servidor web, y que bsicamente se encarga de recoger informacin
en el formulario y pasarla a dicho servidor.
No obstante, dado que la programacin de scripts CGI (o cualquier
otro lenguaje de script de servidor como PHP) requiere bastante
conocimiento de programacin, no continuaremos profundizando en
el aspecto de los formularios, con todo el detalle que se merecen y
nos quedaremos solo en el apartado de diseo de formularios.


A continuacin se muestra un ejemplo completo con todos los

elementos grficos de un formulario.
<HTML>
<HEAD>
<TITLE>Diseo Formularios</TITLE>
</HEAD>
<BODY>
<H2>Formulario de Respuesta</H2>
<P>Por favor rellene este cuestionario, como forma de

mejorar nuestra web.</P>
<FORM METHOD="POST" ACTION="/cgi-bin/formmail">
<INPUT TYPE="hidden" NAME="receptor" VALUE="rosana@ugr.es">

<INPUT TYPE="hidden" NAME="asunto" VALUE="Feedback
Formulario">
<INPUT TYPE="hidden" NAME="redirigir" VALUE="main.html">
<P><STRONG>Nombre: </STRONG>
<INPUT NAME="nombre" TYPE="text" SIZE="25">
<STRONG>Email:</STRONG>
<INPUT NAME="email" TYPE="password" SIZE="25"></P>

<P><STRONG>Comentarios:</STRONG>
<TEXTAREA NAME="comentarios" ROWS="4" COLS="36"></TEXTAREA>
</P>
<P><STRONG>Cosas que te gustaron:</STRONG><BR>
Diseo de la web <INPUT NAME="things" TYPE="checkbox"

VALUE="Diseo">
Enlaces <INPUT NAME="things" TYPE="checkbox"
VALUE="Enlaces">
Facilidad de uso <INPUT NAME="things" TYPE="checkbox"
VALUE="Uso">
Imagenes <INPUT NAME="things" TYPE="checkbox"
VALUE="Imagenes">
Codigo Fuente <INPUT NAME="things" TYPE="checkbox"
VALUE="Codigo">
</P>
<P><STRONG>Como conocistes esta web?:</STRONG><BR>
Motor de busqueda <INPUT NAME="como conocistes" TYPE="radio"

VALUE="motor busqueda" CHECKED>
Enlace desde otra web <INPUT NAME="como conocistes"
TYPE="radio" VALUE="enlace">
Web de la Universidad <INPUT NAME="como conocistes"
TYPE="radio" VALUE="ugr.es">
Estaba en un libro <INPUT NAME="como conocistes"
TYPE="radio" VALUE="libro">
Otro <INPUT NAME="como conocistes" TYPE="radio"
VALUE="otro">
</P>
<P><STRONG>Puntuanos (1-10):</STRONG>
<SELECT NAME="puntos">
<OPTION SELECTED>Increible :-)
<OPTION>10
<OPTION>9
<OPTION>8
<OPTION>7
<OPTION>6
<OPTION>5
<OPTION>4
<OPTION>3
<OPTION>2
<OPTION>1
<OPTION>Apesta :-(
</SELECT></P>
<INPUT TYPE="submit" VALUE="Enviar datos">

<INPUT TYPE="reset" VALUE="Borrar datos">
</FORM>
</BODY>
</HTML>

Si no vamos a usar un programa CGI, por su complejidad, tal vez

podamos usar el campo ACTION del formulario para irnos a otra
pgina en la que agradezcamos al usuario su colaboracin, o bien
mandarnos los datos tecleados a nosotros mismos por correo (con un
malito). Ambas cosas se hace como si de un enlace se tratase.
Marcos
Mediante la introduccin de frames o marcos, seremos capaces de
mostrar ms de un fichero HTML al tiempo en la ventana del
navegador. Debemos indicar al navegador que emplearemos marcos
con la siguiente meta-etiqueta:
<!DOCTYPE HTML PUBLIC -//w3c//dtd html 4.0 Frameset//en>
Podemos dividir la ventana en tantos veces (marcos) como

queramos. Cada marco llevara una etiqueta frame propia y en
frameset especificaremos cmo se hace la divisin: si por filas o por
columnas para posteriormente indicar el tamao de la divisin (en
porcentual o pxeles).
Cada marco llevar un nombre indicativo y el fichero html que debe
contener y mostrar. Ambas informaciones son requeridas de forma
obligatoria.

En el siguiente ejemplo vemos como frameset sustituye a la etiqueta

body, ya que la pagina que define los marcos no muestra nada
propiamente, tan solo lo que los marcos deban mostrar. Para hacer
divisiones ms complejas podemos anidar los framesets.
<HTML>
<HEAD>
<TITLE> Pagina con marcos </TITLE>
</HEAD>
<FRAMESET ROWS="475,*">
<FRAMESET COLS="*,310">
<FRAME NAME="main" SRC="main.html">
<FRAME NAME="rightColumn" SRC="list.html">
</FRAMESET>
<FRAME NAME="bottomBar" SRC="bar.html">
</FRAMESET>
</HTML>
El anterior es un ejemplo intermedio, es sencillo en el sentido de que

especifica los parmetros mnimos pero est anidando marcos dentro
de otros. Su resultado se muestra en la siguiente imagen, y a
continuacin en la transparencia, se da otro ejemplo que hace uso de
los atributos scrolling para el control de la barra de desplazamiento
y noresize para fijar el tamao del marco y no permitir su edicin.

Enlaces avanzado
El nombre que le hemos dado a cada frame nos servir en un futuro
para decidir el destino de los enlaces que activamos (en que marco se
pone el nuevo documento):
<A HREF=links.html TARGET=main>

A su vez target puede tomar otros valores:

_blank la pgina se carga en una nueva ventana en blanco
_self carga la pgina en la misma ventana que el anchor
_parent carga en el frameset que encapsula el frame actual
_top carga en ventana completa (por encima del
frameset)
Por otro lado podemos definir enlaces a zonas internas dentro de una
misma pgina cuando sta muestra un contenido que se extiende en
longitud. Para ayudar a recorrer el contenido creamos marcas
correspondientes a los destinos de los enlaces mediante el atributo
name.
Iremos a dichas marcas usando enlaces normales, con la salvedad de
que el nombre del recurso es el nombre dado al target antecedido del
carcter almohadilla.

Tecnologas y mtodos para dotar de interactividad

y elementos multimedia a una pagina Web
El mundo de los viajes es uno de los que pueden sacar ms partido

del mundo multimedia que nos ofrecen las nuevas tecnologas para
vender ms productos. Una atractiva foto de un hotel, un video de un
paisaje, unas imgenes de aficionados montando a caballo o haciendo
esqu suelen hacer tomar la ultima decisin a un cliente para realizar
su reserva.
Pues bien, como hemos visto, el lenguaje HTML, con el que se crean
las pginas Web, est enfocado para la creacin de documentos
estticos con texto y como mximos grficos. El HTML no soporta la
ejecucin directa de elementos multimedia y no permite
interactividad, es decir, la entrada de datos y el tratamiento de los
mismos generando una respuesta ante el usuario.
A HTML se le han ido uniendo otros lenguajes de programacin, para
dar al documento animacin, multimedia e interactividad.
Plug-ins o conectores

Lenguajes de scripts
Applets de Java
Aplicaciones auxiliares y MIME
Pginas activas ASP (Active Server Pages) / contenidos
dinmicos generados con PHP
Un plugin o conector es un programa complementario instalado en
nuestro ordenador que interacta con el navegador para permitirnos
disfrutar de elementos multimedia, realidad virtual, documentos que
no sean HTML, etc. Una vez instalado el plugin y el navegador se
coordinan de forma transparente y sin que nos demos cuenta de
nada.
Los lenguajes de scripts dotan a la pgina de interactividad. Son
programas que forman parte de la pgina y que se ejecutan en el
navegador (lo interpreta). Netscape soporta un lenguaje llamado
Javascript e IExplorer soporta otro tipo: ActiveX y VBScript, que
permiten crear aplicaciones similares a las creadas con Javascript.
El lenguaje Java permite crear pginas mucho ms atractivas e
interactivas. Se puede utilizar sin tener en cuenta el sistema
operativo, por lo que se ejecuta en cualquier navegador. Las
aplicaciones java o applets ocupan muy poco espacio, de forma que
se descargan rpidamente del servidor y se ejecutan de forma
transparente, sin que el usuario tenga que realizar ninguna accin.
Con Java se pueden realizar desde aplicaciones muy complejas
(simuladores cientficos) o cosas muy sencillitas como:
calculadoras cientficas que permiten sacar grficas de datos
dibujos con animaciones para tutoriales y juegos
cambios de moneda incrustados en la Web
introduccin de datos del usuario para envo al servidor
Intntese no confundir Java con Javascript.
Otros lenguajes como VRML permiten crear espacios tridimensionales
y dotar de mundos virtuales a las pginas Web. La tecnologa Flash
est inundando la Web con aplicaciones similares a las de los applets.
Este lenguaje permite disear pginas web completas en flash (como
http://www.garouonline.com/site/), cosa que con Java no se puede
hacer.
Cuando se dise Internet, se pensaba que por el viajaran tan solo
archivos de tipo texto (solo caracteres ASCII) para nada se pensaba
el volumen de formatos y datos que circula hoy en dia. Una manera
de solventar este problema fue convertir codificar estos datos
avanzados en caracteres ASCII en el momento de la transmisin.

Existen muchos mtodos para enviar este tipo de datos, pero el ms

popular es MIME (Multiporpose Internet Mail Extensions). Todo se
realiza de forma transparente. Constantemente estn apareciendo
nuevas extensiones MIME, ya que se crean nuevas aplicaciones:
nuevos programas que generan nuevos archivos con nuevas
extensiones.
HTML permite crear los formularios, pero no podemos hacer nada con
la informacin (reservas, consultas, etc). Necesitamos obtener
informacin de una base de datos a travs de un protocolo de
comunicaciones mediante el cual podamos comunicarnos con otras
aplicaciones (programa de reservas). CGI Interfaz Comn de
Pasarela o Common Gateway Interface permite al servidor
comunicarse con otras aplicaciones. Script-CGI es la aplicacin que
trata los datos unipersonales que se recogen del usuario, y llegan al
servidor de pginas y generan una respuesta. Las aplicaciones cgi se
escriben normalmente en lenguajes como C o Perl.
Las pginas activas ASP constituyen una alternativa a los CGI para
crear pginas dinmicas. Desde el punto de vista del usuario, no
existe ninguna diferencia entre una pgina asp y una tradicional html.
Desde el punto de vista del desarrollador, son ideales para la
actualizacin de datos procedentes de bases de datos. En el fondo
son como una especie de plantillas de pginas html con partes que se
modifican en funcin de una serie de parmetros que reciben desde
el usuario o del propio servidor. Ej. La fecha y la hora de la pgina.
Lenguaje HTML y su evolucin a XML

Si bien no nos interese ser diseadores profesionales Web, si es
conveniente que tengamos algunas nociones de cmo funcionan el
lenguaje utilizado para crearlas, para saber cmo funcionan las
pginas Web, qu cosas se pueden hacer y cules no.
HTML es un lenguaje de marcas especfico de la Web cuyas funciones
son:
Definir el formato de la pgina. Indicar cmo se ha de mostrar
la informacin
Incluir enlaces que nos lleven a:
o La misma pgina: enlaces internos
o Otras pginas relacionadas con el mismo sitio Web:
enlaces relativos
o Otro sitio Web: enlaces externos

Este lenguaje se basa en etiquetas o marcas de estilo para definir la

forma de acomodar el texto, grficos o cualquier otro elemento. Se
encuentra siempre en constante evolucin y a veces se crean
etiquetas fuera de las normas, lo que puede llevar a que unas
etiquetas funcionen en un navegador determinado y no en otro.
En la actualidad se plantea utilizar un lenguaje de marcas ms
potente que HTML conocido como eXtended Markup Language. XML
es un metalenguaje (conjunto de reglas utilizadas para definir otros
lenguajes) que permite definir lenguajes de marcas. Es un lenguaje
mucho ms potente para la edicin de documentos y el desarrollo de
programas que los puedan procesar de forma automtica.

Comercio Electrnico
Tema IV. Comercio

electrnico
Nuevas oportunidades de negocio
Segn Wikipedia, la enciclopedia libre ms grande del mundo, El
comercio electrnico, tambin conocido como e-commerce
(electronic commerce en ingls), consiste en la compra y venta de
productos o de servicios a travs de medios electrnicos, tales como
Internet y otras redes informticas.
La definicin es clara y breve, ya que merece ms la pena ver en qu
se traduce el e-commerce hoy en da que hablar de historia,
elementos del e-commerce o generalidades de este fenmeno. Aqu
nos centramos principalmente en las oportunidades de negocio
creadas en Internet, comenzando por las que se muestran en la
transparencia siguiente.

La tecnologa Carrito de la Compra permite a los clientes acumular

una lista de elementos que desean comprar, mientras siguen
comprando. Esto es soportado por un servidor mercante (merchant
server) en forma de base de datos. Estas bases de datos no solo
almacenan mltiples caractersticas del producto, sino que a su vez
almacena informacin del cliente que est realizando dicha compra:
- nombre
- direccin y telfono
- datos de la tarjeta de crdito: nmero y caducidad
- registro de las compras anteriormente realizadas
Est relacionado con tecnologas de programacin en Internet como:
Asp, Perl / CGI y Java Servlets. Sin embargo la tendencia se vuelca
en motores de carritos de la compra basados en PHP que pueden
incluso ser adquiridos por un precio mdico, lo cual nos permitir
disponer en nuestra web de facilidad para la venta directa a nuestros
visitantes.
El caso ms ampliamente conocido de carrito de la compra

es el de Amazon, que se dio a conocer en 1994, creciendo
rpidamente hasta ofrecer millones de productos diferentes a ms de
10 millones de clientes. Al principio era un pequeo inventario que
reciba pedidos por e-mail. Ahora el catlogo on line ofrece en el
lado servidor una base de datos sofisticada para los consumidores del
lado cliente. Es un ejemplo de aplicacin cliente/servidor.
Es capaz de personalizar el servicio dado, basndose en anteriores
transacciones que almacena, para poder sugerir otras nuevas (sin
intervencin humana).
La compra de un producto es simple: primero se localiza utilizando el
cuadro de texto Bsqueda / Search que nos llevar directamente
hasta el producto si existe (lo raro es no encontrarlo). Desde ah
veremos una descripcin detallada del artculo as como la opcin de
aadirlo al carrito de la compra. Entonces se nos mostrar la lista de
elementos adquiridos para que podamos verificarla (Ej. N de
unidades), eliminar artculos, adquirir definitivamente la compra
(checkout) o seguir comprando.
Al principio en Amazon se nos pedia los datos de nuestra tarjeta la
primera vez que accedemos a este sitio como visitante. En este
momento se escoge a su vez una contrasea para poder realizar
futuras transacciones rehusando la informacin de pago y envo,
haciendo la operacin ms rpida y simple. Eso se cambi levemente
y ahora tan solo se pide que rellenes una tarjeta de identificacin con

Comercio Electrnico
todos tus datos personales incluido el nmero de la tarjeta de crdito

en el momento de realizar la primera compra, y para las siguientes
veces ya no ser requerido rellenar nada, tan solo identificarte en el
portal. Si no nos sentimos muy seguros dando nuestro nmero de
tarjeta por ah existe otra opcin consistente en dar los 5 ltimos
dgitos por la Web y el resto por telfono al departamento de atencin
al cliente de Amazon.
Una vez que se ha realizado un encargo de compra (order), Amazon
enva un correo electrnico de confirmacin y un segundo correo
cuando ya ha salido el paquete postal (shipped). Siempre se puede
cancelar la compra antes de que se enve, que suele ser a las 24
horas.
Otras compaas o individuos pueden crear enlaces de compras
directos a Amazon en sus webs enviando clientes. Estos programas
se llaman afiliados y reciben un tanto por ciento de la compra
realizada en Amazon. Este intercambio de comercio es solo posible en
Internet.
Las subastas en Internet han resultado un negocio muy rentable.

Todo comenz con una compaa llamada Auction Web en 1995, que
luego cambi de nombre a eBay siendo actualmente lder en el sector

con 2 millones de subastas nicas y 250.000 artculos nuevos cada

da.
Su secreto estriba en implementar tcnicas tradicionales de
marketing manteniendo el proceso de subasta lo ms simple posible.
Cuenta con la adiccin aadida del crculo pujar / cerrar que hace que
compradores y vendedores vuelvan de nuevo.
La compaa se queda con un porcentaje de la venta cobrado de tres
formas:
Supongamos que el precio de venta es de 1500
- el 5% de los primeros 25 = 1,25
- el 2,5% de la diferencia entre 25 y 1000 = 24,3
- el 1,25% de lo que supere los 1000 = 6,25
Luego el total a pagar por el sujeto que subasta es de 31,8, una
cantidad asumible para el precio tan alto del producto. Si adems
quieres que tu subasta aparezca promocionado (resaltado en negrita)
se suman 2 y si aparece en la pgina principal son 99,95 para
eBay.
La base de datos gestiona la informacin de compradores y
vendedores. Los compradores incluyen adems de sus datos
informacin del producto, fecha y precio de salida. Se puede aadir
un precio de reserva que se debe alcanzar para vender el producto.
Si la puja mayor no alcanza el precio de reserva el artculo no es
vendido y se dice que la subasta ha fracasado.
Si la subasta tiene xito comprador y vendedor se ponen de acuerdo
en los detalles de envo. En este sentido eBay solo los pone en
contacto. El comprador corre con los gastos de envo.
Hay que tener especial cuidado con los medios de pago que nos
ofrece el vendedor, ya que el pago por transferencia puede ser un
medio de timo. Lo mejor es mediante PayPal o contra reembolso.
Otros sitios de subastas online son http://auctions.yahoo.com,
http://www.fairmarket.com y http://www.amazon.com.

Comercio Electrnico
Otra rea en el comercio electrnico con tendencia al crecimiento son

las transacciones comerciales (compra-venta en bolsa) en lnea, que
est haciendo que muchas de las firmas de Wall Street se vean
tambin en Internet.
E*TRADE fue fundada en 1982 para que los inversores individuales
pudieran realizar sus propias inversiones sin necesidad de corredores
de bolsa (brokers). De esta forma es ms fcil y barato.
Se puede comprar y vender acciones y bonos del estado, haciendo
estas operaciones accesibles a una mayor audiencia. Hoy en da
cualquiera de nosotros puede invertir en bolsa de la misma forma que
nos bajamos mp3 o torrents de un servidor: con nuestro ordenador y
el acceso a Internet.
Para la gente con poco conocimiento en estas transacciones E*TRADE
ofrece dos juegos en los que se utiliza dinero virtual (en un comienzo
son 100) y se le ayuda al participante con grficos, diagramas y
artculos recientes para escoger mejor las inversiones. El juego se
inicia a primeros de mes y termina a finales. A los dos jugadores con
mayor beneficio en su cartera se les premia con 1000 a cada uno en
dinero real. Estos juegos no conllevan ningn riesgo para el
navegante puesto que no se juega con dinero real y se consigue
perder el miedo a invertir al mismo tiempo que ayuda a formar al
inversor.

Lo cierto es que a lo largo de los aos que lleva Internet en uso, las
compaas han ido transformando su forma de llegar al cliente. Un
ejemplo de otros negocios es Dell Computer Corporation que
actualmente vende dos tercios del total mediante transacciones on
line a travs de su Web. El cliente se favorece en este caso de la
venta directa sin intermediarios.
Igualmente ING Direct se ha beneficiado muchos aos de ser un
banco sin oficinas (cosa que va cambiando) con el ahorro que esto
supone en locales, mobiliario, luces, medios de seguridad y personal.
El comercio electrnico esta dando pie a nuevos tipos de negocios.
Hay algunos como ebates.com que ni siquiera ofrece ningn
producto. Es un programa afiliado a otros almacenes de compra
venta que reciben un tanto por ciento de las ventas de estos. Lo que
hace que ebates consiga clientes, gente que se registren como
miembros, es que hacer una bsqueda en ebates equivale a buscar
en aproximadamente 400 almacenes simultneamente. El cliente
cuenta con multitud de artculos y un alto porcentaje de probabilidad
de encontrar lo que quiere.
Intercambio Electrnico de Datos (EDI)

EDI es el acrnimo de Electronic Data Interchange, es decir,
Intercambio Electrnico de Datos y es un elemento clave en el xito e
implantacin del comercio electrnico
Se entiende EDI como el intercambio de documentos entre los
ordenadores de los participantes en una relacin comercial mediante
un formato normalizado, que permite un tratamiento automatizado
de la informacin. El EDI se produce principalmente entre empresas,
por ejemplo para el tratamiento de facturas y pedidos en una
transaccin comercial.
En el sector turstico los participantes pueden ser agencias de viajes
mayoristas y minoristas, proveedores de servicios de alojamiento o
de otros servicios, y entidades financieras. Los documentos pueden
ser peticiones de reservas, confirmaciones de reservas, bonos,
facturas, mensajes de texto, ordenes de pago, etc.
En el fondo son los ordenadores los que se relacionan a travs de EDI
y no las personas. Es fcil encontrar una forma estructurada de
mandar la informacin: el contenido y la forma est sujeto a un
estndar internacional. Dicho formato puede resultar complicado para
una persona, por lo que hay programas de usuario para EDI que se
encargan, de forma inadvertida para nosotros, de traducir a ese
formato las entradas de datos en sus formularios, que tienen aspecto
mucho ms amigable.

Comercio Electrnico
Modalidades de pago en Internet

El sistema de pago no debe ser un impedimento para el cierre de la
venta. Por ello debemos de ofrecerles diferentes mtodos de pago, y
todos ellos deben inspirar confianza y tener las suficientes garantas
de seguridad en la red.
1. Transferencia bancaria
Este mtodo es bastante cmodo ya que es posible realizar una
transferencia bancaria desde el ordenador a travs de Internet sin
necesidad de desplazarse a banco. Adems para nosotros tiene la
ventaja de no tener que correr con los gastos derivados de las
comisiones de las tarjetas de crdito. Cuando el cliente escoja esta
opcin de pago, debemos mostrarle de forma inmediata el nmero de
cuenta bancaria de nuestra empresa. Deberemos trabajar con un
banco que permita hacer consultas a travs de Internet
(prcticamente todos), sobre los movimientos de nuestra cuenta,
pues no podemos esperar a que nos llegue por correo el comprobante
del ingreso del cliente.
2. Giro postal

Este sistema de pago no es muy utilizado, pero sigue teniendo para

nosotros la ventaja de que no corremos con los gastos de comisin.
3. Contra reembolso
Este sistema de pago no tiene mucho sentido en nuestro sector,
puesto que lo que vendemos es un servicio, que se consume en el
destino.
4. Tarjeta de crdito
Es el medio de pago ms utilizado en la actualidad. Resulta cmodo
para los clientes y no supone ningn coste adicional para ellos. La
transaccin es muy rpida y sin comprobantes, pero tendremos que
pagar la comisin de las entidades financieras. Para poder validar las
tarjetas, es necesario disponer de conexin con aplicaciones de
comercio electrnico de un banco (Ej. Banesto). Los datos de la
tarjeta van directamente al banco y ni el comerciante ni el servidor
donde est alojada la Web los ven.
El pago mediante tarjeta online debe ir asociado a un servidor seguro
para evitar que sean ledos por terceros, as como el cliente debera
comprobar nuestro certificado electrnico de seguridad de nuestro
sitio para evitar que alguien nos suplante, recoja la informacin de la
tarjeta y se haga pasar por nosotros, de forma que el cliente no
advierte el engao.
Otro mtodo de hacer pago con tarjeta consiste en incluir el nmero
de esta en un correo electrnico firmado por el titular, con un
certificado electrnico emitido por una Autoridad Certificadora.
Mediante este mtodo estaremos seguros de la autenticidad del
mensaje, y el cliente estar tranquilo ya que ningn tercero habr
podido leer el contenido del mensaje.
5. Ciberdinero
Bajo nombres muy diversos tales como dinero electrnico, dinero
digital, ciberdivisa, (cybercash ecash - digicash) se presenta una
nueva forma de dinero, adecuado a las redes, y ms concretamente a
Internet. El ciberdinero no deja rastro de nosotros en nuestras
compras por Internet, al igual que ocurre con el dinero real. Veremos
ms sobre monederos virtuales en el punto cuarto de este tema.
Por otro lado tenemos a Paybox (http://www.paybox.net): el primer
sistema de pago va mvil que es sencillo, fiable y seguro. Tiene un
coste anual de unos pocos euros, sin comisiones y permite comprar
tanto en comercios reales como en virtuales.

Comercio Electrnico
Veamos como caso de estudio a CyberCash TM, que es uno de los

lderes en dar soluciones seguras a los procesos de pago en Internet
(on-line payments).
Dispone de un software CashRegister que lleva una cuenta para cada
negociante (merchant), as como de la institucin financiera de este.
Utiliza SSL y SET como protocolos de las transacciones. Mantiene
todo los servidores seguros de forma que el comerciante no necesita
almacenar los datos del cliente.
El cliente tambin dispone de un monedero virtual denominado
InstantBuy que nos vale en cientos de sitios comerciales. CyberCash
tambin dispone de un servicio de facturas y pagos colectivos on-line
denominado PayNow.
Para ms informacin: http://www.cybercash.com

Seguridad en las transacciones electrnicas
Seguridad en la web
La WWW es un servicio basado en TCP/IP que proporciona un
mecanismo para organizar y enlazar la ingente cantidad de
informacin disponible en Internet. No es una red aparte, sino un
conjunto de servidores de informacin repartidos por Internet o por
una intranet, accesibles mediante aplicaciones cliente (es decir,
navegadores) con el fin de obtener datos, que pueden ser texto,
imgenes, sonidos, videos u otros formatos multimedia.
El procedimiento bsico que emplea la WWW es bastante simple. Un
usuario suministra la direccin de un documento al cliente Web que
ejecuta en su ordenador. El cliente se pone en contacto con el
servidor Web para recuperar el documento y lo presenta al usuario.
Recordemos que el protocolo utilizado se conoce como Hypertext
Transfer Protocol (HTTP) y la direccin del documento como URL
(Uniform Resource Locator).
La potencia de la Web reside en el formato de los documentos
recuperados en lenguaje HTML. Las mismas caractersticas que

Comercio Electrnico
convierten las aplicaciones y protocolos de la WWW en abiertas y

flexibles las hacen tambin vulnerables a diversos ataques. Las
principales amenazas se centran alrededor del uso de aplicaciones
auxiliares por el cliente o servidor Web que tienen como objeto
efectuar tareas especiales. Es posible engatusar a las aplicaciones
Web para que ejecuten una aplicacin equivocada.
Existen distintas amenazas y soluciones de seguridad en la web:
1. Uso inapropiado de la Web
Es muy fcil perder la nocin del tiempo mientras se esta surfeando
por la Web. Algunas empresas estn de acuerdo que este es un buen
sistema para formar a los empleados y otras piensan que de esta
forma los empleados pierden el tiempo, y lo que es peor, puede
repercutir en la reduccin del ancho de banda disponible para
Internet necesario para las propias actividades laborales. La fcil
disponibilidad de pornografa en Internet puede llevar tambin al
abuso de la Web.
La solucin drstica de algunas empresas es prohibir todo acceso a la
Web de forma que se pierde posibilidad por ejemplo de usar
mensajera instantnea, cuando sta puede ser utilizada para
resolver una duda sobre software. La mejor propuesta es educar y
supervisar el uso de Internet, empleando cortafuegos para impedir
las conexiones con sitios Web que, lamentablemente, no tienen
ningn propsito empresarial legitimo.
2. Riesgo para los servidores
La amenaza bsica para un servidor Web es que un usuario pueda
escapar del software del servidor hacia una shell de comandos o
engaarlo para que ejecute otro programa. Una vez libre del control
del software del servidor, un intruso con malas intenciones puede
borrar ficheros, sustraer datos delicados e incluso alterar documentos
HTML, para desprestigiar al propietario del servidor. Ante esta
amenaza debemos disponer igualmente de un cortafuegos instalado
en el equipo, as como tener la precaucin de cambiar la contrasea
frecuentemente y que sta sea bastante robusta.
3. Riesgo para los clientes
Un ataque con xito en el PC del usuario que ejecuta el cliente Web
puede tener efectos devastadores como la eliminacin, sustraccin o
modificacin de todos los ficheros del ordenador. Adems el PC en
peligro puede utilizarse tambin como plataforma para atacar a otros
servidores del interior que quizs contengan informacin incluso ms
delicada. Recuerde: el navegador ejecuta aplicaciones propias para
gestionar diversos tipos de datos. Un cliente Web puede entonces
ejecutar un programa o una orden inadecuados.

La solucin es ser conscientes de lo que instalamos y no darle a

aceptar a cualquier mensaje que nos aparezca en pantalla o anuncio
vistoso de propaganda. En este sentido Windows 7 pregunta al
usuario ante cada ejecucin, para que sea consciente de que algo se
va a ejecutar. Imagina que t no has lanzado ninguna aplicacin. Eso
te dara pistas de que tienes malware en tu equipo.
Cortafuegos
Por lo general la gente piensa que la nica amenaza a su equipo es la
infeccin por virus, y todo el mundo se hace rpidamente con un
antivirus. Por supuesto depender del sistema operativo utilizado,
porque tanto Linux como Mac OS carecen de este problema (con
excepciones por supuesto) y es el mundo Windows el que est
infectado hasta los codos.
Debemos saber que no es la nica amenaza y que la solucin a estos
problemas se complementa con el uso de un cortafuegos. Los
sistemas operativos actuales incluyen un cortafuegos de sistema,
aunque tambin podemos usar los cortafuegos de los avanzados
antivirus. En cualquier caso con uno de los dos nos bastar.
Un cortafuego es el medio que sirve para regular el acceso a la red de
ordenadores de una organizacin. El papel de los cortafuegos es
similar al del guarda de seguridad que protege la entrada a un
edificio de oficinas de una compaa. Es responsable de proteger la
entrada a la red, segn la identificacin de los visitantes y llevando
un registro de visitas. Es necesario por tanto disponer de una poltica
de seguridad.
La poltica de un buen cortafuego es denegar cualquier acceso no
autorizado explcitamente. De igual forma, puede registrar
informacin referente a todos los intentos de sesin exitosos e
infructuosos que se efectan a travs de los cortafuegos.
Los cortafuegos son una parte importante de la seguridad de un
sistema, sin embargo no son la solucin definitiva.
El riesgo de la seguridad se basa en la importancia de los activos a
proteger y de las probabilidades de sufrir un ataque potencial. Con el
incremento de organizaciones empresariales conectadas a Internet, la
probabilidad de sufrir un ataque ha aumentado espectacularmente
debido a una mayor conectividad.
Es necesario reconocer los tipos de riesgo de seguridad generales que
existen, para luego centrarse en aquellos riesgos para los que un
cortafuego es la solucin ms obvia.
La funcin principal del cortafuegos en una intranet es proteger
el permetro de la intranet del mbito pblico de Internet, as

Comercio Electrnico
como separar una red de rea local de otra dentro de la misma

intranet.
Riesgos asociados con los servicios de Internet como: correo
electrnico, transferencia de ficheros, ejecucin remota por
medio de terminales telnet y la World Wide Web. Los problemas
ms evidentes de este ltimo incluyen el desconocimiento del
efecto de ejecutar programas en servidores sobre los que no se
ejerce ningn control, el riesgo de transferir software
inapropiado o defectuoso desde Internet y la mirada de
problemas de seguridad relacionados con el intento de hacer
negocios en la Web.
Riesgos que no pueden ser reducidos por los cortafuegos. Estos
son en su mayora los relacionados con los virus y los
programas del tipo caballo de Troya. Para un cortafuego no es
posible detectar fcilmente los ataques que se originan desde el
interior del permetro. Hay empresas que contemplan la
suspensin de los empleados que introduzcan disquetes no
comprobados en su lugar de trabajo.
Los cortafuegos pueden diferir en su arquitectura y sus
caractersticas. Actualmente, se encuentran en el mercado dos tipos
de arquitecturas de cortafuegos:
Un cortafuegos de filtrado de paquetes ofrece un control bsico
de acceso a la red basado en la informacin de protocolo
contenida en los paquetes IP. Cuando estos llegan al
cortafuegos, la informacin se compara con un conjunto de
reglas de filtrado, que especifican las condiciones segn las
cuales se autoriza o deniega a los paquetes su acceso a la red.
Un cortafuego de gateway a nivel de aplicacin interrumpe la
ejecucin de todas las sesiones de red y crea una sesin aparte
hacia el destino deseado, siempre y cuando reciba autorizacin
para ello. A continuacin, transmite la informacin desde la
conexin original hasta la segunda conexin.
Se observa que, si bien cada tipo de cortafuegos difiere en cuanto a
su funcionamiento, el servicio bsico ofrecido es esencialmente el
mismo. Ambos actan como un filtro entre dos redes con el fin de
restringir los servicios que se ofrecen en cualquier direccin segn
una poltica preestablecida. Sin embargo, los dos tipos de cortafuegos
difieren en lo que se refiere al nivel de control que ofrecen. El
cortafuego de gateway a nivel de aplicacin ejerce mayor control
sobre una sesin, dado que crea y mantiene la conexin actual con el
exterior. Un filtro de paquetes filtra los paquetes IP a nivel de la ruta
del paquete, que se resuelve en una decisin de autorizacin o
descarte para cada paquete. Este procesamiento a bajo nivel

proporciona una mayor velocidad, aunque, por lo general, es menos

seguro que un gateway a nivel de aplicacin.
Seguridad en la transaccin
Muchas dudas o cuestiones afectan a la seguridad de las
transacciones:
1. Privacidad: al dar el nmero de la tarjeta, cmo sabemos que
no hay un tercero que pueda coger esa informacin?
2. Integridad: cmo sabemos que la informacin se ha enviado o
ha sido interceptada por un hacker?
3. Autentificacin: cmo sabemos que la empresa que recibe
nuestros dados es un negocio con reputacin y no unos
timadores?
4. No cancelacin: cmo podemos probar legalmente que un
mensaje ha sido enviado o no, desde nuestro correo?
Todas estas preguntas apuntan a los cuatro requerimientos
fundamentales para una transaccin segura y con xito. Todo aquel
que utilice la Web para el comercio necesita conocer lo referente a la
seguridad en las transacciones: los protocolos SSL y SET que
veremos ms adelante.

Comercio Electrnico
Mtodos de encriptacin
Los canales de Internet no son seguros y es necesario codificar los
datos. La criptografa transforma los datos usando una llave para
hacer a esta incomprensible excepto para los receptores deseados.
Cuando estn encriptados, los datos reciben el nombre de cibertexto
y cuando no, texto plano.
En el pasado se usaba la criptografa de clave privada o criptografa
simtrica, en la que la misma clave secreta se usaba para codificar y
decodificar el mensaje. Esta tcnica tena varias pegas:
1. la clave se puede interceptar
2. como es la misma clave de codifica / descodifica nunca puedes
estar seguro de quin creo la clave
3. es necesario una clave diferente para cada receptor, lo que
puede originar un montn de claves secretas para mantener.
Un mtodo mas seguro es el asimtrico. Utiliza dos claves: una
pblica usada para encriptar y la correspondiente privada para
desencriptar (y viceversa).
Cada participante tiene las dos claves. El que enva utiliza la clave
pblica del que recibe. El receptor utiliza su propia clave privada.
A su vez se utiliza la firma digital para asegurar al receptor la
identidad del que enva (solventando los problemas de autentificacin
e integridad). Para crear una firma digital se emplea una funcin hash
que devuelve un valor conocido como message digest. La
probabilidad de que dos mensajes tengan el mismo valor digest es
insignificante. El receptor tendr en su poder el mensaje a
desencriptar, la firma digital y la funcin hash.
Los pasos a realizar son los siguientes:
1. Se utiliza la clave pblica del que enva para descifrar la firma
digital
2. utiliza la clave privada del receptor para descifrar el mensaje
3. utiliza la funcin hash con el mensaje original. Si el valor
devuelto coincide con el digest de la firma digital estaremos
seguros de la integridad del mensaje y de que no ha sido
alterado durante la transmisin.
El problema de la clave pblica es que cualquiera con suficientes
claves puede hacerse pasar por emisor. Es el caso que decamos
antes de cmo podemos estar seguros de que accedemos a un site en
concreto o no a un tercero que est ah para coger las tarjetas de
crdito. Esto se resuelve con la PKI Public Key Infraestructure que
aade certificados digitales al proceso de autentificacin. Este

certificado lo da una Autoridad Certificadora (CA Certification

Authority) usando su clave privada.
Un certificado digital incluye el nombre del individuo o compaa a
certificar, la clave pblica del sujeto, un nmero de serie, una fecha
de expiracin y la autorizacin de la entidad certificadora en la que
confiamos. La CA es la responsable de la autentificacin y es bastante
cuidadosa comprobando la informacin.
VeriSign (http://www.verisign.com) es la empresa que ha
desarrollado PKI. Otro de los lderes es RSA Security Inc
(http://www.rsasecurity.com), fundada en 1982 por los tres
profesores del MIT que inventaron el sistema de encriptacin de clave
pblica.
Autentificacin
Autentificacin significa simplemente confirmar la identidad aparente
de un usuario que solicita un servicio a travs de un cortafuegos. La
mayora de los cortafuegos utilizan la direccin IP no autentificada
para identificar al usuario. Este sistema facilita la suplantacin y no

Comercio Electrnico
permite identificar al usuario de sesiones realizadas en host

multiusuario.
Existen tres mtodos tradicionales para verificar la identidad de una
persona:
1. El primer mtodo utiliza algo conocido, que puede ser un
elemento de informacin secreto como la contrasea.
2. El siguiente mtodo identifica a una persona por algo que posee
de esta, como una tarjeta inteligente.
3. El tercer mtodo emplea algo incorporado, como una huella
dactilar o el modelo de la retina de una persona.
4. Un nuevo mtodo para la autentificacin continua es la
encriptacin de sesiones. Se verifica cada uno de los paquetes
en lugar de solamente el inicio de la sesin.
Las contraseas multiuso tradicionales corren el riesgo de ser

capturadas en un entorno de LAN; las de un solo uso son ms
seguras. Tanto las contraseas como las tarjetas pueden sufrir
ataques por secuestro de la sesin.
Los servicios que contemplan la posibilidad de que un cortafuegos
pueda realizar funciones de autentificacin son Telnet, FTP y HTTP, de
ah que existan variantes de stas en modalidad segura.

Protocolos seguros
Secure HTTP o protocolo https://, desarrollado por Enterprise
Integration Technologies, es un estndar que soporta la
autentificacin y el cifrado de transferencia HTTP. Es retro-compatible
con HTTP, lo que significa que un servidor S-HTTP puede proporcionar
todava un servicio a clientes que no soportan S-HTTP. Esta nueva
capacidad permite a los administradores de servidores Web requerir
una autentificacin antes de proporcionar acceso a URL
seleccionadas. Adems, es posible cifrar toda la informacin de la
sesin, protegiendo as los documentos o los archivos transferidos.
Sin embargo, uno de los usos ms importantes de S-HTTP es la
proteccin de nmeros de tarjeta de crdito. Esto permite efectuar
compras en la Web, lo cual es ahora mismo uno de los temas de ms
actualidad.
Los protocolos seguros para TELNET y FPT se unifican en el protocolo
SSH. Segn wikipedia, SSH (Secure SHell, en espaol: intrprete de
rdenes segura) es el nombre de un protocolo y del programa que lo
implementa, y sirve para acceder a mquinas remotas a travs de
una red. Permite manejar por completo la computadora mediante un
intrprete de comandos, y tambin nos permite copiar datos de
forma segura (tanto ficheros sueltos como simular sesiones FTP
cifradas), gestionar claves RSA y pasar los datos de cualquier otra
aplicacin por un canal seguro tunelizado mediante SSH.

Comercio Electrnico
Existen otros protocolos de seguridad que representan una

competencia para S-HTTP; por ejemplo, el SSL que es un protocolo
de seguridad ms general implementado debajo de la capa de
aplicacin para proporcionar servicios de autentificacin o de
encriptacin a cualquier aplicacin de red.
El protocolo SSL Secure Sockets Layer, desarrollado por
Netscape de forma abierta (no-propietario) se encuentra por ello
implementado en muchos navegadores incluyendo el IExplorer.
En una transaccin que emplee SSL el socket1 est asegurado usando
criptografa de clave pblica. A su vez emplea certificados digitales
para autentificar al servidor en una transaccin.
Los pasos a realizar son los siguientes:
1. el cliente enva un mensaje al servidor
2. el servidor responde y enva su certificado digital
3. cliente y servidor negocian la transmisin as como las claves
empleadas en esta (sesin keys) usando el mtodo simtrico.
Aunque SSL protege la informacin que pasa por Internet, no protege
la informacin privada como el nmero de la tarjeta de crdito, que
se supone que el servidor comercial encripta y almacena en sus bases
de datos. Si el servidor no es seguro y los datos no son encriptados,
un tercero podra acceder a dicha informacin.
El protocolo SETTM Secure Electronic Transaction, desarrollado
por Visa International y MasterCard fue designado para proteger
especficamente las transacciones de pago del comercio electrnico.
Utiliza certificados digitales para cada participante en la transaccin:
cliente, vendedor y banco del comerciante.
Emplea encriptacin de clave pblica adems del certificado digital.
Se utiliza con las siguientes restricciones:
El vendedor necesita un software especial SET
El cliente necesita un monedero virtual que almacena el crdito
dbito de mltiples tarjetas de crdito. Es vlido en todos los
sites y no es necesario introducir los datos bancarios en cada
uno de ellos.
Cuando el cliente ordena la compra, el software SET del vendedor
enva la informacin de compra y su certificado digital al monedero
digital del cliente, activando el software que hay en l. El cliente
1
Socket designa un concepto abstracto por el cual dos programas (posiblemente situados en
computadoras distintas) pueden intercambiar cualquier flujo de datos, generalmente de manera
fiable y ordenada.

selecciona la tarjeta que quiere usar y estos datos se encriptan

usando la clave pblica del banco del vendedor.
Esto y el certificado de autentificacin del cliente se envan al
vendedor. Posteriormente ste lo reenva al banco que ser el nico
que pueda desencriptarlo. El banco del vendedor se pondr de
acuerdo con el banco del cliente para la transferencia monetaria. El
banco del vendedor dar la autorizacin sobre la tarjeta al vendedor,
que confirmar la orden de compra del cliente.
De esta forma el comerciante nunca ve propiamente la informacin
del cliente y no es necesario almacenar el nmero de la tarjeta de
crdito en su base de datos, reduciendo el riesgo de fraude.
A pesar de su alto nivel de seguridad, SET no se ha convertido an en
un protocolo estndar usado en la mayora de las transacciones,
parte porque necesita un software especial en ambas partes y por
otro lado, por el mayor tiempo consumido en la transaccin.
Ms informacin: http://www.mastercard.com http://www.visa.com
y http://www.globalnet.com como vendedor de monederos virtuales.

Comercio Electrnico
Nuevas tecnologas para el comercio
XML y el comercio electrnico

Los desarrolladores utilizan un conjunto fijo de marcas HTML para
describir los elementos del texto que quieren publicar en la Web.
XML no es un lenguaje de marcas como HTML, y en su lugar permite
crear etiquetas a medida que sean tiles para una aplicacin
especfica. De esta forma las etiquetas permiten catalogar los datos
ms eficientemente.
Se puede desarrollar y estandarizar etiquetas para pedidos,
transacciones, precios, participantes de una transaccin, etc. Esto
ayudara por ejemplo a agilizar los motores de bsqueda.
Data Mining, Bots y Agentes Inteligentes

Se trata de tres herramientas de ayuda a la empresa y a los
individuos a manejar cantidades ingentes de datos.
Como si de una mina de oro se tratase, la minera de datos recoge de
grandes cantidades de datos la parte principal de la informacin (lo
mismo que la piedra preciosa pulida) y lo almacena en un almacn de
datos o DataWarehouse. En este proceso se consumen muchos
recursos en tiempo y dinero. Primero porque utiliza una serie de
bsquedas para encontrar patrones especficos y relaciones en tales
montones de datos, y segundo por emplear herramientas muy
costosas. A pesar de todo, la minera de datos puede mejorar
considerablemente el beneficio de la empresa.
Un bot (abreviacin de robot) puede hacer la minera de datos ms
eficiente, ya que permite hacer consultas especficas, eliminando la
necesidad de mltiples bsquedas. Se trata de una herramienta
software para descubrir datos. T le das direcciones y el busca datos
y despus devuelve un informe. Actualmente proliferan los bots en
Internet atendiendo a todos los servicios de esta: newsbots,
commerce bots, shopping bots, stock bots, etc. hasta e-government
bots
Los agentes inteligentes han tenido un gran impacto en el
comercio electrnico. Son pequeos bots con una misin que cumplir
y que adems pueden aprender costumbres de los usuarios con el
tiempo, al guardar informacin sobre estos, datos de preferencias,
actuaciones e incluso patrones de comportamiento. Los agentes
inteligentes permiten ofrecer un servicio como si este fuera de
persona a persona.

Pongamos un ejemplo, sabiendo que el cliente es fan de los Rollings

Stone por compras de CDs realizadas anteriormente, y sabiendo que
el cliente vive en Badalona, puede sugerir la compra de entradas para
el prximo concierto de los Rollings en Junio en Barcelona.
En resumen, la minera de datos proporciona a una compaa toda la
informacin que necesita para operar ms eficientemente. Los
agentes inteligentes y los bots permiten incrementar el nivel de
servicio y personalizacin. Estas tecnologas hacen a una compaa
ms fuerte que el resto de sus competidores.

Internet languages and the Web 2.0.
Tema V. Internet
languages and the web
2.0
Introduction
The computer is key element in today's labouring world, and more
importantly in the tourism sector which is improved by the online
access to many services as travel reservations or city guides for any
city in the world. Many barriers have been broken, but mainly it has
been broken the space-time-person interaction. We do not need to go
to agencies to find or book our journey. To go to an agency
represents a time that probably we don't have or a displacement that
we better avoid, trying to miss a city jam. Some times the person
who attends us is not on his/her best mood and all of these are facts
that travel agencies known. Therefore the priority is the use of new
technologies or ICT (Information and Communication Technology).
Internet and the World Wide Web are home of hundred millions of
web pages (airlines sites, official tourism offices of a city or a region
or a country, personal web pages, blogs from travelers, etc.). All
those pages serves to develop more and more to the tourism sector.
The knowledge of the technologies underlying the Internet is crucial
to a student who enters the world of real work. There are too much
programming languages or communication protocols on which the
Internet is based, but few of them are really too important for a
Tourism Degree student. The languages that allow us to build a
website are HTML, XHML and CSS. Also it is important to know the
current status of WWW development and to study the effect of Web
2.0 in the market and our society: social networks, wikis,
communities' portals, e-learning centers, web-blogs and many more
forms of communication.
This is the main objective of the course called Informatica de
Gestion II that currently is teach in the Tourism Degree at the
University of Granada. If we want to acquire a long and lasting
knowledge of these subjects ---enforceable in any employment--- the
course has to be mostly practical. For that reason students must
develop a web page from scratch using by themselves these
programming languages (a great achievement if we understand that
not everyone is a computer magician). The effort that the student
should do is remarkable, as is the result. Learning is enhanced by
personalized dedication of the teacher to her students, because not

all are equal or have the same ability to assimilate concepts. This
kind of tutelage has much to do with the ECTS and the new degrees
curricula of the Bologna studies. This, of course, comes as always
with the limitation of a large number of students in class, which
usually is around 50 students.
Internet as a Growing Net

The computer has been described as an imagination machine, and as
an almost anything machine for the vast range of ways that PCs and
other devices are being used. Language teachers testify that the
computer is the most versatile of inventions. Language development
is best nurtured if based on plenty of student talk, listening, reading
and writing and those activities are promoted by the use of particular
software. In the past, most computer applications ran on computers
that were not connected to one another. But the computer as an
isolated machine is nothing more that chips and circuits: hardware
with some set of good or bad tools that we call software. This serves
us to many purposes as the number of applications are high and so
variable, but the real power of the software is when the applications,
sources of information and results can be put on the Internet for
everybody else. The Internet mixes computing and communication
technologies. in it. It makes our world easier putting information
instantly and conveniently accessible to everybody. Communication is
a precious gift for today lifestyle. Barriers have been broken down
and people can work at home, do research using the last technology
advances and meet people by means of videoconference. People can
search for the best prices on virtually any products or service, and
have change the way businesses are done. What enables this is the
Internet.
History
There are hundreds of places where we can consult the brief history
of internet http://en.wikipedia.org/wiki/History_of_the_Internet or
even read the full one http://www.computerhistory.org/ internet_history/.
The history of Internet start in the late 60s with some students at
MIT, and though the Internet has been developed during decades
now, the web is a relatively recent creation. In 1989, Tim Berners-
Lee of the European Organization for Nuclear Research (CERN) began
to develop a technology for sharing information via hyper-linked text
documents. He also wrote communication protocols to form the
backbone of this information system, which he called the World Wide
Web. The use of the Web exploded with the availability in 1993 of the
first visual browser, the Mosaic, which featured a user-friendly

graphical interface. Then Internet Explorer, Safari or Mozilla Firefox

became truth alternatives for surfing the Internet.
Terminology
Terminology in this field can be technically hard, and very complex;
therefore a few definitions are necessary:
Computer education, the broadest term, covers teaching
about computers or use of computers, and teaching of other subjects
with computers.
Computer studies covers teaching about computers and
computer languages (such as HTML, XML, XHML, JavaScript or CSS),
whether at a basic level (computer awareness) or at a slightly
more advanced level involving applications (computer literacy) or
at the most advanced level (computer science).
Computer-assisted learning (CAL) is the term reserved for
learning about other subjects through a computer. North Americans
call this computer-assisted instruction (CAI).
We also include another terms used in online education:
Blog or (Web Log) is a form of online journaling that often
offers reflections and commentary on news or a particular subject.
Blogs may be personal in nature and take the form of an online diary.
Although primarily text-based, blogs can contain images, audio, video
and links to other websites. An example for Erasmus community is
the blog at URL: http://mobi-blog.eu

Course Authoring or Course Management Software is

software specifically designed to assemble and electronically publish
educational and training courses. The courses may be interactive in
nature, wherein students can interact, or may involve only the
interaction of the student and computer.
Groupware is software designed to allow group of colleagues
to organize their activities. The group must be connected
electronically, whether it is through the Internet, an intranet, or an
extranet. The software usually facilitates such things as scheduling
meetings and allocating resources; is also facilitates e-mail,
telephone utilities, file distribution, and password protection for
shared documents.
URL (Uniform Resource Locator). The global Internet
address of documents and other resources on the World Wide Web.
The first part of the address ---http usually or ftp--- indicates the
protocol to use, and the second part specifies the Internet Protocol
(IP) address or the domain name where the resource is located.
Webcast or (webinar). The use of streaming media technology
to deliver content synchronously from one source to many recipients,
generally through the use of a virtual classroom.
Whiteboard is the area on a display screen that multiple users
can write or draw on that other remote users can see simultaneously.
Whiteboards are often a principal component of computer

conferencing applications because they enable shared visual

communication.
Wikis. A wiki is a piece of server software that allows users to
freely create and edit Web page content using any Web browser.
Wikis support hyperlinks and have simple text links for creating new
pages and crosslinks between internal pages. Wikis allow for both the
organization of contributions to be edited as well as the content itself
by any user. The most exponent example is the Wikipedia
(http://www.wikipedia.com). Other example is the Online User Guide of
Mobi-Blog.
The Social Net. Communication goals

Everybody has something to say. Technology offers new ways to
communicate when the old ways are not effective. What should be
our communication goals?
To establish a more effective written communication system.
To communicate with others about your needs as a student.
To express your thoughts in a class about a current event of
importance.
To expand your oral communication in a work environment.
To improve your social interactions with friends.
Technology can also provide a synthetic voice for individuals who are
unable to articulate their thoughts verbally. This application is often
referred to as employing augmentative or alternative communication
(AAC) aids.

The human side of Internet

The removal of visual and verbal context cues in online
communication can be both beneficial and detrimental. Although we
create connection while online, the risk of isolating ourselves from
face-to-face contact in the process does exist. The advent of virtual
classroom technologies that allow for synchronous, real-time
interaction as well as the ability to use voice-over in those settings or
to add an audio or video file to an asynchronous online course helps
to some degree to mitigate this problem. However, in the absence of
audio and video, paying attention to those students who seem to be
having trouble making contact is important. The longer a student is
absent from the conversation, the more difficult it will be for that
student to connect. Participation is essential if we are to learn of and
from each other. To be truly collaborative, we must all participate.
There are many who will argue that computers have a dehumanizing
influence in our lives. This will be a complain bearing on the interests
of all those for whom the activity was conceived. The claim of
dehumanization identifies a loss in the quality of our participation in
some activity.
A regular visitor to a classroom will be aware of the manner in which
computer-based activities can engage young and even adult
students. Two perspectives of the computers role are suggested.
Firstly, the computer may function as an instrument facilitating self-
directed discoveries. Secondly, the computer may function as a
responsive partner in more of a learning dialogue. Note that they
each lead to an educational experience in which the interpersonal
component seems to be undermined.
Todays public schools are compelled to provide students with
technology competency skills that will allow them to supplant their
learning through online sources and succeed in an ever-increasing
technological workplace. In order for students to use technology as a
tool to improve learning, they must have ready access to technology
and the competency to use this technology effectively. Unfortunately,
sufficient computer equipment is not always available in schools.
Fortunately, computers are now even more at home, work and in our
lives.
Accessibility considerations for people with disabilities

Most students with disabilities confess themselves assessed more
times than they care to remember. Our aim should not to be to
assess of individuals in isolation, but to assess them in the context in
which they were studying and to consider the extent to which
technology might reduce the handicapping effects of that context.
Assessment was not intended to prescribe solutions. It aimed to

increase students and teachers awareness of difficulties that might

arise on a course.
Accessibility is a crucial subset of usability for people with disabilities.
Web accessibility means that people with disabilities can perceive,
understand, navigate, and interact with the Web, and that they can
contribute to the Web. One of the defining principles of the Web is
that it should provide all people, regardless of physical or
technological readiness, with access to information. Initiatives are
under way to mandate that disabled users have equal access to
Internet resources, including the guidelines issued by the Web
Accessibility Initiative (WAI) of the World Wide Web Consortium
(W3C). The WAI Web site (http://www.w3.org/WAI/ ) provides
guidelines and resources (tools for checking accessibility). Each
checkpoint has a priority level assigned by the Working Group based
on the checkpoint's impact on accessibility.
[Priority 1 - A] A Web content developer must satisfy this
checkpoint. Otherwise, one or more groups will find it
impossible to access information in the document. Satisfying
this checkpoint is a basic requirement for some groups to be
able to use Web documents.
[Priority 2 - AA] A Web content developer should satisfy this
checkpoint. Otherwise, one or more groups will find it difficult
to access information in the document. Satisfying this
checkpoint will remove significant barriers to accessing Web
documents.
[Priority 3 - AAA] A Web content developer may address this
checkpoint. Otherwise, one or more groups will find it
somewhat difficult to access information in the document.
Satisfying this checkpoint will improve access to Web
documents.
Pages that certify one or some of these criteria are labelled with an
A, AA or AAA conformance of accessibility criteria respectively. A
small logo is inserted on these pages.
The Web 2.0

The Web 2.0 is a massive social experiment that makes an
opportunity to build a new kind of international understanding,
person to person. The Web 2.0 involves the user, not only the
content of the web created by user. Is as a conversation, with

everyone having the opportunity to speak and share views. The

design of this kind of new web sites ---as opposite to the static Web
1.0 which produced only static content, companies advertisement
and some media--- encourages user interaction and community
contributions. The architecture of participation is seen in software
development as well. Open source software is available for anyone
to use and to modify with few or no restrictions.
The user decides how media is delivered and which news and
information outlets come. You are also changing the way we find the
information of these sites by tagging (i.e., labelling) web content by
subject or keyword in a way that helps anyone locate information
more effectively. Another way the user can get linked to the content
of a web is by means of RSS feeds, which enable you to receive new
information as it is updated (pushing the content right to your
desktop).
User-generated content has been the key to success for many of
todays leading Web 2.0 companies, such as Amazon (an online
store), eBay (an online auction site) and Monster (a job search
engine). The community adds value to these sites, which are almost
entirely built on user-generated content. For example, every product
you buy from Amazon or every video you watch on YouTube provides
valuable information to these sites about your interests. A clearer
example of user-generated content is wikis: websites that allow user
to edit existing content and collective intelligence. Users combine
their knowledge for everyones benefit. The most popular wiki is
Wikipedia, a community-generated encyclopaedia with articles
available in over 200 languages. Users follow certain rules, such as
not deleting accurate information and not adding biased information.
Social networking sites are also other example of Web 2.0
concept. These sites allow users to keep track of their existing
interpersonal relationships and form new ones. MySpace is the most
popular social networking site, self-defined as an online community
that lets you meet your friends friends. Each users page can contain
general info, pictures, blog entries, a message board and more.
Customization options, such as changing the background or adding
music, give users an easy way to create their own unique web page.
Other example is Facebook the preferred network among college
students. In this case the user can set privacy levels for networks or
even individuals. Includes also photo albums where you can tag your
friends in pictures, profiles lists, event, groups, a marketplace for
classifieds adds, and user status updates.
Social media refers to any media shared online as entertainment.
Examples are Internet TV sites (Joost), Internet radio websites
(Last.fm) and the iTunes Apples music store. With YouTube, users
can subscribe to other users content, share videos with friends by

email, or embed videos directly into their blogs or other websites.

This web addresses privacy and spam by allowing users to set videos
as public or private and flag inappropriate material for review by
YouTubes staff.

The use of the xhtml language to create web pages

The World Wide Web offer to the world and explosion of business and
social opportunities under the existence of millions of web pages:
some of them come from eminent companies and other successful
ones comes from people like you and me that with some new idea,
has the opportunity of reach to the hole wide world, 365 days and 24
hours abroad. Unlike procedural programming languages such as C,
C++, or Java, XHTML is a markup language that specifies the format
of the text that is displayed in a web browser. One key issue when
using XHTML is the separation of the presentation of a document
from the structure of the documents information. In HTML, it was
common to specify both the documents structure and its formatting,
but this has many drawbacks and good programming practices
recommends the use of the extensible version of the hypertext
markup language. In this way only the structure should be given with
XHTML. Additionally, the formatting information will be specified by
means of other Internets language: the Cascading Style Sheets or
CSS. In this article we are going to describe the basis of those
languages.
Promoting Information to the Web

The World Wide Web, as we know it, has been in existence for years
now. At the beginning, few course management systems existed, and
the only books available on the topic of online learning focused
mainly on how to set a Web page by using HTML, devoting little or no
attention to how to teach online.
The use of computers could be extremely variant. There are
hypertext systems, computing conferencing software, computing for
learners with special needs, computer simulation for science
instruction and so on, even games had been used for learning
purposes. Here we review some of them.
Hypertext
Hypertext is an approach to information management in which data is
stored in a network of nodes connected by links. Nodes can contain
text, graphics, audio, video, as well as source code or other forms of
data. The nodes, and in some systems the network itself, are mean
to be viewed through an interactive browser and manipulated through
a structure editor.

While conventional publications are limited to text and graphics,

hypertext nodes offer sound, video sequences, animation, games and
even full computer desktop applications. These concepts are
producing a qualitative change in the way some people are
conceptualizing information resources (see Section: The Web 2.0).
Print vs. electronic medium

The most important fundamental property of books is that they are
static. Once printed, a book cannot be altered except by reprinting,
and at no time do readers have the opportunity to change or
manipulate its contents. A review of the assets and shortcomings of
books (and counteracts the electronic data) is helpful in establishing a
list of capabilities essential for high-quality electronic document
systems (see Table below).
Characteristic Advantages Disadvantages
Integrity of Historical value Readers can never alter
information content.
Never inaccessible because
of unreliable hardware Readers cannot customize
information.
Cannot conform to user
preferences (text style).
Physical entities Portable Limited to 2D information.

Allows browsing and Limited to static text and
exploring graphics.
Allows annotation and Costly to reproduce for quickly
underlining outdate information.
Aesthetically appealing Often hard to locate specific
information
Static Cannot handle sound or
motion.
Difficult to create multiple
indices.
Advance Well-defined and accepted Joint authorship difficult.
technology standards
Rekeying text is error-prone.
Typography, graphic design,
and photo reproduction
refined fields
High-resolution print and
graphics.
Easy to read.

The first essential capability of a good electronic document system is

to provide a means for promoting the connection of ideas and the
communication between individual scholars. These capabilities can be
conceived of as a set of tools for creating a hypertext structure, the
underlying framework of all electronic document systems developed
on the Internet.
Multiuser access to information is another fundamental capability that
must be present to promote connectivity. This means that the system
must provide multiple users with access to the same corpus of
documents. At least, multiple users must have read access to a
colleagues documents; at best, they should be allowed to create new
links within a colleagues document and to edit the document in a
controlled fashion.
To facilitate distribution of documents to a broader audience than the
course community, multimedia documents systems should provide
tools for electronic dissemination. This would include automatic
transfer of finished documents to typesetting equipment or the
incorporation of mail or conferencing systems. Powerful
hypertext/hypermedia systems allow the linking of documents across
long-haul networks and that encourages the creation and exchange of
references as opposed to files.
An introduction to XHTML
Since 1990 HTML or Hyper Text Markup Language has been the
language recommended for writing Web pages in. And it has been
very successful but HTML has its problems. Without going into
specifics, as it's not the subject of this article, HTML has become a
mess. To sort this mess out the World Wide Web Consortium, the
standards body for the Web, came up with XHTML in 1999. XHTML
stands for eXtensible Hyper Text Markup Language and is written in a
language called XML or eXtensible Markup Language.
As the name implies XHTML has the capability of being extended. You
can use extra modules to do things with your pages that weren't
possible with HTML. The long-term goal is that your Web pages will
be able to be understood by computers as well as humans.
XHTML Tags for an Easy-to-do Web

The websites are nothing more than ASCII text files (or drawings)
written in an hypertext language labelling, which can be accessed
through a client server. This format is based on inter-laying special
tags throughout the text that makes up the page. This special code is
series of pairs of marks or labels (tags) which indicate special
characteristics of that text. A tag is nothing more than a specific

character set, which has a specific meaning and is interpreted

correctly by the software client or browser. The opening tag enclosed
in the characters < and > and the counterpart, or the characters </
and >. Browsers are able to interpret these labels as appropriate,
subject to certain exceptions, acting on the visual presentation format
of the page. In fact, if you load a web page with our usual browser
and click the right mouse button on it will also display a menu where
you can select the appropriate option to view source. This will open a
window that can display the ASCII text of that page, and if we look
carefully we will see the tag set.
XHTML markup contains texts that represent the content of a
document and elements that specify a documents structure. Some
important elements are the html element, the head element and the
body. The head section contains information about the XHTML
document, such as its title or access to external files, like those that
contains formatting instructions called style sheets. Also, the header
could contain client-side programs called scripts for creating dynamic
web pages. The body section contains the pages content that the
browser displays when the user visit the web page.
Many start tags have attributes that provide additional information
about an element. Each element has a name and a value separated
by an equal sign (=). Usually attributes are optional and modifies the
by default behaviour of a tag. For example, the paragraph tag p, uses
a modifier called align which could have as values left, right, center
or justify, and changes the text alignment of this paragraph. If we
want to assign the same property using CSS language, then the
attribute is called style, and we must specify then the property name
and value: in this case text-alignment.
Frankly the difference between HTML 4.01 and XHTML 1.0 is almost
laughable. Don't think you are missing something important just
because it is so easy, you aren't, because it really is very easy. The
differences are:
DOCTYPE reference has changed
xmlns reference in the HTML tag
All tags in lowercase
Valid structure
Attribute quotes are mandatory
"Empty" tags must be closed now
What is a DOCTYPE? It is a declaration at the top of your document.

A DOCTYPE, simply put, is a declaration of what standard or

specification the web browser should use to interpret the web

document. You are telling the web browser that what follows
conforms to a certain specification, e.g. XHTML or HTML 4.01. The
web browser can then take advantage of this knowledge. It is
becoming very important for you to use a DOCTYPE declaration and
in fact it is mandatory for XHTML 1.0. If you don't put it in then
XHTML 1.0 compliant browsers will not render your page at all.
The xmlns, or XML NameSpace, declaration simply tells the browser,
once again, to use the XHTML specification located at W3C. This
declaration is carried over from the XML specification and has no
correlation in HTML 4.01.
Attribute quotes are the quotes around the value of an attribute. For
instance the src attribute of an image must have its value surrounded
by quotes, like so: src="images/bob.gif". XHTML compliant browsers
will not render your document if you do not use quotes. Single quotes
do not count.
Lets see and example of some markup code.
Note that the two first lines are somehow automatic info that should
be on your file. We have used a special text editor which enables
syntax colouring: plain text is in black and XHMLT is mainly in blue,
red and fuchsia. Here is how it is visualized on a web browser.
To promote correctly written documents, the World Wide Web
Consortium (W3C) provides a validation service for syntax checking
at http://validator.w3.org .

Description of individual course

Course title: Informtica de Gestin II
Level of course: Undergraduate
Programme in which is integrated: Diplomatura en Turismo
Type of course: Elective
Year of study: Second
Calendar: 2 (February to June).
Exams: See student guide of center.
Credits (theory and practices): 2,5+2
Number of credits expressed as student workload (ECTS): 4*
*1 ECTS= 25-30 hours of work. See activities and hours of
work estimated below.
Descriptors: Information technologies and communication in the
tourist sector. Personal Webs pages design and creation.
Understanding of the Web 2.0.
Objectives of the course (expressed in terms of learning outcomes
and competences).
The student will comprehend many issues, such as:

Internet and its advantages for the tourist sector.

Internet from a technical viewpoint. Communications protocols.
Services and information guides to the tourist via internet:
accommodation, gastronomy, means of transport, travel agencies,
etc.
The necessary instruments for the information searching.
The tourists access services in Internet.
Internet from the viewpoint of travel agencies and tourists
companies.
Present the amazing possibilities that information technologies
and communications offer in several fields of tourism.
Reservation access systems.
Reservation online systems through the use of dynamic pages.
European programmes and national administration that support
the tourist enterprise.
How to design a web site. Specific issues that a tourist
company should focus on.
Good practices in a web site.
Software tools for the web development.
The elements of a Web Site.
How to introduce publicity in a web.
Web Site Promotion on the Internet.
Technologies for creation and improvement of a Web Site.
The HTML language.
Basic electronic edition.
Basic structure of a personal page / tourist company.
Technologies and method to provide of interactivity and
multimedia elements of a web page.
Cascade Style Sheet (CSS) language for web style formatting.
Script languages for applications on the server side and user
side.
The E-commerce and the news business opportunities.
The enterprise advantage of using e-commerce in tourism. Case
study of the more outstanding webs.

Electronic Data Interchange (EDI).

Payment modes on the internet.
Mechanism for secure electronic transactions.
Available resources for remote connection experiences.
Security mechanisms for host and personal computers
protection.
The student will be able to:
Manually edit HTML code.
Image editing to adapt graphics to the web.
Insert GIF and JPEG images into the document.
To create simple and complex tables.
To show the information through frames.
To create image maps.
To create and design forms.
To include JavaScript code into the HTML page.
To insert multimedia elements for an interactive web page.
Create and apply web formatting through the use of the style
sheet language.
Identify and work remotely on a server.
Use communication transfers based on safety connections.
Summarize knowledge about the characteristic of a good Web
Site, designing and creating one, with providing navigation elements,
multimedia and interactivity.
Prerequisites and advises: Use of the file system, e-mail and

netsurfing.
Course contents / descriptors / keywords

Internet, protocols, web technologies, services, design of web sites,
HTML language, CSS language, scripting language, images
publication, remote file transfer, payment safety methods, e-
commerce.

Recommended reading
Calvo, A.; Gutierrez, J.M.; Merino, J.A. (1997) Como hacer
negocios en Internet. Paraninfo.
Curtis, G. (1995) Business Information System: Analysis,
Design and Practice. Addison-Wesley.
Parra, B. (1997) Internet para viajeros. Anaya.
Amoroso, E.; Sharp, R. (1997) Seguridad en Internet e
intranet. Prentice-Hall, Madrid.
Teaching methods
Theory lessons with software presentations assistance and blackboard
examples. In every session, the last lesson concepts are review and
some news elements are introduced.
Computer room lessons are taken in order that the students could
practice the concepts explained during the week. The students work
with HTML templates which show in a practical way a certain concept.
All student needs, the software and example files, are provided to
download from the teacher web page. In this way, the student is able
to make the practice from his home, either because the student didnt
come or because he/she wants to repeat the practice.
The practice part of the course is an important complement of the
theory and certifies that the students have understood the concepts
explained in class. The student must develop a web page (design,
edition and server upload) to pass the course. The web topic is of free
choice.
The theory is complement also with a final exam, where concepts
about internet, e-commerce and technologies for the creation web
site, should been explained and reasoned by the student.
Activities and estimated workload (hours)
Activities Lecture hours Study hours Total
24 12 36
Lessons 12 12 24
Lab practice 3 1 4
Practice discussion 0 35 35
Web page 2 10 12
Exams 41 70
Total 111

Assessment methods
The evaluation is executed through the handing over of three
practices and a final exam.
The practice part is a 75% of the final mark and the theory exam is a
25% of it.
Other practices (beside the web page) are offered to the student as
optional but highly recommended. Those are:
The organization of a travel through the current Internet
services. A review of the web sites used should be appended.
Develop of a web page of personal theme and individual
realization. This is going to be quantified qualitative and
quantitatively based on the direct edition of the HTML, the content
and the presentation. If the minimum is not reached the completion
will hand out in September.
Working on remote sessions and secure file transfer is needed
to deliver the final version of the students personal web.
Language of instruction
Spanish and English. Erasmus student can use English in the practice
and the final exam.
Links to more information

Course description, tutorship, complementary educational material for
theory and practice at URL: http://lsi.ugr.es/rosana
On-line learning platform with individual restricted access for student
marks and communications at URL: http://tutor.ugr.es
Web pages of students: http://lsi.ugr.es/rosana/gestion2/
Name of lecturer(s) and address for tutoring

Rosana Montes Soldado E-mail: rosana@ugr.es
Web: http://lsi.ugr.es/rosana
Office at FCCEE
Office num. A-203. Software Engineering Department. Facultad de
Ciencias Econmicas y Empresariales, Campus Cartuja 18071.
Granada. (Spain)
Telephone: 958 243697

Office at ETSIIT
Third floor, office num. 19. Software Engineering Department.
Escuela Tcnica Superior de Ingenieras de Informtica y de
Telecomunicacin. Avd. Periodista Daniel Saucedo Arana, sn. Parque
Almunia. 18071. Granada. (Spain)
Telephone: 958 241000 Ext.: 20038

Apndices
Tema VI. Apndices

Relacin de problemas de HTML
Ejercicios de HTML bsico

1. Indquese cuales de las siguientes sentencias son verdaderas o
falsas. En caso de responder falso, justifquese.
Puedes especificar el fondo de una pgina como un atributo
en la etiqueta <HTML>
El uso de elementos EM y STRONG est en desuso.
El nombre de nuestra Web debe ser siempre homepage.html
Es una buena costumbre en programacin insertar
comentarios en el documento HTML que explique qu se est
haciendo.
Los hiperenlaces se insertan al texto, empleando el elemento
LINK.
2. Rellene los espacios en blanco en cada una de las siguientes

sentencias.
a) El elemento ______ se utiliza para insertar una regla
horizontal.
b) El texto en superndice se consigue con la etiqueta _____ de
igual forma que el subndice es formateado con el elemento
______.
c) El elemento _______ se localiza entre las etiquetas <HEAD> y
</HEAD>.
d) La cabecera ms pequea que se puede conseguir es _____ y
la ms grande posible _____.
e) Para formatear tanto el tamao como el color del texto,
debemos emplear el elemento _______.
f) Es posible centrar una seccin de la pgina, rodendola de las
etiquetas _________.
3) Identifique cada uno de los siguientes, como elementos o

atributos.

a) HTML
b) WIDTH
c) ALIGN
d) BR
e) SIZE
f) H3
g) A
h) SRC
4) Dado el prrafo del final de la relacin, coloque adecuadamente

marcas para: H1 para la cabecera de seccin, P para el texto,
STRONG para la primera palabra de cada frase y EM para todas
las letras maysculas.
5) Para el mismo prrafo coloque las etiquetas adecuadas para:
separar sentencias empleando lneas horizontales alineadas a la
izquierda, de tal forma que el tamao de la lnea sea igual al
nmero de palabras de la sentencia que antecede. De forma
alternativa emplear lneas horizontales de color slido.
6) Explicar por qu el siguiente cdigo es vlido (mirar la
especificacin para P):
<P> Aqu tenemos algn texto ...
<HR>
<P>Y aqu tenemos otro poco...</P>
7) Explicar por qu el siguiente cdigo no es vlido (mirar la

especificacin para BR)
<P>Aqu tenemos algn texto... <BR></BR>
Y aqu tenemos otro poco...
8) Dada una imagen llamada moon.gif de 200 pxeles de ancho y 150

de alto, utilizar los atributos adecuados del elemento IMG para:
a) Incrementar en un 100% el tamao de la imagen
b) Incrementar en un 50% el tamao de la imagen
c) Cambiar el ratio alto / ancho a 2:1, manteniendo el ancho
especificado en el apartado a)

Apndices
9) Crear un enlace a cada uno de los siguientes elementos:

a) Fichero index.html localizado en el directorio files
b) Fichero index.html localizado en un subdirectorio de files
llamado text
c) Fichero index.html localizado en el directorio other que cuelga
de nuestro mismo directorio padre (recordamos que .. es el
equivalente de directorio padre)
d) A la direccin de correo del actual presidente de Estados Unidos
(president@whitehouse.gov)
e) Por FTP a un fichero denominado LEEME del directorio pub de la
direccin ftp.cdrom.com
Prrafo para el ejercicio 4:

3.1 Guas y Sistemas de Informacin al turista
Cuando viajamos queremos sacar el mximo partido a nuestra visita.

El tiempo disponible es limitado y es imprescindible disponer de una
gua que nos aconseje y que nos permita hacer una seleccin. Hay
guas de muchas clases. Atendiendo al mbito geogrfico que abarcan
existen:
- guas internacionales.
- nacionales, que se centran solo en el pas.
- regionales o interregionales que cubren una o varias comunidades
autnomas.
- guas locales centradas en una ciudad.
- guas personales, escritas por gente preocupada por difundir el
patrimonio turstico de su ciudad.

Ejercicios de HTML avanzado

1) Indica cuales de las siguientes sentencias son verdaderas o falsas.
Si la respuesta es falsa, debes razonarla.
a) No hay lmite en el nmero de niveles de anidamiento de una
lista ordenada o desordenada.
b) El ancho de todas las celdas de una tabla debe ser el mismo
c) Una lista ordenada tiene solo un tipo de sistema de numerado.
Para iniciar un nuevo tipo de numeracin hay que empezar otra
lista.
d) El elemento HEAD impera sobre el elemento TABLE.
e) Estamos limitados a un mximo de 100 enlaces internos por
pgina.
f) Todos los navegadores pueden renderizar la etiqueta
FRAMESET.
2) Rellena los espacios en blanco de las siguientes sentencias

a) El atributo __ __ de INPUT inserta un botn de forma que
cuando es pulsado, borra el estado de los dems.
b) El espaciado de un FRAMESET se indica mediante el atributo
___ o bien ___ dentro de la propia etiqueta.
c) Mediante el elemento ____ dispondremos de un tem dentro de
una lista
d) El elemento ____ indica al navegador qu versin de HTML est
incluida en la pgina. Dos tipos de este elemento son ___ y
___.
e) Las formas ms normales de mapear una imagen son: ___, ___
y ____.
3) Escribe las etiquetas HTML apropiadas para realizar las siguientes

propuestas:
a) Inserta una pgina Web que contenga marcos de tal forma que
el del lado izquierdo se extienda en 300 pxeles sobre la
pantalla.
b) Inserta una lista ordenada que utilice numeracin romana en
minsculas.

Apndices
c) Inserta una lista desplegable que muestre siempre las cuatro

primeras entradas de la lista.
d) Inserta un mapa de imagen que llamars hola, usando el
fichero foto.gif y que mostrar un texto, cuando el ratn est
sobre la imagen, que ser igual al nombre del mapa.
4) Identifique cada uno de los siguientes, como elementos o

atributos:
a) SIZE
b) OL
c) LI
d) FRAME
e) CAPTION
f) SELECT
g) TYPE
5) Cul ser el aspecto que producir el siguiente FRAMESET?

Supondremos que las pginas van sobre fondo blanco a una
resolucin de 800x600. Intenta aproximar las dimensiones:
<FRAMESET ROWS=20%,*>
<FRAME SRC= hello.html NAME= hello >
<FRAMESET COLS=150,*>
<FRAME SRC= nav.html NAME= nav>
<FRAME SRC= index.html NAME= index >
</FRAMESET>
</FRAMESET>
6) Escribe el cdigo HTML que dara como resultado lo que observas

a continuacin. Sabemos que el ancho de la tabla es de 400
pxeles y que la cabecera utiliza nivel 2.

Method Summary
java.util.Locale getLocale()
void setLocale(java.util.Locale locale)
7) Asumiendo que tenemos un documento con varias secciones,

escribe el cdigo que cree un frame con una tabla de contenidos
en el lado izquierdo de la ventana, de forma que nos lleve a cada
uno de las subsecciones del documento mediante enlaces internos.

Apndices
Programa de la asignatura
Asignatura: INFORMATICA DE GESTION II

Titulacin: DIPLOMADO EN TURISMO
Ciclo: 1 Curso: 2 Cuatrimestre: 2
Tipo de materia: OPTATIVA
Crditos: 4.5c Tericos: 2.5c Prcticos: 2c
Conocimientos previos Los vistos en la asignatura INFORMATICA DE
recomendables: GESTION I
Programa de Teora
1. Internet y sus ventajas para el sector turstico

- Servicios y guas de informacin al turista va Internet:
alojamiento, gastronoma, medios de transporte, agencias de
viajes, etc.
- Bsqueda de informacin y reservas
- Internet desde el punto de vista de las agencias de viajes y
empresas tursticas
2. Diseo de sitios Web tursticos
- Caractersticas de un buen sitio Web
- Elementos de un sitio Web
- Publicidad y promocin en Internet
3. Tecnologas para la creacin e implantacin de sitios Web
- Programas de creacin de paginas Web
- El lenguaje HTML
- Tecnologas y mtodos para dotar de interactividad y de
elementos multimedia de una pagina Web
4. Comercio electrnico
- Nuevas oportunidades de negocio

- Intercambio Electrnico de Datos (EDI): aspecto clave del

comercio electrnico
- Modalidades de pago en Internet
- Seguridad en la Web
- Seguridad en la transaccin
- Nuevas tecnologas para el comercio
Programa de Prcticas
1. Acceso a servicios tursticos en Internet

- Bsqueda de informacin turstica (alojamiento, medios de
transporte, etc.)
- Acceso a un sistema de reservas
- Sistemas de reserva en lnea mediante paginas dinmicas
2. Edicin electrnica bsica
- Diseo de una pagina personal / empresa turstica
- Edicin de cdigo HTML
- Introduccin de texto, enlaces y marcadores
- Insercin de imgenes GIF y JPEG
- Tablas y formularios
- Insercin de elementos multimedia e interactividad en las
paginas Web
3. Conexiones remotas
- Acceso identificado mediante conexin segura
- Transferencia de ficheros va FTP
- Alojamiento y recursos on-line, en beneficio de una web.
Bibliografa de la asignatura
Amoroso, E. y Sharp, R. "Seguridad en Internet e Intranet".

Prentice-Hall, Madrid 1997.

Apndices
Carpintier, R. "Internet hoy: Como hacer negocios en la red".

1997.
Emery, V. "Negocios en Internet. Expansin y crecimiento".
Anaya, 1998.
Heid, J. "Los secretos de HTML y la creacin de paginas Web".
Anaya Multimedia, 1997.
Caso, E. y otros "Informtica para profesionales del turismo".
Anaya Multimedia, 2000.
Guevara, E. y otros "Internet y Turismo". Miramar, 1997.
Parra, B. "Internet para viajeros". Anaya, 1997.
Angell, D. y Heslop, B. The Internet Business Companion.
Addison-Wesley, 1994.
Deitel, Deitel & Nieto. Internet & World Wide Web. How to
program. Prentice-Hall, Inc. 2000
Palloff, R.; Pratt, K. (2007). Building Online Learning
Communities. Wiley
The Alliance for Technology Access (2000). Computer and Web
resources for People with Disabilities. Hounter House.
Boyd-Barret, O.; Scanlon, E. (2001). Computers and Learning.
Addison-Wesley
Evaluacin
La forma de evaluar al alumno tendr en cuenta su asistencia y
participacin en clase, as como:
Un 25% de teora. Se contabiliza con un mximo de 3 puntos
(multiplicados por 25 / 3) del examen parcial y trabajo optativo
de clase.
Un 75% de prcticas. Se contabiliza con un mximo de 5
puntos (multiplicados por 75 / 5), incluyendo en este apartado
la entrega de las prcticas mediante conexin remota.
El total de la nota se obtendr de la suma de las dos calificaciones
anteriores. Notable a partir de 8
Ejemplo: Teora 2.1 y prcticas 3.9 dan como resultado (1.75 + 5.85
= 7.6) Aprobado

Requisitos mnimos de la WEB practica

La nota de prcticas consiste en la realizacin, mediante un editor
simple de texto, de una web con el tema deseado: hotel, agencia de
viajes, camping, restaurante, alquiler de coches,... de tal forma que
aparezcan como mnimo los siguientes elementos:
1. Imgenes que hayan sido tratadas fotogrficamente:
Tamao, resolucin y formato adecuados a la web
Modificacin de la composicin; efectos grficos.
2. Enlaces internos, relativos y externos
3. Numeraciones y listas
4. Tablas
5. Formularios (con el mximo nmero de elementos
distintos)
6. Marcos de pginas
7. Mapas de imagen
Opcionalmente para una mayor calificacin, se puede incluir:
Imgenes animadas
Iconos propios
Audio o video
Applets o elementos Flash
Javascript u Hojas de estilo
Junto a lo anterior se valorar adems:
- la presentacin: equilibrio de colores, originalidad, etc.
- el contenido: informacin y servicios ofrecidos al cliente
- la facilidad de navegacin de la web: que el cliente no se pierda,
que encuentre la informacin fcilmente, etc.
- la rapidez de carga: cada imagen no debe superar los 20K, ni
debe haber un nmero excesivo de imgenes aunque ocupen
poco.
- La complejidad: web debe tener como mnimo tres niveles
jerrquicos y no menos de tres pginas por nivel.
-

Apndices
Transferencia segura mediante SSH

En esta seccin hablaremos de unas de las partes ms importantes
en cuanto a la finalizacin de las prcticas: el envo de vuestros
trabajos.
La pgina web ser un trabajo individual o por parejas en el cual
demostrareis vuestros conocimientos de HTML, sin embargo para esta
asignatura iremos un poco ms all haciendo nosotros mismos que
esos ficheros funcionen en un servidor web que est conectado las 24
horas para favorecer la visualizacin de nuestras pginas en cualquier
parte del mundo y a cualquier hora del da. Quiero recalcar que lo
importante es que esta puesta en marcha o deployment, la realizar
cada alumno y no la profesora (que ya sabe bastante del tema y no
necesita practicar esta parte).
Para ello usaremos un mismo servidor web o servidor HTTP para
alojar todas las webs. El nombre del servidor es tamen.ugr.es Este
servidor ser temporal y estar habilitado nicamente durante el
periodo de entrega de prcticas. Posteriormente se movern todas las
webs a la direccin http://lsi.ugr.es/rosana/gestin2 y las que ah
estuviesen antes, se movern a una carpeta asociada con su curso
acadmico.
Entre las caractersticas del servidor tamen, est que utiliza Apache
como software servidor, el cual est instalado sobre un sistema
operativo Linux cuya distribucin gratuita y de libre distribucin es
OpenSuse 1.13. Por qu digo todo esto? Pues porque no es lo mismo
que nuestros archivos estn finalmente en un servidor Windows que
en un servidor Linux. Lo ms caracterstico de esta distincin es que
Windows no es sensible a maysculas y minsculas y Linux s lo es.
Por tanto si no hemos tenido cierta precaucin en el tema del
nombrado de nuestros ficheros es muy posible que haya confusiones
entre el cdigo html y los recursos que forma parte de nuestra web.
Por ejemplo supongamos el siguiente cdigo del fichero Cocina.html:
Requiere para funcionar que el recurso-carpeta Fotos exista, y que

dentro aloje al fichero llamado FotoComida.gif. Este cdigo lo hemos
podido hacer en casa, teniendo la siguiente situacin:

Y nos puede parecer muy normal, sin embargo has de notar que la
carpeta se llama fotos y no Fotos, y por tanto no ser la carpeta que
buscamos cuando estemos en Linux, produciendo un error de Objeto
no encontrado. Lo que puede funcionar en Windows no significa que
est bien, ya que como hemos dicho al principio de conocer el
lenguaje HTML los errores no son notificados y los resultados de
ficheros errneos pueden o no verse bien. Para tener una garanta de
que algunos errores los podremos eliminar, deberemos usar siempre
en el cdigo el mismo nombre de recurso que vemos en nuestro
sistema de ficheros. Y mucho cuidado con las imgenes bajadas de
Internet, ya que en muchos casos vienen con la extensin en
maysculas (ej. Mickey.JPG) y si no tenemos activa la opcin de
mostrar extensiones, nunca nos daremos cuenta de porqu nos falla
la pgina web que solicita el recurso Mickey.jpg
La pgina web ser un conjunto de ficheros y carpetas. Entregarlas
para su evaluacin implica subirlas (upload) al servidor tamen. Por
tanto no son vlidas las frmulas de correo electrnico, CD-Rom o
pendrive.
Para mandar los ficheros de nuestra web, el servidor debe conocernos
como usuarios de su sistema. Por ejemplo mi usuario en dicho
servidor se notara como
rosana@tamen.ugr.es
Veis que parecido es esto a una direccin de correo? Es porque
precisamente nuestro correo es un buzn asociado a una cuenta de
usuario en un ordenador que nos proporciona el servicio de mail. Al
igual que para leer el correo debemos identificarnos en el servidor
usando nuestro login y nuestra contrasea, para hacer uso de otros
servicios proporcionados por el servidor debemos identificarnos. En el
anterior ejemplo, el login es rosana y la contrasea es
gasjoit2qnjgah (no pensis que os lo voy a decir!).
As pues necesitareis un usuario por cada prctica, que constar de
un login y una contrasea. En clase se especificar los das
habilitados para solicitar esta informacin por correo electrnico a
rosana@ugr.es. Por ahora os baste saber que una vez que est
creado ese usuario, automticamente se tendr un espacio web en la
siguiente direccin o URL (cada uno el suyo):
http://tamen.ugr.es/~login
Como es normal a esa direccin se accede mediante un navegador

web (google chrome, safari, firefox) y de esta forma veremos el
contenido de nuestra web en Internet. Pero antes de ello deberemos
transferir los ficheros mediante un cliente SSH, que har que nos
conectaremos al servidor de forma segura (con datos cifrados).

Apndices
El cliente de transferencia segura por SSH lo tenis disponible en mi

pgina web bajo el enlace Cliente SSH.
Una vez instalado os dejar en el escritorio dos enlaces, uno para el

servicio de inicio de sesin remota (TELNET seguro) y otro para el
servicio de transferencia de ficheros (FTP seguro). Usaremos el
segundo, que muestra una interfaz bastante reconocible: el lado
izquierdo representa nuestra estructura de ficheros local, es decir, la
que se encuentra en el equipo que estamos usando para conectarnos
y entregar la prctica; el lado derecho representa las carpetas y
ficheros que se encuentran en el lado del servidor y es el destino de
nuestros ficheros y carpetas; la zona inferior es informativa y nos dir
la tasa o porcentaje de transferencia, si se ha completado o no y el
tiempo empleado en la subida o bajada de informacin. Es importante
que veis que este programa permite una comunicacin bilateral y es
igualmente fcil hacer una descarga como una subida de informacin.
Tan solo tenemos que pensar que nosotros estamos en el lado local,
por lo que:
si descargamos (download) ficheros del servidor arrastraremos
los ficheros/carpetas seleccionados desde el lado derecho al
izquierdo,
y si subimos (upload) ficheros al servidor arrastraremos los
ficheros/carpetas seleccionados desde el lado izquierdo al
derecho.
En cualquier caso todo empieza por crear una conexin (botn Quick
Connect de la imagen siguiente) proporcionando nuestros datos:
primero el login, y despus de presionar el botn Connect el

password. Nos saldrn uno o dos mensajes informativos entre

medias, dependiendo de si es la primera vez o no que se accede a
este servidor con este programa. Como se muestra en la captura, tan
solo se ha de rellenar el nombre del host y el nombre del usuario (el
que se os haya indicado en el correo).
Tan slo nos queda una cosa ms para realizar correctamente la

transferencia de nuestros recursos: el directorio destino del servidor,
es decir el destino de nuestro drag-and-drop (arrastrar a la derecha y
soltar con el ratn). El directorio en cuestin es nico y es el que
permite que esos ficheros salgan a Internet. Se deber transferir el
fichero index.html y todos sus recursos a:
~/public_html
Si dentro de este directorio no se encontrase el fichero index.html la
web se visualizar como un listado de ficheros (el contenido del
directorio) y no sera del todo vlido, ya que nuestra URL (ej.
http://tamen.ugr.es/~gestion2) debe llevarnos directamente a
nuestra portada.
Comprobad ahora que todos los enlaces funcionan y que se ven todas
las imgenes. Si hubiese que solucionar algn problema, os conectis
las veces que sean necesarias al servidor para reemplazar ficheros.

Guiones de prcticas
Tema VII. Guiones de

prcticas
Sesin 1
Nos descargamos el siguiente fichero de 4.5MB y lo
descomprimimos.
http://lsi.ugr.es/rosana/docencia/turismo/practicaImagen.zip
En la carpeta se encuentra un fichero guion.pdf que (sin muchas

explicaciones) propone una serie de ejercicios a realizar sobre las
imgenes incluidas en la prctica.
Junto a las imgenes se encuentra un ejecutable con un software
sencillo de manipulacin de imgenes. Realmente este programa
hace algo ms que el Paint y ocupa muy poco. No podemos instalarlo
en el aula por lo que visitamos la pgina web http://www.picnik.com que
incluye gratuitamente un software de retoque y edicin de imgenes.
No tiene, sin embargo, uso del portapapeles, por lo que operaciones
como copiar y pegar no estn disponibles. Para esta accin tuvimos
que usar Paint (por no tener otro programa en Windows).
El guin propone una serie de ejercicios, que tienen un nico
objetivo. Aprender que:
1. Cambiando el tipo de archivo (la extensin o formato) se
obtienen resultados muy dispares en cuanto a tamao del
archivo (KB en disco). Se da un fichero original.png para que lo
paseis a jpg y gif y comprobareis diferencias en tamao de
archivo y calidad visual.
2. Es necesario redimensionar las imgenes procedentes de
cmaras de fotos, por eso se incluye una foto con un paisaje
para que encontris el valor ptimo de resolucin.
3. Podemos recortar partes de la imagen para usar ese rea
concreta como imagen nueva (obtener un detalle) o bien para
cambiar la imagen actual. Se proponen dos ejercicios:
Segn el guin: hacer que una de las jarras tenga asa a
la izquierda y asa a la derecha. Se recorta un asa, se
invierte, se guarda, y tras copiar esta imagen, la
pegamos en el original, colocando sta a la derecha de la
jarra. Simula que tiene dos asas en lugar de una.
En clase: capturar el escritorio (tecla impr pant del
teclado) y tras disponer de su fichero (en Paint pegamos)

modificarla para que los iconos de las carpetas no estn

en su sitio sino sobre la papelera de reciclaje, simulando
que se tiran a la papelera. Hay que recortar un icono
carpeta (recortar y copiar), sustituir el fondo que ha
dejado por negro (herramienta de relleno), y pegar para
que lo coloquemos por encima de la papelera. Algunos
compaeros han simulado distintos tamaos del icono a
tirar.
4. Podemos aadir texto a la imagen. Picnik incluye muchos tipos
de letra, y posibilidad de cambiar el color. Cuando lo aadimos
podemos mover, rotar, o redimensionar la caja asociada al
texto. Al aceptar se queda fijado en la imagen.
5. Podemos aplicar filtros que modifiquen el aspecto (color,
contraste, temperatura,...) de la imagen. Se har de forma
global a toda la imagen, salvo que hayamos creado capas, en
cuyo caso se aplica al contenido de la capa seleccionada.
6. Al guardar podemos decidir no solo el nombre del archivo, sino
el formato. En el caso de JPG adems podemos decidir la
calidad de imagen (10 mxima calidad, poca compresin, 1
muy mala calidad y tamao en disco reducido al mximo). Por
defecto suele venir al 7 o al 8. Uno de los ejercicios pide que se
guarde la imagen con una compresin severa para que podis
comprobar visualmente que la imagen resultante tiene muchas
prdidas con respecto a la original.
Sesin 2
Nos descargamos y descomprimimos los ficheros:
http://lsi.ugr.es/rosana/docencia/turismo/basico.zip
http://lsi.ugr.es/rosana/docencia/turismo/EditPlus.zip
En la carpeta EditPlus se encuentra un fichero ejecutable
EditPlus.exe que al ser lanzado nos abre un dialogo para introducir la
licencia. Es un software shareware que se puede usar ilimitadamente
(aunque diga que slo es vlido por 30 das) por lo que nicamente
debemos aceptar usando el botn I Agree.
Probamos un par de cosas muy tiles en EditPlus como editor.
Puede abrir muchos archivos de golpe y casi sin costarle.
Una vez que tenemos varios archivos abiertos podemos hacer
reemplazo mltiple en dichos archivos con una nica operacin.
Esto ser muy til para reemplazar acentos y otros caracteres
especiales () por los cdigos html correspondientes.

Guiones de prcticas
Podemos usar la opcin de guardar todos. Los ficheros

modificados (y marcados en rojo) quedaran en azul.
Abrimos la carpeta bsico y leemos el fichero orden.txt. Este fichero
indica en qu orden debemos editar y ver los archivos html
contenidos en dicha carpeta.
En esta sesin vamos a trabajar con los tres primeros ficheros.
1. main.html. En este fichero podemos observar la estructura
tpica de un documento html. Como nuevo elemento
observamos los comentarios (en verde) que sern ignorados
por el navegador. Ejercicio:
o Cambia el texto del ttulo y pon tu nombre y apellido. Usa
Ctrl+B para visualizar los cambios en el navegador
(integrado en EditPlus).
o Dentro de body existe un parrafo que por defecto se ve a
la izquierda. Cambia la alineacin del prrafo para que
aparezca centrado. Se puede usar el atributo modificador
o bien la etiqueta center.
2. header.html. En este fichero se usan todas las cabeceras, desde
la h1 hasta la h6. Al visualizarlo aparecen las 6 centradas y en
tamao decreciente. Se quiere cambiar la alineacin para que
las cabeceras impares queden a la izquierda y las cabeceras
pares vayan alineadas a la derecha.
3. style.html. Este fichero usa cabeceras y estilos (negrita cursiva
y subrayado). Pido que el texto Web Site! se visualice
subrayado, negrita y cursiva. Tambin pido separar los tres
prrafos con dos lneas horizontales.
Sesin 3
Desde EditPlus abrimos la carpeta bsico seleccionamos
(manteniendo la tecla CTRL) los ficheros: texto.html, special.html,
barras.html y picture.html
Ejercicios para el fichero texto.html
Sustituye el tipo de letra Arial por Tornadle
Sustituye el tipo de letra Times por Comic Sans MS
Realiza la siguiente cadena de texto/color (utiliza colores
arbitrarios):

Ejercicios para el fichero barras.html

Cambiamos las tres primeras barras para que veamos la
diferencia de usar valores absolutos en lugar de relativos. La
primera tendr un ancho de 200px, la siguiente 400px y la
tercera 600px.
Crea tres barras horizontales al final de las existentes usando
size 1, 2 y 3 como las barras anteriormente comentadas. Utiliza
valores relativos para conseguir un aspecto aproximado (en
ancho) a las tres primeras barras con tamaos absolutos.
Adeles color a las barras.
Ejercicios para el fichero picture.html
Duplica el valor de width y height. Se ve mal la imagen?
Restaura los valores originales pero ahora usa el valor de width
en height y viceversa, es decir, intercambia los valores. Se
ven afectadas las proporciones?
Inserta un espacio en blanco entre deitel y gif Que se ve
cuando no se encuentra un recurso?
Modifica el valor de alt y pon tu nombre y apellidos en su lugar.
Ejercicios para el fichero special.html
El texto est sin acentos, usa el cdigo html apropiado para
aadirlos.
Si t eres ERASMUS: Posiblemente tu nombre requiera el uso
de caracteres especiales, localzalos y escribe tu nombre
usando dichos cdigos.
Descarga una imagen desde Google Imgenes y gurdala
dentro de la carpeta bsico (al mismo nivel que el fichero que
editas). Pon dicha imagen como fondo de la pgina.

Guiones de prcticas
Sesin 4
Desde EditPlus abrimos la carpeta bsico y abrimos nicamente el
fichero links.html. Algunos ejercicios se harn sobre este fichero y
otros sobre pginas html nuevas.
En el fichero links.html
Visualiza los enlaces externos comprobando que funcionan
Aade un enlace externo a la web de la Universidad de Granada
Convierte el listado de direcciones en una lista numerada con
romanos.
Crea un enlace al fichero picture.html. El texto del enlace es
arbitrario.
Entra en la web http://images.google.es/ y busca el trmino bart
simpson. Observa el tamao de los ficheros en cuanto a resolucin y
segn esta informacin descarga una imagen que sirva de fondo de
pgina. Guarda la imagen en el directorio c:\ y si es necesario
renombra el fichero para que sea fcil de escribir como recurso.
Descarga otra imagen que por ser de dimensiones ms pequea no
pueda ser usada como fondo de pgina. Guarda la imagen en el
directorio c:\ y si es necesario renombra el fichero para que sea fcil
de escribir como recurso.
Crea un fichero nuevo desde la plantilla que obtenemos usando el
men File > New > HTML page. Modifica el ttulo y el color de fondo y
guarda este archivo con el nombre de enlaces.html (elige guardarlo
en la misma carpeta bsico).
Pon la imagen de fondo de Bart que has descargado.
Modifica los colores de texto y enlace para que se vean bien con
respecto al color de fondo.
Crea un enlace al fichero link.html y otro a la imagen que has
usado de fondo. El texto de los enlaces es arbitrario. Observa
que visualizar la imagen implica verla alineada a la izquierda.
Crea un enlace en el fichero picture.html que vuelva o retorne a
este fichero (el de enlaces.html).
Inserta la segunda imagen descargada intentando que se
visualice en el margen inferior derecho de la ventana del
navegador. Haz uso de las etiquetas <br> y/o <p> para ello.

Sesin 5
La sesin de hoy pretende hacer uso de ejemplos de la Web 2.0.
El concepto original de la web 2.0 empieza llamando Web 1.0 a la era
de pginas estticas HTML (algo as como lo que vais a hacer
vosotros en practicas). Muchas de estas pginas no eran actualizadas
frecuentemente, y hacan perder el inters del usuario. Despus vino
el xito de los punto-com que eran webs ms dinmicas (a veces
llamadas Web 1.5) donde los sistemas de gestin de contenidos
(Content Management System en ingls, abreviado CMS) servan
pginas HTML dinmicas creadas al vuelo desde una actualizada base
de datos. Ejemplo de web 1.5 es la pgina de la Universidad de
Granada que nos sirve del expediente accediendo de forma
identificada a nuestros datos procedentes de la bases de datos del
vicerrectorado. En ambos sentidos, el conseguir hits (visitas) y la
esttica visual eran considerados como factores importantes.
El trmino, Web 2.0 fue acuado por Tim O'Reilly en 2004 para
referirse a una segunda generacin en la historia de la Web basada
en comunidades de usuarios y una gama especial de servicios, como
las redes sociales, los blogs, los wikis o las folcsonomas, que
fomentan la colaboracin y el intercambio gil de informacin entre
los usuarios. Un ejemplo de este esta filosofa colaborativa es
tutor2.ugr.es que contiene un apartado grfico que ayuda a tener
sentido de comunidad.
En clase vamos a hacer uso de las wikis y los blogs. En stas los
usuarios colaboran para mejorar la informacin de la propia pgina
editando los contenidos.
Ir a http://tamen.ugr.es/wiki/index.php y buscar el enlace para
Editar. Hay que tener cuidado a la hora de editar la portada porque
podemos crear conflictos de contenido. El aspecto resultante ser un
texto de la siguiente forma:
== MOBIBLOG ONLINE GUIDE ==
Mobi-blog the WebBlog for Erasmus Students

[http://www.mobi-blog.eu/ Home Page]
The online guide gives information of european countries and
links stories to Universities, cities and purposes to give
better information for the exchange.

Guiones de prcticas
Each City has a number of incoming stories of Erasmus

students, creating social link between countries where
students travels (from-to)
[[en:welcome]]
[[es:welcome | Bienvenido]]
[[about us ]]
Erasmus Countries
---
[[Spain]]
* [[Granada]]
* Salamanca
* Palma de Mallorca
Germany
Italy
* [[Bologna]]
Podemos ver cmo los dobles corchetes significan enlace, el asterisco

lista y los tres signos menos una lnea. El contenido del enlace
equivale al nombre de la pgina, pero podemos tener distintas
versiones del mismo fichero para hacer traducciones. Podemos
modificar el texto del enlace usando el carcter pipe (|). Los enlaces
en rojo indican que la pgina aun no ha sido creada.
Como ejercicio debis seleccionar un pas europeo y una ciudad de
dicho pas. Me la indicis en clase para que no haya conflictos a la
hora de guardar la pgina (esto lo iris habiendo por turnos).
Entonces aadiremos la ciudad (y el pas si no existe) y editaremos el
contenido de la pagina referenciada (no la portada). Esto se har
buscando informacin de inters en Internet y preparndola para que
tenga un formato texto. Grabaremos e iremos viendo los cambios
aplicados en la wiki. La informacin a desarrollar de cada pas/ciudad
usa unas plantillas.
En el Editplus: copia la plantilla y rellenarla con la informacin de
enlaces obtenido en Internet. Cuando tengas un contenido medio de
informacin, llvatelo a la wiki (copiando y pegando) y dale formato
con las herramientas de edicin que traducen operaciones de formato
en cdigo wiki. Antes de guardar la pgina quiz sea mejor que me
avises, por el hecho de que se han podido producir colisiones de
edicin sobre dicho contenido.
Plantilla para un nuevo pas:

Capital: ''sustituir''
Language: ''sustituir''
EU member since ''ao''
== UNIVERSITIES ==
: ''busca un par de enlaces a universidades de este pais''
'''Interesting ERASMUS web support services'''

: ''insert here some info''
Plantilla para la ciudad:

'''1. Basic Information'''
----
'''2. Accomodation'''
----
'''3. Travel Information'''

----
'''4. Cultural & Social Life '''

----
'''5. Where to eat'''

----
'''6. Where to stay'''

----
'''7. Where to find a job'''

----
'''8. Where to learn XXX'''

----
[[Main_Page|Volver a principal]]

Guiones de prcticas
Sesin 6
Esta sesin pretende continuar con el uso de la Web 2.0. haciendo
uso de blogs. Est especialmente indicado para los alumnos Erasmus
de esta asignatura, que podrn dejar uno o varios post sobre su
estancia en granada en lo que se conoce como MOBIBLOG - The
European Weblog platform for Mobile Students.
Hypothesis: According to the main aim of the Bologna-Process
mobile studies within the European Union shall be enabled free of
organisational and administrative obstacles until 2010. By 2012 a
number of at least 3 million individual participants in student mobility
shall be reached. Besides necessity to reduce organisational barriers
the number of mobile students in reality will also depend on decisions
of individual students to study abroad, or not. These decisions are
strongly influenced by personal, motivational and self related
considerations of individuals.
The main aim of Mobiblog is to provide a new service for European
mobile students with following main objectives and activities:
(A) To provide a multi-institutional, web-based, bottom-up but
well-structured and multi-lingual service on European level for peer-
to-peer exchange of experiences of individual mobile students in a
weblog area containing all aspects of mobile studies like motivation,
social issues, communication and cultural issues apart from
organisational and administrative problems and how students
overcame these obstacles and barriers.
(B) To develop a structured and comprehensive online guide for
the target topic which will be connected in both directions by multiple
hyperlinks with the weblog area.
(C) To build up a network of universities in Europe to adopt the
service developed into their portfolio of services for mobile students,
to encourage them to use the Mobiblog service within their portfolio
of services for mobile students, to replace existing single-institutional
and paper-based services and to integrate Mobiblog to existing virtual
campuses.
Mobiblog represents a model for development of an innovative ICT-

based service replacing and overcoming existing local and paper-
based approaches. The high potential of the use of Web 2.0 based
systems in general, social software on the web, and weblogs in
special can be exploited only by creating good practices and

disseminate them among decision-makers and practitioners in the

field of Education and Training.
Exercise:
Go to http://mobi-blog.eu/ and write your personal experience about
mobility in Europe. Participation is encourage in mainly in two
sections:
Post about your organisational and administrative experience
when you decided to do this mobility. You could also include
some stories about your family / friends feelings about a year
away home.
Post about your first days experience in living, studying in
Granada.
You could also include a post about your original country
inviting Spanish (or European) students to do a mobility to your
country.
Sesin 7
Nos descargamos y descomprimimos los siguientes ficheros:
http://lsi.ugr.es/rosana/docencia/turismo/medio.zip
http://lsi.ugr.es/rosana/docencia/turismo/EditPlus.zip
Desde EditPlus abrimos la carpeta medio seleccionamos
(manteniendo la tecla CTRL) los ficheros: table.html y btable.html.
Tambin haremos un fichero nuevo con la plantilla de HTML que nos
da Editplus (File > new > HTML page).
1. En el fichero btable.html tenemos un ejemplo de tabla
empleando el modelo complejo. Tiene muchos comentarios
para que recordemos el significado de cada tabla. Como
ejercicio, convierte esta tabla al modelo simple, usando
nicamente las etiquetas <tr> y <td>. Adems, modifica el
<caption> para que se muestre centrado.
2. Observa la captura de tabla de la pgina siguiente. Has de
hacer la tabla correspondiente (empezando desde un fichero a
cero llamado por ejemplo miTabla.html), sabiendo que:
La etiqueta <table> nicamente indica el borde de la tabla
La propiedad de alineacin y color de fondo (lightgray) se ha
indicado mediante el uso de las etiquetas <colgroup> y
<col>, y los atributos span, bgcolor y align.

Guiones de prcticas
Si tienes dudas sobre cmo hacer uso de estas etiquetas y atributos

consulta el fichero table.html de la carpeta medio, que tiene un
ejemplo que puedes modificar a tu gusto para ver cmo influyen.
Ahora trabajaremos el fichero table.html y le aadiremos reglas de
estilo para las etiquetas table, tr, th (td) y caption. Las propiedades
que queremos cambiar son:
Poner un margen izquierdo de 4%, tipo de letra comic sans ms,
tamao del texto 80%, color de fondo celeste, ancho de borde
de 3,y color de borde azuln.
Poner las filas con la propiedad de subrayado y alineacin
centrada
Poner las celdas de cabecera a tamao de texto 10 puntos y
color azul.
Poner el <caption> centrado y sobre la tabla

Sesin 8
Desde EditPlus abrimos la carpeta medio seleccionamos
(manteniendo la tecla CTRL) los ficheros: ulist.html, olist.html,
links.html, internos.html, y map.html
Con el fichero ulist.html:

1. Modifica la lista de segundo nivel (la que usa de icono un
crculo) y convirtela en una lista numerada con romanos en
minsculas.
2. Cambia la lista ordenada de los hombre ms ricos del mundo
por una lista de definicin. El trmino es el nombre del
personaje y la definicin es un enlace externo a una bibliografa
suya (da igual en qu idioma). Tienes un ejemplo de lista de
definicin en este mismo fichero html.
Con el fichero olist.html:

1. Este fichero cuenta con 5 listas anidadas. Cambia las que
tengan numeracin alfabtica (A, B, C o a, b, c) por una lista
desordenada que emplee el icono de cuadrado.
2. Aade una regla de estilo para la etiqueta <OL> que modifique
la numeracin y ponga en su lugar un icono. Usa la propiedad:
list-style-image: url(<nombre de la imagen>);
Si quieres disponer de una imagen de ejemplo, descarga:
http://www.ci.pasadena.tx.us/police/images/blueball.gif
3. Opcionalmente puedes cambiar el tipo de numeracin y/o
vieta con la propiedad list-style-type: circle, por ejemplo.
Con el fichero map.html:

Vamos a introducir errores en el cdigo deliberadamente.
1. Cambia el ratio de aspecto de la imagen a 2:1 y comprueba que
no funcionan las reas.
2. Modifica el radio de los shapes tipo circle y usa la mitad del
valor actual.
3. Descarga una imagen sencilla y haz tu propio mapa de imagen.

Guiones de prcticas
Con el fichero internos.html:

1. Este fichero cuenta con un ejemplo de enlaces internos. Cambia
las posiciones de los anchors tipo name y comprueba lo que
pasa. Aade saltos de lnea al final del fichero y comprueba que
el movimiento de navegacin arriba/abajo mejora.
2. Modifica el fichero ulist.html y aade tres puntos de navegacin
mediante enlaces internos. Llmalos: top, middle y bottom.
Aade saltos de lnea al final del fichero y comprueba que el
movimiento de navegacin arriba/abajo mejora.
Con el fichero links.html:

1. Aade al final de este ejemplo, un enlace al enlace interno rich
del fichero internos.html.
2. Aade al final de este ejemplo, un enlace al enlace interno
middle del fichero ulist.html.

Sesin 9
Una vez hayas descargado y descomprimido Editplus, crea un nuevo
documento y gurdalo como formulario.html
Tu formulario debe quedar parecido (que no igual) a la imagen que se
muestra a continuacin. Date cuenta de que para que se vea igual
debes usar una tabla de 10 filas y 4 columnas y combinar celdas
como consideres apropiado.
Aade debajo los botones Registrar su empresa (submit) y Cancelar

todo (reset).

Guiones de prcticas
Sesin 10
En esta sesin vamos a trabajar con marcos. Todos los ficheros los
generaremos con EditPlus.
1. Crea un fichero llamado amigo1.html que tenga como ttulo el

nombre de un amig@ tuyo. Despus incluye una mini-tabla con
datos sobre este amig@ en particular (fecha de nacimiento,
color favorito, nombre en Facebook, actor favorito,... no se..
cualquier cosa que se te ocurra).
2. Crea un fichero llamado amigo2.html con datos de otro amig@.
3. Crea un fichero llamado amigo3.html con datos de otro amig@
4. Crea un fichero list.html que tenga una lista con tres enlaces a
los ficheros amigo1.html, amigo2.html amigo3.html. Estos
enlaces debers modificarlos mas adelante.
5. Crea el fichero fondo.html para que contenga una imagen a tu
gusto (descargada de Internet) como imagen de fondo.
6. Crea un fichero llamado info.html que contenga a la izquierda la
fecha de creacin y a la derecha un correo de contacto. Si
quieres que se vean en la misma lnea deberas crear una tabla
de una fila y tres columnas, con width 100% y que contenga los
datos en la celda primera y tercera.
7. Crea un fichero llamado marcos.html que contenga una divisin
en columnas: la primera el fichero list.html y el segundo una
divisin en filas. Estas filas sern: la primera fondo.html y la
segunda info.html. No olvides darle un nombre a los marcos.
8. Por ultimo los enlaces de la columna izquierda de tus amigos, al
pinchar, se debern ver donde estaba la imagen de fondo.
Modifica los en laces de list.hml para que usen el atributo target
con el valor del nombre del marco destino.

Guia de Redes

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Guia de Redes

Caricato da

Copyright:

Formati disponibili

Diseo y Creacin de

Editorial copicentro , Gr-676/2010

Caractersticas tcnicas .....................................................................................................................................10

Familia de protocolos TCP/IP .........................................................................................................................13

Arquitectura Cliente / Servidor ......................................................................................................................14

El Servicio WWW .................................................................................................................................................15

Servicios y guas de informacin al turista................................................................................... 17

Bsqueda de informacin y reservas ............................................................................................. 22

Tema II. Diseo de sitios Web tursticos...................................................................30

Pasos a realizar ....................................................................................................................................... 36

Caractersticas de un buen sitio web.............................................................................................. 42

Elementos de un sitio web ................................................................................................................. 48

Herramientas para la elaboracin de una Web.......................................................................... 52

Publicidad y promocin en Internet ............................................................................................... 55

Noticias en prensa escrita................................................................................................................................58

Anuncios en la red ..............................................................................................................................................58

Imagen de marca de Internet.........................................................................................................................59

Tema III. Tecnologas para la creacin e implantacin de sitios Web.............60

Estructura de un documento HTML.............................................................................................................66

Listas de numeracin .........................................................................................................................................84

Estilos con CSS......................................................................................................................................................98

Mapas de imagen............................................................................................................................................. 103

Formularios ......................................................................................................................................................... 104

Marcos .................................................................................................................................................................. 108

Enlaces avanzado ............................................................................................................................................. 110

Tecnologas y mtodos para dotar de interactividad y elementos multimedia a una

Tema IV. Comercio electrnico................................................................................... 116

Intercambio Electrnico de Datos (EDI) ......................................................................................121

Modalidades de pago en Internet.................................................................................................122

Seguridad en las transacciones electrnicas.............................................................................125

Cortafuegos ........................................................................................................................................................ 127

Seguridad en la transaccin......................................................................................................................... 129

Mtodos de encriptacin.............................................................................................................................. 130

Protocolos seguros.......................................................................................................................................... 133

Nuevas tecnologas para el comercio..........................................................................................136

Data Mining, Bots y Agentes Inteligentes .............................................................................................. 136

Tema V. Internet languages and the web 2.0 ............................................................ 138

Internet as a Growing Net ................................................................................................................139

Terminology ....................................................................................................................................................... 140

The Social Net. Communication goals..................................................................................................... 142

The human side of Internet.......................................................................................................................... 143

Accessibility considerations for people with disabilities................................................................... 143

The Web 2.0...........................................................................................................................................144

The use of the xhtml language to create web pages.............................................................147

Hypertext ............................................................................................................................................................. 147

Print vs. electronic medium .......................................................................................................................... 148

An introduction to XHTML............................................................................................................................ 149

XHTML Tags for an Easy-to-do Web........................................................................................................ 149

Description of individual course ....................................................................................................152

Tema VI. Apndices......................................................................................................... 158

Ejercicios de HTML bsico ............................................................................................................................ 158

Ejercicios de HTML avanzado ...................................................................................................................... 161

Programa de la asignatura ...............................................................................................................164

Programa de Prcticas.................................................................................................................................... 165

Bibliografa de la asignatura ........................................................................................................................ 165

Requisitos mnimos de la WEB practica ......................................................................................167

Transferencia segura mediante SSH.............................................................................................168

Tema VII. Guiones de prcticas.................................................................................... 172

Tema I. Internet y sus

Para explicar Internet se utilizan muchas metforas, como la que

Pg. 7 Rosana Montes

del Internet, y se ha llegado a decir, que si no est en google...

Diplomatura de Turismo Pg. 8

A continuacin vamos a centrarnos en las caractersticas tcnicas de