DIPLOMADO EN TECNOLOGA DE LA INFORMACIN Y COMUNICACIN EN EDUCACIN BSICA

Diplomado en

CREACIN DE PGINAS WEB CON JIMDO

TIC

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

PRESENTACIN

Estimados participantes: Internet nos brinda un sinnmero de posibilidades de desarrollo, acorta las distancias, permitiendo ahorro de tiempo y dinero. Entre los diversos servicios al que podemos acceder

estn: el chat, la videoconferencia, las transacciones electrnicas, aulas virtuales, los blogs, wikis, entre otros. Sin duda en el campo educativo el internet est jugando un rol protagnico porque permite ser el lugar donde convergen tanto informacin de inters. El desarrollo vertiginoso del Internet a permite cada vez mas convertir al usuario en enseanza como aprendizaje, publicando y accediendo a

protagonista, de tal manera que actualmente existen diversas opciones para publicar en la web, esta posibilidad pone en las manos de los docentes una gran oportunidad de trascender en su labor, planificar y crear actividades fuera del aula fsica, y usar eficazmente recursos que los estudiantes usan cotidianamente en su quehacer diario.
En este mdulo revisaremos conceptos relacionados con el desarrollo de pginas web, cmo planificarlas y crearlas a travs de Jimdo.

Lic. Alberto Pariona Llanos Lic. Willy Silva Alarcn

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

ORGANIZACIN DE LOS CONTENIDOS

1. CONCEPTOS BSICOS 1.1 Internet y el World Wide Web 1.2 Pginas Web y Sitios Web 1.3 Hipervnculo 1.4 HTML 1.5 Widget 1.6 Dominio 1.7 Hosting 2. Creacin de pginas web con Jimdo 1.1 Creacin de la cuenta 1.2 Entorno Jimdo 1.3 Plantillas y navegacin 1.4 Insercin de elementos

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

Aprendizaje esperado Reconoce y diferencia conceptos relacionados con el desarrollo de pginas web. Disea, crea y publica una pgina web a travs del servicio Jimdo. Emplea las nuevas tecnologas para un novedoso planteamiento del contenido educativo a travs de las pginas web.

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

RECONOCIENDO NUESTROS SABERES PREVIOS

Observa el video y responde.

2. Consideras posible que los cambios que se proyectan a futuro en el video, sean posibles? Por qu?

3. Cmo crees que los cambios que se ha presentado en la tecnologa y la sociedad pueda influenciar a la educacin? ..

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

1. CONCEPTOS BSICOS 1.1 Internet El internet es un conjunto de dispositivos de hardware interconectados entre s para crear red en todo el mundo. El hardware del internet abarca todos los componentes que una persona puede tocar fsicamente, como son los equipos, erutadores, cables, lneas de telfono y otros dispositivos fsicos de la red. Internet es una gran red internacional de ordenadores que permite, como todas las redes, compartir recursos. Es decir: mediante el ordenador, establecer una comunicacin inmediata con cualquier parte del mundo para obtener informacin sobre un tema que nos interesa, ver los fondos de la Biblioteca del Congreso de los Estados Unidos, o conseguir un programa o un juego determinado para nuestro ordenador. En definitiva: establecer vnculos comunicativos con millones de personas de todo el mundo, bien sea para fines acadmicos o de investigacin, o personales. Elementos imprescindibles para acceder a Internet Para utilizar Internet no es preciso entender exactamente cmo funciona, aunque un poco de informacin al respecto nunca est de ms. Son necesarios los siguientes elementos: El PC y el mdem: a Internet se accede desde un PC conectado al proveedor mediante un mdem que por su puesto deber estar conectado a una lnea telefnica. Proveedor: abre las puertas de Internet. El proveedor te proporciona acceso a la Red, un nmero de telfono para acceder a ella y una direccin de correo electrnico. Servicios bsicos en Internet Los principales servicios que ofrece Internet son: Correo electrnico: gracias a l se mandan mensajes a cualquier persona que disponga de una cuenta en Internet. Los mensajes abarcan tanto texto como ficheros informticos de cualquier caracterstica, que se almacenan en el servidor de correo hasta que el destinatario se conecta y los recoge. El correo electrnico es una forma rpida de y barata de comunicarse con todo el mundo. Transferencia de archivos o FTP: Internet contiene gigabytes de software y millones de archivos a los que se accede fcilmente mediante un proceso llamado FTP o protocolo de transferencia de archivos, que permite conectarse a una computadora de acceso pblico y copiar archivos al disco duro.

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

