1. DIPLOMADO EN DOCENCIA
UNIVERSITARIA Y EDUMÁTICA
Sesión #2

2. CONTENIDO
Sesión Tema
Sesión 2 Tecnologías WEB
Navegador y Lenguaje HTML
Correo Electrónico y Mensajería Instantánea
Aplicaciones Google
Video en Internet
Compartir presentaciones

3. TECNOLOGÍAS WEB
Sesión #2

4. INTERNET

5. NAVEGADORES - BROWSERS
 Son programas que permiten
visualizar la información que
contiene una página web (ya se
encuentre ésta alojada en un
servidor dentro de la World
Wide Web o en un servidor
local).
 El navegador interpreta el
código, HTML generalmente, en
el que está escrita la página
web y lo presenta en pantalla
permitiendo al usuario
interactuar con su contenido y
navegar hacia otros lugares de
la red mediante enlaces o
hipervínculos.

6. PRINCIPALES NAVEGADORES
 Los principales navegadores:
 Internet Explorer
 Mozilla FireFox
 Safari
 Googlel Chrome
 Opera

7. EJEMPLO: MOZILLA FIREFOX
 FireFox es un navegador multiplataforma. Su código fuente es
software libre, publicado bajo una triple licencia GPL/LGPL/MPL.
 Incluye navegación por pestañas, corrector ortográfico, búsqueda
progresiva, marcadores dinámicos, un administrador de descargas y
un sistema de búsqueda integrado que utiliza el motor de búsqueda
que desee el usuario.

8. EJEMPLO: MOZILLA FIREFOX (CONTINUACIÓN)
 Además se pueden añadir
funciones a través de
complementos desarrolladas
por terceros, entre las más
populares están Adblock
Plus, Video
DownloadHelper, NoScript,
DownThemAll!, Cooliris,
Xmarks (antiguo Foxmarks
Bookmark Synchronizer),
Forecastfox, Boost a
Facebook, WOT, Tab Mix
Plus y FoxyTunes.

9. BUSCADORES
 Un buscador se
define como el
sistema informático
que indexa archivos
almacenados en
servidores web
cuando se solicita
información sobre
algún tema. Por
medio de palabras
clave, se realiza la
exploración y el
buscador muestra
una lista de
direcciones con los
temas relacionados.

10. CLASIFICACIÓN DE BUSCADORES
 ÍNDICES O DIRECTORIOS TEMÁTICOS: Los
índices o buscadores temáticos son sistemas
creados con la finalidad de diseñar un
catálogo por temas.
 MOTORES DE BÚSQUEDA: Este tipo de
buscadores son los de uno más común,
basados en aplicaciones llamadas spiders
("arañas") o robots, que buscan la información
con base en las palabras escritas.
 METABUSCADORES: Son sistemas que
localizan información en los motores de
búsqueda más utilizados. No tienen una base
de datos, por lo que no almacenan páginas
web y realizan una búsqueda automática en
las bases de datos de otros buscadores.

11.  Google Inc. es la empresa propietaria de la marca Google,
cuyo principal producto es el motor de búsqueda del mismo
nombre. Dicho motor surge como una tesis doctoral por Larry
Page y Sergey Brin.

12. Web 1.0 Comparación Web 2.0
(1993-2003) (2003- )
Muchas páginas web Multitud de
bonitas para ser contenidos
vistas a través de un compartidos a través
navegador. de servicios de alta
interactividad
Lectura Modo Escritura compartida
Página Mínima unidad de Mensaje - Artículo –
contenido Post
Estático Estado Dinámico
Navegador Modo visualización Navegador, Lector
RSS
Cliente - Servidor Arquitectura Servicio Web
Webmasters Editores Todos
"geeks” Protagonistas Aficionados

13. NAVEGADOR Y LENGUAJE HTML
Sesión #2

14. QUÉ NECESITAMOS PARA HACER UNA
PÁGINA WEB?
 Editor de Texto
 Un browser
 Probar, Depurar, Pulir
nuestro sitio
localmente
 Publicarlo al mundo!

15. ¿QUÉ ES HTML?
 Lenguaje que da formato
 Define la sintaxis y ubicación de imágenes, instrucciones y
objetos al navegador
 Posibilidad de conectar un documento con otros, o con otros
recursos en Internet a través de hipertexto
¿QUÉ NO ES HTML?
 No es un procesador de palabra
 No es una herramienta de escritorio para diagramación
 No es un lenguaje de programación
 No es multimedia

16. COMO FUNCIONA
Dame el archivo
Protocolo
HTTP
Browser Servidor WEB
Aquí está

17. TERMINOLOGÍA
 HTTP: (Hypertext Transfer Protocol)
