Diseño y creacion de paginas web aplicado al sector turistico

Diseño y Creación de Páginas Web

Aplicado al Sector Turístico

por

Rosana Montes

http://lsi.ugr.es/rosana

Material de teoría y prácticas de la asignatura

Informática de Gestión 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 turístico.............................................. 7

Internet es… ............................................................................................................................................... 7

Clasificación de las redes según el ámbito físico......................................................................................9

Características técnicas .....................................................................................................................................10

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

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

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

Servicios y guías de información al turista................................................................................... 17

Búsqueda de información y reservas ............................................................................................. 22

Internet desde el punto de vista de las agencias de viajes y empresas turísticas ........ 26

Características del Comercio Electrónico...................................................................................................27

Tema II. Diseño de sitios Web turísticos...................................................................30

Recomendaciones ................................................................................................................................. 30

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

Características de un buen sitio web.............................................................................................. 42

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

Herramientas para la elaboración de una Web.......................................................................... 52

Publicidad y promoción en Internet ............................................................................................... 55

Posicionamiento de nuestras páginas en buscadores..........................................................................57

Recomendaciones personales........................................................................................................................58

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

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

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

Tema III. Tecnologías para la creación e implantación de sitios Web.............60

El lenguaje HTML................................................................................................................................... 61

Guía de referencia ...............................................................................................................................................65

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

Terminología .........................................................................................................................................................68

Elementos básicos...............................................................................................................................................70

Estilos y formato..................................................................................................................................................73

Caracteres Especiales.........................................................................................................................................81

Listas de numeración .........................................................................................................................................84

Imágenes ................................................................................................................................................................85

Enlaces .....................................................................................................................................................................87

Tablas .......................................................................................................................................................................92

Meta-etiquetas .....................................................................................................................................................97

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

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

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

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

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

Tecnologías y métodos para dotar de interactividad y elementos multimedia a una

pagina Web............................................................................................................................................112

Lenguaje HTML y su evolución a XML..................................................................................................... 114

Tema IV. Comercio electrónico................................................................................... 116

Nuevas oportunidades de negocio...............................................................................................116

Intercambio Electrónico de Datos (EDI) ......................................................................................121

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

Seguridad en las transacciones electrónicas.............................................................................125

Seguridad en la web........................................................................................................................................ 125

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

Seguridad en la transacción......................................................................................................................... 129

Métodos de encriptación.............................................................................................................................. 130

Autentificación................................................................................................................................................... 131

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

Nuevas tecnologías para el comercio..........................................................................................136

XML y el comercio electrónico.................................................................................................................... 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. Apéndices......................................................................................................... 158

Relación de problemas de HTML...................................................................................................158

Ejercicios de HTML básico ............................................................................................................................ 158

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

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

Programa de Teoría......................................................................................................................................... 164

Programa de Prácticas.................................................................................................................................... 165

Bibliografía de la asignatura ........................................................................................................................ 165

Evaluación............................................................................................................................................................ 166

Requisitos mínimos de la WEB practica ......................................................................................167

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

Tema VII. Guiones de prácticas.................................................................................... 172

Sesión 1 ...................................................................................................................................................172

Sesión 2 ...................................................................................................................................................173

Sesión 3 ...................................................................................................................................................174

Sesión 4 ...................................................................................................................................................176

Sesión 5 ...................................................................................................................................................177

Sesión 6 ...................................................................................................................................................180

Sesión 7 ...................................................................................................................................................181

Sesión 8 ...................................................................................................................................................183

Sesión 9 ...................................................................................................................................................185

Sesión 10.................................................................................................................................................186


Pág. 7 Rosana Montes

Tema I. Internet y sus ventajas para el sector turístico

Internet es…

Para explicar Internet se utilizan muchas metáforas, 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 además 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

Internet y sus ventajas para el sector turístico

Diplomatura de Turismo Pág. 8

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 límites y ya no necesitamos sitios físicos de reunión. Las formulas se han modernizado y podemos compartir documentos, presentaciones (Slide Share), videos y hacer comentarios por ejemplo en audio (Voice Thread).

• Revistas temáticas y especializadas que nos llevan a casa la prensa del día. Muy habitual consultar los periódicos online antes de empezar la jornada laboral.

Podemos realizar también 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 imágenes de las ultimas noticias, oír la radio y ver nuestros programas de TV. Además no necesitamos nuestro ordenador para ello y podemos usar el móvil o el iPod mientras vamos en bus a la facultad.

4. Ver vídeos (You Tube) o escuchar música (Spotify)

5. Ver paisajes de cualquier parte del mundo

6. Disfrutar de mundos virtuales (Second Life)

7. Consultar cualquier clase de información. Ej. cartelera de cine

