Herramientas para la Web 2.0 Patricia Acosta Vargas
Comercio Electrónico
ESCUELA POLITÉCNICA NACIONAL
CENTRO DE EDUCACIÓN CONTINUA - UNIDAD DE EDUCACIÓN VIRTUAL
Coordinación:
Ing. Andrés Larco, Msc.
Elaboración de Contenidos:
Ing. Patricia Acosta, Mgs.
Diseño Gráfico:
Ing. Carla Gómez Revisión:
Lcda. Gabriela Martínez, Mgs.
Primera Edición: Septiembre, 2013 Quito- Ecuador
Contenido
Herramientas para la Web 2.0 ... 3
Crear un Blog ... 3
Agregar una imagen en el blog ... 9
Agregar un video en el blog ... 13
Agregar un contador de visitas en el blog ... 17
Crear un formulario en Google Docs ... 20
Crear preguntas para el formulario ... 22
TIPO DE PREGUNTAS... 23
Pregunta de Tipo test ... 23
Tipo de pregunta Elegir de una lista ... 24
Tipo de pregunta Texto ... 24
Tipo de pregunta Casilla de verificación ... 24
Tipo de pregunta Escala ... 25
APLICAR UNA PLANTILLA AL FORMULARIO ... 25
GENERAR CÓDIGO EMBEBIDO ... 28
Código HTML para el blog:... 28
Para un enlace a un correo electrónico, foro el URL es: ... 28
EDITAR O MODIFICAR UN FORMULARIO ... 29
MOSTRAR EL RESUMEN DE RESPUESTAS ... 32
AÑADIR AL BLOG UN FORMULARIO EN GOOGLE DOCS ... 33
AJUSTAR EL TAMAÑO DEL FORMULARIO CON RELACIÓN AL BLOG ... 39
CREAR UNA PRESENTACIÓN EN ISSUU ... 40
INSERTAR LA PRESENTACIÓN EN EL BLOG... 48
ACTIVIDADES ... 51
HERRAMIENTAS PARA LA WEB 2.0 Crear un Blog
Un blog se conoce como weblog o bitácora, es un sitio web que recopila cronológicamente textos o artículos de uno o varios autores.
Para crear un blog se requiere disponer de una cuenta de correo electrónico. De preferencia una cuenta creada en gmail.com
Ingresar a la dirección:
https://www.blogger.com/start Se visualiza:
Ilustración 1 Crear una cuenta en Blogger
Se ingresa la dirección de correo electrónico y la contraseña.
En la Ilustración 2 se ingresan los datos solicitados como: Nombre visible, género.
Para continuar con la siguiente pantalla se debe activar con visto la opción:
Acepto las condiciones del servicio.
1.-Ingresar el Correo
electrónico, la Contraseña 2.-De clic en
Iniciar sesión
Ilustración 2 Registrarse en Blogger
Se visualiza la Ilustración 3.
Ilustración 3 Crear Nuevo Blog
Observe la pantalla de la Ilustración 4.
3.-Llene los datos
solicitados
4.-Active con un visto en Acepto las Condiciones del servicio
5.-Clic en Continuar
6.-Clic en Nuevo blog
Ilustración 4 Ingreso de título de blog
Se visualiza la ilustración 5.
Ilustración 5. Crear Blog
Observe la pantalla de la Ilustración 6.
7.-Ingrese un título para su blog
8.-Ingrese un nombre, el mismo que no deberá
contener espacios ni tildes, pues
será la
9.-Si
aparece un visto indica
que la
dirección ingresada 10.-Seleccione
una plantilla
11.-Clic en Crear blog
12.-Esperar unos segundos hasta que se cree el blog
Ilustración 6 Empezar a crear una entrada
Para colocar contenidos en su blog de clic en Empezar a crear una entrada.
Observe que para digitar un texto debe estar activa la opción Redactar.
Ilustración 7 Digitar el contenido del blog
Puede ingresar etiquetas para que el buscador incluya al momento de realizar búsquedas.
13.-Clic en Empezar a crear una entrada
14.-Clic en
Redactar
15.-Digitar el contenido del blog
16.- Ingresar
En la misma pantalla tiene opciones para configurar las entradas.
Ilustración 9 Configurar las entradas
Se puede registrar el sitio de ubicación del blog.
Ilustración 10 Opciones de Configuración de las entradas
Como se observa en la Ilustración 10 se pueden configurar varias opciones como: Comentarios del lector, Modo de redacción y Saltos de línea.
Una vez publicada su entrada, haga clic en Vista previa, observe como luce en la Ilustración 11.
Ilustración 11 Vista previa del blog
Si está en modo de edición y desea ver el blog de clic en Ver blog.
Ilustración 13 Vista del blog
Agregar una imagen en el blog
Para editar una entrada de clic en el ícono del lápiz.
Se visualiza:
Ilustración 14 Edición de una entrada en el blog
Revise que este activa la pestaña Redactar.
De clic en el icono el mismo que le permite insertar una imagen.
Se visualiza:
Ilustración 15 Pantalla para seleccionar una imagen para el blog
De clic en Elegir archivo. Se observa la pantalla de la Ilustración 16 en donde se selecciona la imagen a colocar en el blog.
Espere unos segundos hasta que suba la imagen
Ilustración 17 Subiendo el archivo
Se visualiza:
Ilustración 18 Imagen que subió en el blog
Haga clic en Añadir las imágenes seleccionadas. Se observa:
Ilustración 19 Imagen que se colocó en la entrada del blog
Clic en Actualiza r
Clic en Extra grande
Puede seleccionar el tamaño de la imagen, por ejemplo para hacerla muy grande haga clic en Extra grande. Para actualizar su blog de clic en Actualizar.
Se visualiza:
Ilustración 20 Vista al publicar la entrada actualizada
Pruebe como luce su blog, al dar clic en Ver blog.
Ilustración 21 Vista del blog
Clic en Ver blog
Agregar un video en el blog
Para agregar un video le sugiero crear una nueva entrada, de clic en Entrada nueva, observe como luce en la Ilustración 22.
Ilustración 22 Crear una nueva entrada en el blog
Observe como luce la Ilustración 23, esta lista la nueva entrada para colocar el video.
Ilustración 23 Crear una nueva entrada
Digite un título para la nueva entrada.
Clic en Entrada nueva
De clic en la pestaña HTML.
Ingrese a al sitio de youtube.com Seleccione un video de su preferencia.
Ilustración 24 Seleccionar un video de Youtube.com
De clic en el botón Compartir. Se visualiza:
Ilustración 25 Vista del botó Insertar en Youtube.com
De clic en el botón Insertar.
Ilustración 26 Código para insertar en la entrada del blog
Copie el código generado en la nueva entrada del blog. El código contiene:
Clic en Insertar
Visualiza el código para colocar en la entrada del blog
<iframe width="420" height="315"
src="http://www.youtube.com/embed/eBDLPiFWPNk" frameborder="0"
allowfullscreen></iframe>
Se visualiza:
Ilustración 27 Copiar el código en la entrada HTML
Ingrese las Etiquetas relacionadas con el tema.
De clic en Publicar.
Se observa la entrada publicada.
Ilustración 28 Entrada publicada
Para observar como luce el video en el blog de clic en Ver blog. Se visualiza:
Clic en Insertar Clic
en HTM
Digitar las
etiquetas
Ilustración 29 Video publicado en el blog
Agregar un contador de visitas en el blog
Se sugiere agregarlo como un gadget.
Ingrese al sitio de contador de visitas, localizado en:
http://contador-de-visitas.com/estilos-contador.htm Se observa:
Ilustración 30 Seleccionar contador para el blog
Seleccione en un diseño de contador. Digite un Valor inicial para el contador.
Ingrese la dirección URL del blog, por ejemplo:
http://herramientasgoogledocs.blogspot.com/
De clic en OK Se visualiza:
Ilustración 31 Código generado para colocar en el blog
De clic en Agregar a Blogger Se observa:
Ilustración 32 Añadir elemento de la página
Digite un Título para su gadget por ejemplo Contador de visitas.
De clic en Añadir artilugio.
Ilustración 33 Gadget añadido
De clic en Guardar
Ilustración 34 Guardar el blog
Contador de visitas
Clic en Guardar
De clic en Ver blog Se observa:
Ilustración 35 Vista del contador de visitas
Crear un formulario en Google Docs
Los formularios en Google Docs, le permiten recopilar los datos que desee.
En la Figura 1 se observa un ejemplo de un formulario creado en Google Docs:
Los formularios cuentan con las siguientes características:
Brindan un aspecto profesional, le permite elegir entre más de 60 temas y 7 tipos de preguntas.
Permiten añadir las respuestas de la encuesta a una hoja de cálculo de forma automática.
Se puede consultar fácilmente los datos recopilados, crear gráficos y cuadros complejos.
Para crear un formulario en Google Docs realice lo siguiente:
Ingrese a su cuenta de Gmail.
Dé clic en Docs.
Dé clic en CREAR.
Ilustración 37 Acceso a Docs
Se visualiza:
Ilustración 38 Seleccionar Formulario
Seleccione la opción Formulario como muestra la Figura 38.
Se visualiza:
Ilustración 39 Agregar título e instrucciones al formulario
Crear preguntas para el formulario
En Google Docs existen diferentes tipos de preguntas como las de texto, texto de párrafo, tipo test, escala, casilla de verificación, elegir de una lista, escala y cuadrícula.
Ilustración 40 Tipos de preguntas
TIPO DE PREGUNTAS
Pregunta de Tipo test
Este tipo de pregunta permite seleccionar una única opción.
Ejemplo: Seleccione su género:
Ilustración 41 Pregunta Tipo test
Para guardar la pregunta dé clic en Finalizado.
El icono del lápiz permite editar o modificar una pregunta.
El icono de las hojas duplica la pregunta.
Para eliminar una pregunta de clic en icono basurero
Si desea agregar una nueva pregunta haga clic en la opción
localizada en la sección superior izquierda de la pantalla de diseño del formulario.
Tipo de pregunta Elegir de una lista
Este tipo de pregunta permite elegir una opción de una lista.
Por ejemplo: Seleccionar una región del Ecuador.
Ilustración 42 Pregunta Tipo Elegir de una lista
Si desea eliminar un ítem dé clic en X.
Tipo de pregunta Texto
Este tipo de pregunta permite el ingreso de un texto. Por ejemplo: Ingrese el nombre de la ciudad en la que encuentra.
Ilustración 43 Pregunta Tipo Texto
Recuerde que para guardar cada pregunta debe hacer clic en Finalizado.
Si requiere que una pregunta sea obligatoria active con un visto la casilla Hacer que esta pregunta sea obligatoria.
Tipo de pregunta Casilla de verificación
Este tipo de pregunta permite elegir más de una alternativa. Por ejemplo:
Seleccione el uso que le da a las redes sociales
Ilustración 44 Pregunta Tipo Casillas de verificación
Si desea eliminar un ítem dé clic en X.
Tipo de pregunta Escala
Este tipo de tipo de pregunta permite evaluar una pregunta en base a una escala.
Por ejemplo: Indique como considera el uso de las redes sociales en la educación.
Ilustración 45 Pregunta Tipo Escala
En esta pregunta se considera 1 como Malo y la más alta 5 como Excelente.
APLICAR UNA PLANTILLA AL FORMULARIO
Para aplicar una plantilla al formulario realice lo siguiente:
Seleccione la opción Tema.
Ilustración 46 Aplicar un tema
Elija un tema.
Ilustración 47 Seleccionar un tema
Dé clic en Aplicar.
Ilustración 48 Aplicar el tema seleccionado
Observe en Tema: BooksClassic, es el tema que se aplicó anteriormente.
Ilustración 49 Tema aplicado
Revise el resultado final:
Ilustración 50 Resultado final
GENERAR CÓDIGO EMBEBIDO
Si desea incrustar el formulario en un blog o web site realice lo siguiente:
Seleccione Más acciones, dé clic en la opción Insertar.
Se visualiza:
Ilustración 51 Insertar código HTML
Se observa que el código embebido está entre las etiquetas
<iframe>....</iframe>
Ilustración 52 Código HTML
El código se lo puede copiar y pegar en un blog o sitio web.
Código HTML para el blog:
<iframe
src="https://docs.google.com/spreadsheet/embeddedform?formkey=dFZ5c DZoeXdYbkxMNDVIejhUMHd0emc6MQ" width="760" height="1040"
frameborder="0" marginheight="0"
marginwidth="0">Cargando...</iframe>
Para un enlace a un correo electrónico, foro el URL es:
https://docs.google.com/spreadsheet/embeddedform?formkey=dFZ5cDZ oeXdYbkxMNDVIejhUMHd0emc6MQ
Ilustración 53 Vista del formulario creado con Google Docs
Si desea puede llenar el formulario creado anteriormente.
EDITAR O MODIFICAR UN FORMULARIO
Para editar o modificar un formulario realice lo siguiente:
Dé clic en Docs.
Seleccione el formulario a modificar.
Ilustración 54 Seleccionar un formulario a modificar
Dé clic en Formulario.Seleccione Modificar formulario.
Ilustración 55 Modificar un formulario creado con Google Docs
Se observa:
Ilustración 56 Editar el formulario
Coloque el puntero del mouse sobre la pregunta a modificar, observe que se visualiza un grupo de íconos en la sección superior derecha de la pregunta.
Para empezar a editar la pregunta dé clic en el ícono del lápiz.
Ilustración 57 Guardar los cambios realizados
Para guardar los cambios realizados dé clic en Finalizado.
MOSTRAR EL RESUMEN DE RESPUESTAS
Para mostrar el resumen de respuestas realice lo siguiente:
Dé clic en Docs.
Seleccione el formulario a modificar.
Se visualiza:
Ilustración 58 Seleccionar un formulario a modificar
Dé clic en la opción Formulario.
Seleccione Mostrar resumen de respuestas.
Ilustración 59 Mostrar el resumen de respuestas
Se despliega la pantalla de la Ilustración 60.
Ilustración 60 Resumen de respuestas
AÑADIR AL BLOG UN FORMULARIO EN GOOGLE DOCS
Revise que el formulario de Google Docs esté compartido como público
Ilustración 61 Seleccionar el formulario
De clic en el formulario
Ilustración 62 Vista de las respuestas del formulario
De clic en Compartir
Ilustración 63 Cambiar al tipo de acceso Público en la Web
De clic en Cambiar
Clic en Compart ir
Clic en Cambiar
Ilustración 64 Clic en Guardar
Clic en Guardar
Ilustración 65 Clic en Fin
Clic en Fin para finalizar el proceso. Observe que se genera el código, copie el código embebido.
Clic en Guardar
Ilustración 66 Insertar formulario en una página web
De clic en Formulario.
De clic en Insertar formulario en una página web.
Copie el código.
Ilustración 67 Copiar el código
El código es:
<iframe
src="https://docs.google.com/spreadsheet/embeddedform?formkey=dFZ5c DZoeXdYbkxMNDVIejhUMHd0emc6MQ" width="760" height="1154"
Clic en Insertar formula rio en una página
Copiar el código
De clic en Nueva entrada
Ilustración 68 Crear nueva entrada
Se visualiza:
Ilustración 69 Seleccionar la pestaña HTML
Seleccione la pestaña HTML.
Pegue el código embebido que generó en el formulario de Google Docs.
Clic en
Nueva entrada
Clic en la pestaña HTML
Ilustración 70 Código copiado en la entrada HTML
De clic en Publicar
Ilustración 71 Clic en visualizar el blog
De clic en Ver blog.
Código pegado en la entrada HTML
Clic Ver blog
AJUSTAR EL TAMAÑO DEL FORMULARIO CON RELACIÓN AL BLOG
De clic en el ícono del lápiz
Ilustración 73 Editar una entrada
Se visualiza:
Ilustración 74 Cambiar el ancho del formulario
Cambie el ancho del formulario en la opción width="560"
De clic en Actualizar.
De clic en Ver blog.
Se observa:
Código generado del formulario
Ilustración 75 Vista del formulario con el nuevo ancho
CREAR UNA PRESENTACIÓN EN ISSUU
Ingresar al sitio: http://issuu.com/
Clic en
Create account
De clic en Create account Ingresar los datos solicitados
Ilustración 77 Crear una cuenta en issuu
Clic en Agree and continue
Ilustración 78 Confirmación de la cuenta enviada al e-mail
Ingresar los datos
solicitados
Clic en
Agree and continue
Confirmación de la cuenta enviada al e- mail
Para activar la cuenta ingresar al correo electrónico con el que creó la cuenta
Ilustración 79 Ingresar al correo para activar la cuenta de issuu
Se visualiza:
Ilustración 80
De clic en el correo recibido desde issuu.
Clic en el correo
enviado
Clic en Join issuu
De clic en Join issuu Se Observa
Ilustración 82
Clic en Verify account
Ilustración 83 Cuenta verificada
Se observa:
Ilustración 84 usuario creado
De clic en su usuario, por ejemplo en p.acosta Cuenta
verificada
Clic en el usuario
creado
Ilustración 85 Clic en Upload
De clic en Upload para cargar un documento.
Localice un documento en formato .pdf
Ilustración 86 Ingresar información del documento subido
Clic en Upload
Clic en Browse
Ingresar el título, descripción y al
menos dos
palabras claves separadas por
Clic en
Magazine
Seleccione el área donde se creó el documento
Ilustración 87 Clic en Upload file
De clic en Upload file.
Espere hasta que se cargue el archivo en un 100%.
Se visualiza:
Ilustración 88 Archivo colocado en issuu
Clic en No thanks, Go to my Library Clic en Upload file
Archivo
colocado en issuu
Clic en No thanks, Go to my Library
Ilustración 89 Cerrar las ventanas activas desde el ícono X
Cierre las ventanas desde el ícono X Se observa:
Ilustración 90 Clic en Open
De clic en Open
Clic en X para
cerrar la
ventana
Clic en Open
Ilustración 91
De clic en <> para generar el código HTML para el blog.
De
Ilustración 92 Generar código para le blog
Clic en
<>
Ilustración 93 Copiar el código generado
El código contiene:
<div><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
style="width:420px;height:158px" id="784bce79-6871-1e1e-0694- a7a7ca79099a" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.s wf?mode=mini&backgroundColor=%23222222&documentId=120 313113941-9545bfbc4e7a4c63855fbb3c52028eec" /><param
name="allowfullscreen" value="true"/><param name="menu"
value="false"/><param name="wmode" value="transparent"/><embed src="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf
" type="application/x-shockwave-flash" allowfullscreen="true"
menu="false" wmode="transparent" style="width:420px;height:158px"
flashvars="mode=mini&backgroundColor=%23222222&documen tId=120313113941-9545bfbc4e7a4c63855fbb3c52028eec"
/></object><div style="width:420px;text-align:left;"><a
href="http://issuu.com/p.acosta/docs/redes_educacion?mode=window&am p;backgroundColor=%23222222" target="_blank">Open publication</a> - Free <a href="http://issuu.com" target="_blank">publishing</a> - <a href="http://issuu.com/search?q=redes" target="_blank">More
redes</a></div></div>
INSERTAR LA PRESENTACIÓN EN EL BLOG
Abrir el blog, insertar una nueva entrada
Copiar el código
Ilustración 94 Seleccionar HTML
Seleccionar la pestaña HTML Pegar el código generado en issuu
Ilustración 95 Pegar el código
Clic en Publicar
Ilustración 96 Vista al publicar la entrada
Clic en Ver blog
Clic en HTML
Pegar el código
Ilustración 97 Clic en la presentación
La presentación puede ser expandida
Ilustración 98 Vista de la presentación expandida
Clic en la presentaci ón
ACTIVIDADES
Comparte la dirección de su blog (20 puntos) En este foro colocaremos el enlace (URL) a su blog.
El tema del blog debe estar relacionado con un tema de su preferencia.
El blog contendrá:
Mínimo tres entradas. Coloca como mínimo dos imágenes. (5 puntos)
Una plantilla relacionada con su tema. (2.5 puntos)
Un formulario generado en Google Docs, insertar el formulario en una entrada del blog. (5 puntos)
Un presentación generada en issuu (2.5 puntos)
Luego comenta dos blogs de sus compañeros, justificar y argumentar su comentario.
Evaluación
Para la evaluación de tu proyecto se considerará:
La calidad y presentación de tu blog. (2.5 puntos)
La calidad de comentarios y sugerencias aportados en este foro. (2.5 puntos)
Total 20 puntos.
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial- SinObraDerivada 3.0 Ecuador
