DISEÑO WEB Y HERRAMIENTAS DE INTERNET APLICADAS A LA...

Formación del

Profesorado

ANFAP Asociación Nacional para la Formación y Asesoramiento de

los Profesionales

DISEÑO WEB Y HERRAMIENTAS DE

INTERNET APLICADAS A LA

DOCENCIA

www.anfap.com [email protected]

902 99 55 98

ANDALUCÍA - ARAGÓN - ASTURIAS - BALEARES - CANARIAS CANTABRIA - C. MANCHA - C. LEÓN - CATALUÑA

EXTREMADURA GALICIA - LA RIOJA – MADRID - CEUTA MELILLA - MURCIA NAVARRA - PAÍS VASCO - C. VALENCIANA

Formación Permanente ©MAGISTER/MELC Diseño Web

2


3

DISEÑO WEB Y HERRAMIENTAS DE INTERNET APLICADAS A LA DOCENCIA

DESTINATARIOS

▪ Profesores de Educación Infantil y Primaria de todas las

especialidades.

▪ Profesores de Educación Secundaria de todas las especialidades.

▪ Profesores de la Especialidad de Psicología y Pedagogía.

▪ Profesores Técnicos de Servicios a la Comunidad.

▪ Personas interesadas en la docencia.

DURACIÓN Y MODALIDAD

▪ 100% A Distancia. Metodología On-line.

▪ 110 horas. 11 Créditos

DIRECCIONES DE LOS CENTROS DE REFERENCIA

MAGISTER. Gta Cuatro Caminos 6, 28020, Madrid Teléfono: 902 99 55 98

OBJETIVO DEL CURSO

▪ Crear ficheros con extensión .html

▪ Realizar transferencia de ficheros

▪ Elaborar páginas Web sencillas utilizando KompoZer.

▪ Participar en foros, chats y blogs.

▪ Conocer y utilizar recursos educativos “on line” ya elaborados.


4

METODOLOGÍA

▪ Estrategias expositivas (en introducción y síntesis). Técnicas:

Ejercicios prácticos.

Estudio de casos.

▪ Estrategias indagatorias. Técnicas:

Análisis (subrayado lineal y de realce).

Síntesis (resúmenes, esquemas).

Cuestiones planteadas al tutor.

Diálogos y debates en el Chat.

Foros, encuentros. CRITERIOS Y TÉCNICAS DE EVALUACIÓN. Los criterios de evaluación que concretan los objetivos son los siguientes: 1. Identificar el concepto WEB. 2. Distinguir los componentes de todo método diseño web, los más técnicos y

aquellos que permiten organizar el entorno de aprendizaje. 3. Reconocer las características de los medios didácticos. 4. Distinguir los recursos didácticos. 5. Diseñar modelos de intervención en los que se apliquen dichos recursos. Las técnicas de evaluación propuestas son: 1. Test de evaluación que permitan constatar la capacidad de valoración del

alumno respecto a la resolución de cuestiones prácticas. 2. Tareas que muestren la aplicación de los contenidos tratados a situaciones

didácticas concretas.


5

TAREAS QUE SE EVALUARÁN EN EL CURSO:

Para superar el curso se puede optar por: - Realizar los test de evaluación que aparecen en la plataforma superando más

del 60% de la nota. Los tests o cuestiones de Autoevaluación representan una forma cómoda y rápida de valorar la correcta asimilación de los conocimientos.

- Realizar al menos una de las tareas de desarrollo que encontrarás en el

manual del curso. Cada Tarea será evaluada como Apto o no Apto y adicionalmente se darán unos comentarios escritos por parte del tutor. Podrá aparecer una calificación numérica donde el 100% sería la máxima puntuación.

TAREA 1

Es la tarea principal, y viene desarrollada a lo largo del curso.

Solo es necesario realizar esta tarea para estar APTO.

Se deberá entregar un fichero con la respuesta a la serie de pequeñas prácticas

que se enumeran a continuación y que se explicarán detalladamente más

adelante.

- Realizar un ejercicio que consiste en crear un blog con una temática

referida al curso.

- Añadir una intervención en el foro del curso donde expondrás cualquier

opinión relacionada con él.

- Establecer una sesión de Chat con un compañero del curso.

Esta tarea se deberá entregar antes del último día del curso.

TAREA 2 OPCIONAL

Esta tarea es opcional, y viene desarrollada a lo largo del curso.

No es necesario realizar esta tarea para estar APTO, es solo complementario.

El alumno deberá crear una página web básica de un departamento didáctico

siguiendo las instrucciones que se indicarán más adelante.

Debes subir la página a tu espacio web e indicar al tutor la URL de la página.



6

ÍNDICE DE DISEÑO WEB TEMA 1: Guía didáctica TEMA 2: Introducción al curso TEMA 3: Internet

3.1. Breve orientación sobre Internet 3.2. Breve explicación sobre tarea 1

TEMA 4: Recursos didácticos en Internet

4.1. Recursos didácticos 4.2. Ejemplo de búsqueda de herramientas 4.3. Autoevaluación

TEMA 5: Utilización del Blogs 5.1. Concepto 5.2. Blogs en la educación 5.3. Creación de un Blogs 5.4. Ejemplo guiado paso a paso 5.5. Autoevaluación

TEMA 6: Los Foros 6.1. Introducción 6.2. Los foros en la educación 6.3. Participación de un foro 6.4. Ejemplo guiado paso a paso 6.5. Creación de temas en un foro 6.6. Ejemplo guiado paso a paso 6.7. Autoevaluación

TEMA 7: Chats 7.1. Introducción 7.2. Los chats en la educación 7.3. Participación en un chats 7.4. Ejemplo guiado paso a paso 7.5. Autoevaluación

TEMA 8: Como trabajar con archivos FTP 8.1. Crear una carpeta en nuestro ordenador 8.2. Ejemplo guiado paso a paso 8.3. Instalar el programa CORE FTP 8.4. Ejemplo guiado paso a paso 8.5. Trabajar con el programa CORE FTP 8.6. Ejemplo guiado paso a paso 8.7. Acceder a un espacio web 8.8. Espacio web en 000webhost.com 8.9. Ejemplo guiado paso a paso 8.10. Descargarnos la página ftp.htm 8.11. Autoevaluación

ftp://ftp.htm/


7

ENTREGA DE TAREA 1 BREVE EXPLICACIÓN DE LA TAREA 2 TEMA 9: Lenguajes utilizados Para diseño y programación de páginas web

9.1. Extensiones de archivos creados 9.2. Otros programas utilizados 9.3. Autoevaluación

TEMA 10: Dirección de URL 10.1. Concepto 10.2. Caracteres que no deben utilizarse 10.3. Estructura de una dirección web. 10.4. Autoevaluación

TEMA 11: Introducción a los programas de diseño web TEMA 12: Introducción a los componentes de una página web TEMA 13: El programa KompoZer

13.1. Pasos para descargarnos el programa de KompoZer TEMA 14: Páginas en KompoZer

14.1. Cómo trabajar en una página en KompoZer TEMA 15: Guardar páginas en Kompozer

15.1. Guardar una página nueva 15.2. Guardar una página existente 15.3. Ejemplo guiado paso a paso 15.4. Autoevaluación

TEMA 16: Vista previa en el explorador. 16.1. Vista previa 16.2. Autoevaluación

TEMA 17: Descarga de archivos 17.1. Como descargarnos las imágenes necesarias para los ejemplos

y actividades 17.2. Ejemplo guiado paso a paso 17.3. Autoevaluación

TEMA 18: Elementos de texto en una página web 18.1. Escribir texto 18.2. Modificar texto

18.2.1. Tipo de fuente 18.2.2. Tamaño 18.2.3. Color 18.2.4. Estilo

18.3. Alineación del texto 18.4. Viñetas y numeración 18.5. Sangría 18.6. Ejemplo guiado paso a paso 18.7. Autoevaluación


8

TEMA 19: Imágenes 19.1. Insertar imágenes 19.2. Insertar texto alternativo a una imagen 19.3. Cambiar texto alternativo 19.4. Modificar tamaño 19.5. Ejemplo guiado paso a paso 19.6. Autoevaluación

TEMA 20: Hipervínculos y enlaces 20.1. Hipervínculo absoluto 20.2. Ejemplo guiado paso a paso 20.3. Hipervínculo relativo 20.4. Ejemplo guiado paso a paso 20.5. hipervínculo anclado de texto 20.6. Ejemplo guiado paso a paso 20.7. Hipervínculo anclado con imágenes o flechas UP 20.8. Ejemplo guiado paso a paso 20.9. Hipervínculo anclado con correo electrónico 20.10. Ejemplo guiado paso a paso 20.11. Autoevaluación

TEMA 21: ROLL – OVER 21.1. Roll – Over de texto 21.2. Ejemplo guiado paso a paso 21.3. Autoevaluación

TEMA 22: Propiedades de página 22.1. Color de fondo 22.2. Color del texto 22.3. Ejemplo guiado paso a paso 22.4. Autoevaluación

TEMA 23: Las tablas 23.1. Insertar tablas 23.2. Modificar el tamaño de la tabla 23.3. Ejemplo guiado paso a paso 23.4. Autoevaluación

TEMA 24: SUBIR LA PÁGINA WEB AL SERVIDOR

ENTREGA DE TAREA 2


9

TEMA 1: GUÍA DIDÁCTICA

Justificación: Hoy en día se impone la necesidad de utilización de herramientas informáticas para el desarrollo de la práctica docente. Una de las herramientas más importantes para el profesorado es la elaboración de páginas Web personales y de departamento. Con este curso se pretende dar al profesorado las herramientas necesaria para poder crear y elaborar sus propias páginas Web, iniciándose en el manejo de los programas informáticos que permiten su elaboración. Además, se mostrará a los alumnos algunos de los recursos didácticos existentes en Internet en portales como el del CNICE o Educamadrid y los principales métodos de comunicación y debate existentes “on line”.

Conocimientos previos: el alumno deberá tener conocimientos previos básicos de Windows, así como de programas de correo electrónico

Requisitos mínimos: el alumno necesita disponer de los siguientes elementos:

- ordenador con conexión a Internet

- línea ADSL (no imprescindible pero recomendable)

- una cuenta de correo electrónico

- un espacio web en un servidor (proporcionado por el organizador del curso)

- Programa KompoZer ( Te indicaremos donde se puede descargar gratuitamente dicho programa)

Para la realización de todas las prácticas del curso utilizaremos el espacio web que se nos ofrece. Este espacio Web es el mismo para todos los alumnos. La forma de “delimitar” nuestro propio espacio es utilizar la carpeta que encontremos con nuestro nombre de usuario (si esta no estuviese creada, la crearemos nosotros mismos). Todo lo que subamos al servidor deberá ser colocado dentro de esa carpeta. Todo lo que no se incluya dentro de ella podemos perderlo.

Además deberemos respetar escrupulosamente todas las carpetas que no sean la nuestra ya que estas contendrán los trabajos y ejercicios de otros compañeros del curso y cualquier manipulación que hagamos con ellas puede conllevar la pérdida de información. Por este motivo se recomienda, en previsión de posibles accidentes, guardar siempre una copia de todos los materiales que coloquemos en el servidor.


10

Objetivos: Los objetivos que se pretende conseguir con este curso son los siguientes:

- Crear ficheros con extensión .html

- Realizar transferencia de ficheros local-remoto

- Elaborar páginas Web sencillas utilizando KompoZer

- Participar en foros, chats y blogs

- Conocer y utilizar recursos educativos “on line” ya elaborados

Contenidos: los contenidos que se desarrollarán a lo largo del curso, son los siguientes:

- Estructura de funcionamiento y trabajo con páginas web

- Creación de ficheros de extensión .html

- Transferencia de ficheros

- Configuración y estructura de un sitio Web

- Direcciones URL

- Elementos a incluir en una página Web con KompoZer (texto, imágenes, enlaces, roll-over, propiedades de la página, tablas, etc.)

- Búsqueda, participación y creación de foros, chats y blogs

- Búsqueda de recursos educativos ya elaborados

Metodología: Metodología práctica y activa que permita el manejo de las herramientas básicas para la realización de páginas Web. Se desarrolla la teoría estrictamente necesaria para que el alumno pueda ir realizando simultáneamente las actividades propuestas.

Actividades: Durante el desarrollo del curso los alumnos deberán realizar una serie de ejercicios guiados y/o libres que serán enviados al tutor.

Como ejercicio final los alumnos deberán realizar una web relacionada con el mundo de la educación que deberá incluir, como mínimo, los elementos que se le indiquen.

Concretando, el alumno deberá realizar a lo largo del curso cuatro actividades principales, algunas de ellas con varios ejercicios, y un proyecto final que deberá entregar al tutor en el momento correspondiente. Estas actividades se exponen a continuación:


11

Todas las respuestas se deben hacer llegar al tutor a través de la plataforma online de formación. Importante indicar que sólo se puede adjuntar un fichero por tarea

En caso de problemas también se le puede hacer llegar al tutor cualquier información, dudas y las respuestas a través de su e-mail.

TAREA 2:

El alumno deberá crear una página web básica de un departamento didáctico

siguiendo las instrucciones que se indicarán más adelante.

Debes subir la página a tu espacio web e indicar al tutor la URL de la página.


TAREA 1:

Se deberá entregar un fichero con la respuesta a la serie de pequeñas

prácticas que se enumeran a continuación y que se explicarán detalladamente

más adelante.

- Realizar un ejercicio que consiste en crear un blog con una temática referida

al curso.

- Añadir una intervención en el foro del curso donde expondrás cualquier

opinión relacionada con él.

- Establecer una sesión de Chat con un compañero del curso.

- Busca en las páginas del CNICE una aplicación que se llama “Mecánica

básica” e indica al tutor la URL de la página.

- El alumno obtendrá un archivo determinado de un espacio web, vía FTP y

posteriormente lo subirá al servidor con el programa Core FTP.



12

TEMA 2: INTRODUCCIÓN DEL CURSO

En los últimos tiempos el avance tecnológico ha sido muy grande y ha afectado a la sociedad en todos sus aspectos. Este avance sigue siendo imparable y cada día aparecen nuevos productos o mejoras de los ya existentes, fruto del vertiginoso desarrollo tecnológico. Uno de los aspectos que más se ha desarrollado ha sido el de las Tecnologías de la Información y la Comunicación (TIC) que tienen un reflejo directo en el aspecto docente.

Pero quizá el elemento más revolucionario en la educación ha sido Internet. Internet permite al profesor o ponente la utilización de gran cantidad de información y de recursos educativos que existen en la red y que facilitan la labor docente con presentaciones, películas demostrativas, datos actualizados, animaciones, informaciones de todo tipo, etc.

Internet fue creada en EEUU con fines militares en los años 60 y se llamaba ARPANET. Posteriormente comenzó a ser utilizado por el gobierno, universidades y otras instituciones. A partir de entonces comenzaron a incorporarse cada vez más redes y por lo tanto cada vez más usuarios hasta hoy en día que en muchos casos es herramienta de trabajo, de estudio y de comunicación indispensable.

Internet permitía la interconexión de un número elevadísimo de ordenadores. Esta interconexión posibilitaba el acceso a una gran cantidad de información, y además, en tiempo real. También se encontraron nuevas posibilidades como el correo electrónico, lo que permitía el intercambio de información de forma directa e instantánea entre dos o más usuarios. También se utiliza de forma masiva para el entretenimiento y el ocio y comienzan a aparecer gran cantidad de programas y nuevas utilidades que van multiplicando su uso.

Hoy en día, además de todo lo anterior, se abren nuevas expectativas o nuevos usos como los foros, los chats, los blogs, etc.

Internet es muy utilizado en materia educativa. Hasta hace unos años la utilización de Internet en la educación era mínima pero en los últimos años el avance que está teniendo es imparable. Se ha visto que en la red podemos encontrar gran cantidad de recursos educativos que se pueden aplicar en el aula. Estos recursos educativos facilitan la labor docente ya que nos permite acceder a gran cantidad de información, demostraciones, simulaciones, animaciones, etc., lo que apoya y complementa la manera de dar clase.

Por otro lado la sociedad demanda cada día más la utilización de las nuevas tecnologías y de Internet como parte de ellas. Es por eso que los centros educativos cada día dedican más inversión en ordenadores, cañones, software, etc., porque es una demanda cada día mayor por parte de alumnos y profesores.


13

Por todo lo anterior, surge la necesidad de formar al profesorado en nuevas tecnologías, en el manejo de ordenadores, uso de Internet, búsqueda de información en la red, recursos educativos “on line” y elaboración de páginas web como recursos educativos propios. De esta manera se ofrece al profesorado un abanico de posibilidades mucho mayor para facilitar su labor docente y, además se capta la atención del alumno, ofreciéndole una formación mucho más atrayente y práctica.

Pero en ocasiones al profesor le es muy difícil encontrar webs que se ajusten exactamente a sus necesidades. Por este motivo, el profesor puede optar por crear una web personal que incluya todos aquellos elementos que él utilice para el desarrollo de su actividad. No obstante, es muy normal que el profesor no conozca las herramientas que le permiten desarrollar esta labor, de ahí que se haga necesaria una formación del profesorado en el manejo de las TIC y en aspectos más específicos como el conocimiento de herramientas de elaboración de páginas web.

En este curso se ofrecerán también unos conocimientos básicos de navegación por Internet y el uso de herramientas de comunicación con otros internautas como los Foros, los Chats y los Blog.

Además se explicará el procedimiento que se debe seguir para elaborar páginas web personales y utilizarlas en clase con los alumnos, conociendo los elementos fundamentales de una página web y las herramientas necesarias para su desarrollo.

Por último, conviene conocer algunas aplicaciones didácticas que se pueden encontrar y que pueden ser de gran utilidad con los alumnos y otras aplicaciones de interés para el profesor como foros educativos, bancos de imágenes, etc.

El curso que se presenta es un curso a distancia. Por esto, una vez que reciba los materiales deberá comenzar con la lectura y comprensión de los temas expuestos. Algunos de los temas no tienen ejercicios pero otros sí. Se aconseja realizar los ejercicios propuestos a la vez que se va realizando la lectura de los temas. De esta manera, le resultará mucho más fácil su seguimiento y realización.

La presentación de los trabajos al tutor se realizará a través de una plataforma de e-learning. Para la utilización de esta plataforma se ofrecerán a los alumnos unas claves que permitan su gestión como usuario.

Usted tiene asignado un tutor “on line” con el que podrá resolver todas las dudas que se le planteen. El tutor resolverá la duda y le contestará, lo antes posible, también por correo electrónico o mediante la plataforma


14

TEMA 3: INTERNET

3.1. Breve orientación sobre Internet

3.2. Breve explicación de la tarea 1

3.1. Breve orientación sobre Internet.

Internet es una gran “red de de redes” interconectadas entre sí, de tal manera se comparten todas las informaciones que se encuentran subidas a los servidores.

Cuando queremos tener acceso a esa información lo que tenemos que hacer es conectar nuestro ordenador, a través de la red telefónica, a una de esas redes e introducirnos en ella mediante programas como por ejemplo Internet Explorer o Mozilla. Estos programas, que se les llama genéricamente “Navegadores”, nos permiten la navegación por Internet.

Para conectarnos a Internet con cualquiera de ellos, solo tendremos que hacer doble clic sobre el icono y se nos abrirá una pantalla, donde nos cargará la página web que tengamos como “predeterminada”. En la siguiente imagen podemos ver una página del navegador Internet Explorer con la página de Terra cargada.


15

En la página se pueden destacar las siguientes zona de mayor interés:

- Menú de herramientas que nos permite acciones como guardar, imprimir la página o añadirla a favoritos.

- Barra de navegación, que es la barra desde la que podemos recargar una página, detener la carga, cargar la página anterior o ir a la página de inicio.

- Barra de direcciones, que es el lugar donde debemos teclear la dirección de la página de Internet a la que queramos ir. Esta acción se nos facilita si tenemos la dirección de Internet guardada en “Favoritos”.

- Barra de Google. Esta barra es opcional, es decir, puede aparecer o no y es la que nos permite colocar directamente un término para que el buscador Google nos encuentre todas las referencias que hay en Internet relativas a ese término.


16

- Zona activa, es la zona donde nos va a aparecer la página que queremos visualizar. En la siguiente imágen tenemos un ejemplo de página web

Para navegar por Internet solamente deberemos ir añadiendo en la barra de direcciones, la URL correspondiente a cada página. La URL es la dirección de cada página y normalmente empieza por http://www. seguido de la dirección específica de cada una. Por ejemplo, la página del Ministerio de Educación es http://www.mec.es

Normalmente las URL´s vienen especificadas en minúsculas, sin símbolos raros, ni acentos ni espacios.

Es muy importante que tecleemos correctamente la URL ya que cualquier pequeño fallo o errata hará que no se encuentre la página que buscamos. Por eso, es muy conveniente que aquellas páginas que utilicemos frecuentemente, las tengamos “añadidas” a Favoritos.

En algunas ocasiones nos podemos encontrar que nuestro navegador, en la zona activa, nos carga la siguiente información:

En este caso lo que puede ocurrir es que la página que hemos tecleado en la barra de direcciones no exista o que el servidor que contiene la página esté temporalmente caído (fuera de servicio).

Si nos ocurriera esto revisaremos la URL

http://www./

http://www.mec.es/


17

tecleada para asegurarnos que no tiene ninguna errata y, si tenemos la seguridad de que la URL está correctamente tecleada, el problema que tenemos será con el servidor. En ese caso, intentaremos una nueva conexión un poco más tarde, para darle tiempo a que esté activo de nuevo.

En este curso te enseñaremos a crear páginas web sencillas, y a manejar otros recursos de Internet que también se usan en educación como Blogs, Foros y Chats.