8. Realizar tramites administrativos (Junta de Andalucía, 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 enseñanzas (Campus Andaluz Virtual)

13. Protegernos de virus informáticos (análisis online)

14. Colaborar con las ONGs

15. Disponer de servicios gratuitos: mensajes a móviles, melodías, música, juegos,...

16. Disponer de un nuevo medio de publicidad y de marketing para la empresa.



A continuación vamos a centrarnos en las características técnicas de Internet, para conocer no tanto qué se puede hacer sino cómo se hace.

Clasificación de las redes según el ámbito físico

En función de la distancia que separa a los distintos elementos que forman parte de una red de ordenadores, se puede establecer la siguiente clasificación:

Red de área local o LAN (Local Area Network), que se caracteriza por cubrir un área geográfica reducida, encontrándose 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 pequeña.

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 típicas no suelen superar los 10 kilómetros. Un claro ejemplo de MAN sería la red de la Universidad de Granada, que une e interconecta facultades que se encuentran en varios puntos de la ciudad.



Red de área amplia o WAN (Wide Area Network), que es aquélla que se emplea para interconectar ordenadores separados por grandes distancias (superiores a 10 Km), extendiéndose incluso por varios países. Podemos hablar entonces de redes a nivel regional, de comunidad autónoma, nacional o internacional.

Características técnicas

Las redes metropolitanas y las de área amplia suelen estar constituidas a su vez por un conjunto de LANs interconectadas entre sí. El ejemplo más 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 organización.



Para facilitar la comunicación entre equipos es necesario identificar al emisor y al receptor. De hecho, cada uno de los ordenadores o nodos terminales de la red, a través de los cuales se conectan los usuarios a Internet, así como cada recurso hardware accesible, debe ser identificado de forma unívoca. Este identificativo se conoce como dirección IP y se suele escribir de la forma a.b.c.d, donde a, b, c y d son números entre 0 y 255, que son los valores que se pueden obtener con los 8 bits que ocupa cada número. 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 además las entidades regionales y locales, como RIPE (Réseaux IP Européens) en Europa. En función del número de máquinas conectadas, la organización deberá solicitar a la entidad reguladora correspondiente una clase para su red.

Los usuarios tienen la posibilidad de utilizar nombres, más fáciles de usar y recordar que las direcciones numéricas, para referirse a las máquinas, gracias al servicio de nombres de Internet, denominado DNS (Domain Name System), que es básicamente una base de datos distribuida de forma jerárquica por toda Internet. Así, por ejemplo, se podría asignar un nombre (con unas características determinadas) a la dirección 150.214.191.169 y utilizarlo en su lugar.



Los nombres deben permitir localizar de un modo rápido la ubicación del destino especificado, para ello se ideó un sistema jerárquico 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 máquina, ugr es el subdominio de la Universidad de Granada, y es indica el dominio principal de España.

El número de dominios y subdominios suele oscilar entre dos y tres, si bien no existe un número prefijado de subdominios que puedan aparecer en el nombre, aunque siempre tienen una estructura jerárquica, o sea, los de la izquierda están contenidos en los de la derecha.

Algunos de los dominios más 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 códigos de países, como por ejemplo: .es (España), .fr (Francia), .de (Alemania), etc.



Familia de protocolos TCP/IP

Un protocolo es un conjunto de reglas que regulan el intercambio de informa-ción entre elementos que cooperan en la transmisión de datos a distancia. Es muy similar al término protocolo cuando es empleado por un embajador en otro país. ¿Debo saludar con la mano, con un beso, dos, tres? Cuáles 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 comunicación entre sistemas, conocido como familia de protocolos TCP/IP. Bajo este nombre genérico se engloban más de 100 normas o protocolos abiertos (no dependientes de ninguna casa comercial) que se han convertido en el estándar de facto para la comunicación entre ordenadores. Cada uno de los protocolos se especializa en dar solución a algún aspecto específico de la compleja problemática que presenta la comunicación de datos entre equipos informáticos diversos, a través 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 Propósito

SMTP (Simple Mail Transfer Protocol)

Correo electrónico

TELNET Sesión remota

FTP (File Transfer Protocol) Transferencia de archivos

NNTP (Network News Transfer Protocol)

Distribución de grupos de debate (newsgroups)

GOPHER Navegación por directorios de texto

HTTP (HyperText Transfer Protocol)

Protocolo de transporte de ficheros hipertexto del WWW, incluyendo los documentos MIME (Multipurpose Internet Mail Extensions)

UDP (User Datagram Protocol)

Servicio de transporte de datos sin conexión (datagramas).

TCP (Transmission Control Protocol)

Servicio de transporte de datos con conexión.

IP (Internet working Protocol) Envío y recepción de paquetes.

SLIP (Serial Line Internet Protocol)

Transmisión de paquetes IP por una línea serie.

PPP (Point to Point Protocol) Transmisión de un protocolo por una línea serie.

Los dos protocolos más importantes son los que dan nombre a toda la familia: TCP (Transmision Control Protocol) e IP (Internet Protocol).

Arquitectura Cliente / Servidor

La filosofía de trabajo más extendida actualmente en informática y telecomunicaciones se conoce como modelo cliente/servidor y se basa en la petición de un servicio por parte de un programa cliente (instalado en el nodo cliente), de cuya realización se encarga el programa servidor (instalado en el nodo servidor), así como del envío 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 visualización de una terminada página 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 (vía correo electrónico, chat, videoconferencia, etc.) con otros usuarios, participar en foros de debate (newsgroup), ver las imágenes de las últimas noticias, oír la radio y ver la TV, consultar cualquier clase de información, etc.

El Servicio WWW

De todos los servicios, la Web, es el más 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 méritos propios en un mercado sin fronteras, sumamente atractivo y en el que cada día que pasa se nos ofrece un servicio añadido. Ya nadie se extraña si decimos que, sentados frente al teclado de nuestro ordenador, hemos reservado nuestros billetes o nuestro hotel para las próximas 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 información de todo tipo (textual, gráfica, sonora, etc.), distribuida entre millones de ordenadores y escrita en un determinado formato, que puede ser interpretado de forma adecuada por unos programas específicos, denominados



navegadores (en inglés, 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 además podemos añadir dos de los servicios más importantes que interesan al profesional del turismo:

• Información sobre proveedores de servicios turísticos, agencias de viajes, empresas, asociaciones de todo el mundo, etc.

• Comercio electrónico para realizar reservas on – line y poder realizar transacciones financieras de forma rápida y cómoda.

El concepto fundamental sobre el que se asienta la Web es el hipertexto, aunque es muy normal emplear otros términos, como: hipermedia, páginas HTML o simplemente páginas Web. El término hipertexto fue acuñado por primera vez por Ted Nelsol en 1965, y hacía referencia a la capacidad de disponer en un texto normal de determinadas zonas que, activándose, nos trasladarían a otro texto y así sucesivamente. El concepto de documento hipermedia está basado en el anterior, pero salvando la limitación de que el tipo de documento enlazado no tiene por qué ser textual. Así, podemos crear documentos multimedia (mezcla de textos, imágenes, sonidos, vídeos y/o animaciones) que tengan enlaces a otros documentos o elementos multimedia.

En realidad, las páginas 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 páginas Web solicitadas cuando recibe una petición desde otra máquina, por medio de un navegador (programa cliente Web), que se ejecuta en la máquina del usuario que quiere acceder al contenido de dichas páginas. En dicho envío, el servidor no sólo manda la página HTML, sino también todos aquellos elementos externos a la misma, pero que forman parte de ésta (sonidos, imágenes o iconos, por ejemplo), de modo que en la pantalla del usuario que ha realizado la petición se visualice esa página Web, tal y como fue diseñada por su creador.

El protocolo por medio del cual se efectúa la comunicación entre los clientes y el servidor se denomina HTTP (HyperText Transmission Protocol, o Protocolo de Transmisión Hipertexto), que ofrece no sólo los mecanismos necesarios para enviar la información entre máquinas, sino también servicios de encriptación (ocultación de datos importantes) y autentificación del cliente (identificación mediante nombre y contraseña).



Servicios y guías de información 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 más visitados son:

1. Mapquest.com 2. Travelocity.com

3. Expedia.com 4. Priceline.com 5. Excite.com

6. Lowestfare.com

7. Iflyswa.com 8. Mapsonus.com 9. AA.com 10. Mapblast.com

Si nos centramos en los sitios de viajes on line Español podemos mencionar además de los propios de cada agencia de viaje (www.alconviajes.es) algunos como: www.edreams.es, www.viajarahora.com, www.excite.es (sin especificar ningún puesto o ranking).

Además de estas páginas especializadas en localizar y mostrar ofertas para nuestros viajes, podemos hablar de sitios webs dedicados a proporcionar información sobre destinos turísticos. A este respecto, las guías de viaje tiene su ámbito en Internet. Algunos ejemplos son mostrados en la siguiente transparencia.



Cuando viajamos queremos sacar el máximo partido a nuestra visita. El tiempo disponible es limitado y es imprescindible disponer de una guía que nos aconseje y que nos permita hacer una selección. Hay guías de muchas clases. Atendiendo al ámbito geográfico que abarcan existen:

- guías internacionales.

- nacionales, que se centran solo en el país.

- regionales o inter-regionales que cubren una o varias comunidades autónomas.

- guías locales centradas en una ciudad.

- guías personales, escritas por gente preocupada por difundir el patrimonio turístico de su ciudad.

Atendiendo a su contenido y organización, el abanico de posibilidades es muy amplio. Las hay que simplemente contienen información de tipo geográfico o de población, pero también las hay que se centran en detalles sobre la historia, el patrimonio cultural e incluso la meteorología.

Las hay genéricas que abarcan todo tipo de información, 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 guías de lo más completas.

Respecto al turismo en sí, sabemos que es un fenómeno variable, ya que la demanda modifica sus gustos y preferencias. En los últimos años 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 más cortos, en lugar de un gran viaje en el periodo vacacional. Esto origina un mayor flujo de viajes que son de menor duración pero que se reparten en el calendario anual.

- También se ha demostrado una tendencia a destinos lejanos o países exóticos.



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 inclusión 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 pequeña sea tu empresa: cualquier cosa puede pasar, la idea más simple puede convertirse en un éxito, o la campaña más costosa puede simplemente no encontrar su público destino.

La competencia es aún más 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 distribución.



De hecho en USA se ha dado el caso de una unión de fuerzas: las cuatro compañías de aerolíneas más importantes se han unido para formar un portal común.

Otras estrategias que se utilizan es la inclusión 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 quería en mi portal lo busque en el tuyo y viceversa.

A continuación mostramos algunos ejemplos de servicios especiales con los que una web de compañía 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 idónea para viajar y te proporciona ofertas para diferentes destinos.

• Flight Price Matcher: permite especificar un precio máximo 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 más 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 asociación de ambos posibilita reservar pasajes aéreos, alquiler de automóviles y noches de hotel a través de Internet. Al ingresar dispondrá de más de 400 compañías aéreas, 40.000 hoteles, 50 empresas de alquiler de automóviles alrededor del mundo. El usuario deberá registrarse una única vez en el sitio y la información de su tarjeta de crédito será utilizada únicamente en el momento que de confirmación para se se emita la reserva realizada y no antes.

Búsqueda de información y reservas

Los buscadores son sitios Web que nos ayudan a encontrar en Internet información de nuestro interés. Su uso es gratuito, ya que el patrocinio de los mismos proviene de la publicidad que incluyen en sus páginas.



Ofrecen dos tipos de búsquedas:

• Por palabras clave: en un recuadro de texto se escriben palabras o frases significativas para localizar la información buscada. Entonces, el buscador contrasta los datos introducidos con la información que tiene en su base de datos acerca de las páginas 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 búsqueda se puede realizar, por ejemplo, en Google.

• Por categorías: todas las páginas del buscador están ordenadas por temas o categorías, haciéndolas pertenecer a un mismo anillo temático o webring. Así, cada página del listado tiene al menos un enlace a la página siguiente y otro a la página anterior del anillo. Es el caso, por ejemplo, de Yahoo, que está organizado jerárquicamente por materias, desde los temas más generales hasta los más específicos.

También podemos encontrar distintos tipos de buscadores. Se pueden clasificar en: generales, si incluyen en la búsqueda direcciones Web de todo el mundo, y temáticos si se dedican a la localización de todos los recursos posibles sobre un mismo tema. Ejemplo de este último tipo es el portal turístico de España (http://www.tourspain.com), que recoge información sobre agencias de viajes, alojamientos (hoteles, apartamentos, turismo rural, camping, etc.), guías turísticas, ocio,



restaurantes, revistas y publicaciones, rutas turísticas, transportes, turismo activo y turismo cultural. Es un buscador especializado, que está en inglés, o sea, totalmente orientado al público destino de dicha información. Otros ejemplos de buscadores temáticos 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 fotografías (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 método propio de búsqueda, que suele ir en los apartados de “Sugerencias”, “Ayuda” o “Búsqueda Avanzada”. Es necesario conocer un pequeño lenguaje que permite personalizar la búsqueda para que la lista de enlaces con los resultados sea la más efectiva. Para ello, se suelen utilizar una serie de operadores básicos:

And / Y: para seleccionar las páginas 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á sólo cuando ambas cosas se cumplan.

Or / O: selecciona las páginas 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á fácilmente si sale el sol, independientemente de lo que tenga que estudiar.

Comillas (“”): para mostrar las páginas que contengan la frase exacta que se encierra entre ellas. Este tipo de búsqueda es bastante restrictiva, por lo que el número de resultados se reduce considerablemente.

+: delante de una palabra, obliga a que esa palabra esté incluida en las páginas encontradas. Equivale al operador And.

-: delante de una palabra, elimina las páginas que contengan dicha palabra. Equivale a exceptuando.

*: para localizar páginas con palabras con la misma raíz que acompaña a este operador. Es como el comodín de un juego de cartas, ya que el asterisco sustituye a cualquier conjunto de caracteres.

Los distintos operadores se pueden combinar en una misma expresión. Por ejemplo:



"ofertas de trabajo" + adminis* -temporal

Con esta búsqueda queremos encontrar ofertas de trabajo que no sean temporales y que estén relacionadas con administración en general.

El orden de los enlaces listados en el resultado de la búsqueda dependerá de cada buscador, así como de como estén construidas las páginas HTML en el sitio Web. Por ello es importante prestar atención a que las palabras clave formen parte de los títulos, el orden alfabético, las etiquetas de código HTML (llamadas metaetiquetas, como las que permiten adjuntar palabras claves o una descripción del contenido de la página) y el número de veces que aparezcan nuestras palabras en el texto de la página Web. Por lo general, el número de resultados devueltos supera el millar, y eso es algo que suele abrumar al navegante, que se conformará con visitar los primeros resultados.

La evolución 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 páginas personales

• descarga de software (shareware y freeware)

• el tiempo

• noticias

• horóscopos, juegos, cines, deportes y todo lo relacionado con el ocio

• envío gratuito de mensajes a móviles

• envío gratuito de fax

• agencias de viajes on-line

Algunos además 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 electrónicas (e-cards) de felicitación



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

• música, vídeos, 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 turísticas

Cualquier medio de comunicación puede servir de escaparate para la compra venta de mercancías, como ocurre con la prensa, la radio y la televisión. La masificación de estos medios hace que las posibilidades y la variedad de productos sean mucho mayores. Internet proporciona unas características envidiables como medio de realizar transacciones o publicidad, dada su interactividad y flexibilidad.

En la actualidad, cuando hablamos de comercialización en Internet se entiende todo aquello que puede ser fuente de ingresos y de actividad económica directa. Dejamos fuera los servicios externos o indirectos como pueden ser las empresas de telecomunicaciones, que dada la competitividad, están al fin y al cabo, beneficiando a los usuarios.

Atendiendo al tipo de actividad podemos hacer una clasificación del comercio directo:

1. Servicios de información de pago. Generalmente se ofrece información y demostración gratuita sobre el servicio por medio de una pagina Web. Después 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 catálogos 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 televisión, la masa de usuarios que visitan las páginas 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 médicos, psicológicos o de parapsicología.



Ventajas:

� El usuario puede comparar precios y cotejar los productos sin moverse del sillón. Incluso puede utilizar agentes o asistentes automáticos para encontrar las ofertas o el producto deseado. También permite una automatización de la lista de la compra de aquellos productos que adquirimos periódicamente. Todo esto supone un considerable ahorro de tiempo para el consumidor.

� Localización de compradores y vendedores más atractiva: se pueden comprar productos desde sus propios países 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 vergüenza), además 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 reducción de costes de comercialización, de marketing, de distribución; tampoco hay necesidad de intermediarios ni dependientes y por ultimo, existe un mercado potencial de muchos millones de compradores.

� Los mecanismos de pago están ya desarrollados y son mucho mas cómodos, seguros y sencillos que los actuales por tarjeta de crédito o contra reembolso.

Características del Comercio Electrónico

Seguir la actualidad del comercio electrónico es muy difícil, tanto por los movimientos empresariales como por las novedades tecnológicas. 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 jóvenes que todavía 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 electrónico? ¿De verdad vamos a poder pedir una pizza de anchoas a través de Internet a las once de la noche? ¿Podemos hacernos multimillonarios aunque hayamos suspendiendo todas las asignaturas de Mercantil desde hace 6 años? ¿Una página 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 facturación de la tienda que hemos abierto en un pueblo de la meseta castellana?



Cuando hemos preguntado o buscado en un texto referencias a cuál podría ser la característica más importante del comercio electrónico, las opiniones se dividían principalmente en dos alternativas:

a) por un lado, favorece al usuario porque le permite buscar y elegir entre una oferta más amplia;

b) por otro, favorece al comerciante porque pone a su alcance un mercado potencial de millones de clientes.

Para nosotros, sin embargo, la característica más 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 más adelante. Pensemos en un negocio relativamente sencillo, una librería. Tradicionalmente, quien quisiera montar una tienda de este tipo abierta al público tendría que hacer frente a una serie de gastos considerables antes de abrir las puertas: constitución de la empresa, alquiler del local, reforma, mobiliario, almacén, sueldos de personal y una considerable cantidad de impuestos directos e indirectos. No todo el mundo tiene los 10 milloncetes que puede suponer, como mínimo, hacer todo esto, lo que frenaba a un gran número de iniciativas empresariales.

En Internet, sin embargo, desaparecen muchos gastos. El alquiler del local se sustituye por el del hospedaje en un servidor, mucho más barato. Todos los gastos de reforma y mobiliario se reducen al diseño del sitio, que puede ser más o menos caro en función de las ambiciones estéticas que tengamos. Casi no hace falta personal, pues el mantenimiento se puede subcontratar en la empresa de hospedaje y la atención al cliente se realiza desde la página Web. Por último, aunque no menos importante, los impuestos que pagaremos son mucho menores. De esta forma, personas que antes no podían ni soñar con abrir un negocio ahora tienen la oportunidad de iniciarlo por una inversión mucho menor. Internet constituye un escaparate más engañoso que la vida real.

No podemos calibrar la solidez de una empresa por su sitio Web, ya que tanto la gran cadena de librerías como el autónomo que da sus primeros pasos tienen el mismo aspecto si contratan el diseño de su sitio en la misma empresa.

Un ejemplo claro de lo que decimos, que desde nuestro punto de vista reafirma la valoración hecha, es el fenómeno de los valores tecnológicos en Bolsa. En los últimos meses hemos visto cómo han salido a cotización algunas empresas que han subido como la espuma en poco tiempo... para caer con la misma velocidad de forma impredecible.



Tradicionalmente, la valoración que hacen los inversores para decidir si un valor es o no atractivo se basa en un estudio de sus bienes, sus resultados económicos, la trayectoria de la empresa, el tamaño de la plantilla y cosas así. Con los valores tecnológicos ocurre lo contrario. Terra o cualquiera de estas empresas «.com» no se valoran por el número de oficinas abiertas sino por las expectativas de facturación realizadas sobre un hipotético tráfico e impacto mediático; cuantos más visitantes, más atractiva es la empresa. No hay nada físico en lo que se apoye la cotización de estos valores y son presa fácil de la especulación más draconiana.

Cualquiera puede crear un portal con una mínima inversión y salir a Bolsa en poco tiempo multiplicando hasta el límite la valoración de las acciones. ¿Hace falta citar ejemplos? Basta con hojear los periódicos.

Diseño de Sitios Web Turísticos


Tema II. Diseño de sitios Web turísticos

Recomendaciones

Una de las cosas que nos planteamos a la hora de diseñar un sitio web, es qué información vamos a mostrar y cómo vamos a mostrarla. Evidentemente si no vamos a ofrecer información, poco vamos a ofrecer. Pues bien, cuando tengamos recopilada la información a publicar deberemos organizarla, para que no se muestren páginas demasiado pesadas, largas de leer o abrumadoras. Lo mejor es cortar y separar el contenido para que se muestre en páginas diferentes. De esta forma el usuario también decide si quiere leer más o si tiene suficiente con el texto ofrecido.

Necesitaremos proporcionar una imagen homogénea, identificativa de nuestro sitio, para ayudar al navegante a distinguir entre una página de mi web y otra página 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 páginas, hará que el usuario reconozca donde está, y si le gustan los contenidos, desee repetir.

Es importante ser conscientes del tamaño o espacio de pantalla que el usuario posee, para tratar de no llenarla. Muchos colores, texto e información en un espacio pequeño 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 información.

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 estés en una página específica de tu web con esa información, entonces procura emplear estilos y formato de texto para evitar la monotonía. Cualquier cosa vale: cambiar el tamaño, el color, la identación, usar bordes de color, incluir alguna imagen, etc.

Sin embargo no debemos irnos al otro extremo: el del abuso de colores, textos de diferentes tamaños o colores muy chillones. Ilustra este ejemplo la web de Ryanair, que además cumple que cubre prácticamente en su totalidad el espacio de pantalla del usuario.



De siempre se ha dicho que una imagen vale más 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 intercomunicación con distintas personas independientemente de su localización física.



Las siguientes recomendaciones son igualmente importantes. El hecho de mantener un estilo homogéneo y consistente a lo largo del conjunto de páginas, concuerda con la anterior recomendación 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 además un enlace a la página de inicio, lo que ayuda así mismo a la movilidad (o facilidad de navegación) de nuestra web.

Hay que intentar conseguir:

• Enlazar a la página de presentación e incluso a otras páginas que sean importantes, por ejemplo contenedores generales de información.

• Un mapa de la Web es útil. Permite tener una idea general de todo el contenido del sitio visitado, además de ser un acceso directo a cada página. Es igual al índice de contenidos de un libro. Si no piensas leerlo entero, el índice te permite saber la página por la cual debes abrir el libro para leer la parte que te interesa.

• Permitir re-localizar al usuario en caso de pérdida en la web. Esto implica mostrar la información de donde está actualmente para que decida su próximo movimiento, tal y como aparece en el siguiente ejemplo.



Igualmente si todo funciona bien (los enlaces), existen buenos contenidos y todos ellos están actualizados conseguiremos más puntos para nuestra imagen global de web. Es por ello que las páginas en obras dan muy mala impresión y debemos evitarlas. Si no tenemos un contenido, ¿para qué lo enlazamos? ¿Para qué molestamos al usuario que tiene que pinchar, descargar otra página y finalmente volver hacia atrás porque no hay nada? ¡Para que vea la imagen tan graciosa del obrero picando piedra! No, es mejor enlazar a una página únicamente cuando ésta esté terminada.

Para dar la información sobre cómo de actualizada es nuestra web (para lo bueno o para lo malo) debemos incluir como datos generales en la página principal la fecha de última modificación. Otra información adicional podría ser la resolución recomendada (más adelante trataremos el tema de la resolución).

En general siempre es bueno pedir una segunda opinión a terceras personas, con el fin de recibir comentarios adicionales, antes de proceder a publicar las páginas. Que usen todos los enlaces porque pueden detectar fallos que se nos había pasado inadvertidos.



Pasos a realizar

Lo que queremos saber ahora es cómo empezar desde cero nuestra web. Y todo esto sin saber aún nada de creación de páginas utilizando el lenguaje HTML. Se trata de tener una idea y explotarla. Conseguir la información 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 diseñar, más adelante vendrá la acción, el hacerlo desde cero en nuestro ordenador.

El esquema o diseño de la web vendrá a ser la representación gráfica aproximada de lo que deseamos ver finalmente en pantalla. Es posible que lo que tengamos en mente sea posible de hacer, pero tecnológicamente 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 número de tecnologías de programación para la web. En este libro, se presentarán algunas básicas pero el material detallado se escapa del ámbito y del nivel del lector, quedando encuadrado en la Ingenierías Técnicas / Ingeniería Superior de Informática, no en la Diplomatura de Turismo.



Esquema a papel es un dibujo que representa el aspecto de la página principal de nuestra web. Una vez que tenemos la idea de lo que queremos hacer nos podemos plantear la estructura, enlaces o pestañas que queremos tener. Dónde colocaremos la información de contacto, el título, la imagen principal etc. En caso de que queramos una presentación anterior a ésta (una especie de splash windows típica de algunos programas y espacios web), diseñaremos la segunda página, la que accedemos después del texto de bienvenida.

Hacerlo a papel es lo idóneo, aunque en Internet podemos encontrar herramientas que nos ayuden a esta tarea, haciendo un dibujo bastante profesional, ya que nos proporciona la mayoría de widgets que disponen las interfaces gráficas de usuario tanto para aplicaciones desktop como aplicaciones para dispositivos móviles.

La siguiente imagen muestra un diseño o sketch candidato para la página web del proyecto WISHES (www.wishes.eu). Se ha realizado con la aplicación Balsamiq Mockups (www.balsamiq.com) por lo que el ejemplo se denomina también mockup de wishes.



Lo siguiente a realizar es el gráfico que represente la estructura de nuestra web, intentando representar el número de páginas totales de nuestra web y la interconexión de éstas mediante enlaces. Por supuesto que estos diagramas no son concluyentes, ya que podremos ir variando y adaptando el esquema y diseño de nuestra web conforme nos surjan ideas o localicemos más contenido para publicar. La siguiente imagen muestra un ejemplo de estructura web, estructuras que suelen ser jerárquicas teniendo como nodo raíz (nodo del que descienden todos los demás) la página inicio de nuestra web.

Y finalmente obtenemos y recopilamos el contenido, es decir, las imágenes y del texto que queramos publicar. Varias cosas al respecto:

1. Es importante adecuar la información a su publicación en Internet. Puede ser que yo quiera utilizar una foto de mi cámara digital, pero no puedo colocarla tal cual. Debemos conocer el formato correcto de los archivos en internet, para permitir el mayor número 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 mío. 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 extensión del fichero, o un campo Tipo en nuestro explorador de archivos. La siguiente tabla muestra una lista de los formatos más interesantes.

Extensión Comentario

.au Fichero de sonido (UNIX).

.avi Archivo de Vídeo (Microsoft).

.bmp Archivo Gráfico de Windows (bitmap).

.class Fichero binario que contiene código compilado en JAVA

.doc Documento binario con formato propietario de Microsoft (Word).

.eps Archivo PostScript Encapsulado (Encapsulated PostScript).

.gif Archivo Gráfico 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 código fuente en JAVA

.jar Archivo ejecutable Java

.html Fichero hipertexto en html.

.jpg Archivo gráfico comprimido bajo la norma JPEG.

.mid / .midi Archivo MIDI (sonido sintetizado).

.mov Archivo de vídeo (en formato QuickTime).

.mpg Archivo de vídeo 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 Gráfico.

.tgz Fichero empaquetado con tar y comprimido con gzip (UNIX).

.txt Archivo de Texto.

.tif / .tiff Archivo Gráfico 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 gráficos 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 tamaño no es óptimo y suele superar el MB (megabyte). Además es un formato RAW y no permite capas, transparencias o animaciones.

• JPG: formato comprimido con pérdidas que representa más de 16 millones de colores.



• GIF: formato simple de gráficos con 256 colores máximo y posibilidad de almacenar animaciones y transparencias.

• PNG: formato originalmente creado para internet. Soporta capas, compresión sin pérdidas 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, imágenes, índices, etc.) lo mejor es usar el formato de documento portátil PDF, ya que no es editable y puede ser protegido de lectura y/o impresión mediante contraseña.

