1

SITIOS WEB Y WIX

Diseo de la estructura del sitio web: El diseo lgico y

fsico (mapa de sitio)
Boceto para el diseo de pginas en un sitio web
Implementacin de un sitio web multimedia en Wix

GUA DIDCTICA
Descripcin
Con las ventajas del internet conoceremos algunas definiciones fundamentales
para comprender la terminologa utilizada en entornos web, los mismos que nos son
tiles en el desarrollo de nuestras actividades cotidianas. Al mismo tiempo
comprenderemos el proceso previo de diseo para crear sitios web coherentes y
consistentes, que faciliten posteriormente la creacin de pginas web haciendo uso
de mltiples herramientas aplicativas.

Iniciaremos esta sesin con la planificacin del desarrollo de un sitio web y

luego elaboraremos los diseos bsicos para el mismo, posteriormente estaremos
listos para implementarlo haciendo uso de diferentes herramientas actuales, una de
ellas es el servicio que nos brinda Wix.

Capacidad

El participante al final de esta sesin estar en capacidad de planificar e

implementar un sitio web multimedia en Wix del tipo empresarial en forma
organizada y eficiente.

Actividad

Elabora un sitio web, para un caso seleccionado de acuerdo a su carrera

profesional, posteriormente deber implementarlo haciendo uso de los
servicios brindados por Wix para la creacin y administracin de Sitios Web.

Evaluacin
En esta sesin Ud. ser evaluado en:

Planifica e implementa un sitio web multimedia en Wix de tipo empresarial en

forma organizada y eficiente.

Diseo de la estructura del sitio web: El diseo lgico y

fsico
En estos tiempos, las aplicaciones multimedia en la web son una parte
importante en toda nuestra vida cotidiana, las interacciones del usuario en la nube
deben ser cada vez ms sencillas y fciles de realizar, por ello un sitio web debe
obedecer a un adecuado anlisis, diseo e implementacin nos brindar una
adecuada informacin en un entorno del trabajo interactivo y conectivo.
En esta sesin estudiaremos las fases de un buen diseo que son utilizadas
para diferentes tipos de aplicaciones hipermedia como galeras interactivas,
presentaciones multimedia y aplicaciones web. El xito de estas fases es la clara
identificacin de los diferentes niveles de anlisis y diseo en forma independiente
de la implementacin y aplicar las tecnologas adecuadas a cada una en el proceso
de su desarrollo.
Estas fases son:

Antes no existan una

metodologa clara para el
diseo de pginas web
pero esta situacin se
alivi con el uso de
metodologas
para
planificar intranets.

1.

Anlisis
En el desarrollo de un sitio web podemos iniciar por dar respuesta a un grupo
muy concreto de interrogantes, que permitirn aclarar y definir de manera
bsica las expectativas existentes para el sitio web a desarrollar.
Las consultas ms frecuentes en esta etapa son las siguientes:

Estas respuestas permitirn dar forma a los siguientes elementos de anlisis:

a) Objetivo: Definir las metas del proyecto, estas deben ser generales y
especficas, con el fin de contar con el mayor detalle posible de lo que se
desea conseguir.
Ejemplo:

Mejorar la imagen institucional de la empresa XYZ.

Promocionar los servicios brindados para incrementar la cantidad

de clientes.

Presentar pblicamente los informes ms importantes de la

institucin.

b) Audiencia: Est claro que el Sitio Web no podr atender al todo pblico
dado que el acceso a Internet se produce mayoritariamente en segmentos
de ingresos medianos a altos. Sin embargo, hay varias consideraciones a
tener en cuenta, al definir qu tipos de usuario que se atendern desde las
pginas del sitio.

Ejemplos:

Personas con nivel de instruccin superior orientados a la

educacin.

Jvenes entre 18 y 25 aos interesados en la adquisicin de

productos tecnolgicos.

Proveedores de empresas industriales interesadas en conocer

los servicios y productos brindados.

c) Tecnologa: qu servicios interactivos se le incorporarn al sitio.

Mientras ms claro se definan y detallen los servicios, el proyecto