El procedimiento general para crear páginas web es el siguiente:

1) instalar el programa de edición de documentos HTML en nuestro ordenador.

2) crear un sitio web. Un sitio web es un lugar específico en nuestro ordenador donde guardaremos los archivos que vayamos creando, y además, crearemos una “conexión directa” de nuestro ordenador con el servidor para poder subir y/o bajar archivos. Todo este procedimiento se explicará detalladamente a lo largo del curso.

3) elaborar un archivo HTML con todos los elementos que nosotros queramos

4) subir el archivo al servidor mediante FTP. FTP es un protocolo de transferencia de ficheros que permite conectar ordenador-servidor y hacer de “autopista” entre ellos. Al igual que se pueden transferir ficheros de ordenador a servidor (subir archivos), se pueden enviar en la dirección contraria (bajar archivos).

5) publicar el archivo, es decir, una vez que el archivo se ha subido al servidor en espacio web que se tiene reservado, ya se puede ver en Internet.

También te enseñaremos un montón de recursos didácticos que tienes a tu disposición para poder utilizarlos, de forma gratuita, con los alumnos en el aula y para añadirlos a tu página web mediante enlaces externos.


18

3.3. BREVE EXPLICACIÓN DE LA TAREA 1

Todos los alumnos deberán crearse una carpeta o directorio en su

ordenador con el nombre de curso_web (ejemplo: C:\curso_web), se

detallarán más adelante los pasos para su creación, y en el vamos a ir

guardando las tareas.

Crearemos un documento de texto con el nombre: “tarea1.txt”, en donde

vamos a ir guardando las actividades que componen dicha tarea, para

posteriormente poder enviársela al tutor mediante la plataforma.

Es importante mencionar que mediante la plataforma sólo se podrá

cargar un archivo, de ahí la importancia de crear un documento de texto

en donde iremos introduciendo todas las actividades para luego poder

enviarlas.

La Tarea 1 constará de 4 actividades:

- Apartado 1 de la tarea 1:

Búsqueda de herramientas en Internet, en donde tendremos que buscar en la

página CNICE una aplicación que se llama “Mecánica Básica”. Se tendrá que

guardar la URL (dirección de la página) y copiarla en el documento de texto

que tenemos con el nombre de tarea1.

Ejemplo:

La URL de la página CNICE con la aplicación de “Mecánica Básica” se

encuentra en:

(Se indicará la dirección de la página)

Apartado 2 de la tarea 1:

Se creará un blog en concordancia con el tema que se trata en el curso, se

guardará la URL (dirección de la página) y se copiará en el documento de

texto que tenemos con el nombre de tarea1, para enviarla al tutor para su

revisión.

Ejemplo:

Mi blog personal creado se encuentra en la dirección (URL): (se indicará la

dirección correspondiente)


Se deberá hacer una intervención en el foro del curso y se le deberá indicar al

tutor (copiándolo en el fichero tarea1) la fecha, la hora, el foro y la URL de la

intervención en el FORO (para que pueda localizarla).

Ejemplo:


19

En Resumen el documento de texto quedaría de esta manera.

TENER EN CUENTA QUE TENDRÉIS QUE PONER CORRECTAMENTE LAS DIRECCIONES, ESTO ES SÓLO UN EJEMPLO:

TAREA 1:


La URL de la página CNICE con la aplicación de “Mecánica Básica” se encuentra en:

http://www.isftic.mepsyd.es/ ”


Se deberá hacer una intervención en el foro del curso y se le deberá indicar al

tutor (copiándolo en el fichero tarea1) la fecha, la hora, el foro y la URL de la

intervención en el FORO (para que pueda localizarla).

Ejemplo:

La intervención en el foro “foro de intervenciones” realizada el día 22/02 a las

15:00h está accesible en la URL: (se indicará la dirección correspondiente)


Establecer una sesión de Chat con un compañero, teniendo en cuenta que se

deberá quedar previamente con dicho compañero para tener la conversación

o bien en caso de no poder contactar con un compañero se podrá realizar un

monólogo en el Chat. Como comprobación que se ha realizado la actividad se

deberá copiar en el documento de texto que tenemos creado con el nombre

de tarea1 para enviársela al tutor.

Ejemplo:

La conversación en el Chat es la siguiente:

Se pegará la conversación mantenida con el compañero o bien el monólogo

mantenido para la realización de la actividad.

http://www.isftic.mepsyd.es/


20


Mi blog personal creado se encuentra en la dirección (URL): http://creacionblog12.blogspot.com/


La intervención en el foro “foro de intervenciones” realizada el día 22/02 a las 15:00h está accesible en la URL:

http://magister.com.es/foros/foro3212


La conversación en el Chat es la siguiente:

En los temas siguientes se irán viendo los pasos correspondientes a estas

actividades que hay que en tregaral tutor. En todos los temas encontraréis

ejemplo guiados paso a paso en donde se verá con detalle los pasos para

realizar dichas actividades.

Las actividades que componen la tarea 1 se deberán entregar

conjuntamente al tutor (el documento creado de texto con el nombre de tarea

1) mediante la plataforma e-learning o vía e-mail, para poder ser valorada en

conjunto.

http://creacionblog12.blogspot.com/

http://213.254.218.44/foros/foro3212


21


22

TEMA 4: RECURSOS DIDÁCTICOS EN INTERNET

4.1. Recursos didácticos

4.2. Ejemplo de búsqueda de herramientas

4.3. Autoevaluación

4.1. RECURSOS DIDÁCTICOS

Podemos definir Recurso Didáctico como un conjunto de elementos en los que podemos apoyarnos para desarrollar la práctica docente. Entre estos recursos podemos encontrar los tradicionales como los libros de texto, las diapositivas, la pizarra, fotocopias, prensa y revistas, etc. Con la introducción de las nuevas tecnologías en la educación nos estamos acostumbrando a utilizar unos nuevos recursos como el ordenador, el cañón, las pizarras electrónicas, Internet, etc.

En Internet podemos encontrar gran cantidad de recursos ya elaborados que pueden simplificar nuestra labor. Estos recursos nos permiten acceder a ejercicios, simulaciones, ilustraciones, etc. que nos hace más fácil nuestra labor y que esta sea más atrayente para el alumno. De esta manera el alumno pasa de ser un mero receptor de un mensaje a un protagonista en su propio aprendizaje.

Estos recursos podemos encontrarlos en webs personales o en portales específicos. La mayoría de estas webs son de libre acceso aunque existen páginas que presentan un acceso restringido a usuarios registrado o dados de alta. Un ejemplo de esto último lo tenemos en páginas como que podemos encontrar en la siguiente dirección de Internet: http://www.tecno12-18.com/index.htm, y en la que podemos suscribirnos y se nos ofrecen gran cantidad de recursos sobre Tecnología.

No obstante, muchos de los recursos didácticos que podemos encontrar en la red están incluidos en portales educativos como Educamadrid, Averroes, CNICE, etc. Casi todas la Comunidades Autónomas tiene un portal Educativo donde colocan este tipo de recursos y podemos encontrarlo fácilmente en Internet. A continuación se indican algunos enlaces a los recursos educativos de los portales de algunas Comunidades Autónomas:

http://www.tecno12-18.com/index.htm


23

Comunidad Autónoma

Portal Educativo Enlace a los recursos educativos

Asturias

http://www.educastur.es/index.php?option=com_dbquery&Itemid=101

Cantabria

http://www.educantabria.es/portal/c/portal/layout?p_l_id=22.149&c=an

Castilla-León

http://www.educa.jcyl.es/educacyl/cm/profesorado/tkContent?pgseed=1184068269083&idContent=14065&locale=es_ES&textOnly=false

Galicia

http://www.edu.xunta.es/portal/contenido?comando=ContenidoDinamicoComando&accion=verListado&trID=932f7001-453431b5-000364ef-dcc63a88&tipoEntidad=Recursos%20educativos&pwID=e4763dcf-0a0a2825-006c0962-b0b5ef8f&lID=gl

A continuación vamos a pasar a detallar algunos de los portales educativos más completos que podemos encontrarnos.

- CNICE, dependiente del Ministerio de Educación, es una plataforma donde se pueden encontrar muchos recursos didácticos y muy interesantes, organizados por público al que van dirigidos y por asignaturas. Además se encuentran otros elementos muy interesantes como el Banco de Imágenes o el Observatorio Tecnológico y actuaciones a nivel Internacional como Malted, Oasis o e-Twinning

Podemos encontrarlo en la dirección de Internet: http://www.cnice.mecd.es/

http://www.educastur.es/



http://www.educantabria.es/portal/c/portal/layout?c=an&p_l_id=22.1



http://www.educa.jcyl.es/educacyl/cm/tkMain?locale=es_ES&textOnly=false




http://www.edu.xunta.es/portal/index.html






http://www.cnice.mecd.es/


24

- Educamadrid: Plataforma de Recursos Educativos de la Comunidad de Madrid que podemos encontrar en la siguiente URL: http://www.educa.madrid.org/portal/web/educamadrid/recursos-contenidos?c=an

En ella se ofrece gran cantidad de recursos de Educación Infantil, Primaria y Secundaria

- Averroes: Plataforma de Recursos Educativos de la Comunidad de Andalucía que podemos encontrar en la siguiente dirección:

http://www.juntadeandalucia.es/averroes/recursos/temas.php3

Aquí podemos encontrar gran cantidad de recursos organizados por temas y/o áreas y por niveles educativos (Infantil, Primaria, Secundaria, Bachillerato y Formación Profesional). Si entramos en la página por temas podremos encontrar además, unidades didácticas, enlaces de interés y publicaciones.

http://www.educa.madrid.org/portal/web/educamadrid/recursos-contenidos?c=an

http://www.educa.madrid.org/portal/web/educamadrid/recursos-contenidos?c=an

http://www.juntadeandalucia.es/averroes/recursos/temas.php3


25

Todos estos servidores tienen convocatorias de premios a materiales educativos en soporte electrónico, que permiten presentar aplicaciones didácticas relacionadas con la educación donde se busca la innovación, la adecuación a la práctica docente y la utilidad de los materiales presentados.

A continuación se presentan algunos ejemplos de las aplicaciones didácticas que se pueden encontrar en las plataformas indicadas con un enlace a ellas.

CNICE

TecnoWeb 1

http://www.iesalquibla.com/TecnoWeb/index.htm

Proyecto Techno

http://ares.cnice.mec.es/electrotecnia/index.html

Normalización

http://w3.cnice.mec.es/recursos/bachillerato/dibujo/tecnico/normalizacion/index.htm

Manual básico de economía

http://w3.cnice.mec.es/recursos/bachillerato/economia/index.htm

Plan de fomento de la lectura

http://www.planlectura.es/

http://www.iesalquibla.com/TecnoWeb/index.htm

http://ares.cnice.mec.es/electrotecnia/index.html





http://www.planlectura.es/


26

Descartes

http://descartes.cnice.mec.es/

Años de pobreza

http://www.cnice.mec.es/profesores/asignaturas/ciencias_sociales/pobreza/

Educamadrid

Latín

http://www.educa.madrid.org/portal/c/pub/cvro/recursos/intranet/ver;jsessionid=698797260FDC193C51F44F12348A22F7?p_l_id=10970.1&contentId=42577&nav=intranet&nav_mode=notSpecified

El recorrido de la energía: Las energías renovables

http://www.educa.madrid.org/portal/c/pub/cvro/recursos/intranet/ver?p_l_id=10970.1&contentId=-1898151929&nav=intranet&nav_mode=notSpecified

Viaje a través de las energías


Formulación

http://descartes.cnice.mec.es/













27

http://www.educa.madrid.org/portal/c/pub/cvro/recursos/intranet/ver?p_l_id=10970.1&contentId=42375&nav=intranet&nav_mode=notSpecified

Miguel Cervantes y El Quijote


Averroes

La Alhambra

http://www.juntadeandalucia.es/averroes/recursos_informaticos/andared01/alhambra/index.htm

Leyes de los gases

http://www.juntadeandalucia.es/averroes/recursos_informaticos/andared02/leyes_gases/index.html

Aula de Música

http://www.juntadeandalucia.es/averroes/concurso2006/ver/04/index.html














28

The Castle Quest

http://www.juntadeandalucia.es/averroes/recursos_informaticos/andared01/castlequest/index.htm

Orientared

http://www.orientared.com/

JClic

http://www.juntadeandalucia.es/averroes/jclic/

Algunas de las aplicaciones mostradas son de elaboración propia de la plataforma que las contiene, otras son provenientes de premios de convocatorias de materiales curriculares y otras son enlaces externos, elaborados por profesores, empresas, ...

Otros portales educativos que también pueden ser interesantes y en los que podemos encontrar gran cantidad de recursos e información útil para el profesorado son los siguientes:

http://www.profes.net/

http://www.educared.net/

http://www.portaleso.com/

http://www.educasites.net/




http://www.orientared.com/

http://www.juntadeandalucia.es/averroes/jclic/

http://www.profes.net/

http://www.educared.net/

http://www.portaleso.com/

http://www.educasites.net/


29

4.2. EJEMPLO DE BÚSQUEDA DE HERRAMIENTAS

Vamos a continuación a desarrollar un ejemplo guiado de cómo buscar una página en Internet.

Este ejemplo forma parte de la tarea 1. Se deberá copiar la URL que aparece en la barra de navegación y enviársela posteriormente al tutor para su revisión junto con las demás actividades de la tarea 1.

Para comenzar lo primero que tenemos que hacer es abrir Internet, para ello pulsamos en el icono de acceso.

Nos aparecerá la ventana del navegador diferente en cada caso, para que no haya errores vamos a escribir en la barra de navegación la siguiente dirección: http://www.google.es/

Nos aparecerá la siguiente ventana:

En la parte central nos permite buscar lo que queremos, en nuestro caso vamos a escribir CNICE, y posteriormente pulsamos en el botón

http://www.google.es/


30

Nos aparecerá una nueva ventana que nos proporciona varias páginas para poder acceder y buscar la página que más nos conviene en el momento. A nosotros nos interesa “Centro Nacional y Comunicación Educativa con la dirección http://www.isftic.mepsyd.es/ ”

Pulsar un clic con el botón izquierdo del ratón en esta dirección o en el nombre de la página. Nos aparecerá la siguiente ventana.

Como lo que queremos buscar es un contenido en concreto, hay que pulsar sobre las opciones para ver que es lo que queremos ver, en nuestro caso

tendremos que pulsar en

http://www.isftic.mepsyd.es/


31

Nos aparecerá la siguiente ventana en donde podremos elegir entre las distintas asignaturas para buscar lo que queremos encontrar.

La opción que nos interesa es que se encuentra en “Recursos Educativos”. Pinchar un clic encima de está opción y se nos abrirá otra ventana en donde no aparecerá la documentación que necesitamos.


32

En la parte central nos aparecerá la asignatura pulsar sobre él y nos aparecerá una nueva ventana en donde encontraremos “Mecánica Básica”.

Pulsar sobre la opción “Mecánica Básica” que es la página que estamos buscando.

Esta es la página final que hemos buscado a través de todos los pasos que hemos realizado.

Esta es la página que tendréis que indicar al tutor para su revisión y poder evaluar que habéis encontrado la página que se buscaba.


33

4.4. AUTOEVALUACIÓN.

1. Todos los recursos didácticos de Internet son ...

a) de acceso restringido a los usuarios registrados

b) de acceso libre

c) de pago

d) ninguna de las anteriores

2. Todos los recursos didácticos de Internet suelen estar en ...

a) en portales educativos públicos

b) en portales educativos privados

c) en webs personales

d) todas las anteriores

3. Averroes es ...

a) una página web

b) una aplicación didáctica

c) un portal educativo

d) un programa de cálculo

4. Cual de los siguientes elementos educativos no están incluidos en la

web del CNICE

a) banco de imágenes

b) chat

c) recursos educativos

d) foros

5. Viaje a través de las energías es una aplicación que podemos encontrar el

portal educativo de ...

a) Educamadrid

b) Educared

c) CNICE

d) Profes.net


34

TEMA 5: UTILIZACIÓN DEL BLOGS

5.1. Concepto

5.2. Blogs en la educación

5.3. Creación de un Blogs

5.4. Ejemplo guiado paso a paso


5.1. CONCEPTO

Un blog o cuaderno de bitácora es un sitio web donde periódicamente el autor inserta artículos, que se colocan por orden cronológico y, a los que el lector puede añadir algún comentario. Incluso el autor puede contestar a esos comentarios además de tener la capacidad de mantener o eliminar aquellos que no crea oportunos. Los blogs normalmente contienen texto aunque también pueden contener imágenes y archivos de audio o vídeo.

Existen muchos tipos de blogs como pueden ser los personales, empresariales tecnológicos, relativos a educación (edublogs), de cine, etc.

Inicialmente los blogs no eran mas que sitios web que se actualizaban frecuentemente pero el desarrollo de las herramientas informáticas permitieron actualizaciones más frecuentes y sencillas y que las personas que querían intervenir no necesitaran conocimientos informáticos muy elevados. Tanto se ha desarrollado este tema que hoy en día existe software específico para blogs.

Los primeros blogs comenzaron a aparecer en el año 1995 pero de una forma muy poco significativa aunque no ha sido hasta los años 2000 y 2001 cuando no se ha producido el gran auge de participación y utilización de los blogs.

Hoy en día existen herramientas que permiten a cualquier usuario la creación y mantenimiento de los blogs sin necesitar grandes conocimientos de informática. En muchos casos el software está instalado directamente en el servidor que aloja el sitio, por lo que la creación, mantenimiento y edición del blog se hace “on line”. Aquellas herramientas que proporcionan un alojamiento gratuito presentan una


35

funcionalidad más limitada que aquellas que se presentan mediante un proveedor especializado.

Como curiosidad podremos añadir que los blogs han tenido tanto éxito, que en 2005 se escogió al día 31 de agosto como Día Internacional del Blog.

5.2. BLOGS EN LA EDUCACIÓN

Los educablogs son el conjunto de blogs relativos a educación. En ellos se exponen temas relativos al mundo educativo.

Aquí podemos utilizar el blog como un elemento de opinión, donde exponer diferentes puntos de vista de los aspectos relativos a educación o, como elemento a utilizar por el docente, donde se permita participar al alumno y crear un aprendizaje constructivo, además de fomentar el uso de las TIC.

Un ejemplo de blog en un proceso educativo podría ser un curso donde el profesor, que actúa como administrador, fuera insertando comentarios relativos a los aspectos que se van tratando en él. Posteriormente los alumnos deberían ir añadiendo comentarios sobre el tema e, incluso podrían proponer futuros temas para opinión. Este tipo de uso se realiza normalmente en cursos a distancia donde las relaciones ente alumnos y profesores son más impersonales.

Como la utilización de los blogs es relativamente frecuente, el desarrolllo de estos se está concretando en estos momento, por lo tanto, en la actualidad el uso de ellos en educación no está demasiado extendido.

A continuación se indican algunos enlaces de interés sobre blogs relativos a la educación en los cuales se exponen ideas, conocimientos, opiniones, etc:

- Aulablog: http://www.aulablog.com/

- Tiscar.com: http://tiscar.com/blogs-para-educar/

- Docencia.es: http://www.docencia.es/index.php?category=8

- Bitácora de Aníbal de la Torre: http://www.adelat.org/

- Observatorio de la Educación: http://observatorioeducacion.bitacoras.com/

- PRoFeBLoG.es: http://profeblog.es/

- Bitácora de Formación Profesional: http://www.lacoctelera.com/formacionprofesionalespecifica

- Blogfesores: http://www.blogfesor.org/directorio/

http://www.aulablog.com/

http://tiscar.com/blogs-para-educar/

http://www.docencia.es/index.php?category=8

http://www.adelat.org/

http://observatorioeducacion.bitacoras.com/

http://profeblog.es/

http://www.lacoctelera.com/formacionprofesionalespecifica

http://www.blogfesor.org/directorio/


36

5.3. CREACIÓN DE UN BLOG

En este apartado vamos a explicar brevemente como se crearía un blog personal, en el apartado siguiente se expondrá un ejemplo guiado detallado de la creación de un blog.

➢ Lo primero que tenemos que hacer es introducirnos en Internet y escribir la siguiente dirección: https://www.blogger.com/start

➢ Nos aparecerá una ventana en donde tendremos que registrarnos para poder crear el blog.

➢ Para poder registrarnos tendremos que pulsar en el botón de

➢ En esta nueva ventana tendremos que introducir los datos correspondientes para poder crearnos como usuarios e introducirnos en el blog.

Importante: No se debe utilizar ni el nombre de usuario del curso ni su contraseña:

Los datos van a ser los siguientes:

➢ Dirección de correo electrónico: tendréis que escribir vuestro e-mail siempre que sea en gmail o Hotmail. En caso de no tener una de estas cuentas se deberá crear con anterioridad.

➢ Introducir contraseña: escribiremos la contraseña “tucursoweb”.

➢ Mostrar Nombre: vamos a escribir el nombre por el cual van a conocer en el blog, es nuestro caso vamos a escribir “diseñoweb_tu nombre”. El nombre puede ser ficticio o real a vuestro gusto.

➢ Verificación de la palabra: tendremos que escribir los caracteres que se ven de la imagen

➢ Aceptación de las condiciones: pulsar en la casilla de verificación de “Acepto” una vez que se han leído las condiciones del servicio.

➢ Una vez rellena toda la ficha pulsamos en “Continuar”

https://www.blogger.com/start


37

➢ Nos aparecerá una nueva ventana en donde tendremos que rellenar varias casillas de título del blog y una dirección de URL.

➢ Una relleno pulsar en el botón de para pasar de ventana.

➢ Nos aparecerá la siguiente ventana:

➢ En esta ventana nos permite elegir una plantilla dentro de los modelos que nos muestra.

➢ Una vez elegida pulsar el botón de

➢ Nos aparecerá la siguiente ventana en donde ya tendremos creado nuestro blog.

➢ Pulsar en el botón de para comenzar a introducir el texto que queramos.

➢ Nos aparecerá una nueva ventana con varias fichas que veremos a continuación:


38

➢ En la ficha CREACIÓN DE ENTRADAS nos aparecerán varias fichas con varias opciones cada una de ellas, que vamos a ver a continuación:

➢ La ficha entrada: tendremos que añadir el título que queremos introducir en el blog, escribir el texto con formatos, imágenes, vídeos, etc… que queremos que aparezcan en nuestro blog, … pudiendo utilizar la ficha redactar o bien el editor de texto html.

- En la parte inferior de la pantalla te aparecerán dos botones el botón

publicaras lo que tengas hasta el momento,

mientras que el botón te permite ir guardando los cambios que vayas realizando.

➢ En la ficha Editar entradas es en donde nos irán apareciendo todas las entradas que hemos realizado.

➢ En la ficha Moderar comentarios nos aparecerá la siguiente ventana.

Podremos elegir los comentarios pulsando en la opción

➢ Nos aparecerá la siguiente ventana en donde podremos configurar quien puede ver los comentarios, si se muestran u ocultan, formatos, correo electrónico, etc…

➢ En la ficha CONFIGURACIÓN podremos configurar nuestro blog, podremos introducir una breve explicación para saber de que trata, un título, si quieres suprimir el blog, que contenido tiene, etc…

➢ En la ficha DISEÑO podremos acceder a varias fichas que nos permitirán cambiar los colores, añadir nuevas imágenes, cambiar de plantilla, etc…

➢ En la ficha VER BLOG podrás acceder al blog desde Internet y ver como te va quedando.

5.4. EJEMPLO GUIADO PASO A PASO

En este apartado vamos a realizar la creación de un blog detalladamente de todos los pasos explicados en el apartado anterior. Hay que tener en cuenta que abra que guardarse la dirección del blog para posteriormente enviársela al tutor para su revisión.


39

➢ Lo primero que tenemos que hacer es introducirnos en Internet y escribir la siguiente dirección: https://www.blogger.com/start


➢ Lo primero que tendremos que hacer es registrarnos ya que sino no nos dejaría publicar un blog. Para ello pulsamos en el botón

➢ Nos aparecerá la siguiente ventana

https://www.blogger.com/start


40

➢ En esta nueva ventana tendremos que introducir los datos correspondientes para poder crearnos como usuarios e introducirnos en el blog.

Importante: No se debe utilizar ni el nombre de usuario del curso ni su contraseña:

Los datos van a ser los siguientes:

- Dirección de correo electrónico: tendréis que escribir vuestro e-mail siempre que sea en gmail o Hotmail. En caso de no tener una de estas cuentas se deberá crear con anterioridad.

- Introducir contraseña: escribiremos la contraseña “tucursoweb”.

- Mostrar Nombre: vamos a escribir el nombre por el cual van a conocer en el blog, es nuestro caso vamos a escribir “diseñoweb_tu nombre”. El nombre puede ser ficticio o real a vuestro gusto.

- Verificación de la palabra: tendremos que escribir los caracteres que se ven de la imagen

- Aceptación de las condiciones: pulsar en la casilla de verificación de “Acepto” una vez que se han leído las condiciones del servicio.


41

➢ Una vez rellena toda la ficha pulsamos en “Continuar”

➢ Nos aparecerá esta nueva ventana

➢ Aquí tendremos que rellenar varias casillas que explico a continuación.

- En Título del blog: tendremos que introducir el nombre que le queremos dar a nuestro blog.

- En Dirección del blog (URL): tendremos que introducir una dirección por el cual lo vamos a identificar. Se recomienda no utilizar letras mayúsculas ni signos de puntuación ya que pueden traer problemas, lo mejor es letras minúsculas.

➢ Una relleno pulsar en el botón de para pasar de ventana.



42

➢ En esta ventana nos permite elegir una plantilla dentro de los modelos que nos muestra.

➢ Una vez elegida pulsar el botón de

➢ Nos aparecerá la siguiente ventana en donde ya tendremos creado nuestro blog.


43

➢ Pulsar en el botón de para comenzar a introducir el texto que queramos.

➢ Nos aparecerá una nueva ventana con varias fichas que veremos a continuación:

➢ En la ficha CREACIÓN DE ENTRADAS nos aparecerán varias fichas con varias opciones cada una de ellas, que vamos a ver a continuación:

➢ La ficha entrada:

- En Título: tendremos que introducir el título que queremos que aparezca en nuestro blog

- En la parte central de la pantalla tendremos dos fichas distintas para poder redactar nuestro texto, pinchando encima de ellas podemos ir de una a otra.


44

- En la ficha Redactar la barra de herramientas sería:

Tipo de letra

Tamaño

de letra

Negrita

Cursiva

Color del

texto

Enlaces a

otras

páginas

Alineación

izquierda

Alineación

centrada

Alineación

justificada

Numeración

Viñetas

Texto entre

comillas

Corrección

ortográfica

Añadir

Imagen

Añadir Vídeo

Borrar

Alineación

derecha


45

- En la ficha Editor de HTML nos aparecería la siguiente barra de herramientas:

- En la parte inferior de la pantalla te aparecerán dos botones el botón

publicaras lo que tengas hasta el momento,

mientras que el botón te permite ir guardando los cambios que vayas realizando.

➢ En la ficha Editar entradas nos aparecerá la siguiente ventana:

En donde nos irán apareciendo todas las entradas que hemos realizado.

➢ En la ficha Moderar comentarios nos aparecerá la siguiente ventana.

Negrita

Cursiva

Enlace a

otras

páginas

Texto

entre

comillas

Corrección

ortográfica

Añadir

Imagen

Añadir

Vídeos


46

Podremos elegir los comentarios pulsando en la opción

➢ Nos aparecerá la siguiente ventana en donde podremos configurar quien puede ver los comentarios, si se muestran u ocultan, formatos, correo electrónico, etc…

➢ En la ficha CONFIGURACIÓN podremos configurar nuestro blog, podremos introducir una breve explicación para saber de que trata, un título, si quieres suprimir el blog, que contenido tiene, etc…


47

➢ En la ficha DISEÑO podremos acceder a varias fichas que nos permitirán cambiar los colores, añadir nuevas imágenes, cambiar de plantilla, etc…


48

➢ En la ficha VER BLOG podrás acceder al blog desde Internet y ver como te va quedando.


49

5.6. AUTOEVALUACIÓN:

1.- Un blog es........

a) un espacio de almacenamiento de información

b) una interconexión entre internautas en tiempo real

c) un lugar de opinión

d) una relación entre personas mediante correo electrónico

2. Para participar, de cualquiera de sus formas, en un blog debes .....

a) registrarte en él

b) tener un acceso a Internet con programas específicos

c) tener un acceso a Internet

d) tener altos conocimientos de informática

3. Los blogs suelen estar clasificados por ...

a) temas

b) sistemas de acceso

c) programas específicos de uso

d) usuarios

4. En un blog puedes participar como ....

a) escritor

b) lector

c) opinando


5. Un educablog es ....

a) un blog relativo al mundo de la educación

b) un blog institucional

c) una página web con información sobre aspectos relacionados con la

educación

d) un lugar de encuentro relativo a la educación


50

TEMA 6: LOS FOROS

6.1. Introducción

6.2. Los foros en la educación

6.3. Participación de un foro


6.5. Creación de temas en un foro



6.1. INTRODUCCIÓN

Un foro es una aplicación web que da soporte a discusiones en línea sobre diferentes temas: política, educación, motor, cine, cultura, música, etc.

Los foros son unos complementos de espacios web más generales. A ellos puede acceder cualquiera y exponer su opinión o incluso establecer discusiones en un tono informal. Suele existir la figura del moderador del foro que se encarga de abrir el tema de debate, animarlo, eliminar aquellas intervenciones que pudieran ser ofensivas o insultantes y cerrar la discusión.

En los foros se puede participar de dos formas: de manera anónima o previo registro, donde se suele pedir un nick o alias y una dirección de correo electrónico. Otra manera de participar en un foro es la de aquellos que solamente leen las aportaciones realizadas pero que no añaden ningún comentario.

En un foro podemos encontrar algunos aspectos indeseables, que deben tratar de eliminarse. Estos aspectos son:

- el spam, que añadirá aportaciones que nada tiene que ver con la temática del foro, generalmente introduciendo publicidad.

- los usuarios que interrumpen el foro con comentarios absurdos u ofensivos y que solo tienen la intención de romper las reglas y el buen funcionamiento del foro

- el uso de un lenguaje similar al que se usa en los SMS. Es un lenguaje corto y que acorta de forma abusiva las palabras. Este lenguaje dificulta el entendimiento del mensaje, además de no respetar las mínimas normas de ortografía.


51

6.2. LOS FOROS EN LA EDUCACIÓN

En el mundo de la educación existen gran cantidad de foros que permiten relacionarse a gente que comparte este “mundillo”. Los foros en educación podemos clasificarlos desde dos puntos de vista:

- los que son específicos de la formación por Internet. En este caso son foros específicos de un curso, en los que intervienen solamente los participantes en el curso y su tutor y, sirven para intercambiar opiniones, plantear temas de debate, resolver dudas o cuestiones pero siempre relacionadas con el curso. En ellos el tutor del curso suele actuar también como moderador. En este curso hay un foro de este tipo donde se pueden añadir temas de conversación o realizar aportaciones a los temas ya planteados. Además, como ejercicio del curso deberemos realizar una intervención en nuestro foro.

- los que son genéricos de educación, es decir, son aquellos que están relacionados con la práctica docente o con aspectos muy cercanos a ella. Podemos encontrar foros de todo tipo en las plataformas que nos ofrecen las distintas Comunidades Autónomas, el Ministerio de Educación o en webs específicas de educación

A continuación se exponen algunos ejemplos de foros relacionados con la educación:

Foros del Portal educativo de Educamadrid que podemos encontrar en la dirección: http://herramientas.educa.madrid.org/foros/index.php?c=1

Foros del portal educativo de la Comunidad de

Andalucía donde podemos tenemos tres tipos de foros, clasificados por temas: uno genérico, otro de Formación Profesional y otro técnico. Lo podemos encontrar en la dirección: http://www.juntadeandalucia.es/averroes/foros/

Foros del CNICE, dependiente del Ministerio de Educación, ofrece foros de las diferentes asignaturas donde los

usuarios exponen dudas, problemas, inquietudes, etc. Los encontraremos en la siguiente dirección: http://w3.cnice.mec.es/foros/index.html

http://herramientas.educa.madrid.org/foros/index.php?c=1

http://www.juntadeandalucia.es/averroes/foros/

http://w3.cnice.mec.es/foros/index.html


52

Foros educativos de diferentes temas relacionados con la educación. Se pueden encontrar en la dirección: http://www.profes.net/otrosforos.asp

Foros educativos de gran cantidad de temas organizados por distintos temas. Se encuentra en la

dirección: http://www.educasites.net/foros_debate_educacion.htm

6.3. PARTICIPACIÓN DE UN FORO.

En este apartado vamos a explicar brevemente los pasos de participación en un foro, en el apartado siguiente se explicará detalladamente y paso a paso en un ejemplo guiado.

Con este ejemplo vamos a introducirnos en el foro del curso para poder realizar una intervención en el mismo que nos servirá de práctica para realizar la actividad 5.4.

Los pasos a seguir son los siguientes:

➢ Lo primero que tenemos que hacer es introducirnos en Internet, y escribir la URL del foto en el que queremos participar.

➢ Nos aparecerá una ventana en donde tendremos que registrarnos para poder acceder al foro y así poder publicar nuestro comentario. Para ello

tendremos que pulsar en la opción .

➢ Nos aparecerá la siguiente ventana en donde tendremos que introducir los datos de usuario, contraseña, e-mail, …

➢ Una vez rellenada la ficha de registro, se tendrá que pulsar en el

botón de para confirmar los datos.

➢ Nos aparecerá un mensaje en donde nos indica que ya estamos registrados y podemos acceder a la página principal para poder entrar.

➢ Una vez que nos hemos registrado tendremos que ir a la página principal para acceder al foro.

➢ Tendremos que pinchar sobre el debate del foro en el que queramos participar.

http://www.profes.net/otrosforos.asp

http://www.educasites.net/foros_debate_educacion.htm


53

➢ Para añadir nuevo tema hay que pinchar en: .

➢ Tras pinchar en el tema elegido se puede añadir un mensaje pinchando en:

.

➢ Nos aparecerá una nueva ventana en donde tendremos que introducir nuestra opinión.

➢ Una vez escrito el mensaje o comentario pulsar en el botón para que se añade el mensaje al foro.


Con este ejemplo vamos a introducirnos en el foro del curso para poder realizar una intervención en el mismo que nos servirá de práctica para realizar la actividad 5.4.

Los pasos a seguir son los siguientes:

➢ Lo primero que tenemos que hacer es introducirnos en Internet, y escribir la URL que sería la siguiente:

http://magister.com.es/foros/

➢ Nos aparecerá la siguiente pantalla:



54

➢ Tendremos que registrarnos para poder acceder al foro y así poder publicar nuestro comentario. Para ello tendremos que pulsar en la opción

.

➢ Nos aparecerá la ventana con la explicación de las condiciones de registro, donde para seguir con la inscripción tendremos que elegir una de las dos primeras opciones:

➢ Nos aparecerá la siguiente ventana en donde tendremos que introducir nuestros datos.

- En “Nombre de Usuario”: tendremos que introducir el nombre de usuario que nos proporcionó el curso.

- En “Email” introducir nuestro correo electrónico (Se puede también introducir un email inventado)


55

- En “Contraseña” tendremos que introducir la contraseña que nos proporcionó el curso

- En “Confirmar contraseña” tendremos que volver a escribir la contraseña para que no haya errores de escrituras.

- En la casilla debajo del código tendremos que introducir dicho código.

➢ Pulsar el botón de

➢ Nos aparecerá un mensaje en donde nos indica que ya estamos registrados y podemos acceder a la página principal para poder entrar.

➢ Ahora, tendremos que ir a la página principal para poder acceder al foro que queramos entrar. Para ello vamos a pulsar en la palabra ‘aquí’ que nos permite acceder a la siguiente ventana.

➢ Pulsaremos en el foro denominado “Diseño web y herramientas”, dando un clic con el botón izquierdo del ratón.


56

➢ Tras pinchar en el tema ‘PARTICIPACIÓN EN EL FORO’ y presionar el

botón se nos abrirá la ventana que nos pregunte sobre el nombre y contraseña del usuario.

➢ Después de rellanar los datos necesarios y pinchar en ‘Login’ se nos abrirá la siguiente ventana en donde podremos hacer nuestra intervención en el foro.


57

➢ En “Asunto” escribimos el tema de nuestro mensaje y en el “Cuerpo del mensaje” ponemos el texto de nuestra intervención.

➢ Cuando acabamos escribir nuestro mensaje lo único que nos va a

quedar es pinchar en el botón: para que se añade el mensaje al foro.

6.5. CREACIÓN DE TEMAS EN UN FORO.

En este apartado vamos a aprender a crear temas en los foros independientes a los creados con anterioridad. En el apartado siguiente se expone un ejemplo guiado para que sea más fácil su realización.

➢ Lo primero que tenemos que hacer es introducirnos en Internet, y escribir la URL del foro en el cual queremos participar.

➢ En esta pantalla tendremos que seleccionar el curso al cual queremos acceder y crear un nuevo tema de debate.

➢ Se abrirá una nueva pantalla con todos los temas que han ido introduciendo los participantes.

➢ Si quieres introducir un nuevo tema de debate, tendrás que pulsar en

que se encuentra en la parte superior de la ventana

➢ Se despliega una nueva ventana en donde tendremos que exponer el nuevo tema (escribiendo el título del tema como “Asunto”) con una breve descripción (en el cuerpo de mensaje), escribir brevemente desarrollado el tema de debate que quieres exponer pudiendo modificar los formatos en la barra de herramientas:

➢ Una vez realizado estos pasos tendremos que pulsar para que se quede publicado nuestro comentario en el foro.


58

6.6. EJEMPLO GUIADO PASO A PASO.

En este apartado vamos a explicar detalladamente como crear un tema en el foro. Ten en cuenta que esta es otra de las actividades que se deberán entregar al tutor para su revisión en la tarea 1.

➢ Lo primero que tenemos que hacer es introducirnos en Internet, y escribir la URL que sería la siguiente:



En esta pantalla tendremos que seleccionar el curso o el foro al que queremos tener acceso, para poder leer los comentarios de los demás participantes o bien introducir mi comentario personal. Para ello, seleccionar en nuestro caso “Diseño web y herramientas”.

➢ Se abrirá una nueva pantalla con todos los temas que han ido introduciendo los participantes.

http://213.254.218.44/foros/


59

➢ Si quieres introducir un nuevo tema de debate, tendrás que pulsar en

que se encuentra en la parte superior de la ventana

➢ Si entramos en el foro con nuestro usuario se despliega una nueva ventana con los siguientes datos (en el otro caso nos aparecerá una ventana para que podamos registrarnos):

- En “Asunto”, tendremos que introducir el titulo del tema a tratar.

- En el cuadro en blanco del centro de la pantalla, tendremos que escribir el una breve descripción de nuestro debate desarrollándolo.

- También nos permite modificar el texto y ponerle distintos estilos,

(negrita, cursiva y subrayado).


60

- Una vez realizado estos pasos tendremos que pulsar para que se quede publicado nuestro tema en el foro.

Si por el contrario quieres participar en el foro contestando a un tema ya expuesto por otro participante, tendrás que realizar estos pasos:

➢ El primer paso, estando ya introducidos dentro del foro, sería elegir el tema al cual tenéis que contestar. En nuestro caso debéis encontrar al usuario “Tutor6” y el tema de debate sería “PARTICIPACIÓN EN EL FORO”.

➢ Una vez encontrada, tendréis que pulsar encima de “PARTICIPACIÓN EN EL FORO” para poder acceder a el tema de debate y contestar a el mismo.

➢ Una vez que pulsamos se despliega otra ventana, con el tema desarrollado del debate.

➢ Tras pinchar en , aparecerá la misma ventana explicada anteriormente, en donde vamos a escribir nuestra respuesta.

- La respuesta a introducir será la siguiente: “Este es mi contestación de prueba para saber como contestar a un tema creado en el foro de Magíster”

➢ Una vez contestado el tema, deberemos pulsar en…

… de esta manera quedará grabada en el tema elegido nuestra contestación.

Si queremos comprobar que se ha quedado grabado, podemos volver a pulsar encima del tema, y veréis que aparecerá el tema original y vuestra contestación.


61

6.7. AUTOEVALUACIÓN

1. Un foro es......

a) un lugar de conversación “el línea” entre muchos internautas en tiempo real

b) un lugar de opiniones sobre un tema expuesto

c) un espacio web donde mucha gente tiene acceso

d) un cuestionario

2. Un foro es o puede ser ..

a) una parte de un espacio web

b) un conjunto de espacios web

c) un lugar de actividades varias

d) un conjunto de páginas web

3. El moderador de un foro se encarga de ...

a) abrir y cerrar el debate

b) animarlo

c) controlar las intervenciones


4. Los foros en educación están especialmente indicados para

a) la educación presencial

b) la educación a distancia

c) le educación de adultos

d) la educación en nuevas tecnologías

5. Los foros son utilizados normalmente para ...

a) establecer relación entre personas que tienen un aspecto cualquiera en

común e intercambiar opiniones e información

b) establecer contacto entre personas sin relación previa

c) conocer gente

d) aprender sobre un determinado tema


62

TEMA 7: CHATS

7.1. Introducción

7.2. Los chats en la educación

7.3. Participación en un chats



7.1. INTRODUCCIÓN

Es importante quedar en el foro para chatear para usar el foro, pero si no es posible contactar con nadie, se puede hacer un monólogo en el Chat.

El Chat es una comunicación entre dos o más personas a través de Internet que se realiza en tiempo real.

Para ello se necesita un software específico que deben tener todos los participantes en el Chat. Con este sistema podrás entablar “conversaciones instantáneas” con otras personas de la misma forma que si estuvieras cara a cara, pero de forma escrita y a través del ordenador.

Entre los posibles programas necesarios para “chatear” tenemos los siguientes:

Para obtener este programa sigue los pasos que se indican a continuación:

- 1º paso: instala en tu ordenador MSN Messenger. Puedes obtenerlo de forma gratuita desde la siguiente dirección de Internet: http://get.live.com/messenger/overview

- 2º paso: regístrate para obtener una cuenta de correo de manera gratuita con Hotmail. Para ello tendrás que ir a la página www.hotmail.com y pinchar en el botón situado en la parte central izquierda de “registrarse”. A continuación deberás introducir los datos que te van pidiendo en las diferentes pantallas. Si ya tienes creada la cuenta, puedes pasar al siguiente paso .

- 3º paso: regístrate. Para ello debes hacer clic en el siguiente icono que aparecerá en la parte inferior derecha de tu pantalla. Ahora añadimos la dirección de correo y la contraseña que hemos utilizado en la instalación anterior

http://get.live.com/messenger/overview

http://www.hotmail.com/


63

- 4º paso: en la parte izquierda de la pantalla aparecerán varias opciones en columna, una de ellas será “añadir a la lista de contactos” o “agregar contacto” donde si pinchas podrás registrar a aquellas personas con las que queramos chatear. De esta forma, el programa nos avisará siempre que un contacto se conecte a Internet por si queremos establecer un diálogo con él. Para eso pulsaremos el botón “agregar contactos”. Entonces se nos desplegará una ventana en la cual nos pedirá la dirección de correo de nuestro contacto y un nombre identificativo.