Grupos de discusin o news: Se puede participar en ms de 15.000 grupos de discusin distintos o incluirse en la lista de distribucin sobre un tema especfico y recibir informacin de forma automtica. Word Wide Web: las pginas de la WWW son el aspecto ms vistoso e innovador de Internet. Haciendo clic en palabras, imgenes e iconos, se pasa de un sitio a otro de una forma rpida y sencilla. El World Wide Web es bsicamente un medio de comunicacin de texto, grficos y otros objetos multimedia a travs de Internet, es decir, la web es un sistema de hipertexto que utiliza Internet como su mecanismo de transporte o desde otro punto de vista, una forma grfica de explorar Internet. Es importante saber que web o www no son sinnimo de Internet, la web es un subconjunto de Internet que consiste en pginas a las que se puede acceder usando un navegador. Internet es la red de redes donde reside toda la informacin. Tanto el correo electrnico, como FTPs, juegos, etc. son parte de Internet, pero no de la Web. Para buscar hipertexto se utilizan programas llamados buscadores web que recuperan trozos de informacin (llamados documentos o pginas web) de los servidores web y muestran en la pantalla del ordenador de la persona que est buscando la informacin grfica, textual o video e incluso audio. 1.2 Sitio Web y pgina Web Un sitio web es una pgina principal, formada por varias pginas, grficos, documentos, multimedia y otros archivos asociados que se almacenan en un servidor Web o en el disco duro de un equipo. Se conoce como pgina web al documento que forma parte de un sitio web y que suele contar con enlaces (tambin conocidos como hipervnculos o links) para facilitar la navegacin entre los contenidos. Las pginas web estn desarrolladas con lenguajes de marcado como el HTML, que pueden ser interpretados por los navegadores. De esta forma, las pginas pueden presentar informacin en distintos formatos (texto, imgenes, sonidos, videos, animaciones), estar asociadas a datos de estilo o contar con aplicaciones interactivas. Es posible distinguir entre las pginas web estticas (cuyos contenidos son predeterminados) y las pginas web dinmicas (que generan contenidos al momento de solicitar informacin a un servidor de web a travs de lenguajes interpretados como JavaScript).

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

Un conjunto de pginas web, por lo tanto, forman un sitio web. Las pginas suelen estar reunidas bajo un dominio comn para que el sitio en cuestin sea accesible desde una misma direccin en Internet. La inmensa totalidad de pginas que forman los sitios web dan lugar a lo que se conoce como World Wide Web, Web, Red o, simplemente, Internet, que es el universo virtual donde est reunida la informacin digital del ciberespacio. 1.3 Hipervnculo Al hipervnculo se le suele llamar enlace web o en su versin anglosajona link. Un hipervnculo es una conexin de una pgina a otro destino como, por ejemplo, otra pgina o una ubicacin diferente en la misma pgina. El destino es con frecuencia otra pgina Web, pero tambin puede ser una imagen, una direccin de correo electrnico, un archivo (como por ejemplo, un archivo multimedia o un documento de Microsoft Office) o un programa. Un hipervnculo puede ser texto o una imagen. Por ejemplo en El desarrollo de las actividades se realizar en el aula virtual del curso, la palabra aula virtual nos lleva a una pgina web, en este caso la del diplomado 2011. 1.4 HTML HTML es un lenguaje de programacin que se utiliza para el desarrollo de pginas de Internet. Se trata de la sigla de HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto. EL HTML permite describir la estructura y el contenido en forma de texto, adems de complementar el texto con objetos tales como imgenes. Este lenguaje se escribe mediante etiquetas, que aparecen especificadas por corchetes angulares (< y >). Por otra parte, el HTML permite incluir scripts (por ejemplo, de Javascript), cdigos que pueden modificar el comportamiento de los navegadores web y de otros procesadores de HTML. Los archivos de formato HTML utilizan la extensin .htm o .html. 1.5 Widget Un widget (o control) es un elemento que muestra informacin con la cual el usuario puede interactuar. Por ejemplo: ventanas, cajas de texto, checkboxs, listbox, entre otros. Un widget provee un punto de interaccin con el usuario para la manipulacin directa de un tipo de dato dado. En otras palabras, los widgets son bloques bsicos y visuales de

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

