SITIOS WEB Y WIX

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

1

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.

3

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:

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:

Antes no existían 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.

4

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 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.

5

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

clicks del contenido que anda buscando. Por ello no se debería crear

más de tres niveles de acceso.

6

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.

7

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.

8

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.

9

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.

10

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.

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

.

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.

11

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

cual hacer clic en el botón Entra/Regístrate:

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.

12

5. Se tendrá el siguiente entorno:

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

Entra/Regístrate. Ingrese los datos solicitados y haga clic en el botón

CONTINUAR.

13

3. Tendrá el siguiente en entorno

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,

Opciones de WIX

14

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.

Pero si ya somos usuarios de WIX, haga clic en la menú Plantillas del menú del

WIX, donde podemos seleccionar la categoría y plantilla a usar como en la siguiente

imagen:

Categoría Sub Categoría de

plantillas

15

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.

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.

a

b

16

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

Selector de Página a editar

Herramientas de Edición de Páginas

Opciones de Almacenamiento y Publicación del Sitio

Barra de Herramientas

Configuración del Sitio

17

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

web

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

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

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.

Deshacer Cambiar versión del

editor

Guardar Vista

previa Publicar

18

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.

19

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.

20

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).

21

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.

22

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.

23

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.

24

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.

25

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/

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.