Fundamentos para el diseño de un sitio Web

1 / 10

Fundamentos para el diseño de un sitio Web

Figura 1. Características de Internet.

Antes de iniciar el diseño de la interfaz de un sitio web, es necesario retomar algunos conceptos:

Fundamentos para el diseño de un sitio Web

2 / 10

Internet ha tenido un gran impacto en la sociedad, cada vez son más los usuarios que se conectan para realizar diferentes actividades, desde la búsqueda de información, comunicarse con otras personas, concreción de negocios, compra y venta de productos, descarga de archivos y programas, juegos, interactuar y conocer a otras personas, entre otros.

Debido a ello, una de las principales repercusiones radica en que la economía de las personas y organizaciones entre en el espacio que representa Internet. Lo anterior se puede certificar a través de la compra-venta de servicios y productos por este medio, además instituciones financieras, como los bancos, permiten a los usuarios y a las organizaciones realizar transacciones por este medio, por ejemplo, transferencias de dinero, pagos con tarjeta, revisión de estados de cuenta, etc.

Cabe mencionar que Internet es un medio, que además de permitir realizar diferentes actividades, va evolucionando día tras día, ello se debe a que el conjunto de los dispositivos tecnológicos y software van evolucionando a la par, así se puede observar, por ejemplo: con el teléfono celular, en el que se desarrolló la tecnología y software necesarios, para que tú, como usuario, tuvieras la opción de navegar en Internet. Esto provocó que empresas que tienen presencia y permiten la realización de transacciones, desarrollaran el software y tecnología requerida para que pudieras realizar desde el teléfono visitas a sus sitios y transacciones, un ejemplo muy claro es Ticketmaster, empresa que tiene su sitio Web y que te permite acceder a él por medio de la computadora, sin embargo, cuentan también con su sitio en Internet, el cual puedes visitar desde cualquier dispositivo móvil, entre estos dispositivos se encuentran: teléfonos celulares, reproductores como ipods, agendas electrónicas con teléfono, como las blackberry, etc.

Hablamos de sitio web, pero ¿qué es un sitio web?, ¿una página web?, Y ¿un portal web?

Una página web, se puede decir que es una página independiente a la que ingresas

y contiene información, es como si tuvieras una sola hoja de un documento de Word de 20 hojas, o como una diapositiva de 30.

Un sitio web, es el conjunto de páginas web que contienen información de una empresa o persona, por ejemplo, es como si fuera todo tu documento de Word, o todas las diapositivas de una presentación.

Ahora, un portal web, se puede decir que es más grande que el sitio, es un lugar en donde además de promover sitios web, y contener información y buscadores que te enlazan a otros sitios web, también tiene aplicaciones o herramientas para el usuario, como correo electrónicos, foros, wikis, blogs, en donde cualquier persona puede ingresar y aportar, es como si fueras a una conferencia en la que hay un conjunto de expositores, cada uno de ellos trae consigo sus presentaciones (podemos decir sus sitios web), pero además en la conferencia te pueden dar folletos, trípticos, una carpeta para que anotes, también puede existir un área en donde se vendan productos relacionados con la conferencia.

Figura 2. Página web.

Figura 3. Sitio web.

1 / 10

Fundamentos para el diseño de un sitio Web

Portal web: lugar que conjunta información variada, sirve también como enlace a otros sitios web, y

contiene diferentes servicios para los usuarios como foros, blogs, wikis, juegos, correo electrónico y

buscadores, entre otros.

Características Ventajas Desventajas Ejemplos

-Contiene información variada: noticias,

directorios, horóscopo, clima, etc.

-Es un sitio donde se centra gran cantidad de publicidad.

-Contiene diferentes servicios para los

usuarios: correo electrónico, blogs, wikis, juegos y buscadores, entre otros.

-Puede contener o conectar información

de otros sitios web, como: redes sociales, directorios, revistas,

televisoras.

-Cabe mencionar, que dentro de esta categoría, entran también los

buscadores como Google.

-Diferentes

organizaciones

pueden darse a conocer por medio

de su publicidad.

-Se pueden dar de

alta sitios web en

sus buscadores.

-Hay demasiada

información, por lo

que puede estar saturada.

-Su navegabilidad puede ser un poco

complicada, por lo

que el usuario puede llegarse a

perder.

Yahoo

Msn

AOL

NOTA

Es importante mencionar que dentro de los portales web, se consideran también a los buscadores como Google y Lycos.

