Planificar,analizar yorganizar

Planificar un proyecto 14El tipo de sitio 16El pblico del sitio 16

Qu molesta a los usuarios 17El contenido 19

Distintas pginas 20Qu tecnologas utilizar 21El equipo de trabajo 22Organizar y estandarizar el trabajo 23Resumen del captulo 23Ejercicios para hacer 24Cuestionario 24

Captulo 1

Para hacer un sitio web no basta

con un buen diseo ni con el contenido.

Lo ms importante, y desde donde

se debe partir para poder desarrollar

el resto de los elementos, es una buena

planificacin.

En este captulo desarrollamos distintas

posibilidades para planificar, analizar

y organizar nuestro futuro sitio web.

DISEO WEB

SERVICIO DE ATENCIN AL LECTOR: lectores@tectimes.com

Planificar un proyecto

Planificar un sitio web implica, mucho antes de trabajar en Dreamweaver o el progra-ma que utilicemos para armar el sitio, pensar y definir claramente muchas cuestionesde importancia. Algunos de estos puntos son: Tema: por supuesto, gran parte de este punto estar definido con la propuesta, con

el pedido de la realizacin del sitio por parte del cliente. Sin embargo, es muy im-portante definir lo ms claramente posible la temtica general (y particular) que sevan a tratar en las distintas pginas, para poder establecer los elementos y la est-tica que se utilizarn.

Pblico: esto ayudar a definir el diseo y la navegabilidad del sitio. No ser lo mis-mo generar una propuesta para nios, adolescentes o gente mayor ni para un pbli-co en general que para usuarios avanzados de Internet. Las formas de lectura, las ti-pografas a utilizar, los colores, la complejidad del sitio dependern de este punto.

Estilo general: al comenzar, es importante tambin tener una idea del estilo gene-ral que se quiere mostrar, formal, informal, con alguna tendencia artstica particu-lar, etc. Por supuesto, este punto puede definirse ms adelante, pero siempre es me-jor tener alguna pista al comienzo.

Elementos que requiere el sitio: segn su contenido, se debern generar diversoselementos: animaciones, paneles de control para quien actualiza el sitio, bases de da-tos, formularios, elementos dinmicos, etc. Es importante prever esto tanto para po-der presupuestar el trabajo as como para planear los tiempos y el modo de trabajo.

Tiempo de realizacin: este punto es fundamental para el planeamiento del traba-jo. Hay que definir el tiempo total que llevar generar el sitio, as como los tiemposde entrega parciales (cundo se mostrar el diseo al cliente para su aprobacin,cundo se realizarn las pruebas de navegabilidad, etc.). Todo esto tambin depende-r de los recursos que se tengan para trabajar, la complejidad del sitio y el tiempo quedispone el cliente para su realizacin.

Cmo se va a organizar el trabajo: una vez definidos los principales aspectos, habrque determinar cmo se dividir el trabajo y en qu tiempos se realizar cada etapa.

Estos temas sern claves para el trabajo posterior y, aunque parezca innecesario o notengamos demasiado tiempo para hacerlo, es imprescindible tomarse cierto tiempo alcomienzo y definirlos lo ms claramente posible.Si se trata de un sitio para otra persona, parte de estas decisiones habr que definir-las con el cliente, quien nos dir lo que espera del trabajo y establecer junto connosotros lo que se quiere y puede lograr (sobre todo, basndonos en los recursos quetenemos, tiempo y dinero). Si se trata de un sitio personal, si bien parece muchoms sencillo, es cuando se suele tener mayores problemas con este punto, ya que

DISEO WEB

14

muchos creadores de sitios web piensan que alcanza con tener la idea en la cabeza.Sin embargo, resulta primordial definir estos aspectos en forma clara para luego uti-lizar todos los recursos y fuerzas disponibles para realizar lo que nos propusimos, loantes posible, sin dar demasiadas vueltas, y de esta forma ahorrar esfuerzos, recur-sos y asegurarnos buenos resultados.

Figura 1. Si bien un sitio comercial y establecido lleva una organizacin

con ms elementos y personas trabajando en l que un sitio pequeo o personal,

el proceso de organizacin y los elementos a definir son bsicamente similares.

Planificar un proyecto

15

Plan

ific

ar, a

naliz

ar y

org

aniz

ar1

HISTORIA DEL DISEO

La esttica de los sitios fue evolucio-nando rpidamente. En la seccinWeb, del sitio www.archive.org, po-dremos acceder a un archivo histricoque nos muestra el diseo que cual-quier sitio tena hace dos o tres aos.

El tipo de sitio