estar ms enfocado en atender las necesidades del usuario.

Una vez que se han identificado los objetivos del sitio y la audiencia,
se debe proceder a hacer las definiciones ms concretas que permitan
decidir qu contenidos son los que va a tener el Sitio Web que se
desarrolle.

Para identificar contenidos, se deben utilizar como insumo los

materiales que se hayan obtenido en la etapa de identificacin de
Objetivos y de Audiencias, ya que en ambos la bsqueda gir en torno
a las necesidades que tenan los usuarios del sitio.

El ltimo paso que se debe desarrollar en esta etapa es la bsqueda

de otros sitios en Internet que sean similares al nuestra, con el fin de
revisar de qu manera han resuelto los mismos problemas que
deberemos atender.

2.

Diseo.
a) Diseo Lgico.
Se refiere al proceso de crear un diagrama de contenidos en el que se
muestre de manera prctica cuntas secciones tendr el sitio web y
cuntos niveles habr dentro de cada uno.

Secciones: se debe intentar que sean las menos posibles, con el fin
de concentrar las acciones del usuario en pocas reas.

Niveles: se debe intentar que el usuario est siempre a menos de tres

clicks del contenido que anda buscando. Por ello no se debera crear
ms de tres niveles de acceso.

Ejemplo:

b) Diseo Fsico (Sistema de navegacin):

Una vez que se tiene el diseo lgico desarrollado, debemos generar los
sistemas de acceso a dichos contenidos en el Sitio Web. A travs de estos,
los usuarios podrn navegar por sus diferentes reas, sin perderse.
Al generar el sistema de navegacin, se deben tener en cuenta las
siguientes caractersticas:

Consistente: el sistema debe ser similar en todo el sitio, en lo referido

a su ubicacin y disposicin en las pginas.

Uniforme: el sistema debe utilizar similares trminos con el fin de que

el usuario que lo vea en las pginas, confe en que sus opciones llevan
siempre hacia los mismos lugares dentro del sitio.

Visible: el sistema debe distinguirse claramente dentro del sitio, con

el fin de que el usuario cuente con l, como si se tratara de una gua
permanente en el rea en que se encuentre del sitio.

Para este fin utilizaremos el diseo fsico el cual indicar el nombre de los
archivos que se crearn y cmo estos se relacionarn.

Ejemplo:

Diseo de Directorios:
Este tem nos permite estructurar las carpetas o directorios que usaremos y
nos servirn para ordenar los elementos de nuestro sitio.
Ejemplo:

Diseo de Botones y Mens:

Una vez que se ha terminado el trabajo en la maquetacin procedemos a
disear las barras de navegacin, mens, botones y dems elementos a utilizar
en la implementacin de nuestras pginas para el sitio web.

Ejemplo:

Preparacin de Contenidos:
Para finalizar la etapa del diseo procedemos a crear y/o recolectar el
contenido que ser publicado en cada una de nuestras pginas que
conformarn nuestro sitio web.

3.

Implementacin:
Una vez concluidas las fases anteriores procedemos a seleccionar las
herramientas ms adecuadas para proceder a implementar nuestro sitio web
y poder ponerlo en funcionamiento.
Existen herramientas que permiten la implementacin desde el ms bsico y
otras herramientas utilitarias que generan contenidos o modifican estructuras
con la finalidad de hacer ms sencillo el trabajo.
Una vez terminada la implementacin de nuestro sitio debemos colocarlo en
funcionamiento, para lo cual requerimos de dos elementos:
Servidor de alojamiento: que ser el que almacene todo lo creado.
Nombre de dominio: nombre que identificar como nico nuestro sitio y
por el cual los usuarios podrn acceder al contenido alojado en un servidor.

Boceto para el diseo de pginas en un sitio web

