Tecnologas web

Planificacin de sitios web

Fundamentos de los sitios web

Planificacin de sitios web

Planificacin Creacin de sitios Dreamweaver 3.0

Tecnologas web

Planificacin de sitios web

9-2

Fundamentos de los sitios web

Las pginas que forman un sitio web estn escritas en el lenguaje HTML Podemos:
Escribir directamente HTML con un editor Utilizar una herramienta de creacin de sitios web: FrontPage, Dreamweaver, HomeSite, etc... Apoyarnos en herramientas de diseo grfico para mejorar las pginas

Qu es un sitio web? "Conjunto de pginas web relacionadas"

.. .. .. .. . . .

Una vez creado el sitio, podemos publicarlo en un servidor pblico de algn proveedor para que lo vea todo el mundo (va ftp)

Tecnologas web

Planificacin de sitios web

9-3

Tecnologas web

Planificacin de sitios web

9-4

El sitio web se aloja en un servidor web

Los servidores web ofrecen documentos, a los cules acceden los clientes web utilizando el protocolo HTTP HTTP (HiperText Transfer Protocol) es un protocolo diseado para la transmisin de documentos en Internet; HTTP rige la transmisin de documentos en WWW

URLs = direcciones
Las direcciones IP y los nombres de Internet permiten localizar mquinas en la red En WWW es necesario, adems, localizar documentos que residen en mquinas Formato de un URL:
NombreProtocolo://NombreInternetODireccionIP/UbicacinRecurso

Ejemplos: http://www.ucm.es/info/dsip http://pepe.ucm.es/~antonior ftp://ftp.rediris.es/pub file://c:/ficheros/quijote.doc

Tecnologas web

Planificacin de sitios web

9-5

Tecnologas web

Planificacin de sitios web

9-6

Planificacin y creacin de sitios web

Planificacin Cul es el propsito del sitio?

Planificacin Diseo y programacin Publicacin Promocin Mantenimiento

Por qu voy a crear este sitio? Qu tipo de audiencia me interesa? Qu informacin deseo proporcionar y cul no? Qu informacin deseo recibir de los visitantes? Cunto tiempo (y dinero) estoy dispuesto a gastar en el desarrollo y el mantenimiento del sitio?

Una fuente de inspiracin: sitios web similares

Tecnologas web

Planificacin de sitios web

9-7

Tecnologas web

Planificacin de sitios web

9-8

Planificacin: Tipos de webs Personales

Planificacin
Debemos planificar el sitio de forma esquemtica, como un diagrama de jerarquas Principal
Aficiones Albun de fotos Familia Amigos Favoritos Internet

Podemos representar las pginas web en papel y reconfigurar la estructura del sitio durante la fase de planificacin En esta fase, conviene dedicar tiempo a navegar en WWW y observar detenidamente los sitios web que nos interesen
Qu informacin o negocio tiene ms xito entre los del mismo tema?

Profesionales
Tecnologas web Planificacin de sitios web 9-9

Qu buscan los internautas interesados en el tema? Cules son las carencias informativas relativas al tema?
Tecnologas web Planificacin de sitios web 9 - 10

Planificacin
Seleccin de material y herramientas:
Imgenes, sonido, applets, bases de datos ,etc Editores de texto, de imgenes, de diseo web

Planificacin: Estructuras de sitios

Secuencial: Enlaza una serie de pginas en una cadena que hay que seguir sin saltarse ningn eslabn (por ejemplo, un cuento infantil)

Definicin de la estructura del sitio

Describimos cada una de las pginas y sus enlaces Ejemplo: web de un Zoo
Principal Info. para visitantes Primates Felinos Exhibiciones Reptiles Libro de visitas Paquidermos Aves

Medio multidireccional: la navegacin ha de ser abierta (ir de una pgina a otra) y consistente (intuitiva para el usuario)

Marsupiales

Tecnologas web

Planificacin de sitios web

9 - 11

Tecnologas web

Planificacin de sitios web

9 - 12

Planificacin: Estructuras de sitios

Jerrquica: Los contenidos se organizan en secciones y a su vez en subsecciones (por ejemplo, peridicos digitales)

