web 2 ing elizabeth_morales

34
TUTORIAL WEB 2 Recopilación Ing. Elizabeth Morales Página 1 WEB 2 1. INTRODUCCIÓN A LA WEB 2 La Web 2.0 es la transición que se ha dado de aplicaciones tradicionales hacia aplicaciones que funcionan a través del web enfocadas al usuario final. 1. GMAIL. 1.- Abrir el buscador Google. 2.- Dar clic en la opción Acceder 3.- Dar clic en la opción Crear una cuenta ahora 3.- Llenar todos los datos del formulario.

Upload: jessica-travez

Post on 12-Jun-2015

170 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 1

WEB 2

1. INTRODUCCIÓN A LA WEB 2

La Web 2.0 es la transición que se ha dado de aplicaciones tradicionales hacia aplicaciones que funcionan a

través del web enfocadas al usuario final.

1. GMAIL.

1.- Abrir el buscador Google.

2.- Dar clic en la opción Acceder

3.- Dar clic en la opción Crear una cuenta ahora

3.- Llenar todos los datos del formulario.

Page 2: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 2

4.- Se abre la ventana de Google y en la parte superior se encuentra el nombre de la cuenta.

5.- Dar clic en el nombre del mail creado y seleccionar configuración de cuenta.

6.- En la ventana que se abre seleccionar gmail.

Page 3: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 3

7.- Al dar clic se abre la ventana del mail

1.- Redactar: permite crear un nuevo correo.

2.- Correo: permite visualizar los mails recibidos.

6.2 BLOG

Un blog, o en español también una bitácora, es un sitio web periódicamente actualizado que recopila

cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente.

Existen diferentes sitios donde se puede publicar un blog, por ejemplo: La coctelera, Blogger, Wordpress.com

Para el modulo se va a utilizar

1

2

Page 4: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 4

Pasos para crear el Blog.

1.- Ir a Google/Opción Mas/Todavía Más

2.- Al dar clic en todavía más se abre la ventana de servicios y herramientas de google

3.- Dar clic en blogger.

4.- en la pantalla que aparece registrarse en el Blogger

- Colocar el nombre con el que aparecerán las publicaciones realizadas.

- No olvidar de aceptar las condiciones

- Dar clic en continuar.

Page 5: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 5

5.- Asignar un nombre a tu bitácora. - "Título del blog": colocar el título del Blog de acuerdo al tema que se quiera crear; se recomienda

comenzar con uno sobre algún interés que tenga -- un deporte, música etc... Se puede cambiar después. "Dirección del blog": todo junto y sin caracteres extraños. comprobar la disponibilidad.

- Dar clic en Continuar

6.- Elegir la plantilla - La plantilla controla el aspecto visual de tu bitácora. Elegir (con un "clic") - Se puede cambiar después -- y de hecho, una vez creado tu "blog", saldrán más

opciones.

- Dar clic en continuar.

Page 6: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 6

7.- ¡Tu bitácora ya está creada! ¡Dar clic para "empezar a publicar" y escribir tu primera entrada.

Page 7: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 7

Dar clic en Ver el Blog para visualizar

Modificación de plantilla

1.- Dar clic en Diseño

2.- Dar clic en Diseñador de plantillas para personalizar el fondo de la plantilla

aplicada.

Page 8: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 8

1.- Seleccionar la plantilla con la cual se quiere personalizar.

2.- Dar clic en aplicar al blog.

1.- Si desea personalizar más del Diseño del Blog dar clic en Fondo, Ajustar Texto,

Diseño, Avanzado

1

2

Page 9: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 9

GADGET

Un Gadget es un código que puede ser instalado y ejecutado en cualquier Blog o página Web independiente

basado en HTML por un usuario final sin necesidad de compilación.

Como añadir un gadget para el blogger

Los Gadget/Widget para Blogger son una fantástica manera de adornar tu Blog de Blogger.

Por ejemplo:

- Chat,

- Reloj,

- Juego,

- Musica,Radio.

- etc.

En http://www.google.com/ig/directory?synd=open&source=gghx o en esta dirección http://www.gadgetsblogger.com/p/archivo.html o buscar en google gadgets para Blogger.

Aquí se pueden encontrar gadgets para añadir al blog :

A continuación se explica un ejemplo de cómo insertar un calendario en el blog.

1.- Buscamos un calendario para el blog.

2.- Dar clic en el calendario seleccionado y personalizarlo.

3.- Dar clic en botón obtener el código

Page 10: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 10

4.- Seleccionar y copiar el código.

A continuación se detalla como insertar en el blog el gadget.

Los pasos a seguir son los siguientes :

Ir en el Blog a Diseño->Elementos de página->Añadir un gadget->HTML/Javascript

Page 11: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 11

2. Ahora, te aparece una ventana con Gadget y Widget que puedes subir, darle clic a HTML/Javascript :

3 . Se abrirá una nueva ventana ahí se debe pegar el codigo HTML/Javascript que ha generado en la página de

los Gadgets o Widgets .

Page 12: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 12

