SITIOS WEB Y WIX

1
 Diseño de la estructura del sitio web: El diseño lógico y
físico (mapa de sitio)
 Boceto para el diseño de páginas en un sitio web
 Implementación de un sitio web multimedia en WIX
GUÍA DIDÁCTICA

Descripción
Con las ventajas del internet conoceremos algunas definiciones
fundamentales para comprender la terminología 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 diseño para crear sitios web
coherentes y consistentes, que faciliten posteriormente la creación de páginas web
haciendo uso de múltiples herramientas aplicativas.

Iniciaremos esta sesión con la planificación del desarrollo de un sitio web y

luego elaboraremos los diseños básicos 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 sesión 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 creación y administración de Sitios Web.

Evaluación
En esta sesión Ud. será evaluado en:
 Planifica e implementa un sitio web multimedia en WIX de tipo empresarial en
forma organizada y eficiente.
Diseño de la estructura del sitio web: El diseño lógico
y físico

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 más sencillas y fáciles de realizar, por ello un sitio web debe
obedecer a un adecuado análisis, diseño e implementación nos brindará una
adecuada información en un entorno del trabajo interactivo y conectivo.
En esta sesión estudiaremos las fases de un buen diseño que son utilizadas
para diferentes tipos de aplicaciones hipermedia como galerías interactivas,
presentaciones multimedia y aplicaciones web. El éxito de estas fases es la clara
identificación de los diferentes niveles de análisis y diseño en forma independiente
de la implementación y aplicar las tecnologías adecuadas a cada una en el
proceso de su desarrollo.

Estas fases son:

Antes no existía una

metodología clara para el
diseño de páginas web
pero esta situación se
alivió con el uso de
metodologías para
planificar intranets.

1. Análisis
En el desarrollo de un sitio web podemos iniciar por dar respuesta a un grupo
muy concreto de interrogantes, que permitirán aclarar y definir de manera
básica las expectativas existentes para el sitio web a desarrollar.

Las consultas más frecuentes en esta etapa son las siguientes:

3
Estas respuestas permitirán dar forma a los siguientes elementos de análisis:
a) Objetivo: Definir las metas del proyecto, estas deben ser generales y
específicas, 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 las ventas y
la cantidad de clientes.
 Presentar públicamente los informes más importantes de la
institución.

b) Audiencia: Está claro que el Sitio Web no podrá atender al todo público
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
atenderán desde las páginas del sitio.

4
 Ejemplos:
 Personas con nivel de instrucción superior orientados a la
educación.
 Jóvenes entre 18 y 25 años interesados en la adquisición de
productos tecnológicos.
 Proveedores de empresas industriales interesadas en
conocer los servicios y productos brindados.

c) Tecnología: qué servicios interactivos se le incorporarán al sitio.

 Mientras más claro se definan y detallen los servicios, el proyecto
estará más 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 más 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 identificación de
Objetivos y de Audiencias, ya que en ambos la búsqueda giró en
torno a las necesidades que tenían los usuarios del sitio.
 El último paso que se debe desarrollar en esta etapa es la búsqueda
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. Diseño.
a) Diseño Lógico.
Se refiere al proceso de crear un diagrama de contenidos en el que se
muestre de manera práctica cuántas secciones tendrá el sitio web y
cuántos 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
clics del contenido que anda buscando. Por ello no se debería crear
más de tres niveles de acceso.

5
 Ejemplo:

b) Diseño Físico (Sistema de navegación):

Una vez que se tiene el diseño lógico desarrollado, debemos generar los
sistemas de acceso a dichos contenidos en el Sitio Web. A través de
estos, los usuarios podrán navegar por sus diferentes áreas, sin perderse.
Al generar el sistema de navegación, se deben tener en cuenta las
siguientes características:
 Consistente: el sistema debe ser similar en todo el sitio, en lo
referido a su ubicación y disposición en las páginas.
 Uniforme: el sistema debe utilizar similares términos con el fin de
que el usuario que lo vea en las páginas, confíe 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
guía permanente en el área en que se encuentre del sitio.

Para este fin utilizaremos el diseño físico el cual indicará el nombre de los
archivos que se crearán y cómo estos se relacionarán.