Fundamentos para el diseño de un sitio Web

4 / 10

Sitio web

Alojamiento

o Contratación de hosting o implementar un servidor web.

o Registro de dominio.

Desarrollo del sitio web

Contratación de una empresa que desarrolle el plan de comercio electrónico, incluyendo la creación del sitio web y el comercio electrónico. El alojamiento corre por su cuenta o se puede contratar con la empresa.

Outsourcing Desarrollo in house

Contratación de personal o involucrar al personal pertinente que trabaje dentro de la empresa; ingenieros, administradores, mercadólogos, etc., para el desarrollo e implementación del plan de comercio electrónico, incluyendo la creación del sitio web y el comercio electrónico.

Plantillas

Crear el sitio web y comercio electrónico por medio de la compra de plantillas preconfiguradas, la empresa en donde se adquieren, también proporciona el posting y dominio, entre las empresas que ofrecen estos servicios, se encuentra: Creando webs, Plantillas México y Páginas web México, entre otras.

Sitio web

Alojamiento

o Contratación de hosting o implementar un servidor web.

o Registro de dominio.

Desarrollo del sitio web

Contratación de una empresa que desarrolle el plan de comercio electrónico, incluyendo la creación del sitio web y el comercio electrónico. El alojamiento corre por su cuenta o se puede contratar con la empresa.

Outsourcing Desarrollo in house

Contratación de personal o involucrar al personal pertinente que trabaje dentro de la empresa; ingenieros, administradores, mercadólogos, etc., para el desarrollo e implementación del plan de comercio electrónico, incluyendo la creación del sitio web y el comercio electrónico.

Plantillas

Crear el sitio web y comercio electrónico por medio de la compra de plantillas preconfiguradas, la empresa en donde se adquieren, también proporciona el posting y dominio, entre las empresas que ofrecen estos servicios, se encuentra: Creando webs, Plantillas México y Páginas web México, entre otras.

Diseño de un sitio web

Antes de diseñar un sitio web, es importante retomar y considerar algunas interrogantes que se propusieron en el plan de comercio electrónico, recuerda que es importante no perder de vista los objetivos: ¿por qué quiero crear un comercio electrónico?, ¿para qué es mi comercio electrónico?, ¿qué quiero mostrar a mis usuarios?

Ahora bien, aunque la idea es crear o plantear la creación de un comercio electrónico, es importante primero contar con un sitio web. Para poder desarrollar uno, considera los requisitos mostrados en la figura 1. Requerimientos sitio web.

Figura 4. Requerimientos sitio web.

5 / 10

Fundamentos para el diseño de un sitio Web

Diseño de la interfaz

En este momento ya tienes una clara idea de lo que se pretendes reunir en el sitio web, el cual incluye un comercio electrónico.

Antes de iniciar el diseño de la interfaz, es importante analizar el plan de negocio electrónico, los principios de usabilidad, el análisis de mercado y requerimientos, las soluciones de comercio electrónico y los elementos de un comercio electrónico.

Con base en ello, la primera propuesta a realizar es el diseño del sitio en papel, en ella se especificará lo siguiente:

1. Nombre de la organización.2. Nombre del dominio.3. Diseño (prototipo) del sitio.4. Descripción del sitio.

Diseño del sitio

El diseño del primer prototipo se elabora en papel, en este caso se puede elaborar en Power Point, en este diseño se específica lo siguiente:

o Los botones (secciones) que contendrá el sitio.

o La ubicación de los botones, es decir, si aparecen en la parte inferior, izquierda, derecha de la página web.

o Así mismo, se índica el lugar de animaciones, videos e imágenes.

o La primera página a desarrollar, será la página principal del sitio, que se refiere a la que ingresa el usuario en primera instancia.

o Se puede decir que cada botón o sección es una página web, que como se ha mencionado, es una página independiente.

o Después de desarrollar la página principal, se desarrolla cada una de las páginas en las que se indica si hay texto (por medio de cuadros), o imágenes, videos, etc.

o Este es un bosquejo del acomodo y contenido del sitio web.

Fundamentos para el diseño de un sitio Web

6 / 10

Recomendaciones

o Es pertinente que la ubicación de los botones y los temas de fondo, sea la misma para todo el sitio web, ello para evitar que el usuario se pierda dentro del sitio.

o No saturar la página de texto, cada párrafo debe contener como máximo 5 líneas.

o No saturar la página de imágenes y videos que tarden mucho tiempo en descargar.

