Diseño de Sitios Web

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA FACULTAD DE CIENCIAS BSICAS E INGENIERA

PROGRAMA DE INGENIERA DE SISTEMAS

MMMOOODDDUUULLLOOO DDDIIISSSEEEOOO DDDEEE SSSIIITTTIIIOOOSSS WWWEEEBBB

Autores:

Ingenieros: JORGE EDUARDO SALAZAR ZIGA

ORLANDO PUENTES ANDRADE

Revisin y Modificacin (Ingeniero. MAURICIO PERDOMO VARGAS)

La Plata Huila 10 de Diciembre de 2009



CONTENIDO

INTRODUCCIN AL CURSO DISEO DE SITIOS WEB 1

TEM TITULO PAG.

1. UNIDAD 1. GENERALIDADES DEL MODELAMIENTO Y LAS ARQUITECTURAS WEB

4

1.1 INTRODUCCIN 4 1.2 CAPITULO 1: TEMAS CLAVES DEL DISEO DE SITIOS WEB 5 1.2.1 LECCIN 1: QUE ES EL DISEO DE SITIOS WEB 5 1.2.2 LECCIN 2: LA PIRMIDE DEL DISEO WEB 5 1.2.3 LECCIN 3: MODELOS PARA EL DESARROLLO WEB. 6 1.2.4 LECCIN 4: EVALUACIN DE UN SITIO WEB 7 1.2.5 LECCIN 5: RECOMENDACIONES FINALES 8 1.2.6 ACTIVIDADES 10 1.2.7 AUTOEVALUACIN 10 1.2.8 BIBLIOGRAFA 10

1.3 CAPITULO 2: EL PROCESO DEL DISEO WEB 11 1.3.1 LECCIN 6: NECESIDAD DE UNA METODOLOGA DE

DISEO Y DESARROLLO. 11

1.3.2 LECCIN 7: ENFOQUE DE UN PROYECTO DE UN SITIO WEB.

11

1.3.3 LECCIN 8: PLANIFICACIN DEL SITIO 13 1.3.4 LECCIN 9: ETAPAS DE LA FASE DEL DISEO 14 1.3.5 LECCIN 10: IMPLANTACIN DE LA VERSIN BETA DEL

SITIO. 15

1.3.6 ACTIVIDADES 16 1.3.7 AUTOEVALUACIN 16 1.3.8 BIBLIOGRAFA 16

1.4 CAPITULO 3: VARIABLES DE XITO PARA LOS SITIOS WEB

17

1.4.1 LECCIN 11: DISEO PARA LOS USUARIOS 17 1.4.2 LECCIN 12: RESPUESTA Y TIEMPO DE REACCIN 19 1.4.3 LECCIN 13: TIPOS DE SITIOS WEB 21



1.4.4 LECCIN 14: TIPOS Y ELECCIN DE LA ESTRUCTURA DE UN SITIO

24

1.4.5 LECCIN 15: TEORA Y PRCTICA DE LA EXPLORACIN 27 1.4.6 ACTIVIDADES 33 1.4.7 AUTOEVALUACIN 33 1.4.8. BIBLIOGRAFA 34

2 UNIDAD 2: VNCULOS, BSQUEDAS Y TIPOGRAFA PARA EL DISEO WEB

35

2.1 INTRODUCCIN 35 2.2 CAPITULO 4: VNCULOS: TEXTO, BOTONES, CONOS Y

GRFICOS 36

2.2.1 LECCIN 16: VNCULOS EN EL DISEO WEB 36 2.2.2 LECCIN 17: BSQUEDA, DISEO Y MOTORES DE

BSQUEDA 41

2.2.3 LECCIN 18: COMO AJUSTARSE Y SER VISIBLE PARA LOS MOTORES DE BSQUEDA

46

2.2.4 LECCIN 19: OTRAS TCNICAS DE PROMOCIN EN LNEA 53 2.2.5 LECCIN 20: EL PROCESO DE ADICIN DE UNA FACILIDAD

DE BSQUEDA 55

2.2.6 ACTIVIDADES 58 2.2.7 AUTOEVALUACIN 58 2.2.8 BIBLIOGRAFA 59

2.3 CAPITULO 5: MAPAS DE SITIOS, NDICES Y OTRAS AYUDAS PARA LA UTILIZACIN, LA EXPLORACIN Y LA ORGANIZACIN DE PGINAS Y TEXTO

60

2.3.1 LECCIN 21: PLANOS Y MAPA DEL SITIO. 60 2.3.2 LECCIN 22: LAS PAGINAS WEB 64 2.3.3 LECCIN 23: PAGINAS DE ENTRADA Y SALIDA PARA UN

SITIO WEB 65

2.3.4 LECCIN 24: EL TEXTO EN LAS PAGINAS WEB 67 2.3.5 LECCIN 25: LAS TABLAS EN LAS PGINAS WEB. 69 2.3.6 ACTIVIDADES 71 2.3.7 AUTOEVALUACIN 71 2.3.8 BIBLIOGRAFA 72



2.4 CAPITULO 6: COLORES, IMGENES Y FONDOS 73 2.4.1 LECCIN 26: INTRODUCCIN AL COLOR. 73 2.4.2 LECCIN 27: DEFINICIN DEL COLOR EN LA WEB 75 2.4.3 LECCIN 28: COLORES Y FUENTES 79 2.4.4 LECCIN 29: IMGENES EN LA WEB 86 2.4.5 LECCIN 30: IMPORTANCIA DEL TAMAO EN LA

DESCARGA DE ARCHIVOS 90

2.4.6 RESUMEN 96 2.4.7 AUTOEVALUACIN 96 2.4.8 BIBLIOGRAFA 97

3 UNIDAD 3: TECNOLOGAS WEB 98 3.1 INTRODUCCIN 98 3.2 CAPITULO 7: INTERACTIVIDAD EN LAS PAGINAS WEB 101 3.2.1 LECCIN 31: ORGANIZACIN DE LA INTERACTIVIDAD

MEDIANTE FUNCIONES GUI. 101

3.2.2 LECCIN 32: FORMULARIOS EN LAS PGINAS WEB 103 3.2.3 LECCIN 33: TECNOLOGAS WEB Y SU EFECTO SOBRE EL

DISEO WEB 107

3.2.4 LECCIN 34: INCLUYENDO IMGENES EN LAS PGINAS WEB.

111

3.2.5 LECCIN 35: OTRAS CON SIDERACIONES IMPORTANTES. 116 3.2.6 ACTIVIDADES 127 3.2.7 AUTOEVALUACIN 127 3.2.8 BIBLIOGRAFA 127

3.3 CAPITULO 8 ENTREGA Y ADMINISTRACIN DEL SITIO. 128 3.3.1 LECCIN 36: PROTOCOLOS DE LA WEB. 128 3.3.2 LECCIN 37: SERVICIOS DE LA WEB. 131 3.3.3 LECCIN 38: ALGUNAS CONSIDERACIONES SOBRE LA

WWW. 134

3.3.4 LECCIN 39: REGISTRO DE DOMINIO ADMINISTRACIN Y SEGURIDAD.

138

3.3.5 LECCIN 40: EL FUTURO DEL DISEO WEB 141 3.3.6 ACTIVIDADES 144 3.3.7 AUTOEVALUACIN 145



3.3.8 BIBLIOGRAFA 145

3.4 CAPITULO 9: NUEVAS TENDENCIAS DEL DESARROLLO WEB.

146

3.4.1 LECCIN 41: LOS CMS PRESENTE Y FUTURO DEL DISEO WEB.

146

3.4.2 LECCIN 42: EL CMS JOOMLA. 149 3.4.3 LECCIN 43: INSTALANDO EL CMS JOOMLA. 154 3.4.4 LECCIN 44: PUBLICANDO UN ARTICULO EN JOOMLA 159 3.4.5 LECCIN 45: RECOMENDACIONES FINALES 163 3.4.6 ACTIVIDADES 165 3.4.7 AUTOEVALUACIN 165 3.4.8 BIBLIOGRAFA 166

1

INTRODUCCIN

El curso de Diseo de sitios Web, componente electivo de los Programas de Tecnologa e Ingeniera de Sistemas tiene como objetivo la fundamentacin de los conceptos bsicos en el Diseo de sitios Web, de los estudiantes de estos programas o programas afines y/o particulares, bajo la estrategia de educacin abierta y a distancia.

El curso tiene 3 crditos acadmicos los cuales comprenden el estudio independiente y el acompaamiento tutorial, con el propsito de:

Fundamentar la concepcin sistmica del moldeamiento de la programacin en Internet.

Capacitar a los estudiantes para la comprensin, aprehensin de los conceptos propios de la Programacin en Internet.

Fomentar en el estudiante el espritu investigativo, despertar la creatividad en el desarrollo de soluciones a problemas en el amplio espacio que ofrece Internet.

Este curso est compuesto por tres unidades didcticas a saber:

Unidad 1. Conceptos, antecedentes, El proceso de diseo Web, Diseo para los usuarios, Tipos de Sitios y arquitecturas, Teora y prctica de la exploracin,

Unidad 2. Vnculos: Texto, Botones, Iconos y Grficos, Bsqueda y diseo, Tipografa y Organizacin del texto en las pginas web, Colores Imgenes y Fondos,

Unidad 3. Organizacin de la interactividad mediante funciones GUI, Tecnologas Web, Publicar un proyecto WEB.

El curso es de carcter terico prctico y la metodologa a seguir ser bajo la estrategia de educacin a distancia. Por tal razn, es importante planificar el proceso de:

Estudio Independiente: se desarrolla a travs del trabajo personal, del trabajo en pequeos grupos colaborativos de aprendizaje y el trabajo de grupo de curso.

2

Acompaamiento tutorial: corresponde al tiempo de acompaamiento que el tutor realiza al estudiante para potenciar el aprendizaje y la formacin.

El sistema de evaluacin del curso es a travs de la evaluacin formativa, que constituye distintas formas de comprobar el avance en el auto aprendizaje del curso.

En este sentido, se realizarn tres tipos de evaluacin alternativas y complementarias, estas son:

Autoevaluacin: evaluacin que realiza el estudiante para valorar su propio proceso de aprendizaje.

Coevaluacin: se realiza a travs de los grupos colaborativos, y pretende la socializacin de los resultados del trabajo personal.

Heteroevaluacin: Es la valoracin que realiza la institucin de la apropiacin de los conceptos por parte del estudiante.

El Sistema de interactividades vincula a los actores del proceso mediante diversas actividades de aprendizaje que orientan el trabajo de los estudiantes hacia el logro de los objetivos que se pretenden, de la siguiente manera:

- Tutor-estudiante: a travs del acompaamiento individual - Estudiante-estudiante: mediante la participacin activa en los grupos

colaborativos de aprendizaje. - Estudiantes-tutor: a travs del acompaamiento a los pequeos grupos