A partir de ahora ya puedes chatear con tus contactos.

Para esto solo tienes que abrir una pantalla como la siguiente haciendo doble clic sobre el contacto con el que deseas chatear, escribir tu mensaje, en este caso “Hola” y pulsar “Enter” o “Enviar”. Instantáneamente el mensaje pasa a la bandeja de arriba y llega al destinatario.

Es el softweare que vamos a utilizar para realizar las actividades de chat en el curso. En un programa de

utilización “on line” que podrás encontrare en la siguiente dirección de Internet: http://magister.com.es/chat/

http://213.254.218.44/chat/


64

Una vez que introduzcas esa dirección en la barra de direcciones se te abrirá una ventana como la siguiente:

En ella introduciremos un nombre de usuario (con el que se nos identificará después) y una contraseña. No hace falta registrarse. Ahora ya entraremos en la sala de chat y podremos establecer un diálogo con cualquier compañero del curso e intercambiar opiniones, conocimientos, experiencias, etc.

7.2. LOS CHATS EN LA EDUCACIÓN

El principal uso del Chat en la educación se produce en la educación a distancia, donde el alumno se pone en contacto con el tutor para consultarle alguna duda o para resolver cualquier problema que pudiera surgir. También puede ser utilizado por los alumnos del curso para intercambiar dudas, experiencias, inquietudes y, en general, para establecer cualquier tipo de comunicación entre ellos de forma instantánea. Se pueden organizar actividades como un debate, lluvia


65

de ideas acerca de un tema y trabajo en grupo para solucionar un caso o exponer opiniones entre compañeros y con la actuación puntualizada del profesor en caso de ser necesario.

A través de esta herramienta el alumno puede desarrollar la capacidad de la expresión escrita, el respeto al turno para ser entendido y comprender a los demás y la comprensión entre otros aspectos.

En la educación presencial el uso del Chat no tiene mucho sentido, ya que al ser una comunicación en tiempo real, en ese momento alumno y profesor ya están juntos, por lo que no necesitan establecer contacto por ningún otro método que no sea oralmente.

7.3. PARTICIPACIÓN EN UN CHAT

En este apartado vamos a realizar una intervención en un Chat para os sirva de orientación, pero en el apartado posterior se realizará un ejemplo paso a paso en donde se detallará cada apartado que contiene un Chat.

Es importante mencionar que para la realización de una conversación en el Chat tendréis que contactar con algún compañero previamente para poder llevar a cabo esta actividad.

➢ Lo primero que tenemos que hacer es conectarnos a Internet, e introducir la dirección correspondiente, que nuestro caso va a ser la proporcionada por el curso

➢ Lo primero que tenemos que hacer es registrarnos para poder acceder

al Chat. Para ello tenemos que pulsar en la opción que aparece en “Administración de cuenta”.

➢ Nos aparecerá la siguiente pantalla, en donde tendremos que rellenar los datos para poder registrarnos, el nombre de usuario, contraseña, …

➢ Después de rellenar toda la ficha de “Registro de Usuario”, tendremos

que pulsar en el botón .

➢ Nos aparecerá esta ventana , que nos informa de que hemos sido registrados correctamente.


66

➢ Pulsamos el botón para poder volver a la página principal y entrar en el Chat.

➢ Al volver a la página principal, se rellena automáticamente el nombre de usuario y contraseña con los datos con los cuales nos hemos registrado.

➢ En la parte inferior de la pantalla nos aparece los datos del Chat, las salas, si queremos crear alguna sala, …

➢ Una vez seleccionada la sala a la que queremos tener acceso,

pulsaremos en el botón de .

➢ En esta nueva pantalla veremos los usuarios que están conectados en nuestra sala. Esto se puede ver en la parte central superior de la pantalla.

➢ Si queremos contestar a un usuario o darnos a conocer tendremos que escribir el texto en la zona inferior de la pantalla.

➢ Una vez escrito el texto, tendremos que pulsar en el botón para verificar el contenido y que aparezca en pantalla para que pueda ser visto por otros usuarios que estén conectados en el momento.

➢ Si queremos salir el Chat tendremos que pulsar en la opción que está en la parte superior derecha de la pantalla.

7.4. EJEMPLO GUIADO PASO A PASO.

Con este ejemplo vamos a realizar una intervención en un Chat para que os sirva de orientación a la hora de realizar la actividad del curso. Este ejemplo os servirá para la realización de la actividad que pertenece a la tarea 1, tendréis que guardar en una hoja de texto (copiarla) y posteriormente enviarla al tutor para su revisión.

Nota Aclaratoria para la realización de la actividad:

El alumno tendrá que quedar previamente con otro compañero de curso para poder mantener una conversación en el Chat. Se recomienda usar el foro para quedar con otros compañeros. En caso de no ser posible, se podrá hacer un monólogo.


67

➢ Lo primero que tenemos que hacer es conectarnos a Internet, e introducir la dirección correspondiente, que nuestro caso va a ser la proporcionada por el curso:

http://magister.com.es/chat/


➢ Lo primero que tenemos que hacer es registrarnos para poder acceder

al Chat. Para ello tenemos que pulsar en la opción que aparece en “Administración de cuenta”.

http://213.254.218.44/chat/


68

➢ Nos aparecerá la siguiente pantalla, en donde tendremos que rellenar los datos para poder registrarnos.

- Su e-mail: tendremos que introducir su e-mail para mera comprobación. Éste tiene que ser real ya que sino no podrás conectarte al Chat.

- Si queremos que se muestre en el Chat nuestro e-mail privado, tendremos que seleccionar la casilla de verificación de “mostrar públicamente su e-mail”.

➢ Después de rellenar toda la ficha de “Registro de Usuario”, tendremos

que pulsar en el botón .

➢ Nos aparecerá esta ventana , que nos informa de que hemos sido registrados correctamente.

➢ Pulsamos el botón para poder volver a la página principal y entrar en el Chat.

➢ Al volver a la página principal, se rellena automáticamente el nombre de usuario y contraseña con los datos con los cuales nos hemos registrado.

- En nombre de usuario: tendremos

que escribir el nombre por el cual

vamos a identificarnos en el Chat.

En este caso vamos a inscribirnos

con el nombre de “diseño_tu

nombre”

- Su contraseña: será la contraseña

que elijamos para introducirnos y

que otro usuario no pueda utilizar

nuestro nombre de usuario. La

contraseña que vamos a utilizar

será “tucursoweb”.

- Nombre: tendrás que añadir el

nombre real o ficticio que tengas.

- Apellido: tendrás que añadir el

apellido real o ficticio que tengas.

- Género: Elegir entre “Masculino” o

“Femenino”


69

➢ En la parte inferior de la pantalla, nos aparecerá los siguientes datos:

- “Salas por defecto”: si pulsamos en la fecha se despliega las salas en las cuales podemos introducirnos. En nuestro caso vamos a seleccionar “MyRoom1”.

- “Salas públicas creadas por usuarios”: se despliega un submenú en donde podemos introducirnos en salas creadas por los propios participantes del Chat. Pero como este es un Chat del curso no aparecerá ninguna sala creada.

- “Crear su propia sala”: podremos crear nuestra propia sala que puede ser “Pública” o “Privada”.

➢ Una vez seleccionada la sala a la que queremos tener acceso,

pulsaremos en el botón de .


➢ En esta nueva pantalla veremos los usuarios que están conectados en nuestra sala. Esto se puede ver en la parte central superior de la pantalla.


70

➢ Si queremos contestar a un usuario o darnos a conocer tendremos que escribir el texto en la zona inferior de la pantalla.

➢ Una vez escrito el texto, tendremos que pulsar en el botón para verificar el contenido y que aparezca en pantalla para que pueda ser visto por otros usuarios que estén conectados en el momento.

➢ Si queremos salir el Chat tendremos que pulsar en la opción que está en la parte superior derecha de la pantalla.


71


1. Un chat es ...

a) una conversación a través del ordenador en tiempo real

b) una conversación escrita

c) una relación con personas desconocidas

d) una forma de comunicación entre iguales

2. En un chat puedes establecer contacto con ....)

a) cualquiera

b) solo con personas ya registradas

c) solo con adultos

d) solo con personas integrantes de un grupo muy definido

3. El chat en educación es ...

a) imprescindible

b) importante en determinados tipos de educación

c) absolutamente inútil

d) necesario siempre que hablemos de educación a distancia

4. Al chatear nos identificamos por ...

a) nuestro nombre y apellidos

b) un alias o “nick”

c) la IP de nuestro ordenador

d) la firma electrónica

5. Para chatear necesitamos ...

a) un ordenador con conexión a Internet

b) un programa específico

c) una cuenta de correo electrónico



72

TEMA 8: COMO TRABAJAR CON ARCHIVOS FTP

8.1. Crear una carpeta en nuestro ordenador


8.3. Instalar el programa CORE FTP


8.5. Trabajar con el programa CORE FTP


8.7. Acceder a un espacio web


8.9. Descargarnos el archivo ftp.htm



Primero es necesario explicar que para poder visualizar en Internet cualquier información es necesario que la información esté accesible desde Internet.

¿Cómo se hace accesible la información? ¿Cómo se sube la información a Internet?

Para subir la información a Internet, es necesario usar unos programas o aplicaciones que se conectan a los servidores y permiten copiar la información desde un sistema u ordenador a un servidor que se encuentre permanentemente conectado a Internet.

En este curso vamos a usar un programa llamado FTP (de File Transfer Protocol, protocolo de transferencia de ficheros) para “subir” los documentos, como imágenes o páginas webs, desde nuestro ordenador a un servidor (en nuestro caso cursos.anfap.com)

8.1. CREAR UNA CARPETA EN NUESTRO ORDENADOR

Lo primero que hay que comprender es que debemos trabajar en nuestro ordenador, teniendo una carpeta en donde se irán guardando todos los ficheros, que posteriormente podremos subir a programas específicos para ficheros FTP.

En el apartado siguiente se expone un ejemplo paso a paso para su fácil realización y que se tendrá que realizar para poder guardar las actividades en su lugar correcto.

ftp://ftp.htm/


73

Vamos a proceder a crear la carpeta, y para ello seguiremos los siguientes pasos:

➢ Hacemos doble clic en el icono de que se encuentra

dentro del botón

➢ Se nos abrirá una nueva ventana en donde tendremos que elegir la unidad en donde crearemos la carpeta.

➢ Pulsamos doble clic en la unidad en donde guardaremos nuestra carpeta.

➢ Se nos abrirá una ventana nueva.

➢ Tendremos que crear una carpeta en esta ventana, para ello tendremos que ir al panel de tareas que se encuentra en la parte derecha de la pantalla.

➢ Pulsar en la opción .

➢ Escribir el nombre por el cual identificaremos a nuestra carpeta.

➢ Pulsar la tecla Enter para verificar que es correcto nuestro nombre.

➢ Ahora, lo que queremos es crear una subcarpeta dentro de la carpeta que acabamos de crear, para ello pulsar doble clic encima de la carpeta, y nos aparecerá una ventana en blanco.

➢ Pulsar en el panel de tareas, poner el nombre por el cual identificaremos a la subcarpeta, pulsar la tecla “Enter” para poder verificar que el nombre es correcto.

➢ Ya tendríamos las carpetas creadas para poder guardar todas las actividades en ella.


Lo primero que hay que comprender es que debemos trabajar en nuestro ordenador, teniendo una carpeta en donde se irán guardando todos los ficheros, que posteriormente podremos subir a programas específicos para ficheros FTP.


74

Vamos a proceder a crear la carpeta, y para ello seguiremos los siguientes pasos:

➢ Hacemos doble clic en el icono de que se encuentra

dentro del botón

➢ Se nos abrirá una nueva ventana.

➢ Pulsamos doble clic encima con el botón izquierdo del ratón en la unidad de disco duro en donde guardaremos nuestra carpeta. En nuestro caso pulsar sobre

el icono de .

➢ Se nos abrirá una ventana con varios ficheros.

➢ Tendremos que crear una carpeta en esta ventana, para ello tendremos que ir al panel de tareas que se encuentra en la parte derecha de la pantalla.

La unidad en donde tendremos que crear la

carpeta será DISCO

LOCAL (C:) independientemente

como se denomine ya que en algunos equipos al

disco local se le llama también EQUIPO.


75

➢ Pulsar en la opción .

➢ Aparecerá una nueva carpeta en donde tendremos que escribir “curso_web”. Pulsar la tecla Enter para verificar que es correcto nuestro nombre.

➢ Nos quedará así:

➢ Ya tenemos la carpeta creada en donde se irán guardando tanto las tareas que se deberá enviar al tutor como los ejemplos guiados del temario.

8.3. INSTALAR EL PROGRAMA CORE FTP

Aunque existen varios programas que podríamos utilizar vamos a utilizar

para nuestro trabajo el programa.

Debe existir una conexión bidireccional y directa para hacer la transferencia de ficheros entre nuestro ordenador y el servidor.

FTP son las siglas inglesas de File Transfer Protocol, que significan Protocolo de Transferencia de Ficheros, que nos permiten conectar nuestro ordenador con el servidor y enviarle o recibir ficheros.


76

Para realizar la subida y bajada de ficheros (FTP) utilizaremos programas específicos que nos permiten esta acción, por ejemplo Cute FTP, WS FTP, Core FTP o programas de edición de archivos HTML que también permiten la transferencia FTP como Frontpage, Dreamweaver, Kompozer, …

El proceso normal es el siguiente: nosotros elaboraremos un archivo con código Html en nuestro ordenador (trabajando en local) y cuando esté terminado lo llevaremos al servidor para que pueda verse en Internet. A este proceso le llamaremos “subida de ficheros”. Pero al igual que puedo hacer esta operación, también puedo hacer la contraria, es decir, puedo pasar un fichero del servidor a mi ordenador, lo que llamaremos “bajada de ficheros”.

Vamos ver el veremos el programa de FTP recomendado, el Core FTP, por su gratuidad. Lo podemos descargar desde la siguiente dirección de Internet: http://www.coreftp.com/download.html

➢ Nos aparecerá una nueva ventana y tendremos que pulsar en

del apartado Core FTP 2.0 : free version, ya que es una versión gratuita para poder trabajar en ella.

➢ Nos aparecerá esta nueva ventana en donde tendremos que pulsar en

el botón para que nos guarde el programa en nuestro PC y poder utilízalo siempre que queramos.

➢ Aparecerá una ventana en donde tendremos que seleccionar la ruta en donde quedará guardado. Recomendado la unidad de disco duro o local.

➢ Para ello, pulsar doble clic encima de la unidad de disco duro o local (C:) de nuestro ordenador. Aparecerá otra ventana en donde aparecerán más ficheros. En “Nombre” dejar el predeterminado por el programa.

➢ Una vez guardado vamos a ejecutarlo. Nos aparecerá un icono en el escritorio automáticamente, o si no es el caso, tendremos que abrir Mi PC, doble clic encima del icono de mi disco local o duro (C:), y pulsar doble clic encima del programa.

➢ Nos aparecerá una nueva ventana que nos indica que empieza la instalación del programa.

➢ A continuación nos aparecerá una pantalla en donde nos informa que se

va a instalar Core para ello tendremos que pulsar en el botón para pasar a la ventana siguiente del asistente de instalación.

http://www.coreftp.com/download.html


77

➢ Nos aparecerá otra ventana informándonos de la ley de privacidad.

Pulsar el botón para pasar a la ventana siguiente del asistente de instalación.

➢ Nos aparecerá una nueva ventana en donde nos propone una ruta

donde guardar el programa ejecutado. Pulsar el botón para pasar a la ventana siguiente del asistente de instalación.

➢ Si queremos cambiar la ruta propuesta por el programa, sólo tendremos

que pulsar en el botón e introducir la ruta que necesitemos o queramos.

➢ Nos aparecerá otra ventana en donde nos indica las condiciones de instalación.

➢ Tendremos que pulsar en la opción . Pulsar el botón

para pasar a la ventana siguiente del asistente de instalación.

➢ En esta nueva ventana, nos permite cambiar el nombre del programa por otro si se quieres, se recomienda dejar el propuesto por el programa. Pulsar el

botón para pasar a la ventana siguiente del asistente de instalación.

➢ En esta última pantalla, nos indica que ya estamos de acuerdo con

todas las pantallas anteriores. Por lo que debemos pulsar el botón para continuar con la instalación.

➢ Nos aparecerá automáticamente la instalación del programa, y si ésta se ha realizado correctamente, nos aparecerá esta nueva ventana.

➢ Pulsar el botón para terminar con la instalación.


En este apartado vamos a realizar los pasos detalladamente de la instalación de CORE FTP.

➢ Lo primero sería tener conexión a Internet y verificar su funcionamiento.


78

➢ Escribiremos la dirección del programa que vamos a descargar para poder trabajar con estos ficheros específicos. En nuestro caso vamos a trabajar con…


➢ Nos aparecerá esta pantalla:

➢ Tendremos que pulsar en del apartado Core FTP 2.0 : free version, ya que es una versión gratuita para poder trabajar en ella.

Nos aparecerá esta nueva ventana en donde tendremos que pulsar en el

botón para que nos guarde el programa en nuestro PC y poder utilízalo siempre que queramos.

➢ Aparecerá una ventana en donde tendremos que seleccionar la ruta en donde quedará guardado. Recomendado la unidad de disco duro o local.



79

➢ Para ello, pulsar doble clic encima de la unidad de disco duro o local (C:) de nuestro ordenador. Aparecerá otra ventana en donde aparecerán más ficheros. En “Nombre” dejar el predeterminado por el programa.

➢ Una vez guardado vamos a ejecutarlo. Nos aparecerá un icono en el escritorio automáticamente, o si no es el caso, tendremos que abrir Mi PC, doble clic encima del icono de mi disco local o duro (C:), y pulsar doble clic encima del programa.

➢ Nos aparecerá una nueva ventana que nos indica que empieza la instalación del programa.

➢ A continuación nos aparecerá una pantalla en donde nos informa que se

va a instalar Core para ello tendremos que pulsar en el botón para pasar a la ventana siguiente del asistente de instalación.


80

➢ Nos aparecerá otra ventana informándonos de la ley de privacidad.

Pulsar el botón para pasar a la ventana siguiente del asistente de instalación.


81

➢ Nos aparecerá una nueva ventana en donde nos propone una ruta

donde guardar el programa ejecutado. Pulsar el botón para pasar a la ventana siguiente del asistente de instalación.

➢ Si queremos cambiar la ruta propuesta por el programa, sólo tendremos

que pulsar en el botón e introducir la ruta que necesitemos o queramos.

➢ Nos aparecerá otra ventana en donde nos indica las condiciones de instalación.


82

➢ Tendremos que pulsar en la opción . Pulsar el botón

para pasar a la ventana siguiente del asistente de instalación.

➢ En esta nueva ventana, nos permite cambiar el nombre del programa por otro si se quieres, se recomienda dejar el propuesto por el programa. Pulsar el

botón para pasar a la ventana siguiente del asistente de instalación.

➢ En esta última pantalla, nos indica que ya estamos de acuerdo con

todas las pantallas anteriores. Por lo que debemos pulsar el botón para continuar con la instalación.


83

➢ Nos aparecerá automáticamente la instalación del programa, y si ésta se ha realizado correctamente, nos aparecerá esta nueva ventana.

➢ Pulsar el botón para terminar con la instalación.


84

8.5. TRABAJAR CON CORE FTP

Vamos a ver el funcionamiento del programa Core FTP brevemente, ya que en el apartado siguiente se va a exponer detalladamente cada paso que se deberá seguir para trabajar con el programa.

El programa presenta una pantalla dividida en dos partes. En la parte de la izquierda se presentan los archivos que tenemos en local y, en la parte de la derecha aparecen los archivos que tenemos en el espacio web en nuestro servidor.

También deberemos indicar cual es la ruta de nuestro ordenador donde tendremos guardados los archivos que queremos subir y/o bajar de nuestra web y, para pasar archivos de nuestro ordenador al servidor, utilizaremos la flecha y para pasar archivos del servidor al ordenador utilizaremos la flecha


85


En este apartado vamos a ver cada parte de la ventana para saber utilizar a la perfección dicho programa.

➢ Lo primero que tenemos que hacer es abrir el programa. Para ello ir al

botón y pulsar en , se despliega un

submenú en donde tendremos que elegir y dentro del submenú

que se despliega la opción .

➢ Nos aparecerá una ventana en donde nos informa si queremos

registrarnos. Pulsar el botón de .

➢ Se abrirá una ventana nueva:


86

➢ En la parte de la izquierda:

… nos aparecerá todas los archivos que tenemos en local, es decir, en nuestro ordenador.

➢ En la parte de la derecha:

… tendremos todos los archivos que tenemos en nuestro espacio web en el servidor.


87

8.7. ACCEDER A UN ESPACIO WEB

En este apartado vamos a explicar como poder acceder a un espacio web desde el cual vamos a bajar y subir ficheros para poder trabajar en el servidor. En el apartado siguiente se explicará detalladamente un ejemplo guiado para poder acceder a un sitio.

Para crear una sitio pulsaremos el siguiente botón que encontramos en la esquina superior izquierda y se nos abrirá la siguiente pantalla

Aquí el usuario rellenará los campos señalados en rojo donde incluirá el nombre que le quiera dar al sitio que está creando, el nombre del servidor, el usuario y la contraseña.

También deberemos indicar cual es la ruta de nuestro ordenador donde tendremos guardados los archivos que queremos subir y/o bajar de nuestra web y, para pasar archivos de nuestro ordenador al servidor, utilizaremos la flecha y para pasar archivos del servidor al ordenador utilizaremos la flecha