Una vez terminado el trabajo en la estructura del sitio web, ya se cuenta con
los elementos suficientes para avanzar hacia la generacin del diseo visual de las
pantallas del sitio.
En algunos casos se denomina diseo de maquetacin o diagramacin
considerando una distribucin de los espacios para los contenidos a publicar.
Debemos tener en cuenta que el diseo implica dos partes:
a) Las reas que se mantendrn iguales en todas las pginas, lo que
caracterizar y uniformizar a nuestro sitio web. (Mens, Publicidad, etc.)
b) Las reas que cambiarn de pgina a pgina. (Contenido propio de cada
pgina).
Ejemplo:

Los
bocetos
o
maquetacin ayudan en la
organizacin
de
la
informacin (ubicacin de
los contenidos) en las
pginas web.

Implementacin de un sitio web multimedia en WIX

WIX es un servicio que permite construir sitios web con la modalidad hazlo-tumismo, una herramienta online gratuita que permite crear y personalizar sus
propios sitios web. Wix tambin es considerado como un creador de pginas web.
.

El Wix cuenta con una

interface
simple
de
arrastrar y soltar, con la
que puedes personalizar
t
pgina
sin
programacin
o
conocimientos de diseo.

Para iniciar con la creacin de nuestro sitio web en WIX seguimos el siguiente
proceso:

Registrarse en WIX
1. Abrir su navegador de internet y acceda a la siguiente direccin:

http://es.wix.com

10

2. A continuacin debe registrarse en WIX (crear una nueva cuenta), para lo

cual debe ingresar un correo vlido y una contrasea:

En caso de que ya se cuente con un usuario (correo) y una clave se puede

acceder directamente.

Entorno de WIX
Ingresado a WIX, se muestra el entorno de trabajo, donde destacan los siguientes
elementos:

Opcin para crear un

nuevo sitio web

Opciones de WIX

Opciones de WIX:

Mis Sitios: Permite visualizar los sitios web creaos anteriormente con esta
cuenta de usuario.

Plantillas Muestra las plantillas que puede usar para disear su sitio web.

11

Explora: Muestra ejemplos pginas web de otros usuarios de WIX, en los

cuales podemos basarnos para crear nuestro sitio web.

Suscripciones: Muestra alternativas para suscribirnos en otros servicios de

WIX,

Administracin de plantillas en WIX

3. Si recin hemos creado una cuenta en WIX nos muestra una ventana de
bienvenida y a la vez nos invita a seleccionar una categora y subcategora de
plantillas que podemos seleccionar para iniciar con la creacin de nuestro sitio.

Pero si ya somos usuarios de WIX, haga clic en la opcin Plantillas del men
del WIX, donde podemos seleccionar la categora y plantilla a usar como en la
siguiente imagen:

12

Creacin de un sitio web en WIX

4. A continuacin iniciaremos con la creacin de nuestro sitio:
a) Seleccionamos una categora para visualizar las plantillas de ese
rubro. Ejemplo: Consultora y Coaching.
b) De cada plantilla podemos tener una vista previa en la opcin Ver, si
deseamos quedarnos con esa plantilla para nuestro sitio hacemos
clic en Editar. Ejemplo: En la plantilla Asesor de negocios, elija el
botn EDITAR.

a
b

5. En la parte superior nos muestra un grupo de opciones las cuales describimos

a continuacin:

a) Botones que te permiten deshacer o rehacer la ltima accin ejecutada.

b) Botones que te permiten copiar y pegar elementos de Wix.
c) Botn que te permite visualizar la cuadricula para que puedas alinear
tus elementos agregados.
d) Te muestra una vista previa del sitio web que estas estas creando.

13

e) Permite asignarle un nombre a tu sitio (subdominio) para que pueda ser

guardado y actualizado antes de publicarlo y posteriormente utilizado
por los usuarios finales.
f)

Permite publicar el contenido de nuestro sitio creado, una vez activada

esta opcin todos los cambios guardados sern visualizados por el
pblico en general (haciendo uso del subdominio con el que se guard).

g) Todos los servicios usados hasta este momento han sido gratuitos si se
desea acceder a configuraciones ms avanzadas y profesionales
pueden adquirir un plan haciendo clic en este enlace.