colaborativos de aprendizaje. - Tutor-estudiantes: mediante el acompaamiento en grupo de curso - Estudiantes-estudiantes: en los procesos de socializacin que se realizan en el

grupo de curso.

Para el desarrollo del curso es importante el papel que juega los recursos tecnolgicos como medio activo e interactivo, buscando la interlocucin durante todo el proceso de dilogo docente-estudiante.

Los materiales impresos en papel, se han convertido en el principal soporte para favorecer los procesos de aprendizaje autodirigido.

Sitios Web: propician el acercamiento al conocimiento, la interaccin y la produccin de nuevas dinmicas educativas.

Sistemas de interactividades sincrnicas: permite la comunicacin a travs de encuentros presenciales directos o de encuentros mediados (Salas de conversacin, audioconferencias, videoconferencias, tutoras telefnicas, foros)

3

Sistemas de interactividades diferidas: permite la comunicacin en forma diferida favoreciendo la disposicin del tiempo del estudiante para su proceso de aprendizaje, mediante la utilizacin de correo electrnico, foros, grupos de discusin, entre otros.

El acceso a documentos adquiere una dimensin de suma importancia en tanto la informacin sobre el tema, exige conocimientos y planteamientos preliminares, por tal razn es imprescindible el recurso a diversas fuentes documentales y el acceso a diversos medios como son: bibliotecas electrnicas, hemerotecas digitales e impresas, sitios Web especializados.

En la medida de que se adquiera el rol del estudiante a distancia, se interiorice y se apliquen los puntos abordados anteriormente, se podr obtener los logros propuestos en este curso, as como un acercamiento a los enfoques de la Programacin en Internet, mediante la estrategia de educacin a distancia.

PROPSITOS

Que el estudiante fundamente tericamente la concepcin de la Programacin para Internet

Que el estudiante diferencie y decida sobre las tecnologas a aplicar en la solucin de problemas.

Que el estudiante evalu e intrprete algortmicamente los diseos de la programacin para Internet

OBJETIVOS

Fundamentar los conocimientos bsicos en la programacin para Internet.

Capacitar a los estudiantes para la comprensin, aprehensin de los conceptos propios de la Programacin para Internet.

Fomentar en el estudiante la investigacin y la creatividad, caractersticas que deben identificarlo en su entorno como Ingeniero Programador.

4

1. UNIDAD 1: GENERALIDADES DEL MODELAMIENTO Y LAS ARQUITECTURAS WEB

1.1 INTRODUCCIN. El diseo Web es una de las disciplinas que ms adeptos est ganando desde hace una dcada y mejores resultados estn proporcionando laboral y econmicamente. Pero haciendo caso omiso a los bienes terrenales el mundo fascinante de la Web involucra un sin nmero de elementos multidisciplinarios y diversos que acarrean gran riqueza en concepto y aplicacin. En esta seccin se presentaran los primeros temas claves para el conocimiento de las mejores prcticas en el diseo Web.

Lograr que un sitio Web cumpla las metas propuestas en su implantacin no es solamente un reto sino que adicionalmente es desarrollar la complejidad de un proyecto que involucre reas como mercadeo, economa local y global, artes grficas, ingeniera de software, y muchas otras ms. Tener como aliado el tiempo es un factor clave para lograr el xito, en especial cuando la paciencia de los usuarios es escasa. En esta seccin se hablarn sobre trminos claves para tener en cuenta en el momento del diseo con el objetivo de no darle oportunidad al usuario para que abandone el sitio a causa de factores que posiblemente se pueden manejar.

No existe una regla general que diga o mencione la existencia de una nica e invencible arquitectura, ni tampoco como se puede realizar una clasificacin exacta sobre un sitio Web, porque esto depende de los objetivos para los que fue creado dicho sitio. En general segn la arquitectura de red (intranet / extranet) se puede tener sitios diseados para que funcionen solamente en la intranet de una empresa y otros sitios para que funcionen en toda la red global como lo es Internet. De igual manera segn el propsito para lo que fue creado el sitio Web se adoptarn ciertas medidas restrictivas que en otros sitios no.

OBJETIVO GENERAL. Dar una introduccin sobre qu es el diseo Web y bajo cuales parmetros se deben llevar los desarrollos para obtener los mejores resultados.

ESTRUCTURA TEMTICA. Qu es el diseo web? La pirmide del diseo web Modelo del proceso de desarrollo web Evaluacin de un sitio web

5

1.2 CAPITULO 1: TEMAS CLAVES DEL DISEO DE SITIOS WEB

1.2.1 LECCIN 1: QU ES EL DISEO WEB?

Es un proceso multidisciplinario que permite llegar a desarrollar un WebSite o Portal de manera que tome aspectos relevantes en la creacin como por ejemplo el desarrollo de imgenes e interfaces grficas atractivas para el usuario, el establecer un manejo ptimo de los recursos de ancho de banda vs. Contenido por pgina y as muchas otras cosas.

Los cuatro aspectos relevantes son el contenido (cantidad y calidad de la informacin que se publica), la tecnologa (la cual involucra el entorno de desarrollo Html, Dhtml, Asp, Jsp, etc. - y de despliegue en qu clase de servidores Web albergamos el sitio, qu tipo de mquinas poseen nuestros clientes y que tipo y versin de explorador poseen, etc.), los aspectos visuales (cules imgenes son atractivas para mi usuario, cuales imgenes me ayudan a entregar el mensaje a transmitir de forma ms clara y concisa) y, los econmicos (como por ejemplo cunto cuesta desarrollar el sitio segn cada uno de los aspectos anteriormente mencionados, etc.).

1.2.2 LECCIN 2: LA PIRMIDE DEL DISEO WEB.

Tiene como cimientos los aspectos en los que el diseador presta mayor atencin como lo son la funcionalidad y lo atractivo, estos dos aspectos conllevan una interrelacin de intercambio de ideas e intereses con los usuarios finales y los mismos diseadores, adicionalmente se encuentra el objetivo de establecer dichas bases slidas y es la de construir un Sitio con informacin clara, interesante, con vocabulario apropiado para el usuario, para lograr un bien econmico o de reconocimiento o el que se haya pretendido por parte del propietario de Sitio.

FORMA FUNCIN

USUARIOS

DISEADORES

Visual Tecnologa

Econmica Educativa Informativa ...

6

1.2.3 LECCIN 3: MODELOS PARA EL DESARROLLO WEB.

En general el desarrollo de WebSites, Portales o Aplicaciones Web recaen en una de las ms grandes y ricas disciplinas como lo es la Ingeniera del Software. La Ingeniera del Software ensea las diferentes metodologas mtodos que se siguen- de desarrollo de software (los aplicativos Web, los WebSites y los portales son un tipo especial de software) como por ejemplo el modelo en cascada, en espiral, por prototipos, el proceso de desarrollo unificado y en fin otras metodologas de desarrollo que seguramente se mencionarn en un curso de Ingeniera de Software. El modelo del proceso de desarrollo hace referencia precisamente a la descripcin inclusive grfica de cmo se interrelacionan los mtodos de una metodologa definida para desarrollar aplicaciones a desplegar en la Web.

Modelo en cascada:

Modelo iterativo por prototipos:

7

Modelo en espiral:

Proceso Unificado de Desarrollo de Software:

1.2.4 LECCIN 4: EVALUACIN DE UN SITIO WEB.

La evaluacin de un sitio Web es un aspecto fundamental que el equipo de desarrollo debe tener en cuenta para satisfacer una necesidad general de los usuarios como lo es el despliegue rpido de la pgina en el cliente. Cuando un equipo de desarrollo se enfrenta a la etapa de evaluacin puede en general probar mltiples aspectos fundamentales como lo son:

La solucin y satisfaccin de los requerimientos funcionales determinados en comn acuerdo con el cliente, el cual abarca no solamente que las pginas realicen o lleven a cabo su objetivo como por ejemplo el registro en un sitio o una transaccin en lnea- sino que adicionalmente no exista ruptura de enlaces o

8

mal almacenamiento de imgenes en la estructura de directorios u otros elementos por el estilo, la fcil escalabilidad segn el diseo arquitectnico del sitio, la facilidad y clara sealizacin para desplazarse a travs del sitio, el rpido despliegue de la informacin en el cliente superando obstculos como el ancho de banda, los recursos de memoria del cliente y en especial del proveedor de hosting, la seleccin adecuada de tecnologa de desarrollo, que permita al usuario medio no tener problemas (el cliente no puede observar una animacin por carecer del plugin de flash, etc.) de visualizacin de la Web con degradacin de imgenes, con problemas de despliegue de animaciones, etc.

1.2.5 LECCIN 5: RECOMENDACIONES FINALES

Algunos diseadores Web sugieren los siguientes parmetros a tener en cuenta con el objeto de evaluar el diseo de un sitio:

HGALO TODO MS SIMPLE. El poder de un buen diseo est en su simplicidad. Defina la esencia. Cuando su diseo final parece ser demasiado simple para la cantidad de tiempo que le dedic, Listo! Su trabajo ya est listo.

SALGA DE SU MUNDO INTERIOR: COMUNQUESE. Aprenda a comunicarse y colaborar con todos los miembros de las profesiones Web claves: programacin, marketing, comerciales.

MENOS GLAMOUR Y MS ORDEN No se vea seducido por la forma en detrimento del contenido. Un diseo Web comprometido con el contenido contribuye en mayor medida que uno que hace prevalecer las formas.

DISEE PARA CONEXIONES VA MODEM!!!!!!. La consideracin esttica ms importante a tener en cuenta es LA VELOCIDAD DE TRANSMISIN. Si su trabajo tarda demasiado en bajar, deje todo de lado y vuelva al papel y al lpiz.

TEXTOS. ABURRIDOS?. Cuando le toque diagramar textos, PRIMERO LALOS. Piense en cmo alguien, con menos inters que el suyo, podra echarles un vistazo. Otra cosa que es de gran ayuda es el ancho de los textos. A menudo se ven por ah sitios con sus textos corriendo de punta a punta de la pgina. Cmo se puede leer eso???. Mejor trate que sus textos se mantengan en un ancho de 400 pxeles, o, al menos, un tercio de su pantalla.

MS COLOR Y GRFICOS, MENOS IMGENES Y EFECTOS El arte lineal, las formas vectoriales y el color plano se lleva de maravillas con la Web. Para ser ms claros, si sus diseos usan mas Freehand que Photoshop, es seguro que su pgina cargar mucho ms rpido.

9

GRFICOS Y TEXTOS: NO! Nunca, jams, inserte texto en un grfico. El texto es texto. Los grficos son grficos. No los confunda.

ATRAIGA. Con las fluctuaciones en las conexiones a la Web, su carcter de "lenta" y dems afectaciones, usted tiene 3 SEGUNDOS para convencer a un usuario de no usar el botn ATRS del navegador. TRES SEGUNDOS. Entonces, ponga todos sus esfuerzos para que aquello que desea mostrar en una pgina Web aparezca inmediatamente, y de forma interesante.