Definir y tener una idea clara acerca del tipo de sitio servir tanto para el diseo co-mo para generar correctamente todos los elementos que lo conformarn. Tambinser fundamental ubicar el sitio en una categora temtica. Aunque sea difcil la de-finicin de un tema especfico, esto es necesario, ya que permitir tambin la bs-queda de otros sitios similares en Internet.Lo ideal ser definir lo ms claramente posible los objetivos del sitio. Por ejemplo, no so-lo deberemos pensar que se trata de un sitio de ventas on line, sino tambin qu tipo deproductos, si ser una tienda exclusivamente en lnea o ser una extensin de nuestro ne-gocio real, de qu forma se presentarn los productos, el nivel de precios, los modos de en-trega y cualquier otra especificacin que haga al modo de operar del sitio. De esta mane-ra, nosotros mismos comprenderemos dnde queremos que se ubique nuestro sitio conrelacin al resto y ser mucho ms sencillo realizarlo y llegar a esos primeros objetivos.

El pblico del sitio

Otro tema fundamental para comenzar a trabajar es el pblico general al que estar di-rigido el sitio. Basndonos en algunos datos estadsticos, como edad, sexo, hbitos deconsumo, etc., podremos disear un sitio que se adapte a los gustos y nivel cognosci-tivo de ese pblico meta. Por supuesto, el sitio estar desarrollado para que sea senci-llo de navegar para la mayor cantidad posible de personas, pero si hay un pblico de-finido segn la temtica, las tareas de diseo y desarrollo pueden concentrarse en l yse vern notablemente facilitadas todas las tareas relacionadas.

En el diseo del sitio, deberemos tomar en cuenta el pblico en todo momento. Des-de la esttica general, colores, navegabilidad, hasta cada uno de los textos e imgenesque se coloquen en el sitio, harn que ese pblico no solo llegue hasta el sitio, sino quelo recorra e, incluso, que vuelva.

DISEO WEB

16

Adems de los datos sobre las personas, es muy importante tambin conocer mni-mamente algunos datos tcnicos sobre sus computadoras y conexiones. Como vere-mos ms adelante, a nuestro sitio web se conectarn usuarios con computadoras, sis-temas operativos, tamao de monitor, configuraciones, conexiones y programas na-vegadores distintos. Como desarrolladores web, nosotros deberemos considerar to-dos estos puntos y hacer sitios que puedan visualizarse correctamente en la mayorade las computadoras. A lo largo de este libro veremos cmo lograrlo.

Qu molesta a los usuarios

Adems de tener en cuenta al pblico al que est dirigido, hay que considerar muchascosas generales que suelen fastidiar a los usuarios de cualquier sitio. Exceptuando algu-nos sitios personales, cuyos objetivos excluyan explcitamente no resultar amenos o f-ciles de navegar, hay muchos tems que son recomendables evitar al disear un sitio web:

Obligacin de una resolucin o navegador determinado: un visitante tiene queestar demasiado interesado en nuestro sitio como para cambiar sus hbitos. Pense-mos en nosotros mismos al ingresar a cualquier sitio; si nos piden que cambiemosalgn parmetro de nuestro sistema, seguramente cerraremos la ventana y ni inten-taremos visualizarlo.

Figura 2. Este sitio incluso dispone de una seccin especialmente

dedicada a ensear al usuario a cambiar la resolucin.

Se imaginan siguiendo estos pasos tan solo para visualizar un sitio web?

El pblico del sitio

17

Plan

ific

ar, a

naliz

ar y

org

aniz

ar1

SOBRE LOS POP-UPS

Hoy existe una gran cantidad de he-rramientas que le permiten al usuariomatar los pop-ups antes de que apa-rezcan en pantalla. Por esto, los pop-ups tampoco pueden pensarse comoun sistema de publicidad efectivo.

Utilizacin o demostraciones desmedidas de tecnologa: muchas veces resultatentador para el diseador o desarrollador volcar en un sitio web todo lo que sabe ha-cer; esto sucede sobre todo con los novatos. En general, cuando esto sucede, se notaen el trabajo final: quedan sitios difciles de navegar y confusos, ya que el contenido(lo que realmente queremos hacerle llegar al visitante) se pierde en el contenedor (laimagen o funcionamiento del sitio).

Banners por doquier: demasiados banners en una misma pgina pueden entorpecerla navegabilidad, ya que pueden diferir la atencin de la barra de navegacin e inclu-so del contenido principal, derivando la vista hacia estos carteles llamativos. Adems,por ms que se traten de banners que difunden contenido del mismo sitio o mensa-jes importantes, para la mayora de los usuarios se considera como publicidad. Poreso, lo ideal es limitar la cantidad y la esttica de los banners en el sitio a los conte-nidos ms destacados, para que realmente cumplan su cometido.