4.- Dar clic en guardar y el gadget se visualizará de la siguiente manera

6.4 YOUTUBE

YouTube es un sitio web en el cual los usuarios pueden subir y compartir vídeos.

www.youtube.com

Registrarse en Youtube:

- crear un cuenta en Youtube, (El proceso es similar a cualquier registro exigido por cualquier página).

- Rellenar todos los campos obligatorios de registro.

- llegara un e- mail a nuestro correo solicitando la confirmación del usuario

- Pulsar la línea que ha sido enviada

- el registro se habrá completado y ya se dispone de los permisos apropiados para subir un video.

Subir un Video

- ingresar a la web de YouTube, y

- pulsamos en el botón ''Subir'', situado en la parte superior-derecha:

Page 13: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 13

- Indicar al servidor de YouTube que video se quiere subir, el cual debe encontrarse almacenado en el

computador. Para ello, pulsar sobre ''seleccionar archivos de tu ordenador”.

- Una vez pulsamos sobre ''seleccionar archivos de tu ordenador '', se abrirá una ventana de carpetas

perteneciente a nuestro equipo, en la cual se debe seleccionar y aceptar el archivo correspondiente

para subir el video YouTube:

Page 14: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 14

- En este punto, empieza realmente el proceso de subir un video a YouTube, ya que es aquí, donde se

da la orden del archivo que YouTube debe de alojar en sus servidores.

- Dependiendo del tamaño del archivo de video, la subida será más lenta o rápida, Youtube muestra

una barra de progreso dinámica, la cual nos mostrará de forma gráfica el porcentaje de subida

efectuado en cada momento.

Etiquetar un video de YouTube:

- Una vez que se ha subido el video a YouTube, el sistema automatizado del asistente, ofrece la

posibilidad de etiquetar el video.

El etiquetado tiene varias funciones:

1.- TITULO: en esta casilla, se pondrá el nombre público que tendrá el video.

2.- DESCRIPCIÓN: esta casilla sirve para comentar el video. El texto que se inserte servirá de leyenda para

todas las personas que lo vean.

3.- ETIQUETAS Y CATEGORIA: Las etiquetas se usan para catalogar los videos subidos a YouTube. Es una

forma de filtrar en búsquedas hechas por personas que quieren acceder a temas en concreto.

4.- PRIVACIDAD: Esta casilla sirve para establecer si el video que se ha subido a YouTube, se quiere que se

publique para todo el mundo, o sólo para usuarios a los que se quiere dar permiso.

Una vez que se tenga rellenos los campos del asistente, pulsa en el botón ''Guardar cambios'', así todos los

datos se agregarán al video anteriormente subido.

Como ver los videos publicados en YouTube:

Una vez que se conseguido subir un video a YouTube, asignarle un nombre, describirlo, categorizarlo y guardar

los datos junto a él.

1

2

3

4

Page 15: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 15

- Pulsar en el botón ''Gestionar mis videos,

- Se abre una ventana con todos los videos que has subido a YouTube, y desde donde podrás también,

editar tanto la etiquetación, como el nombre, la categoría,

o incluso

borrarlo.

- Dar clic en el video que se desea observar y pulsar sobre el botón reproducir:

Incluir el video en el Blog o Página Web.

Como se muestra en la imagen siguiente en youtube se encuentra los códigos para insertar el link del video o

para insertar un video.

Page 16: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 16

Dar clic en el botón que aparece en la parte inferior del video “COMPARTIR”

Posteriormente aparecerá la dirección URL y el botón Insertar

URL: te muestra la dirección exacta a introducir para acceder al video que has subido sin necesidad

de usar el buscador.

INSERTAR: el código que se muestra dentro de esta casilla, sirve para insertar la ventana de

reproducción de este video en concreto en una página HTML.

Dar clic en botón Insertar para obtener el código que se va a utilizar para publicar en el Blog.

Seleccionar y copiar el código.

NOTA, Si se desea insertar otro video encontrado en la web o referente al tema se deberá realizar los

mismos paso: botón compartir, Botón Insertar y Copiar el código

Pasos para Publicar el video publicado en el Blog

1.- Ir al blog y seleccionar Nueva Entrada. O

Page 17: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 17

1.1. Seleccionar la opción Escritorio/Nueva Entrada/

2.- Se abrirá una ventana en la cual debemos Insertar el título del video.

- Seleccionar la pestaña Edición de HTML

- Pegar el código.

- Dar clic en el Botón PUBLICAR ENTRADA.

3.- Dar clic en ver entrada.

Page 18: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 18

4.- Así se verá el video una vez publicado en el Blog.

6.5 FLASHVORTEX

Flashvortex es un sitio donde se puede generar banners o textos para colocarlos en un post, gadget o

comentarios.

1.- digitar en el navegador www.flashvortex.com.

2.- Seleccionar la opción Banner.

3.- Seleccionar el banner que se va a publicar en el blog, dar clic para editar el texto en el banner seleccionado

Page 19: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 19

4.- Editar los contenidos y dar clic en el botón GENERATE ANIMATION.

5.- El Banner se visualizara de la siguiente manera.