ATRAIGA-SIMPLIFIQUE-VAYA A LO QUE IMPORTA. Tiene 30 segundos para cargar TODA una pgina en el navegador del usuario. Quizs menos, 15 seg. SEA RPIDO.

ENFQUESE EN LO QUE INTERESA. A los usuarios no les interesa en absoluto como funciona y se navega dentro de su sitio Web, solo llegaron all por el contenido. DSELOS en forma rpida y simple.

INFRMESE-APRENDA. Mantngase al tanto de las nuevas tecnologas. La Web jams se queda quieta, as que dedique su tiempo libre a aquello que es nuevo. Ya ha pasado el tiempo en que el pez ms grande se coma al ms pequeo, ahora es el MS RPIDO el que se come al MS LENTO.

DEFINA SU PROBLEMA. El diseo trata sobre la resolucin de problemas, sobre enfrentar una cuestin de comunicacin con un objetivo. Defina cual es el suyo y ya tendr la mitad del problema resuelto.

APRNDASE LOS PRINCIPIOS DE NAVEGACIN.

La gente odia esperar. La gente odia hacer scroll. La gente odia leer. La gente prefiere hacer scroll antes que esperar. La gente prefiere esperar a leer. La gente no es necesariamente racional o coherente, pero a veces s.

BUSQUE INSPIRACIN. Hable con gente que est fuera de su campo de accin. Los arquitectos, por ejemplo, pueden darle una perspectiva completamente nueva del diseo Web, quiz pueden cambiar su forma de imaginar cmo se conceptualiza un sitio, transformando las pginas Web en "espacios Web"

ESCUCHE MSICA. Si, cuando la msica acompaa a su trabajo este se hace ms placentero y llevadero. Incluso llega a generar ms inspiracin.

10

1.2.6 ACTIVIDADES.

Navegue en la red y recopile informacin adicional a los temas tratados y escriba un ensayo, sobre el proceso de cambio de evolucin desde el papel hasta el software.

Navegue en la red y recopile informacin adicional a los temas tratados y escriba un ensayo, sobre el proceso el Diseo Web.

Consulte bibliografa de Ingeniera de Software y profundice sobre los modelos de diseo de Software, concepte sobre los diseos las siguientes pginas: www.sun.com, www.microsoft.com, www.sony.com, www.bmw.com y www.corel.com.

1.2.7 AUTOEVALUACIN.

En qu consiste la etapa de implementacin del modelo de Cascada? En qu consiste la etapa de construccin del modelo de Iterativo? En qu consiste la etapa de anlisis del modelo de Espiral? Elabore su propio manual de evaluacin de sitios Web, y escriba un ensayo de argumentacin del mismo.

1.2.8 BIBLIOGRAFA.

Ana Moreno. Relaciones Externas. http://www.digitalvalley.com/. Texto adaptado de Webmonkey.com DISEO DE SITIOS WEB. Manual de referencia. Thomas a. Powell. McGraw Hill EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson, Booch and Rumbaugh. Editorial Addison Wesley. Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw Hill. XML, Elizabeth Castro. Editorial Prentice Hall. Active Server Pages 3.0. Serie Prctica. Nicholas Chase. Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial McGraw Hill Microsoft Press. Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall.

11

1.3 CAPITULO 2: EL PROCESO DEL DISEO WEB.

1.3.1 LECCIN 6: NECESIDAD DE UNA METODOLOGA DE DISEO Y DESARROLLO.

Como se ha venido expresando la complejidad de la Web ha incrementado velozmente, exigiendo as a los diseadores Web la escogencia de una metodologa de diseo y desarrollo aplicable a las necesidades del cliente. En la leccin pasada encontramos algunas de las metodologas de desarrollo que podran permitirle llevar a cabo un proyecto de ingeniera Web; cabe resaltar que existen otras metodologas de desarrollo Web como por ejemplo el Mtodo Web ad hoc, el Modelo del mtodo Web clsico, el Modelo en cascada modificado y el Desarrollo de aplicacin conjunta.

1.3.2 LECCIN 7: ENFOQUE DE UN PROYECTO DE UN SITIO WEB.

El enfoque dado a un proyecto de ingeniera Web depende de mltiples parmetros involucrados en el modelo del negocio y en la administracin del proyecto, por ejemplo, se puede encontrar un caso en el cual no hay el suficiente tiempo para llevar a cabo un proyecto o tambin puede suceder que se requiere disear una aplicacin Web que permita la administracin, manipulacin y divulgacin de transacciones bancarias en lnea y como es lgico de deducir la importancia en el manejo de la informacin, los grados de confidencialidad de la misma y otras caractersticas obligan a los desarrolladores de la aplicacin a tomar decisiones sobre los diferentes modelos de desarrollo a aplicar en los diferentes proyectos que se piensen lograr. ... S el sitio es nuevo o la ampliacin es muy compleja, los modelos en cascada o en cascada con remolino, seran los ms aconsejables. Si el proyecto de mantenimiento o es relativamente sencillo, o tiene muchos factores desconocidos, se puede utilizar el modelo de aplicacin conjunta.

OBJETIVOS Y PROBLEMAS.

Los objetivos de los sitios tienen gran importancia y, generalmente, estn articulados desde el principio. Cuando defina un problema y determine unos objetivos para solucionarlo, no utilice frases ambiguas, sino, frases en las cuales se muestre que el o los objetivos son medibles y concretos. Un ejemplo sera:

Desarrollar un sitio Web de ayuda y soporte tcnico que aumente la satisfaccin del cliente, permitiendo un acceso 24hrx7ds disminuyendo en un 25% el soporte telefnico prestado.

12

Un sitio no puede tener todo para todo el mundo, usted debe centrarse en un tipo de audiencia y en un conjunto de tareas; intente encontrar una filosofa comn de diseo dejando que la gente discuta sobre lo que no desean ver en el sitio.

Para refinar los objetivos es necesario que conozca al mximo los usuarios potenciales del sitio de tal suerte que puede hacerse una mejor idea del diseo que implementar. Para conocer los usuarios basta con unas preguntas sencillas como por ejemplo:

Dnde viven? Qu edad tienen? Son hombres o mujeres? Qu idioma hablan? Qu conocimientos tcnicos poseen? Qu clase de conexin a internet tienen? Qu equipo utilizan? Qu explorador utilizan?

Actividad.

En los siguientes renglones escriba 4 nuevas preguntas que considere necesarias:

1._________________________________________________________________? 2._________________________________________________________________? 3._________________________________________________________________? 4._________________________________________________________________? A continuacin piense por qu se conectaran estos usuarios con su sitio:

Qu obtiene del sitio? Qu desean ejecutar en el sitio? Cundo visitarn el sitio? Cunto tiempo por visita al sitio estaran? Desde cul pgina abandonan el sitio? Cundo volvern al sitio, s es que lo hacen?

En los siguientes renglones escriba 4 preguntas que considere:

1.______________________________________________________________?

13

2.______________________________________________________________?

3.______________________________________________________________?

4.______________________________________________________________?

1.3.3 LECCIN 8: PLANIFICACIN DEL SITIO.

A continuacin se indicar como sera una planificacin formal de un sitio:

Breve declaracin de objetivos. Se argumenta clara y concisamente el propsito global del sitio y las medidas bsicas adoptadas para alcanzar el xito.

Anlisis detallado de los objetivos. Se analizarn cada uno de los objetivos del sitio y se proporcionarn unos objetivos mensurables para verificar la utilidad del sitio.

Anlisis de la audiencia. Se describen los perfiles de los usuarios que van a visitar el sitio. La seccin describir tanto las caractersticas de la audiencia como las tareas que esta audiencia trata de realizar en el sitio.

Anlisis de los escenarios de empleo. Se analizan los diversos escenarios de tareas que realizarn los usuarios del sitio. Comience primero analizando cmo llegar el usuario al sitio, y despus, contine la visita hasta su conclusin.

Requisitos del contenido. Esta seccin proporcionar una lista de todos los textos, imgenes, y otros medios de comunicacin que se necesitan incluir en el sitio. Se podra hacer una matriz o tabla en donde la primera columna contiene el nombre del contenido, la segunda columna la descripcin, en la tercera columna el tipo de contenido, en la cuarta columna el formato, en la siguiente columna si existe o no existe dicho contenido y por ltimo el propietario o responsable de dicho contenido.

Requisitos tcnicos. Se describe el tipo de tecnologa empleada como por ejemplo si se desarrolla en HTML, Java, ASP, etc., adicionalmente que programas complementarios se requerirn.

Requisitos visuales. Se indica a grandes rasgos cmo se relacionar el sitio con cualquier material de marketing existente y definir las restricciones que tendrn los usuarios para emplear grficos y otros elementos multimedia, tales como el tamao de la pantalla, el nmero de colores, el ancho de banda, etc. En este aparte debe quedar bien definido la fuente de los textos el color que primar en el sitio.

14

Requisitos de distribucin. Se incluir un anlisis bsico del nmero de usuarios que visitarn el sitio, cuantas pginas se visitarn en un acceso tpico y cul es el tamao de una pgina estndar. Incluso se puede brindar un breve anlisis del servidor y del ancho de banda necesario para que el sitio realice correctamente sus funciones.

Diagrama de la estructura del sitio. Se debe proporcionar la estructura del sitio o mapa de navegacin, detallando las diversas secciones existentes dentro del sitio y sus relaciones. Se desarrollarn etiquetas e ideas e ideas generales para cada sesin basndose en los diversos escenarios de usuario analizados en las fases inciales del proyecto. Dotacin de personal. Se recogern los recursos necesarios para el desarrollo y explotacin del sitio. Estos valores pueden darse como un simple dato de horas-hombre y debera hacer referencia a cada una de las cuatro reas que requieren personal: contenido, tecnologa, diseo visual y gestin.

Plazos de tiempo. Debern mostrar el progreso del proyecto teniendo en cuenta las dotaciones de personal previamente destinadas.

Presupuesto. Deriva principalmente de los requisitos de personal y de los requisitos de distribucin. Tambin deben indicarse otros costos como la propiedad intelectual o los costos de una campaa de marketing.

1.3.4 LECCIN 9: ETAPAS DE LA FASE DEL DISEO.

Manos a la obra, aqu es donde empiezan los primeros prototipos. En esta etapa se comienza a dar forma al proyecto. Una de las claves aqu es la recopilacin del contenido antes de abordar el diseo. Para llevar a cabo esta etapa se tiene presente tres aspectos primordiales:

La arquitectura u organizacin por frames o bloques de la pantalla. Una de las reglas a tener en cuenta es que el diseo visual debe realizarse de arriba abajo, empezando por la pgina principal, siguiendo por las pginas correspondientes a las subsecciones y finalizando por las pginas de contenido. Encontrar modelos en http://www.Webdesignref.com/chapter2/.