Mltiples barras de navegacin: la forma cmo el usuario puede recorrer las dis-tintas secciones y pginas del sitio deber ser clara y fcilmente reconocible. Por es-te motivo, y exceptuando casos muy concretos, lo mejor es tener definida una ba-rra de navegacin central desde donde el visitante pueda llegar hasta donde lo de-sea de la forma ms rpida.

Pop-ups: en este sentido, resulta muy molesto para cualquier persona que al entrara un sitio se abran muchas ventanas, sobre todo si son de publicidad. Hay que tenercuidado con esto en aquellos servicios de hosting gratuitos. Pero tambin, en cmoelegimos que se abra cada una de las pginas a las que accede el usuario. Lo ideal esque todas se visualicen en una misma ventana (y si el usuario lo desea puede abrir va-rias, usando las herramientas del programa navegador).

Exceso de contenido por pgina: teniendo en cuenta que en la Web no hay mu-chas limitaciones de espacio, muchas veces en una misma pgina se coloca todo elcontenido que podra estar dividido en varias. Resulta muy difcil que una perso-na lea o incluso llegue a desplazar el contenido en una pgina de esas que nuncaterminan de visualizarse. Es preferible dividir la informacin en varias pginas; es-t comprobado que la lectura y concentracin frente al monitor es mucho menorque en impresos.

Secciones ambiguas, contenidos repetidos o mezclados: una correcta divisin y or-ganizacin de la informacin garantizan una navegabilidad fcil, o sea que el usuario

DISEO WEB

18

pueda ubicar rpidamente el contenido. Es importante, principalmente, que la divi-sin temtica en secciones est clara para quienes generan el contenido. Saber desdeel primer momento que un elemento corresponde a una seccin y no a la otra, harque quien busque esa informacin cuando ingresa al sitio, la encuentre sin esfuerzo.

A lo largo de este libro, iremos viendo los mejores modos de generar sitios web profe-sionales que eviten estos dilemas. Es posible hacer sitios agradables visualmente y fci-les de navegar, es solo cuestin de conocer algunos secretos, pensar bien lo que requie-ren los usuarios y planear correctamente todo el trabajo.

Figura 3. Este sitio combina muchos de los ejemplos mencionados anteriormente.

Intenta mostrar una gran cantidad de informacin en la pgina

principal y demasiados banners. Todo ello hace de la navegacin una tarea dificultosa.

El contenido

Todo el contenido de un sitio web est definido segn lo que se quiere comunicar.Esto implica que todo lo que se publique deber tener un sentido, para no interfe-rir en la comunicacin.En general, segn el sitio, el contenido podr ser variado. Adems de texto, puedenincluirse recursos grficos, como fotografas y dibujos de distintos tipos, y multime-diales, como animaciones, videos y sonidos. Tambin se pueden ofrecer archivos de

El contenido

19

Plan

ific

ar, a

naliz

ar y

org

aniz

ar1

HORIZONTAL O VERTICAL?

Existen tradicionalmente dos es-tructuras para los sitios web queresponden al tipo de contenido.Por sitios con estructura Vertical, seentiende aquellos que se centranen una nica temtica (por ejem-plo, msica, deportes, informtica,

etc.). Por sitios con estructura Hori-zontal, se entiende aquellos queengloban una gran cantidad de te-mticas diferentes; generalmentees el tipo de estructura que tienenlos grandes portales (como Terra oCiudad Internet).

distinto tipo para que el visitante descargue del sitio y utilice. En este sentido la Webofrece muchas posibilidades, pero hay que considerar algunas limitaciones de forma-to que permitirn mantener un sitio gil de navegar.Ms all de cul sea el contenido o en qu formato se muestre (en los distintos cap-tulos del libro iremos viendo cada uno de los distintos elementos), es fundamentalque quede organizado correctamente en el planeamiento del sitio. Esto implica divi-dir por secciones la totalidad del contenido del sitio, pero para esto, primero debe-remos establecer una sencilla pregunta: qu va a tener el sitio? As podremos ver laforma ms adecuada de dividir y organizar el material, lo que adems nos va a servirpara disear el sitio, ya que ciertamente no es lo mismo hacer un diseo para mos-trar texto que uno para visualizar videos. La divisin por secciones tiene que pensarse segn cada sitio en particular, puede ha-cerse teniendo en cuenta los temas o segn el tipo de contenido.

