Unidad 1: Introduccin al Diseo Web

Introduccin 1. Introduccin a la WWW 2. Introduccin a las Pginas Web 3. Sitio Web

Introduccin ......................................................................................................................... 3 1. Introduccin a la WWW ............................................................................................... 3 1.1. 1.2. 1.3. 2. Qu es Internet? ................................................................................................ 3 Cmo funciona Internet? ................................................................................... 5 Qu es WWW? .................................................................................................. 7

Introduccin a las Pginas Web .................................................................................. 8 2.1. 2.2. 2.3. 2.4. 2.5. 2.6. 2.7. 2.8. 2.9. 2.10. Sitios Web y Pginas Web .................................................................................. 8 Webs Estticas y Webs Dinmicas ..................................................................... 9 Qu es FTP? ................................................................................................... 11 Dnde estn los sitios y Pginas web? ........................................................... 11 Qu son los Hipervnculos?............................................................................. 13 Qu es un Explorador o Navegador? .............................................................. 15 Qu es el correo electrnico?.......................................................................... 16 Lenguajes para la Web ...................................................................................... 17 Qu es HTML? ................................................................................................ 18 Elementos de una Pgina Web ......................................................................... 18

3.

Sitio Web.................................................................................................................... 19 3.1. 3.2. 3.3. 3.4. 3.5. 3.6. Definicin de un Sitio Web................................................................................. 19 Planificacin de un Sitio Web ............................................................................ 20 El sitio local ........................................................................................................ 21 Comunicacin con el Servidor ........................................................................... 26 Gestin de Archivos en el sitio local .................................................................. 28 El Mapa del sitio................................................................................................. 31

Introduccin
En este tema trataremos de mostrar de forma clara y sencilla los elementos que componen las pginas web, as como las relaciones que existen entre ellos. Si queremos crear pginas web que funcionen correctamente y cumplan con los objetivos fijados debemos de conocer cmo funciona una pgina web exactamente y por qu.

En esta unidad didctica trataremos tres temas fundamentales en el Diseo Web: Qu es Internet y cmo funciona Qu es una Pgina Web, cules son sus funciones, as como sus componentes principales Qu es un Sitio Web y cmo interactuar con l desde el punto de vista del diseador web

Introduccin a la WWW
En este apartado trataremos de explicar qu es Internet, cmo surgi y cmo hemos llegado hasta lo que es actualmente, desde sus orgenes a la actualidad.

En este apartado trataremos de dar solucin a cuestiones que en muchas ocasiones no nos planteamos, pero que pueden resultar imprescindibles si pretendemos crear y disear pginas webs: Cmo se comunican los ordenadores entre s?, qu sucede cuando escribimos una direccin en nuestro navegador? o qu ocurre cuando pinchamos en una parte concreta de una pgina web?

Qu es Internet?
En informtica, una red no es ms que un conjunto de ordenadores conectados entre s con cables o vas de radio; de este modo pueden compartir informacin y recursos.

Ordenadores conectados en red

Ahora imagine que conectamos entre s muchos de las pequeas redes locales que existen en el mundo, incluyendo, adems, todos los ordenadores individuales que hay en la mayora de casas de todo el mundo, algo as es Internet, y por ese motivo se le denomina red de redes, ya que todos los ordenadores de la tierra que tengan acceso a Internet pueden compartir informacin, mensajes, archivos, imgenes, msica y casi todo lo que se le pueda ocurrir.

Red local e Internet

Pero, cmo se ha creado Internet?

Todo comenz en la dcada de los 70 al ampliar una red inicial de ordenadores creada por el departamento de defensa de los Estados Unidos, la cual fue objeto de ampliaciones sucesivas y cuya caracterstica especial era que, en caso de ataque y destruccin de alguno de los ordenadores de la red, la informacin poda transferirse por otros caminos alternativos, es decir, a travs de otros ordenadores.

ARPANET: Primera red de computadoras

En 1984, lo que hasta entonces haba sido una red de ordenadores dedicada a la investigaciones cientficomilitares comenz a ser utilizada por la comunidad acadmica. En 1987 ya haba mucha gente utilizando esta red, y no precisamente para la investigacin acadmica, momento en el que se redimension para poder acceder ms rpidamente gracias a los mdems y a los ordenadores ms veloces, lo cual permiti abrir la red a la utilizacin por parte de investigadores universitarios, agencias gubernamentales e incluso organizaciones internacionales dedicadas a la investigacin, con la nica condicin de pertenecer a pases aliados de EEUU. Finalmente, en los 90 la red o Internet, como se la conoce hoy en das, se abri para todo aquel que descara conectarse. As pues, Internet es una red global de equipos informticos que se comunican mediante un lenguaje comn. Podramos compararlo al sistema de telfonos internacional, en el que nadie posee ni controla todo el conjunto, pero est conectado de forma que funcione como una gran red.

Internet: Red de redes

Cmo funciona Internet?

Ya sabemos que Internet es una red de ordenadores; enorme, pero una red, a fin de cuentas. Evidentemente, estos ordenadores necesitan un lenguaje para poder entenderse entre s; pues bien, a este lenguaje propio se le denomina TCP/IP, que ms que un lenguaje propiamente dicho es un protocolo de comunicaciones que entienden todos los ordenadores conectados a Internet. Para que cada ordenador se identifique en la red y se diferencie del resto de ordenadores, dispone de un nombre nico y exclusivo al que se le denomina IP, que no es ms que un conjunto de cuatro nmero separados por puntos, cada uno de los cuales puede tomar valores que oscilan entre 0 y 255 (Ej: 192.47.17.3). Pero imaginaros que queremos visitar una pgina web, sera muy complicado recordar la direccin IP de cada uno de los lugares que queremos visitar, no? Pues bien, existe una forma ms sencilla de identificar cada ordenador dentro de la red, se trata del nombre de dominio, que est formado a base de palabras identificativas separadas por puntos, por ejemplo: www.google.es, www.yahoo.es o www.terra.es. Los encargados de traducir los nombres de dominio a direcciones IP son unos servidores (ordenadores centralizados) de nombres DNS (Domain Name Servers).