construccin que, combinados en una aplicacin, permiten controlar los datos y la interaccin con los mismos. 1.6 Dominio El concepto de dominio, no es ms que un alias (o seudnimo) de una direccin IP. Por ejemplo, el dominio springmail.com es el alias de la direccin IP 205.188.146146. A cada usuario en Internet se le asocia una direccin Internet nica, formada por el identificador de usuario y el identificador de la computadora o dominio en que se encuentra, separados ambos por el carcter arroba (@. La sintaxis general de cualquier direccin Internet es: USERID@DOMINIO. Hay que tener especial cuidado con la distincin entre maysculas y minsculas, dado que se consideran letras distintas y, por tanto, direcciones distintas, as como con la no presencia de espacios en blanco dentro de la direccin. Las distintas partes que forman el dominio reciben el nombre de subdominios. nivel alto. Existen dos tipos de dominios de nivel ms alto aunque en algunos pases se ha definido tambin un subdominio que les permita diferenciar el tipo de organizacin, como por ejemplo ac para instituciones acadmicas o co para las organizaciones comerciales. Dominios de organizacin: se basan en el plan de direccionamiento creado antes de que Internet fuese una red internacional. Contienen definiciones del tipo de organizacin a la que pertenece la computadora (educativa, comercial, militar, etc.). Cuando Internet se expandi fue necesario definir nuevos dominios de nivel alto que cubrieran esta situacin. DOMINIOS DE TIPO DE ORGANIZACIN com edu int mil net org DOMINIO SIGNIFICADO Organizacin comercial Institucin educativa Organizacin internacional Organizacin militar Organizacin de red Organizacin sin nimo de lucro El

subdominio ms a la derecha es el de carcter ms general, denominndose dominio de

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

Por ejemplo: En la direccin unhomespa@un.org,

el

identificador de usuario es

unhomespa y el dominio un.org. Su dominio de nivel ms alto, org, nos dice que el servidor pertenece a una organizacin sin nimo de lucro. Por ltimo, el subdominio que est ms a la izquierda (a la derecha de la @), nos dice el nombre concreto del servidor que utiliza ese usuario, un. Dominios geogrficos: dominios de nivel alto que definen la localizacin geogrfica. A

continuacin, algunos ejemplos DOMINIOS DE NIVEL ALTO GEOGRFICOS aq is ar it at jp au kr be kw br pe mx ec es DOMINIO SIGNIFICADO DOMINIO SIGNIFICADO Antrtida Islandia Argentina Italia Austria Japn Australia Corea del Sur (Korea) Blgica Kuwait Brasil Per Mxico Ecuador Espaa

1.7 Hosting Un hosting es un lugar fsico donde se guardarn los archivos que conforman un portal o pgina web. El Hosting debe estar conectado a internet las 24 horas del da, todos los das del ao, pues en caso de algn inconveniente, la pgina web no podra visualizarse.

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

2. CREACIN DE PGINAS WEB CON JIMDO Jimdo es un editor web gratuito basado en su propio sistema de gestin de contenido para la creacin de pginas web sin necesidad conocimientos de HTML. Se caracteriza por su velocidad y facilidad de uso. La interfaz de Jimdo est basada en un sistema de mdulos que se pueden aadir, mover y eliminar de forma flexible. De esta manera se pueden insertar textos, imgenes propias o de plataformas externas como Flickr, vdeos de YouTube, widgets y otros elementos. El diseo de la pgina tambin se deja personalizar de forma fcil por medio de plantillas predeterminadas o insertando plantillas propias. Jimdo est disponible en 8 idiomas (espaol, francs, ingls, alemn, italiano, japons, ruso y chino)

2.1 Creacin de la cuenta La creacin de una pgina en Jimdo se inicia con una cuenta de usuario. Para crearla es necesario: 1) 2) Ir a http://es.jimdo.com/ En el recuadro de inscripcin, seale el nombre de la pgina que crear, el correo electrnico, active la casilla de condiciones y haga clic en CREAR PGINA WEB GRATIS. 3) 4) Reproduzca con exactitud el cdigo de seguridad que se solicita. Revise su correo electrnico pues Jimdo enviar un mail con la informacin de acceso a la cuenta. La contrasea que envan pueden ser cambiadas por una ms accesible. 5) Al abrir el correo y hacer clic en IR A MI NUEVA PGINA WEB, ingresar a la plataforma inicial de Jimdo, desde donde deber empezar sesin.

