Manual Users - Diseño web

download Manual Users - Diseño web

of 12

Transcript of Manual Users - Diseño web

DISEO WEB

Captulo

1

Planificar, analizar y organizarPara 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.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 estandarizar el trabajo Resumen del captulo Ejercicios para hacer Cuestionario 14 16 16 17 19 20 21 22 23 23 24 24

SERVICIO DE ATENCIN AL LECTOR: [email protected]

DISEO WEB

Planificar un proyectoPlanificar un sitio web implica, mucho antes de trabajar en Dreamweaver o el programa que utilicemos para armar el sitio, pensar y definir claramente muchas cuestiones de 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 importante definir lo ms claramente posible la temtica general (y particular) que se van a tratar en las distintas pginas, para poder establecer los elementos y la esttica que se utilizarn. Pblico: esto ayudar a definir el diseo y la navegabilidad del sitio. No ser lo mismo generar una propuesta para nios, adolescentes o gente mayor ni para un pblico en general que para usuarios avanzados de Internet. Las formas de lectura, las tipografas a utilizar, los colores, la complejidad del sitio dependern de este punto. Estilo general: al comenzar, es importante tambin tener una idea del estilo general que se quiere mostrar, formal, informal, con alguna tendencia artstica particular, etc. Por supuesto, este punto puede definirse ms adelante, pero siempre es mejor tener alguna pista al comienzo. Elementos que requiere el sitio: segn su contenido, se debern generar diversos elementos: animaciones, paneles de control para quien actualiza el sitio, bases de datos, formularios, elementos dinmicos, etc. Es importante prever esto tanto para poder 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 trabajo. Hay que definir el tiempo total que llevar generar el sitio, as como los tiempos de entrega parciales (cundo se mostrar el diseo al cliente para su aprobacin, cundo se realizarn las pruebas de navegabilidad, etc.). Todo esto tambin depender de los recursos que se tengan para trabajar, la complejidad del sitio y el tiempo que dispone el cliente para su realizacin. Cmo se va a organizar el trabajo: una vez definidos los principales aspectos, habr que 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 no tengamos demasiado tiempo para hacerlo, es imprescindible tomarse cierto tiempo al comienzo y definirlos lo ms claramente posible. Si se trata de un sitio para otra persona, parte de estas decisiones habr que definirlas con el cliente, quien nos dir lo que espera del trabajo y establecer junto con nosotros lo que se quiere y puede lograr (sobre todo, basndonos en los recursos que tenemos, tiempo y dinero). Si se trata de un sitio personal, si bien parece mucho ms sencillo, es cuando se suele tener mayores problemas con este punto, ya que

14

Planificar un proyecto

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.

15

Planificar, analizar y organizar

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 utilizar todos los recursos y fuerzas disponibles para realizar lo que nos propusimos, lo antes posible, sin dar demasiadas vueltas, y de esta forma ahorrar esfuerzos, recursos y asegurarnos buenos resultados.

1

DISEO WEB

El tipo de sitioDefinir y tener una idea clara acerca del tipo de sitio servir tanto para el diseo como para generar correctamente todos los elementos que lo conformarn. Tambin ser fundamental ubicar el sitio en una categora temtica. Aunque sea difcil la definicin de un tema especfico, esto es necesario, ya que permitir tambin la bsqueda de otros sitios similares en Internet. Lo ideal ser definir lo ms claramente posible los objetivos del sitio. Por ejemplo, no solo deberemos pensar que se trata de un sitio de ventas on line, sino tambin qu tipo de productos, si ser una tienda exclusivamente en lnea o ser una extensin de nuestro negocio real, de qu forma se presentarn los productos, el nivel de precios, los modos de entrega y cualquier otra especificacin que haga al modo de operar del sitio. De esta manera, nosotros mismos comprenderemos dnde queremos que se ubique nuestro sitio con relacin al resto y ser mucho ms sencillo realizarlo y llegar a esos primeros objetivos.

El pblico del sitioOtro tema fundamental para comenzar a trabajar es el pblico general al que estar dirigido el sitio. Basndonos en algunos datos estadsticos, como edad, sexo, hbitos de consumo, etc., podremos disear un sitio que se adapte a los gustos y nivel cognoscitivo de ese pblico meta. Por supuesto, el sitio estar desarrollado para que sea sencillo de navegar para la mayor cantidad posible de personas, pero si hay un pblico definido segn la temtica, las tareas de diseo y desarrollo pueden concentrarse en l y se vern notablemente facilitadas todas las tareas relacionadas. En el diseo del sitio, deberemos tomar en cuenta el pblico en todo momento. Desde la esttica general, colores, navegabilidad, hasta cada uno de los textos e imgenes que se coloquen en el sitio, harn que ese pblico no solo llegue hasta el sitio, sino que lo recorra e, incluso, que vuelva.HISTORIA DEL DISEO La esttica de los sitios fue evolucionando rpidamente. En la seccin Web, del sitio www.archive.org, podremos acceder a un archivo histrico que nos muestra el diseo que cualquier sitio tena hace dos o tres aos.