La siguiente fase es la de realizar prototipos en papel o en pantalla. Tenga en cuenta siempre el efecto del borde de la ventana del explorador cuando desarrolle sus creaciones visuales. Haga un esquema de los diversos botones, ttulos y dems elementos que incluir en el sitio Web y en la medida de lo posible trabaje con el contenido real para tener una mejor aproximacin del prototipo diseado frente al diseo final logrado. Otra regla para tener presente es el no casarse con

RICHARResaltado

15

los propios prototipos de diseo. Escuche a sus usuarios y vuelva a definir sus diseos.

El sitio simulado. El siguiente paso es montar una primera versin en un ambiente de pruebas integrado las pginas con o sin texto real, lo que se pretende es ver la facilidad de navegacin, lo atractivo del diseo y la funcionalidad del sitio.

1.3.5 LECCIN 10: IMPLANTACIN DE LA VERSIN BETA DEL SITIO.

Cuando el prototipo del sitio es aceptado se realiza el despliegue o puesta en funcionamiento en un entorno real con los verdaderos contenidos. En este punto se realizan pruebas de aceptacin visual (con el cliente), pruebas funcionales, revisin del contenido, pruebas de compatibilidad entre el sistema y el explorador, pruebas de descargas y por ltimo el Visto bueno por parte del cliente.

Frame superior

Frame principal Frame izquierdo

Frame inferior

16

1.3.6 ACTIVIDADES.

Investigar en qu consiste el mtodo de Web and Hoc.

Investigar la estructura y aplicacin del modelo del mtodo Web clsico.

Basado en el tem PLANIFICACIN DE UN SITIO, construya la planificacin para un sitio Web que se dedique a la venta de revistas a travs de Internet.

1.3.7 AUTOEVALUACIN.

En qu consiste el Plan de tejido para diseo de sitios Web?

Enuncie y explique tres reglas del Plan de Tejido?

Como se define un Sitio Transaccional.

Enumere cuales son las 5 reas de las facetas mayores del plan de tejido.

Cul es el enfoque de usuarios del plan de tejido?

Explique el concepto de agrupacin abstracta para sitios Web.

1.3.8 BIBLIOGRAFA

DISEO DE SITIOS WEB. Manual de referencia. Thomas a. Powell. McGraw Hill EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson, Booch and Rumbaugh. Editorial Addison Wesley. Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw Hill. XML, Elizabeth Castro. Editorial Prentice Hall. Active Server Pages 3.0. Serie Prctica. Nicholas Chase. Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial McGraw Hill Microsoft Press. Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall. Artculos sobre diseo Web. http://www.Webdesignref.com/

17

1.4 CAPITULO 3: VARIABLES DE XITO PARA LOS SITIOS WEB

1.4.1 LECCIN 11: DISEO PARA LOS USUARIOS

FACILIDAD DE EMPLEO. La facilidad de empleo de un sitio hace referencia a la manera cmo el sitio permite la navegacin por l de manera intuitiva, sin recovecos, sin ambigedad, con acceso directo a lo que el usuario necesita encontrar. La siguiente definicin fue extrada de una norma ISO:

Se entiende por facilidad de empleo la facilidad con la que un grupo de usuarios puede utilizar un sitio para conseguir objetivos determinados con efectividad, eficacia y satisfaccin en un contexto concreto de empleo.