10

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

6)

Ingrese la contrasea que le enviaron a su correo electrnico y haga clic en INICIAR SESIN.

2.2 Entorno Jimdo

11

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

1) 2)

Men de navegacin Presenta la estructura y organizacin de la pgina web. Men de objetos para insertar Al hacer clic en INSERTAR NUEVO, podremos encontrar todos los elementos que se pueden insertar en el contenido de la pgina creada por Jimdo: texto, facebook, twitter, imgenes, widget, etc.

3)

Herramientas Este men contiene las herramientas que nos ayudarn en la configuracin y edicin de la pgina web, mas no en el contenido.

2.3 Plantillas y navegacin 2.3.1 Plantillas Jimdo presenta 77 plantillas generales y 74 plantillas especiales gratuitas para la eleccin del usuario segn el objetivo y contenido de la pgina a crear. 1. Para seleccionar la plantilla haga clic en el cono mientas. 2. Explorar las plantillas y al elegir la adecuada haga clic en ACEPTAR. del men herra-

3. Para editar el encabezado haga clic en EDITAR TTULO DE LA IMAGEN.

4. Se abrir, entonces, un men con varias opciones para la edicin del encabezado:
12

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

a. GALERA: Para elegir una imagen para el encabezado.

b. IMAGEN PROPIA: Si se desea agregar una imagen personal como encabezado de la pgina. La imagen debe ser del tamao que indica este men.

c. ESTAMPADO: Si en lugar de una imagen, se desea agregar un estampado de color modificable, como encabezado.

d. LOGO: Solo est disponible para cuenta de paga de Jimdo. e. TTULO: Opcin que permite modificar el contenido del ttulo del encabezado. Se le puede cambiar el color, tipo y tamao de letra, adems de la ubicacin.

13

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

f. AJUSTES: Permite modificar el alto del encabezado, el tamao de la imagen o estampado, adems de la ubicacin del mismo.

2.3.2 Men de navegacin El men de navegacin, nos ayuda a organizar el contenido de nuestro sitio web y las pginas que lo conformarn. Para ello, es necesario tener un esquema del contenido, con anticipacin. Las pginas que se agreguen en este men, sealan las pginas que formarn parte del portal a crear. Por ejemplo podemos tener una pgina sobre Lenguaje que tendr como pginas a Morfologa, Sintaxis y Normativa, sin embargo cada una de estas puede separarse en otros contenidos, as tendramos:
Morfologa Cateogoras Variables Categoras invariables Lenguaje (pgina de inicio) Sujeto Predicado Acentos Uso de grafas 14

Sintxis

Normativa

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