88

8.8. ESPACIO WEB EN 000webhost.com

Para poder utilizar CoreFTP necesitamos tener un espacio que permite conexiones ftp - por ejemplo ofrecido por el servicio de hosting: 000webhost

El procedimiento para crear una cuenta en el servicio 000webhost es el siguiente:

Primero entramos en la página http://www.000webhost.com/. Aparecerá la siguiente pantalla:

Para crear una cuenta hay que presionar el botón Sign Up!. En la siguiente pantalla

tendremos que rellenar las casillas con el nombre de subdominio que vamos a crear, nombre del usuario, email, contraseña y un código de 5 números. Nosotros en el curso elegimos la opción recomendada que es crear un subdominio en el

http://www.000webhost.com/


89

dominio proporcionado por 000webhost.com. Como el nombre de subdominio se debe usar un nombre personal. Por ejemplo: webdepedrogarcia que será la parte de la dirección de su sitio web. Con el dominio webege.com y subdominio webdepedrogarcia la dirección completa de sitio web sería: www.webdepedrogarcia.webege.com

Para poder seguir hay que aceptar los terminos de servicio.

Con todos los campos rellenados podemos presionar el

botón .

Nombre de subdominio

Nombre del usuario

Email

contraseña

código


90

Tras presionar el botón se envíara a la dirección indicada anteriormente un email de bienvenida con los datos de la cuenta:

A continuación nos aparecerá la siguiente pantalla:

La cuenta debe ser activada dentro de 24 horas. La cuenta debe estar activada dentro de 24 horas.

A veces nuevo subdominio no se crea automaticamenta. Entonces hay que

presionar el botón . Nos aparecerá la siguiente pantalla:


91

Tenemos que elegir la opción recomendada que es elegir un subdomini gratuito que nos ofrece 000wehost.com (la casilla en el medio) y elegir la contraseña y

presionar el botón Setup New Account. Entonces se nos envíara un email con la

confirmación de todos los datos necesarios para manejar la cuenta.

Cuando la cuenta esta activada en la columna Status podemos ver la palabra Active y en la columna Action aparece un link que dirige a Panel de Control.

En el email que nos al mismo tiempo obtenemos los datos detallados de la cuenta. Entre otras informaciones podemos encontrar las que se refieren a la conección ftp cuales podemos usar para conectarse al servidor con el uso del programa CoreFTP.


92

Los ficheros podemos también subir en nuestro sitio web a través de panel de control.

Para entrar en el panel de control de nuestro sitio web abrimos la página: http://members.000webhost.com donde hay que introducir email que proporcionamos durante la registración, la contraseña y un código de 5 numeros.

Para confirmar los datos de la cuenta ha que pinchar en Submit

Para acceder al panel de control tenemos que pinchar en: Go to CPanel que tiene

la siguiente apariencia:

http://members.000webhost.com/


93

Para poder subir los ficheros entramos en File Manager pinchando en el siguiente

ícono:

Los ficheros de páginas web subimos en el directorio ‘public html’ donde entramos pinchando en el enlace con el mismo nombre. Luego hay que presionar el botón

. Encontrar en nuestro ordenador los ficheros a subir y confirmar la subida.


Para que podamos acceder al espacio web, vamos a seguir los siguientes pasos:

➢ Tendremos que pulsar en el “Menú Sites”

➢ Seleccionar en el submenú que se despliega la opción

.

➢ Se abrirá la siguiente pantalla en donde tendremos que introducir los datos que recibimos en el email de activación de la cuenta.


94

Los datos correspondientes son:

Site name: podemos introducir cualquier nombre

Host/IP/URL: FTP Hostname

Usuario: FTP Username

Contraseña: FTP Password

FTP Hostname, FTP Username y FTP Password son los datos que recibimos en el email de activación de la cuenta en el servicio de hosting 000webhost.com.

➢ Pulsar el botón para conectarnos al servidor.

➢ Nos aparecerá en la parte de la derecha todos los archivos que estén a nuestra disposición del servidor.

Una vez que estamos conectados con el servidor podemos trabajar para subir y bajar ficheros.


95

8.10. DESCARGARNOS LA PÁGINA “ftp.com”

Vamos a realizar los pasos para poder bajar y subir ficheros del servidor ya que hemos accedido a un sitio.

En el siguiente apartado veremos detalladamente todos los pasos que tendréis que realizar para poder subir y bajar un fichero.

Vamos a detallar paso a paso todo lo que tendréis que realizar para poder subir y bajar los ficheros que necesitáis para realizar la actividad perteneciente a la tarea 1 y que posteriormente se tendrá que enviar al tutor para su revisión y comprobación que esta actividad ha sido realizada.

Vamos realizar los pasos necesarios para descargarnos la página ftp.htm que necesitamos para realizar las tareas del curso.

➢ Lo primero que tenemos que hacer es crear una carpeta donde guardaremos la página. Por ejemplo ‘curso_web’ en el disco C:.

➢ Luego tenemos que entrar en la página: http://magister.com.es/cursoweb/ftp.htm con uno de los navegadores, por ejemplo Internet Explorer.

➢ Después de este paso, lo que debemos realizar es guardar la página en

nuestro ordenador: Elegimos la opción Guardar como... del menú Archivo,

elegimos la carpeta en nuestro ordenador donde guardaremos la página y

presionamos el botón Guardar.

➢ En el siguiente paso tenemos que abrir el programa CoreFTP y establecer la conección con el servidor. Introducimos los datos de la conección recibidos en el email de la confirmación de la cuenta y presionamos el botón:

Connect.

➢ Lo que tenemos que hacer es encontrar la carpeta con la página en la parte izquierda del programa.

➢ Después de este paso en la parte izquierda te debe quedar algo parecido a esto (en vez del nombre ‘imagenes’ puedes encontrar la carpeta ftp_archivos):

ftp://ftp.com/

ftp://ftp.htm/

http://213.254.218.44/cursoweb/ftp.htm


96

Ahora es necesario subir el fichero ftp.htm a un directorio que vamos a crear con nuestro usuario.

➢ En la parte Derecha tendremos que entrar en el directorio public_html.

➢ Pulsamos en “Make Directory” para poder crear el directorio.


➢ Escribir el usuario que te proporcionó el curso para poder crear el directorio (en el ejemplo vamos a suponer que el usuario es web0000):

➢ Pulsar el botón para aceptar los cambios.

➢ Ya tendremos creado nuestro directorio, y tenemos que buscarnos dentro del listado de la parte derecha, dentro de los directorios del servidor y pulsar doble clic encima para abrirlo.

➢ Aparecerá ya que no tenemos nada introducido dentro vacío.

➢ Una vez que está abierto, vamos a proceder a subir el fichero ftp.htm

➢ Para ello seleccionar dentro de nuestra carpeta C:\ curso_web/ el fichero

ftp y el directorio con imágenes (tendremos que seleccionar de nuestro equipo, por ello seleccionar el fichero en el cuadro de la izquierda).

ftp://ftp.htm/

ftp://ftp.htm/


97

➢ Como ya tenemos seleccionado el directorio en el servidor en donde

vamos a subir el fichero, pulsar la flecha “Upload” para subir al servidor el fichero.

Ahora debemos comprobar que realmente se ha subido bien y que podemos verlo desde Internet. Para ello tenemos que abrir una ventana de Internet (por ejemplo el Internet Explorer) e introducir la URL o dirección en la que teóricamente se encuentra el fichero que hemos subido.

Si el nombre de servidor (nuestro subdominio creado en el servicio de hosting 000webhost.com) es el siguiente: www.webdepedrogarcia.webege.com

Y que nuestro usuario (para este ejemplo) es web0000

Y que el fichero o página web que vamos a ver es ftp.htm pero las imágenes no se verán ya que no las hemos subido.

Entonces deberíamos poner lo siguiente en el navegador o explorador de Internet:

www.webdepedrogarcia.webege.com/web0000/ftp.htm

O también podríamos poner:

http://www.webdepedrogarcia.webege.com/web0000/ftp.htm

Recuerda que en lugar de web0000 debes poner el nombre del directorio que hayas creado y en lugar de cursodisenoweb.webege.com debes poner el nombre de subdominio que hayas creado en el servicio de hosting 000webhost.com.

Esa dirección o URL será la que deberás indicar en el último apartado de la tarea1.

Si no funcionase, seguramente se haya escrito algo mal o no se han subido correctamente los ficheros, recomendamos que se inicien los pasos desde cero para asegurar que se ha hecho todo correctamente.

http://www.webdepedrogarcia.webege.com/

ftp://ftp.htm/


http://cursodisenoweb.webege.com/web0000/ftp.htm

http://cursodisenoweb.webege.com/web0000/ftp.htm


98

8.12 AUTOEVAULACIÓN

1. Para crear una subcarpeta hay que pulsar en…

a. Abrir la carpeta y pulsar en el panel de tareas

b. Pulsar en el panel de tareas

c. Menú Insertar / subcarpetas.

2. Las siglas FTP significan…

a. File Transform Protocol

b. Protocolo de Transferencia de Ficheros

c. Ambas son ciertas

3. Los ficheros de nuestro ordenador se conocen como…

a. Trabajar en local

b. Trabajar en servidor

c. Ninguna es cierta

4. Dentro del Core FTP ¿dónde encontramos los ficheros del servidor?

a. En el panel de la izquierda

b. En el panel de la derecha

c. No aparecen

5. ¿Podemos subir y bajar del servidor ficheros pertenecientes a nuestro PC?

a. Sí

b. No


99

ENTREGA DE LA TAREA 1: 1. Ejercicio de herramientas didácticas en Internet Busca en las páginas del CNICE una aplicación que se llama “Mecánica básica” y envía al tutor la URL de la página. Para facilitarte la búsqueda te podemos decir que puedes llegar a ella entrando en la sección de “Profesores” o en la sección de “Jóvenes” 2. Ejercicio de creación de un blog Debes crear un blog con una temática referida al curso y añade una entrada comentando algún aspecto que quieras destacar del curso. Debes identificarte con el nombre de usuario que tienes en el curso. Para ello puedes, por ejemplo, utilizar Blogger siguiendo los pasos que se detallan en el apartado anterior. 3. Ejercicio de participación en un foro Como ejercicio de esta parte deberás realizar una intervención en el foro llamado “Diseño web y herramientas de Internet”, en el tema llamado “área de participación en foros”. El foro del curso podrás encontrarlo en la dirección de Internet: http://213.254.218.44/foros/ En este foro podrás entrar sin registrarte, como participante anónimo, o registrarte como participante del curso. Para poder superar la prueba relativa a esta actividad deberás registrarte en este foro indicando un nombre de usuario (el utilizado en el curso), una contraseña y una dirección de correo electrónico y realizar una intervención en el foro del curso Las tareas englobadas dentro de la Actividad 1 deben entregarse conjuntamente, espera a tener todas realizadas para enviárselas al tutor. 4. Ejercicio de participación en un Chat Como ejercicio de participación en un Chat debes establecer una sesión de Chat con un compañero del curso. Para ello debes ponerte de acuerdo con él en qué momento establecer la conexión. Puedes usar el foro para quedar

a una hora en el chat. Debes entrar en la aplicación “on line” , chatear con el compañero del curso y, posteriormente copiar y pegar tu conversación en un archivo de texto y subirlo a la plataforma para que el tutor pueda comprobar que has realizado la actividad. Importante: Los alumnos deberán entregar conjuntamente mediante la web al tutor del curso todas las actividades de la tarea 1. La intervención del foro y la conversación del Chat se pueden copiar en un archivo de texto y enviarla conjuntamente al tutor.


100

BREVE EXPLICACIÓN DE LA TAREA 2: En esta segunda tarea vamos a crear una Página Web Básica (obligatoria) en donde aplicaremos los conocimientos adquiridos en el curso. Opcionalmente se podrá realizar una Página Web más avanzada si el alumno lo encuentra oportuno. Cada alumno deberá realizar una web personal que esté relacionada con su especialidad y que se pudiera utilizar con los alumnos en clase. Posteriormente la alojará en su espacio web e indicará al tutor su URL para que pueda corregirla. La web básica constará de una página y deberá contener unos elementos mínimos que se indican a continuación: - Tres enlaces a páginas externas (hipervínculos absolutos) - Un enlace a una dirección de e-mail (correo electrónico) - Tres imágenes, una de las cuales deberá ser un hipervínculo (es decir, al pinchar en la imagen se deberá acceder a otra página) - Un vínculo relativo a la página (por medio de un ancla para subir desde la parte inferior de la página o bajar desde la parte superior) - Texto con una extensión de al menos 200 palabras, con diferentes formatos y tamaños. Esta web básica será la tarea 2 y el proyecto final y al superar la tarea 1 o la tarea 2 (que forma parte del proyecto final) se habrá superado el curso. Una vez realizada con éxito la primera página, se recomienda hacer una web con, al menos, tres páginas, con enlaces entre ellas y un poco de mayor complejidad.


101

TEMA 9: LENGUAJES UTILIZADOS PARA DISEÑO Y PROGRAMACIÓN DE PÁGINAS WEB

9.1. Extensiones de archivos creados

9.2. Otros programas utilizados


9.1. EXTENSIONES DE ARCHIVOS CREADOS

El lenguaje más común para la creación de páginas web es el HTML. Este lenguaje se escribe con etiquetas en forma de código. La creación del archivo puede hacerse de dos formas distintas:

a) escribiendo directamente el código, lo que permite hacer gran cantidad de cosas pero exige un conocimiento profundo del lenguaje, o

b) utilizando programas específicos que, mediante iconos permiten hacer tareas como insertar texto, imágenes, hacer hipervínculos, maquetar, etc. De estos programas, los más conocidos son:

Frontpage, de Microsoft →

Dreamweaver, de Macromedia →

En ambos casos se nos generará un archivo con extensión .htm o .html.

Aunque ambos programas se pueden utilizar para la elaboración de páginas web, Dreamweaver es mucho más completo y versátil que Frontpage. Estos programas son de pago y exigen un ordenador potente para poder usarse fácilmente.

Para la realización de este curso, se ha elegido un programa gratuito, y muy completo que permite realizar páginas de forma sencilla. Vamos a utilizar el programa KompoZer y todas las explicaciones irán orientadas a este programa.

En cualquier caso, las tareas que se solicitan se pueden realizar con cualquier programa de diseño web, por lo que si el estudiante está acostumbrado a usar otro programa, puede usarlo para la realización de las páginas.


102

9.2. OTROS PROGRAMAS UTILIZADOS

Existen muchos programas que nos permiten gestionar el código HTML mediante WYSIWYG es decir, que nos permiten realizar algo en código HTML, sin necesidad de teclear el código, que será lo que realmente se verá. Entre los programas más comunes está Frontpage y Dreamweaver.

Frontpage es un editor de páginas web de la empresa Microsoft, formando parte del paquete Office que ya ha quedado algo obsoleto.

Dreamweaver es un editor de páginas web creado por Macromedia, que actualmente ha sido absorbida por Adobe. Es el editor de web más utilizado con diferencia. Se completa con programas como Flash, fireworks o Freehand. Sus versiones más conocidas han sido la MX 2004, la versión 8 y actualmente la CS3.

KompoZer es un editor gratuito muy usado y muy indicado para la iniciación en la creación de páginas web por su sencillez de uso.

Otros programas de uso complementarios para páginas web: Flash, Photoshop, Hot Potatoes, etc. Características generales de cada uno de ellos.

Complementariamente a Dreamweaver se pueden utilizar otros tipos de software que permite mejorar el aspecto y las utilizaciones de una página web. Entre ellos destacamos los siguientes:

a) Flash: es un programa de Macromedia que permite hacer botones, animaciones, etc. Con Flash se crean archivos modificables con extensión .fla y archivos no modificables, que son los que ofrecen la animación y que tienen extensión .swf. Para poder ver la acción que tienen estos archivos es necesario tener instalado, al menos, el plug-in de Flash. También se pueden crear archivos .exe que se ejecutan sin la necesidad del plug-in. En cualquiera de estos casos, el archivo .swf o el archivo .exe se insertan en una página html.

b) Photoshop o cualquier otro programa de edición de imágenes que nos permite editar imágenes para poder modificarlas, pasarlas a formatos web según nuestras necesidades y obtener así archivos para web, con extensiones .gif ó .jpg.

c) Hot Potatoes, que nos permite crear cuestionarios, sopas de letras, crucigramas y otro tipo de actividades, en código HTML que podemos rellenarlos e, incluso, corregirlos automáticamente.


103

9.10 AUTOEVALUACIÓN.

1. ¿Cuál es el lenguaje para la creación de Páginas Web?

a. HTML

b. Lnk

c. Ninguno es cierto

2. ¿Qué otros programas se pueden utilizar para diseñar Páginas Web?

a. Dreamweaver

b. CorelDraw

c. PhotoShop

3. ¿En que programa podemos crear animaciones?

a. CorelDraw

b. Flash

c. PhotoShop

4. ¿Qué programa nos permite modificar fotografías?

a. CorelDraw

b. Flash

c. PhotoShop

5. ¿Cuál de estos programas se utilizan para diseñar Páginas Web de manera más completa?

a. Dreamweaver

b. KompoZer

c. FronPage


104

TEMA 10: DIRECCIÓN DE URL

10.1. Concepto

10.2. Caracteres que no deben utilizarse

10.3. Estructura de una dirección web.


10.1. CONCEPTO

La URL son las siglas de Uniform Resource Locutor, es decir, Localizador Uniforme de Recursos, que son el conjunto de caracteres que colocamos en la barra del navegador cuando queremos entrar en una página web. Como ejemplos de URL podemos encontrar: http://es.wikipedia.org/wiki/Portada, http://www.terra.es/, http://www.gruposantander.es/ o http://www.cnice.mec.es/.

Podemos optar por dos formas de colocar la URL en el navegador, son las siguientes:

a) escribiendo con el teclado toda la dirección en la barra de navegación. En este caso deberemos tener cuidado de introducir correctamente todos los caracteres para que se pueda cargar la página web.

b) utilizando “Favoritos”, es decir, aquellas URL que utilicemos frecuentemente, las “guardaremos” en Favoritos para pinchar directamente en ellas y no tener que teclearlas cada vez que queramos visitar su página web

10.2. CARACTERES QUE NO DEBEN UTILIZARSE

Cuando guardemos nuestras carpetas, subcarpetas y archivos deberemos tener mucho cuidado de no utilizar algunos caracteres ya que pueden dar problemas a la hora de cargar la página web. Estos caracteres son los siguientes:

- Símbolos raros como: ñ, @, /, %, el punto(.), la coma (,), etc.

- Letras mayúsculas

- Espacios en blanco, en su caso podemos utilizar el guión bajo (_)

- Tildes

En cambio, si pueden utilizarse números.

http://es.wikipedia.org/wiki/Portada

http://www.terra.es/

http://www.gruposantander.es/

http://www.cnice.mec.es/


105

El no uso de estos caracteres es muy importante ya que, si los usamos, se nos pueden producir errores que serán muy difíciles de localizar a la hora de que el navegador cargue la página.

10.3. ESTRUCTURA DE UNA DIRECCIÓN WEB

La estructura de una URL es la siguiente: primero se nombra el servidor que incluye a la página que estamos buscando, después viene la estructura de carpetas y subcarpetas donde se encuentra la página que buscamos y, por último, el nombre del archivo que buscamos, con la extensión .htm o .html.

A continuación vemos un ejemplo de esto:

Esta URL estará en el servidor del CNICE (Ministerio de Educación) y dentro de él en la carpeta “recursos” y dentro de esta en la subcarpeta “bachillerato”, y dentro de esta en la subcarpeta “tecnología”, y dentro de esta en la subcarpeta “manual” y dentro de esta llamamos al archivo “index.htm”.

Esta es la forma de llamar a un archivo. Esto deberemos tenerlo en cuenta cuando elijamos la estructura de carpetas, subcarpetas y archivos de nuestra web.

Se aconseja nombrar “index.htm” al archivo que queremos que sea la página principal o portada de nuestra web, ya que este es el nombre que los navegadores cargarán por defecto.

Servidor Carpeta: recursos

Carpeta: bachillerato

Carpeta: tecnologia

Carpeta: manual

Archivo: index.html

http://w3.cnice.mec.es/recursos/bachillerato/tecnologia/manual/index.html


106

10.4. AUTOEVALUACIÓN.

1. ¿Qué significa URL?

a. Uniform Resource Locutor

b. Localizador de uniforme de recursos


2. ¿Qué caracteres no se pueden utilizar como nombre de una página Web?

a. ñ, @, /

b. Nombre en mayúsculas


3. ¿Qué estructura tiene una URL?

a. servidor, página que estamos buscando, carpeta y/o subcarpeta, el archivo y la extensión.

b. servidor, carpeta y/o subcarpeta, el archivo y la extensión.

c. Servidor, carpeta y extensión.


107

TEMA 11: INTRODUCCIÓN A LOS PROGRAMAS DE DISEÑO WEB

Este curso ha sido diseñado para familiarizar al alumno con las bases fundamentales del diseño web.

Antiguamente las páginas Web se diseñaban mediante programación, pero en la actualidad se han creado una serie de programas para diseñar páginas de manera más fácil, apareciendo automáticamente la programación de una página. Esto ha evitado la dura tarea de los programadores y se ha facilitado el trabajo en esta materia.

En este curso vamos a aprender a crear páginas Web utilizando el programa KompoZer para su orientación, pero como hemos indicado hay otros programas que se podrían usar.

Algunos de estos programas que podemos utilizar para diseñar páginas Web son Dreamweaver, Frontpage, GoLive, Namo Web Editor, etc…