Todo esto est muy bien, pero surgen algunas preguntas: cmo viaja la informacin en Internet? Cmo es posible que me llegue la informacin con tal velocidad aunque venga de la otra parte del mundo? Vamos a intentar explicarlo de la forma ms sencilla posible:

1. Como hemos visto, Internet est formada por redes que se conectan entre s a travs de vas de diversa capacidad. Cuando un ordenador se conecta a Internet tiene acceso a esas vas de comunicacin y, en consecuencia, puede consultar y enviar informacin a cada uno de los ordenadores conectados en cualquier parte del mundo. El protocolo TCP/IP que hemos mencionado antes divide la informacin en paquetes y la hace llegar a su destino a travs de diversos elementos de hardware y lneas de comunicacin. 2. Aunque tambin se utiliza la conexin directa de redes de rea local, el acceso a Internet se realiza normalmente a travs de un mdem conectado a un proveedor de Internet, es decir, nuestro ordenador, a travs de un dispositivo electrnico denominado mdem se pone en contacto con un ordenador ms grande y potente que regenta una empresa como puede ser Telefnica, Orange, Jazztel, Dicho ordenador es el que est realmente conectado a Internet y, a travs de l, es por donde accedemos a la red. 3. Las redes pueden ser de muchos tipos y estar interconectadas de muchas formas diferentes. Elementos importantes de interconexin son, por ejemplo, los HUBS, que unen grupos de ordenadores y permiten su comunicacin; los PUENTES, que unen redes de rea local y los GATEWAY, que traducen datos de un tipo de red a otro. Por otra parte disponemos de los ROUTERS, que ponen en contacto las distintas redes de forma que, tras analizar los paquetes de datos que les entran, los distribuyen de la forma ms eficiente posible. Normalmente, un router enva informacin a otro router y as sucesivamente hasta su destino. Lo importante de esto es que si alguno de los routers deja de funcionar, la informacin sigue otro camino diferente, es decir, el router es capaz de redirigir los paquetes de informacin por otra va alternativa hasta que lleguen a su destino final.

Ordenadores conectados a su proveedor de Internet

4. La unin de redes de rea local que existen en una zona geogrfica concreta se denomina red regional o red de nivel medio, viajando la informacin entre ella bajo la supervisin de los routers. Si la distancia a recorrer es muy levada, entonces se utilizar repetidores que amplifican la seal evitando as un debilitamiento de los datos transmitidos.

5. Finalmente, las peticiones o envos de informacin que van ms all de las redes de nivel medio se dirigen a lo que se denomina Punto de acceso a red o NAP (Network Access Point). La conexin entre estos puntos de acceso a red se realiza a travs de lneas de muy alta velocidad. Los datos llegan de este modo a otro punto de acceso a red que los distribuye a redes regionales que, a su vez, los transmite a redes de rea local o, por medio de un proveedor de acceso a Internet, a un usuario particular.

Qu es WWW?
Estamos acostumbrados a ver las siglas www antes del nombre de la direccin de una pgina web, pero qu significa? Estas siglas corresponden a World Wide Web, que significa algo as como Telaraa de Cobertura Mundial. El www o Web consiste en un conjunto de servicios basados en un sistema hipermedia, o lo que es lo mismo, un sistema que permite mostrar informacin a travs de programas, texto, grficos, audio, vdeo, animacin o imagen. De este modo la web proporciona una interfaz grfica por la que es fcil desplazarse para buscar documentos en Internet. Estos documentos, as como los vnculos entre ellos, componen una red de informacin. La web permite saltar mediante un hipervnculo de una pgina a otra, es decir, en una pgina podemos encontrar enlaces a otras pginas que pueden pertenecer al mismo sitio web o a otros sitios diferentes.

Se suele hablar de explorar una web o visitar nuevos sitios. Explorar o navegar significa seguir los hipervnculos entre pginas y temas sobre los que es posible que nunca antes se haya odo hablar, conocer a gente, visitar nuevos lugares y aprender acerca de cosas de todo el mundo. Es usual comenzar en una pgina localizando algn tipo de informacin y, una vez localizada, acabar en pginas de temas diferentes gracias a los vnculos que se nos ofrecen.

Introduccin a las Pginas Web

Ahora que ya sabemos un poco ms sobre Internet, sus protocolos de comunicacin y los elementos que intervienen en sta es hora de saber ms sobre las Pginas Webs, qu son, cules son los elementos principales que debemos de tener en cuenta o cmo llegan estas pginas a nuestro ordenador. En este tema abarcaremos una serie de conceptos que debemos de tener muy claros antes de empezar a disear nuestra propia pgina web. Qu es un Sitio Web?Qu necesitamos para crear nuestro propio sitio web? Qu es un alojamiento?

Sitios Web y Pginas Web