Otros autores de renombre como Jacob Nielsen (http://www.useit.com) toman como indicadores de facilidad de empleo los siguientes aspectos:

Facilidad de aprendizaje

Facilidad de ser recordada

Eficacia en su uso

Fiabilidad en su uso

Satisfaccin del usuario

Hay algo muy cierto, un sitio que es de fcil manejo para un experto puede ser de difcil manejo para un novato o viceversa, por lo cual no existe una verdad absoluta al definir la expresin la facilidad de empleo; por otro lado si el sitio es dedicado a un grupo selecto de personas con conocimientos e incluso experiencia sobre el contenido del sitio lo ms seguro es que el sitio ganara puntos en cuanto a la facilidad de empleo, adicionalmente si el grupo principal de usuarios (para quienes fue diseado el sitio, recuerde que nunca deja de faltar el curioso que llega al sitio) frecuenta repetidamente el sitio con toda seguridad que despus de 1 o 2 das la facilidad de empleo ser una frase que se la aadir al sitio.

18

LOS USUARIOS. Como ya lo haba pensado los usuarios de la Web pueden ser todos los que tengan acceso a internet desde cafeteras, hipermercados, salas especiales de internet, universidades, colegios, sus propias casas, etc. Lo que tambin queda claro es que en el momento en que se define el objetivo del sitio se est buscando satisfacer la necesidad de un tipo de usuario preestablecido por lo cual se tendra una cierta idea de antemano sobre las caractersticas de ste, su mundo y todo aquello que se mencion anteriormente.

MEMORIA.

La memoria de los usuarios es un aspecto importante para los propietarios de los sitios puesto que si el usuario recuerda un determinado sitio ya sea por su aspecto grfico tan maravilloso o por su contenido tcnico tan profundo, o por la gran cantidad de distintas utilidades y juegos que tiene para la descarga con toda seguridad volver a ser visitado. A continuacin se describirn un conjunto de sugerencias a tener en cuenta a la hora de disear con el objetivo de lograr ganar importancia en sus usuarios mediante la memoria fotogrfica y/o visual:

Los usuarios tienen tendencia a maximizar las ganancias y a minimizar el trabajo.

El reconocimiento (memoria visual) resulta ms sencillo que la memorizacin, de modo que no obligue a los usuarios a memorizar informacin.

No utilice el mismo color para resaltar los vnculos visitados de los que no lo han sido todava, puesto que este proceder obligara a los usuarios a recordar dnde han estado con anterioridad.

Puesto que es ms fcil recordar imgenes, elabore pginas que incluyan importantes diferencias visuales con el resto de pginas.

Limite el nmero de opciones de importancia similar, tales como vnculos, a grupos de entre 5 y 9 elementos.

Pngase por objetivo la memorizacin de slo tres elementos o pginas secuenciales.

19

1.4.2 LECCIN 12: RESPUESTA Y TIEMPO DE REACCIN. Cultivar la paciencia es una de las tareas ms difciles y que no es posible pedirle a los usuarios, por lo tanto se debe ser muy conocedor de las tecnologas de desarrollo cuando se empieza a crear el sitio. S una pgina se demora en descargarse en el explorador por un periodo superior a 10 segundos con toda seguridad se empezar a perder la atencin de los usuarios, por lo que es necesario ser muy cuidadosos en la implementacin de las pginas, por otro lado tenga presente que los usuarios suelen ser ms pacientes con aquello que no le resulte familiar y con las novedades.

El tiempo que un usuario esperar es proporcional al beneficio obtenido; en cuanto a descargas se refiere, cuando los tiempos de respuesta para la descarga de pginas sean superiores a 30 segundos, trate de proporcionar al usuario su propia informacin del progreso, como por ejemplo, una barra de progreso del tiempo de descarga.

Para el usuario, es ms importante el tiempo que tarde la descarga en realizarse que la cantidad de bytes recibidos, adicionalmente si pasados unos cuantos segundos la pantalla del explorador est en blanco con seguridad abandonar, por lo tanto se sugiere que adicional al diseo de pginas livianas en caso de no poderse porque se desea publicar un pequeo video o una imagen rica en colores y matices, entonces dele tiempo a la pgina pesada y que estamos suponiendo que ser la prxima pgina la cual el usuario visitar, realizando una precarga durante el tiempo de pensar del usuario. Utilice la precarga en una secuencia lineal de pginas.

Existen casos en los que seguramente usted tiene la imagen con una resolucin ms baja que la deseada para mostrar pero que por sus caractersticas es ms rpida de cargar por lo que puede para mantener la atencin del usuario usar el siguiente truco:

En este caso imagen_inicial.jpg es la de baja resolucin mientras que imagen_final.jpg es la de alta resolucin.

Esfurcese en conseguir que el usuario conozca lo ms importante del contenido de una pgina en un tiempo mximo de 40 segundos de carga.

20

Actividad.

Haga la siguiente prueba:

Vaya a www.ego7.com tal vez uno de los mejores sitios interactivos que hay. Navegue por 10 minutos. Cierre el explorador. Vuelva a www.ego7.com Qu le interesara buscar ahora? Navegue por 10 minutos Cierre el explorador. Vuelva a www.ego7.com Qu le interesara buscar ahora? Desde que comenz esta nueva sesin a qu no le prest atencin? Siente la misma emocin que la percibida la primera vez? Vuelva a navegar en www.ego7.com en 2 das, luego a los 3 das y as sucesivamente. Qu conclusin sac de este ejercicio?

CONVENIOS WEB. A continuacin se mencionarn algunos de los acuerdos o conclusiones que se derivan del acceso a cientos de sitios de gran importancia y que por lo tanto se entienden dichas caractersticas como convenios en la Web:

1 6

5

2

3

21

El logotipo situado en la esquina superior izquierda le permitir volver a la pgina principal.

Los vnculos de texto se repiten en la parte inferior de la pgina.

Vnculo para volver a la parte superior de la pgina utilizado en pginas largas.

Empleo de elementos especiales de impresin en pginas muy densas.

Los elementos sobre los que se puede hacer clic son azules y se encuentran subrayados

Los elementos secundarios de exploracin, tales como un plano del sitio o un buscador, se presentan de forma separada al resto de elementos de exploracin.

1.4.3 LECCIN 13: TIPOS DE SITIOS WEB.

TIPOS COMUNES DE SITIOS WEB.

Sitios estticos.

Un sitio se considera esttico cuando su contenido es el mismo cada vez que se visita, es decir cundo es relativamente fijo, adicionalmente el usuario no tiene ninguna libertad ni capacidad para modificar de alguna manera su contenido excepto en el orden en que desee navegar a travs de ste.

Sitios dinmicos.

Un sitio lleva el concepto de dinamismo cuando se mantiene en un estado constante de cambio gradual, por ejemplo hay muchos sitios que se estn actualizando constantemente como por ejemplo www.macromedia.com, all encontrar semana tras semana y da tras da diferente contenido, aspecto visual y en fin cambio constante; otra manera de ver el aspecto dinmico de un sitio es en la manera como es general el sitio, por ejemplo si se brinda la opcin al usuario de personalizar el idioma y la restriccin de cierto contenido se estar generando un sitio dinmico en la medida en que sea diferente para cada usuario con distintas preferencias.

22

Sitios interactivos.

Saque sus propias conclusiones despus de visitar www.lego.com y www.ego7.com

LOS USUARIOS Y LAS ESTRUCTURAS DE LOS SITIOS.

Normalmente los usuarios no memorizan la organizacin de un sitio ni organizan mentalmente un mapa de navegacin detallado sobre el sitio. De cierta manera no es relevante para el usuario la estructural del sitio siempre y cuando se le mantenga lo suficientemente interesado como para que no lo abandone. Cuando se est estructurando (organizando) un sitio lo ms importante es tener presente la perspectiva del usuario que lo visitar.

Existen usuarios cuya intuicin y experiencia de navegacin les har concluir que los documentos del sitio www.XXXYYYZZZ.com pueden estar en el directorio documents luego en el explorador escribiran directamente www.XXXYYYZZZ.com/documents y listo!!! De pronto funcione siempre y cuando no se redireccione a la pgina principal; Lo que se quiere dar a entender con este ejemplo es que si logramos que el usuario obtenga lo que quiere o realice sus tareas de forma eficaz con toda seguridad se replicar en otros cibernautas sobre la funcionalidad y facilidad de manejo del sitio. Cuando para acceder a algn lugar particular del Sitio, el usuario necesariamente debe ingresar en primera instancia por la pgina inicial, se est sacrificando facilidad de manejo para el usuario por solidez en la estructura Web, vale la pena?...

TIPOS ESPECFICOS DE SITIOS WEB. Se podran clasificar los sitios de diversa maneras ya sea por su objeto social, por su audiencia, por su estructura y por algunos otros aspectos ms. Aunque en general se apela a diversas clasificaciones, como en la Web hay tendencias y convenios, entonces lo mejor que se puede hacer es aceptar una clasificacin estandarizada generalmente como lo es: Los sitios comerciales, los sitios informativos, los sitios de entretenimiento, los sitios de las comunidades (del ciber-espacio), los sitios personales y/o artsticos.

Los sitios comerciales.

Son aquellos lugares en donde se desarrolla algn tipo de actividad econmica, comercial o de mercadeo en el ciber-espacio, algunos de estos ejemplos son las tpicas tiendas virtuales como www.amazon.com o empresas que ofrecen sus servicios de hosting.

23

Actividad. Navegue en Internet. Mencione tres sitios comerciales encontrados:

1.__________________________________________________ 2.__________________________________________________ 3.__________________________________________________

Los sitios informativos.

Tienen como meta publicar informacin, por lo que no se debe confundir con un sitio que comercializa informacin. S accedemos a una pgina del gobierno en donde se desea consultar la actual reforma laboral o el nuevo cdigo nacional de polica, con toda seguridad no se encontrar un carrito de compras para adquirir esta informacin, por mucho se solicitar a cambio una direccin de correo electrnico y algunos datos personales con el fin de llevar ciertos registros o estadsticas. En ltimas la finalidad de estos sitios es la de informar o convencer mediante argumentos y documentos para descarga sobre algo tendencia, materiales, etc.-.

Actividad. Navegue en Internet. Mencione tres sitios informativos encontrados:

1.__________________________________________________ 2.__________________________________________________ 3.__________________________________________________

Los sitios de entretenimiento.

Son sitios en donde se busca sorprender al navegante mediante una nueva experiencia interactiva, a veces se encuentran juegos en lnea, video clips o temas musicales en mp3, lo que debe tenerse presente es que la finalidad es la parecida a la que se busca con un juego como MortalKombat frente a su audiencia.

Cules sitio de entretenimiento conoce?

1.__________________________________________________ 2.__________________________________________________ 3.__________________________________________________

Los sitios de comunidad.

Son aquellos cuya finalidad es lograr la reunin o punto de encuentro en el ciber-espacio de una comunidad o conjunto de personas que buscan desarrollar un gran macro proyecto en comn y tambin aquellas personas que a pesar de no

24

pertenecer a dicha comunidad pueden aprovechar de la informacin que poseen y por otro lado aportar con carcter altruista o de reconocimiento en la comunidad.

Actividad. Ha escuchado de la comunidad Linux? S no, averige mediante www.google.com

Los sitios personales y/o artsticos.

Son aquellos que permiten a ciertas personas buscar reconocimiento en el mbito personal dentro de la ciber-sociedad o crear un espacio propio en la Internet por satisfaccin personal. Desgraciadamente no todos los creadores de sitios personales tienen los mejores criterios ticos y morales para sus diseos por lo que se les cuestiona acerca de la publicacin de imgenes que atentan contra la integridad moral de los visitantes.

Actividad. Navegue en Internet. Mencione tres sitios personales y/o artsticos encontrados:

1.__________________________________________________ 2.__________________________________________________ 3.__________________________________________________

1.4.4 LECCIN 14: TIPOS Y ELECCIN DE LA ESTRUCTURA DE UN SITIO

Tambin conocida como arquitectura de la informacin, lo que se busca es encontrar la manera ptima de organizar la informacin y todo el contenido que conlleva el sitio. Por sentido comn los usuarios novatos preferirn estructuras sencillas en los sitios que visitan, estructuras que sean hasta cierto punto predecibles; al contrario los usuarios expertos no estarn en estructuras lineales sino en estructuras flexibles a pesar de su complejidad, lo importante es la rapidez y lo directo en el acceso a la informacin. Definitivamente lo importante es tener en cuenta la calidad de la informacin, lo atractivo del sitio y la posibilidad de buscar informacin desde un elemento adicional (buscador propio del sitio) desde el propio sitio, esto ayudara al xito del sitio.

Tipos de estructura Web.

La estructura de un sitio Web se va a referir a la disposicin entre los enlaces de las diferentes pginas que lo forman, es decir, al esquema general de disposicin de las pginas entre s y a la forma de acceso entre ellas. Los principales tipos de estructura son:

25

Estructura jerrquica: que parte de una pgina principal mediante la que se puede acceder a diferentes pginas secundarias, a partir de las cuales se puede acceder a las pginas terciarias, y as sucesivamente.

La disposicin de un sitio de este tipo sigue el esquema general expresado en el siguiente grfico:

Si se usa una estructura de tipo jerrquica se puede crear un men general en la pgina principal, mediante el que se da acceso a las diferentes pginas de entrada a las secciones, y en cada una de estas debe establecer otro men desde el que el usuario pueda ir a cualquiera de las pginas que la componen. En cada una de las pginas individuales se tendr que implementar unos enlaces a las diferentes secciones principales y a la pgina de inicio.

Estructura lineal: en la que partiendo de una pgina inicial se van recorriendo las dems del sitio Web secuencialmente, una detrs de otra. Es anloga en su disposicin a la estructura de las pginas de un libro. Cada pgina posee un enlace a su anterior en la secuencia y otro a su siguiente. La representacin grfica es la siguiente:

El sistema de mens caracterstico de este tipo de estructura sera el acceso a una pgina de entrada, desde la que se puede acceder nicamente a la pgina que le sigue en la secuencia establecida, y en esta encontrar un pequeo men, generalmente situado en la parte inferior o superior de la misma, desde el que se accede tanto a la pgina anterior como a la siguiente en la secuencia, y as sucesivamente, hasta llegar a la ltima pgina, en la que slo figurar un enlace a la pgina anterior.

Debido a sus repercusiones de diseo y navegacin, este tipo de estructuras en su forma pura es raramente usado.

26

Estructura lineal-jerrquica o mixta: que como su propio nombre indica es una mezcla de las dos anteriores, en la que partiendo de una pgina principal o de inicio se accede a diferentes pginas de entrada a secciones, a partir de las cuales la navegacin es lineal. Su representacin grfica es la siguiente:

En el caso de usar este tipo de jerarqua se debe situar un men en la pgina de inicio desde el que se pueda acceder a las pginas de entrada a cada uno de los temas a tratar, y en cada una de las pginas que forman la secuencia del tema se tendr que establecer un link a la pgina anterior y otro a la siguiente. Como complemento se puede habilitar en cada una de ellas un enlace a la pgina que abre la secuencia, y en cada una de estas otro a la pgina de inicio.

Estructura de frames: que es la tpica de una interfaz a base de frames y en la que el usuario dispone de un men siempre presente desde el que puede acceder en todo momento a las pginas de entrada a las diferentes secciones del sitio Web, a partir de las que puede navegar bien de forma jerrquica, bien de forma lineal, bien de forma mixta. Su representacin grfica es del tipo:

Este tipo de estructura se suele combinar con otro jerrquico o mixto que ayude a navegar dentro de los subtemas principales, a los que se accede a travs del frame lateral.

El sistema de mens consiste generalmente en un men situado en un frame lateral, que nunca cambia, desde el que se accede a las diferentes secciones principales del sitio, cuyas pginas inciales se cargan en el frame central, que suele ser el de mayor tamao. Para acceder a las diferentes subsecciones y

27

pginas se suelen establecer los enlaces adecuados bien como submens en el frame lateral, bien como mens individuales dentro de cada pgina de entrada a las secciones, dentro del frame principal.

Estructura Web: en la que se pueden estructurar las diferentes pginas con libertad total. Es la que da ms facilidades a los diseadores, pero puede resultar a veces demasiado confusas para los usuarios, ya que le permiten visitar los sitios sin un rumbo fijo, pudiendo desde cualquier pgina acceder a los contenidos de un conjunto indeterminado de otras.

No es aconsejable su uso, ya que suele resultar catica. Su representacin grfica puede ser del tipo:

1.4.5 LECCIN 15: TEORA Y PRCTICA DE LA EXPLORACIN.

EXPLORACIN. No hay mucho que aclarar sobre esta actividad, solo que cuando se explora en la Web se encuentra en un mundo completamente tangible y mucho menos en un mundo en el que se puede dar una localizacin exacta frente al mundo real sino ms bien frente a una gran estructura lgica de informacin llamada Internet. Cuando se explora se tiene la certeza o tendencia sobre lo que se espera encontrar y de alguna manera se intuye por donde se comienza la navegacin. Afortunadamente existen muchas ayudas, como lo son las grandes empresas que prestan su servicio gratuito mediante motores de bsqueda como Yahoo, Google, Lycos, etc., aunque de manera intuitiva s un usuario no sabe algo de esto (que es casi imposible puesto que la cultura informtica se est masificando a un ritmo exponencial) seguramente en la direccin URL del explorador colocara www.lo_que_busco.com (lo_que_busco es el nombre la palabra principal o representativa de lo que se est buscando) y aparecer en el explorador algn tipo de informacin relacionada o algn elemento que le indicar al usuario por dnde empezar a buscar lo que l quiere y necesita.

28

REFERENCIA. Las pginas de referencia son aquellas fciles de recordar, tienen un aspecto estable pero diferente al de otras pginas Web, puede considerarse como pgina de referencia, las pginas principales o las pginas de inicio.

Actividad. Indique 3 pginas de referencia mencionando su particularidad. Si no conoce bsquelas en la red. 1. ______________________________________________________ 2. ______________________________________________________ 3. ______________________________________________________

CONSISTENCIA DE LA EXPLORACIN. Los elementos de exploracin al ser una herramienta principal de ayuda al usuario siempre deben estar a la mano y en el mismo lugar sin importar la pgina en la que est, con el fin, de echarle mano rpidamente por s se necesita; generalmente se deberan encontrar el mismo nmero de elementos y su aspecto debe ser claro y distintivo frente al resto de elementos que componen un sitio Web.

MARCOS. Los marcos o bloques o mejor llamados, dentro del mbito de desarrollo, frames son una alternativa como elementos para la distribucin espacial de contenido en los sitios Web. Generalmente los marcos se deberan emplear con el fin de fijar una subventana del explorador y dejar que la otra subventana sea la que se est refrescando, de tal manera que d la sensacin de mayor velocidad de cargue. A continuacin se simula un sitio cuya ventana de exploracin est dividida por tres frames, el superior el cual contiene el logo en la parte superior izquierda seguido del nombre de la empresa, en la parte superior derecha de este frame se puede escribir el nombre del departamento o rea que se est visitando y en la parte inferior del frame se localiza unos botones de navegacin primaria. En el frame del lado izquierdo de la ventana de exploracin se encuentran vnculos o botones de navegacin primaria, estos pueden detallar un poco ms el contenido del sitio.

29

En el frame de la parte inferior derecha, la cual es la subventana ms grande es la que se emplear para exhibir la informacin de las pginas invocadas en los elementos de exploracin encontrados en los otros frames.

La arquitectura de esta estructura de ventana consiste en realidad de cuatro pginas (html, asp, jsp, o php) en las cuales la principal contiene la informacin de la organizacin de la ventana del explorador y el orden en que estn invocadas, otra pgina que es el frame superior de la cual solo se exhibe una parte, lo mismo ocurre con la pgina invocada en el frame izquierdo y con la pgina invocada en el frame inferior derecho o pgina de presentacin de la informacin.

Trate de evitar el uso de marcos pensando en la estructura de la pgina, hgalo pensando en la facilidad de exploracin, adicionalmente cuando decida emplear marcos tenga presente de controlar los ms grandes desde los marcos ms pequeos.

A continuacin se da un ejemplo, primero se muestra el cdigo de la pgina asp de la cabecera:

Cabecera About Jobs Products

Empresa Ubicacin en el sitio

1. Elementos de navegacin primarios

2. Elementos d

e navegacin

primarios

rea de actualizacin y

presentacin de la informacin

30

Contact News Help Jobs DEMO Inc.

El frame de la izquierda tiene el siguiente cdigo:

Contenido about Jobs Products Contact News Help

El frame principal o de publicacin tiene:

Principal Este es el frame PRINCIPAL

El frame que contiene y agrupa los otros frames (pginas) y los exhibe en uno solo es:

Home

31

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; } } else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //-->