Sin embargo la mayoría de publicaciones electrónicas se leen desde la misma web en lugar de descargar el recurso como un fichero. En la siguiente tabla tenemos algunas de las publicaciones electrónicas más conocidas a nivel nacional.

Periódico o Revista URL

ABC http://www.abc.es/

AVUI http://avui.datalab.es/

Canarias7 http://www.step.es/canarias7/

El Comercio de Gijón 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 País http://www.elpais.es/

El Periódico http://www.elperiodico.es/

España hoy http://www.ucm.es/OTROS/Periodico/

Gaceta de los Negocios http://negocios.ms.wwa.com/gn/titulo.htm

Intereconomía 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 Mundo

http://www.offcampus.es/elmundo.campus

Suplemento Dominical El Mundo

http://www.larevista.el-mundo.es/

Características de un buen sitio web

Internet no da segundas oportunidades y hay que captar enseguida la atención del visitante con un diseño original. Lo malo es que a veces hay poco contenido detrás.

Si un navegante llega a cierta página que siempre «está en obras», es difícil de recorrer o no renueva su contenido con suficiente regularidad, éste pierde su interés y no vuelve a dirigirse a ella. Los sitios de comercio electrónico, aunque es una norma que se puede aplicar a cualquiera, deben ser muy atractivos y fáciles de utilizar y dar una respuesta rápida. El peligro es pasar al otro extremo, diseñar una página 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 páginas llenas de gráficos, animaciones, applets y chuladas, pero en las que casi no hay contenido.

El segundo aspecto, la personalización, es la clave de la fidelización, puesto que cuanta más información 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. Según su análisis de ventas, está claro que un lector europeo que haya adquirido El Señor 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 información al lector, volviendo a utilizar la que de una u otra forma le han proporcionado otros lectores. Lo explicaremos con más detalle. Pongamos por ejemplo un lector de ciencia-ficción y fantasía. Ha comprado todas las obras de Tolkien, pero no sabía que existía Douglas Adams hasta que un compañero de laboratorio le dejó una copia de la Guía del



Autostopista Galáctico (un libro, por otro lado, recomendable para todos los amantes del género). Si hubiese comprado todas estas obras en Amazon, el sistema habría añadido este dato a su muestra estadística y, llegado a un umbral, elaboraría un modelo de «lector de ciencia-ficción» que aplicaría a todo aquél que mostrase interés 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 deberíamos incluir en nuestro sitio web como información a mostrar (no solo de texto vive una web). Considerarlo igualmente como buenas prácticas de diseño.

Por ejemplo en la selección de los colores y fondos de nuestra página tenemos que considerar nuestro público destino. No es lo mismo la página web de la policía 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 página web que claramente está destinada a un público infantil. No solo estamos observando colores, también imágenes que en una disposición final da la sensación de ser un dibujo de un cuento y hace que esta página sea más alegre que otras.

Sin embargo la siguiente web es mas técnica 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 números de tarjetas como sistema de pago (podría ser contra reembolso y no sería tan peliagudo). En este



sentido es mejor no almacenar la información en nuestro propio servidor (podríamos sufrir un ataque informático por un hacker espabilado) y dejar que el cibercash (monederos digitales) cumplan su objetivo.

También 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:

• quiénes somos (perfil de la empresa) y dónde estamos (dirección postal a ser posible).

• staff o información sobre los empleados

• publicación de la política de la empresa por ejemplo en cuanto a privacidad, garantías, servicios, costes de envío y restricciones

• igualmente la política en cuanto a cancelaciones de reserva, debe ser lo más clara posible.

• sistema de ayuda en la Web

• política de precios adecuada

Mejorar la navegabilidad implica sencillez de uso de nuestra web. Si es fácil y rápido localizar la información 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 información 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 información de forma independiente al resto. Esto permite que yo actualice únicamente una parte de la página 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 alfabético o bien por temas y de esta forma el usuario encontrará la temática que busca. En ocasiones si buscamos algo muy concreto el mapa no nos servirá, pero sí lo hará alguna herramienta de búsqueda por término (o palabras) al estilo de un buscador, pero cuya búsqueda 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 páginas en obras (son un callejón sin salida ya que son enlaces que no van a ninguna parte) y hay que permitir siempre volver a la página principal (usualmente pinchando en nuestro logo), para ofrecer una rápida salida de esa página a otras áreas.

A continuación se menciona los descripciones para los iconos, pero ¿por qué y para qué?. Bueno, hemos dicho que una imagen vale más que mil palabras y hemos decidido sustituir un menú con enlaces de texto por iconos como estos:

¿Realmente el usuario sabe a qué página 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 solución es hacer siempre uso en nuestro código web de la etiqueta ALT (que ya explicaremos más adelante).



La humanización del sitio Web es necesaria para evitar la sensación 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 fácil navegar y cuando encuentra los contenidos con facilidad. Además, es necesario incluir de forma muy clara y accesible desde cualquier página 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 página que intuimos se puede preguntar el usuario. Debe emplear un tono desenfadado y un lenguaje sencillo

La personalización de las páginas 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 configuración 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 páginas para poner cualquier tipo de informaciones. Deberíamos considerar las siguientes cosas:

1. ¿Voy a poner una sola página o todo un árbol de directorios?

2. ¿Qué me interesa más, páginas vistosas o mayor velocidad de acceso a la información?

3. ¿Voy a necesitar scripts?, ¿y formularios?

4. ¿Quiero que mis páginas estén asociadas siempre al mismo servidor o quiero la máxima portabilidad?

5. ¿Me interesa que las páginas se puedan usar sin servidor?

6. ¿Quiero que la información 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 entendéis) como tampoco lo son las respectivas. Sin embargo, en función de éstas la estrategia de diseño será una u otra. Por ejemplo podemos plantearnos pagar por algún servicio ofrecido por una empresa diseño web. Pero podemos estudiar los elementos que deben formar parte de un sitio Web turístico, tanto de un proveedor de servicio, como de un intermediario o una agencia de viajes.

El punto 1 y uno de los más importante sería disponer de información interesante y actualizada. La clave es ofrecer un valor añadido, algo que no puedan encontrar en otra parte. La información debe ser actualizada de forma constante. Distingamos si somos o no proveedores de servicios.

a) Proveedor de servicios turísticos

La página principal debe poseer los elementos esenciales que le describan de una forma rápida. En caso de Web de un alojamiento, actividad turística, etc, deberá tener:

- descripción del servicio principal

- servicios de restauración y complementarios que se ofrecen

- mapa de cómo llegar al establecimiento

- información sobre la comarca

- si ofrece reservas on line o bajo petición

b) Agencia de viajes – central de reservas



Deberá explicar qué tipo de servicios ofrece y bajo qué condiciones. Si incluye un catálogo de productos, deberá contener una descripción para cada uno de ellos, así como de los paquetes turísticos.

c) Común a los dos

Cambio de moneda, información sobre el tiempo, sobre las carreteras, sobre la comarca en la que se encuentra el servicio (alojamiento o actividad), sobre temas culturales, naturaleza, gastronomía, actividades, etc.

2. Catálogo de productos atractivo e interesante

Una de las ventajas que presentan los catálogos de Internet frente a los catálogos impresos es que se pueden actualizar cuando se estime oportuno, y además, se puede incluir mucha más información a unos costes mucho más económicos.

3. Fotografías

Se utilizarán 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. Imágenes panorámicas

Son imágenes de 360° que permiten al cliente moverse con el ratón 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. Vídeos

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 común que ya viene con la práctica totalidad de los navegadores.

7. Webcams

Las webcams ofrecen información en imágenes en tiempo real. Este sistema es muy atractivo, económico y además, el cliente no necesita ningún plug-in para ver en el momento lo bonita que está la playa.



8. Idiomas del sitio Web

Es imprescindible que además de estar en español, esté traducido al idioma del que provengan la mayoría de nuestros clientes, ya sean alemanes, holandeses o japoneses. Los clientes de dicho país lo entenderán como una cortesía y es probable que lo comenten a amigos y familiares.

En Internet ya se han creado empresas que proporcionan servicios de traducción on line. Lo que hacen estas, es que cuando un cliente solicita nuestra Web en un idioma, la empresa de traducción va cogiendo las páginas 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 diseñados

Los formularios re utilizarán para que el cliente nos haga una consulta, para una petición 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 serán función de cómo estén creadas las bases de datos de las que obtienen la información. En su diseño deberán participar los departamentos de reservas y de atención al cliente.

10. Reservas on line

Para un proveedor de servicios turísticos 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 telefónicas 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, ofreciéndoles sus servicios personales.

Herramientas para la elaboración de una Web

El elemento básico 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 clásico 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 versión normal o Express), HotDog Pro, HTML Assistant o el propio Microsoft Word, por citar tan sólo 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 cuestión requerido es el EditPlus y se encuentra para descargar en mi página 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 diseño gráfico, con los que generar imágenes, fondos, etc., mediante los que podremos dotar nuestras propias páginas de contenidos gráficos. 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 versión no tiene nada que envidiar a programas teóricamente más potentes pero mucho más caros como Photoshop; o Lview Pro, una excelente aplicación shareware idónea para la creación de fondos en formato GIF.