En el caso anterior, el men de navegacin, quedara de la siguiente manera:

La jerarqua de cada men se determina a travs del manejo de las flechas.

2.4 Insercin de elementos Para insertar elementos en las pginas a editar haga clic en INSERTAR NUEVO ELEMENTO y seleccione el elemento que desea agregar. Los elementos que se tienen a disposicin son: 1) Ttulo Permite agregar ttulos en cada pgina, en tres formatos distintos.

2) Imagen Para agregar imgenes, ubquese sobre el ltimo elemento editado, haga clic en el + que aparecer al lado y selecciones imagen. Ahora haga clic en EXAMINAR y busque en su computadora la imagen que desea agregar. Los botones de edicin permiten modificar el tamao o rotacin de la imagen, adems de poder aadirle un subttulo. Si usted selecciona la opcin AMPLIAR, esta generara un vnculo para visualizar la imagen en su tamao original.
15

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

Podemos agregar, tambin, un enlace (hipervnculo) para que la imagen nos dirija a la pgina que deseemos. 3) Texto Nos permite insertar texto con formato bsico o en cdigo HTML (solo si hacemos clic en esa opcin). Como se puede ver en la imagen, permite agregar negritas, cursivas, alineamientos, vietas, numeracin, color en la fuente e hipervnculos.

16

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

4) Imagen con texto Fusiona las opciones anteriores, pues en una sola ventana permite la edicin de imagen y texto que irn necesariamente juntos.

5) Tabla Nos permite crear y editar tablas, como en Excel.

6) Galera de fotos Esta herramienta se usa para anexar VARIAS imgenes o fotos, en dos formatos: vietas y flash. Solo se deba hacer clic en BUSCAR y seleccionar las fotos que se desean anexar a la galera, luego hacer clic en SUBIR, elegir el formato, el estilo y GUARDAR.
17

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

7) Descargas Permite subir archivos que podrn ser descargados de manera directa desde la pgina web. Podran ser documentos, presentaciones, etc. Ser necesario agregar un nombre y descripcin al documento a cargar. 8) Formulario Genera un formulario de comentarios o sugerencias que sern enviados al correo electrnico con el que se cre la cuenta. 9) Lnea horizontal Agrega una lnea horizontal de separacin. 10) Libro de visitas Permite agregar un formulario que puede ser utilizado como comentarios a cada pgina o un libro para que los visitantes, dejen sus comentarios. Las opciones de este elemento deben activarse segn el requerimiento del administrador del portal.

18

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

11) Youtube Este permite la insercin de videos de YouTube a travs del link del video.

12) Flickr Si tienes cuenta en Yahoo, puedes tener acceso a www.flickr.com, el portal de distribucin de fotografas ms grande de internet. Jimdo permite anexar imgenes almacenadas en una cuenta de flickr, al portal web que se est desarrollando.

19

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

13) GoogleMaps Permite anexar un mapa de la direccin que deseemos. Se debe colocar el nombre de la avenida exacta y empezar a desplazarse hasta ubicar el lugar a sealar. Presenta dos modos de visualizacin: Mapa (croquis) y Satlite (fotografa). En cuanto se ha ubicado el lugar, se debe hacer clic en ESTABLECER NUEVO DESTINO y este ser guardado.

14) Widget/HTML Existen muchas pginas que nos brindan widget para ser usados en nuestra pgina web. As podemos agregar relojes, juegos, aplicaciones, etc. Por ejemplo, en esta pgina encontramos gran cantidad de widget para ser usado en nuestra pgina web: http://www.widgetbox.com/widgets/ Por ejemplo, si queremos agregar una mascota virtual a nuestro portal, solo debemos elegir el recurso y copiar el cdigo que se encuentra en GET WIDGET, y pegarlo en la ventana que se nos muestra esta herramienta.

20

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