108

TEMA 12: INTRODUCCIÓN A LOS COMPONENTES DE UNA PÁGINA WEB

HTML, es un lenguaje diseñado para estructurar textos y presentarlos en forma de

hipertexto, que es el formato estándar de las páginas web.

El HTML puede ser editado con cualquier procesador de texto aunque existen

programas de edición de código HTML. Estos programas se los conoce como

WYSIWYG, es decir, las siglas del inglés, “lo que tu ves es lo que tu obtienes”, esto

es, que lo que tu vas viendo al hacer un archivo es lo que realmente vas a obtener.

El código HTML está formado por etiquetas, que son instrucciones con una señal de

inicio y otra de finalización. Todas las etiquetas de inicio se caracterizan porque van

entre signos de menor que y mayor que (<>) y las de finalización llevan además la

barra del signo de división (</>).

Para ver el código fuente de una página web en Internet Explorer solo tenemos que

ir a Ver/Código fuente y se abrirá una ventana con el código HTML de esa página.

Si queremos ver el código fuente de una página web que estemos diseñando con

KompoZer deberemos pulsan en la parte inferior izquierda de la pantalla en el

apartado: “Código fuente”. Tal y como se muestra en la siguiente imagen:

109

Un ejemplo de código de una página HTML en blanco es el siguiente:

Donde podemos ver las siguientes etiquetas

- <html> como inicio de documento HTML y </html> como fin de ese mismo archivo

- <title> marca el inicio del título y </title> su final

- <head> marca el encabezamiento de la página y su final viene indicado por

</head>

- <body> el inicio del cuerpo del archivo y </body> como el fin

Otras etiquetas son:

- : párrafo nuevo

- : salto de línea forzado

- <TABLE>: comienzo de una tabla (las filas se identifican con <TR> y las celdas

dentro de las filas con <TD>)

- <A>: indica la existencia de un hipervínculo o enlace, dentro o fuera la página web.

Debe definirse el parámetro de pasada por medio del atributo href (ejemplo: <a

href="http://www.google.com">Google</a> se representa como Google)

- <IMG>: indica la existencia de una imagen para mostrarse en el navegador

- : Color del texto, representado por un código hexadecimal. -

: Texto en negrita

- : Texto en cursiva

- : Texto subrayado

http://www.google.com/


110

Si en un momento dado nos interesa podemos colocar el archivo en formato código

y realizar las modificaciones que deseemos en las etiquetas, que se verán

reflejadas en el formato diseño.

De esta forma podremos realizar algunas actuaciones o modificaciones que de otra

manera se hacen muy difíciles de realizar.

No obstante, la manipulación del código o la incorporación de elementos mediante

código requieren un manejo muy fluido del lenguaje HTML.


111

TEMA 13: EL PROGRAMA KOMPOZER

13.1. PASOS PARA DESCARGARNOS EL PROGRAMA DE KOMPOZER.

Vamos a proceder a descargarnos el programa de KompoZer que es totalmente gratuito.

Lo primero que tenemos que hacer es conectarnos a Internet e introducir en la barra de navegación la siguiente dirección www.magister.es/ch el enlace está disponible en la parte inferior de la web:

➢ Se nos abrirá una ventana nueva como la que aparece a continuación:

➢ Pulsar en el botón

➢ Empezará la descarga del programa y una vez descargado comenzará la instalación (también se puede elegir la opción guardar, descargarlo en el escritorio y posteriormente ejecutarlo dándole doble clic)

➢ Nos aparecerá una nueva ventana en donde nos introduce en el programa

http://www.magister.es/ch


112

➢ Pulsar en el botón que es siguiente, para pasar de pantalla y continuar con la instalación.

➢ Nos aparecerá una nueva ventana en donde tendremos que seleccionar que aceptamos los términos (seleccionar “I accept the agreement”)


➢ Nos aparecerá una ventana informándonos de donde se va a guardar el programa, es automático pero si quieres guardarla en otra parte tendrás

que pulsar en el botón de que sería en español “examinar”, y elegir en donde quieres guardarlo.


113


➢ En esta nueva ventana que nos aparece nos informa del nombre que queremos darle al programa, es automático y se recomienda dejar el que aparece.

➢ Pulsar en el botón que es siguiente, para pasar de pantalla y continuar con la instalación

➢ En esta nueva ventana no vamos a seleccionar nada, ya que queremos que nos aparezca el programa tal cual aparece.


114

➢ Pulsar en el botón que es siguiente, para pasar de pantalla y continuar con la instalación

➢ Nos aparecerá la última pantalla para poder iniciar su instalación.

➢ Pulsar en el botón de para iniciar el proceso de instalación.

➢ Una vez finalizado este proceso nos aparecerá la siguiente ventana.

➢ Pulsar en el botón de para cerrar el programa.


115

El programa se ha instalado correctamente pero en inglés, vamos a cambiarlo a español para que nos resulte más fácil.

Para ello vamos a seguir los siguientes pasos:

➢ Descargar el paquete de Idioma Español del enlace que figura en la parte inferior de la web: www.magister.es/ch

➢ Descárguelo en el escritorio ya que lo necesitará en los siguientes pasos.

➢ Dirígete a Tools -> Extensions (Herramientas -> Extensiones si quieres actualizar la traducción).

➢ Pulsa el botón Install (Instalar).

➢ Localiza el XPI descargado en tu disco duro y selecciónalo.

➢ Lee el mensaje del cuadro de diálogo de instalación de software y, una vez termine la cuenta atrás, pulsa el botón Install now.

➢ Una vez instalado, reinicia Nvu/KompoZer para que los cambios de idioma tengan efecto.

http://www.magister.es/ch


116

TEMA 14: PÁGINAS EN KOMPOZER

14.1. CÓMO TRABAJAR EN UNA PÁGINA EN KOMPOZER

Cuando abrimos el programa de “KompoZer”, nos aparecerá esta ventana:

El la página podremos introducir toda clases de objetos, texto... de forma muy parecida a como lo haríamos en un documento de word.

En las barras de herramientas, que se muestran a continuación, podemos encontrar los iconos de las funciones más habituales:

También disponemos de la “Barra de Menús”

.. en donde si pulsamos encima con el botón izquierdo del ratón, nos aparecerán submenús con distintas opciones que podemos utilizar en el programa.


117

En la parte inferior de la ventana, nos aparecerán unas etiquetas.

… esto nos permite tener distintas vistas de la página que estemos creando.

- En “Normal” nos aparecerá tal y como lo estemos creando

- En “Etiquetas HTML” nos aparecerán todos los objetos como en la “vista Normal” pero con etiquetas que identifican a los códigos.

- En “Código Fuente” no aparecerán los objetos, sino el código necesario para crearlos.

- En “Vista preliminar” nos permitirá ver como queda antes de publicarlo y verlo en el Internet Explorer u otro programa de visualización.

Es recomendable guardar frecuentemente la página, ya que el programa nos permite ver la página tal y como se vería en el explorador, si la página no esta guardada previamente no nos permitirá ver la página.

Es imprescindible que cuando escribamos el nombre de la página o creemos directorios, se redacten sin acentos, sin ñ, ni espacios y sin mayúsculas, ya que será más fácil trabajar con las páginas.

Bien MAL

pagina_ejemplo1.htm Página_ejemplo1. htm


118

TEMA 15: GUARDAR PÁGINAS EN KOMPOZER

15.1. Guardar una página nueva

15.2. Guardar una página existente



15.1. GUARDAR UNA PÁGINA NUEVA

Cuando vamos a crear una nueva página, habrá que indicarle donde guardarla para que posteriormente podamos abrirla o actualizarla y verla como quedaría en el explorador.

➢ Pulsar en el “Menú Archivo”

➢ Seleccionar la opción para indicarle donde queremos guardar la nueva página

- Nos aparecerá una ventana en donde tendremos que seleccionar la ruta en donde queremos guardarla y el nombre por el cual la identificaremos a la página

➢ Pulsar el botón de y ya estaría guardada la nueva página dentro de nuestra carpeta.

15.2. GUARDAR UNA PÁGINA EXISTENTE

Cuando abrimos una página que ya existía con anterioridad y realizamos modificaciones, a la hora de guardarla ya no tendremos que indicarle ni donde ni con que nombre.

Los pasos a seguir serían estos:


➢ Pulsar en el “Menú Abrir” para abrir la página que tenemos guardada

➢ Selecciona dentro la página que quieres abrir

➢ Pulsar el botón de “Abrir” para abrir la página en pantalla.


119

➢ Haces las modificaciones que quieras

➢ Ahora vamos a guardar las modificaciones en este documento, para ello tienes que pulsar en el “Menú Archivo”

➢ Seleccionar la opción “Guardar”, se guardará automáticamente sin tener que escribir nada, ya que hemos guardado las modificaciones que hemos realizado sin cambiar ni el nombre ni el sitio en donde está guardada la página.


Vamos a continuación a crear unas páginas y carpetas para saber manejar paso a paso un poquito de kompoZer.


➢ Seleccionar la opción para indicarle donde queremos guardar la nueva página


- En “Guardar en” tendremos que seleccionar la ruta en donde queremos guardarla, que en nuestro caso será “C:/ curso_web

- En “Nombre” se tendrá que escribir el nombre de la página que queremos guardarla. Por ejemplo escribir “pagina_prueba1”

➢ Pulsar el botón de y ya estaría guardada la nueva página dentro de nuestra carpeta.


120

Guardar una página existente

Cuando abrimos una página que ya existía con anterioridad y realizamos modificaciones, a la hora de guardarla ya no tendremos que indicarle ni donde ni con que nombre.

Vamos a realizar un ejemplo para comprobar estos pasos:


➢ Pulsar en el “Menú Abrir” para abrir la página que tenemos guardada

➢ Selecciona dentro de tu carpeta que se encuentra en C:/ curso_web la página con el nombre de “pagina_prueba1”.

➢ Pulsar el botón de “Abrir” para abrir la página en pantalla.

➢ Escribe el siguiente texto en la página que acabamos de abrir: “VAMOS A GUARDAR UN DOCUMENTO GUARDADO CON ANTERIORIDAD”.

➢ Ahora vamos a guardar las modificaciones en este documento, para ello tienes que pulsar en el “Menú Archivo”

➢ Seleccionar la opción “Guardar”, se guardará automáticamente sin tener que escribir nada, ya que hemos guardado las modificaciones que hemos realizado sin cambiar ni el nombre ni el sitio en donde está guardada la página.


121


1. ¿Dónde pulsaremos para guardar las modificaciones que hemos hecho en una página?

a. En Menú Formato / Guardar

b. En Menú Archivo / Guardar

c. Menú Guardar

2. Cuando pulsamos Guardar Como es para…

a. Guardar un documento existente

b. Guardar un documento nuevo

c. Ninguna es correcta

3. Si estamos creando un documento nuevo, deberemos pulsar en…

a. En Menú Archivo / Guardar

b. En Menú Archivo / Guardar como…


122

TEMA 16: VISTA PREVIA EN EL EXPLORADOR.

16.1. Vista previa


16.1. VISTA PREVIA

Kompozer nos permite mediante la opción “visualizar vista en el explorador” ver como nos quedaría la página creada en Internet y como funcionan sus comandos una vez insertados, antes de colgarlos en Internet.

Para ello tendrás que seguir los siguientes pasos:

➢ Teniendo abierta una página, la que estemos diseñando, pulsar en el “Menú Archivo” y seleccionar “guardar” si la página ya está guardada con anterioridad o “guardar como” si no tiene nombre ni ruta (estos puntos están explicados detalladamente en el punto 15.1 y 15.2.)

➢ Una vez guarda la pagina, pulsamos en el “Menú Archivo” y

seleccionamos la opción

También podremos acceder a esta opción pulsando la tecla de función “F5”


La página aparecerá tal y como quedará una vez colgada en Internet.


123


1. ¿Nos permite el programa ver como quedaría la página antes de colgarla en Internet?

a. Sí

b. No

2. ¿Dónde podemos acceder al explorador?

a. Desde Menú Archivo

b. Desde Menú Formato

c. Menú Explorador

3. ¿Qué tecla de función nos permite acceder al explorador?

a. F12

b. F1

c. F5


124

TEMA 17: DESCARGA DE ARCHIVOS

17.1. Como descargarnos las imágenes necesarias para los ejemplos y actividades


17.1. COMO DESCARGARNOS LAS IMÁGENES NECESARIAS PARA LOS EJEMPLOS Y ACTIVIDADES

En las actividades y en los ejemplos prácticos se requieren una serie de imágenes para su realización. Se puede usar cualquier imagen, siempre que su tamaño no exceda los 100kbytes (se pueden usar mayores, pero la página tardaría mucho en cargarse o abrirse)

La recomendación es descargarlas en nuestro equipo de la siguiente manera:

➢ Tendremos que entrar en un “buscador” por ejemplo “google.com”. Escribir la siguiente URL:





125

➢ haga Clic sobre

➢ Añadir un palabra o frase correspondiente a la imagen que queremos buscar, por ejemplo:

➢ Pulsar en el botón para activar la búsqueda.

➢ Nos aparecerá una ventana, con todas las imágenes que aparezcan con este nombre:


126

➢ Seleccionar la imagen que queramos escoger, por ejemplo…

➢ Clic sobre la imagen con el botón derecho del ratón, y se despliega el menú contextual.


127

➢ Seleccionar la opción , nos aparecerá la siguiente ventana

- En “Guardar en”: tendremos que seleccionar la ruta en donde queramos guardarla. En nuestro caso C:/curso_web/

- En “Nombre” escribir el nombre por el cual vamos a identificar a la imagen. En nuestro caso “lobo” o “lobo1” (recomendamos nombres simples y cortos)

MUY IMPORTANTE: Los nombres de las imágenes deben de cumplir las siguientes normas:

Cuando guardemos nuestras imágenes, carpetas, subcarpetas y archivos deberemos tener mucho cuidado de no utilizar algunos caracteres ya que pueden dar problemas a la hora de cargar la página web. Estos caracteres son los siguientes:

- Símbolos raros como: ñ, @, /, %, el punto(.), la coma (,), etc.

- Letras mayúsculas

- Espacios en blanco, en su caso podemos utilizar el guión bajo (_)

- Tildes

➢ Pulsar el botón para que se quede guardada la imagen.

De esta manera podremos localizar todas las imágenes que necesitemos en las actividades y los ejemplos prácticos.


128


1. ¿Desde donde podemos acceder a buscar las imágenes?

a. Google

b. Buscador


2. ¿Para guardar una imagen encontrada pulsaremos en?

a. Botón izquierdo del ratón / guardar imagen

b. Botón derecho del ratón / guardar imagen

c. Doble clic encima de la imagen / guardar imagen

3. ¿Se puede guardar una imagen buscada en Internet en cualquier carpeta de un PC?

a. Sí

b. No


129

TEMA 18: ELEMENTOS DE TEXTO EN UNA PÁGINA WEB

18.1. Escribir texto

18.2. Modificar texto

18.2.1. Tipo de fuente

18.2.2. Tamaño

18.2.3. Color

18.2.4. Estilo

18.3. Alineación del texto

18.4. Viñetas y numeración

18.5. Sangría



18.1. ESCRIBIR TEXTO

KompoZer nos permite introducir texto y modificarlo a nuestro gusto. Para ello tendremos que seguir los siguientes pasos:

Nos fijamos en donde está el cursor de texto y escribiremos lo que queramos. Hay que tener en cuenta en donde se escribe el texto, esto lo explicaremos en el apartado siguiente.


130

18.2. MODIFICAR TEXTO

En este apartado vamos a ver como podemos modificar los formatos del texto para mejorar su presentación.

18.2.1. Tipos de fuente.

Para cambiar las fuentes vamos a explicar dos formas posibles que poder realizar esos cambios.

Forma 1:

➢ Seleccionar el texto que queremos modificar

➢ Pulsar en el “Menú ”

➢ Seleccionar la opción

➢ Se despliega un submenú con todos los estilo de fuentes en donde podremos elegir la que se quiera solo pulsando encima de la fuente elegida.


131

Forma 2ª:

➢ Seleccionar el texto al cual vamos a cambiar el tipo de fuente.

➢ Ir a la barra de herramientas

➢ Pulsar en la flecha que nos aparece en la parte de la derecha y se despliega un submenú con todos los tipos de fuente disponibles.

Nota aclaratoria: Se puede cambiar el tipo de fuente antes o después de escribir el texto, la única diferencia es que si tenemos el texto escrito tendremos que proceder a seleccionar previamente antes de cambiar el tipo de fuente.

18.2.2. Tamaño

Para cambiar el “Tamaño” del texto, tendremos que pulsar en el “Menú

Formato” y seleccionar la opción y se despliega un submenú con los distintos tamaños que nos permite aplicar.

También podemos acceder mediante los iconos “disminuir texto

aumentar texto.


132

18.2.3. Color

Para cambiar el color de la fuente, sólo hay que seleccionar el texto y pulsar

la opción color . Se puede ver que hay dos colores, uno se refiere al texto (el más a la izquierda y arriba) y otro al fondo (el más abajo y a la derecha)

O desde el “Menú Formato”, y seleccionar la opción “Color del texto”. Cuando pulsas encima del a opción “color” se despliega un submenú con gran variedad de colores. Sólo tienes que hacer clic encima del que necesites y se aplicará en el texto seleccionado.

18.2.4. Estilo

Esta opción nos permite añadir estilos a la fuente que tengamos seleccionada, hay que tener en cuenta que algunos tipos de fuente son incompatibles con estas opciones, por ejemplo el tipo Monotype Cursiva, no nos permite añadir cursiva porque esta fuente es cursiva.

➢ Para acceder a estos estilos podemos acceder desde el “Menú

Formato”, y seleccionar la opción .

➢ Se despliega un submenú en donde podremos seleccionar varias opciones.


133

➢ A continuación vamos a explicar estas opciones:

- : nos permite añadir un grosor mayor al texto independientemente del color que tenga ésta. Negrita

- nos permite poner en cursiva el texto seleccionado. Cursiva

- nos permite añadir subrayado debajo del texto seleccionado. Subrayado

- nos permite tachar algún texto, por ejemplo en los ejercicios de inglés o lenguaje, que se dice que la opción correcta no sería esa. Tachado

- , nos permite poner el texto por encima de otro texto. Superíndice

- , nos permite poner el texto por debajo de otro texto. Subíndice

También podemos acceder a algunas de estos estilos desde la barra de herramientas.

Negrita

Cursiva

Subrayado


134

18.3. ALINEACIÓN DEL TEXTO

KompoZer nos permite elegir la alineación del texto según nuestra necesidad.

Para acceder a esta opción tenemos que seguir los siguientes pasos:

➢ Pulsar en el “Menú ”

➢ Se despliega un submenú en donde podremos elegir varias alineaciones que detallo a continuación

- Alineación Izquierda o el icono de la barra de herramientas nos permite alinear el texto a la izquierda.

- “Alineación a la derecha” o el icono de la barra de herramientas : nos permite alinear el texto a la derecha.

- “Alineación centrada” o el icono de la barra de herramientas : nos permite alinear el texto desde el centro hacía los extremos.

- “Alineación justificada” o el icono de la barra de herramientas : nos permite alinear el texto tanto a la derecha como a la izquierda.

18.4. VIÑETAS Y NUMERACIÓN

El programa nos permite añadir también, distintos tipos de viñetas, numeración…

➢ Si queremos añadir una viñeta o numeración para que el texto nos aparezca en niveles distintos, tendremos que pulsar en las opciones:

Numeración Viñetas

Cuando pulsamos en uno de estos dos iconos, nos aparecerá directamente la opción de “números” o “símbolo”


135

Si queremos seleccionar algún modelo distinto, tendremos que pulsar sobre “Menú Formato” y seleccionar la opción “Lista”.

➢ Sitúa el cursor debajo de lo que tenemos escrito sitúa el cursor.

➢ Selecciona la opción “Viñetas” y nos aparecerá la viñeta predeterminada por defecto.

➢ Vamos a cambiar la viñeta. Pulsar en el “Menú Formato” y seleccionar la opción “Lista”. Dentro del submenú que aparece pulsar en

.


➢ En esta ventana nos permite elegir entre un número limitado de estilos. Seleccionar la opción “circunferencia”

➢ Pulsar el botón


136

18.5. SANGRÍA

Si queremos aumentar la sangría del texto, podremos realizarlo desde las

opciones “Sangrar texto” y “desangrar texto” . Estas opciones nos permiten añadir espacios en blanco en las primeras líneas y en el resto del párrafo no.

Con todas las modificaciones que hemos realizado con el texto escrito, nos debería de quedar el resultado final de la siguiente manera.


➢ Lo primero que vamos a hacer es crear una página nueva para poder ir introduciendo texto, y guardarla con el nombre de “pagina_ejemplo1” (tenga en cuenta que en realidad la página se guardará como “pagina_ejemplo1.html” donde .html es la extensión de la página)

➢ Primero se debe abrir el programa KompoZer, luego ir al menú “archivo” (en la parte superior izquierda) y en el desplegable seleccionar “nuevo”.

➢ Se abrirá una ventana en la que se debe seleccionar “un documento vacío” y dar al botón “crear”.

➢ Generalmente se abre una pantalla que te pregunta el título que va ha tener la página. Introducirás el texto: es una página de ejemplo y presionas “ENTER”

➢ Se despliega la ventana para guardar el archivo,


137

➢ Escribir “pagina_prueba1” y seleccionar el directorio “curso_web” como destino.

➢ Ahora vamos a escribir el siguiente texto: “ENCABEZADO DE LA PÁGINA”, pulsar la tecla Enter y escribir “RESTO DEL TEXTO EN PÁRRAFO”

