Taller Nº 1 Internet

www.wix.com/alfredosuma/index [email protected]

Página 1

TALLER Nº 1 Internet

EJERCICIO Nº 1. DISEÑO CON GRUPOS DE PÁGINAS

1. Ingrese a Internet y abra la página: www.es.wix.com. Luego de clic sobre el botón: Comienza ahora

2. Si ya está registrado ingrese por la pestaña: Entrar. Si no está registrado ingrese por la pestaña: Regístrate.

http://www.es.wix.com/


Página 2

3. Para registrarse escriba su correo electrónico que se le asignó en el momento de su matrícula y una contraseña que no vaya a olvidar.

4. Después de registrarse ya puede comenzar a crear su propio WebSite Flash. De clic en el botón: Empieza a crear.

5. Existen muchas plantillas prediseñadas que se pueden tomar como ejemplo para crear su WebSite,

pero nosotros vamos a trabajar con: Sitio web en blanco. De clic en este enlace para ingresar al diseño.

6. A continuación verá su hoja de trabajo. Probablemente vea una ventanita con información de

bienvenida, por favor ciérrela dando clic en Aceptar.

7. A la izquierda tenemos cuatro botones: tres en la parte superior y uno en la esquina inferior. Estos son botones de

comando. Allí encontramos todos los objetos que vamos a insertar en nuestra hoja de trabajo.

A continuación veremos una breve descripción de los botones que se ven al lado izquierdo de la página.

8. El botón: Agregar, contiene:

a. Texto. Para Títulos y para Párrafos.

Muestra una variedad de modelos para escoger


Página 3

b. Fotos. Podemos obtener fotos de Wix o cargar nuestras propias fotos en formato JPG

c. Galerías. Son contenedores donde podemos insertar un grupo de fotografías o de imágenes.

Estos contenedores o galerías son: Diapositivas, Slider, Cover Flow, Carrusel, Matrix, Collage, Abanico, Acordeón, Animadas y Photo Album

d. Música & Video. Para agregar música y Videos de YouTube a la página

e. Clip Art. Aquí podemos insertar: ClipArt, Formas, Líneas, Íconos y Animaciones

f. Páginas. Para insertar Grupos de páginas y Áreas

g. Navegación. Son Menús, Botones y Controladores que nos permiten desplazarnos por las

páginas que hayamos insertado

h. Widgets. Encontramos: Formulario de contacto, Comentarios, RSS (feeds de twitter o blog), Google Maps y agregar HTML

i. eCommerce. Para insertar botones de PayPal y Tienda Online

9. El botón: Fondo, contiene las opciones del Sitio Web, tales como: Dominio, Apariencia, Favicon (ícono que aparece en el encabezamiento del navegador y en los marcadores), Optimización del Sitio y

Estadísticas. En Página maestra podemos cambiar el color del fondo del Sitio.

10. El botón: Mis archivos, nos permite subir nuestros archivos de: Fotos, Música, Documentos de Word, Excel y PowerPoint, y documentos SWF (Flash)

NOTA: Al lado derecho de la pantalla se encuentra la ventana: Administrar páginas, donde se encuentra la página maestra (Master Page 1) y es el espacio donde agregamos todas las páginas y

objetos que se va a contener nuestro sitio web. A la página maestra le podemos cambiar el fondo con color, gradiente, textura, animación, marco y centrar.

11. De clic en el Comando Fondo – Pág. Maestra y cambie la apariencia de su página maestra.

12. En el administrador de páginas, de clic en el botón de Agregar página. OJO: No agregue página

maestra, debe dar clic únicamente en Agregar página.

13. La página que acaba de agregar tiene el nombre Page 1, usted debe cambiar el nombre por uno que indique el contenido de la misma. Por ejemplo, la primera página se debe llamar Inicio. Al lado

derecho de: Page 1 encontrará un pequeño botón de navegación, ingrese por este botón y de clic en Renombrar para cambiar el nombre de la página y escriba Inicio y pulsa Enter.

14. De clic nuevamente en Agregar página y dele el nombre: Contacteme (sin tilde) y da Enter.

15. Ahora vamos a agregar un navegador para desplazarnos por las páginas. En el Administrador de páginas (a la derecha) de clic en la página de Inicio. Luego en la ventana de abajo llamada: Grupo de páginas de clic en la opción: Agregar Menú, y seleccione cualquiera de los modelos que