Además de estos dos tipos básicos de aplicaciones, existen elementos adicionales (y opcionales), como pueden ser manuales de referencia del lenguaje (en formato electrónico 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

• Jelane’s 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. También mencionaremos, aunque sólo sea brevemente, cómo hacer uso de alguna herramienta de FTP, mediante la cual podremos proceder a la publicación de las páginas que seamos capaces de desarrollar.

A día de hoy, el programa líder en el mercado de creación de sitios web es, sin dudarlo un solo instante, Dreamweaver. Dicho programa, aúna una serie de características que le han permitido, desde el mismo momento de su lanzamiento al mercado, ser clasificado en un status superior al de los clásicos editores HTML.

A semejanza de otras aplicaciones del mismo estilo, como Cyberstudio o Netfusion, Dreamweaver es una herramienta de creación de sitios web (nótese que evitamos intencionadamente los términos «editor de código HTML») en la que se ha puesto especial interés en aunar las peculiares características 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 más afamados diseñadores de páginas web, tanto nacionales como extranjeros. Una de las claves de dicha popularidad radica en la tecnología denominada Round Trip HTML, mediante la cual Macromedia Dreamwaver hace posible el trabajo simultáneo en la ventana de código 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, pecaríamos de simplistas si afirmásemos que toda la potencia del producto reside en dicha tecnología. Como antes apuntábamos, Dreamweaver es mucho más que eso y, entre otras posibilidades, permite detalles tales como la perfecta integración con características multimedia y de programación de scripts.



Otra de las aplicaciones que gozan de gran popularidad es Flash, una herramienta dotada de avanzadas funciones que permiten crear espectaculares contenidos dinámicos y multimedia orientados a la Web, y sin necesidad de aprender ningún lenguaje de programación repleto de extraños 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 página dotada de ese tipo de tecnología. Los eventos y sentencias se denominan acciones y permiten ser asociados, por ejemplo, a cuadros de diálogo, menús desplegables o clips de película.

Todo esto ha permitido que Flash se haya convertido en un estándar de facto en el mercado, y la mejor prueba de ello lo constituye la excelente difusión de que goza una pequeña «herramienta» como es el player o reproductor de Flash, instalado a día de hoy en millones de navegadores de todo el mundo.

Publicidad y promoción 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 más importante: promocionar nuestro sitio Web. De entre los 2.200 millones de sitios webs públicos de Internet, hemos de conseguir destacar entre todos ellos. Para ello hemos de conocer cómo funciona Internet, aunque ello nos obligue a estar muy atentos, ya que en Internet todo cambia muy deprisa.

Lo medios más utilizados por los clientes de reservas on line son:

• motores de búsqueda: 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%

Además podemos utilizar los siguientes medios de promoción mas específicos para Internet.





Posicionamiento de nuestras páginas en buscadores

Para darse de alta, solo hay que escoger el enlace dentro del buscador que ponga algo de “añadir Web”. Luego tan solo tenemos que rellenar los campos que nos indiquen, que suele ser las palabras clave, descripción y URL de la página, además de la dirección de correo de contacto.

En las políticas del buscador también vendrá descrito el tiempo que suelen tardar en dar de alta, aunque lo normal es que luego manden un correo electrónico para confirmar la inclusión.

A este respecto es importante escoger correctamente la cabecera de las páginas Web (uso de etiquetas META name=””).

Hay trucos para conseguir posicionar nuestra página en la cabecera de una consulta.

1. utilizar algunas de las palabras clave en el título de la página

2. escoger la categoría y sección adecuadas a la hora de dar de alta la página

3. elegir adecuadamente las palabras clave, poniéndolas tanto en español como en los idiomas de nuestros clientes potenciales

4. incluir palabras en singular y en plural, con y sin acento, empezando con mayúscula, con minúscula y todo en mayúsculas

5. utilizar meta etiquetas

6. si hay diferentes secciones en el sitio Web, es conveniente dar de alta cada página por separado en el buscador.

7. nunca se debe enviar la página a los buscadores mientras no estén terminadas

8. comprobar regularmente en qué posición se encuentra nuestra página por si hubiera que hacer alguna modificación en el diseño para subir posiciones.

Darse de alta en todos los buscadores es prácticamente imposible, asi que habremos de elegir:

• los más utilizados por todo el mundo, tipo yahoo, altavista, lycos, ...

• los buscadores temáticos de turismo y viajes

• los buscadores regionales que más se utilicen en el país de donde provengan la mayoría de nuestros clientes potenciales.



Recomendaciones personales

Los sistemas más usuales a parte del “boca-oído” son esos correos electrónicos en donde comentas a familiares o amigos tus últimas vacaciones y cómo 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 información.

Noticias en prensa escrita

Podríamos anunciar nuestra Web en revistas impresas del sector viajes, para incrementar de forma notoria el número de visitantes. Luego, tan solo nos falta atraer y retener a los que nos visitan movidos por ese artículo.

Anuncios en la red

El es sistema más utilizado en Internet. Los banners son pequeños rectángulos normalmente constituidos por una imagen animada, colocados a menudo al principio de la página, que al hacer clic en ellos, nos llevan a la página del anunciante.

Para incluir banners nuestros en determinados portales o en publicaciones electrónicas como periódicos o revistas, es necesario contratar espacio publicitario. También podemos utilizar el servicio intercambio de banners (http://banners.com.mx/index.html en español) 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 diseñar un banner, se han de tener en cuenta las dimensiones estándar, que suele ser de 468x60 y de 88x31 píxeles y además que su tamaño no supere los 10k. Estas limitaciones y el hecho de que para hacer diseños llamativos en muchas ocasiones se requiera la utilización de Java o de plug-ins, juega en contra de los banners.

Existen otros métodos de publicidad además 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 más información, pero, por otro lado también resulta más incomoda a los usuarios que visitan la página y no quieren ver la publicidad.

Internet ofrece el mayor número de criterios de segmentación del público al que quiere dirigir la publicidad: el país, la información buscada por el usuario, la hora, el navegador, el sistema operativo utilizado, el contenido de la página Web, etc.



Por ello existen distintos modelos de contratación 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 (catálogos, folletos, anuncios impresos, etc.) y en el material de papelería (tarjetas de visita, fax, sobres, papel,...) debe aparecer el URL de nuestra Web así como la dirección de correo de atención al público.

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 diseño equilibrado y dirigido a nuestro público objetivo

4. Realizar un mantenimiento del Web, actualizando la información e innovando

5. Poseer dominio propio (ver aclaración al final del apartado).

Y en nuestra Web:

6. Dar a nuestro clientes la opción de recibir información, como noticias o notificaciones de nuevos productos u ofertas automáticamente

7. Crear incentivas para que los clientes continuamente nos visiten, como concursos, nuevas ofertas semanales, etc.

Cada página Web tiene su dirección 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 tendrían 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 páginas web personales. Ej. www.ugr.es/~scu

Tecnologías para la creación e implantación de sitios Web


Tema III. Tecnologías para la

creación e implantación 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 máquina física (es decir, un ordenador que, por extensión, también recibe el nombre de servidor web) a la que se ha asignado una dirección única o URL (Uniform Resource Locator, o localizador uniforme de recursos), que la identifica de forma unívoca. 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 continuación se muestran estas sintaxis con sus ejemplos correspondientes.



Sintaxis Ejemplo

ftp://usuario:contraseña@host:puerto/ruta ftp://ftp.rediris.es/gnu/

gopher://host/ruta gopher://gopher.uv.es/

http://host/ruta?búsqueda http://www.ivia.es/

nntp://host:port/nombregrupo/artículo nntp://alt.philosophy/340

telnet://usuario:contraseña@host:puerto telnet://jaguar.pue.udlap.mx

tn3270://usuario:contraseña@host:puerto tn3270://ariadna.bne.es

mailto:usuario@host mailto:[email protected]

Wais://host:port/database/wpath?búsqueda wais://wais.com/

File://host/ruta file:///C:/DOCTO/QUAL.HTM

El servidor web se encarga de enviar el contenido de las páginas web que tiene almacenadas cuando el software recibe una solicitud desde otra máquina, 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 máquina del usuario que quiere acceder al contenido de dichas páginas.

En dicho envío, el servidor no sólo manda la página HTML, sino también todos aquellos elementos externos a la misma pero que forman parte de ésta (sonidos, imágenes o iconos, por ejemplo), de modo que en la pantalla del usuario que ha realizado la petición se visualice el resultado original, tal y como fue diseñado por su creador.

Recordemos que el lenguaje por medio del cual se efectúa la comunicación entre los clientes y el servidor se denomina HTTP (HyperText Transmission Protocol, o protocolo de transmisión de hipertexto). Dicho lenguaje ofrece no sólo los mecanismos necesarios para enviar la información entre máquinas, sino también servicios de encriptación y autentificación del cliente. Sin embargo, dado que ése no es nuestro objetivo, no añadiremos nada más acerca del HTTP.

El lenguaje HTML

La WWW nos ofrece muchos servicios: información, juegos, música, noticias,... pero hay dos que realmente interesan al profesional del turismo:

• La información sobre proveedores turísticos, agencias, empresas, así como sobre los gustos y preferencias potenciales de clientes de cualquier parte del mundo



• Comercio electrónico con posibilidad de realizar reservas y transacciones financieras de manera rápida y eficaz.

Las páginas Web son unidades de información o ficheros almacenados en ordenador, situados por todo el mundo en ordenadores denominados servidores de páginas 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 además integra el navegador instalado por defecto en el equipo y todo ello ocupando un espacio ridículo hoy en dia en el disco duro: menos de 1 megabyte. Estas páginas las crearemos por tanto con este editor o un simple block de notas, y lo guardaremos con extensión .html que indica el lenguaje utilizado para su escritura.

Cuando varias páginas web están agrupadas, entonces constituyen lo que se llama un sitio web o lugar web. Típicamente incluye otros ficheros o recursos como imágenes, audio, o ficheros pdf a descargar. Cada sitio web tiene una página principal o portada (en inglés home page y en ocasiones front page) que es como la entrada al sitio. Es la primera página que deberíamos 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 restricción en cuanto al nombre del resto de páginas html.

La anterior afirmación es cierta, pero en parte falsa. Debemos restringir el nombrado de nuestros archivos como buena práctica en la creación de sitios web. Este punto que puede parecer no tan importante el el origen del 80% de las prácticas de cursos anteriores (creación de una web). No me canso de decirlo y explicarlo, si no tenemos un estilo de nombrado introduciremos errores en nuestro código y la consecuencia será que páginas 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 están entregadas y subidas a un servidor de Internet en donde pasan a ser un documento público accesible 24h y 365 días al año.

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 además evitaremos siempre incluir caracteres como:

• Espacio en blanco. En su lugar usaremos mayúsculas, 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 páginas que forman el sitio están organizadas mediante una jerarquía de directorios y subdirectorios, ya que al fin y al cabo, son archivos.

Cada diseñador establece los contenidos del sitio web y su distribución en diferentes páginas, que pueden enlazarse la una con la otra mediante hiperenlaces de muy diferente manera. La mayoría de los sitios están diseñados en estructura piramidal, lo que permite al usuario ahondar en la información que más le interese de una forma sencilla.



La estructura de la web me está dando una idea visual de la navegación. Si en una web al entrar solo tengo una dirección posible, como si se tratase de un instalador de aplicación que simplemente pincho en Siguiente, entonces estoy en un caso de estructura lineal. Precisamente la idea de navegación en Internet es cualquier cosa menos lineal, ya que Internet es como leer un libro sin empezar en el capítulo 1 y terminar en el fin. El extremo opuesto sería una web sin estructura en la que las páginas 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 más, desde un raíz que es mi página principal a sucesivos niveles que amplían la información en distintos grados, hasta que llegamos al nivel más bajo que representa el grueso de nuestro contenido o información. Todos los niveles deben conectarse de alguna forma con el nivel superior para permitir una mejor navegabilidad.



Guía de referencia

Las páginas 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 página, una serie de pares de marcas o etiquetas (tags) que indican características especiales de dicho texto. Un tag no es otra cosa que un conjunto de caracteres concreto, que posee un significado específico 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 presentación visual de la página.

De hecho, si cargamos una página web con nuestro navegador habitual y pulsamos el botón derecho del ratón sobre la misma, se desplegará un menú en el que podremos seleccionar la opción correspondiente a Ver fuente. De este modo, se abrirá una ventana en la que podremos visualizar el texto ASCII de la mencionada página, y si nos fijamos con atención 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 serían deseables en un sitio web comercial, destinado al sector turístico 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 paréntesis que se utilizan al escribir una fórmula matemática: existen tantos de apertura como de cierre, y las aperturas más internas son las que primero se deben cerrar. Las etiquetas, al igual que los paréntesis, afectan única y exclusivamente a los caracteres delimitados por cada pareja principio/ fin. El conjunto formado por las etiquetas de principio y final, más 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 mayúsculas o minúsculas, pero una buena norma de estilo (y que simplifica notablemente el tiempo dedicado a mantenimiento y revisión del código de las páginas) consiste en escribirlas todas en mayúsculas.

En toda página HTML debe aparecer un mínimo 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. Análogamente, su complementaria </HTML> indica al navegador que el documento ha terminado, por lo que debe ser la última del documento. Justo a continuación 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 añadir información complementaria acerca de la página. En el interior de esta cabecera debemos incorporar, obligatoriamente, el tag <TITLE>, que sirve para añadir el título de la propia página, el cual no aparecerá como texto del documento, sino en la barra del título de la ventana.

Dicho título es el que usan los motores de búsqueda para incorporar nuestra página a sus índices de resultados. Sin embargo, en este punto conviene hacer una llamada de atención, dado que algunos motores de búsqueda muestran los resultados en orden alfabético: resulta muy conveniente, por tanto, dedicar cierto tiempo a definir el título de nuestra página de presentación, ya que será la llave para acceder a las restantes páginas y conviene que se sitúe 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 página. Esta es <BODY>, y su misión consiste en delimitar el cuerpo o parte central del documento.



Terminología

Antes de adentrarnos en este mundo de etiquetas e ir conociéndolas de una en una conviene dejar claro una leyenda de colores utilizados en los ejemplos, y que corresponde al código 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 programación, de esos que usan los informáticos para implementar programas hablando con el ordenador. Seguro que usted piensa además 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 términos anglosajones que tendríamos en mente para crear una tabla, una lista, poner algo de otro color, subrayar el texto… etc. Recuerde que



con este lenguaje decimos cómo queremos ver el texto y las imágenes de nuestra web. Pues bien, deberá decirlo prácticamente en inglés, pero simplificando mucho lo que se escribe, para hacerlo más fácil y rápido.

Además de su parecido al inglés, este lenguaje tiene otras particularidades que habrá que recordar y que se enumeran en la siguiente transparencia.



Elementos básicos

Entendemos por elementos básicos, aquellas etiquetas que son fundamentales, como por ejemplo las etiquetas HML, HEAD, BODY y TITLE que definen la estructura mínima de un documento HTML.

Hay otras tantas que son básicas, por ejemplo las que nos permiten crear espacios dentro del texto o entre párrafos. Si hemos dicho que los espacios en blanco y los saltos de línea no se interpretan (es decir, se ignoran), entonces, ¿cómo hacemos para que haya saltos de línea? Mediante la inserción de etiquetas que lo simulen.

Por ejemplo en este texto hay un salto de

línea, y si el espacio fuese mayor podríamos decir que tenemos

un salto de párrafo.

En el primer caso usamos la etiqueta BR (de break en inglés) y en el segundo la etiqueta P (de paragraph en inglés). La particularidad de los párrafos es que tienen un principio y un fin, y por eso se utiliza la etiqueta de cierre de párrafo para permitir modificar alguna de las



propiedades habituales de los párrafos, y aplicar ese cambio al texto contenido entre ambas. Por ejemplo, sabemos por los procesadores de texto que podemos alinear los párrafos 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 hipotético sería: <tag> y </tag>. Algunas etiquetas no necesitan cierre ya que no tienen que contener nada, como es el caso del salto de línea BR.

Uno de los elementos visuales más útiles a la hora de dividir una página web en partes claramente diferenciadas son las líneas horizontales: etiqueta HR (de horizontal rule en inglés). Por defecto se trata de líneas sombreadas que cuando se visualizan sobre un fondo gris parecen barras tridimensionales, trazadas a todo lo ancho de la página. Para añadirlas a nuestras páginas, bastará con hacer uso de la etiqueta <HR>, aunque ésta ofrece cuatro atributos adicionales, que describimos a continuación.

Así, con <HR SIZE=n>, podemos especificar el grosor de la línea, siendo n el número de píxeles que ésta ocupa; mientras que con <HR WIDTH=n>, podemos especificar la anchura de la línea, siendo n el numero de píxeles. Por su parte <HR ALIGN=alineación>, indica la alineación de la línea, con los tres valores posibles de izquierda (LEFT), centro (CENTER) y derecha (RIGHT). Finalmente, si utilizamos <HR NOS-HADE> obtendremos una línea sin sombreado horizontal.

En este documento se utiliza las mayúsculas para destacar el nombre de la etiqueta, pero en realidad es indiferente escribirlo en mayúsculas o minúsculas, eso sí se recomienda hacerlo siempre igual. Y es mas, yo recomiendo escribir en minúsculas, ya que las mayúsculas en Internet representa hablar en alto, o gritando.

A continuación mostramos un ejemplo en el que se presentan con mayor claridad las diferencias entre los tags presentados en este apartado, y en el que también se ve un ejemplo de otro elemento íntimamente relacionado con éstos, pero al que apenas hemos prestado atención: se trata de la justificación o alineado, referido única y exclusivamente al párrafo que está enmarcado por la etiqueta de apertura y la correspondiente de cierre. Nótese que la ausencia de acentos es intencionada. El código 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 genérica de toda página .HTML, compuesta siempre por una cabecera y un cuerpo, y aprendimos igualmente a incorporar nuestro propio texto a cualquiera de estas páginas. Con estos simples conocimientos ya es posible comenzar a crear contenidos, dado que en toda página web lo realmente importante es la información que contiene, no la forma en que ésta se presenta.

De hecho, aunque tradicionalmente se puede afirmar que una imagen vale más que mil palabras, en la Web sucede justo lo contrario; es decir, las palabras (y, por tanto, la información que encierran) son tanto o más valiosas que las imágenes que puedan adornar nuestras páginas (sin que ello suponga, por supuesto, un menosprecio de éstas y teniendo siempre en cuenta los «mandamientos de diseño» que indicamos en el anterior tema). Ahora bien, la utilización masiva de texto contradice precisamente una de las mencionadas reglas de diseño, es decir, la de organizar la información 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 elaboración de una estructura y subdivisión en el documento. Aunque se pueden utilizar hasta seis niveles de titulares, por cuestiones de estilo y legibilidad dentro de cada página es recomendable limitarse a un máximo de cuatro. Nótese que puesto que los titulares no son párrafos, no necesitan hacer uso de las etiquetas <P> y </P>. A modo de ejemplo, en la Imagen 2 se muestra el resultado del siguiente código:

<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 visualización 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 además 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 más 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 más modifique el aspecto de un texto que su

tipo de letra, tipo de fuente (o FONT), su color y su tamaño. 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 código 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 continuación, cambiamos a una fuente de tipo Arial y

tamaño 1

</FONT>

</BODY>

</HTML>



Como sería de suponer por lo que hemos visto hasta el momento, sobre el texto podemos aplicar otras características que nos permitirán mostrar un resultado aún más 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 párrafo que se usa por defecto

</P>

<CENTER> <P> Este es el mismo formato de párrafo, con

centrado </P> </CENTER>

<P>Esto muestra cómo resaltar texto en

<STRONG>negrita</STRONG> </P> <P> Y esto muestra cómo resaltarlo en <EM> cursiva </EM>

</P>

</BODY>

</HTML>



En ocasiones deseamos que esos coloridos y cambios se efectúen 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 página 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 anglosajón (pink, gray, orange…) o bien podemos dar su representación en hexadecimal que podemos obtener de un selector, habitual en los programas de edición de imágenes.



Ahora que hemos explicado los fundamentos más básicos del lenguaje, haremos una parada para explicar una norma no escrita pero de cumplimiento generalizado en la Red, referente al estado de actualización de las páginas. Es decir, lo habitual es que a la hora de diseñar nuestras páginas web reservemos al menos una línea (generalmente en la parte inferior de las mismas), destinada a mostrar tanto la fecha de creación como la fecha de última actualización de los contenidos

La utilidad de dicha información consiste en permitir a nuestros visitantes hacerse una idea bastante aproximada de la calidad de los contenidos (como es natural, no deberíamos esperar unos contenidos «frescos» en unas páginas que no se han actualizado en los últimos tres años, por ejemplo), pero se convierte también en un arma de doble filo, ya que nos exigirá una mayor dedicación al mantenimiento de las mismas. Este último es un elemento del que no habíamos hablado hasta el momento pero, haciendo un breve inciso en el hilo de nuestra narración, debemos dejar claro que el diseño de nuestras páginas web es una actividad sumamente gratificante y bastante absorbente, a poco que deseemos ofrecer un mínimo de calidad. Al igual que sucede con otras actividades que podamos realizar con el ordenador, el diseño de páginas web es una labor de índole creativa y, como tal, motivadora.



Sólo con que nos metamos en este mundillo nuestra curiosidad irá en aumento, y nuestro interés por aprender nuevas técnicas será una constante. En relación con el tema de las fechas tenemos que dejar claro que para éstas no se requieren nuevas etiquetas, sino que es preferible añadir dicho texto con un tamaño muy reducido. Como nota adicional tenemos que decidir si diseñaremos nuestras páginas en castellano o en inglés, dado que en este último caso el convenio de notación es diferente: 10-8-00 no significa 10 de agosto, sino 8 de octubre. Por ello, es aconsejable indicar explícitamente el mes.

<HTML>

<HEAD>

<TITLE> Otro ejemplo de página personal </TITLE>

</HEAD>

<BODY>

<CENTER>

<H1> ¡Bienvenidos a mi nueva página personal! </H1>

</CENTER>

<P> Esta página está en construcción, pero los contenidos se

actualizarán en breve </P>

<HR> <P>

<CENTER>

<FONT FACE=”Arial”, SIZE=1> Página 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 más. ¿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 código que al renderizar la página sea reemplazado por el carácter que queramos mostrar. Como siempre debemos buscar el término en inglés para dar con el nemotécnico a usar. Por ejemplo: 15 is less than 17 y el texto a escribir sería 15 < 17.

Nótese que todos los códigos empiezan por el carácter & y terminan por ; … pero entonces ¡estoy con el mismo problema! Si uso en mi texto & pensará que estoy iniciando un código y estoy en el mismo caso que con <. Es por ello que no podemos escribir & directamente y en su lugar lo reemplazaremos por un código para carácter especial.

Es cierto que esta no es la única motivación de estos códigos, lo es además 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 continuación os muestro algunos ejemplos de códigos 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 numeración

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 dónde 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 viñetas.

• Listas de definición (DL) para indicar, por ejemplo, términos de un glosario. En este caso los ítems son más complejos ya que hay que distinguir entre el término de definición (DT) y los datos que definen en sí el término.



Imágenes

Las imágenes son los elementos más enriquecedores de nuestra web, y los que aportan más colorido y grafismo al aspecto global de la página. Su importancia es mucha, pero su uso es bien simple.

Lo mínimo que hay que hacer para incluir una imagen es decir dónde está y como se llama haciendo uso del atributo SRC (source u origen) dentro de la etiqueta IMG (image). De forma más amplia podemos especificar el alto y el ancho de la imagen en número de píxeles o bien en tamaños relativos (porcentuales), si queremos borde o contorno de imagen, y también 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 páginas web, por lo que es muy importante rellenarlo a pesar de no ser un atributo obligatorio.



Hagamos un pequeño inciso en el mundo de las etiquetas para saber cómo vamos por ahora en el mundo del HTML. A estas alturas ya se habrán hecho muchos ejercicios en clase, pero lo más importante es que ya habréis practicado en el aula de prácticas la creación de páginas web.

Seguramente muchos habéis tenido dificultades ya que simplemente no estáis habituados a expresar vuestras ideas en un lenguaje, ya que lo normal es entrar con el ratón en algún menú y hacer un cambio dentro de los parámetros que se os sugiere.

Es por ello que llegados a este punto hago una recopilación de los errores mas habituales, para que no penséis 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 auténtico estropicio… así que revisa tu código!!



Enlaces

Cuando se están diseñando páginas web hay que intentar, de acuerdo con las reglas de diseño que señalamos en la entrega previa, que éstas sean concisas, lo cual nos obligará a dividir nuestros contenidos en un conjunto de páginas y, consecuentemente, a incorporar enlaces entre todas ellas. Es más, en HTML se pueden definir tres tipos distintos de enlaces:

- enlaces dentro de una misma página,

- enlaces a otras páginas situadas dentro del propio sistema y

- enlaces hacia páginas situadas en otros sistemas.

Los enlaces o referencias dentro de una misma página nos conducen hacia otro punto de la misma página web en la que nos encontramos. Los enlaces dentro del propio sistema apuntan a otros elementos (gráficos, imágenes, sonidos) o bien a otras páginas, generalmente creadas por nosotros mismos, que se alojan dentro del mismo servidor. Finalmente, los enlaces hacia otros sistemas apuntan a páginas alojadas en otros servidores. Para establecer un enlace usaremos una etiqueta del tipo <A HREF></A>, con una sintaxis ligeramente diferente en función del tipo de enlace que queramos establecer.



Así, para establecer un enlace dentro de la misma página 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 página </A>

Para establecer un enlace a otra página o archivo local usaremos la sintaxis

<A HREF=”nombre_archivo”> Enlace a un archivo local </A>

Nótese que, al igual que en el caso del enlace anterior, las comillas son obligatorias y cuando visualicemos el resultado en nuestro navegador aparecerán subrayadas las palabras situadas entre el símbolo > de la etiqueta <A HREF> y el símbolo < de la etiqueta </A>.

Finalmente, para establecer un enlace hacia una página 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 dirección o URL completo dentro de las comillas.

Además de los indicados en el punto anterior, existe un tipo particular de enlace que permite que los visitantes de nuestras páginas puedan ponerse en contacto con nosotros por medio del correo electrónico para enviarnos sugerencias, comentarios, etc. Su sintaxis es similar a la que hemos visto en los párrafos anteriores, aunque con una ligera diferencia:

<A HREF=”mailto:dirección”>Texto</A>

Otra posibilidad más elaborada consiste en utilizar una imagen como activador de un enlace, es decir, que al pulsar encima de la imagen fuésemos directos a dicho enlace. Para ello, la sintaxis es relativamente sencilla, y bastará con escribir en el código de nuestra página

<A HREF=enlace><IMG SRC=nombre_imagen></A>

En el siguiente código, se muestran ejemplos de distintos tipos de enlaces:

<HTML>

<HEAD>

<TITLE> Mi página personal avanza </TITLE>

</HEAD>

<BODY>

<CENTER>



<H1> ¡Bienvenidos a mi nueva página personal! </H1>

</CENTER>

<P> Esta página está en construcción, pero los contenidos se

actualizarán en breve. Si deseas enviarme cualquier

sugerencia, puedes <A HREF=”mailto:[email protected]”>

escribirme.</A></P>

<P> Desde esta página también puedes acceder a información

de <A HREF=”www.intel.com”> Intel </A> y <A

HREF=”www.amd.com”>AMD</A> </P>

<HR>

<P><FONT FACE=”Arial” SIZE=1> Página creada el 7 de mayo de

2001. Fecha de última actualización, 24 de Octubre de 2001

</FONT></P>

</BODY>

</HTML>



Cuando creamos un enlace a una página 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, páginas html o imágenes –llamémosles recursos de forma general—que no se encuentren en la misma localización física 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 ¿dónde 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 raíz 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 símbolos ..) 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 ¿cómo accedemos a datos? Pues subiendo un nivel, ya que eso nos localizaría en web y es de web donde cuelga datos.

<A HREF=”../datos/encuesta.pdf”>Ver encuesta (PDF)</A>

Ahora bien, si la situación hubiese sido esta, entonces nuestro enlace se modificaría, 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 información en nuestras páginas son las tablas, las cuales no sirven únicamente para mostrar datos organizados en filas y columnas, sino también para dividir los contenidos en distintas zonas horizontales o verticales.

No obstante, aquí nos centraremos únicamente en la primera posibilidad, en el significado más clásico de tabla, reservando la otra para más adelante. Para ello, dentro de nuestras páginas 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 información de cabecera (junto con </TH>); <TR>, para información de fila; y <TD>, para los datos propiamente dichos (junto con </TD>).

Para verlo con mayor claridad, la imagen de la página siguiente muestra el resultado correspondiente al código.

<HTML>

<HEAD>



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

</HEAD>

<BODY>

<CENTER> <H1> Análisis químico </H1> </CENTER>

<P> En la fabricación de nuestro delicioso refresco

intervienen únicamente componentes naturales,

cuyo análisis se muestra a continuación:

</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> Página creada el 7 de mayo

de 2001. Fecha de última actualización, 9

de mayo de 2001</FONT> </P>

</BODY>

</HTML>



Ahora bien, no podemos concluir este apartado sin mencionar tres parámetros que nos permitirán controlar distintos aspectos de nuestras tablas. El primero de ellos es el de justificación, ALIGN, que puede ser izquierda (LEFT), derecha (RIGHT) o centrada (CENTER). Dicho parámetro se puede usar indistintamente con los tags <TH> y <TD>. Por ejemplo, con <TD ALIGN=”RIGHT”> conseguiremos que el contenido de la celda en cuestión quede justificado a la derecha. El segundo parámetro de interés 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 líneas.

Finalmente, contamos también con el parámetro WIDTH para especificar el ancho total de la tabla (junto con <TABLE>) o de cada columna (junto con el tag <COL>). Este parámetro se usa en conjunción con otro parámetro adicional, UNITS, que puede tomar los valores PIXEL(es decir, puntos de pantalla) o RELATIVE(es decir, porcentaje sobre el ancho total de la página). Así, por ejemplo, con:

<TABLE WIDTH=”50%”> … </TABLE>

definimos que el ancho de la tabla es la mitad del tamaño de la página, con independencia de la resolución existente en el puesto cliente.



Los aspectos avanzados de las tablas vienen con la personalización general de los espacios de la tabla y el uso de la combinación de celdas. La etiqueta <CAPTION></CAPTION> introduce un texto de ayuda sobre la tabla que aparecerá sobre esta.

Por lo general el tamaño de la celda se ajusta al texto; si el texto es más ancho la columna se ensanchará.

Sin embargo podemos establecer un espacio, independientemente del texto el espaciado de éste con respecto a las líneas 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 también podemos especificar la distancia entre las celdas siendo equivalente a decir el grosor de las líneas del borde de la celda. Este parámetro que se especifica en valore de píxel se denomina cellspacing, y lo hemos puesto de forma exagerada a 30.

Si combinamos los dos valores a un tamaño de 15 píxeles, el resultado es el siguiente, que es con diferencia distinto al de la tabla original.



El segundo aspecto avanzado de las tablas es la combinación de celdas en horizontal (colspan) y en vertical (rowspan). Cuando combinamos celdas debemos asegurar que el número 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 miércoles. 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 sábado y puente. Esto implica que la segunda fila, tercera celda sufre una alteración y vale por dos: rowspan=2. Pero hay más cambios, ya que la celda que contiene puente desaparece (está contenida en la de sábado que es más 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 código 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 número 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 página y por tanto no están dentro de la etiqueta BODY sino que lo están en HEAD. Proporcionan información de utilidad al navegador, y es utilizado por los motores de búsqueda para obtener más información sobre la página web, por ejemplo el tema en general que trata o los términos (keywords) que mejor la describe.



El atributo NAME = keywords | description (autor + generator) indica el tipo de información que se va a describir en el atributo CONTENT.

La etiqueta <!DOCTYPE> indica la versión 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 homogéneo y una mayor claridad en nuestro código.

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 permitían definir tanto el tamaño como el tipo de letra de un párrafo o palabra, o bien el nivel de estructura correspondiente (por medio de los encabezados o headings).



Sin embargo, a menos que hiciéramos uso de estilos estandarizados o incluso aunque modificásemos éstos, lo cierto es que para garantizar que el aspecto que verían los potenciales visitantes de nuestras páginas sería el mismo que nosotros habíamos diseñado inicialmente, veníamos obligados a dedicar una enorme cantidad de tiempo a retocar, una por una, la mayor parte de las etiquetas correspondientes a características del texto. Y eso sin contar con la posibilidad de errores en páginas que no se ajustasen al diseño deseado simplemente porque alguna etiqueta se nos hubiese pasado sin modificar.

La tediosa situación descrita se puede evitar de una forma muy sencilla por medio de la aplicación de reglas de carácter general que se definen en las hojas de estilo. Éstas permiten controlar tanto el formato del texto como los colores, la posición de las imágenes y muchas otras características propias de las páginas HTML.

La ventaja fundamental de la utilización de hojas de estilo consiste en que éstas son sencillas de definir y se pueden aplicar de manera general a todas nuestras páginas, permitiendo así que éstas ofrezcan un aspecto homogéneo. Es más, modificar en el mínimo tiempo posible el aspecto de aquellas páginas que se basan en la utilización de hojas de estilo es tan simple y tan rápido como efectuar las modificaciones sobre la correspondiente hoja de estilo, lo que garantiza que los cambios se aplicarán de forma inmediata a todas las páginas HTML.



Ahora bien, para entender mejor el concepto, vamos a hacer un breve inciso. Cualquiera que haya utilizado en alguna ocasión 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á homogéneo. Además, cualquier cambio en la definición de un estilo concreto se puede propagar de forma inmediata a través de todo el documento.

Pues bien, salvando las diferencias, la función 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 página web el equivalente al documento de texto es en realidad un conjunto de documentos (el conjunto de páginas HTML).

En realidad, y para hablar con total propiedad, debemos mencionar la existencia de tres posibilidades distintas en lo que respecta a la utilización de las hojas de estilo en las páginas de un sitio web:

1. aplicar estilos definidos a elementos individuales dentro de una página,

2. crear una hoja de estilos incrustada o embebida en una página,

3. y vincular páginas 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 modificación en línea de etiquetas concretas dentro de una página HTML, ampliando por ejemplo el tamaño en puntos de un cierto tipo de encabezado, es quizá la forma más simple de aplicación de estilos, pero es también la más ineficaz, puesto que la modificación 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 código:

<P>Aquí tenemos texto estándar</P>

<P STYLE="color:blue" > Ahora es de color azul</P>

<P>Aquí continúa el texto estándar</P>

Como se puede observar, la utilización del atributo o modificador style dentro del tag de párrafo permite aplicar una modificación concreta (en este caso el color azul al texto) tan sólo dentro de ese párrafo.

El siguiente paso consiste en incluir dentro de la propia página HTML la hoja de estilo correspondiente, de modo que ésta se aplicará única y exclusivamente a dicha página. 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 página. Los estilos de una hoja de estilos incrustada sólo se pueden utilizar en esa misma página.

Un ejemplo de este tipo de estilo se puede observar en el código 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 lógico ya que este tipo de ajustes afecta al documento completo. También hay que llamar la atención 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 lección).

Puede que queramos habilitar o deshabilitar CSS, por si alguna característica de estilo no se encuentra disponible (es decir, se muestra como desactivada) o si queremos impedir la utilización de hojas de estilo para asegurar compatibilidad con todo tipo de navegadores.

Las hojas de estilos externas son la solución en aquellos casos en que se desea aplicar los mismos estilos de forma coherente en algunas o en todas las páginas del sitio Web. Al definir los estilos en una o más hojas de estilos externas y vincularlas a las páginas, se asegura la coherencia de la apariencia en todas esas páginas. De hecho, si se decide cambiar un estilo, sólo se necesita hacer un cambio en la hoja de estilos externa, el cual se verá reflejado a su vez en todas las páginas vinculadas a esa hoja de estilos.

Normalmente, una hoja de estilos externa utiliza la extensión de nombre de archivo .css (cascade style sheet u hoja de estilo en cascada), un término 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 brevísimo inciso, puesto que por la mente de más de uno debe estar circulando la misma pregunta: ¿qué sucede si tenemos una página con hojas de



estilo incrustadas o definidas individualmente? Bien, en ese caso nos hallamos ante una situación de precedencia, y la respuesta es realmente sencilla, dado que los estilos incrustados o definidos para esa página tendrán 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 páginas o a los elementos de página. Cada definición de estilo, o regla de estilo, consiste en un selector seguido de las propiedades y los valores de ese selector. A continuación 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 estándar. 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 tamaño fuente. Adicionalmente se pueden especificar propiedades múltiples 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 más amplia de propiedades que al utilizar sólo formato HTML estándar, entre las que se incluyen efectos de fuente (como versalita, es decir, todos los caracteres en mayúsculas o espaciado entre caracteres expandido), propiedades de párrafo (como sangría, interlineado y espaciado antes o después), propiedades de bordes y sombreado (como recuadros y colores de fondo) o propiedades de ubicación (como ajuste de texto alrededor de los elementos de página, ubicación absoluta o relativa de los elementos de página y orden z (de adelante hacia atrás) de los elementos de página.

Dada la amplitud del tema, suficiente por sí sola para llenar toda un mes de clases, para obtener más información acerca de la estructura y las reglas para definir una hoja de estilos en cascada y sobre propiedades válidas y valores es recomendable consultar las especificaciones del World Wide Web Consortium (W3C) sobre hojas de estilo en cascada (en la dirección http://www.w3c.org).



Mapas de imagen

Al igual que una imagen puede contener un enlace, podemos hacer que porciones de la imagen actúen 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 página html que estamos editando.

Después definimos las zonas geométricas dentro de la imagen que queremos activar. Cada zona se designa con una etiqueta area, teniendo que indicar manualmente las coordenadas de la región activa. Estas formas son de tres tipos: círculos, rectángulos y polígonos de un numero ilimitado de puntos.

• El círculo se especifica mediante tres valores: las coordenadas x, y del centro y el valor r del radio.

• El rectángulo 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 rectángulo.

• El polígono se define con un número par de valores, en concreto, el doble de los puntos que estemos usando para



definir la forma poligonal. Automáticamente el último punto especificado se unirá al primero.

Una vez indicada la geometría (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 páginas existen formularios mediante los que se puede recabar información adicional de sus visitantes. Este potente mecanismo permite dotar de mayor interactividad a dichas páginas, puesto que establecen un canal de comunicación a través del cual se pueden utilizar las respuestas del usuario para diferentes propósitos, como gestionar pedidos o alimentar una base de datos.

La forma más simple de declarar un formulario dentro de una página HTML consiste en utilizar el tag <FORM ACTION=”URL” METHOD=”post”>, añadiendo 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 básicamente se encarga de recoger información en el formulario y pasarla a dicho servidor.

No obstante, dado que la programación de scripts CGI (o cualquier otro lenguaje de script de servidor como PHP) requiere bastante conocimiento de programación, no continuaremos profundizando en el aspecto de los formularios, con todo el detalle que se merecen y nos quedaremos solo en el apartado de diseño de formularios.





A continuación se muestra un ejemplo completo con todos los elementos gráficos de un formulario.

<HTML>

<HEAD>

<TITLE>Diseño 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="[email protected]">

<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>

Diseño de la web <INPUT NAME="things" TYPE="checkbox"

VALUE="Diseño">

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 página en la que agradezcamos al usuario su colaboración, 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 introducción de frames o marcos, seremos capaces de mostrar más 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 cómo se hace la división: si por filas o por columnas para posteriormente indicar el tamaño de la división (en porcentual o píxeles).

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 más 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 parámetros mínimos pero está anidando marcos dentro de otros. Su resultado se muestra en la siguiente imagen, y a continuación 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 tamaño del marco y no permitir su edición.



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 página se carga en una nueva ventana en blanco

_self carga la página 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 página 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 carácter almohadilla.



Tecnologías y métodos para dotar de interactividad y elementos multimedia a una pagina Web

El mundo de los viajes es uno de los que pueden sacar más partido del mundo multimedia que nos ofrecen las nuevas tecnologías para vender más productos. Una atractiva foto de un hotel, un video de un paisaje, unas imágenes de aficionados montando a caballo o haciendo esquí suelen hacer tomar la ultima decisión a un cliente para realizar su reserva.

Pues bien, como hemos visto, el lenguaje HTML, con el que se crean las páginas Web, está enfocado para la creación de documentos estáticos con texto y como máximos gráficos. El HTML no soporta la ejecución 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 programación, para dar al documento animación, multimedia e interactividad.

• Plug-ins o conectores



• Lenguajes de scripts

• Applets de Java

• Aplicaciones auxiliares y MIME

• Páginas activas ASP (Active Server Pages) / contenidos dinámicos generados con PHP

Un plugin o conector es un programa complementario instalado en nuestro ordenador que interactúa 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 página de interactividad. Son programas que forman parte de la página 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 páginas mucho más 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 rápidamente del servidor y se ejecutan de forma transparente, sin que el usuario tenga que realizar ninguna acción. Con Java se pueden realizar desde aplicaciones muy complejas (simuladores científicos) o cosas muy sencillitas como:

• calculadoras científicas que permiten sacar gráficas de datos

• dibujos con animaciones para tutoriales y juegos

• cambios de moneda incrustados en la Web

• introducción de datos del usuario para envío al servidor

Inténtese no confundir Java con Javascript.

Otros lenguajes como VRML permiten crear espacios tridimensionales y dotar de mundos virtuales a las páginas Web. La tecnología Flash está inundando la Web con aplicaciones similares a las de los applets. Este lenguaje permite diseñar páginas 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 viajarían 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 transmisión.



Existen muchos métodos para enviar este tipo de datos, pero el más popular es MIME (Multiporpose Internet Mail Extensions). Todo se realiza de forma transparente. Constantemente están 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 información (reservas, consultas, etc). Necesitamos obtener información de una base de datos a través de un protocolo de comunicaciones mediante el cual podamos comunicarnos con otras aplicaciones (programa de reservas). CGI – Interfaz Común de Pasarela o Common Gateway Interface permite al servidor comunicarse con otras aplicaciones. Script-CGI es la aplicación que trata los datos unipersonales que se recogen del usuario, y llegan al servidor de páginas y generan una respuesta. Las aplicaciones cgi se escriben normalmente en lenguajes como C o Perl.

Las páginas activas ASP constituyen una alternativa a los CGI para crear páginas dinámicas. Desde el punto de vista del usuario, no existe ninguna diferencia entre una página asp y una tradicional html. Desde el punto de vista del desarrollador, son ideales para la actualización de datos procedentes de bases de datos. En el fondo son como una especie de plantillas de páginas html con partes que se modifican en función de una serie de parámetros que reciben desde el usuario o del propio servidor. Ej. La fecha y la hora de la página.

Lenguaje HTML y su evolución a XML

Si bien no nos interese ser diseñadores profesionales Web, si es conveniente que tengamos algunas nociones de cómo funcionan el lenguaje utilizado para crearlas, para saber cómo funcionan las páginas Web, qué cosas se pueden hacer y cuáles no.

HTML es un lenguaje de marcas específico de la Web cuyas funciones son:

• Definir el formato de la página. Indicar cómo se ha de mostrar la información

• Incluir enlaces que nos lleven a:

o La misma página: enlaces internos

o Otras páginas 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, gráficos o cualquier otro elemento. Se encuentra siempre en constante evolución 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 más 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 más potente para la edición de documentos y el desarrollo de programas que los puedan procesar de forma automática.

Comercio Electrónico


Tema IV. Comercio electrónico

Nuevas oportunidades de negocio

Según Wikipedia, la enciclopedia libre más grande del mundo, El comercio electrónico, también conocido como e-commerce (electronic commerce en inglés), consiste en la compra y venta de productos o de servicios a través de medios electrónicos, tales como Internet y otras redes informáticas.

La definición es clara y breve, ya que merece más la pena ver en qué se traduce el e-commerce hoy en día que hablar de historia, elementos del e-commerce o generalidades de este fenómeno. Aquí nos centramos principalmente en las oportunidades de negocio creadas en Internet, comenzando por las que se muestran en la transparencia siguiente.



La tecnología 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 múltiples características del producto, sino que a su vez almacena información del cliente que está realizando dicha compra:

- nombre

- dirección y teléfono

- datos de la tarjeta de crédito: número y caducidad

- registro de las compras anteriormente realizadas

Está relacionado con tecnologías de programación 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 módico, lo cual nos permitirá disponer en nuestra web de facilidad para la venta directa a nuestros visitantes.

El caso más ampliamente conocido de carrito de la compra es el de Amazon, que se dio a conocer en 1994, creciendo rápidamente hasta ofrecer millones de productos diferentes a más de 10 millones de clientes. Al principio era un pequeño inventario que recibía pedidos por e-mail. Ahora el catálogo on – line ofrece en el lado servidor una base de datos sofisticada para los consumidores del lado cliente. Es un ejemplo de aplicación cliente/servidor.

Es capaz de personalizar el servicio dado, basándose en anteriores transacciones que almacena, para poder sugerir otras nuevas (sin intervención humana).

La compra de un producto es simple: primero se localiza utilizando el cuadro de texto “Búsqueda / Search” que nos llevará directamente hasta el producto si existe (lo raro es no encontrarlo). Desde ahí veremos una descripción detallada del artículo así como la opción de añadirlo al carrito de la compra. Entonces se nos mostrará la lista de elementos adquiridos para que podamos verificarla (Ej. N° de unidades), eliminar artículos, 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 contraseña para poder realizar futuras transacciones rehusando la información de pago y envío, haciendo la operación más rápida y simple. Eso se cambió levemente y ahora tan solo se pide que rellenes una tarjeta de identificación con



todos tus datos personales incluido el número de la tarjeta de crédito 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 número de tarjeta por ahí existe otra opción consistente en dar los 5 últimos dígitos por la Web y el resto por teléfono al departamento de atención al cliente de Amazon.

Una vez que se ha realizado un encargo de compra (order), Amazon envía un correo electrónico de confirmación y un segundo correo cuando ya ha salido el paquete postal (shipped). Siempre se puede cancelar la compra antes de que se envíe, que suele ser a las 24 horas.

Otras compañías 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 compañía llamada Auction Web en 1995, que luego cambió de nombre a eBay siendo actualmente líder en el sector



con 2 millones de subastas únicas y 250.000 artículos nuevos cada día.

Su secreto estriba en implementar técnicas tradicionales de marketing manteniendo el proceso de subasta lo más simple posible. Cuenta con la adicción añadida del círculo pujar / cerrar que hace que compradores y vendedores vuelvan de nuevo.

La compañía 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 además quieres que tu subasta aparezca promocionado (resaltado en negrita) se suman 2€ y si aparece en la página principal son 99,95€ para eBay.

La base de datos gestiona la información de compradores y vendedores. Los compradores incluyen además de sus datos información del producto, fecha y precio de salida. Se puede añadir un precio de reserva que se debe alcanzar para vender el producto. Si la puja mayor no alcanza el precio de reserva el artículo 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 envío. En este sentido eBay solo los pone en contacto. El comprador corre con los gastos de envío.

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.



Otra área en el comercio electrónico con tendencia al crecimiento son las transacciones comerciales (compra-venta en bolsa) en línea, que está haciendo que muchas de las firmas de Wall Street se vean también 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 más fácil y barato.

Se puede comprar y vender acciones y bonos del estado, haciendo estas operaciones accesibles a una mayor audiencia. Hoy en día 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 gráficos, diagramas y artículos 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 ningún 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 años que lleva Internet en uso, las compañías 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 través de su Web. El cliente se favorece en este caso de la venta directa sin intermediarios.

Igualmente ING Direct se ha beneficiado muchos años 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 electrónico esta dando pie a nuevos tipos de negocios. Hay algunos como ebates.com que ni siquiera ofrece ningún 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 búsqueda en ebates equivale a buscar en aproximadamente 400 almacenes simultáneamente. El cliente cuenta con multitud de artículos y un alto porcentaje de probabilidad de encontrar lo que quiere.

Intercambio Electrónico de Datos (EDI)

EDI es el acrónimo de Electronic Data Interchange, es decir, Intercambio Electrónico de Datos y es un elemento clave en el éxito e implantación del comercio electrónico

Se entiende EDI como el intercambio de documentos entre los ordenadores de los participantes en una relación comercial mediante un formato normalizado, que permite un tratamiento automatizado de la información. El EDI se produce principalmente entre empresas, por ejemplo para el tratamiento de facturas y pedidos en una transacción comercial.

En el sector turístico 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 través de EDI y no las personas. Es fácil encontrar una forma estructurada de mandar la información: el contenido y la forma está sujeto a un estándar 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 más amigable.



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 métodos de pago, y todos ellos deben inspirar confianza y tener las suficientes garantías de seguridad en la red.

1. Transferencia bancaria

Este método es bastante cómodo ya que es posible realizar una transferencia bancaria desde el ordenador a través de Internet sin necesidad de desplazarse a banco. Además para nosotros tiene la ventaja de no tener que correr con los gastos derivados de las comisiones de las tarjetas de crédito. Cuando el cliente escoja esta opción de pago, debemos mostrarle de forma inmediata el número de cuenta bancaria de nuestra empresa. Deberemos trabajar con un banco que permita hacer consultas a través de Internet (prácticamente 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 comisión.

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 crédito

Es el medio de pago más utilizado en la actualidad. Resulta cómodo para los clientes y no supone ningún coste adicional para ellos. La transacción es muy rápida y sin comprobantes, pero tendremos que pagar la comisión de las entidades financieras. Para poder validar las tarjetas, es necesario disponer de conexión con aplicaciones de comercio electrónico 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 leídos por terceros, así como el cliente debería comprobar nuestro certificado electrónico de seguridad de nuestro sitio para evitar que alguien nos suplante, recoja la información de la tarjeta y se haga pasar por nosotros, de forma que el cliente no advierte el engaño.

Otro método de hacer pago con tarjeta consiste en incluir el número de esta en un correo electrónico firmado por el titular, con un certificado electrónico emitido por una Autoridad Certificadora. Mediante este método estaremos seguros de la autenticidad del mensaje, y el cliente estará tranquilo ya que ningún tercero habrá podido leer el contenido del mensaje.

5. Ciberdinero

Bajo nombres muy diversos tales como dinero electrónico, dinero digital, ciberdivisa, (cybercash – ecash - digicash) se presenta una nueva forma de dinero, adecuado a las redes, y más concretamente a Internet. El ciberdinero no deja rastro de nosotros en nuestras compras por Internet, al igual que ocurre con el dinero real. Veremos más 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 vía móvil 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.



Veamos como caso de estudio a CyberCash TM, que es uno de los líderes 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 institución 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 también dispone de un monedero virtual denominado InstantBuy que nos vale en cientos de sitios comerciales. CyberCash también dispone de un servicio de facturas y pagos colectivos on-line denominado PayNow.

Para más información: http://www.cybercash.com



Seguridad en las transacciones electrónicas

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 información disponible en Internet. No es una red aparte, sino un conjunto de servidores de información repartidos por Internet o por una intranet, accesibles mediante aplicaciones cliente (es decir, navegadores) con el fin de obtener datos, que pueden ser texto, imágenes, sonidos, videos u otros formatos multimedia.

El procedimiento básico que emplea la WWW es bastante simple. Un usuario suministra la dirección 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 dirección 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 características que



convierten las aplicaciones y protocolos de la WWW en abiertas y flexibles las hacen también 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 aplicación equivocada.

Existen distintas amenazas y soluciones de seguridad en la web:

1. Uso inapropiado de la Web

Es muy fácil perder la noción del tiempo mientras se esta surfeando por la Web. Algunas empresas están 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 reducción del ancho de banda disponible para Internet necesario para las propias actividades laborales. La fácil disponibilidad de pornografía en Internet puede llevar también al abuso de la Web.

La solución drástica de algunas empresas es prohibir todo acceso a la Web de forma que se pierde posibilidad por ejemplo de usar mensajería instantánea, 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 ningún propósito empresarial legitimo.

2. Riesgo para los servidores

La amenaza básica para un servidor Web es que un usuario pueda escapar del software del servidor hacia una shell de comandos o engañarlo 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 precaución de cambiar la contraseña 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 eliminación, sustracción o modificación de todos los ficheros del ordenador. Además el PC en peligro puede utilizarse también como plataforma para atacar a otros servidores del interior que quizás contengan información incluso más 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 solución 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 ejecución, para que sea consciente de que algo se va a ejecutar. Imagina que tú no has lanzado ninguna aplicación. Eso te daría pistas de que tienes malware en tu equipo.

Cortafuegos

Por lo general la gente piensa que la única amenaza a su equipo es la infección por virus, y todo el mundo se hace rápidamente 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 solución a estos problemas se complementa con el uso de un cortafuegos. Los sistemas operativos actuales incluyen un cortafuegos de sistema, aunque también 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 organización. El papel de los cortafuegos es similar al del guarda de seguridad que protege la entrada a un edificio de oficinas de una compañía. Es responsable de proteger la entrada a la red, según la identificación de los visitantes y llevando un registro de visitas. Es necesario por tanto disponer de una política de seguridad.

La política de un buen cortafuego es denegar cualquier acceso no autorizado explícitamente. De igual forma, puede registrar información referente a todos los intentos de sesión exitosos e infructuosos que se efectúan a través de los cortafuegos.

Los cortafuegos son una parte importante de la seguridad de un sistema, sin embargo no son la solución 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 solución más obvia.

• La función principal del cortafuegos en una intranet es proteger el perímetro de la intranet del ámbito público de Internet, así



como separar una red de área local de otra dentro de la misma intranet.

• Riesgos asociados con los servicios de Internet como: correo electrónico, transferencia de ficheros, ejecución remota por medio de terminales telnet y la World Wide Web. Los problemas más evidentes de este último incluyen el desconocimiento del efecto de ejecutar programas en servidores sobre los que no se ejerce ningún control, el riesgo de transferir software inapropiado o defectuoso desde Internet y la miríada 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 mayoría los relacionados con los virus y los programas del tipo caballo de Troya. Para un cortafuego no es posible detectar fácilmente los ataques que se originan desde el interior del perímetro. Hay empresas que contemplan la suspensión de los empleados que introduzcan disquetes no comprobados en su lugar de trabajo.

Los cortafuegos pueden diferir en su arquitectura y sus características. Actualmente, se encuentran en el mercado dos tipos de arquitecturas de cortafuegos:

• Un cortafuegos de filtrado de paquetes ofrece un control básico de acceso a la red basado en la información de protocolo contenida en los paquetes IP. Cuando estos llegan al cortafuegos, la información se compara con un conjunto de reglas de filtrado, que especifican las condiciones según las cuales se autoriza o deniega a los paquetes su acceso a la red.

• Un cortafuego de gateway a nivel de aplicación interrumpe la ejecución de todas las sesiones de red y crea una sesión aparte hacia el destino deseado, siempre y cuando reciba autorización para ello. A continuación, transmite la información desde la conexión original hasta la segunda conexión.

Se observa que, si bien cada tipo de cortafuegos difiere en cuanto a su funcionamiento, el servicio básico ofrecido es esencialmente el mismo. Ambos actúan como un filtro entre dos redes con el fin de restringir los servicios que se ofrecen en cualquier dirección según una política 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 aplicación ejerce mayor control sobre una sesión, dado que crea y mantiene la conexión actual con el exterior. Un filtro de paquetes filtra los paquetes IP a nivel de la ruta del paquete, que se resuelve en una decisión de autorización 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 aplicación.

Seguridad en la transacción

Muchas dudas o cuestiones afectan a la seguridad de las transacciones:

1. Privacidad: al dar el número de la tarjeta, ¿cómo sabemos que no hay un tercero que pueda coger esa información?

2. Integridad: ¿cómo sabemos que la información se ha enviado o ha sido interceptada por un hacker?

3. Autentificación: ¿cómo sabemos que la empresa que recibe nuestros dados es un negocio con reputación y no unos timadores?

4. No – cancelación: ¿cómo 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 transacción 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 más adelante.



Métodos de encriptación

Los canales de Internet no son seguros y es necesario codificar los datos. La criptografía transforma los datos usando una llave para hacer a esta incomprensible excepto para los receptores deseados. Cuando están encriptados, los datos reciben el nombre de cibertexto y cuando no, texto plano.

En el pasado se usaba la criptografía de clave privada o criptografía simétrica, en la que la misma clave secreta se usaba para codificar y decodificar el mensaje. Esta técnica tenía varias pegas:

1. la clave se puede interceptar

2. como es la misma clave de codifica / descodifica nunca puedes estar seguro de quién creo la clave

3. es necesario una clave diferente para cada receptor, lo que puede originar un montón de claves secretas para mantener.

Un método mas seguro es el asimétrico. Utiliza dos claves: una pública usada para encriptar y la correspondiente privada para desencriptar (y viceversa).

Cada participante tiene las dos claves. El que envía utiliza la clave pública 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 envía (solventando los problemas de autentificación e integridad). Para crear una firma digital se emplea una función 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 función hash.

Los pasos a realizar son los siguientes:

1. Se utiliza la clave pública del que envía para descifrar la firma digital

2. utiliza la clave privada del receptor para descifrar el mensaje

3. utiliza la función 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 transmisión.

El problema de la clave pública es que cualquiera con suficientes claves puede hacerse pasar por emisor. Es el caso que decíamos antes de cómo podemos estar seguros de que accedemos a un site en concreto o no a un tercero que está ahí para coger las tarjetas de crédito. Esto se resuelve con la PKI – Public Key Infraestructure que añade certificados digitales al proceso de autentificación. Este



certificado lo da una Autoridad Certificadora (CA – Certification Authority) usando su clave privada.

Un certificado digital incluye el nombre del individuo o compañía a certificar, la clave pública del sujeto, un número de serie, una fecha de expiración y la autorización de la entidad certificadora en la que confiamos. La CA es la responsable de la autentificación y es bastante cuidadosa comprobando la información.

VeriSign (http://www.verisign.com) es la empresa que ha desarrollado PKI. Otro de los líderes es RSA Security Inc (http://www.rsasecurity.com), fundada en 1982 por los tres profesores del MIT que inventaron el sistema de encriptación de clave pública.

Autentificación

Autentificación significa simplemente confirmar la identidad aparente de un usuario que solicita un servicio a través de un cortafuegos. La mayoría de los cortafuegos utilizan la dirección IP no autentificada para identificar al usuario. Este sistema facilita la suplantación y no



permite identificar al usuario de sesiones realizadas en host multiusuario.

Existen tres métodos tradicionales para verificar la identidad de una persona:

1. El primer método utiliza algo conocido, que puede ser un elemento de información secreto como la contraseña.

2. El siguiente método identifica a una persona por algo que posee de esta, como una tarjeta inteligente.

3. El tercer método emplea algo incorporado, como una huella dactilar o el modelo de la retina de una persona.

4. Un nuevo método para la autentificación continua es la encriptación de sesiones. Se verifica cada uno de los paquetes en lugar de solamente el inicio de la sesión.

Las contraseñas multiuso tradicionales corren el riesgo de ser capturadas en un entorno de LAN; las de un solo uso son más seguras. Tanto las contraseñas como las tarjetas pueden sufrir ataques por secuestro de la sesión.

Los servicios que contemplan la posibilidad de que un cortafuegos pueda realizar funciones de autentificación 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 estándar que soporta la autentificación y el cifrado de transferencia HTTP. Es retro-compatible con HTTP, lo que significa que un servidor S-HTTP puede proporcionar todavía un servicio a clientes que no soportan S-HTTP. Esta nueva capacidad permite a los administradores de servidores Web requerir una autentificación antes de proporcionar acceso a URL seleccionadas. Además, es posible cifrar toda la información de la sesión, protegiendo así los documentos o los archivos transferidos. Sin embargo, uno de los usos más importantes de S-HTTP es la protección de números de tarjeta de crédito. Esto permite efectuar compras en la Web, lo cual es ahora mismo uno de los temas de más actualidad.

Los protocolos seguros para TELNET y FPT se unifican en el protocolo SSH. Según wikipedia, SSH (Secure SHell, en español: intérprete de órdenes segura) es el nombre de un protocolo y del programa que lo implementa, y sirve para acceder a máquinas remotas a través de una red. Permite manejar por completo la computadora mediante un intérprete de comandos, y también 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 aplicación por un canal seguro tunelizado mediante SSH.



Existen otros protocolos de seguridad que representan una competencia para S-HTTP; por ejemplo, el SSL que es un protocolo de seguridad más general implementado debajo de la capa de aplicación para proporcionar servicios de autentificación o de encriptación a cualquier aplicación 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 transacción que emplee SSL el socket1 está asegurado usando criptografía de clave pública. A su vez emplea certificados digitales para autentificar al servidor en una transacción.

Los pasos a realizar son los siguientes:

1. el cliente envía un mensaje al servidor

2. el servidor responde y envía su certificado digital

3. cliente y servidor negocian la transmisión así como las claves empleadas en esta (sesión keys) usando el método simétrico.

Aunque SSL protege la información que pasa por Internet, no protege la información privada como el número de la tarjeta de crédito, 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 podría acceder a dicha información.

El protocolo SETTM – Secure Electronic Transaction, desarrollado por Visa International y MasterCard fue designado para proteger específicamente las transacciones de pago del comercio electrónico. Utiliza certificados digitales para cada participante en la transacción: cliente, vendedor y banco del comerciante.

Emplea encriptación de clave pública además 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 crédito – débito de múltiples tarjetas de crédito. Es válido 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 envía la información 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 pública del banco del vendedor.

Esto y el certificado de autentificación del cliente se envían al vendedor. Posteriormente éste lo reenvía 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 autorización sobre la tarjeta al vendedor, que confirmará la orden de compra del cliente.

De esta forma el comerciante nunca ve propiamente la información del cliente y no es necesario almacenar el número de la tarjeta de crédito en su base de datos, reduciendo el riesgo de fraude.

A pesar de su alto nivel de seguridad, SET no se ha convertido aún en un protocolo estándar usado en la mayoría de las transacciones, parte porque necesita un software especial en ambas partes y por otro lado, por el mayor tiempo consumido en la transacción.

Más información: http://www.mastercard.com http://www.visa.com y http://www.globalnet.com como vendedor de monederos virtuales.



Nuevas tecnologías para el comercio

XML y el comercio electrónico

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 aplicación específica. De esta forma las etiquetas permiten catalogar los datos más eficientemente.

Se puede desarrollar y estandarizar etiquetas para pedidos, transacciones, precios, participantes de una transacción, etc. Esto ayudaría por ejemplo a agilizar los motores de búsqueda.

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 minería de datos recoge de grandes cantidades de datos la parte principal de la información (lo mismo que la piedra preciosa pulida) y lo almacena en un almacén de datos o DataWarehouse. En este proceso se consumen muchos recursos en tiempo y dinero. Primero porque utiliza una serie de búsquedas para encontrar patrones específicos y relaciones en tales montones de datos, y segundo por emplear herramientas muy costosas. A pesar de todo, la minería de datos puede mejorar considerablemente el beneficio de la empresa.

Un bot (abreviación de robot) puede hacer la minería de datos más eficiente, ya que permite hacer consultas específicas, eliminando la necesidad de múltiples búsquedas. Se trata de una herramienta software para descubrir datos. Tú le das direcciones y el busca datos y después 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 electrónico. Son pequeños bots con una misión que cumplir y que además pueden aprender costumbres de los usuarios con el tiempo, al guardar información 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 próximo concierto de los Rollings en Junio en Barcelona.

En resumen, la minería de datos proporciona a una compañía toda la información que necesita para operar más eficientemente. Los agentes inteligentes y los bots permiten incrementar el nivel de servicio y personalización. Estas tecnologías hacen a una compañía más 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 computer’s 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.

Today’s 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 today’s 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 everyone’s 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 user’s 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 Apple’s 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 YouTube’s 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 document’s information. In HTML, it was common to specify both the document’s 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 Internet’s 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 information

Historical value

Never inaccessible because of unreliable hardware

Readers can never alter content.

Readers cannot customize information.

Cannot conform to user preferences (text style).

Physical entities Portable

Allows browsing and exploring

Allows annotation and underlining

Aesthetically appealing

Limited to 2D information.

Limited to static text and graphics.

Costly to reproduce for quickly outdate information.

Often hard to locate specific information

Static Cannot handle sound or motion.

Difficult to create multiple indices.

Advance technology

Well-defined and accepted standards

Typography, graphic design, and photo reproduction refined fields

High-resolution print and graphics.

Easy to read.

Joint authorship difficult.

Rekeying text is error-prone.



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 colleague’s documents; at best, they should be allowed to create new links within a colleague’s 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 document’s 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 page’s 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.

Let’s 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: Informática de Gestión 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 tourist’s 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 didn’t 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

Lessons

Lab practice

Practice discussion

Web page

Exams

Lecture hours

24

12

3

0

2

41

Study hours

12

12

1

35

10

70

Total

36

24

4

35

12

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 student’s 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: [email protected]

Web: http://lsi.ugr.es/rosana

• Office at FCCEE

Office num. A-203. Software Engineering Department. Facultad de Ciencias Económicas y Empresariales, Campus Cartuja 18071. Granada. (Spain)

Telephone: 958 243697



• Office at ETSIIT

Third floor, office num. 19. Software Engineering Department. Escuela Técnica Superior de Ingenierías de Informática y de Telecomunicación. Avd. Periodista Daniel Saucedo Arana, sn. Parque Almunia. 18071. Granada. (Spain)

Telephone: 958 241000 Ext.: 20038

Apéndices


Tema VI. Apéndices

Relación de problemas de HTML

Ejercicios de HTML básico

1. Indíquese cuales de las siguientes sentencias son verdaderas o falsas. En caso de responder falso, justifíquese.

◦ Puedes especificar el fondo de una página 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 programación 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 superíndice se consigue con la etiqueta _____ de igual forma que el subíndice es formateado con el elemento ______.

c) El elemento _______ se localiza entre las etiquetas <HEAD> y </HEAD>.

d) La cabecera más pequeña que se puede conseguir es _____ y la más grande posible _____.

e) Para formatear tanto el tamaño como el color del texto, debemos emplear el elemento _______.

f) Es posible centrar una sección de la página, rodeándola 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 párrafo del final de la relación, coloque adecuadamente marcas para: H1 para la cabecera de sección, P para el texto, STRONG para la primera palabra de cada frase y EM para todas las letras mayúsculas.

5) Para el mismo párrafo coloque las etiquetas adecuadas para: separar sentencias empleando líneas horizontales alineadas a la izquierda, de tal forma que el tamaño de la línea sea igual al número de palabras de la sentencia que antecede. De forma alternativa emplear líneas horizontales de color sólido.

6) Explicar por qué el siguiente código es válido (mirar la especificación para P):