➢ Selecciona el texto “ENCABEZADO DE LA PÁGINA”

➢ Para modificar todos los formatos tendremos que acceder al “Menú

y tendremos que ir seleccionar las distintas opciones que aparecen.


138

➢ Ahora vamos a cambiar los formatos del texto, que sirven para predeterminar si queremos encabezados, párrafos,etc.

- Selecciona el texto para que será el “ENCABEZADO DE LA PÁGINA”, para ello tenemos que pulsar en el “Menú Formato” y

seleccionar la opción y nos aparecerá un submenú en donde podremos seleccionar el estilo que tendrá nuestra letra, si es encabezado, párrafo, título 1, …

… en nuestro caso vamos a seleccionar .

- Seleccionar ahora, “RESTO DEL TEXTO EN PÁRRAFO” e introducirnos en el “Menú Formato”, seleccionar la opción “Párrafo” y dentro del submenú que nos aparece seleccionar la opción

.

➢ Ahora vamos a cambiar las fuentes del texto.

- Selecciona el texto “ENCABEZADO DE LA PÁGINA”y pulsar sobre el

“Menú Formato” y seleccionar la opción . Se despliega un submenú en donde podremos seleccionar todas las fuentes de las cuales disponemos.


139

- Seleccionar la letra “Monotype Cursiva” (en caso de no disponer de esta letra, elegir otra cualquiera)

Ahora vamos a cambiar la fuente del resto del texto accediendo a través de la barra de herramientas:

- Selecciona el siguiente texto, RESTO DEL TEXTO EN PÁRRAFO”

- Pulsa en la opción de la barra de herramientas

.

- Selecciona pulsando en la fecha para que nos aparezca todas las fuentes de las que disponemos.

- Seleccionar la fuente “Verdana” (en caso de no disponer de esta letra elegir otra distinta)

➢ Para cambiar el “Tamaño” del texto, tendremos que pulsar en el “Menú

Formato” y seleccionar la opción y se despliega un submenú con los distintos tamaños que nos permite aplicar.


140

También podemos acceder mediante los iconos “disminuir texto aumentar texto.

- Selecciona el encabezado, y añádele el tamaño “extragrande”

- Selecciona el texto que va en párrafo y añádele el tamaño “grande”.

➢ Para cambiar el color de la fuente, sólo hay que seleccionar el texto y

pulsar la opción color .

O desde el “Menú Formato”, y seleccionar la opción “Color del texto”. Cuando pulsas encima del a opción “color” se despliega un submenú con gran variedad de colores. Sólo tienes que hacer clic encima del que necesites y se aplicará en el texto seleccionado.

- Seleccionar el texto de encabezado y aplicar un color “azul”

- Seleccionar el texto que va en párrafo y aplicar un color “rojo”.

➢ Existen dos opciones que nos permiten modificar el texto de manera distinta a las explicadas anteriormente.

- La opción “Negrita” , nos permite añadir un grosor mayor al texto independientemente del color que tenga ésta.

- La opción “Cursiva” , nos permite poner en cursiva el texto seleccionado.

- La opción “Subrayar” , nos permite añadir subrayado debajo del texto seleccionado.


141

También podemos acceder a dichas opciones desde el “Menú Formato”,

y se despliega el siguiente submenú.

- Selecciona el texto de encabezado y añadir negrita y cursiva sobre él.

➢ También nos permite modificar la alineación del texto en la página. Para ello tendremos que seleccionar uno de las opciones que aparece en “propiedades”.

“Alineación a la izquierda” : nos permite alinear el texto a la izquierda.

“Alineación a la derecha” : nos permite alinear el texto a la derecha.

“Alineación centrada” : nos permite alinear el texto desde el centro hacía los extremos.

“Alineación justificada” : nos permite alinear el texto tanto a la derecha como a la izquierda.

También podemos acceder a estas opciones desde el “Menú Formato”, seleccionar

y se despliega un submenú con las siguientes opciones.


142

- Selecciona el texto, todo, y añádele texto centrado.

➢ El programa nos permite añadir también, distintos tipos de viñetas, numeración…

- Si queremos añadir una viñeta o numeración para que el texto nos aparezca en niveles distintos, tendremos que pulsar en las opciones:

Numeración Viñetas

Cuando pulsamos en uno de estos dos iconos, nos aparecerá directamente la opción de “números” o “símbolo”

Si queremos seleccionar algún modelo distinto, tendremos que pulsar sobre “Menú Formato” y seleccionar la opción “Lista”.

- Sitúa el cursor debajo de lo que tenemos escrito sitúa el cursor.

- Selecciona la opción “Viñetas” y nos aparecerá la viñeta predeterminada por defecto.

- Vamos a cambiar la viñeta. Pulsar en el “Menú Formato” y seleccionar la opción “Lista”. Dentro del submenú que aparece pulsar en

.


143

- Nos aparecerá la siguiente ventana:

- En esta ventana nos permite elegir entre un número limitado de estilos. Seleccionar la opción “circunferencia”

- Pulsar el botón

- Escribir el siguiente texto:

➢ Si queremos aumentar la sangría del texto, podremos realizarlo desde las

opciones “Sangrar texto” y “desangrar texto” . Estas opciones nos permite añadir espacios en blanco en las primeras líneas y en el resto del párrafo no.

Con todas las modificaciones que hemos realizado con el texto escrito, nos debería de quedar el resultado final de la siguiente manera (aproximadamente)


144


1. ¿Se puede escribir texto en cualquier parte de la página?

a. Sí

b. No

2. Para cambiar el tipo de letra, tendremos que pulsar en…

a. Menú Fuente / tipo de letra

b. Menú Formato / tipo de letra

c. Tipo de letra del botón derecho del ratón

3. ¿Se puede modificar el tamaño del texto a nuestro gusto?

a. Sí

b. No

4. Cuando ponemos un texto en negrita significa…

a. Que está en color negro

b. Que el grosor es mayor

5. Para poner un texto por encima de otro se tiene que elegir…

a. Menú Formato / Estilo de texto / subíndice

b. Menú Formato / Estilo de texto / superíndice

c. Menú Formato / superíndice

6. Cuando el texto aparece como un cuadrado, con los mismos

márgenes en la izquierda y derecha tiene la alineación…

a. Izquierda

b. Derecha

c. Centrada

d. Justificada

7. Si queremos poner viñetas, significa…

a. Que añadimos numeración

b. Que añadimos símbolos.


145

TEMA 19: IMÁGENES

19.1. Insertar imágenes

19.2. Insertar texto alternativo a una imagen

19.3. Cambiar texto alternativo

19.4. Modificar tamaño



19.1. INSERTAR IMÁGENES

Para que las imágenes siempre aparezcan sin ningún problema en la página, tienen que estar en la misma carpeta (directorio) que la página.

Si no has descargado todavía ninguna imagen, recomendamos seguir los pasos indicados en el apartado “imágenes” para buscar imágenes en google y descargarlas en el directorio creado para el curso: “curso_web”.

Es conveniente disponer e al menos 3 imágenes correctamente guardadas para hacer el siguiente apartado.

Para insertar imágenes tenemos que…

➢ Pulsar en el “Menú Insertar”

➢ Y seleccionar la opción “Imagen” o también pulsando en el icono de la

barra de herramientas

➢ Se nos abrirá una nueva ventana con distintas fichas,


146

➢ Ficha “Ubicación”:

- En “Ubicación de la imagen”, tendremos que pulsar en la carpeta

para indicarle la ruta en donde se encuentra las imágenes.

- En “La URL es relativa a la dirección de la página”: tenemos que tener activada está opción para que nos aparezca en pantalla la imagen.

- En “Texto emergente”, se tendrá que introducir un texto para que cuando arrastremos el puntero del ratón sobre la imagen nos aparecerá este texto.

- En “Texto alternativo” se podrá introducir un texto. En caso de no haber puesto un “texto emergente” nos aparecería ningún texto.

- Si no queremos que se vea el texto alternativo, activar la casilla

➢ Pulsar el botón para verificar que queremos realizar los cambios.

19.2. INSERTAR TEXTO ALTERNATIVO A UNA IMAGEN

Dentro de la misma pantalla que hemos visto en el apartado anterior, podemos encontrar el texto alternativo.

Si queremos insertar un texto alternativo a una imagen una vez que ya está insertada la imagen, tendremos que seguir los siguientes pasos:


147

➢ Seleccionamos la imagen en donde vamos a insertar el texto alternativo

➢ Pinchar en el “Menú Formato” y seleccionar la opción “Propiedades de una imagen”

➢ Nos aparecerá una nueva ventana igual que la explicada en el apartado anterior.

➢ Tendremos que poner el texto que queramos que aparezca cuando pasemos el cursor por la imagen

➢ En caso de no querer que aparezca el texto alternativo pulsaremos en la siguiente opción.

➢ Una vez seleccionado una de las dos opciones pulsar el botón


148

19.3. CAMBIAR TEXTO ALTERNATIVO

En caso de querer cambiar el texto alternativo que tenemos, seguiremos estos pasos:

➢ Pulsar doble clic sobre la imagen, o pulsar en el “Menú Formato” y seleccionar la opción “Propiedades de la imagen”.

➢ Nos aparecerá el mismo cuadro que hemos explicado anteriormente.

➢ Realizar los cambios que queramos realizar

➢ Pulsar el botón para verificar los cambios que hemos realizado.

19.4. MODIFICAR TAMAÑO

Se puede modificar el tamaño de la imagen de dos maneras distintas.

Primera manera: La manera más fácil y rápida de modificarla es…

➢ Seleccionar la imagen

➢ Situar el puntero del ratón en una esquina o arista, y el cursor se convierte en una flecha de doble punta.

➢ Manteniendo pulsado el ratón arrastrar hasta que tenga el tamaño deseado.

Segunda manera: Pulsar doble clic sobre la imagen, o pulsar en el “Menú Formato” y seleccionar la opción “Propiedades de la imagen”.

➢ Pulsar sobre la ficha “Dimensiones”

➢ Nos aparecerá una ventana con las dimensiones actuales de la imagen, que podemos modificar a nuestro gusto.

Podemos añadir el ancho y alto de la imagen a nuestro gusto. Cuando modificamos la altura se modificará automáticamente la anchura, y viceversa.


149

➢ Si queremos modificar los cambios que hayamos realizado y que nos quede como el tamaño real, sólo tendremos que pulsar en la

opción .

➢ Una vez modificado el tamaño de la imagen pulsar el botón

para verificar los cambios.


Para realizar este ejemplo se deben tener varias imágenes en el directorio “curso_web”, el mismo donde debe estar guardada la página web.

En el ejemplo se va a usar C:\curso_web

Lo primero que vamos a hacer es abrir la página que tenemos guardado con el nombre de “pagina_ejemplo1” para poder insertar imágenes y trabajar con ellas.

Insertar Imágenes

Para insertar imágenes tenemos que…

➢ Pulsar en el “Menú Insertar”

➢ Y seleccionar la opción “Imagen” o también pulsando en el icono de la

barra de herramientas

➢ Se nos abrirá una nueva ventana con distintas fichas,

➢ Ficha “Ubicación”:


150

- En “Ubicación de la imagen”, tendremos que pulsar en la carpeta

para indicarle la ruta en donde se encuentra las imágenes. En nuestro caso tendremos que seleccionar “C:\curso_web\

- En “La URL es relativa a la dirección de la página”: tenemos que tener activada está opción para que nos aparezca en pantalla la imagen.

- En “Texto emergente”, se tendrá que introducir “LOBO” para que cuando arrastremos el puntero del ratón sobre la imagen nos aparecerá este texto.

- En “Texto alternativo” se podrá introducir “LOBO DE LA NOCHE”. En caso de no haber puesto un “texto emergente” nos aparecería este texto.

- Si no queremos que se vea el texto alternativo, activar la casilla

➢ Pulsar el botón para verificar que queremos realizar los cambios. Nos quedará de la siguiente manera:


151


152


1. ¿Se puede insertar imágenes en una página web?

a. Sí

b. No

2. ¿Desde dónde tenemos que entrar para insertar una imagen?

a. Menú Insertar

b. Icono en la barra de herramientas


3. ¿Se puede cambiar el texto alternativo de la imagen?

a. Sí

b. No

4. ¿El texto alternativo es el título de la imagen?

a. Sí

b. No

5. ¿Se puede modificar el tamaño de la imagen sin entrar en ningún menú?

a. Sí

b. No


153

TEMA 20: HIPERVÍNCULOS Y ENLACES

20.1. Hipervínculo absoluto


20.3. Hipervínculo relativo


20.5. hipervínculo anclado de texto


20.7. Hipervínculo anclado con imágenes o flechas UP


20.9. Hipervínculo anclado con correo electrónico



20.1. HIPERVÍNCULO ABSOLUTO

Este hipervínculo nos permite crear un enlace desde nuestra página a cualquiera que se encuentre en la red. Tendrá que empezar por “http://www”

Para ello vamos a realizar los siguientes pasos:

➢ Escribimos el texto que será nuestro hipervínculo

➢ Seleccionar el texto que acabamos de escribir

➢ Pulsar en el “Menú Insertar” y seleccionar la opción o bien

pulsar el icono de la barra de herramientas



154

➢ En “Ubicación de enlace” escribimos el enlace que al pulsar sobre él nos abrirá la página correspondiente.

➢ Pulsar el botón para verificar los cambios realizados.

➢ Guardar la página y pulsar la tecla de función “F5” para ver como quedaría realmente nuestra página.


Vamos a realizar los siguientes pasos para practicar lo que acabamos de aprender.

➢ Abrir una nueva página que vamos a guardar en nuestra carpeta que se encuentra en esta ruta: “C:\curso_web”, y vamos a guardar la página con el nombre de “pagina_ejemplo2”.

➢ Vamos a escribir el texto “Hipervínculo Absoluto”






155

➢ En “Ubicación de enlace” vamos a escribir http://www.google.es



➢ Clic sobre el enlace que acabamos de escribir, y se nos tendrá que abrir el buscador de google.

20.3. HIPERVÍNCULO RELATIVO

Nos permite enlazar nuestra página con otra que tenemos creada dentro de nuestra carpeta o web.

➢ Escribimos el texto correspondiente a nuestro enlace.

➢ Selecciona el texto que acabamos de escribir





156

➢ Nos aparecerá esta ventana:

➢ Pulsamos en la carpeta que aparece en la parte izquierda , para seleccionar la página con la que queremos enlazar.

➢ Se rellena con el nombre de la página que queremos que se abra cuando pulsemos sobre él.



➢ Cuando pulsamos sobre el enlace que acabamos de crear, nos debería aparecer la página que teníamos creada con anterioridad.


Vamos a realizar un ejemplo para practicar lo que hemos aprendido en el apartado anterior.

➢ Debajo de lo que hemos escrito, escribir “Hipervínculo Relativo”

➢ Selecciona el texto que acabamos de escribir


157



➢ Nos aparecerá esta ventana:

➢ Pulsamos en la carpeta que aparece en la parte izquierda , para seleccionar la página que tenemos guardada con el nombre de “pagina_ejemplo1.html”, que está guardada en “C:\ curso_web”

➢ Se rellena con el nombre de la página que queremos que se abra cuando pulsemos sobre él.



➢ Cuando pulsamos sobre el enlace que acabamos de crear, nos debería aparecer la página que teníamos creada con anterioridad.


158

20.5. HIPERVÍNCULO ANCLADO DE TEXTO

Son los enlaces que nos permiten movernos por diferentes zonas de nuestra página.

➢ Escribimos el texto que nos va a servir para movernos por la página

➢ Clic sobre la opción de “Enlace Interno” que se encuentra en la barra de herramientas.

… otra manera de acceder a esta opción es mediante la barra de menús.

➢ Clic sobre el “Menú Insertar”

➢ Y seleccionar la opción “Enlace Interno”

➢ Nos aparecerá una nueva ventana para añadir el texto para identificar el nombre del enlace

➢ Pulsar el botón para verificar el nombre y el enlace.

➢ Nos aparecerá el ancla delante del texto.


159

➢ Situar el cursor hacía donde queremos que nos aparezca el texto.

➢ Escribir el texto identificando lo que va a hacer el enlace

➢ Seleccionar el texto que acabamos de escribir y pulsar el botón derecho sobre él.

➢ Nos aparecerá el “Menú Contextual”

➢ Pulsar la opción “Crear enlace” y nos aparecerá la siguiente ventana.