aparecen en: Horizontal. Observe que se ven dos botones cada uno con el nombre de las páginas que hemos agregado.

16. En el mismo Grupo de páginas de clic sobre la opción: Transiciones y seleccione: Elastic.


Página 4

17. De clic sobre la página Inicio en el administrador de páginas y vamos a agregar un título. Al lado izquierdo de la pantalla, de clic en Agregar – Texto – Títulos y seleccione uno de los modelos de

muestra. Con el ratón muévalo a la parte superior de la página de Inicio que quede centrado y por fuera del margen llamado: Main Pages.

18. De clic sobre el título que acaba de agregar y luego de clic sobre Editar y escriba su nombre. Es

probable que necesite mover el título nuevamente de manera que quede centrado. Debe dar clic por fuera del título para poderlo mover.

19. De clic en Agregar – Texto – Párrafos y agregue un Texto Simple que debe ubicar debajo del

título de su nombre al lado derecho de la pantalla. Luego de clic sobre el párrafo que acaba de agregar y entre a Editar. De clic derecho sobre el párrafo y Copiar. También puede usar las teclas Ctrl – C.

20. Luego vaya a: Agregar – Texto – Párrafos – Desplazador y seleccione uno de los modelos. Ubique el cuadro debajo del título al lado izquierdo de la página. Dando clic entre a Editar y borre el contenido del cuadro. Pulse varias veces las teclas Ctrl – V hasta que se llene el cuadro.

21. Ahora vaya a Agregar – Fotos – Wix y seleccione una de las fotos y la ubica al lado derecho debajo de la página.

22. Su página debe quedar más o menos así:

23. Ahora vamos a poner efectos y comportamientos sobre los objetos que agregamos en la página.

a. De clic sobre la foto. De clic en Efectos en el Panel de opciones al lado derecho. Aplique: Reflection con Reflejo de Agua y Animated Glow.

b. De clic en Comportamientos y seleccione Expand on Roll tipo Lineal.

24. De clic sobre el párrafo de la derecha y aplique: Comportamiento – Emit on Roll


Página 5

25. De clic sobre el párrafo de la izquierda y aplique: Comportamiento – Glow on Roll. Si quiere puede cambiar el color.

26. Ahora de clic sobre el título y aplique: Efecto – Glow de color blanco. Luego aplique: Comportamiento – Flag Wave on Roll

27. Guarde su página escribiendo como nombre la palabra: Inicio y si es el caso de clic en el botón

Aceptar. Ahora vamos a publicar su página en la Web. De clic sobre el botón verde Publicar que aparece en el menú de arriba y siga las instrucciones.

28. De clic en el menú: Preliminar para que la mire funcionando.

29. De clic en el menú: Opciones en la parte superior y observe la dirección de su página donde dice: Dirección del Sitio.

30. Ahora de clic sobre el Texto con desplazador. Vamos a agregar animaciones.

31. En el panel de tareas de la derecha de la pantalla de clic sobre el comando Animaciones y seleccione Enter left

32. De clic sobre el otro párrafo y aplique Animaciones – Enter Right

33. De clic sobre la foto y aplique Animaciones – Expand in.

HOJA CONTACTEME

34. De clic sobre la hoja llamada: Contacteme. Vamos a: Agregar – Widgets – Formulario de

contacto – Horz Times y ubíquelo en la parte superior de la página debajo del título.

35. De clic sobre el formulario y aplique Cambiar Color. Seleccione un color apropiado y da clic en Aceptar.

36. Nuevamente de clic sobre el formulario y aplique Correo Electrónico. Donde dice: Tu correo electrónico, escriba el mismo correo que utilizó para registrarse en Wix.com.

37. Si desea tener una copia en otro de sus correos, escriba un correo alternativo en donde dice:

Dirección CCO y da clic en OK

38. Aplique al formulario: Efecto – Shadow – Color – Amarillo – Distancia 10

39. Ahora vamos a: Agregar – Widgets – Comentarios – iComments y ubíquelo debajo del

formulario de contacto

40. Aplique Color gris, el que está cerca del blanco. Aplique Efectos – Animated. Su página de Contacteme debería quedar más o menos así:


Página 6

41. Guarde su trabajo con el nombre: inicio y publíquelo.