Distintas pginas

Los sitios web estn constituidos por diversas pginas. La cantidad de pginas vara se-gn la complejidad de cada sitio, pero podemos establecer algunos parmetros genera-les para diferenciar algunos tipos de pginas y luego disearlas.

La pgina principal (index): es la que el usuario visualiza al ingresar al sitio. Puedetener un diseo particular, ms visual, o ser directamente una pgina con contenidodesde donde se pueda ingresar a todas las secciones. Si se trata de un sitio de noticiaso al que se ingresa seguido, lo mejor es ir directamente al contenido. En ocasiones,hay una pgina principal y una pgina de bienvenida al sitio.

Pginas secciones: si el contenido est dividido en secciones, cada una de estas pue-de tener una pgina principal, donde se presenta el contenido que hay en ella. Otraopcin, segn el caso, para evitar pasos intermedios, ser que en la barra de navega-cin estn todas las opciones disponibles.

Pginas internas: son las pginas bsicas, las que tienen el contenido especfico. Pa-ra estas pginas, ser necesario estandarizar el diseo y los elementos a travs de plan-tillas, como veremos ms adelante.

DISEO WEB

20

DISEO Y NAVEGABILIDAD

No busque en el diseo del sitio solamen-te la esttica. Lo ms importante es queel visitante pueda navegar por l con to-tal comodidad, y que acceda al contenidobuscado en forma precisa y rpida.

Segn la estructura del sitio, o los distintos niveles de navegacin, habr ms o me-nos pginas, pero una vez definida bien la estructura principal y cmo se organizarn,tener una gran cantidad no resulta problemtico.

Figura 4. La pgina interna de www.mabeliam.com es bastante

diferente a la pgina principal. Observen la presencia

de un submen con opciones relacionadas a esta seccin.

Qu tecnologas utilizar

Una vez definidas las necesidades y cmo se estructurar el contenido del sitio, podre-mos definir qu tecnologas nos resultarn ms apropiadas para llevarlo adelante. Muchos desarrolladores web cometen frecuentemente el error de pensar primero latecnologa a utilizar antes que definir qu se quiere lograr. El resultado de este mo-do de trabajo suele ser sitios bastante caticos, ya que es mucho ms difcil adaptar

Qu tecnologas utilizar

21

Plan

ific

ar, a

naliz

ar y

org

aniz

ar1

TECNOLOGA Y HOSTING

Al momento de elegir el servicio dehosting donde alojaremos nuestro si-tio, deberemos tener en cuenta las tec-nologas utilizadas y observar que s-tas sean soportadas por el servidor.

el contenido a una tecnologa fija que elegir y adaptar las opciones de la tecnologaal contenido y a lo que se quiere comunicar.La principal tecnologa que utilizaremos es HTML, la base de la Web, que nos permitirpublicar contenido de un modo sencillo, generando sitios estticos. Utilizaremos esta tec-nologa en sitios que no requieran acceso a bases de datos ni interaccin con el visitante. Osea, con HTML se generar cada una de las pginas a las que el visitante puede entrar. Nosresultar til para, por ejemplo, generar sitios con informacin que no vare constantemen-te, como un sitio de promocin de una empresa, con pocas pginas de contenido.Por otro lado, s tendremos que generar varias pginas o la informacin variar frecuen-temente, como en el caso de un peridico on line, deberemos agregar dinamismo a tra-vs de otras tecnologas. Otra interesante opcin, para todo el sitio o para algunos ele-mentos, es utilizar Flash, un programa con el que a travs de grficos vectoriales, depoco peso, es posible generar animaciones, imgenes y agregar videos y sonidos de unaforma fcil. Una desventaja es que para visualizar estos elementos, los visitantes debe-rn tener instalado en sus computadoras el plug-in correspondiente.

El equipo de trabajo

No todos los sitios web necesitan el mismo nivel ni la misma cantidad de trabajo. Porlo tanto, no necesitarn de los mismos profesionales que trabajen en l. Sin embargo,es posible definir una organizacin estndar para todos y luego, en cada caso, definiruna estructura de trabajo particular, segn cada necesidad. Es importante destacar que la definicin de un grupo de trabajo se da, sobre todo, pa-ra estandarizar la divisin de tareas. Es muy comn que en proyectos personales o em-presas desarrolladoras pequeas, varios o todos estos roles recaigan en una misma per-sona. Sin embargo, lo ms importante ser tomar conciencia de cules son las tareaspor si en algn momento la empresa crece o se multiplican los trabajos.Como en todo proyecto, deber haber un coordinador. Ser el encargado de delegarlas tareas y coordinar el trabajo de los diferentes miembros del equipo. En general, setrata del responsable global del proyecto y de quien tiene ms contacto con el cliente.