6
 Ejemplo:

Diseño de Directorios:
Este ítem nos permite estructurar las carpetas o directorios que usaremos y
nos servirán para ordenar los elementos de nuestro sitio.
Ejemplo:

Diseño de botones y menús:

Una vez que se ha terminado el trabajo en la maquetación procedemos a
diseñar las barras de navegación, menús, botones y demás elementos a
utilizar en la implementación de nuestras páginas para el sitio web.

7
 Ejemplo:

Preparación de Contenidos:
Para finalizar la etapa del diseño procedemos a crear y/o recolectar el
contenido que será publicado en cada una de nuestras páginas que
conformarán nuestro sitio web.

3. Implementación:
Una vez concluidas las fases anteriores procedemos a seleccionar las
herramientas más adecuadas para proceder a implementar nuestro sitio
web y poder ponerlo en funcionamiento.
Existen herramientas que permiten la implementación desde el más básico
y otras herramientas utilitarias que generan contenidos o modifican
estructuras con la finalidad de hacer más sencillo el trabajo.
Una vez terminada la implementación 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 podrán acceder al contenido alojado en un
servidor.

8
Boceto para el diseño de páginas 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 generación del diseño visual de
las pantallas del sitio.
En algunos casos se denomina diseño de maquetación o diagramación
considerando una distribución de los espacios para los contenidos a publicar.

Debemos tener en cuenta que el diseño implica dos partes:

a) Las áreas que se mantendrán iguales en todas las páginas, lo que

caracterizará y uniformizará a nuestro sitio web. (Menús, Publicidad, etc.)
b) Las áreas que cambiarán de página a página. (Contenido propio de cada
página).
Ejemplo:

Los bocetos o
maquetación ayudan en la
organización de la
información (ubicación de
los contenidos) en las
páginas web.

9
Implementación de un sitio web multimedia en WIX

WIX es un servicio que permite construir sitios web con la modalidad hazlo-
tu-mismo, una herramienta online gratuita que permite crear y personalizar sus
propios sitios web. WIX también es considerado como un creador de páginas web.
.

El WIX cuenta con una

interface simple de
arrastrar y soltar, con la
que puedes personalizar
tú página sin
programación o
conocimientos de diseño.

Para iniciar con la creación de nuestro sitio web en WIX seguimos el siguiente
proceso:
Registrarse en WIX (Usuario Nuevo)
1. Abrir su navegador de internet y acceda a la siguiente dirección:
http://es.WIX.com

10
2. A continuación debe registrarse en WIX (crear una nueva cuenta), para lo
cual hacer clic en el botón Entrar:

3. Ingrese los datos solicitados para acceder al WIX. Ejemplo: Correo, Soy un
nuevo usuario y Contraseña.

4. Hacer clic en el botón CONTINUAR. Ingrese nuevamente lo solicitado y haga

clic en el botón REGÍSTRATE.

5. Se tendrá el siguiente entorno:

11
 Desde entorno podrá seleccionar la plantilla del sitio web a diseñar para sus
páginas.

Acceder al WIX (Usuario existente)

En caso de que ya sea usuario de WIX, puede acceder directamente.

1. Abrir su navegador de internet y acceda a la siguiente dirección:

http://es.wix.com

2. A continuación debe acceder a WIX, para lo cual hacer clic en el botón

Entrar. Ingrese los datos solicitados y haga clic en el botón CONTINUAR.

12
3. Tendrá el siguiente en entorno

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 diseñar su sitio web.
 Explora: Muestra ejemplos páginas 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,

13
Administración de plantillas en WIX

Si recién hemos creado una cuenta en WIX nos muestra una ventana de
bienvenida y a la vez nos invita a seleccionar una categoría y subcategoría de
plantillas que podemos seleccionar para iniciar con la creación de nuestro sitio.

Categoría Sub Categoría de

plantillas

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

14
Creación de un sitio web en WIX

A continuación iniciaremos con la creación del sitio:

1. Seleccionamos una categoría para visualizar las plantillas de ese

rubro. Ejemplo: Consultoría y Coaching.
2. De cada plantilla podemos tener una vista previa en la opción Ver, si
deseamos quedarnos con esa plantilla para nuestro sitio hacemos
clic en Editar. Ejemplo: En la plantilla Asesor Consultor, elija el
botón EDITAR.