Al igual que los libros tienen una estructura concreta con el fin de facilitar la consulta al lector (portada, ndices, captulos ordenados, etc.), cuando vamos colocamos en Internet algn tipo de informacin para que todas las personas interesadas la consulten, tambin debe de contar con una estructura que facilite la lectura y comprensin. Si por ejemplo queremos crear una pgina web sobre un determinado tema debemos de contar con una pgina web principal a travs de la cul podamos acceder al resto de pginas y, desde stas, debemos de poder volver a la pgina principal. El sitio Web ser todo el conjunto de pginas que hayamos creado, el cual estar formado por una pgina principal y una serie de pginas secundarias a las que se podr acceder mediante hipervnculos. Cada pgina web, incluida en la pgina principal de un sitio web, tiene una direccin exclusiva llamara URL (Universal Resource Locator). Podramos imaginar que la web es como una gran biblioteca en la que los sitios web seran los libros y las pginas web pginas concretas de esos libros. Las pginas pueden contener noticias, imgenes, pelculas, sonidos, grficos en 3D, animaciones y cualquier otra cosa que se nos ocurra.

Webs Estticas y Webs Dinmicas

Lo primero que debemos de tener en cuenta a la hora de crear o disear una pgina web es el propsito para el que se va a crear esta web. En funcin de la funcionalidad que se le vaya a dar la web, podemos elegir entre una web esttica o una web dinmica, pero, qu diferencia hay entre ellas? Cules son las ventajas e inconvenientes de cada una de ellas?

Web Esttica
Estas webs estn enfocadas principalmente a mostrar una informacin fija, donde el internauta obtiene una informacin, sin que pueda interactuar con la pgina que est visitando. Estn constituidas en su mayora con hipervnculos o enlaces (links) entre las pginas que componen el sitio. Estas pginas generalmente tienen una extensin .htm o .html. Esta es una opcin ms que suficiente para aquellos sitios web que simplemente ofrecen una descripcin de su empresa, quines son, dnde estamos, servicios, etc. ideal para empresas que no quieren muchas pretensiones, simplemente informar a sus clientes de sus productos y perfil de empresa.

Algunos ejemplos de webs dinmicas son los siguientes: Webs informativas. Este tipo de pgina solamente ofrecen informacin acerca de un tema determinado, como por ejemplo una pgina donde se explique el teorema de Pitgoras. Generalmente nunca se actualizan. Currculums. Es una opcin que se ha puesto de moda ltimamente y consiste en que una persona crea una pgina web donde figura su currculum vitae para que pueda consultarlo cualquiera que est interesado. Web Quest. Son pginas creadas por profesores con una finalidad educativa. En ellas se propone un tema de estudio con una serie de cuestiones que los alumnos deben responder. Al mismo tiempo en la misma pgina hay una serie de vnculos relacionados con el tema que se haya elegido para que los alumnos puedan investigar para poder responder a las preguntas propuestas. Blog. Es un sitio donde se recopila de forma cronolgica mensajes de uno o varios autores sobre un tema determinado.

Ventajas e inconvenientes
La principal ventaja de este tipo de pginas es lo econmico que resulta crearlas, con un diseo vistoso incluyendo imgenes y texto con el cual informar a los internautas. Se pueden crear fcilmente sin necesidad de conocer ningn tipo de programacin especial (php, asp, etc.) El mayor conveniente de las webs estticas reside en lo laborioso que resulta su actualizacin as como la prdida de potentes herramientas soportadas con bases de datos, como puede ser la creacin de registros histricos de los clientes, pedidos on-line, etc.

Webs Dinmicas
Estas pginas webs son aquellas cuyo contenido es generado a partir de lo que un usuario introduce en un formulario. El contenido de la pgina al contrario de lo que suceda con las webs estticas, no est incluido en un archivo del tipo .htm o .html, sino que lo est en archivos del tipo .php, .asp o .jsp. Las aplicaciones ms conocidas de pginas web dinmicas son: Mostrar el contenido de una base de datos, basndose en la informacin que solicita el usuario a travs de un formulario de web. Actualizar el contenido de una base de datos Generar pginas web de contenido esttico Mejorar la interaccin entre el usuario y el sitio web

Ventajas e inconvenientes
Una de las grandes ventajas que presenta este tipo de pginas es que si parte de la informacin que contiene se encuentra en una base de datos, su actualizacin es muy sencilla ya que bastar con introducirla en la base, no siendo necesario volver a crear una nueva pgina. Uno de los inconvenientes que presentan las webs dinmicas es que es necesario conocer algn lenguaje de programacin orientado a pginas web como puede ser php, asp, etc.

10

Qu es FTP?
Seguro que en algn momento habr odo hablar de cosas como Me bajo la msica que me gusta de Internet o Puedes descargarte el manual de uso de Internet. Pues bien, esto significa que gracias a Internet puedo copiar directamente a mi ordenador todo tipo de archivos sin necesidad de que me lo suministren en CD, DVD u otro soporte informtico. A este sistema se le denomina FTP (File Transfer Protocol) y es un servicio que Internet ofrece para enviar y recoger archivos a travs de la red, entre ordenadores conectados a la misma. Toda conexin FTP implica la existencia de una mquina que acta como servidor (aquella en la que se toman o dejan archivos) y un cliente.

Intercambio Cliente Servidor

Lo ms habitual es que los usuarios particulares utilicen los programas clientes de FTP para conseguir programas o datos guardados en servidores FTP. Los actuales navegadores tienen un cliente bsico de FTP, por lo que en muchos casos el proceso es transparente para el usuario. Se pueden enviar o recibir toda clase de archivos (texto, grficos, sonidos, video, etc.). As pues, a la accin de copiar archivos desde un servido FTP a nuestro ordenador se le denomina bajar o descargar.