Concntrese en el ltimo segmento de cdigo donde se invocan las otras pginas para integrarlas en una sola con cierto tamao.

SUBVENTANAS.

Existen otro tipo de objetos a los que se puede recurrir para publicar informacin o manipularla dentro de un entorno de ventanas, pero con la diferencia de no dejarle al usuario los controles tradicionales de guardar, abrir, siguiente, etc. y todas aquellas opciones que se encuentran en los browsers.

Supongamos ahora que al ejemplo Demo del anterior tema le aadimos la funcionalidad que muestre una ventana flotante con algn mensaje, entonces se tendra el siguiente nuevo cdigo del frame izquierdo:

Contenido

32

{remotewindow = window.open("ventanita.asp","remote","toolbar=0 location=0, directories=0, status=1, menubar=0, resizable=0, copyhistory=0, width=200, height=200", false); } // --> about Jobs Products Contact News Help Ventanita Por otro lado se tendra que crear la pgina asp invocada en la funcin de javaScript, utilizando el siguiente cdigo: Untitled Document Esta es una prueba de una ventana flotante

El resultado final de este cdigo sera:

33

ACTIVIDADES. Navegando en Internet, ample la informacin de la sesin y escriba un ensayo que argumente cuales son los elementos necesarios para la creacin de un sitio Web funcional, despus elabore en papel un diseo, orientado a los usuarios, para un sitio Web de promocin de servicios de red.

http://www.sav.us.es/formaciononline/creaciondesitiosWeb/apartados/apartado1-0.asp, es una pgina donde podr revisar el proceso de creacin de un proyecto Web en su parte de estructura de navegacin.

Pruebe el funcionamiento del cdigo HTML de los ejemplos anteriores en el explorador.

Repase y estudie los conceptos de html y de JavaScript que no haya entendido en el cdigo escrito anteriormente, seguido a esto en el cdigo anterior de todas las pginas cambie la extensin asp de los archivos por html y pruebe la funcionalidad.

AUTOEVALUACIN. Cules son las principales acciones a tomar para mantener al usuario conectado el sitio Web, en espera de una respuesta?

Cules son las principales caractersticas a implementar, para estimular al usuario, a navegar por el Sitio Web.

Cules son las principales acciones a tomar para mantener al usuario conectado el sitio Web, en espera de una respuesta?

Que se debe tener en cuenta en la construccin de un sitio Web, para que ste permanezca en la memoria de los usuarios?

Qu diferencias existen entre los sitios estticos, dinmicos e interactivos?. Elabore un cuadro comparativo.

Qu diferencias similitudes existen entre los sitios estticos, dinmicos e interactivos?. Elabore un cuadro comparativo. Cul es el tipo de estructura Web, ms aconsejable para el desarrollo de un Sitio Web. Por qu?

Elabore un cuadro comparativo de ventajas y desventajas de las diferentes tipos de estructuras Web.

34

Construya una pgina Web principal con un frame superior en donde se inserte un logotipo y un hipervnculo que llame a una ventana flotante, en el frame inferior y ms grande. Anexe contenido a gusto.

Construya una pgina Web en donde utilice texto referente a frames y construya una pgina en donde haya texto referente a Subventanas (ventanas flotantes)

Construya una pgina Web en forma de ventana flotante en la que existan dos hipervnculos para que se puedan invocar las dos pginas de los puntos anteriores.

BIBLIOGRAFA. DISEO DE SITIOS WEB. Manual de referencia. Thomas a. Powell. McGraw Hill EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson, Booch and Rumbaugh. Editorial Addison Wesley. Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw Hill. XML, Elizabeth Castro. Editorial Prentice Hall. Active Server Pages 3.0. Serie Prctica. Nicholas Chase. Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial McGraw Hill Microsoft Press. Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall. DISEO DE SITIOS WEB. Manual de referencia. Thomas a. Powell. McGraw Hill EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson, Booch and Rumbaugh. Editorial Addison Wesley. Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw Hill. XML, Elizabeth Castro. Editorial Prentice Hall. Active Server Pages 3.0. Serie Prctica. Nicholas Chase. Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial McGraw Hill Microsoft Press. Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall. Pgina de la Universidad de Sevilla. http://www.sav.us.es/. DISEO DE SITIOS WEB. Manual de referencia. Thomas a. Powell. McGraw Hill EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson, Booch and Rumbaugh. Editorial Addison Wesley. Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw Hill. XML, Elizabeth Castro. Editorial Prentice Hall. Active Server Pages 3.0. Serie Prctica. Nicholas Chase. Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial McGraw Hill Microsoft Press. Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall.

35

2. UNIDAD 2: VNCULOS, BSQUEDAS Y TIPOGRAFA

2.1 INTRODUCCIN. En una solucin de software generalmente los mdulos se interrelacionan entre s por un gran contendor de los botones o mens que los activa o invoca, este gran contenedor es la ventana o formulario principal o de arranque y desde l se puede acceder a los diferentes mdulo; Los elementos que nos permiten acceder a otros formularios generalmente son botones, en la Web sucede algo mucho ms completo, existen ms elementos que permiten ir de una pgina a otra y se puede volver a casi cualquiera debido a esa riqueza de vnculos encontrados para salto.

Por otro lado las bsquedas rpidas generalmente son la clave del xito en la adquisicin de informacin para la toma de decisiones o para la realizacin de actividades; por lo tanto es necesario entender qu es y cmo se realiza una bsqueda.

La sensacin de no saber en donde se encuentra ubicado genera desconfianza y cierto rechazo a regresar a dicho lugar, por lo cual se hace importante valerse de mtodos o elementos estratgicos que brinden la seguridad a los usuarios de ubicarlos y dales la confianza necesaria y tranquilidad para que naveguen por todo el sitio sin temor de no saber regresar a la pgina en particular que les interesaba.

OBJETIVO GENERAL. Dar a conocer los diferentes tipos de elementos que pueden servir como vnculos y otras herramientas que mejoran la navegacin y la visibilidad de nuestro sitio Web en Internet as como la manera en que se utilizan, adicionalmente se dan recomendaciones sobre su mantenimiento.

ESTRUCTURA TEMTICA. El modelo bsico de vnculos web. Temas de implantacin de vnculos. Soporte de teclados para vnculos. Mantenimiento de los vnculos. Vnculos estticos. Vnculos dinmicos. Vnculos de texto. Vnculos de botones. Vnculos en imgenes

36

2.2 CAPITULO 4: VNCULOS: TEXTO, BOTONES, CONOS Y GRFICOS

2.2.1 LECCIN 16: VNCULOS EN EL DISEO WEB Diversas definiciones y variados conceptos nos permiten definir lo que es un vinculo Web o hipervnculo como es conocido popularmente, para ser un poco ms prcticos definiremos al vinculo como el objeto que sirve de enlace entre un documento Web y otro, lo que nos permite mejorar de gran manera la navegacin para nuestros sitios, he ah su gran importancia y la necesidad de un acertado uso de los mismo en el diseo Web. EL MODELO BSICO DE VNCULO WEB.

El modelo bsico de vnculo Web obedece a una sintaxis bastante sencilla afortunadamente:

El elemento A denota una ancla--un eslabn del hipertexto o el destino de un eslabn. El atributo de HREF especifica un eslabn del hipertexto a otro recurso, como un documento de HTML o una imagen de JPEG. Ejemplos:

My photo album Picture of me Auld Lang Syne (5 kB MIDI) Section 2 [email protected] Web Design Group ISO 639 8705869

TEMAS DE IMPLANTACIN DE VNCULOS.

Los vnculos deben ayudar y no obstaculizar el manejo y la navegacin a travs del sitio. Los vnculos deben ser de fcil manejo y con caractersticas claramente definidas que permitan distinguir los que han sido empleados de los que no, adicionalmente no se recomienda ser muy folklrico en la decoracin de ellos y por otro lado intente definir un estndar para el diseo de todos los vnculos de su sitio.

37

SOPORTE DE TECLADOS PARA VNCULOS.

Como se haba mencionado en apartados anteriores, al igual que las aplicaciones normales la Web debera brindar a los usuarios la mayor cantidad de facilidades a los usuarios, y por esto desde cierta versin de los exploradores ya se admiten nuevos atributos que permiten el uso del teclado para la navegacin, tal es el caso del atributo AccessKey el cual permite la navegacin por medio del teclado. A continuacin se escribe un cdigo para que el estudiante lo entienda y lo aplique en la tarea colocada sobre tres pginas Web y una ventana flotante. Ejemplo:

Products

MANTENIMIENTO DE LOS VNCULOS.