Parámetros de comunicación cliente
- servidor Web
 HTML: (Hypertext Markup Language)
Lenguaje nativo para documentos
publicados en el Web independiente
del tipo de plataforma.
 URL: (Uniform Resource Locator)
Dirección de un objeto en el Web
http://www.colnodo.org.co/

18. EJEMPLO
<HTML>
<HEAD>
<TITLE>Un mejor documento</TITLE>
</HEAD>
<BODY>
<P>Novedades sobre el <EM>World Wide
Web</EM> disponible en
<A HREF="http://www.w3.org/">W3C</A></P>
</BODY>
</HTML>

19. ELEMENTOS BÁSICOS
 Rótulos Básicos
<HEAD> <TITLE> <P>
 Rótulos de Formato Físico
<B> <I>
 Rótulos de Formato Lógico
 <STRONG> <EM> <UL> <LI>
 Enlaces de Hipertexto
<A HREF="…">
TABLAS
 Organización comparativa de información
 Ubicación dentro de la página
 Múltiples atributos para especificar

20. TABLAS

21. FORMULARIOS
 Interactividad
 Retroalimentación
 Recolección de
datos
 Pueden tabularse y
analizarse
 Respuestas
personalizadas
 Aceptado por todos
los navegadores

22. VENTAS Y DESVENTAJAS
 Pueden ser creados usando editores simples como Notepad,
vi, emacs.
 Ventajas
 Es barato
 Se aprende a comprender el lenguaje HTML
 Desventajas
 Es fácil cometer errores
 Necesita comprender la sintáxis HTML
 Herramientas avanzadas
 Interface amigable y fácil de usar para crear documentos
 Ocultan a disposición las complejidades del código HTML
 Pueden ser herramientas autónomas o insertas en
procesadores de texto

23. EJEMPLO PRÁCTICO CON WORD
 Hacer documento en Word
 Grabarlo como página WEB
 Verlo en el browser local
 Subirlo a la “nube”

24. CREACIÓN DE NUESTRO SITIO WEB
 Ingresemos a:
http://zulu.net46.net/
 Vamos a
utilizar: 000webhost.com
 Para editar la cuenta
usamos:
http://members.000webhost.
com/

25. CORREO ELECTRÓNICO Y
MENSAJERÍA INSTANTÁNEA
Sesión #2

26. CORREO ELECTRÓNICO O E-MAIL
 El correo electrónico es el programa
conectado a la red de Internet más
utilizado, por la facilidad que
representa la comunicación rápida con
otros usuarios a bajo costo y con la
facilidad de llegar a cualquier parte del
mundo.
 Todos los sistemas Windows cuentan
con un sistema de correo electrónico
que funciona de forma muy parecida.
 El correo electrónico ofrece la
posibilidad de incluir attachments o
apéndices que pueden ser archivos,
bases de datos, audio, etc.

27. CORREO ELECTRÓNICO O E-MAIL
 Los mensajes enviados por un
remitente ser almacenan en un buzón
hasta que el destinatario se conecta a
la red, recoge su correspondencia y
lee su correo.
 Los mensajes no van directamente a
la computadora del usuario sino a
una central en donde se depositan en
la casilla designada por el
administrador, por eso podemos
recibir mensajes aunque nuestra
computadora esté apagada.

28. CARACTERÍSTICAS COMUNES DEL CORREO
ELECTRÓNICO
 Acuse de recibo automático- Se puede comprobar si el
receptor ha recuperado el mensaje.
 Distribución múltiple- Podemos dirigir un mensaje a varios
destinatarios sin necesidad de repetirlo.
 Respuesta automática- se puede dar respuesta al emisor sin
repetir la dirección del destino en la cabecera.
 Re direccionamiento- Trasmitir el mensaje a otra dirección
simplemente introduciendo el destinatario
 Privacidad- Restricción al acceso a los contenidos de los
mensajes.
 Caducidad- Automatización del borrado del mensaje por
fecha de caducidad del mismo.
 Archivo- El mensaje puede ser tratado como cualquier archivo
y por lo tanto, puede ser almacenado, copiado, eliminado y
clasificado.

29. DIRECCIONES
en
Usuario@dominio
Ej. jzuluaga55@gmail.com

30. CUIDADOS Y RECOMENDACIONES
 ¿Qué es SPAM? Spam son los
mensajes publicitarios y cosas del
estilo "hágase millonario mientras
duerme“. Por definición son
mensajes NO SOLICITADOS
 ¿Cómo saben tu dirección? Lo más
común últimamente es que se roban
las direcciones de mensajes que se
envían masivamente como los
chistes e informaciones políticas y
que a su vez son reenviados con
TODA LA LISTA DE DIRECCIONES
DE EMAILS. Y después para colmo
se venden/intercambian estas listas
de e-mail con otros.