Dnde estn los sitios y Pginas web?

En ciertas ocasiones son muchas las personas que se animan a crear su propia pgina web, pero una vez creada surge una duda, qu hago ahora con la pgina web?, qu tengo que hacer para poder verla desde Internet?, a dnde las tengo que enviar y cmo?

Pues bien, lo que hay que hacer es depositar esas pginas en un servidor, propiedad de una empresa proveedora de acceso a Internet y puede ser existen (Arsys, Hostinet, Nerion,). Todas estas empresas o entidades le necesarias, contraseas y dems datos necesarios para que usted pueda servidor.

que como ya hemos visto, es cualquier de las muchas que facilitarn las configuraciones alojar sus pginas web en el

11

Agentes Registradores de dominio.es

Actualmente desde las Administraciones Pblicas se estn llevando a cabo programas especficos y campaas para facilitar el acceso a las Nuevas Tecnologas y en especial el uso de Internet. Entre ellas podemos destacar la web www.dominios.es, que promueve la presencia digital en Internet a ciudadanos y empresas, y donde podemos encontrar toda la informacin necesaria sobre dominios y alojamientos, as como una serie de proveedores de servicios web registrados que nos ofrecen sus servicios a un precio asequible.

12

La forma de transferir nuestras pginas web al servidor se basa en el FTP comentado en el punto anterior. Mediante un programa gestor de FTP, como puede ser Cute FTP o el propio Dreamweaver que veremos posteriormente, y las claves de acceso que le proporcionar su proveedor web, podr acceder directamente desde su casa a una zona restringida del disco duro del servidor, lugar en el que colocar todas sus pginas web as como todas las imgenes y archivos que contenga su sitio web. Evidentemente, slo la persona encargada del mantenimiento podr acceder a su pgina web para modificarla, actualizarlas, cambiarla, etc. El procedimiento es muy sencillo, ya que una vez introducida la contrasea en la pantalla de su ordenador aparecer, a un lado el contenido de su disco duro y al otro el contenido de la carpeta que le han reservado. Mediante sencillas operaciones de arrastrar y soltar podr subir pginas y datos al servidor o bajar pginas y datos su ordenador. Una vez estn depositadas todas las pginas en el servidor, cualquier persona del mundo podr acceder a ellas introduciendo la direccin web de su pgina en el navegador.

Qu son los Hipervnculos?

Las pginas estn interconectadas en la web mediante hipervnculos, que son palabras y grficos que aparecen en las pginas y que al pasar el ratn por encima el cursor ste se convierte en una mano que nos permite acceder a otra pgina web o a otro lugar de la misma pgina haciendo un clic. Normalmente, siempre que al pasar el ratn por un lugar de la pgina, aparezca la mano, indicar que se trata de un hipervnculo. Dicho hipervnculo nos permitir acceder a otro lugar, web, imagen, archivo, etc.

13

14

Qu es un Explorador o Navegador?
Para poder visualizar pginas y navegar por la web necesitamos un programa capaz de visualizarlas y de entender el lenguaje en el que estn programadas. Efectivamente, explorar o navegar a travs de la web significa seguir los hipervnculos a diferentes pginas de la web. Algunos de los exploradores ms utilizados hoy en da son Microsoft Internet Explorer, Mozilla Firefox y Opera. Los exploradores nos permiten acceder a las pginas web, y una vez en ellas podemos utilizar sus herramientas para ir hacia delante o hacia atrs en las pginas, almacenar las direcciones en una lista de favoritos para no tener que volver a teclear las direcciones o buscar de nuevo, actualizar o recargar la pgina, etc.

.
Navegadores actuales

La mayora de los navegadores modernos nos permiten acceder a servidores de casi todos los dems servicios (e-mail, FTP, New, etc.), con lo que es posible moverse por Internet prescindiendo de la mayora de programas especiales para estos servicios; o lo que es lo mismo, podemos acceder a la mayora de servicios de Internet a travs de una sola aplicacin. As, por ejemplo, puede ser que la pgina web que estamos visualizando nos permita descargar un determinado archivo, aunque esto sera trabajo de un programa FTP, la pgina nos permite descargarlo con un solo clic sobre el hipervnculo.

15

Qu es el correo electrnico?
El correo electrnico o e-mail es la aplicacin ms sencilla y la ms usada de Internet. Gracias a l, cualquier usuario podr enviar y recibir mensajes a travs de la red. Las direcciones de correo electrnico son fciles de identificar y estn compuestas de tres partes: 1. 2. 3. El nombre que identifica al usuario El identificador @ denominado arroba El nombre del servidor en el que se encuentran los mensajes

Para enviar un e-mail tendremos que utilizar un programa gestor de correo electrnico como puede ser Outlook, Outlook Express o Eudora. Al redactar el mensaje deberemos hacer constar la direccin de correo electrnico del destinatario y podremos incluir, adems del texto del mensaje, imgenes y archivos.

Pantalla de gestin de correo de Outlook Express

Enviar un nuevo correo

16

Lenguajes para la Web