42. De clic en: Preliminar y envíese usted mismo un mensaje al correo que utilizó para registrarse en Wix.com para que revise que realmente funciona el formulario de contacto. Escriba también un

comentario de Bienvenida.

43. Cierre su página y cierre sesión. OJO. No olvide cerrar sesión cada vez que cierre la página que esté trabajando.


Página 7

EJERCICIO Nº 2.

DISEÑO CON AREAS DE TRABAJO

1. Vamos a crear otra página, por favor

ingrese con su correo institucional y su

contraseña a wix.com.

2. Usted verá la página de Mi Cuenta como se muestra al lado:

3. Al lado izquierdo de la pantalla se encuentra su página ya creada y en el lado derecho podrá ver un botón que dice: Comienza a

crear. De clic sobre este botón.

4. De clic en: Sitio web en blanco y espere a que se cargue una página maestra

5. De clic en el botón Agregar de la izquierda y busque Páginas. Luego de clic en Areas

6. Aparece un cuadro en la pantalla, ubíquelo en la parte superior de la Página maestra dejando unos

centímetros a la izquierda y a la derecha del margen externo, y unos tres centímetros de alto. Esta será el Área de Título de nuestra página. Cambie el color de esta área.

7. De clic en el botón Agregar de la izquierda y vaya a: Texto – Título. Seleccione un modelo de

título y ubíquelo centrado sobre el área de título. Luego de clic sobre el título y entre por Editar y escriba su nombre. Debe quedar más o menos como se muestra a continuación:


Página 8

8. Ahora agregue otra área de trabajo y déjela al lado izquierdo, de arriba hacia abajo, para que nos sirva como Área de menú. Debe quedar más o menos como se muestra a la derecha:

9. Puede cambiar el color. Yo le agregué la imagen que se ve en la figura anterior, pero usted hágalo como desee.

10. Ahora vamos a agregar las páginas de contenido. De clic sobre el botón: Agregar página que se

encuentra en el Administrador de páginas en la parte superior derecha de la pantalla. El sistema crea una página llamada Page 1. Esta página se debe llamar: Inicio.

11. Ubique esta página de inicio respetando las márgenes de las áreas que ya tenemos, y las márgenes

de la página maestra. Luego cambie el color. Yo le dejé un paisaje como fondo pero usted puede colocar el fondo que desee. La página debe quedar parecido a lo que se muestra a continuación:

12. Observe el paisaje que se encuentra a la derecha del Área de Menú. Es la página de Inicio.

13. Ahora, vamos a Duplicar la página de Inicio. De clic en Inicio en el Administrador de páginas a

la derecha, sobre el botón de menú y seleccione Duplicar. Se crea la Page 2. Cambie el nombre de esta página por: Galería.

14. Ahora duplique la página de Galería. Se

crea la Page 3 pero usted le cambia el nombre por: Contacteme.

15. Ahora vamos a agregar un menú para

desplazarnos a través de las tres páginas. De clic sobre la página de Inicio y en el Grupo de páginas de debajo de clic sobre

la opción: Agregar menú. Busque en Vertical uno de los modelos y lo ubica en el Área de menú al lado izquierdo para que


Página 9

quede más o menos como la figura de la derecha:

16. Sobre la página de Inicio coloque un Texto – Párrafo – Desplazador y seleccione el modelo: Round Edge. Se debe rellenar el párrafo hasta que aparezca la barra de desplazamiento.

17. Al lado derecho del párrafo con desplazamiento agregue una Galería - Cover Flow - Blank. Luego

de clic sobre la galería y se mete por Administrar fotos para que agregue cinco fotos de Wix.

18. De clic en la página Galería que se encuentra en el Administrador de Páginas.

19. Vamos a agregar cinco galerías de fotos de las que se encuentran en: Agregar – Galería – Más –

Animadas. Agregue una galería Centered, una Tunnel, una Me First, una Photo Flip, y una PhotoStack. No cambie el tamaño de las galerías. Observe que cada una de estas galerías tiene un número determinado de fotos que se pueden administrar. Dando clic a cada una de estas galerías

ingrese por Administrar fotos y asigne fotos de Wix a todas las galerías.

20. Por último, en la página Contacteme, agregue un Formulario de Contacto y un Formulario de Comentarios.

21. Guarde su trabajo con el nombre: areas y publíquelo.

TERCERA PARTE.

DISEÑO CON DOS GRUPOS DE PÁGINAS

