1 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
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í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. 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 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 clicks 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-tumismo, 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 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. 11
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. 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 la 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. a b 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 versión del editor Vista previa Publicar 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