31. CUIDADOS Y RECOMENDACIONES
 ¿Que hacer para evitar esto? Cada
vez que mandes un e-mail a mas de 1
destinatario y no sea importante que
se vean las direcciones entre ellos,
Como por ejemplo un chiste, usa
CCO, (conocido como "con copia
oculta"). El CCO hace que NO
FIGURE la lista de destinatarios en
el mensaje. POR FAVOR, POR FAVOR
usen CCO.
 Otra mas es que cuando hagas un
forward (REENVIO) de un
mensaje, tomate un segundo y BORRA
las direcciones de
e-mail del mensaje anterior.
MUY FACIL TAMBIEN.

32. CUIDADOS Y RECOMENDACIONES
 ¿Que son esos e-mails de "salve a una
pobre niña" con cáncer? Todos, TODOS
esos e-mails que piden que hagas un
*forward* REENVIO) SON MENTIRAS.
Borra estos mails. OJO algunos traen
virus o porquerías por el estilo. NINGUNA
EMPRESA (como MICROSOFT, por
ejemplo) NUNCA, NUNCA dona dinero
por re-enviar este tipo de mensajes.
 ¿Y los virus? No mandes ni abras
archivos .exe, ni .doc !!!, a menos que tu
sepas que viene de alguien confiable.
Ahí es el típico lugar donde van los virus.
No basta con pasar un antivirus, los
antivirus SIEMPRE están atrasados. Y
en una "campaña" de e-mails en un día
llegan a millones y los anti-virus apenas
van a detectarlo en unos días o una
semana o más.

33. CUIDADOS Y RECOMENDACIONES
 ¿Y las cuentas "REMOVE" / "QUITAR"?
¡¡¡ES MENTIRA TAMBIEN!!! Es decir, cuando
mandan un spam (correo no solicitado) y te
piden que si quieres ser eliminado de sus
listas, contestes, es solo para constatar, de
una lista de e-mails, cuales son verdaderas. Al
responder automáticamente les estas diciendo
que tu dirección es válida y no solo te siguen
mandando mails, sino que la venden
masivamente o otros spamers. JAMAS
respondas, JAMAS!.
 ¿Que más puedo hacer? Cada vez que te
llega un spam puedes hacerle un forward o
reenvio a la cuenta "abuse" de ese dominio.
Por ejemplo si te viene un e-mail de
UltraGay@ciudad.com mándaselo a
abuse@ciudad.com y a
postmaster@ciudad.com Ellos se encargaran
de tomar accion contra el spamer JAMAS le
compres nada al que te mande spam.

34. APLICACIONES GOOGLE
Sesión #2

36. APLICACIONES GOOGLE
Son 72 aplicaciones Google (y aumentando)
 Google.com : el buscador
 Google Base : anuncios clasificados
 Google Alerts : alertas sobre artículos de interés
 Google News : servicio de noticias
 Google Calendar : el organizador
 Google Docs&Spreadsheets : creación de documentos, hojas de
calculo y presentaciones
 Google Search History : historial de búsquedas
 Google Webmaster tools : herramientas para webmasters
 Google Analytics : estadísticas de webs
 Google Adsense : servicio para webmasters que quieran poner
anuncios
 Google Adwords : servicio para anunciantes
 Google Video : buscador de videos
 Google Maps : mapas satelitales
 Google Earth : mapas satelitales 3D
 … ver mas en: http://vagabundia.blogspot.com/2008/01/72-
aplicaciones-de-google.html