1. Antes de comenzar mire la siguiente página: http://www.wix.com/informaticabasica/grupos

2. Esta página está diseñada con dos grupos de páginas y cada grupo tiene tres páginas. Observe que hay dos grupos de botones de menú en la parte inferior de la pantalla, y cada menú tiene tres

botones, así: Inicio, contácteme y comentarios, forman el primer menú. Page 1, page 2, page 3, forman el segundo menú. Es decir, este Sitio web tiene seis páginas.

3. Entre a la página: http://es.wix.com, escriba su correo y contraseña y vamos a: Comenzar a crear

– Sitio web en blanco.

4. Vamos a agregar dos grupos de páginas. De clic en el botón Agregar que se encuentra arriba a la izquierda y luego en Páginas – Grupos de páginas – Principal – Page Group. El sistema le

coloca un grupo de tres páginas y usted debe acomodarlo a la izquierda del Master Page 1 ocupando un poco más de la mitad del espacio.

5. El letrero que aparece, que comienza con: Add pages to your website debe borrarlo. Agregue

otro grupo de páginas al lado derecho del anterior y cuadre su tamaño de manera que no quede montado sobre el otro.

6. En la parte superior derecha del Master Page y por fuera de los grupos de páginas agregue un título

con su nombre. Debe colocarle efectos, comportamientos y animaciones.

http://www.wix.com/informaticabasica/grupos

http://es.wix.com/


Página 10

7. Al lado izquierdo del título agregue una Galería de diapositivas – Circular y le adiciona cinco fotos. No olvide eliminar las fotos en blanco que se encuentran en la galería. El tamaño de esta galería se

debe achicar para que quede en la esquina superior izquierda del Master Page por fuera del grupo de páginas.

8. A cada grupo de páginas de debe agregar su menú. De clic sobre la Page 1 del grupo de la

izquierda y agregue un Menú – Horizontal – Shiny. Luego de clic sobre la Page 1 del grupo de la derecha y agregue un Menú – Horizontal – Shiny.

9. En la Page 1 del grupo de la izquierda agregue un Texto – Párrafo – Desplazador y lo llena con

cualquier texto. Lea las instrucciones que se encuentran en los párrafos de la página ejemplo: www.wix.com/informaticabasica/grupos. Su trabajo debe quedar parecido a esta página.

Con estas explicaciones, se pudo dar cuenta de la capacidad de Wix para crear rápidamente páginas Web con Flash. Obviamente, hay más tema, pero depende de usted experimentar las herramientas que ofrece Wix ya que son muchas y muy variadas

CREANDO SU SITIO WEB (EXAMEN FINAL)

Usted debe crear un Sitio Web que entregará el día del Examen Final con cinco páginas teniendo en cuenta las siguientes instrucciones:

1. Su Sitio Web debe tener solo una Master Page. Debe trabajar al menos cinco páginas de las cuales

la primera (Page 1) se llamará Inicio y la última se llamará Contacteme. Las otras tres páginas úselas para desarrollar el tema que usted seleccionó.

2. En la página Inicio debe ir el logo de la FES San Jose, el logo de su Facultad y/o Carrera si es

posible, su Foto, y una presentación personal donde se describa: ¿Quién es usted?, ¿De dónde es?, ¿Dónde vive?, ¿Cuándo nació? Pero debe tener cuidado de no revelar datos confidenciales como direcciones o teléfonos, ya que la página quedará en la Red de Internet.

3. En las otras tres páginas va el contenido, usted desarrollará uno de los temas que está viendo en su

semestre que se relacione con la carrera que está estudiando.

4. Las páginas de contenido pueden tener texto, texto con desplazamiento, video de youtube, fotos, galería de fotos, música, que tengan relación con el tema que está tratando y debe tener cuidado de

respetar los derechos de autor.

5. Todo tema, foto, video, etc., que usted incluya en su Sitio Web debe tener bibliografía o las direcciones de los sitios donde obtuvo la información.

6. No se aceptan enlaces a otras páginas. Usted debe escribir el tema que está desarrollando y no debe usar el famoso: Copy-Paste. Resuma la información y escriba un ensayo el cual será finalmente el que se publique en su Sitio Web.

7. El nombre de su página será: examenfinal

http://www.wix.com/informaticabasica/grupos

Documents

Taller Nº 1 Internet