6.- Una vez terminada que la creación del banner copiar el código que se muestra en el recuadro de EASY.

7.- Ir al blog, seleccionar/ Diseño/Añadir un Gadget en la parte superior.

Page 20: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 20

8.- Pegar el código copiado y dar clic en los botones guardar .

9.- Dar clic en la opción Ver Blog y se visualizara el banner en el blog.

Page 21: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 21

6.6 VOKI.

Voki es una aplicación Web que permite personificar personajes digitales. Es decir, mediante un personaje

animado un usuario puede hablar, quienes lo escuchan verán ese personaje con su voz.

Funciona de la siguiente manera, después de registrarse, usted pude seleccionar un personaje, configurarlo a

su gusto y a este personaje le agrega una grabación de lo que va a decir, mediante grabación directa desde

Internet o mediante un archivo de audio subido. Al final aparece el código que se anexa a cualquier documento

html.

Usos en la educación: Es excelente para darle vida a las comunicaciones con audio, ya que el personaje virtual

articula y sigue el gesticulación del mensaje.

Puede servir por ejemplo para anexarlo en la explicación de un concepto, idea, para la introducción de un

curso. También para darle una personalidad a un curso y con esto me refiero a darle vida a uno estos

personajes para seguir un proceso. Básicamente es una forma de dinamizar la comunicación.

1.- Digitar www.voki.com

2.- seleccionar Register.

Page 22: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 22

3.- Llenar los datos de registro, dar clic en Finish.

4.- Dar clic en cerrar e ir al correo electrónico para confirmar el registro.

Page 23: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 23

5.- Dar clic en el link.

6.- volver a la página de www.voki.com

7.- Digitar el mail y la contraseña.

8.- Dar clic en Create a New Voki.

8.- Empezar a personalizar el Voki.

9.- Dar clic para empezar a escoger el personaje.

Page 24: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 24

i

10.- Seleccionar el Género: Male (masculino), Female(Femenino).

11.- Seleccionar el tipo de personaje que se desea crear.

Page 25: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 25

12.- Una vez seleccionado el personaje empezar a personalizarlo.

13.- personalizar, boca, ojos, piel cabello.

14.- seleccionar cabello, vestuario, accesorios.

15.- Una vez terminado de personalizar dar clic en done

Page 26: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 26

16.- Para cambiar le imagen del fondo dar clic en background/seleccionar el fondo y dar clic en done.

17.- Insertar un mensaje de bienvenida.

18. Seleccionar el idioma y el tono del mensaje.

Page 27: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 27

19. Publicar el Voki. Asignarle un nombre y guardar.

Dar clic en SAVE

A continuación aparecerá la pantalla con el código que se utilizara para insertar en el Blog.

Pasos para publicar el voki en el Blog.

1.- Abrir el blog.

2.- Ir a DISEÑO,

3.- Seleccionar Añadir Gadget.

Page 28: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 28

4.- Seleccionar la opción Html/javascript

5.- Copiar el código generado del voki.

6.- Pegar el código, asignar un nombre y guardar.

Page 29: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 29

7.- Dar clic en ver Blog y visualizar el voki.

6.7 SLIDESHARE

Esta herramienta es muy útil para almacenar, agrupar, distribuir, y administrar las presentaciones que

respaldan los cursos presenciales.

1.- Digitar http://www.slideshare.net/

2.- Dar clic en signup

3.- Llenar los datos.

Page 30: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 30

.

3.- Dar clic en Upload.

8.- seleccionar el archivo que se desea subir.

9.- El tiempo q demorara el archivo para subir dependerá del tamaño del mismo.

Page 31: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 31

10.- copiar el código del área EMBED para insertar en el blog.

11.- Ir al Blog./Diseño/ Creación de entradas/Asignar un título/Seleccionar Edición Html y pegar el código/

Publicar entrada.

12.- Ver entrada.

Page 32: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 32

Para la publicación en SlideShare debera estar en formato PDF, de esta forma deberan ser publicados el

triptico, Documento de texto, Presentación Multimedia.

Para crear revistas Digitales

1.- Dar clic en el sigueinte link

http://www.pageflip-flap.com/?gclid=CNvDjJyq1KsCFYxb7AodiXezQA

2.- Seleccionar el archivo e ingresar el mail

3.- Dar clic en el botón Flip-Flap!

Page 33: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 33

3.- Una vez que el archivo está listo se recibirá en mail

4.- En el correo electrónico nos llegara el código para utilizarlo en el Blog.

5.- Dar clic en el nombre del archivo

6.- Se abrirá el archivo LISTO Para publicar.

7.- seleccionar el medio en el que se va a publicar

Page 34: Web 2  ing elizabeth_morales

TUTORIAL WEB 2

Recopilación Ing. Elizabeth Morales Página 34

8.- se genera el código para utilizarlo en el blog

9.- Ir al blog/Nueva entrada

10.- Colocar un título, pegar el código en edición HTML/Dar clic en Publicar Entrada.

11.- en el blog aparecerá un link para abrir la publicación como libro o revista digital

i