Otra de las preguntas que se hacen todos aquellos que quieren aprender a crearse su propio sitio web es, tengo que saber programar?, con qu programa se hacen las pginas web? No es necesario saber programacin para empezar a crear pginas web, existen programas como Dreamweaver que nos permiten crear pginas web casi sin darnos cuenta y sin saber programar. Una vez que ya sepamos crear pginas web con soltura podemos comenzar a programar cosas, utilizar lenguajes diversos, gestionar webs dinmicas y dems cosas ms difciles. Por qu se usan entonces lenguajes como HTML o JavaScript? Adems del lenguaje que utilizan las mquinas para comunicarse entre s (Protocolo TPC/IP) necesitamos un lenguaje con el que poder confeccionar las pginas web que deseamos colocar en Internet. Toda pgina web se compone de un cdigo en uno o varios lenguajes, y una serie de imgenes para las que tambin utilizaremos determinado cdigo, a fin de que forme parte de nuestra pgina cuando sta se cargue en un navegador. El cdigo nos sirve bsicamente para disear la distribucin de las pginas y definir, llamar o soportar otros elementos: texto en todos sus formatos, scripts, hojas de estilo, enlaces, imgenes, etc. Sin embargo, hay programas como Dreamweaver que crea este cdigo por nosotros de forma transparente, para que no tengamos que dedicarnos a programar; no obstante, no est de ms conocer algo de lo que hay detrs, ya que eso nos permitir comprender correctamente determinadas reacciones de Dreamweaver.

Este cdigo no es otra cosa que un lenguaje de programacin como puede ser HTML u otros lenguajes superiores como Java, JavaScript, XML o PHP. Para crear el cdigo de una pgina web, podemos utilizar una combinacin de los lenguajes anteriores o bien crear la pgina web con uno slo, depende de lo que queramos o precisemos en cada momento. Sin embargo, normalmente siempre encontraremos alguna etiqueta de HTML en el cdigo de una pgina que se haya escrito en alguno de los otros lenguajes. Por lo tanto, podemos decir que HTML, adems de permitirnos crear pginas utilizando nicamente sus elementos, sirve de soporte a pginas creadas utilizando otros lenguajes de programacin.

17

Qu es HTML?
El lenguaje HTML se basa en el uso de etiquetas tambin llamadas marcas, directivas o comandos (tags). Estas etiquetas son fragmentos de texto delimitados por los smbolos < (menos que) y > (mayor que). Bsicamente, estas etiquetas indicarn al navegador la forma de representar los elementos (texto, grficos, etc.) que contiene el documento. Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del documento hay dos zonas bien diferenciadas: el encabezado, delimitado por <head> y </head>, que sirve para definir diversos valores vlidos en todo el documento; y el cuerpo, delimitado por <body> y </body>, donde reside la informacin del documento. La etiqueta <title> permite especificar el ttulo de un documento HTML. Este ttulo no forma parte del documento en s y no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como ttulo de la ventana del programa que nos la muestra. El cuerpo del documento HTML contiene el texto que, con la presentacin y los efectos que se decidan, se presentar al visitante.

La estructura bsica de un documento HTML es la siguiente:

<html> <head> <title>Ttulo </title> </head> <body> Texto del documento, menciones a grficos, enlaces, etc. </body> </html>

Elementos de una Pgina Web

Mediante las pginas web podemos comunicar al resto del mundo nuestros contenidos de muchas formas diferentes. A continuacin se detallan algunos de los elementos ms comunes que podemos encontrar en las pginas web. Texto: El texto constituye el tipo de contenido ms simple que se puede publicar en la web. Su gran ventaja consiste en que prcticamente todo el mundo puede verlo independientemente del tipo de navegador que utilice y, adems, se descarga rpidamente. Mediante Dreamweaver podemos cambiar el tamao, color y tipo de letra, organizarlo en prrafos, cabeceras, listas, etc. Imgenes: Mediante un escner, una cmara digital o directamente desde Internet podr obtener fotografas, dibujos, logos y cualquier otra cosa que se le ocurra y luego guardarlos en la web con programas con Adobe Photoshop, Macromedia Fireworks, Corel Draw, etc. A partir de ah, podemos ubicar esas imgenes en nuestra pgina web mediante DreamWeaver. Las imgenes contribuyen a crear pginas ms atractivas y complementan la informacin que transmiten mediante el texto. Sonido: Son archivos generalmente en formato MIDI, WAV y/o MP3 Flash: Son ficheros que reproducen animaciones Shockwave: Es un plugin que permite la reproduccin de contenidos interactivos como juegos, aplicaciones de formacin, presentaciones, etc.

18

Hipervnculos: Es un texto o una imagen que est asociada con otro archivo, pgina web o zona de la misma web, de modo que haciendo clic sobre ese texto o imagen accedemos directamente a esa informacin. Usualmente, los hipervnculos enlazan con otras pginas web, pero tambin se utilizan para enlazar con otros lugares de la misma pgina o con otros tipos de archivo. El texto de los hipervnculos aparece normalmente coloreado o subrayado. Igualmente, es posible crear imgenes que luego podrn actuar como hipervnculos. Tablas: Las tablas permiten organizar informacin en columnas y filas dentro de la pgina web. Mediante las tablas podemos organizar texto, imgenes, formularios y otros elementos. Si se ocultan los bordes de las tablas podremos utilizarlas como un elemento invisible para organizar los elementos de la pgina. Los comandos de Dreamweaver nos permite crear tablas de todo tipo con mayor o menor complejidad. Marcos: En una pgina web con marcos, la ventana del explorador est dividida en varias zonas rectangulares y es posible cargar diferentes pginas web en cada una de esas partes. Los visitantes de este tipo de pginas pueden desplazarse a travs del contenido de cada marco independientemente del contenido que aparezca en el resto de marcos. Se pueden crear hipervnculos que abran nuevas pginas en otros marcos. Formularios: Los formularios permiten a los visitantes de una pgina enviar informacin al propietario de la pgina. Normalmente esta informacin es enviada a una direccin de correo electrnico. Dreamweaver le permite crear formularios que incluyen campos de texto, casillas de verificacin, grupos de opciones, mens de lista, etc. Elementos avanzados: Dreamweaver nos ofrece la posibilidad de incluir o aplicar en nuestra pgina web otros elementos tales como hojas de estilo, para conformar el texto; capas, para superponer contenidos en una pgina; programacin en JavaScript, para aadir interactividad al sitio; clips de sonido, vdeo y, por supuesto, animaciones de Flash.