<P> Aquí tenemos algún texto ...

<HR>

<P>Y aquí tenemos otro poco...</P>

7) Explicar por qué el siguiente código no es válido (mirar la especificación para BR)

<P>Aquí tenemos algún texto... <BR></BR>

Y aquí tenemos otro poco...

8) Dada una imagen llamada moon.gif de 200 píxeles de ancho y 150 de alto, utilizar los atributos adecuados del elemento IMG para:

a) Incrementar en un 100% el tamaño de la imagen

b) Incrementar en un 50% el tamaño de la imagen

c) Cambiar el ratio alto / ancho a 2:1, manteniendo el ancho especificado en el apartado a)

Apéndices


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 dirección de correo del actual presidente de Estados Unidos ([email protected])

e) Por FTP a un fichero denominado LEEME del directorio pub de la dirección ftp.cdrom.com

Párrafo para el ejercicio 4:

3.1 Guías y Sistemas de Información al turista

Cuando viajamos queremos sacar el máximo partido a nuestra visita. El tiempo disponible es limitado y es imprescindible disponer de una guía que nos aconseje y que nos permita hacer una selección. Hay guías de muchas clases. Atendiendo al ámbito geográfico que abarcan existen:

- guías internacionales.

- nacionales, que se centran solo en el país.

- regionales o interregionales que cubren una o varias comunidades autónomas.