16

El pblico del sitio

Qu molesta a los usuariosAdems de tener en cuenta al pblico al que est dirigido, hay que considerar muchas cosas generales que suelen fastidiar a los usuarios de cualquier sitio. Exceptuando algunos sitios personales, cuyos objetivos excluyan explcitamente no resultar amenos o fciles de navegar, hay muchos tems que son recomendables evitar al disear un sitio web: Obligacin de una resolucin o navegador determinado: un visitante tiene que estar demasiado interesado en nuestro sitio como para cambiar sus hbitos. Pensemos en nosotros mismos al ingresar a cualquier sitio; si nos piden que cambiemos algn parmetro de nuestro sistema, seguramente cerraremos la ventana y ni intentaremos 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?

17

Planificar, analizar y organizar

Adems de los datos sobre las personas, es muy importante tambin conocer mnimamente algunos datos tcnicos sobre sus computadoras y conexiones. Como veremos ms adelante, a nuestro sitio web se conectarn usuarios con computadoras, sistemas operativos, tamao de monitor, configuraciones, conexiones y programas navegadores distintos. Como desarrolladores web, nosotros deberemos considerar todos estos puntos y hacer sitios que puedan visualizarse correctamente en la mayora de las computadoras. A lo largo de este libro veremos cmo lograrlo.

1

DISEO WEB

Utilizacin o demostraciones desmedidas de tecnologa: muchas veces resulta tentador para el diseador o desarrollador volcar en un sitio web todo lo que sabe hacer; esto sucede sobre todo con los novatos. En general, cuando esto sucede, se nota en 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 (la imagen o funcionamiento del sitio). Banners por doquier: demasiados banners en una misma pgina pueden entorpecer la navegabilidad, ya que pueden diferir la atencin de la barra de navegacin e incluso 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 mensajes importantes, para la mayora de los usuarios se considera como publicidad. Por eso, lo ideal es limitar la cantidad y la esttica de los banners en el sitio a los contenidos ms destacados, para que realmente cumplan su cometido. Mltiples barras de navegacin: la forma cmo el usuario puede recorrer las distintas secciones y pginas del sitio deber ser clara y fcilmente reconocible. Por este motivo, y exceptuando casos muy concretos, lo mejor es tener definida una barra de navegacin central desde donde el visitante pueda llegar hasta donde lo desea de la forma ms rpida. Pop-ups: en este sentido, resulta muy molesto para cualquier persona que al entrar a un sitio se abran muchas ventanas, sobre todo si son de publicidad. Hay que tener cuidado con esto en aquellos servicios de hosting gratuitos. Pero tambin, en cmo elegimos que se abra cada una de las pginas a las que accede el usuario. Lo ideal es que todas se visualicen en una misma ventana (y si el usuario lo desea puede abrir varias, usando las herramientas del programa navegador). Exceso de contenido por pgina: teniendo en cuenta que en la Web no hay muchas limitaciones de espacio, muchas veces en una misma pgina se coloca todo el contenido que podra estar dividido en varias. Resulta muy difcil que una persona lea o incluso llegue a desplazar el contenido en una pgina de esas que nunca terminan de visualizarse. Es preferible dividir la informacin en varias pginas; est comprobado que la lectura y concentracin frente al monitor es mucho menor que en impresos. Secciones ambiguas, contenidos repetidos o mezclados: una correcta divisin y organizacin de la informacin garantizan una navegabilidad fcil, o sea que el usuarioSOBRE LOS POP-UPS Hoy existe una gran cantidad de herramientas que le permiten al usuario matar los pop-ups antes de que aparezcan en pantalla. Por esto, los popups tampoco pueden pensarse como un sistema de publicidad efectivo.

18

El contenido

A lo largo de este libro, iremos viendo los mejores modos de generar sitios web profesionales que eviten estos dilemas. Es posible hacer sitios agradables visualmente y fciles de navegar, es solo cuestin de conocer algunos secretos, pensar bien lo que requieren 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 contenidoTodo 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 interferir en la comunicacin. En general, segn el sitio, el contenido podr ser variado. Adems de texto, pueden incluirse recursos grficos, como fotografas y dibujos de distintos tipos, y multimediales, como animaciones, videos y sonidos. Tambin se pueden ofrecer archivos de

19

Planificar, analizar y organizar

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

1

DISEO WEB

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

Distintas pginasLos sitios web estn constituidos por diversas pginas. La cantidad de pginas vara segn la complejidad de cada sitio, pero podemos establecer algunos parmetros generales para diferenciar algunos tipos de pginas y luego disearlas. La pgina principal (index): es la que el usuario visualiza al ingresar al sitio. Puede tener un diseo particular, ms visual, o ser directamente una pgina con contenido desde donde se pueda ingresar a todas las secciones. Si se trata de un sitio de noticias o 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 puede tener una pgina principal, donde se presenta el contenido que hay en ella. Otra opcin, segn el caso, para evitar pasos intermedios, ser que en la barra de navegacin estn todas las opciones disponibles. Pginas internas: son las pginas bsicas, las que tienen el contenido especfico. Para estas pginas, ser necesario estandarizar el diseo y los elementos a travs de plantillas, como veremos ms adelante.HORIZONTAL O VERTICAL? Existen tradicionalmente dos estructuras para los sitios web que responden al tipo de contenido. Por sitios con estructura Vertical, se entiende aquellos que se centran en una nica temtica (por ejemplo, msica, deportes, informtica, etc.). Por sitios con estructura Horizontal, se entiende aquellos que engloban una gran cantidad de temticas diferentes; generalmente es el tipo de estructura que tienen los grandes portales (como Terra o Ciudad Internet).