Sitio Web
A la largo de esta unidad didctica ya hemos visto una serie de concepto claves en el diseo web, como son Internet y su funcionamiento, as como las caractersticas y elementos principales que componen una pgina web, pero an nos queda un apartado muy importante, dnde se guardan todas las pginas webs y archivos que componen nuestro sitio web y cmo se gestiona.

Definicin de un Sitio Web

Un Sitio Web tiene dos definiciones diferentes, dependiendo de si nos referimos al lugar web en el que se guarda o a la agrupacin de pginas web que lo componen:

Un sitio web es un conjunto de documentos y archivos vinculados con atributos compartidos, como temas relacionados, un diseo similar o un objetivo comn (nuestra pgina web en conjunto)

El trmino sitio se emplea para referirse a una ubicacin de almacenamiento local o remota de los documentos pertenecientes a un sitio web, controlar y mantener vnculos y administrar y compartir archivos, por lo que, sitio web es el lugar web en el que se almacenan una serie de documentos (servidor web)

19

Planificacin de un Sitio Web

Al igual que antes de construir una casa debemos contar con un proyecto a base de planos, presupuestos y caractersticas de los materiales, a la hora de realizar una pgina web debemos planificarla antes de comenzar a aadir elementos. As pues, debemos tener claro el nmero de pginas que va a contener, qu va a aparecer en cada una de ellas, etc. De este modo, tendremos la seguridad de que el sitio terminado tendr un buen aspecto y gozar de una buena organizacin. Si disponemos de un sitio web propio, podemos mostrar a nuestros posibles clientes lo que podemos ofrecerle. Pero debemos procurar que el sitio web est bien diseado, ya que las pginas demasiado lentas dificultan la navegacin y los enlaces que no se abren provocan la desmotivacin de los visitantes.

Aspectos a tener en cuenta a la hora de disear un sitio web: Definir objetivos. Es la primera pregunta que debe realizarse a la hora de disear un sitio (Qu queremos conseguir?), ya que el resto de pasos a seguir dependern en buena medida del objetivo final. Si lo que queremos es disear una pgina dedicada al cine en la que aparecer el cartel de la pelcula, los actores protagonistas, el director, la duracin, el tema, la sinopsis y una breve crtica slo necesitaremos una pequea base de datos y una carpeta que contenga las imgenes de los carteles de las pelculas. En cambio, si la web va a estar dedicada a la venta de artculo (tienda virtual), adems de disponer de una base de datos con los artculos que vende y una carpeta con las imgenes de los productos, debemos de disponer de otra base de datos en la que se almacenen los datos de los clientes, una cuenta de correo para recibir los pedidos, etc. Audiencia a quien va dirigida. Debemos de tener presente el perfil de nuestros visitantes, cules sern los clientes potenciales que visitarn la web. Se deber valorar el tipo de conexin que utilizarn, el navegador, el sistema operativo, etc. Aunque parezca una tontera no lo es, ya que si la persona que visita la web no dispone de un ordenador actual, utiliza un navegador desfasado o no dispone de una conexin de alta velocidad, puede suceder que la pgina tarde mucho en cargarse o no se vea correctamente. Estructura del sitio. Es recomendable organizar el sitio en diferentes carpetas, separando imgenes, archivos de sonidos, bases de datos, archivos de cdigo, etc. Planificar el diseo. Antes de empezar desarrollar la pgina es recomendable realizar algunos bocetos para ver cul es el que mejor se adapta a sus objetivos. De este modo podr comprobar a simple vista cul es el ms idneo. Diseo del esquema de navegacin. Debemos de tener claro cul ser el sistema de navegacin que va a emplear para facilitar al visitante el desplazamiento por las diferentes pginas del sitio. Tenga en cuenta que si el visitante en algn momento se siente perdido, es posible que abandone la pgina, en cambio, si le facilita la bsqueda por medio de ndices o mens tendrn mucho a su favor. Recopilacin de datos. Antes de empezar a desarrollar el sitio web es recomendable que disponga de todos los elementos necesarios como pueden ser las imgenes, los archivos de sonido, los archivos de estilo, las plantillas, los textos que aparecern en las pginas, etc.

20

Planificacin de una web sencilla

El sitio local
Un documento de Dreamweaver es cada pgina que se realice dentro de la ventana o rea de trabajo. Evidentemente, es posible crear una web de una sola pgina y enviarla al servidor para ponerla a disposicin de cualquiera que quiera verla conectndose a Internet. Sin embargo, lo ms usual es que el usuario cree una serie de pginas individuales enlazadas entre s. Lo normal es disponer de una pgina web principal que contenga todos los temas de que trata la web y desde la que podremos acceder a varas pginas para desarrollar cada uno de esos temas de forma individual. Por otra parte, tambin es frecuente agrupar en una sola carpeta todas las imgenes que aparecen en las diferentes pginas del sitio, agrupar en otra todos los archivos de sonido, etc. El propsito de todo esto no es otro que el de tener todas las cosas lo mejor ordenadas posible. En una web con pocas pginas puede no ser demasiado importante, pero en una web ms elaborada que contenga muchas pginas con mltiples interrelaciones, enlaces, formularios, elementos en movimiento, etc., la organizacin resultar vital para que el propietario de la pgina pueda editarla fcilmente, ya que en caso contrario, la posibilidad de perderse en una jungla de nombres de pgina, imgenes, plantillas, sonidos, etc. est ms que asegurada. Pues bien, al emplazamiento en el disco duro en donde se almacene el conjunto de documentos y archivos que conforman la totalidad de una web se le denomina Sitio local y sera muy interesante que defina un sitio local en su ordenador antes de empezar a crear pginas, grficos y dems elementos. Puede definir tantos sitios locales como desee, uno para cada web diferente que tenga en su disco duro.