- guías locales centradas en una ciudad.

- guías personales, escritas por gente preocupada por difundir el patrimonio turístico 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 límite en el número 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 numeración hay que empezar otra lista.

d) El elemento HEAD impera sobre el elemento TABLE.

e) Estamos limitados a un máximo de 100 enlaces internos por página.

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 botón de forma que cuando es pulsado, borra el estado de los demás.

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é versión de HTML está incluida en la página. Dos tipos de este elemento son ___ y ___.

e) Las formas más normales de mapear una imagen son: ___, ___ y ____.

3) Escribe las etiquetas HTML apropiadas para realizar las siguientes propuestas:

a) Inserta una página Web que contenga marcos de tal forma que el del lado izquierdo se extienda en 300 píxeles sobre la pantalla.

b) Inserta una lista ordenada que utilice numeración romana en minúsculas.

Apéndices


c) Inserta una lista desplegable que muestre siempre las cuatro primeras entradas de la lista.

d) Inserta un mapa de imagen que llamarás hola, usando el fichero foto.gif y que mostrará un texto, cuando el ratón 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) ¿Cuál será el aspecto que producirá el siguiente FRAMESET? Supondremos que las páginas van sobre fondo blanco a una resolución 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 código HTML que daría como resultado lo que observas a continuación. Sabemos que el ancho de la tabla es de 400 píxeles 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 código 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.