37.  El procesador de textos, la hoja de cálculo y el programa de
presentación que forman el núcleo de Google Docs
(http://docs.google.com) son todas herramientas completas,
compatibles con los archivos que usted ha creado con otros
programas.
 Hay también buenas razones para comenzar a experimentar
con versiones online de aplicaciones que hasta ahora sólo
han podido ser usadas sobre el escritorio de la computadora.
Primero, se puede acceder a ellas donde quiera que se
encuentre una computadora pública o no pública con acceso
a Internet. Segundo, los documentos que se crean con
Google Docs pueden ser trabajados en colaboración con
otros usuarios de Docs. Y, tercero, muchos fabricantes están
preparando versiones online de sus propias aplicaciones.

38. PRÁCTICA EN GOOGLE DOCS
 Subir un documento existente
 Crear documentos y compartirlos
 Crear un formulario tipo examen y enviarlo a los
estudiantes para que lo respondan
 Crear una presentación

39.  La herramienta de Google www.blogger.com es una de las formas más
fáciles de expresarse en Internet. Simplemente hay que ingresar, poner
el nombre y seleccionar una dirección, para posteriormente elegir la
presentación y la apariencia. En sólo cinco minutos el usuario ya podrá
comenzar a escribir la primera página de su blog.
 Por otra parte, ya no hay que gastar dinero en software para organizar
fotos digitales. Sólo basta con descargar y buscar el programa gratuito
Picasa (http://picasa.google.com) .
 En su versión 3, esta herramienta de Google respalda una decena de
formatos de imágenes, incluyendo muchos de los formatos RAW
usados por las más avanzadas cámaras reflex digitales. Picasa está
disponible tanto para PC como para Mac.
 El proceso es simple. Hay que poner Picasa en la carpeta de
fotografías y el programa las catalogará rápidamente, creando
reproducciones en miniatura. Si se da un doble clic sobre una foto, ésta
aparecerá en versión más grande, junto a las herramientas que
permitirán ejecutar algunas de las más comunes funciones de edición,
incluyendo ajustar la luz, enderezar, cortar o corregir ojos rojos.

40.  Las Alertas (www.google.com/alerts) rastrean el principal motor de
búsqueda de Google para notificar al usuario cuando aparecen nuevos
ingresos en un nuevo ítem de noticias en especial, un blog, una página
Web o un video.
 Para definir una alerta hay que entrar en la página Alertas de Google,
especificar el tipo de alerta que se quiere recibir, detallar la frecuencia y
proporcionar una dirección de correo electrónico a la cual se le debe
enviar.
 Por otra parte, Google debe su fama a su tecnología de búsqueda, que
ha mejorado para producir herramientas que catalogan fuentes de
información no disponible mediante motores de búsqueda
convencionales. Google Académico o, en inglés, Google Scholar
(http://scholar.google.com), por ejemplo, pone a disposición lo que
aparece en publicaciones académicas en todo el mundo.
 En tanto, Búsqueda de Libros o Book Search (www.google.com/books)
se enfoca a la catalogación de libros. Esta aplicación proporciona el
texto completo de libros clásicos de dominio público, dando prólogos y
abundante información del editor en caso de que se trate de libros
protegidos por derechos de autor.

41. VIDEO EN INTERNET
Sesión #2

42. CÓMO INSERTAR VIDEOS DESDE INTERNET
EN MI AULA VIRTUAL?

43. PASO 1: BUSCAR EL VIDEO
 Existen varios sitios web que son repositorios de video.
 En estos sitios puedo ver videos subidos por otros usuarios o
subir los propios.
 Algunos ejemplos de estos sitos:
 YouTube: http://www.youtube.com
 BlipTV: http://www.blip.tv
 DotSub: http://www.dotsub.com

44. PASO 1: BUSCAR EL VIDEO, EJEMPLO
YOUTUBE

45. PASO 2: COPIAR CÓDIGO Y PEGARLO EN
NUESTRO SITIO
 Copiamos el código de nuestro video, para mi caso es:
X7bHBYjh8Z8
 Copiamos este código:
<div style="text-align:center;"><object width="425"
height="350"><param name="movie"
value="http://www.youtube.com/v/XXXXXXXXXX&hl=es&fs=1&rel=0
&autoplay=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0"
/><param name="allowFullScreen" value="true" /><param
name="movie"
value="http://www.youtube.com/v/XXXXXXXXXX&hl=es&fs=1&rel=0
&autoplay=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0"
/></object></div>
 Reemplazamos las XXXXXX con el código del video que
deseamos aparezca en nuestra página.
 Insertamos toda esa porción de código HTML a nuestro sitio.

46. COMPARTIR PRESENTACIONES
Sesión #2

48. COMPARTIR PRESENTACIONES
 Los servicios de compartimiento de
diapositivas te permiten cargar y
distribuir tu presentación de
PowerPoint en tu sitio web o sitios
de social media de tu preferencia.
La mayoría de estos servicios de
compartimiento de diapositivas
también son completamente gratis.
 Subir tu presentación en línea no
requiere conocimientos técnicos
avanzados o habilidades. Lo único
que tienes que hacer es tomar el
archivo de la presentación y hacer
clic en "subir" en tu servicio
preferido de compartimiento de
diapositivas.

49. BENEFICIOS
 Basado en la web: Sube la
presentación a la web y accede a tus
diapositivas en cualquier lugar.
 Distribución: Incorpora tu presentación
en cualquier sitio web, blog o página de
los social media, o envíala por correo
electrónico..
 Acceso: Ajusta tu presentación como
privada, para permitir que sólo los
espectadores seleccionados tengan
acceso a ella.
 Download: Disponibiliza tu presentación
la descarga gratuita
 Estadísticas: Obtén estadísticas
detalladas sobre los espectadores y
cuántas veces tu presentación es
descargada.

50. ESO ES TODO POR HOY
Sesión #2