21

Cmo se crea un sitio local con Dreamweaver?

Como ya hemos comentado, antes de comenzar a disear pginas webs es recomendable crear un sitio web, para ello debemos de seguir los siguientes pasos: 1. Una vez arrancado Dreamweaver, seleccionamos la opcin Sitio/Administrar sitios, y se nos abrir la ventana correspondiente.

2. Hacemos clic en el botn Nuevo y en el men flotante que aparecer seleccionamos la opcin Sitio. Se abrir el asistente para la definicin del sitio. Este asistente tiene dos pestaas, Bsicas y Avanzadas, asegrese de que est activa la pestaa Bsicas. En esta pestaa deber escribir el nombre que desea asignar al sitio y la direccin (URL) en donde se alojar su sitio en el servidor de Internet.

3. Pulse Siguiente para acceder a la segunda pgina del asistente. En este apartado nos pedir que elijamos una de las opciones, No, no deseo utilizar la tecnologa de servidor o S, deseo utilizar la tecnologa de servidor, seleccionamos la primera opcin, no utilizar la tecnologa de servidor, ya que no vamos a utilizar pginas web dinmicas creadas con tecnologa de servidor (esta opcin se seleccionar cuando utilicemos tecnologa de servidor del tipo PHP o ASP)

22

4. Pulse Siguiente y accederemos a la 3 ventana del asistente, en este punto debemos decidir entre crea y editar las pginas en nuestro ordenador para posteriormente subirlas al servidor o bien, editarlas directamente en el servidor. Seleccionaremos la primera opcin Editar copias locales en mi equipo y luego cargarlas al servidor cuando estn listas, tambin es el momento de especificar en qu carpeta del disco duro almacenaremos la pgina y los elementos de nuestro sitio web.

La carpeta del sitio deber ser especfica para ese sitio y no es recomendable utilizar la carpeta de la aplicacin Dreamweaver como raz del sitio. Es recomendable crear una carpeta llamada Sitios y, posteriormente, crear carpetas locales dentro de esta carpeta, una para cada sitio con el que trabaje.

5. Una vez seleccionada la carpeta destino, pulsamos Siguiente y accederemos a la siguiente ventana del asistente. Ahora hemos de indicar la forma de conectarnos con el servidor remoto para enviar la pgina junto con todos sus archivos.

23

Lo normal es realizar la transferencia va FTP, por lo que seleccionaremos esta opcin de la casilla desplegable. Una vez seleccionada esta opcin aparecern una serie de campos que deberemos de completar con los datos suministrados por la empresa gestora del servidor, y pulsamos el botn Conexin de prueba con el fin de verificar el correcto funcionamiento de nuestra conexin.

6. Pulsamos el botn Siguiente para continuar con la Definicin del Sitio, ahora es el momento de configurar el sistema de proteccin y desproteccin de archivos. Si trabajamos en un entorno de colaboracin o compartimos el servidor, debemos de Proteger los archivos para que ninguna otra persona del equipo pueda modificarlos.

24

7. Al pulsar el botn Siguiente nos aparecer la ltima ventana del asistente, en la que se mostrar un Resumen de los datos de configuracin del sitio que se ha realizado.

Si todos los datos que aparecen son correctos, procedemos a terminar la configuracin pulsando el botn Completado, y volver a aparecer la ventana Administrar sitios, donde se mostrar el nombre del sitio que acabamos de crear. Una vez creado un sitio podemos editarlo y modificarlo tantas veces como queramos. Cerramos la ventana a travs del botn Listo y automticamente, en el panel Archivos aparecer el nombre del sitio web que acabamos de crear y una carpeta (de momento vaca) en la que se irn incluyendo las pginas y elementos de nuestro sitio.

Con estos pasos ya hemos creado nuestro sitio local. Si necesitamos volver a editar un sitio slo tenemos que seleccionar la opcin Sitio/ Administrar sitios, seleccionamos el sitio y pulsamos Editar.

25

Comunicacin con el Servidor

Como ya hemos comentado, ser su proveedor de Servicios Web el que le proporcionar los datos de conexin con el servidor. Los datos para un sistema de transferencia FTP son los siguientes: SERVIDOR FTP: Podra ser algo as como ftp.e-oros.com, usuarios.tinet.org, etc. DIRECTORIO DEL SERVIDOR: es la carpeta del servidor donde se alojarn sus pginas y archivos, por ejemplo, \html, public_html, etc. USUARIO: es el nombre de usuario que le ha asignado su proveedor, por ejemplo, jloc, joseluis, etc. CONTRASEA: como su propio nombre indica es la clave para que nadie ms pueda acceder a los archivos de su web en el servidor.

Pantalla de configuracin de la conexin mediante FTP

Acceso a nuestro lugar en el servidor

