Download - Tutorial de wix
![Page 1: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/1.jpg)
Tutorial para crear especiales multimedia
en Wix desde cero
(Paso a paso)
![Page 2: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/2.jpg)
Lo primero que debemos hacer es ingresar a es.wix.com para registrarnos o acceder a la cuenta según sea el caso.
![Page 3: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/3.jpg)
Al ingresar aparecerá un pantallazo como este. Damos clic en Crear para comenzar a trabajar la plantilla de nuestro especial.
![Page 4: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/4.jpg)
Aparecerá un pantallazo como este. Daremos clic en la sección plantillas en blanco porque no trabajaremos con ninguna plantilla sugerida.
![Page 5: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/5.jpg)
Seleccionamos la opción Blank Template, que es una plantilla completamente en blanco.
![Page 6: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/6.jpg)
Damos clic en editar la Blank Template para que se nos despliegue un área de trabajo como esta.
![Page 7: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/7.jpg)
Menús que nos permitirán agregar todos los componentes del especial multimedia.
Reconociendo el área de trabajo
Administrador de páginas para llevar el control de las páginas que integrarán
nuestro especial multimedia.
Opciones para ajustar el zoom del área de trabajo, configurar el fondo, ver cómo va quedando el trabajo, publicar y publicar con dominio propio.
![Page 8: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/8.jpg)
Agregamos dos páginas maestras y borramos la página maestra propuesta My Website.
![Page 9: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/9.jpg)
Inicialmente nos olvidaremos de la página maestra 1 y nos dedicaremos a trabajar la página maestra 2. Nos colocamos sobre ella y le damos agregar páginas, es decir, el número de módulos que hemos establecido en el Storyboard para nuestro especial multimedia. El sistema nos ofrecerá estilos de página, podemos escoger la que se acomode a lo que necesitamos o nos vamos hasta el final y le damos vacío, para que inserte una página en blanco.
![Page 10: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/10.jpg)
Para el ejemplo, he agregado tres páginas a la página maestra 2. Es decir, en el especial que crearé tengo ideados tres módulos.
![Page 11: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/11.jpg)
Al colocar el puntero sobre las páginas, el sistema desplegará un menú que permite renombrar cada página. Colocamos allí el nombre de cada módulo de nuestro especial multimedia. Para el ejemplo: Introducción, Problemática y Soluciones.
![Page 12: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/12.jpg)
Para poder navegar las páginas es necesario agregarle los menús de navegación. Para ello nos vamos a Agregar, Navegación, Menús y escogemos el estilo que más nos interese. Nos cercioramos de que al hacer esta operación tengamos señalado en el Administrador de Páginas la página maestra 2, en este caso la he nombrado Home. De esa manera, el menú de navegación va a quedar anclado a la página maestra 2 y me permitirá navegar sus páginas.
![Page 13: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/13.jpg)
En la opción de menús de navegación hay: menús desplegables, horizontales, verticales y hasta miniaturas que permiten agregar fotografías.
![Page 14: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/14.jpg)
En la caja Menú encontramos opciones para personalizar el tipo de letra, color, sombreado y hasta comportamientos que tendrá el menú al desplazarse el mouse por cada sección.
![Page 15: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/15.jpg)
El área delineada de azul es el área del sitio, es decir de cada módulo del especial multimedia, mientras que el área más grande, delimitada en negro, es el área de la página maestra. Podremos colocar el navegador entre el área de la página maestra y el área del sitio. (El área del sitio puede ampliarse o reducirse manipulando los cuadros que aparecen al dar clic sobre ella)
![Page 16: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/16.jpg)
Para agregarle un marco a nuestro especial multimedia: damos clic en fondo, página maestra y la opción marco. Hay todo tipo de detalles, desde los más
festivos hasta los más sobrios.
![Page 17: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/17.jpg)
Si deseamos agregarle un marco a nuestro especial multimedia con imágenes relacionadas al tema trabajado, podemos ir a Agregar, Páginas, Áreas y agregamos
una de las opciones. Luego, sobre el área escogida se da clic, y en reemplazar color, el sistema brinda la opción de reemplazarlo por una imagen. El área insertada debe
ubicarse entre el margen del sitio y el margen de la página maestra.
![Page 18: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/18.jpg)
Dándole vida al especial
Para comenzar a meterle información a cada módulo del especial multimedia, es necesario dar clic en la sección correspondiente en el Administrador de páginas y darle clic a Agregar, Texto y darle clic a la opción necesaria: texto, párrafos o
notas. Esta última opción permite jugar más con el diseño porque da opciones de insertar post it, por ejemplo.
![Page 19: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/19.jpg)
Para agregarle texto largo al especial multimedia es necesario darle clic a Agregar, Texto, Párrafos e ir a la opción Desplazador. El sistema brinda la opción de
escoger entre varios estilos y una vez seleccionado el estilo aparecerá un cuadro de texto al que se le da clic, opción editar, se le pega el texto y automáticamente el
texto completo se leerá desplazándose sobre él. El sistema brinda opciones para cambiar el color, tamaño y tipo de letra.
![Page 20: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/20.jpg)
Para agregarle un video al especial multimedia debemos darle clic a Agregar, Música y Video, Video.
![Page 21: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/21.jpg)
Se desplegará un menú de Video como este. Se puede agregar el video de dos formas: por URL y se despliega este recuadro, o por el buscador directamente de
videos en Youtube.
![Page 22: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/22.jpg)
Para agregar una foto, debe darse clic en Agregar, Fotos. Se desplegará este menú. Se suben las fotos correspondientes al módulo en Cargar Imagen.
![Page 23: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/23.jpg)
Para agregar una galería fotográfica, debe darse clic en Agregar, Galerías. Se desplegará este menú y se escoge el tipo de galería deseado.
![Page 24: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/24.jpg)
Una vez seleccionada la galería, el sistema coloca la galería en blanco en la página. Se da clic en Administrar Fotos y se comienza a reemplazar cada
espacio por las fotos correspondientes.
![Page 25: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/25.jpg)
Para agregar Audio, debe darse clic en Agregar, Música y Video, luego en Música y se desplegará un menú como el mostrado en esta imagen. Puede
cargarse el mp3 desde una URL o cargar el archivo desde el PC, memoria o CD donde se tenga guardado.
![Page 26: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/26.jpg)
Para ser creativos con el diseño, al agregarse el audio se puede insertar un reproductor: clic en Agregar, Música y Video, luego en Música y en el menú
Reproductor.
![Page 27: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/27.jpg)
Agregué un iPod. Para comenzar a agregarle los audios, le doy clic a la imagen, clic en Lista de reproducción y aparece este menú para empezar a agregar los
audios. Agregué tres audios y luego para reproducirlos hago lo mismo que haría en un iPod real: selecciono el audio y doy play.
![Page 28: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/28.jpg)
Wix también permite agregar clip arts. Se puedes agregar formas, líneas, íconos y animaciones según nuestras necesidades de diseño.
![Page 29: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/29.jpg)
Los íconos del menú clip art pueden ser muy útiles para la sección de créditos. Por ejemplo, al lado de mi nombre, que he escrito acudiendo a Agregar, Texto,
Títulos, le coloco los íconos de Twitter y Facebook, que enlazaré a mis respectivas cuentas para poder ser contactada a través de estas redes sociales.
![Page 30: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/30.jpg)
Para enlazar, doy clic en enlace y se me despliega este menú: puedo enlazar a una página Wix, a una URL o a un correo electrónico. En este caso, el ícono de Twitter lo enlazo con mi dirección en Twitter y el de Facebook con mi dirección
en esa red social.
![Page 31: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/31.jpg)
En Agregar, Navegación, además de la opción Menús que ya exploramos antes, están las opciones botones y controladores. Con botones, Wix nos da distintos botones que podemos enlazar a un correo electrónico por ejemplo, a modo de
contacto. Mientras que al insertar los controladores podremos navegar mejor determinadas secciones del especial multimedia. Se pueden conectar a audios o
imágenes, cuando hay varios de estos elementos.
![Page 32: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/32.jpg)
En Agregar, Widgets, se puede insertar: Formulario de contacto, comentarios, RSS, Google Maps o HTML. Al dar clic en HTML, opción blank, se puede copiar
el código de alguna pieza que necesitemos insertar. Por ejemplo, una línea de tiempo o un mapa de Google específico.
![Page 33: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/33.jpg)
Wix permite agregar documentos a nuestro especial multimedia. Para ello debemos dar clic en Mis Archivos y en el tipo de archivo a subir: fotos, música, documentos o animación en Flash. Como ya sabemos, las fotos y la música se
pueden subir mediante la ruta Agregar. A través de Mis Archivos podemos subir documentos. En este caso subí uno de PDF, y el sistema permite que al dársele
clic al archivo, se abre en una nueva ventana.
![Page 34: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/34.jpg)
Páginas ocultas en un especial
Las páginas ocultas son oportunas para desarrollar más detalles de un módulo, pero que no queremos aparezcan como otra parte más del especial. En este caso, he
desarrollado tres módulos: Introducción, Problemática y Soluciones. Dentro de Problemáticas, por ejemplo, quiero hacer un listado de títulos. Cada uno conducirá a
una página que tendrá fotos, videos y las herramientas necesarias.
![Page 35: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/35.jpg)
Dentro de Soluciones he listado tres historias, que quiero se desarrollen tal como los módulos que sí estarán visibles. Para eso: agrego las páginas que necesito tal como
agregué los módulos. En este caso agregué tras páginas, que me aparecerán en el navegador, junto a Introducción, Problemática y Soluciones.
![Page 36: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/36.jpg)
Esas tres páginas nuevas deberán estar ocultas y para ello doy clic en el navegador, y luego en Administrar: se despliega un menú como el de la pantalla. Le doy ocultar a las páginas necesarias, en este caso: checa, mamones, tienda, que he denominado así para que se me haga más fácil el proceso de enlace de
cada título con estas páginas.
![Page 37: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/37.jpg)
Vuelvo a los titulares que he listado en la sección Problemática: hago clic en cada titular, selecciono enlace y selecciono la página Wix a la que necesito enviar ese
título.
![Page 38: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/38.jpg)
En mi ejemplo enlazo “La dejé mientras iba a la tienda” dando clic en Enlace, se me despliega un menú. Escojo la opción de enlazar a páginas Wix y se me despliegan
todas las páginas del especial. Comienzo así a enlazar cada título con su respectiva página oculta.
![Page 39: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/39.jpg)
Diseño de la página maestra I
![Page 40: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/40.jpg)
A la página Maestra I, como a la página Maestra II, podemos darle fondo o marco. En este caso como construiremos la portada de nuestro especial multimedia: podremos colocar una imagen, o un diseño hecho en algún
programa de diseño como Ilustrator, o publicar un video o una audiogalería a manera de introducción.
![Page 41: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/41.jpg)
La página Maestra I debe enlazar a la Página Maestra II. Para eso debemos enlazar algún objeto de la primera página maestra dando clic sobre él, luego enlace y en este caso enlazarlo a una página Wix. Dar clic en Seleccionar y
seleccionar Home, que es la página Maestra II.
![Page 42: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/42.jpg)
Publicar el especial
Una vez terminado el especial, debe darse clic en Publicar y aparecerá un pantallazo similar a este. El sistema arroja la dirección del especial y la
posibilidad de incrustarlo en algún sitio, por ejemplo un blog.
![Page 43: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/43.jpg)
Volver a editar el especial
Una vez publicado el especial se puede volver a editar. Para ello debe irse al pantallazo inicial de Wix. Como seguimos logueados, el sistema da la opción de
dar clic en Mi Cuenta, donde aparecen los productos trabajados. El más reciente aparece de primero y podemos darle clic en editar para seguir trabajándolo.
![Page 44: Tutorial de wix](https://reader033.vdocuments.pub/reader033/viewer/2022061203/547cfaeb5806b5ef3f8b4838/html5/thumbnails/44.jpg)
Los ejemplos empleados para crear este tutorial
pueden verse en:http://www.wix.com/tatta25/pruebatutorial
(Para ejemplos reales de especiales multimedia:
http://nochesdemedia.wordpress.com/2012/03/28/las-historias-que-hay-que-leer-escuchar-y-ver/
)