20

Qu tecnologas utilizar

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 utilizarUna vez definidas las necesidades y cmo se estructurar el contenido del sitio, podremos definir qu tecnologas nos resultarn ms apropiadas para llevarlo adelante. Muchos desarrolladores web cometen frecuentemente el error de pensar primero la tecnologa a utilizar antes que definir qu se quiere lograr. El resultado de este modo de trabajo suele ser sitios bastante caticos, ya que es mucho ms difcil adaptarDISEO Y NAVEGABILIDAD No busque en el diseo del sitio solamente la esttica. Lo ms importante es que el visitante pueda navegar por l con total comodidad, y que acceda al contenido buscado en forma precisa y rpida.

21

Planificar, analizar y organizar

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

1

DISEO WEB

el contenido a una tecnologa fija que elegir y adaptar las opciones de la tecnologa al contenido y a lo que se quiere comunicar. La principal tecnologa que utilizaremos es HTML, la base de la Web, que nos permitir publicar contenido de un modo sencillo, generando sitios estticos. Utilizaremos esta tecnologa en sitios que no requieran acceso a bases de datos ni interaccin con el visitante. O sea, con HTML se generar cada una de las pginas a las que el visitante puede entrar. Nos resultar til para, por ejemplo, generar sitios con informacin que no vare constantemente, 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 frecuentemente, como en el caso de un peridico on line, deberemos agregar dinamismo a travs de otras tecnologas. Otra interesante opcin, para todo el sitio o para algunos elementos, es utilizar Flash, un programa con el que a travs de grficos vectoriales, de poco peso, es posible generar animaciones, imgenes y agregar videos y sonidos de una forma fcil. Una desventaja es que para visualizar estos elementos, los visitantes debern tener instalado en sus computadoras el plug-in correspondiente.

El equipo de trabajoNo todos los sitios web necesitan el mismo nivel ni la misma cantidad de trabajo. Por lo 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, definir una estructura de trabajo particular, segn cada necesidad. Es importante destacar que la definicin de un grupo de trabajo se da, sobre todo, para estandarizar la divisin de tareas. Es muy comn que en proyectos personales o empresas desarrolladoras pequeas, varios o todos estos roles recaigan en una misma persona. Sin embargo, lo ms importante ser tomar conciencia de cules son las tareas por si en algn momento la empresa crece o se multiplican los trabajos. Como en todo proyecto, deber haber un coordinador. Ser el encargado de delegar las tareas y coordinar el trabajo de los diferentes miembros del equipo. En general, se trata del responsable global del proyecto y de quien tiene ms contacto con el cliente.TECNOLOGA Y HOSTING Al momento de elegir el servicio de hosting donde alojaremos nuestro sitio, deberemos tener en cuenta las tecnologas utilizadas y observar que stas sean soportadas por el servidor.

22

Organizar y estandarizar el trabajo

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

Organizar y estandarizar el trabajoEs muy importante conocer al comienzo del trabajo las formas de estandarizar la produccin. Junto con una buena organizacin de los profesionales intervinientes, hay varias herramientas 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 elementos que se repetirn en todas las pginas. De esta manera, deberemos realizar estos sectores una sola vez y cuando tengamos que modificar algo evitaremos tener que modificarlo en cada una de las pginas del sitio. Por otro lado, tendremos que definir los distintos niveles de informacin, aplicando estilos a cada uno de los textos. As, nos aseguraremos que todos los textos similares tengan la misma apariencia. Esto ayudar a que est presente la identidad del sitio.

Resumen del captuloEn este primer captulo, vimos los puntos a tener en cuenta antes de dar inicio al diseo un sitio Web: cmo planificar un proyecto, cmo es el pblico de Internet, qu tecnologas nos conviene utilizar y cmo organizar el trabajo. Definiendo claramente estos aspectos, garantizaremos el desarrollo de un sitio completo y que cumpla con todas las expectativas.

23

Planificar, analizar y organizar

1

DISEO WEB

Actividades propuestasSobre la base de los conceptos elaborados en este primer captulo, elabore una definicin acerca del contenido que debe incluir su sitio web. Busque en Internet sitios que tengan alguna relacin con el proyecto a realizar de acuerdo con la temtica tratada, ya sea porque engloba un mismo tipo de producto o porque brinda informacin a un mismo 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 contenido del sitio.

Cuestionario1/ Cules son los aspectos que deben tenerse en cuenta al momento de proyectar el desarrollo 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?

24