15) Twitter Permite agregar los ltimos tweets de la cuenta de Twitter que se decida anexar. Solo es necesario brindar el nombre de usuario e indicar la cantidad de actualizaciones a publicar. 16) Facebook Permite agregar el botn ME GUSTA a la pgina donde esta se inserte. No es necesario tener una cuenta de Facebook para usar esta herramienta. 17) Botones Publica botones para compartir la pgina en diferentes redes sociales como Facebook, Twitter, Google Buzz, etc. No es necesario tener cuenta.

21

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

ACTIVIDADES DE EVALUACIN

ACTIVIDAD 1 Responde a las preguntas del foro e interacta con sus compaeros.

Fecha de entrega Hasta el lunes 03 de octubre

Indicaciones Observa con atencin el video La revolucin del Internet Abre el enlace de la actividad en la pgina del curso en el Grupo Educadores. Lee las preguntas de la pgina 4 del mdulo y contesta con claridad, precisin, relacionando tus reflexiones con tu actividad como docente. Comenta la intervencin de por lo menos DOS compaeros de curso. La intervencin total debe ser de mximo 15 lneas. La respuesta es directa. No de aceptarn archivos anexados.

Criterios e indicadores Criterios e indicadores

Las participaciones son muy precisas y claras.

Puntaje 10 6 4 20

Reflexiona sobre su trabajo como docente y hace aportaciones personales o integra elementos valiosos a su participacin. Comenta la intervencin de por lo menos DOS compaeros. Total

22

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

Actividad 2 Desarrolla las siguientes actividades: 1. Usando CmapTool, crea un mapa conceptual en donde relaciones los conceptos internet, sitio web, pgina web, dominio, hosting y html. 2. Completa le ficha de informacin de tu sitio web y crea el esquema de su estructura.

Fecha de entrega Hasta el lunes 10 de octubre

Indicaciones Lee el captulo Conceptos bsicos del material de consulta y seala las ideas principales de cada concepto. Analiza cmo se relacionan los conceptos de internet, sitio web, pgina web, dominio, Hosting y html, y crea un mapa conceptual en CmapTool donde muestres la relacin existente entre los conceptos. Exporta el mapa conceptual como grfico y envalo a travs del Aula Virtual. Completa la ficha de informacin del sitio web que debers disear en la actividad 3 y crea el esquema de su estructura. El esquema puede ser creado con el programa que se desee, pero deber ser insertado en formato imagen, en el espacio sealado para dicho fin. El archivo Word, debe ser enviado junto con el mapa dentro de la fecha lmite.

Criterios e indicadores Criterios e indicadores

Crea un mapa conceptual relacionando los 6 conceptos de manera lgica y ordenada.

Puntaje 7 7 6 20

Completa la informacin de la ficha del sitio web a crear. Crea el esquema de la estructura de su sitio web, mostrando las pginas y subpginas que formarn el trabajo final. Total

23

Diplomado en Tecnologa de la Informacin y Comunicacin en la Educacin Bsica

Actividad 3 Crea un sitio web usando Jimdo.

Fecha de entrega Hasta el lunes 17 de octubre

Indicaciones Crea una cuenta en www.jimdo.com. Siguiendo el esquema presentado en la actividad 2, crea un sitio web usando Jimdo. El sitio web debe estar compuesto por lo menos por cuatro pginas. Debe insertarse una pgina final donde se sealen los objetivos del sitio. Adems de imagen y texto, la pgina debe presentar: video, integracin de redes sociales, dos widgets distintos. En el recurso tarea asignado para esta actividad, indica la direccin de tu pgina web.

Criterios e indicadores Criterios e indicadores

El sitio web cumple con las indicaciones sealadas:

Puntaje

Tiene por lo menos cuatro pginas. Presenta una pgina con los objetivos. El sitio web cumple con los objetivos propuestos. El sitio web integra por lo menos una red social en sus pginas. El sitio web integra videos en sus pginas. El sitio web ha empleado por lo menos dos widgets distintos. El diseo del sitio web es atractivo, emplea imgenes y presenta el contenido de manera ordenada. Total

4 2 2 4 3 20

24