DISEO WEB

22

Tambin tendremos un diseador, que puede trabajar solo o con su equipo, quien, apartir de ciertas pautas, definir la imagen general del sitio, as como generar todoslos elementos necesarios para su conformacin: fondos, botones, logos, imgenes, etc.El programador ser el encargado de dar la estructura lgica al sitio. Segn la tecno-loga elegida, implementar el funcionamiento y en general es quien comanda todas lascuestiones tcnicas del sitio.Adems, se podr contar con encargados del contenido, aunque en muchos casos, es-te es proporcionado por el cliente. En cuanto a la preparacin del contenido, habr quetener en cuenta las particularidades del medio (ver captulo 3).Por supuesto, constantemente, sobre todo al comienzo del trabajo, todas las reas in-volucradas trabajarn en conjunto interrelacionndose. En muchas oportunidades,los diversos participantes del sitio solicitarn elementos o informacin y consultarnalternativas con el resto. Es muy importante esta interrelacin para que el sitio que-de coherente desde todos sus ngulos.

Organizar y estandarizar el trabajo

Es muy importante conocer al comienzo del trabajo las formas de estandarizar la produc-cin. Junto con una buena organizacin de los profesionales intervinientes, hay varias he-rramientas que facilitarn muchas tareas de diseo, ahorrando tiempos y evitando errores.Por un lado, tenemos el uso de plantillas. En una plantilla colocaremos todos los ele-mentos que se repetirn en todas las pginas. De esta manera, deberemos realizar estossectores una sola vez y cuando tengamos que modificar algo evitaremos tener que mo-dificarlo en cada una de las pginas del sitio. Por otro lado, tendremos que definir los distintos niveles de informacin, aplicando es-tilos a cada uno de los textos. As, nos aseguraremos que todos los textos similares ten-gan la misma apariencia. Esto ayudar a que est presente la identidad del sitio.

Resumen del captulo

En este primer captulo, vimos los puntos a tener en cuenta antes de dar inicio al diseo unsitio Web: cmo planificar un proyecto, cmo es el pblico de Internet, qu tecnologas nosconviene utilizar y cmo organizar el trabajo. Definiendo claramente estos aspectos, garan-tizaremos el desarrollo de un sitio completo y que cumpla con todas las expectativas.

Organizar y estandarizar el trabajo

23

Plan

ific

ar, a

naliz

ar y

org

aniz

ar1

Actividades propuestas

Sobre la base de los conceptos elaborados en este primer captulo, elabore una defini-cin acerca del contenido que debe incluir su sitio web. Busque en Internet sitios quetengan alguna relacin con el proyecto a realizar de acuerdo con la temtica tratada, yasea porque engloba un mismo tipo de producto o porque brinda informacin a unmismo pblico. Tenga en cuenta primordialmente los siguientes aspectos:

Tipo de tecnologa empleada en cada caso. Caractersticas generales del diseo: colores y tipografas utilizadas. Forma en que se presentan las imgenes. Preponderancia de la informacin por sobre el diseo. Navegabilidad: distintas formas de acceder a las secciones. Servicios que se ofrecen al visitante. Forma de utilizacin de los banners: qu otros tipos de publicidades existen?

Recin luego de conocer las diversas variantes, podr enfocar correctamente el conte-nido del sitio.

Cuestionario

1/ Cules son los aspectos que deben tenerse en cuenta al momento de proyectar eldesarrollo de un sitio web?

2/ Por qu es importante prestar especial atencin el pblico del sitio?3/ Qu significa que un sitio tenga secciones ambiguas?4/ En qu secciones est dividido generalmente el contenido de un sitio web?5/ Qu tecnologas pueden emplearse para disear un sitio?6/ Qu consideraciones se deben tomar con respecto al equipo y a los tiempos de

trabajo?7/ Cules son los pasos a realizar para elaborar una mejor organizacin del trabajo?8/ A qu pgina de un sitio se denomina comnmente Index?9/ Cul es la desventaja de la tecnologa Flash?10/ Cul es la poltica ms adecuada a adoptar con respecto a los banners?

DISEO WEB

24

Planificar un proyecto El tipo de sitio El pblico del sitio Qu molesta a los usuarios El contenido Distintas pginas Qu tecnologas utilizar El equipo de trabajo Organizar y estandari...Resumen del captulo Ejercicios para hacer Cuestionario