Apéndices


Programa de la asignatura

Asignatura: INFORMATICA DE GESTION II

Titulación: DIPLOMADO EN TURISMO

Ciclo: 1° Curso: 2° Cuatrimestre: 2°

Tipo de materia: OPTATIVA

Créditos: 4.5c Teóricos: 2.5c Prácticos: 2c

Conocimientos previos recomendables:

Los vistos en la asignatura INFORMATICA DE GESTION I

Programa de Teoría

1. Internet y sus ventajas para el sector turístico

- Servicios y guías de información al turista vía Internet: alojamiento, gastronomía, medios de transporte, agencias de viajes, etc.

- Búsqueda de información y reservas

- Internet desde el punto de vista de las agencias de viajes y empresas turísticas

2. Diseño de sitios Web turísticos

- Características de un buen sitio Web

- Elementos de un sitio Web

- Publicidad y promoción en Internet

3. Tecnologías para la creación e implantación de sitios Web

- Programas de creación de paginas Web

- El lenguaje HTML

- Tecnologías y métodos para dotar de interactividad y de elementos multimedia de una pagina Web

4. Comercio electrónico

- Nuevas oportunidades de negocio



- Intercambio Electrónico de Datos (EDI): aspecto clave del comercio electrónico

- Modalidades de pago en Internet