Editor de WIX
Ahora procedemos a personalizar la plantilla, para hacerlo podemos ir a las
opciones del panel lateral izquierdo, o tambin seleccionamos el elemento de
la plantilla a modificar y haciendo clic derecho sobre l, nos muestra sus
propiedades a configurar.
Recuerda, que siempre debes ubicarte en la pgina que desees configurar para
personalizarla.

Para navegar y configurar las pginas del sitio web

Para personalizar el diseo de las pginas web (fondo, colores y fuente)

Para agregar componentes a la pgina web.

Para acceder a las aplicaciones en las puede estar tus pginas.

Para acceder a la configuracin del sitio web.

Editar y aadir pginas en el sitio web

Ejercicio:
Iniciaremos nuestro trabajo, editando las pginas existentes y aadiendo nuevas en
el sitio web.
Pasos:
En la opcin PGINAS:
1. Hacer clic en la opcin de Pginas se pueden administrar los contenidos que
irn en cada pgina web.

14

2. Personalizar las opciones de la pgina

3. Personalizar la privacidad de la pgina
4. Personalizar la transicin de la pgina.

Otra manera de pasar

pgina por pgina es por la
opcin Pginas que se
muestra en la parte
superior de esta ventana.

Para nuestro ejemplo:

1)

Nos muestra los nombres de cada uno de los elementos de nuestro

men, as como la opcin para poder personalizarlo. Ejemplo. INICIO.

2)

Podemos configurar el nuevo Nombre de la Pgina que aparecer en

nuestro men de enlaces (podemos obtenerlo del Dise Lgico.
Ejemplo: Inicio), as como la Direccin Web de la Pgina que es el
nombre interno que se usar en los enlaces (podemos obtenerlo del
Diseo Fsico). Ejemplo: Inicio

3)

Toda pgina debe tener un ttulo que aparece en la barra de Ttulo del
Navegador Web, una descripcin resumida de lo que contiene la pgina
y las palabras clave que la identifican, estos datos sirven para que los
buscadores web puedan relacionar sus bsquedas con nuestras
pginas.

15

4)

Nos permite seleccionar la forma en que se mostrarn las pginas al

pasar de una a otra.

En la opcin DISEO:
Podemos escoger un color o diseo para el fondo, colores y fuente:

En diseo de Wix tenemos

fondos, colores y fuentes
para todas las pginas del
sitio web

Estas opciones, las puede personalizar segn el diseo que tendr su sitio web.
La opcin de Fondo, nos permite configurar el
diseo de nuestras pginas, como el color del
Fondo de la pgina, los Colores que se
utilizarn en los textos, enlaces, etc. Y las
Fuentes para los distintos textos que se
contengan.

16

Aadiendo una pgina nueva, enlace o men:

1. Seleccione la opcin Pginas y elija la opcin Agregar>>
2. Elija la opcin a aadir:

a. Pgina: deber ingresar el nombre de la pgina a aadir.

17

b. Enlace: para crear un enlace a una direccin web, previa eleccin

del tipo de enlace.

c.

Men: para agregar un men desplegable.

Guardar el sitio web en WIX

Personalizado nuestro sitio web en WIX, deber guardarlo para su posterior
publicacin.
Pasos:
1. Hacer clic en el botn Guardar

18

2. Ingrese el nombre del sitio web, con el cual obtendr la direccin del mismo.
Ejemplo: consultor

Salir del Editor de WIX

Hacer clic en la opcin WIX y elija Salir del Editor.

1. Hacer clic en el botn Publicar.

19

App, es una abreviatura de aplicacin. Es una aplicacin o tambin llamada

una pieza de software. Puede funcionar en Internet, en su computadora o en
su telfono o dispositivo electrnico.

REFERENCIAS:

Ramn Marino. Diseo de Pginas Web y Diseo Grfico: Metodologa

y Tcnicas para la Implementacin de Sitios Web y Diseo Grfico.
Edicin Sep 30, 2005.

Unidad de Modernizacin y Gobierno Digital. Gua Digital.

Disponible en: http://www.guiadigital.gob.cl/

Wix. Disponible en: http://es.Wix.com/

20