Planificacin: Estructuras de sitios

Estructura web o hiperenlazado: Interrelaciones y saltos frecuentes entre apartados Suelen incluir ndices y mapas

Tecnologas web

Planificacin de sitios web

9 - 13

Tecnologas web

Planificacin de sitios web

9 - 14

Ejemplo de web secuencial

Ejemplo de web jerrquico

Tecnologas web

Planificacin de sitios web

9 - 15

Tecnologas web

Planificacin de sitios web

9 - 16

Ejemplo de web hiperenlazado

Publicacin y promocin del sitio

Publicacin: Consiste en alojar el sitio en un servidor accesible por el pblico Promocin: Crear un sitio web brillante es intil si nadie sabe acerca de l o es difcil de encontrar Con millones de sitios, captar la atencin puede ser un reto: por eso conviene promocionarlo Registrar el sitio en los Directorios de Bsqueda Anunciar el sitio en otros ndices Publicar en Grupos de Discusin o Listas de Correos Utilizar publicidad en webs

Tecnologas web

Planificacin de sitios web

9 - 17

Tecnologas web

Planificacin de sitios web

9 - 18

Mantenimiento y depuracin
Empezar con un sitio bien diseado es la manera ms efectiva de evitar actualizaciones y mantenimientos caros Actualizar el sitio involucra cambiar el contenido Rastrear y personalizar las visitas de los usuarios Obtener respuestas de los usuarios: Correo electrnico Elementos de formulario Cuadros de texto, botones de envo, cuadros de listas de opciones, etc..

Directrices de diseo
Evitar las pginas largas
Crear ndices con saltos a zonas de la pgina (marcos?)

No construir pginas sin vnculos Evitar la sobrecarga de informacin Evitar imgenes grandes y exceso de animaciones Titular todas las pginas Usar mens y barras de botones: www.macromedia.com Uso de guas o ndices para la navegacin: saber en cada momento dnde se encuentra el usuario: http://www.elmundo.es/diario/economia/index.html Webs profesionales: Agregar interactividad a la pgina Foros de discusin, chats, listas de correo, etc..

Tecnologas web

Planificacin de sitios web

9 - 19

Tecnologas web

Planificacin de sitios web

9 - 20

Planificacin de una pgina personal

Principal Aficiones Albun de fotos Familia Amigos Favoritos Internet

Planificacin de sitios en Dreamweaver

En Dreamweaver, el trmino sitio puede hacer referencia a un sitio web o a un emplazamiento local de almacenamiento de documentos pertenecientes a un sitio web La forma habitual de crear un sitio consiste en crear una carpeta en el disco local con todos los archivos del sitio y crear y editar los documentos dentro de dicha carpeta Posteriormente, se copiarn peridicamente esos archivos en un servidor web, lo que hace posible que otras personas visiten el sitio Para ayudarle a gestionar el sitio, Dreamweaver muestra los archivos del sitio como lista o mapa. Puede usar el mapa del sitio para crear y ver rpidamente prototipos de sus sitios web

Tecnologas web

Planificacin de sitios web

9 - 21

Tecnologas web

Planificacin de sitios web

9 - 22

Planificar la estructura del sitio

Dividir el sitio en categoras Debemos situar las pginas relacionadas en la misma carpeta comunicados de prensa de la compaa informacin sobre contactos ofertas de trabajo pginas de un catlogo interactivo webcarlos
asignaturas publicaciones enlaces Index.html

Organizacin previa: carpeta local

La carpeta que servir para contener los datos del sitio web local es webcarlos El documento principal ser la pgina personal llamada index.html El resto de documentos sern pginas que se organizarn en la carpeta principal (webcarlos) o en alguna subcarpeta (imgenes, direcciones, etc).

Decidir dnde se desea colocar elementos como imgenes y archivos de sonido Por ejemplo, es conveniente colocar todas las imgenes en un directorio, a fin de facilitar su localizacin cuando se quieran insertar en una pgina

Tecnologas web

Planificacin de sitios web

9 - 23

Tecnologas web

Planificacin de sitios web

9 - 24