- Seguridad en la Web

- Seguridad en la transacción

- Nuevas tecnologías para el comercio

Programa de Prácticas

1. Acceso a servicios turísticos en Internet

- Búsqueda de información turística (alojamiento, medios de transporte, etc.)

- Acceso a un sistema de reservas

- Sistemas de reserva en línea mediante paginas dinámicas

2. Edición electrónica básica

- Diseño de una pagina personal / empresa turística

- Edición de código HTML

- Introducción de texto, enlaces y marcadores

- Inserción de imágenes GIF y JPEG

- Tablas y formularios

- Inserción de elementos multimedia e interactividad en las paginas Web

3. Conexiones remotas

- Acceso identificado mediante conexión segura

- Transferencia de ficheros vía FTP

- Alojamiento y recursos on-line, en beneficio de una web.

Bibliografía de la asignatura

• Amoroso, E. y Sharp, R. "Seguridad en Internet e Intranet". Prentice-Hall, Madrid 1997.

Apéndices


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

• Emery, V. "Negocios en Internet. Expansión y crecimiento". Anaya, 1998.

• Heid, J. "Los secretos de HTML y la creación de paginas Web". Anaya Multimedia, 1997.

• Caso, E. y otros "Informática 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

Evaluación

La forma de evaluar al alumno tendrá en cuenta su asistencia y participación en clase, así como:

• Un 25% de teoría. Se contabiliza con un máximo de 3 puntos (multiplicados por 2’5 / 3) del examen parcial y trabajo optativo de clase.

• Un 75% de prácticas. Se contabiliza con un máximo de 5 puntos (multiplicados por 7’5 / 5), incluyendo en este apartado la entrega de las prácticas mediante conexión remota.

El total de la nota se obtendrá de la suma de las dos calificaciones anteriores. Notable a partir de 8

Ejemplo: Teoría 2.1 y prácticas 3.9 dan como resultado (1.75 + 5.85 = 7.6) Aprobado



Requisitos mínimos de la WEB practica

La nota de prácticas consiste en la realización, 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 mínimo los siguientes elementos:

1. Imágenes que hayan sido tratadas fotográficamente:

• Tamaño, resolución y formato adecuados a la web

• Modificación de la composición; efectos gráficos.

2. Enlaces internos, relativos y externos

3. Numeraciones y listas

4. Tablas

5. Formularios (con el máximo número de elementos distintos)

6. Marcos de páginas

7. Mapas de imagen

Opcionalmente para una mayor calificación, se puede incluir:

• Imágenes animadas

• Iconos propios

• Audio o video

• Applets o elementos Flash

• Javascript u Hojas de estilo

Junto a lo anterior se valorará además:

- la presentación: equilibrio de colores, originalidad, etc.

- el contenido: información y servicios ofrecidos al cliente

- la facilidad de navegación de la web: que el cliente no se pierda, que encuentre la información fácilmente, etc.

- la rapidez de carga: cada imagen no debe superar los 20K, ni debe haber un número excesivo de imágenes aunque ocupen poco.

- La complejidad: web debe tener como mínimo tres niveles jerárquicos y no menos de tres páginas por nivel.

-

Apéndices


Transferencia segura mediante SSH

En esta sección hablaremos de unas de las partes más importantes en cuanto a la finalización de las prácticas: el envío de vuestros trabajos.

La página web será un trabajo —individual o por parejas— en el cual demostrareis vuestros conocimientos de HTML, sin embargo para esta asignatura iremos un poco más allá haciendo nosotros mismos que esos ficheros funcionen en un servidor web que está conectado las 24 horas para favorecer la visualización de nuestras páginas en cualquier parte del mundo y a cualquier hora del día. 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 prácticas. Posteriormente se moverán todas las webs a la dirección http://lsi.ugr.es/rosana/gestión2 y las que ahí estuviesen antes, se moverán a una carpeta asociada con su curso académico.

Entre las características del servidor tamen, está que utiliza Apache como software servidor, el cual está instalado sobre un sistema operativo Linux cuya distribución gratuita y de libre distribución es OpenSuse 1.13. ¿Por qué digo todo esto? Pues porque no es lo mismo que nuestros archivos estén finalmente en un servidor Windows que en un servidor Linux. Lo más característico de esta distinción es que Windows no es sensible a mayúsculas y minúsculas y Linux sí lo es. Por tanto si no hemos tenido cierta precaución en el tema del nombrado de nuestros ficheros es muy posible que haya confusiones entre el código html y los recursos que forma parte de nuestra web. Por ejemplo supongamos el siguiente código del fichero Cocina.html:

Requiere para funcionar que el recurso-carpeta Fotos exista, y que dentro aloje al fichero llamado FotoComida.gif. Este código lo hemos podido hacer en casa, teniendo la siguiente situación:



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 erróneos pueden o no verse bien. Para tener una garantía de que algunos errores los podremos eliminar, deberemos usar siempre en el código el mismo nombre de recurso que vemos en nuestro sistema de ficheros. Y mucho cuidado con las imágenes bajadas de Internet, ya que en muchos casos vienen con la extensión en mayúsculas (ej. Mickey.JPG) y si no tenemos activa la opción de mostrar extensiones, nunca nos daremos cuenta de porqué nos falla la página web que solicita el recurso Mickey.jpg

La página web será un conjunto de ficheros y carpetas. Entregarlas para su evaluación implica subirlas (upload) al servidor tamen. Por tanto no son válidas las fórmulas de correo electrónico, 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 notaría como

[email protected]

¿Veis que parecido es esto a una dirección de correo? Es porque precisamente nuestro correo es un buzón 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 contraseña, para hacer uso de otros servicios proporcionados por el servidor debemos identificarnos. En el anterior ejemplo, el login es rosana y la contraseña es gñasjoit2qnjgah (no penséis que os lo voy a decir!).

Así pues necesitareis un usuario por cada práctica, que constará de un login y una contraseña. En clase se especificará los días habilitados para solicitar esta información por correo electrónico a [email protected]. Por ahora os baste saber que una vez que esté creado ese usuario, automáticamente se tendrá un espacio web en la siguiente dirección o URL (cada uno el suyo):

http://tamen.ugr.es/~login

Como es normal a esa dirección 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).

Apéndices


El cliente de transferencia segura por SSH lo tenéis disponible en mi página web bajo el enlace Cliente SSH.

Una vez instalado os dejará en el escritorio dos enlaces, uno para el servicio de inicio de sesión 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 práctica; 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 información. Es importante que veáis que este programa permite una comunicación bilateral y es igualmente fácil hacer una descarga como una subida de información. 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 conexión (botón Quick Connect de la imagen siguiente) proporcionando nuestros datos: primero el login, y después de presionar el botón Connect el



password. Nos saldrán 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 sólo nos queda una cosa más 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 ratón). El directorio en cuestión 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 sería del todo válido, 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 imágenes. Si hubiese que solucionar algún problema, os conectáis las veces que sean necesarias al servidor para reemplazar ficheros.

Guiones de prácticas


Tema VII. Guiones de prácticas

Sesión 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 imágenes incluidas en la práctica.

Junto a las imágenes se encuentra un ejecutable con un software sencillo de manipulación de imágenes. Realmente este programa hace algo más que el Paint y ocupa muy poco. No podemos instalarlo en el aula por lo que visitamos la página web http://www.picnik.com que incluye gratuitamente un software de retoque y edición de imágenes. No tiene, sin embargo, uso del portapapeles, por lo que operaciones como copiar y pegar no están disponibles. Para esta acción tuvimos que usar Paint (por no tener otro programa en Windows).

El guión propone una serie de ejercicios, que tienen un único objetivo. Aprender que:

1. Cambiando el tipo de archivo (la extensión o formato) se obtienen resultados muy dispares en cuanto a tamaño del archivo (KB en disco). Se da un fichero original.png para que lo paseis a jpg y gif y comprobareis diferencias en tamaño de archivo y calidad visual.

2. Es necesario redimensionar las imágenes procedentes de cámaras de fotos, por eso se incluye una foto con un paisaje para que encontréis el valor óptimo de resolución.

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:

• Según el guión: 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 estén 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 compañeros han simulado distintos tamaños del icono a tirar.

4. Podemos añadir texto a la imagen. Picnik incluye muchos tipos de letra, y posibilidad de cambiar el color. Cuando lo añadimos 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 además podemos decidir la calidad de imagen (10 máxima calidad, poca compresión, 1 muy mala calidad y tamaño en disco reducido al máximo). Por defecto suele venir al 7 o al 8. Uno de los ejercicios pide que se guarde la imagen con una compresión severa para que podáis comprobar visualmente que la imagen resultante tiene muchas pérdidas con respecto a la original.

Sesión 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 sólo es válido por 30 días) por lo que únicamente debemos aceptar usando el botón 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 múltiple en dichos archivos con una única operación. Esto será muy útil para reemplazar acentos y otros caracteres especiales (ñ) por los códigos html correspondientes.



• Podemos usar la opción de guardar todos. Los ficheros modificados (y marcados en rojo) quedarían en azul.

Abrimos la carpeta básico 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 sesión vamos a trabajar con los tres primeros ficheros.

1. main.html. En este fichero podemos observar la estructura típica de un documento html. Como nuevo elemento observamos los comentarios (en verde) que serán ignorados por el navegador. Ejercicio:

o Cambia el texto del título 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 alineación del párrafo 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 tamaño decreciente. Se quiere cambiar la alineación 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. También pido separar los tres párrafos con dos líneas horizontales.

Sesión 3

Desde EditPlus abrimos la carpeta básico 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 tamaños absolutos.

• Añádeles 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 código html apropiado para añadirlos.

• Si tú eres ERASMUS: Posiblemente tu nombre requiera el uso de caracteres especiales, localízalos y escribe tu nombre usando dichos códigos.

• Descarga una imagen desde Google Imágenes y guárdala dentro de la carpeta básico (al mismo nivel que el fichero que editas). Pon dicha imagen como fondo de la página.



Sesión 4

Desde EditPlus abrimos la carpeta básico y abrimos únicamente el fichero links.html. Algunos ejercicios se harán sobre este fichero y otros sobre páginas html nuevas.

En el fichero links.html

• Visualiza los enlaces externos comprobando que funcionan

• Añade 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 término bart simpson. Observa el tamaño de los ficheros en cuanto a resolución y según esta información descarga una imagen que sirva de fondo de página. Guarda la imagen en el directorio c:\ y si es necesario renombra el fichero para que sea fácil de escribir como recurso.

Descarga otra imagen que por ser de dimensiones más pequeña no pueda ser usada como fondo de página. Guarda la imagen en el directorio c:\ y si es necesario renombra el fichero para que sea fácil de escribir como recurso.

Crea un fichero nuevo desde la plantilla que obtenemos usando el menú File > New > HTML page. Modifica el título y el color de fondo y guarda este archivo con el nombre de enlaces.html (elige guardarlo en la misma carpeta básico).

• 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.



Sesión 5

La sesión 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 páginas estáticas HTML (algo así como lo que vais a hacer vosotros en practicas). Muchas de estas páginas no eran actualizadas frecuentemente, y hacían perder el interés del usuario. Después vino el éxito de los punto-com que eran webs más dinámicas (a veces llamadas Web 1.5) donde los sistemas de gestión de contenidos (Content Management System en inglés, abreviado CMS) servían páginas HTML dinámicas creadas al vuelo desde una actualizada base de datos. Ejemplo de web 1.5 es la página 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 estética visual eran considerados como factores importantes.

El término, Web 2.0 fue acuñado por Tim O'Reilly en 2004 para referirse a una segunda generación 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 folcsonomías, que fomentan la colaboración y el intercambio ágil de información entre los usuarios. Un ejemplo de este esta filosofía colaborativa es tutor2.ugr.es que contiene un apartado gráfico 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 información de la propia página 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.



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 cómo los dobles corchetes significan enlace, el asterisco lista y los tres signos menos una línea. El contenido del enlace equivale al nombre de la página, pero podemos tener distintas versiones del mismo fichero para hacer traducciones. Podemos modificar el texto del enlace usando el carácter pipe (|). Los enlaces en rojo indican que la página aun no ha sido creada.

Como ejercicio debéis seleccionar un país europeo y una ciudad de dicho país. Me la indicáis en clase para que no haya conflictos a la hora de guardar la página (esto lo iréis habiendo por turnos).

Entonces añadiremos la ciudad (y el país si no existe) y editaremos el contenido de la pagina referenciada (no la portada). Esto se hará buscando información de interés en Internet y preparándola para que tenga un formato texto. Grabaremos e iremos viendo los cambios aplicados en la wiki. La información a desarrollar de cada país/ciudad usa unas plantillas.

En el Editplus: copia la plantilla y rellenarla con la información de enlaces obtenido en Internet. Cuando tengas un contenido medio de información, llévatelo a la wiki (copiando y pegando) y dale formato con las herramientas de edición que traducen operaciones de formato en código wiki. Antes de guardar la página quizá sea mejor que me avises, por el hecho de que se han podido producir colisiones de edición sobre dicho contenido.

Plantilla para un nuevo país:



Capital: ''sustituir''

Language: ''sustituir''

EU member since ''año''

== 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]]



Sesión 6

Esta sesión 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 podrán 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.

Sesión 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. También 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>. Además, modifica el <caption> para que se muestre centrado.

2. Observa la captura de tabla de la página 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 alineación y color de fondo (lightgray) se ha indicado mediante el uso de las etiquetas <colgroup> y <col>, y los atributos span, bgcolor y align.



Si tienes dudas sobre cómo 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 cómo influyen.

Ahora trabajaremos el fichero table.html y le añadiremos 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, tamaño del texto 80%, color de fondo celeste, ancho de borde de 3,y color de borde azulón.

• Poner las filas con la propiedad de subrayado y alineación centrada

• Poner las celdas de cabecera a tamaño de texto 10 puntos y color azul.

• Poner el <caption> centrado y sobre la tabla



Sesión 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 círculo) y conviértela en una lista numerada con romanos en minúsculas.

2. Cambia la lista ordenada de los hombre más ricos del mundo por una lista de definición. El término es el nombre del personaje y la definición es un enlace externo a una bibliografía suya (da igual en qué idioma). Tienes un ejemplo de lista de definición en este mismo fichero html.

Con el fichero olist.html:

1. Este fichero cuenta con 5 listas anidadas. Cambia las que tengan numeración alfabética (A, B, C o a, b, c) por una lista desordenada que emplee el icono de cuadrado.

2. Añade una regla de estilo para la etiqueta <OL> que modifique la numeración 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 numeración y/o viñeta con la propiedad list-style-type: circle, por ejemplo.

Con el fichero map.html:

Vamos a introducir errores en el código 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.



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. Añade saltos de línea al final del fichero y comprueba que el movimiento de navegación arriba/abajo mejora.

2. Modifica el fichero ulist.html y añade tres puntos de navegación mediante enlaces internos. Llámalos: top, middle y bottom. Añade saltos de línea al final del fichero y comprueba que el movimiento de navegación arriba/abajo mejora.

Con el fichero links.html:

1. Añade al final de este ejemplo, un enlace al enlace interno rich del fichero internos.html.

2. Añade al final de este ejemplo, un enlace al enlace interno middle del fichero ulist.html.



Sesión 9

Una vez hayas descargado y descomprimido Editplus, crea un nuevo documento y guárdalo como formulario.html

Tu formulario debe quedar parecido (que no igual) a la imagen que se muestra a continuación. 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.

Añade debajo los botones Registrar su empresa (submit) y Cancelar todo (reset).



Sesión 10

En esta sesión vamos a trabajar con marcos. Todos los ficheros los generaremos con EditPlus.

1. Crea un fichero llamado amigo1.html que tenga como título el nombre de un amig@ tuyo. Después 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 deberás 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 creación y a la derecha un correo de contacto. Si quieres que se vean en la misma línea deberías 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 división en columnas: la primera el fichero list.html y el segundo una división en filas. Estas filas serán: 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 deberán 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.

Documents

Diseño y creacion de paginas web aplicado al sector turistico