Una de las nuevas metodologas para el desarrollo de sitios es la creacin y asignacin dinmica de vnculos lo cual ayuda a evitar que existan vnculos rotos, por otro lado (ms vale la seguridad que la polica), es mejor estar revisando peridicamente la referenciacin y el funcionamiento de los vnculos del sitio. En caso de que ya tenga concebida la estructura de su sitio pero todava est en fase de construccin no espere que salgan las horrorosas pginas de error 404 pgina no encontrada, a cambio disee una pgina de error elegante (con un vnculo que le permita regresar a su pgina principal) y redireccione a esta en el manejo de errores de su sitio o disee una pgina elegante de est en proceso de publicarse pero por favor escriba la fecha de cundo estar en produccin dicha pgina, pues no hay nada ms desalentador que una espera eterna...

VNCULOS ESTTICOS.

Un vnculo esttico es aquel cuya referencia de destino ha sido especificada en el ancla (.....) en la implementacin del documento HTML.

VNCULOS DINMICOS.

Un vnculo dinmico no tiene un referencia final fija. El documento destino se determina en el momento de ver la pgina, segn el entorno y las necesidades del usuario.

VNCULOS DE TEXTO.

Por medio del elemento ancla, se establecen los vnculos de textos. La manera de emplear dicha etiqueta es {Texto que lleva el vnculo}

38

VNCULOS DE BOTONES.

Se pueden emplear grficos (bmp, Gif, o jpg) en la creacin de botones mediante aplicativos como FireWorks, Flash, DreamWeaver, Xara, Swift, etc..., el gran inconveniente es que al cargar mucha imgenes, el despliegue de la pgina html en el cliente puede ser demorado; una de las maneras de agilizar el proceso de carga es la de crear botones en HTML, aunque si bien el diseo es muy simple puesto que se emplearan celdas o tablas sencillas, un relleno y un texto, a cambio se obtendr una gran velocidad de despliegue en el browser.

En ciertas herramientas de desarrollo como las anteriormente mencionadas, ya hay diseos prediseados de botones lo cual facilita el trabajo de los diseadores y desarrolladores, pero de igual manera un diseador puede disear su propio estilo de botones.

VNCULOS EN IMGENES.

Para ponerle ms interaccin a un documento y volverlo atractivo se pueden emplear imgenes llamativas que permitan a los usuarios navegar a diferentes lugares del sitio, a continuacin se escribe el cdigo fuente de un documento que cuando se pasa el cursor sobre la imagen, sta cambia y s se hace clic sobre esta ltima entonces lleva al usuario a otra pgina htm (a esto se le llama Rollover Image):

Imgenes

39

function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for (i=0;a&&i0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); } if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

40

La pgina original es la de la izquierda y cuando se pasa el cursor sobre la imagen entonces se observa la de la derecha:

2.2.2 LECCIN 17: BSQUEDA, DISEO Y MOTORES DE BSQUEDA.

ACTIVIDAD Descargue el documento ch09.pdf encontrado en el sitio Web: www.Webdesignref.com/chapters/ch09.htm donde encontrar desarrollados los temas de esta sesin.

Bsqueda y diseo

Muchos usuarios encontraran que la exploracin tradicional es un mtodo poco eficiente de encontrar lo que estn buscando. Muchas veces, un usuario sabe que existe algo, y necesita encontrarlo dentro de un sitio. La bsqueda atrae a los usuarios expertos, a los visitantes frecuentes y a los impacientes, que quieren obtener algn resultado rpidamente. Una facilidad de bsqueda bien ejecutada es una ventaja de primer orden que tiene un sitio sobre los medios de comunicacin impresos, puesto que concede al usuario un control importante sobre el contenido del sitio, permitindole filtrar exactamente lo que desea ver. Los sitios Web ms grandes, especialmente aquellos con datos muy complejos, tienen

41

que ofrecer algn tipo de facilidad de bsqueda y pueden hacer de ella el mtodo de exploracin central. Las facilidades de bsqueda, sin embargo, tienen que disearse teniendo en cuenta a los usuarios. Tenga muy presente, antes de incluir un sistema de bsqueda en un sitio, la forma en que los usuarios esperan que funcione la bsqueda, el tipo de bsqueda que necesitan, el diseo de la pgina de bsqueda, el sistema de ayuda y los listados de resultados de una bsqueda. .

Cmo los Usuarios Investigan.

Definicin: Un directorio Web es un conjunto de vnculos de sitios y su in-formacin asociada, tal como descripciones o reseas, organizado y editado por personas.

Definicin: Un motor de bsqueda es un recopilador y organizador automtico de la informacin de los sitios al que los usuarios pueden dirigir sus solicitudes.

Antes de comenzar con la teora de cmo funcionan y cmo utilizar los motores de bsqueda, tanto locales como extremos, para mejorar el diseo del sitio, piense primero como utiliza la gente las facilidades de bsqueda.

La gente busca por muy variadas razones. Un buen motivo es cuando quieren encontrar algo que saben que existe. Un ejemplo de una bsqueda de un elemento conocido es cuando un usuario est buscando un repuesto determinado, como RBA-4456. En este caso, es bastante fcil para una persona localizar el elemento en cuestin, suponiendo que la facilidad de bsqueda lo haya visto con anterioridad especialmente, si el elemento es nico o casi nico. A veces, sin embargo, el usuario no sabe si el elemento que est buscando existe o no; de hecho, puede realizar la bsqueda para ver si ese elemento existe. Una solicitud tal como Robot shops (talleres de robots) es una bsqueda ms general, en la que el usuario busca un taller en el que pueda reparar su robot. Otras veces, el usuario puede estar realizando una bsqueda exploratoria para comprobar la magnitud o extensin de algo. Por ejemplo, puede hacerse una solicitud tal como Robot Butler, no solamente para saber si existe, si no para saber la cantidad de sitios que ofrecen informacin sobre los sirvientes metlicos. Afortunadamente, los usuarios utilizan, generalmente, los motores de bsqueda para localizar elementos conocidos, pero, de todas maneras, las bsquedas para comprobar la existencia de algo y las bsquedas exploratorias tambin se emplean con frecuencia.

Independientemente del motivo de la bsqueda, los usuarios pasan por las cuatro fases bsicas siguientes.

42

Formulacin de una pregunta

Dependiendo de la facilidad de bsqueda que se utiliza, la pregunta realizada por el usuario puede variar mucho. Una pregunta sencilla podra incluir solamente palabras clave como Robot Butler. Las solicitudes ms complejas podran incluir preguntas problemas como Robot AND Butler. Muchos motores de bsqueda utilizan preguntas plagadas de smbolos, tales como +Robot+Butler-Jeeves. El motor de bsqueda puede soportar incluso una interfaz de lenguaje sencillo en la que el usuario puede preguntar algo como /,donde puedo comprar un robot butler?. La formulacin de la pregunta podra incluir no solamente la seleccin de varias palabras, sino tambin el refinamiento del criterio de bsqueda, tal como la indicacin de las zonas de bsqueda, un rango de fechas, tipos de datos, etc. Los usuarios tambin pueden especificar como desean los resultados de la bsqueda diez cada vez, ordenados por la fecha de su ltima actualizacin, etc. Sin embargo, los criterios adicionales, aparte de las palabras clave, forman parte de una bsqueda avanzada, que realizan solamente los usuarios con ms experiencia.

Ejecucin de la bsqueda y espera de los resultados La segunda fase de una bsqueda consiste en hacer clic sobre un botn mas una corta espera, mientras que el motor de bsqueda interpreta la pregunta y prepara una lista con los resultados. Aunque no hay mucha interactividad durante esta fase, no conviene ignorarla. El usuario ve esta fase como un paso discreto dentro del proceso, y no esperar durante mucho tiempo hasta que aparezcan los resultados.

Examen de los resultados

Cuando los resultados aparecen en la pantalla, el usuario los examinara atentamente para ver si hay algo interesante. Durante este examen, el usuario confiar en la informacin suplementaria que se le da, tal como la clasificacin por relevancia y la descripcin de los resultados, incluyendo resmenes, fechas de las modificaciones y tamaos de los archives. Durante esta fase, el usuario ordenara o filtrar los resultados para decidir qu hacer. Sin embargo, la toma de una decisin depende, fundamentalmente, de lo que se ha obtenido como resultado de la solicitud. Los resultados pueden variar, desde los llamados negativas, que no contienen nada, hasta el otro extremo, que sera la obtencin de un enorme volumen de datos o incluso todos los documentos de un conjunto. La mayora de los casos se encontrarn en un punto intermedio entre la no existencia de documentos y la de todos los documentos existentes en el espacio buscado.

43

Decisin sobre qu hacer con los resultados

Segn los resultados, el usuario decide que hacer. Por ejemplo, si no hay resultados, el usuario puede realizar una nueva bsqueda mediante otra pregunta, o puede dejarlo. Si la bsqueda no produce los resultados esperados, tambin pueden realizar una nueva bsqueda. Cuando la bsqueda proporciona demasiados resultados, el usuario intentara mejorar el criterio de bsqueda y puede que seleccione algunos de los documentos obtenidos como resultado de la bsqueda para examinarlos. Aunque puede haber muchas variaciones en los resultados, bsicamente, el usuario decide entre examinar algunos de los resultados, volver a realizar o refinar la bsqueda o, simple-mente, marcharse.

Es importante tener una visin global de esto y no olvidarlo cuando se disea una facilidad de bsqueda. Ms adelante, en este captulo, ofreceremos sugerencias tericas y prcticas para el diseo, para ocuparse de cada uno de las fases por las que pasa el usuario durante el proceso de bsqueda. Sin embargo, antes, le explicaremos, de forma somera, cmo funcionan los motores de bsqueda.

Funcionamiento de los motores de bsqueda

Cmo funcionan los motores de bsqueda? En primer lugar, renen un gran nmero de pginas fuera de la Web mediante un proceso denominado spidering. A continuacin, se catalogan las pginas recogidas para averiguar de qu tratan. Finalmente, se prepara una pgina de bsqueda para que los usuarios puedan hacer all sus preguntas y ver qu informacin est relacionada con ellas. Una buena analoga de este proceso es pensar que los motores de bsqueda preparan el mayor montn de heno posible; luego, intenta organizar el heno de alguna manera, y, finalmente, el usuario intenta localizar la proverbial aguja en el montn de heno (informacin) resultante introduciendo una pregunta en una pgina de bsqueda.

Recopilacin de pginas

Cada da, la Web crece ms. No se conoce el verdadero tamao de la Web, y no hay ninguna duda de que estar creciendo mientras lee esta frase. En un determinado momento, se aaden y se retiran numerosos documentos. La recopilacin de todas las pginas y mantenerlas actualizadas supone un trabajo importante. Los usuarios quieren saber que motor de bsqueda es el que cubre mas parte de la Web, pero la verdad es que, actualmente, incluso los motores de bsqueda mayor, solo contienen, aproximadamente, un tercio de los documentos en lnea. Algunos solo incluyen un pequeo porcentaje.

44