o Los nombres de los botones e hipervínculos deben indicar al usuario lo que contiene esa página, por ejemplo: el botón contacto, debe traer los datos de la organización.

o Considerar que existen nombres estandarizados, como: o Inicio (home), lleva a la página principal.o Contacto, lleva a la página en donde pueden tener los datos de la información

y mandar dudas o sugerencias.o Aviso legal, contiene el contrato legal.

o La navegación, es decir de un link a otro, debe ser muy fácil. Para realizar cualquier actividad, se recomienda que el usuario no aplique más de 3 clic, excepto, claro, en una transacción puede dar mayor número de clic, pero hay que diseñar para que se consideren los principios de usabilidad, sin perder de vista las necesidades del usuario.

o Lo más sencillo es lo más visitado.

Para realizar el diseño (bosquejo) en papel del sitio web, debes considerar 2 aspectos:

o La navegación.o El contenido.

La navegación

La navegación es el primer esquema que se recomienda realizar, este esquema puede ser creado en papel, Word, Excel, Power Point. En este esquema se definen las páginas que tendrá el sitio y su navegación (conexión), es decir, partiendo de la página principal se indicarán las secciones, subsecciones y sub subsecciones que se pueden tener, partiendo siempre de la página inicial, ello te permitirá realizar un esquema de navegación, para saber cómo conectar (ligar por medio de vínculos) tus páginas web e integrarlas en un sitio, tal como se muestra en la imagen.

Es importante mencionar que a este diagrama se le denomina esquema de navegación o árbol de navegación.

7 / 10

Fundamentos para el diseño de un sitio Web

Figura 5. Esquema de navegación.

Fundamentos para el diseño de un sitio Web

8 / 10

Página principal

Idiomas Español

Páginas interiores

Son las páginas interiores que se desean crear y contienen información general del sitio

Conoce a la UVEG *¿Qué es la UVEG? *Filosofía institucional *Antecedentes *Centros de acceso *Promotores

Estudia en la UVEG *Bachillerato en línea *Licenciatura en línea *Carreras profesionales -Administración de las ventas -Administración de la mercadotecnia -Administración de las finanzas -Administración de negocios electrónicos -Ing. en gestión de TI -Ing. en gestión de proyectos *Maestrías -Maestría en educación -Admon y polí ticas públicas

Entérate en la UVEG *Noticias

Anuncios *Becas *Inicio cuatrimestre *Concursos Mesa de ayuda

Mapa del sitio

Documentos

Son las páginas interiores que contienen documentos: pdf, videos, imágenes (como galerías), formularios, etc. Además de esta categoría pueden crearse otras como blogs, que contendrán las páginas interiores que muestran información a los usuarios con base en artículos, en donde los usuarios pueden además hacer comentarios, sugerencias o preguntas.

Comunidad UVEG *Calendario escolar *Nuestros estudiantes -Testimoniales -Galería estudiantil *Curso básico de computación *Guías de acceso del campus *Servicios escolares

Acceso a la información *Portal de transparencia *Mejora regulatoria

Contáctanos *Escríbenos *Oficinas UVEG *Centros de acceso *Directorio *Vacantes

Zona privada

En esta sección los usuarios registrados en la Universidad podrán: visualizar sus cursos, ingresar a biblioteca digital, control escolar y otras aplicaciones.

Campus virtual

Otras secciones

Además pueden existir otras secciones (zonas) como: categoría de productos, en donde se muestre la clasificación y característ icas de productos que ofrece una empresa.

Para observar algunos ejemplos de un esquema de navegación, te sugiero visitar las siguientes páginas web:

o Buenas prácticas del proceso de diseño webo Organización de la informacióno Desarrollo teórico de un proyecto para construir la web de una empresa.o Presupuesto página webo Nanoweb

El contenido

El contenido se refiere a detallar en papel el acomodo de los botones (secciones que pueden contener subsecciones), indicar en dónde se pondrán los textos, imágenes, videos, los links que tendrá. Este bosquejo en papel se realiza para cada una de las hojas del sitio.

La imagen que se muestra a continuación ejemplifica la página principal de un sitio, te reitero que este dibujo o bosquejo se realiza para cada una de las páginas que comprenden el sitio web, es aconsejable enumerarlas, para más adelante poder diseñar la navegación del sitio de manera organizada.

Figura 6. Bosquejo en papel de sitio web.

9 / 10

Fundamentos para el diseño de un sitio Web