Ya hemos configurado la conexin con el servidor, pero ahora falta conectar con l para poder llevar los archivos y pginas a la carpeta que nos han asignado en el disco duro. Para ello debemos acceder a la opcin Conectar al Servidor Remoto del panel Archivos.

Pantalla de Conexin con el Servidor

26

Si todo est correcto, en el panel se podr ver la carpeta del servidor donde podr alojar sus archivos, para ello debemos de tener seleccionada la opcin Vista Remota del desplegable de la derecha, en caso contrario nos mostrar los archivos y pginas pero del disco duro de nuestro ordenador.

Cmo subir los archivos hasta el servidor

Una vez configurada y creada la conexin con el servidor, as como nuestra pgina web y sus archivos, debemos de depositarlos en el servidor, para que todo el que lo desee pueda visitar nuestra web. Para el intercambio de archivos entre nuestro ordenador y el servidor utilizaremos el Panel Archivos: 1. Seleccionaremos la opcin Vista local para visualizar los archivos y pginas del sitio local de nuestro disco duro 2. Seleccionamos el icono Colocar y, tras realizar la conexin con el servidor y solicitarle permiso para colocar todo el sitio en dicho servidor, comenzar la transferencia de archivos desde el sitio local al sitio remoto. 3. Una vez terminada la transferencia de archivos (su duracin depender de su conexin a Internet y del tamao de los archivos) seleccionaremos la opcin Vista Remota y comprobaremos que los archivos ya est ubicados en la carpeta que tenemos disponible dentro del Servidor Web.

Cmo bajar los archivos desde el servidor

Para llevar los archivos existentes en el servidor hasta el sitio local de nuestro disco duro, hay que realizar el proceso inverso: 1. En la casilla de la derecha debemos de tener seleccionada la opcin Vista Remota para visualizar los archivos alojados en el servidor 2. Seleccionamos el icono Obtener Archivos y, solicitar conformidad, se realizar la conexin con el servidor y comenzar la transferencia de archivos desde el servidor al sitio local.

Modo expandido

27

Trabajar en modo expandido

La opcin Expandir/Contraer del men Archivo nos permite trabajar con el sitio remoto y el sitio local en una misma pantalla, lo que facilita muchsimo el intercambio de archivos entre ambos sitios, podemos hacerlo de la forma habitual (a travs de los iconos Cargar y Obtener) o simplemente arrastrando los archivos de un lado a otro. Junto con esta opcin aparecen otros iconos nuevos: Actualizar: Permite actualizar las listas de elementos que aparecen en los directorios local y remoto. Normalmente, esta operacin es automtica porque as est configurada por defecto en la pgina de Datos locales de la ventana de definicin del sitio (Opciones Avanzadas). Ver registro FTP del sitio: Permite ver un registro de las transferencias y actividad va FTP. Archivos del sitio: Muestra la estructura de archivos de los sitios locales y remoto en las dos mitades de la pantalla. Servidor de prueba: Muestra la estructura de directorios del servidor de prueba y del sitio local. Slo se utiliza para la creacin de pginas dinmicas Mapa del sitio: Muestra una representacin grfica del sitio basndose en los vnculos entre las pginas. Proteger y desproteger archivos: Permite proteger y desproteger archivos en el servidor.

Gestin de Archivos en el sitio local

Ya sabemos cmo subir y bajar archivos hacia y desde el servidor, ahora debemos conocer cmo crear los diferentes archivos que componen nuestra web y cmo manejarlos y controlarlos.

Cmo aadir archivos al sitio local

Cada pgina que se desee crear necesitar el correspondiente archivo, por ejemplo, si queremos crear una pgina principal y dos pginas secundarias, necesitamos crear tres archivos, uno para cada una de las pginas que compondrn la web.

Aadir Archivos al Sitio local

28

Establecer la pgina principal

Una vez creadas las pginas necesarias, debemos de decirle al programa cul va a ser la pgina principal (no es suficiente con darle el nombre que nos pida nuestro servidor web para tratarla como pgina principal). Para asigna a nuestra pgina index.html las propiedades de pgina principal debemos hacer clic con el botn derecho sobre la pgina en cuestin y seleccionar la opcin Establecer como pgina principal.

Cmo borrar archivos del sitio local

Para eliminar archivos basta con seleccin los elementos (de forma individual o por grupos) que deseamos eliminar y pulsar la tecla Supr o seleccionar la opcin Eliminar del men Archivo.

Cmo crear carpetas en el sitio local

Como ya sabemos, en un sitio no hay slo pginas, sino que tambin debe de contener todos los archivos que lleve asociados nuestra pgina (imgenes, sonido, video, documentos,), sera recomendable crear una misma carpeta para cada tipo de archivo. Para ello hacemos clic sobre la carpeta en la cual queremos aadirla y seleccionamos la opcin Nueva Carpeta que aparecer al pulsar el botn derecho del ratn.

29

Crear nuevas carpetas dentro del sitio local

Una vez creada la carpeta Imgenes debemos de incluir las imgenes que vamos a usar en nuestra web, para ello podemos hacerlo a travs de la opcin Insertar/Imagen, o directamente copiando la imagen y pegndola dentro de la carpeta que contiene todos los archivos de nuestra web en nuestro disco duro.

30

El Mapa del sitio

El mapa del sitio permite seleccionar pginas, abrir una pgina para editarla, aadir nuevas pginas al sitio, crear vnculos entre archivos y cambiar ttulos de pgina. El Mapa del sitio nos permitir conocer la relacin entre cada una de las pginas que conforman nuestra web.

Mapa de nuestro primera web

Mapa web de una web ya desarrollada

31