Esto puede cambiar en el futuro, pero, por ahora, este contento, porque no todo est incluido en estas listas. El maremagnun de informacin resultante empeorara las cosas. La mayora de los motores de bsqueda utilizan programas llamados spiders, Dbots o gathers para recopilar pginas de la Web y catalogarlas. Utilizaremos el trmino spider para referirnos a cualquier programa que se utilice para recopilar pginas Web. Los spiders comienzan con un cierto nmero de direcciones URL, propuestas por la gente que quiere estar en su lista, o formando direcciones URL de los nombres de dominio listados en el registro de nombre de dominio. Cuando el spider visita las diversas direcciones de la lista, guarda las pginas, o partes de ellas, para analizarlas y busca los vnculos para seguirlos. Por ejemplo, si el spider visita la direccin URL http://www.democompany.com, podra encontrar vnculos que parten de esta pgina y decidir seguirlos. No todos los motores de bsqueda listan las pginas situadas muy en el interior del sitio, pero la mayora suelen seguir los vnculos esencialmente desde las pginas que disponen de buenos vnculos o que poseen mucho contenido.

Indexado de las pginas

Lo siguiente que hace un motor de bsqueda es intentar determinar en qu pgina esta. A esta operacin se la suele llamar indexing (indexado). Cada motor de bsqueda utiliza un sistema distinto, pero, bsicamente, un indexador mira varios componentes de la pgina, incluyendo posiblemente su , los contenidos de sus etiquetas . Comentarios, ttulos de los vnculos, texto de los titulares y el texto principal. A partir de esta informacin tratara de descifrar el contenido de la pgina. Cada uno de los aspectos de una pgina podra tener distinta importancia y, dentro del texto real, tambin habr que tener en cuenta la posicin o la frecuencia de diversas palabras. Sin embargo, al motor de bsqueda no le interesa todo el contenido de la pgina. Por ejemplo, las palabras de parada son palabras que ignora un motor de bsqueda, generalmente porque se supone que son tan comunes que contienen poca informacin til. Ejemplos de palabras de parada podran ser el, una, uno, etc. La mayora de los motores de bsqueda tienen algunas palabras de parada, pero algunos, como AltaVista, afirman que listan incluso palabras de parada como el.

Aunque la utilizacin de palabras de parada puede mejorar un motor de bsqueda, limitando el tamao de archivo de indexado y permitindole centrarse en palabras con ms contenido, puede dificultar la equivalencia con las preguntas de los usuarios. Los usuarios novatos pueden pensar que la solicitud The Best Butler Robot (el mejor robot Butler) es mejor que Best Butler Robot (mejor robot Butler). Algunas veces, las palabras de parada son

45

importantes para la bsqueda. Piense en una bsqueda de un titulo de cancin como Rock the Town (baila la ciudad); la es una parte integral del ttulo, y sin ellas pueden surgir muchas otras canciones. Sin embargo, si el titulo fuera Rock the Casbah (baila la Casbah), sera preferible no utilizar la palabra la, porque las palabras baila y Casbah, muy probablemente, no aparezcan juntas ms que en el titulo de la cancin buscada. Decidir sobre que palabras de parada deben utilizarse puede ser bastante problemtico, como consecuencia del nmero ilimitado de temas que abarca la Web. Una vez analizada la pgina segn sus palabras clave, se clasifica con las otras pginas que tienen palabras clave similares y se almacena en la base de datos. Esta clasificacin es uno de los secretos del funcionamiento de los motores de bsqueda. Como decide un determinado motor de bsqueda que una pgina es ms importante que otra, es lo que los especialistas promotores de motores de bsqueda intentan adivinar.

Provisin de un mecanismo de bsqueda

El aspecto final de un motor de bsqueda es la pgina de bsqueda misma. Una pgina de bsqueda es la Interfax, en la que los usuarios hacen sus solicitudes y, generalmente, contiene una ventana principal para introducir las preguntas, y otros campos de bsqueda para usuarios avanzados que deseen modificar la solicitud. Por ejemplo, observe la Interfax de NorthernLight (www.northernlight.com). El grado de complejidad de las pginas de bsqueda, de los motores de bsqueda pblicos, vara enormemente. Observe la diferencia entre el formulario de bsqueda avanzada HotBot y la Interfax biisiea Goto.com.

Las preguntas introducidas por los usuarios pueden variar, desde sencillas pre-guntas en lenguaje normal, como, por ejemplo, /,por que el cielo es azul?, alentadas por sitios como www.ask.com, hasta complejas expresiones booleanas y otros tipos de filtros. Una vez realizada la pregunta, el motor de bsqueda escoger las pginas que cumplen con el criterio y las presentar en una pgina de resultados.

En esta pgina de resultados. el usuario puede elegir algunos de los documentos para examinarlos, puede realizar una nueva bsqueda, ms refinada, mediante una nueva pregunta, o puede, simplemente, darse por vencido e intentar localizar de otra manera lo que est buscando.

Es importante saber qu es lo que la gente espera que haga un motor de bsqueda en toda la Web, porque los usuarios, cuando realicen una bsqueda con la facilidad de bsqueda de su sitio, aportaran sus experiencias anteriores.

46

El etiquetado, la disposicin y las pginas de resultados deberan imitar a lo que los usuarios esperan de los motores de bsqueda pblicos. Sin embargo, tenga cuidado de no imitar exactamente lo que hacen los motores de bsqueda pblicos, ya que no siempre son muy precisos; generalmente, estn orientados hacia las exigencias de los anunciantes y la necesidad de evitar los numerosos trucos que, para intentar mejorar la clasificacin de sus sitios, emplea la gente. Afortunadamente, nadie dentro de una organizacin va a recurrir a ningn truco para mejorar la clasificacin de una pgina dentro de una bsqueda local. Los motores de bsqueda local pueden crearse con la confianza de que sern ms precisos.

Regla: Aproveche las experiencias anteriores del usuario con los motores de bsqueda utilizando disposiciones y etiquetados similares en el diseo de facilidades de bsqueda local, pero no imite los aspectos de los motores de bsqueda pblicos relacionados con la incontrolable naturaleza de los sitios Web pblicos.

Antes de analizar la adicin de un buscador local, fijmonos en como los diseadores intentan utilizar los motores de bsqueda y otras facilidades para promocionar y dirigir el trfico a su sitio. No es, en ningn caso, un anlisis completo de un tema que, literalmente, cambia cada semana. Los lectores que deseen una informacin ms actualizada pueden dirigirse a los numerosos sitios motores de bsqueda de la Web, especialmente a Search Engine Watch (www.searchenginewatch.com).

2.2.3 LECCIN 18: COMO AJUSTARSE Y SER VISIBLE PARA LOS MOTORES DE BSQUEDA El primer paso para que un sitio pueda ser encontrado en la Web es que un motor de bsqueda recopile sus pginas. La forma ms fcil de hacer esto es, sencillamente, decir a los motores de bsqueda que su sitio existe. La mayora de los motores de bsqueda le permitirn incluir una direccin URL para indexarla. Por ejemplo, Lycos le permitir incluir un sitio para indexarlo mediante un sencillo formulario (http://www.lycos.com/addasite.html). Por supuesto que aadir su sitio a todos y cada uno de los motores de bsqueda existentes puede ser una tarea tediosa, por lo que muchos fabricantes (http://www.submit-it.com) ofrecen herramientas de desarrollo con un sistema para ofrecerse en masa a numerosos motores de bsqueda. La mayora del software de promocin de sitios, tal como WebPosition Gold (http://www.webposi tion.com/). Tambin incluyen utilidades para realizar un ofrecimiento automtico.

47

Una cuestin importante es, a cuantos motores de bsqueda debera ofrecer su sitio? Algunos estn a favor de incluir solo unos pocos vnculos a los diez motores ms importantes, especialmente Yahoo! Numerosos estudios, y la experiencia del autor, sugieren que los grandes sitios de bsqueda, especialmente Yahoo!, acaparan la mayor parte del trafic referido a motores de bsqueda. Sin embargo, algunos expertos en promocin de sitios creen que esto no es as, y que es mejor crear el mayor nmero posible de vnculos, con todos los sitios posibles. De hecho, una clase completa de sitios de vnculos llamada Free For All (gratis para todos), o sitios FFA, (no confundir con Future Fanners of Amrica, futures granjeros de Amrica), da servicio a la gente que piensa que la idea de que todos los vnculos deberan llegar a mi funciona. La realidad es que la mayora de estos vnculos son poco menos que intiles y, a menudo, generan un trfico intil y mensajes basura. Adems, tenga en cuenta que, si usted recibe de vuelta vnculos y correo electrnico, la mayor parte provienen de gente que est haciendo lo mismo que usted tratando de conseguir vnculos.

Exclusin del Robot

Antes de involucrarse demasiado tratando de incluirse en todos los motores de bsqueda, piense que no siempre es una buena idea que un robot indexe completamente su sitio, independientemente de que sea un motor de bsqueda interno o uno pblico. En primer lugar. Piense que algunas pginas, tales como programas en su directorio cgi.bin no necesitan ser indexadas. En segundo lugar, muchas pginas pueden ser transitorias, e indexarlas puede dar como resultado la presentacin a los usuarios del error 404. Finalmente, usted puede querer que la gente no entre en todas sus pginas especialmente en esas situadas muy en el interior del sitio. Los denominados vnculos profundos pueden ser confusos para los usuarios que entran mediante motores de bsqueda pblicos. Piense que, puesto que estos usuarios comienzan profundamente en su sitio, no se les presenta la pgina principal o la informacin de la pgina de acceso, que se utiliza frecuentemente para orientar a los visitantes del sitio.

Probablemente, el aspecto ms problemtico de los motores de bsqueda y de las herramientas de recopilacin automtica, tales como exploradores sin conexin, es que pueden utilizarse para ejecutar un ataque de denegacin de servicio sobre un sitio. La idea bsica de la mayora de los spiders es leer y seguir las pginas lo ms rpidamente posible. Imagine que le pide a un spider que recorra un sitio lo ms rpido que pueda. Todas las solicitudes al servidor recorrido pueden sobrepasarle rpidamente, dando como resultado que el sitio sea incapaz de satisfacer las solicitudes y, como consecuencia,

48

denegando servicio a los legtimos visitantes del sitio. Afortunadamente, la mayora de la gente no hace esto de forma maliciosa, pero puede suceder de forma inadvertida cuando un spider indexa continuamente una misma pgina generada dinmicamente.

Robots.txt

Para solucionar la Ilimitacin de acceso del robot, se ha adoptado el protocolo Robot Exclusin. En este protocolo se utiliza un archivo especial, llamado robots.txt, que debera encontrarse en el directorio de un sitio Web. For ejemplo, si un spider va a indexar http://www.democompany.com, primero buscar un archivo en http://www.de mocompany.com/robots.txt. Si encuentra el archivo, lo analizar antes de continuar con el indexado del sitio.

Si tiene un sitio como

Diseño de Sitios Web

Documents

Transcript of Diseño de Sitios Web