b
a

3. Ahora se encuentra en la ventana del Editor del WIX.

Editor de WIX
Ahora procedemos a personalizar la plantilla, para hacerlo podemos ir a las
opciones del panel lateral izquierdo, o también 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 página que desees configurar para
personalizarla.

15
Selector de Página a editar Opciones de Almacenamiento y Publicación del Sitio

Configuración del Sitio

Herramientas
de Edición de
Páginas
Barra de
Herramientas

a) Selector de Páginas: Para seleccionar la página web que desea editar.

16
b) Herramientas de Edición de Páginas: Para personalizar las páginas del sitio
web

Personaliza el diseño de las páginas del sitio web

(Fondo, colores y fuente)

Para agregar componentes a la página web.

Para acceder a las aplicaciones en las puede estar tus páginas: contactos,
redes sociales, ventas online; a través de variadas herramientas de
Marketing.

Para cargar y administrar sus archivos personales a usar en el sitio web.

c) Configuración del sitio: Para personalizar el sitio web.

d) Opciones de Almacenamiento y Publicación del Sitio:

Deshacer Cambiar Guardar Vista Publicar

versión del previa
editor

17
e) Barra de herramientas: Muestra las propiedades del objeto seleccionado en
la página, para ser ajustadas.

Editar y añadir páginas en el sitio web

Ejercicio: (Editar páginas)

Iniciaremos nuestro trabajo, editando las páginas existentes y añadiendo nuevas
en el sitio web.
Pasos:
1. En el Selector de PÁGINAS, elija la página a editar. Ejemplo: INICIO
2. Hacer clic en el botón de opciones de la página selecciona para configurarla.

3. Personalizar las opciones las fichas Información, Estilos, Permisos y SEO

(Google), según requerimiento del diseño.

18
4. Personalizar la transición de la página. Ejemplo: Atenuado

5. El mismo proceso debe desarrollarse para cada página del sitio web.

Configurar el Fondo de la Página

6. En las Herramientas de Edición de Páginas, elija la opción FONDO.

19
7. Podemos escoger un color, imagen o vídeo para el fondo; pudiendo también
aplicarse a otras.
a. Al hacer clic en el botón Color, puede seleccionar el color a aplicar.

b. Al hacer clic en el botón Imagen, puede seleccionar la imagen a

aplicar (desde su PC o del WIX).

20
 c. Al hacer clic en el botón Vídeo, puede seleccionar el video a aplicar
(desde su PC o del WIX).

Añadiendo una página nueva, enlace o menú:

1. En el selector de páginas, elija la opción +Agregar páginas

2. Elija la opción a añadir: PÁGINA.

21
a. Página: deberá ingresar el nombre de la página a añadir. Ejemplo:
ASESORES.

b. Enlace: para crear un enlace a una dirección web, previa elección

del tipo de enlace.

22
 c. Menú de encabezado: para agregar un menú desplegable.

Guardar el sitio web en WIX

Personalizado nuestro sitio web en WIX, deberá guardarlo para su posterior

publicación.

Pasos:

1. Hacer clic en el botón Guardar

2. Ingrese el nombre del sitio web, con el cual obtendrá la dirección del mismo.
Ejemplo: computacion3.

23
Publicar su sitio web

1. Hacer clic en el botón Publicar.

2. Hacer clic en el botón Hecho. O en el botón Ver sitio, si así lo desea.

Salir del Editor de WIX

Hacer clic en la opción WIX y elija Salir del Editor.

24
 App, es una abreviatura de aplicación. Es una aplicación o también llamada
una pieza de software. Puede funcionar en Internet, en su computadora o en
su teléfono o dispositivo electrónico.

REFERENCIAS:

 Ramón Marino. “Diseño de Páginas Web y Diseño Gráfico: Metodología

y Técnicas para la Implementación de Sitios Web y Diseño Gráfico”.
Edición Sep 30, 2005.
 Unidad de Modernización y Gobierno Digital. Guía Digital.
 Disponible en: http://www.guiadigital.gob.cl/
 WIX. Disponible en: http://es.WIX.com/

25