➢ Escribir el texto con el símbolo almohadilla delante de él: el símbolo almohadilla (#) es para confirmar que es un enlace anclado, y el nombre que escribimos a continuación, tiene que ser el mismo que hemos puesto en el “texto alternativo” del anclaje, ya que lo que queremos se identifica con este texto

➢ Guarda la página con los cambios y pulsar la tecla de función F5


160


➢ En la misma página en la que estamos, sitúa el cursor delante del texto “hipervínculo Absoluto”.

➢ Clic sobre la opción de “Enlace Interno” que se encuentra en la barra de herramientas.

… otra manera de acceder a esta opción es mediante la barra de menús.


➢ Y seleccionar la opción “Enlace Interno”

➢ Nos aparecerá una nueva ventana para añadir el texto para identificar el nombre del enlace, escribir: “SUBIR”


161

➢ Pulsar el botón para verificar el nombre y el enlace.

➢ Nos aparecerá el ancla delante del texto.

➢ Bajar con las barras de desplazamiento hasta que desaparezca el texto de la pantalla (puede que sea necesario dar a ENTER para crear más líneas), y hacer clic para situar el curso de texto en esta zona.

➢ Escribir el texto “SUBIR”

➢ Seleccionar el texto que acabamos de escribir y pulsar el botón derecho sobre él.

➢ Nos aparecerá el “Menú Contextual”

➢ Pulsar la opción “Crear enlace” y nos aparecerá la siguiente ventana.


162

➢ Escribir el siguiente texto “#SUBIR”: el símbolo almohadilla (#) es para confirmar que es un enlace anclado, y el nombre que escribimos a continuación, tiene que ser el mismo que hemos puesto en el “texto alternativo” del anclaje, ya que lo que queremos que nos haga es que al pulsar en el enlace “subir”, nos suba directamente a donde esté el ancla, al principio de la página.

➢ Guarda la página con los cambios y pulsar la tecla de función F5

➢ Clic sobre el enlace “Subir” y nos tendrá que subir automáticamente al inicio de la página, en donde habíamos insertado el “enlace anclado”.

20.7. HIPERVÍNCULO ANCLADO CON IMÁGENES O FLECHAS UP

Se utiliza de la misma manera que el explicado anteriormente, sólo que utilizaremos una imagen para que nos permita movernos por las páginas.

“FLECHAS UP” son imágenes de flechas, que hacen más visual la indicación de subir o bajar, que si se hiciese con el texto.

Vamos a explicar los pasos que tendremos que seguir para su realización.

➢ Situar el cursor de texto en donde queramos insertar el enlace.

➢ Vamos a insertar el anclaje, para ello, clic sobre la opción de “Enlace

Interno” que se encuentra en la barra de herramientas


163

➢ Nos aparecerá una nueva ventana para añadir el texto para identificar el nombre del enlace

➢ Bajar con la fecha de desplazamiento hasta el final de la página, que no se vea el contenido de la página.

➢ Ahora vamos a insertar la imagen.


➢ Y seleccionar la opción “Imagen” o bien pulsando en el icono de la barra

de herramientas

➢ Nos aparecerá una ventana en donde tendremos que pulsar en la

carpeta que aparece a la derecha de la “ficha ubicación” para seleccionar la imagen que necesitamos.


164

➢ Seleccionar la imagen que nos aparecerá y pulsando sobre ella nos trasladará a la parte de la hoja que hemos seleccionado con anterioridad


➢ Nos aparecerá una ventana para introducir el “Texto Alternativo”. Escribir el texto en caso de querer que aparezca.


➢ Selecciona la imagen que acabamos de insertar y pulsa en botón derecho del ratón sobre la imagen para acceder al “Menú contextual”.


➢ Nos aparecerá una nueva ventana en donde tendremos que escribir: el texto para que cuando pulsemos sobre la flecha vaya automáticamente a donde hemos insertado anteriormente el anclaje, dentro de la “Ficha enlace”

➢ Guardar todos los cambios y pulsar la tecla de función “F5”.


165


Se utiliza de la misma manera que el explicado anteriormente, sólo que utilizaremos una imagen para que nos permita movernos por las páginas.

Para realizarlo deberás descargarte una imagen con una flecha, para hacerlo puedes usar el buscador de google tal y como se ha indicado en apartados anteriores. Otra opción es usar cualquier imagen y que al pulsarla se vaya a arriba.

Vamos a realizar un ejemplo en donde aplicaremos este nuevo concepto.

➢ Abrir la página “pagina_ejemplo1”.

➢ Situar el cursor después del texto escrito en el encabezado.

➢ Vamos a insertar el anclaje, para ello, clic sobre la opción de “Enlace

Interno” que se encuentra en la barra de herramientas

➢ Nos aparecerá una nueva ventana para añadir el texto para identificar el nombre del enlace, escribir: “SUBIR”

➢ Bajar con la fecha de desplazamiento hasta el final de la página, que no se vea el contenido de la página.

➢ Ahora vamos a insertar la imagen.


➢ Y seleccionar la opción “Imagen” o bien pulsando en el icono de la barra

de herramientas


166

➢ Nos aparecerá una ventana en donde tendremos que pulsar en la

carpeta que aparece a la derecha de la “ficha ubicación” para seleccionar la imagen que necesitamos.

➢ En la ventana que nos aparece a continuación tendremos que abrir la carpeta que tenemos descargada del servidor denominada “imágenes_ ejemplo”.

➢ Seleccionar de la imagen “flecha_subir” o la imagen que vayas a usar (que se debería encontrar en “C:\ curso_web\”)



167

➢ Nos aparecerá una ventana para introducir el “Texto Alternativo”. Escribir “Flecha Arriba”


➢ Selecciona la imagen que acabamos de insertar y pulsa en botón derecho del ratón sobre la imagen para acceder al “Menú contextual”.


➢ Nos aparecerá una nueva ventana en donde tendremos que escribir: “#SUBIR” para que cuando pulsemos sobre la flecha nos suba automáticamente a donde hemos insertado anteriormente el anclaje, dentro de la “Ficha enlace”


168

➢ Guardar todos los cambios y pulsar la tecla de función “F5”.

➢ Clic sobre la fecha y verás como se desplaza la página hasta donde está visible el anclaje (el ancla no sale en esta vista, pero si el lugar donde está insertado)

20.9. HIPERVÍNCULO ANCLADO CON CORREO ELECTRÓNICO

Se utiliza igual que los anteriores enlaces, sólo con la diferencia que tendremos que seleccionar la opción para que identifique que es un correo electrónico.

La manera de proceder con este enlace es exactamente igual que los anteriores. Vamos a realizar los pasos:

➢ Situamos el cursor de texto en donde queramos insertar el enlace

➢ Pulsar en el icono “Enlace”


➢ Vamos a escribir en “Texto de enlace”

➢ En “Ubicación del enlace” escribir el e-mail de la persona.


169

➢ Activar la casilla para que el programa reconozca es un correo electrónico.


➢ Guardar la página y pulsar la tecla de función “F5”

➢ Pulsar sobre el enlace que acabamos de crear, se tendrá que abrir el programa que tengamos instalado para enviar correos con el correspondiente e-mail ya escrito automáticamente.


Se utiliza igual que los anteriores enlaces, sólo con la diferencia que tendremos que seleccionar la opción para que identifique que es un correo electrónico.

La manera de proceder con este enlace es exactamente igual que los anteriores. Vamos a realizar un ejemplo:

➢ Abrir la página con el nombre “pagina_ejemplo1” que se encuentra en “C:\curso_web”

➢ Debajo de lo que tenemos escrito y pulsar en el icono “Enlace”



170

➢ Vamos a escribir en “Texto de enlace” “E-mail”

➢ En “Ubicación del enlace” escribir: [email protected]”.

➢ Activar la casilla para que el programa reconozca es un correo electrónico.


➢ Guardar la página y pulsar la tecla de función “F5”

➢ Pulsar sobre el enlace que acabamos de crear, se tendrá que abrir el programa que tengamos instalado para enviar correos con el correspondiente e-mail ya escrito automáticamente.

mailto:[email protected]


171


1. ¿Qué vínculo nos permite enlazar con una página de la red?

a. Absoluto

b. Relativo

c. Roll – over

2. ¿Qué vínculo nos permite abrir una página dentro de nuestra carpeta?

a. Absoluto

b. Relativo

c. Roll – over

3. ¿Para realizar un vínculo absoluto pulsamos sobre…

a. Menú Formato / hipervínculo

b. Barra de herramientas

c. Menú Hipervínculo

4. ¿Qué es un hipervínculo anclado?

a. Un enlace que nos permite movernos de una página a otra

b. Un enlace que nos permite movernos en la misma página

c. Un enlace que nos permite movernos en enlaces con páginas del nuestra carpeta.

5. Para realizar un anclaje pulsamos en…

a. Enlace interno

b. Menú Insertar

c. Menú Hipervínculo


172

TEMA 21: ROLL – OVER

21.1. Roll – Over de texto



21.1. ROLL – OVER DE TEXTO

El Roll – over nos permite que al pasar por encima de un texto, éste cambie de aspecto

Vamos a realizar los pasos a seguir:

➢ Escribir un texto


➢ Pulsar el botón derecho del ratón para acceder al “Menú contextual”



173

➢ Nos aparecerá la siguiente ventana nueva.

➢ En “Texto del enlace” aparecerá automáticamente el texto ya que lo teníamos seleccionado con anterioridad.

➢ En “ubicación del enlace” tendremos que escribir la URL la cual queremos que se abra automáticamente cuando pulsemos sobre el texto.


➢ Teniendo seleccionado el texto, clic en el “Menú Formato” y seleccionar

la opción

➢ Se abrirá la siguiente pantalla:


174

➢ Vamos a modificar el vínculo con distintos colores y fuentes, tendremos que seleccionar el texto cuando está normal, cuando es un enlace, cuando es un enlace activo y cuando ha sido visitado, pinchando en los cuadrados con colores que tenemos al lado.

- Si queremos que nos aparezca una imagen de fondo, tendremos que

pulsar en la carpeta y especificar la ruta en donde esté la imagen que queremos insertar.

➢ Pulsar el botón para verificar que queremos los cambios.

➢ Guardar la página y pulsar la tecla “F5”


Vamos a realizar un ejemplo guiado para que sea más fácil su creación y explicación.

➢ Vamos a abrir, lo primero, la página en donde vamos a crear el roll – over. Ésta va a ser “pagina_ejemplo1”.

➢ Situarnos por debajo de la imagen del “Lobo”.

➢ Escribir el siguiente texto “ROLL – OVER DE TEXTO”


➢ Pulsar el botón derecho del ratón para acceder al “Menú contextual”



175

➢ Nos aparecerá la siguiente ventana nueva.

➢ En “Texto del enlace” aparecerá automáticamente “ROLL – OVER DE TEXTO” ya que lo teníamos seleccionado con anterioridad.

➢ En “ubicación del enlace” tendremos que escribir la URL la cual queremos que se abra automáticamente cuando pulsemos sobre el texto. Escribir: http://www.terra.es


➢ Teniendo seleccionado el texto de “ROLL – OVER DE TEXTO”, clic en

el “Menú Formato” y seleccionar la opción

➢ Se abrirá la siguiente pantalla:

http://www.terra.es/


176

➢ Vamos a modificar el vínculo con distintos colores y fuentes:

- En “Texto normal” vamos a seleccionar un color “Azul”

- En “Color del vínculo” Seleccionar un color “Rojo”, tendréis que pulsar

en . Es el color que queremos para nuestro vínculo.

- En “Color de sustitución” elegir el color “amarillo” ya que cuando pasemos el cursor por encima de él se pondrá amarillo.

- En “Vínculos visitados” elegir un color “verde manzana”, para que cuando hagamos clic sobre el enlace queremos que nos cambie de color.

- En “Vínculo activo”, elegir un color “Rosa” ya que cuando pulsemos este enlace, mientras se abre la ventana correspondiente, nos cambiará de color.

- Si queremos que nos aparezca una imagen de fondo, tendremos

que pulsar en la carpeta y especificar la ruta en donde esté la imagen que queremos insertar.

➢ Pulsar el botón para verificar que queremos los cambios.

➢ Guardar la página y pulsar la tecla “F5”

➢ Clic sobre el Roll – Over de texto para ver los cambios realizados.


177


1. ¿Cuándo utilizamos un enlace y cambia el color se llama…

a. hipervínculo absoluto

b. hipervínculo relativo

c. Roll – Over

2. ¿Se puede modificar el color del texto según el texto si es normal, si lo hemos visitado, etc…?

a. Sí

b. No

3. Para acceder a las opciones de Roll – Over tenemos que ir a…

a. Menú contextual

b. Menú Formato

c. Ninguna es correcta.


178

TEMA 22: PROPIEDADES DE PÁGINA

22.1. Color de fondo

22.2. Color del texto



22.1. COLOR DE FONDO

KompoZer nos permite introducir color en el fondo y hasta una imagen para realizar una creación más creativa. Para ello vamos a seguir los siguientes pasos:

➢ Abrir la página en donde queremos modificar el fondo

➢ Pulsar en el “Menú ” y seleccionar la opción



179

➢ En tenemos la opción de , si pulsamos en el

cuadro que aparece en su línea , se desplegará una paleta de colores en donde podremos elegir el color que queremos para nuestro fondo.

➢ La opción “imagen de fondo” nos permite elegir una imagen para el fondo de pantalla, tendremos que pulsar en la carpeta que nos aparece en la

parte de la derecha y se abrirá una nueva ventana.

➢ Elegir la imagen que queremos utilizar como fondo y pulsar el botón de

22.2. COLOR DEL TEXTO

Nos permite cambiar el texto según el destino que tenga, es decir, si el texto es normal llevará un color, si es un enlace otro, y en caso de este último podrás elegir si es un enlace visitado, activo.


180

Para ellos seguimos los siguientes pasos:

➢ Abrir la página en donde queremos modificar el fondo



➢ En la opción nos aparecen dos opciones:

- , no nos permite usar colores diferentes según la necesidad, pondrá los que tenga el programa predeterminados.

- , nos permite elegir el color de la fuente según nuestra necesidad, para ello nos fijamos en los apartados siguientes:


181

- Podemos seleccionar en las subcategorías que aparecen los distintos colores según la utilización del texto, si es un enlace, etc… sólo

tendremos que pulsar en (en la parte de la derecha nos aparecerá el color que hemos elegido como muestra.

➢ Una vez que hemos elegido los colores que queremos pulsar en el botón

de


Vamos a realizar una ejemplo guiado para repasar estas nuevas opciones.

➢ Lo primero que vamos a hacer es abrir la página que tenemos guarda en nuestra carpeta con el nombre de “pagina_ejemplo1”.


182



➢ Vamos a modificar los colores para que quede de la siguiente manera, tendrás que pulsar en los cuadros al lado de las opciones para cambiar el color.

- Texto normal de color negro

- Texto de enlace de color azul

- Texto enlace activo de color rojo

- Texto enlace visitado de color verde

- Fondo blanco


183

➢ Ahora vamos a insertar una imagen de fondo. Para ellos tendrás que

pulsar en la carpeta que aparece al lado de

➢ Se nos abrirá una nueva ventana en donde tendremos que elegir la imagen que quieras de la carpeta C:\curso_web (o donde hayas guardado la página)

➢ Pulsar en el botón de , y veremos en la parte superior de la ventana la imagen aplicada como vista previa.

➢ Pulsar en el botón de para ver como queda en nuestra página.


184


1. ¿Podemos cambiar el color del fondo de la página?

a. Sí

b. No

2. ¿Podemos añadir una imagen como fondo?

a. Sí

b. No

3. ¿Dónde hay que ir para acceder a la opinión de poner imagen de fondo?

a. Menú Insertar / Imagen

b. Menú Formato / color y fondo de página

c. Menú Insertar / color y fondo de página


185

TEMA 23: LAS TABLAS

23.1. Insertar tablas

23.2. Modificar el tamaño de la tabla



23.1. INSERTAR TABLAS

Para insertar tablas tendremos que seguir los siguientes pasos:

➢ Elegir donde queremos insertar la tabla

➢ Clic sobre el “Menú ”, seleccionar la opción y

elegir

➢ Se nos abrirá la siguiente ventana con varias fichas.

➢ En la “Ficha Rápido”, se podrá elegir la cantidad de columnas y filas que necesitemos, sólo tendremos que pulsar en el primer cuadro con el botón izquierdo del ratón y manteniéndolo pulsado arrastrar hasta que tenga la cantidad de filas y columnas que queramos.


186

➢ En la “Ficha Preciso”, podremos realizar la misma operación que en la anterior ficha, pero añadiendo de forma más precisa la cantidad de filas y columnas, así como la anchura de la tabla y los bordes de la misma.

➢ En la “Ficha Celda” podremos añadir la alineación de las filas y columnas individualmente, así como si queremos ajustar el texto a las celdas o no, y el espacio entre celdas así como su relleno.


187

➢ Pulsar el botón para verificar los cambios

➢ Nos quedará de la siguiente manera:

Para escribir dentro sólo tendremos que hacer clic encima y escribir.

Las tablas nos permiten tener una manera fácil de poder hacer una maquetación, ya que nos permite crear tablas dentro de tablas, crear enlaces, hipervínculos…

23.2. MODIFICAR EL TAMAÑO DE LA TABLA

Si queremos modificar el tamaño de la tabla sólo tendremos que situar el puntero del ratón en una de las aristas, y cuando la flecha se convierte en una flecha de doble punta, manteniendo pulsado el botón izquierdo del ratón, arrastrar hasta que tenga el tamaño deseado.


➢ Clic sobre el “Menú ”, seleccionar la opción y

elegir

➢ Se nos abrirá la siguiente ventana con varias fichas.

➢ En la “Ficha Rápido”, se podrá elegir la cantidad de columnas y filas que necesitemos, sólo tendremos que pulsar en el primer cuadro con el botón izquierdo del ratón y manteniéndolo pulsado arrastrar hasta que tenga la cantidad de filas y columnas que queramos.


188

… En nuestro caso selecciona 2 filas y 2 columnas, como aparece en el modelo anterior.

➢ En la “Ficha Preciso”, podremos realizar la misma operación que en la anterior ficha, pero añadiendo de forma más precisa la cantidad de filas y columnas, así como la anchura de la tabla y los bordes de la misma.

… vamos a escribir filas (2), columnas (2), anchura (100%) para que se ajunte a la página, y bordes (2).

➢ En la “Ficha Celda” podremos añadir la alineación de las filas y columnas individualmente, así como si queremos ajustar el texto a las celdas o no, y el espacio entre celdas así como su relleno.


189

… vamos a poner alineación centrada tanto horizontal como vertical, pulsar “ajustar” en ajustar texto, en espacio entre celdas (2) y el relleno de las celdas (2)

➢ Pulsar el botón para verificar los cambios

➢ Nos quedará de la siguiente manera:

➢ Para escribir dentro sólo tendremos que hacer clic encima y escribir. Rellenar con los siguientes datos.

Las tablas nos permiten tener una manera fácil de poder hacer una maquetación, ya que nos permite crear tablas dentro de tablas, crear enlaces, hipervínculos…


190


1. ¿Dónde podemos acceder para insertar tablas?

a. Menú Insertar / tablas

b. Menú Tablas

c. Menú Herramientas

2. ¿Podemos añadir filas y columnas en una tabla según necesidad?

a. Sí

b. No

3. ¿Se puede modificar el tamaño?

a. Sí

b. No


191

TEMA 24: SUBIR LA PÁGINA Web AL SERVIDOR

24.1. SUBIR LOS FICHEROS AL SERVIDOR/INTERNET

Una vez realizada una o varias páginas webs, para que estas sean accesibles desde Internet por cualquier persona, es necesario subirlas al servidor (subirlas a Internet).

Las páginas webs son ficheros iguales que los subidos en la práctica de subida de ficheros vía FTP (core_ftp) por lo que se deberá seguir nuevamente todos los pasos, pero en lugar de subir los ficheros del ejemplo anterior, esta vez se deben subir la página o páginas creadas, así como las imágenes que se usen en estas páginas.

Los pasos básicos serán:

- Abrir el programa FTP, en nuestro caso core_ftp

- Conectarse al servidor siguiendo los pasos del tema 8.8.

- Entrar en el directorio personal, por ejemplo web0000, si no se hubiese creado, habría que crearlo.

- Seleccionar los documentos (páginas webs, imágenes, …) que se vayan a subir a Internet/servidor y subirlos.

- Comprobar que se accede correctamente a ellos desde Internet.


PRIMERO DEBEMOS CONECTARNOS AL ESPACIO Web o SERVIDOR:

➢ Primero abrimos el programa Core_FTP

➢ Tendremos que pulsar en el “Menú Sites”

➢ Seleccionar en el submenú que se despliega la opción

.


192

➢ Se abrirá la siguiente pantalla en donde tendremos que introducir los datos correspondientes, que recibimos en el email de activacion de la cuenta para poder acceder a nuestro sitio web.

Los datos correspondientes son:

Site name: podemos introducir cualquier nombre

Host/IP/URL: FTP Hostname

Usuario: FTP Username

Contraseña: FTP Password

FTP Hostname, FTP Username y FTP Password son los datos que recibimos en el email de activación de la cuenta en el servicio de hosting 000webhost.com. Todos los pasos puede revisar en el capitulo 8.8 del manual.

➢ Pulsar el botón para conectarnos al servidor.

➢ Nos aparecerá en la parte de la derecha todos los archivos que estén a nuestra disposición del servidor.

Una vez que estamos conectados con el servidor podemos trabajar para subir y bajar ficheros.


193

SUBIR LAS WEBS E IMÁGENES AL DIRECTORIO PERSONAL

Vamos a detallar paso a paso todo lo que tendréis que realizar para poder subir los ficheros que necesitáis para realizar la actividad perteneciente a la tarea 2 y que posteriormente se tendrá que enviar al tutor para su revisión y comprobación de que esta actividad ha sido realizada.

➢ Lo primero que tenemos que hacer es seleccionar la carpeta en nuestro ordenador en donde tenemos los archivos que vamos a subir. En nuestro caso sería, la unidad de disco duro o local (C:), doble clic sobre “curso_Web”.

➢ Después de este paso en la parte izquierda te debe quedar algo parecido a esto:

Ahora es necesario subir los ficheros de imágenes y páginas webs al directorio personal en el servidor que se llama con nuestro nombre de usuario y que habremos creado en la tarea de FTP. Si no existiese habría que crear en la parte derecha el directorio con el nombre de usuario correspondiente.

➢ Como ya tendremos creado nuestro directorio (en la carpeta public_html), tenemos que buscarnos dentro del listado de la parte derecha, dentro de los directorios del servidor y pulsar doble clic encima para abrirlo.

➢ Una vez que está abierto, vamos a proceder a subir los ficheros y las imágenes igual que se hizo con el fichero ftp.htm.

➢ Seleccionar dentro de nuestra carpeta C:\curso_web\ los ficheros que se van a subir, en nuestro caso serán los siguientes:

ftp://ftp.htm/


194

- flechaarriba.jpg

- flechabajar.jpg

- lobo1.jpg

- lobo2.jpg

- lobo3.jpg

- tarea2.html

➢ Una vez tenemos seleccionados los documentos y estamos en la parte derecha en nuestro directorio del servidor donde vamos a subir el fichero, pulsar la

flecha “Upload” para suvir al servidor el fichero.

➢ Nos quedará de la siguiente manera.

Ahora debemos comprobar que realmente se ha subido bien y que podemos verlo desde Internet. Para ello tenemos que abrir una ventana de Internet (por ejemplo el Internet Explorer) e introducir la URL o dirección en la que teóricamente se encuentra el fichero que hemos subido.

Para comprobarlo, vamos a poner un ejemplo de lo que habría que hacer si disponemos de los siguientes ficheros:


195

EJEMPLO:

Supongamos que el nombre de subdominio (para este ejemplo) que hemos creado sigiendo los pasos de capitulo 8.8 es:

www.webdepedrogarcia.webege.com

Nuestro usuario (para este ejemplo) es web0000

Los ficheros a subir son (para este ejemplo):

tarea2.html

lobo1.jpg

lobo2.jpg

lobo3.jpg

flechaarriba.jpg

flechabajar.jpg

Entonces deberíamos poner lo siguiente en el navegador o explorador de Internet:

www.webdepedrogarcia.webege.com/web0000/tarea2.html

o también podríamos poner:

http://www.webdepedrogarcia.webege.com/web0000/tarea2.html

Recuerda que en lugar de web0000 debes poner el nombre del directorio que hayas creado. Y en lugar de tarea2.html debes poner el nombre de la Web que hayas creado.

Esa dirección o URL será la que deberás probar y una vez comprobado que funciona, indicársela al tutor para superar la tarea 2.

Si no funcionase, seguramente se haya escrito algo mal o no se han subido correctamente los ficheros, recomendamos que se inicien los pasos desde cero para asegurar que se ha hecho todo correctamente.

A continuación se incluye un ejemplo de una Web muy básica como respuesta a la tarea 2, que cumple con los requisitos mínimos:





196


197

ENTREGA DE TAREA 2:

Cada alumno deberá realizar una web personal que esté relacionada con su especialidad y que se pudiera utilizar con los alumnos en clase. Posteriormente la alojará en su espacio web creado en el servicio de hosting 000webhost.com e indicará al tutor su URL para que pueda corregirla.

Se deberá informar al tutor de la dirección de Internet o URL en la que se encuentra la Web (página Web) o páginas webs que se hayan realizado.

En ella el tutor deberá poder comprobar que se cumplen al menos los requisitos mínimos y comprobar los conocimientos adquiridos en el curso. Opcionalmente se podrá entregar otra página Web más avanzada si lo cree oportuno el alumno.

Los requisitos mínimos de la página Web básica son:

- Tres enlaces a páginas externas (hipervínculos absolutos)

- Un enlace a una dirección de e-mail (correo electrónico)

- Tres imágenes, una de las cuales deberá ser un hipervínculo (es decir, al pinchar en la imagen se deberá acceder a otra página)

- Un vínculo relativo a la página (por medio de un ancla para subir desde la parte inferior de la página o bajar desde la parte superior)

- Texto con una extensión de al menos 200 palabras, con diferentes formatos y tamaños.

Esta web básica será la tarea 2 y el proyecto final y al superar la tarea 1 o la tarea 2 (que forma parte del proyecto final) se habrá superado el curso.

Una vez realizada con éxito la primera página, se recomienda hacer una web con, al menos, tres páginas, con enlaces entre ellas y un poco de mayor complejidad.

La Web Avanzada opcional deberá tener, al menos, tres páginas, con enlaces entre ellas y se colocarán los aspectos más importantes que se consideren oportunos y deberá tener, como mínimo, los mismos elementos que los que se piden en la Web básica.


198

DISEÑO WEB Y HERRAMIENTAS DE INTERNET APLICADAS A LA...

Documents

Transcript of DISEÑO WEB Y HERRAMIENTAS DE INTERNET APLICADAS A LA...