diseño web y herramientas de internet aplicadas a la

Transcripción

diseño web y herramientas de internet aplicadas a la
MAGISTER
DISEÑO WEB Y
HERRAMIENTAS DE
INTERNET APLICADAS
A LA DOCENCIA
www.magister.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
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
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.
2
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
3
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
TAREAS OPCIONALES
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.
Esta tarea se deberá entregar antes del último día del curso.
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.
Esta tarea se deberá entregar antes del último día del curso.
4
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
ÍNDICE DE DISEÑO WEB
TEMA 1:
TEMA 2:
TEMA 3:
Guía didáctica
Introducción al curso
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
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
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
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
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
TEMA 5:
TEMA 6:
TEMA 7:
TEMA 8:
ENTREGA DE TAREA 1
BREVE EXPLICACIÓN DE LA TAREA 2
5
Distancia. Diseño WEB
PROGRAMAS DE FORMACIÓN.
TEMA 9:
TEMA 10:
TEMA 11:
TEMA 12:
TEMA 13:
TEMA 14:
TEMA 15:
TEMA 16:
TEMA 17:
TEMA 18:
TEMA 19:
TEMA 20:
©MELC S.A.
Distancia. Diseño WEB
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
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
Introducción a los programas de diseño web
Introducción a los componentes de una página web
El programa KompoZer
13.1. Pasos para descargarnos el programa de KompoZer
Páginas en KompoZer
14.1. Cómo trabajar en una página en KompoZer
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
Vista previa en el explorador.
16.1. Vista previa
16.2. Autoevaluación
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
Elementos de texto en una página web
18.1. Escribir texto
18.2. Estructura de una página
18.3. Modificar texto
18.3.1. Tipo de fuente
18.3.2. Tamaño
18.3.3. Color
18.3.4. Estilo
18.4. Alineación del texto
18.5. Viñetas y numeración
18.6. Sangría
18.7. Ejemplo guiado paso a paso
18.8. Autoevaluación
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
Hipervínculos y enlaces
6
PROGRAMAS DE FORMACIÓN.
TEMA 21:
TEMA 22:
TEMA 23:
©MELC S.A.
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
ROLL – OVER
21.1. Roll – Over de texto
21.2. Ejemplo guiado paso a paso
21.3. Autoevaluación
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
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
23.5.
TEMA 24:
SUBIR LA PÁGINA WEB AL SERVIDOR
ENTREGA DE TAREA 2
7
Distancia. Diseño WEB
PROGRAMAS DE FORMACIÓN.
TEMA 1:
©MELC S.A.
Distancia. Diseño WEB
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 ISFTIC 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.
8
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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:
9
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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 ISFTIC una aplicación que se llama “Mecánica
básica” e indica al tutor la URL de la página.
Esta tarea se deberá entregar antes del último día del curso.
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.
Esta tarea se deberá entregar antes del último día del curso.
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
10
PROGRAMAS DE FORMACIÓN.
TEMA 2:
©MELC S.A.
Distancia. Diseño WEB
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.
11
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
12
PROGRAMAS DE FORMACIÓN.
TEMA 3:
©MELC S.A.
Distancia. Diseño WEB
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.
13
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
-
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
14
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño 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
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.
15
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
2) crear un sitio web. Un sitio web es un lugar
específico
en
nuestro
ordenador
donde
guardaremos los archivos que vayamos creando,
además, crearemos una “conexión directa” de
nuestro ordenador con el servidor para poder
subir y/o bajar archivos. Todo este procedimiento
detalladamente a lo largo del curso.
y
se
explicará
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.
16
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
3.2. 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 ISFTIC 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 ISFTIC 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)
17
PROGRAMAS DE FORMACIÓN.
-
©MELC S.A.
Distancia. Diseño WEB
Apartado 3 de la tarea 1:
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)
-
Apartado 4 de la tarea 1:
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.
18
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
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:
Apartado 1 de la tarea 1:
La URL de la página ISFTIC con la aplicación de “Mecánica Básica” se
encuentra en:
www.ite.educacion.es
¾ Abrir www.ite.educacion.es en la página de inicio y buscar enlaces que le
lleven a la información que desea.
¾ Utilice el menú de la parte superior para encontrar el enlace que está
buscando.
Apartado 2 de la tarea 1:
Mi blog personal creado se encuentra
http://creacionblog12.blogspot.com/
en
la
dirección
(URL):
Apartado 3 de la tarea 1:
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://sec.magister.com.es/foro/foro323
Apartado 4 de la tarea 1:
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 entregar al tutor. En todos los temas encontraréis
ejemplo guiados paso a paso en donde se verá con detalle los pasos para
realizar dichas actividades.
19
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
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, 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,
ISFTIC, 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:
Comunidad
Autónoma
Asturias
Portal
Educativo
Enlace a los recursos educativos
http://www.educastur.es/index.php?option=com_
20
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
dbquery&Itemid=101
Cantabria
http://www.educantabria.es/portal/c/portal/layou
t?p_l_id=22.149&c=an
CastillaLeón
http://www.educa.jcyl.es/educacyl/cm/profesorad
o/tkContent?pgseed=1184068269083&idContent
=14065&locale=es_ES&textOnly=false
Galicia
http://www.edu.xunta.es/portal/contenido?coman
do=ContenidoDinamicoComando&accion=verLista
do&trID=932f7001-453431b5-000364efdcc63a88&tipoEntidad=Recursos%20educativos&
pwID=e4763dcf-0a0a2825-006c0962b0b5ef8f&lID=gl
A continuación vamos a pasar a detallar algunos de los portales educativos
más completos que podemos encontrarnos.
-
ISFTIC, 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.ite.educacion.es/
21
PROGRAMAS DE FORMACIÓN.
-
©MELC S.A.
Distancia. Diseño WEB
Educamadrid: Plataforma de Recursos Educativos de la Comunidad de
Madrid que podemos encontrar en la siguiente URL:
http://www.educa2.madrid.org/educamadrid/
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
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.
22
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
ISFTIC
TecnoWeb 1
http://www.iesalquibla.net/TecnoWeb/index.htm
Proyecto Techno
http://ares.isftic.mec.es/electrotecnia/index.html
Normalización
http://w3.isftic.mec.es/recursos/bachillerato/dibujo/tecnico/norma
lizacion/index.htm
Manual básico de economía
http://w3.isftic.mec.es/recursos/bachillerato/economia/i
ndex.htm
Plan de fomento de la lectura
http://www.planlectura.educ.ar/
23
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Descartes
http://descartes.isftic.mec.es/
Educamadrid
http://www.educa2.madrid.org/educamadrid
Latín
El recorrido de la energía: Las energías renovables
Viaje a través de las energías
Formulación
Miguel Cervantes y El Quijote
24
Distancia. Diseño WEB
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
Averroes
La Alhambra
http://www.juntadeandalucia.es/averroes/recursos_informatic
os/andared01/alhambra/index.htm
Leyes de los gases
http://www.juntadeandalucia.es/averroes/recursos_informaticos/
andared02/leyes_gases/index.html
The Castle Quest
http://www.juntadeandalucia.es/averroes/recursos_in
formaticos/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/
25
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
http://www.educared.net/
http://www.portaleso.com/
http://www.educasites.net/
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 ISFTIC, y posteriormente pulsamos en el botón
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/ o http://www.ite.educacion.es/
26
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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 RECURSOS EDUCATIVOS
Nos aparecerá la siguiente ventana en donde podremos elegir entre las
distintas asignaturas para buscar lo que queremos encontrar.
27
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
La opción que nos interesa es ASIGNATURAS OPTATIVAS 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.
28
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
que es la página que estamos buscando.
“Mecánica Básica”
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.
29
PROGRAMAS DE FORMACIÓN.
4.4.
©MELC S.A.
Distancia. Diseño WEB
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 ISFTIC
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) ISFTIC
d) Profes.net
30
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
TEMA 5: UTILIZACIÓN DEL BLOGS
5.1. Concepto
5.2. Blogs en la educación
5.3. Darse de alta en un blogs
5.3.1. Ejemplo guiado paso a paso
5.3.2. Como publicar en el Blogs sin darse de alta
5.3.3. Ejemplo guiado paso a paso
5.4. Creación de un Blogs
5.5. Ejemplo guiado paso a paso
5.6. Autoevaluación
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 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.
31
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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/
32
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
0Importante: 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”
¾ Nos aparecerá una nueva ventana en donde tendremos que rellenar
varias casillas de título del blog y una dirección de URL.
33
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
¾ Una relleno pulsar en el botón de
ventana.
Distancia. Diseño WEB
para pasar de
¾ 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
el texto que queramos.
para comenzar a introducir
¾ 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:
34
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
¾ 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
te permite ir guardando los cambios que
que el botón
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.3. 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.
¾ Lo primero que tenemos que hacer es introducirnos en Internet y
escribir la siguiente dirección: https://www.blogger.com/start
¾ Nos aparecerá la siguiente ventana:
35
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
36
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ En esta nueva ventana tendremos que introducir los datos
correspondientes para poder crearnos como usuarios e introducirnos en el
blog.
0Importante: 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”
¾ Nos aparecerá esta nueva ventana
37
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
ventana.
para pasar de
¾ 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.
38
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
¾ Pulsar en el botón de
el texto que queramos.
Distancia. Diseño WEB
para comenzar a introducir
¾ 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
39
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
- 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.
- En la ficha Redactar la barra de herramientas sería:
Tipo de
letra
Negrita
Alineación
izquierda
Color del
texto
Alineación
centrada
Tamaño
de
Enlaces a
otras
páginas
Cursiva
letra
Numeración
Alineación
derecha
Texto entre
comillas
Añadir
Imagen
Borra
Alineación
justificada
Viñetas
Corrección
ortográfica
Añadir
Vídeo
- En la ficha Editor de HTML nos aparecería la siguiente barra de
herramientas:
Cursiva
Texto
entre
comillas
Negrita
Añadir
Imagen
Añadir
Vídeos
Enlace a
otras
páginas
Corrección
ortográfica
40
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
- 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
vayas realizando.
te permite ir guardando los cambios que
¾ 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.
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…
41
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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…
42
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
43
PROGRAMAS DE FORMACIÓN.
5.7.
©MELC S.A.
Distancia. Diseño WEB
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
d) todas las anteriores
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
44
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
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.
45
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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 ISFTIC, 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.isftic.mec.es/foros/index.html
46
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
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 foro 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
para confirmar los datos.
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.
¾ 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.
¾ Para añadir nuevo tema hay que pinchar en:
47
.
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
que se añade el mensaje al foro.
para
6.4. EJEMPLO GUIADO PASO A PASO
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://sec.magister.com.es/foro/
¾ Nos aparecerá la siguiente pantalla:
¾ Tendremos que registrarnos para poder acceder al foro y así poder
publicar nuestro comentario. Para ello tendremos que pulsar en la opción
.
48
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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)
- 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.
49
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Pulsaremos en el foro denominado “Diseño web y herramientas”, dando
un clic con el botón izquierdo del ratón.
¾ 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.
50
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
¾ 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
nuevo tema (escribiendo el título del tema como “Asunto”)
descripción (en el cuerpo de mensaje), escribir brevemente
tema de debate que quieres exponer pudiendo modificar los
barra de herramientas:
51
que exponer el
con una breve
desarrollado el
formatos en la
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Una vez realizado estos pasos tendremos que pulsar
que se quede publicado nuestro comentario en el foro.
para
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:
http://sec.magister.com.es/foro/
¾ Nos aparecerá la siguiente pantalla:
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”.
52
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
¾ 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).
- Una vez realizado estos pasos tendremos que pulsar
que se quede publicado nuestro tema en el foro.
53
para
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
54
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
6.7. AUTOEVALUACIÓN
2. 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
3. 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
4. El moderador de un foro se encarga de ...
a) abrir y cerrar el debate
b) animarlo
c) controlar las intervenciones
d) todas las anteriores
5. 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
6. 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
55
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
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
- 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
56
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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://sec.magister.com.es/chat/
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.
57
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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 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
aparece en “Administración de cuenta”.
que
¾ 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
nos informa de que hemos sido registrados correctamente.
58
, que
PROGRAMAS DE FORMACIÓN.
¾ Pulsamos el botón
entrar en el Chat.
©MELC S.A.
Distancia. Diseño WEB
para poder volver a la página principal y
¾ 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
está en la parte superior derecha de la pantalla.
que
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.
¾ 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://sec.magister.com.es/chat/
59
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Nos aparecerá la siguiente pantalla:
¾ Lo primero que tenemos que hacer es registrarnos para poder acceder
al Chat. Para ello tenemos que pulsar en la opción
aparece en “Administración de cuenta”.
que
¾ Nos aparecerá la siguiente pantalla, en donde tendremos que rellenar
los datos para poder registrarnos.
60
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
-
-
-
-
-
Distancia. Diseño WEB
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”
- 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
nos informa de que hemos sido registrados correctamente.
¾ Pulsamos el botón
entrar en el Chat.
, que
para poder volver a la página principal y
¾ 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 aparecerá los siguientes datos:
61
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
- “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
.
¾ Nos aparecerá la siguiente pantalla:
¾ 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.
para
¾ Una vez escrito el texto, tendremos que pulsar en el botón
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
está en la parte superior derecha de la pantalla.
62
que
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
7.5. AUTOEVALUACIÓN
1.
2.
3.
4.
5.
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
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
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
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
Para chatear necesitamos ...
a)
un ordenador con conexión a Internet
b)
un programa específico
c)
una cuenta de correo electrónico
d)
todas las anteriores
63
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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. Ejemplo guiado paso a paso
8.9. Descargarnos el archivo ftp.htm
8.10. Ejemplo guiado paso a paso
8.11. Autoevaluación
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.
64
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
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.
8.2. EJEMPLO GUIADO PASO A PASO
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.
Vamos a proceder a crear la carpeta, y para ello seguiremos los siguientes
pasos:
¾ Hacemos doble clic en el icono de
del botón
¾ Se nos abrirá una nueva ventana.
65
que se encuentra dentro
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
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.
¾ 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.
¾ 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.
66
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
transferencia de ficheros entre nuestro ordenador y el servidor.
hacer
la
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.
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,
67
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
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
pasar a la ventana siguiente del asistente de instalación.
para
¾ Nos aparecerá otra ventana informándonos de la ley de privacidad.
Pulsar el botón
instalación.
para pasar a la ventana siguiente del asistente de
¾ Nos aparecerá una nueva ventana en donde nos propone una ruta
para pasar a
donde guardar el programa ejecutado. Pulsar el botón
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
necesitemos o queramos.
e introducir la ruta que
¾ Nos aparecerá otra ventana en donde nos indica las condiciones de
instalación.
. Pulsar el botón
¾ Tendremos que pulsar en la opció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
instalación.
para pasar a la ventana siguiente del asistente de
¾ 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.
8.4. EJEMPLO GUIADO PASO A PASO
En este apartado vamos a realizar los pasos detalladamente de la
instalación de CORE FTP.
¾ Lo primero
funcionamiento.
sería
tener
conexión
68
a
Internet
y
verificar
su
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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…
http://www.coreftp.com/download.html
¾ Nos aparecerá esta pantalla:
del apartado Core FTP 2.0 :
¾ Tendremos que pulsar en
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.
69
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
pasar a la ventana siguiente del asistente de instalación.
70
para
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Nos aparecerá otra ventana informándonos de la ley de privacidad.
Pulsar el botón
instalación.
para pasar a la ventana siguiente del asistente de
¾ Nos aparecerá una nueva ventana en donde nos propone una ruta
donde guardar el programa ejecutado. Pulsar el botón
la ventana siguiente del asistente de instalación.
71
para pasar a
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Si queremos cambiar la ruta propuesta por el programa, sólo
tendremos que pulsar en el botón
necesitemos o queramos.
e introducir la ruta que
¾ 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.
72
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
instalación.
para pasar a la ventana siguiente del asistente de
¾ 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.
73
PROGRAMAS DE FORMACIÓN.
¾ Pulsar el botón
©MELC S.A.
Distancia. Diseño WEB
para terminar con la instalación.
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.
74
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
8.6. EJEMPLO GUIADO PASO A PASO
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
despliega la opción
y dentro del submenú que se
.
¾ Nos aparecerá una ventana en donde nos informa si queremos
registrarnos. Pulsar el botón de
.
¾ Se abrirá una ventana nueva:
75
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
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.
76
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
8.8. ESPACIO WEB EN 000webhost.com
Para poder utilizar CoreFTP necesitamos tener un espacio que permite
conecciónes ftp - por ejemplo ofrecido por el servicio de hosting: 000webhost
El procedimiento para crear una cuenta en el servicio 000webhost es el
siguiente:
77
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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 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
78
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
Nombre de subdominio
Nombre del usuario
Email
contraseña
código
Para poder seguir hay que aceptar los terminos de servicio.
Con todos los campos rellenados podemos presionar el botón
.
Tras presionar el botón se envíara a la dirección indicada anteriormente un
email de bienvenida con los datos de la cuenta:
79
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
A continuación nos aparecerá la siguiente pantalla:
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:
80
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
81
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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:
82
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
Para poder subir los ficheros entramos en File Manager pinchando en el
siguiente ícono:
83
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
confirmar la subida.
. Encontrar en nuestro ordenador los ficheros a subir y
8.9. EJEMPLO GUIADO PASO A PASO
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.
84
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño 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.
¾ 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.
85
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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 realizar los pasos necesarios para descargarnos la página ftp.htm
¾ 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):
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.
¾ Nos aparecerá la siguiente ventana:
86
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
¾ 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).
¾ Como ya tenemos seleccionado el directorio en el servidor en donde
vamos a subir el fichero, pulsar la flecha
el fichero.
“Upload” para subir al servidor
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
87
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
88
PROGRAMAS DE FORMACIÓN.
8.12
©MELC S.A.
Distancia. Diseño WEB
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
89
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
ENTREGA DE LA TAREA 1:
1. Ejercicio de herramientas didácticas en Internet
Busca en las páginas del ISFTIC 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
http://www.magister.com.es/foro
en
la
dirección
de
Internet:
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.
90
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
91
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
92
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
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.lnk
Frontpage, de Microsoft →
Dreamweaver, de Macromedia →
Dreamweaver MX 2004.lnk
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.
93
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
Flash MX 2004.lnk
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.
Hot Potatoes 6.lnk
94
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
95
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
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/Wikipedia:Portada
http://www.terra.es/,
http://www.gruposantander.es/ o
http://www.isftic.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
no utilizar
tener mucho cuidado de
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
96
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
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:
http://w3.cnice.mec.es/recursos/bachillerato/tecnologia/manual/index.html
Servidor
Carpeta:
recursos
Carpeta:
bachillerato
Carpeta:
tecnologia
Carpeta:
manual
Archivo:
index.htm
Esta URL estará en el servidor del ISFTIC (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.
97
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
10.4. AUTOEVALUACIÓN.
1. ¿Qué significa URL?
a. Uniform Resource Locutor
b. Localizador de uniforme de recursos
c. Ambas son ciertas
2. ¿Qué caracteres no se pueden utilizar como nombre de una página
Web?
a. ñ, @, /
b. Nombre en mayúsculas
c. Ambas son ciertas
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.
98
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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…
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:
99
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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>: párrafo nuevo
- <BR>: 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
- <font color="#rrggbb">: Color del texto, representado por un código hexadecimal. - <b>: Texto
en negrita
- <i>: Texto en cursiva
- <u>: Texto subrayado
100
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
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
101
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
¾ 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”)
102
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Pulsar en el botón
que es siguiente, para pasar de pantalla y
continuar con la instalación.
¾ 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.
¾ Pulsar en el botón
que es siguiente, para pasar de pantalla y
continuar con la instalación.
¾ 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.
103
PROGRAMAS DE FORMACIÓN.
¾ Pulsar en el botón
continuar con la instalación
©MELC S.A.
Distancia. Diseño WEB
que es siguiente, para pasar de pantalla y
¾ En esta nueva ventana no vamos a seleccionar nada, ya que queremos
que nos aparezca el programa tal cual aparece.
¾ Pulsar en el botón
continuar con la instalación
que es siguiente, para pasar de pantalla y
¾ Nos aparecerá la última pantalla para poder iniciar su instalación.
¾ Pulsar en el botón de
para iniciar el proceso de instalación.
104
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Una vez finalizado este proceso nos aparecerá la siguiente ventana.
¾ Pulsar en el botón de
para cerrar el programa.
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.
105
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
106
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
107
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
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
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
queremos guardar la nueva página
para
indicarle
donde
- 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
dentro de nuestra carpeta.
y ya estaría guardada la nueva página
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ú Archivo”
¾ 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.
¾ 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.
108
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
15.3. EJEMPLO GUIADO PASO A PASO
Vamos a continuación a crear unas páginas y carpetas para saber manejar
paso a paso un poquito de kompoZer.
¾ Pulsar en el “Menú Archivo”
¾ Seleccionar la opción
queremos guardar la nueva página
para
indicarle
donde
¾ Nos aparecerá la siguiente ventana:
- 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
dentro de nuestra carpeta.
y ya estaría guardada la nueva página
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:
109
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Pulsar en el “Menú Archivo”
¾ 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.
110
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
15.4. AUTOEVALUACIÓN
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…
111
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
TEMA 16: VISTA PREVIA EN EL EXPLORADOR.
16.1. Vista previa
16.2. Autoevaluación
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”
¾ Nos aparecerá la siguiente ventana:
La página aparecerá tal y como quedará una vez colgada en Internet.
112
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
16.2. AUTOEVALUACIÓN
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
113
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
TEMA 17: DESCARGA DE ARCHIVOS
17.1. Como descargarnos las imágenes necesarias para los
ejemplos y actividades
17.2. Autoevaluación
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:
http://www.google.es/
¾ Nos aparecerá la siguiente ventana:
114
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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:
115
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
¾ 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.
¾ Seleccionar
siguiente ventana
la
opción
,
nos
aparecerá
la
- 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)
116
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
MUY IMPORTANTE: Los nombres de las imágenes deben de cumplir las
siguientes normas:
Cuando guardemos nuestras imágenes, carpetas, subcarpetas y archivos
no utilizar
deberemos tener mucho cuidado de
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.
17.2. AUTOEVALUACIÓN
1. ¿Desde donde podemos acceder a buscar las imágenes?
a. Google
b. Buscador
c. Ambas son ciertas
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
117
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
TEMA 18: ELEMENTOS DE TEXTO EN UNA PÁGINA WEB
18.1. Escribir texto
18.2. Estructura de una página
18.3. Modificar texto
18.3.1. Tipo de fuente
18.3.2. Tamaño
18.3.3. Color
18.3.4. Estilo
18.4. Alineación del texto
18.5. Viñetas y numeración
18.6. Sangría
18.7. Ejemplo guiado paso a paso
18.8. Autoevaluación
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.
18.3. MODIFICAR TEXTO
En este apartado vamos a ver como podemos modificar los formatos del
texto para mejorar su presentación.
18.3.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
118
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
Forma 2ª:
¾ Seleccionar el texto al cual vamos a cambiar el tipo de
fuente.
¾ Ir a la barra de herramientas
derecha
disponibles.
¾ Pulsar en la flecha que nos aparece en la parte de la
y se despliega un submenú con todos los tipos de fuente
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.3.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.
119
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
También podemos acceder mediante los iconos
texto
“disminuir
aumentar texto.
18.3.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.3.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.
120
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
¾ A continuación vamos a explicar estas opciones:
: nos permite añadir un grosor mayor
al texto independientemente del color que tenga ésta. Negrita
seleccionado. Cursiva
nos permite poner en cursiva el texto
del texto seleccionado. Subrayado
nos permite añadir subrayado debajo
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
-
, nos permite poner el texto por debajo de
índice
otro texto. Super
otro texto. Subíndice
También podemos acceder a algunas de estos estilos desde
la barra de herramientas.
Negrita
Subrayado
Cursiva
18.4. 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ú
”
121
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
¾ Se despliega un submenú
alineaciones que detallo a continuación
en
donde
podremos
elegir
varias
- Alineación Izquierda o el icono de la barra de herramientas
permite alinear el texto a la izquierda.
nos
- “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.5. 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
directamente la opción de “números” o “símbolo”
iconos,
nos
aparecerá
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
predeterminada por defecto.
“Viñetas”
122
y
nos
aparecerá
la
viñeta
PROGRAMAS DE FORMACIÓN.
la
©MELC S.A.
Distancia. Diseño WEB
¾ Vamos a cambiar la viñeta. Pulsar en el “Menú Formato” y seleccionar
opción “Lista”. Dentro del submenú que aparece pulsar en
.
¾ 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
18.6. SANGRÍA
Si queremos aumentar la sangría del texto, podremos realizarlo desde las
y “desangrar texto”
. Estas opciones nos
opciones “Sangrar texto”
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.
18.7. EJEMPLO GUIADO PASO A PASO
¾ 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”
123
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
(tenga en cuenta que en realidad la página se guardará
“pagina_ejemplo1.html” donde .html es la extensión de la página)
como
¾ 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,
¾ 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.
124
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
¾ 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.
125
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
- 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
fuentes de las que disponemos.
para que nos aparezca todas las
- 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.
También podemos acceder mediante los iconos
aumentar texto.
“disminuir 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
.
126
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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”
seleccionado.
, nos permite poner en cursiva el texto
- La opción “Subrayar”
texto seleccionado.
, nos permite añadir subrayado debajo del
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.
127
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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”
“Alineación centrada”
los extremos.
“Alineación justificada”
como a la izquierda.
: nos permite alinear el texto a la derecha.
: nos permite alinear el texto desde el centro hacía
: nos permite alinear el texto tanto a la derecha
También podemos acceder a estas opciones desde el “Menú Formato”,
seleccionar
opciones.
y se despliega un submenú con las siguientes
- 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.
128
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
- Selecciona la opción “Viñetas”
predeterminada por defecto.
Distancia. Diseño WEB
y nos aparecerá la viñeta
- Vamos a cambiar la viñeta. Pulsar en el “Menú Formato” y seleccionar
la opción “Lista”. Dentro del submenú que aparece pulsar en
.
- 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)
129
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
18.8. AUTOEVALUACIÓN
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.
130
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
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,
¾ Ficha “Ubicación”:
131
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
- 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
¾
cambios.
Pulsar el botón
para verificar que queremos realizar los
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:
¾ 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”
132
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
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
realizado.
para verificar los cambios que hemos
133
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
¾ 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.
19.5. EJEMPLO GUIADO PASO A PASO
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”
134
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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”:
- 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:
135
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
19.6. AUTOEVALUACIÓN
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
c. Ambas son ciertas
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
136
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
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
pulsar el icono de la barra de herramientas
¾ Nos aparecerá la siguiente ventana
137
o bien
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
20.2.
EJEMPLO GUIADO PASO A PASO
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”
¾ 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
¾ Nos aparecerá la siguiente ventana
¾ En “Ubicación de enlace” vamos a escribir http://www.google.es
¾ 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.
¾ Clic sobre el enlace que acabamos de escribir, y se nos tendrá que abrir
el buscador de google.
138
PROGRAMAS DE FORMACIÓN.
20.3.
©MELC S.A.
Distancia. Diseño WEB
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
¾ Pulsar en el “Menú Insertar” y seleccionar la opción
o bien
pulsar el icono de la barra de herramientas
¾ Nos aparecerá esta ventana:
¾ Pulsamos en la carpeta que aparece en la parte izquierda
seleccionar la página con la que queremos enlazar.
, para
¾ Se rellena con el nombre de la página que queremos que se abra
cuando pulsemos sobre él.
¾ 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.
¾ Cuando pulsamos sobre el enlace que acabamos de crear, nos debería
aparecer la página que teníamos creada con anterioridad.
20.4.
EJEMPLO GUIADO PASO A PASO
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
139
PROGRAMAS DE FORMACIÓN.
Distancia. Diseño WEB
©MELC S.A.
¾ Pulsar en el “Menú Insertar” y seleccionar la opción
o bien
pulsar el icono de la barra de herramientas
¾ 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.
¾ 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.
¾ Cuando pulsamos sobre el enlace que acabamos de crear, nos debería
aparecer la página que teníamos creada con anterioridad.
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”
barra de herramientas.
que se encuentra en la
… otra manera de acceder a esta opción es mediante la barra de
menús.
140
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
¾ Nos aparecerá el ancla
para verificar el nombre y el enlace.
delante del texto.
¾ 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.
141
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
20.6.
EJEMPLO GUIADO PASO A PASO
¾ 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”
barra de herramientas.
que se encuentra en la
… 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”
142
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Nos aparecerá una nueva ventana para añadir el texto para identificar
el nombre del enlace, escribir: “SUBIR”
¾ Pulsar el botón
¾ Nos aparecerá el ancla
para verificar el nombre y el enlace.
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”
143
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Pulsar la opción “Crear enlace” y nos aparecerá la siguiente ventana.
¾ 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.
144
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
“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
¾ 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.
¾ Clic sobre el “Menú Insertar”
¾ 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.
145
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Seleccionar la imagen que nos aparecerá y pulsando sobre ella nos
trasladará a la parte de la hoja que hemos seleccionado con anterioridad
¾ Pulsar en el botón
¾ Nos aparecerá una ventana para introducir el “Texto Alternativo”.
Escribir el texto en caso de querer que aparezca.
¾ Pulsar en el botón
¾ Selecciona la imagen que acabamos de insertar y pulsa en botón
derecho del ratón sobre la imagen para acceder al “Menú contextual”.
¾ Seleccionar la opción
¾ 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”
146
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Guardar todos los cambios y pulsar la tecla de función “F5”.
20.8.
EJEMPLO GUIADO PASO A PASO
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”
147
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
¾
Clic sobre el “Menú Insertar”
¾
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.
¾ En la ventana que nos aparece a continuación tendremos que abrir
la carpeta que tenemos descargada del servidor denominada “imágenes_
ejemplo”.
148
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Seleccionar de la imagen “flecha_subir” o la imagen que vayas a
usar (que se debería encontrar en “C:\ curso_web\”)
¾
Pulsar en el botón
¾ Nos aparecerá una ventana para introducir el “Texto Alternativo”.
Escribir “Flecha Arriba”
¾
Pulsar en el botón
¾ Selecciona la imagen que acabamos de insertar y pulsa en botón
derecho del ratón sobre la imagen para acceder al “Menú contextual”.
¾
Seleccionar la opción
¾ 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”
149
PROGRAMAS DE FORMACIÓN.
¾
©MELC S.A.
Distancia. Diseño WEB
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”
¾ Nos aparecerá la siguiente ventana:
¾ Vamos a escribir en “Texto de enlace”
¾ En “Ubicación del enlace” escribir el e-mail de la persona.
¾ Activar la casilla
el programa reconozca es un correo electrónico.
¾ Pulsar en el botón
¾ Guardar la página y pulsar la tecla de función “F5”
150
para que
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
20.10. EJEMPLO GUIADO PASO A PASO
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”
¾ Nos aparecerá la siguiente ventana:
¾ Vamos a escribir en “Texto de enlace” “E-mail”
¾ En “Ubicación del enlace” escribir: [email protected]”.
¾ Activar la casilla
el programa reconozca es un correo electrónico.
¾ Pulsar en el botón
¾ Guardar la página y pulsar la tecla de función “F5”
151
para que
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
20.11. AUTOEVALUACIÓN
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
152
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
TEMA 21: ROLL – OVER
21.1. Roll – Over de texto
21.2. Ejemplo guiado paso a paso
21.3. Autoevaluación
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
¾ Seleccionar el texto que acabamos de escribir
¾ Pulsar el botón derecho del ratón para acceder al “Menú contextual”
¾ Seleccionar la opción
¾ Nos aparecerá la siguiente ventana nueva.
153
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
¾ Pulsar en el botón
¾ Teniendo seleccionado el texto, clic en el “Menú Formato” y seleccionar
la opción
¾ Se abrirá la siguiente pantalla:
¾ 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
queremos insertar.
¾ Pulsar el botón
y especificar la ruta en donde esté la imagen que
para verificar que queremos los cambios.
¾ Guardar la página y pulsar la tecla “F5”
154
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
21.2. EJEMPLO GUIADO PASO A PASO
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”
¾ Seleccionar el texto que acabamos de escribir
¾ Pulsar el botón derecho del ratón para acceder al “Menú contextual”
¾ Seleccionar la opción
¾ Nos aparecerá la siguiente ventana nueva.
155
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
¾ Pulsar en el botón
¾ Teniendo seleccionado el texto de “ROLL – OVER DE TEXTO”, clic en el
“Menú Formato” y seleccionar la opción
¾ Se abrirá la siguiente pantalla:
¾ Vamos a modificar el vínculo con distintos colores y fuentes:
- En “Texto normal” vamos a seleccionar un color “Azul”
en
- En “Color del vínculo” Seleccionar un color “Rojo”, tendréis que pulsar
. 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
queremos insertar.
¾ Pulsar el botón
y especificar la ruta en donde esté la imagen que
para verificar que queremos los cambios.
156
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ Guardar la página y pulsar la tecla “F5”
¾ Clic sobre el Roll – Over de texto para ver los cambios realizados.
21.3. AUTOEVALUACIÓN
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.
157
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
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
Nos aparecerá la siguiente ventana
158
PROGRAMAS DE FORMACIÓN.
¾
En
Distancia. Diseño WEB
©MELC S.A.
tenemos la opción de
, si pulsamos en el
, se desplegará una paleta de
cuadro que aparece en su línea
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
y se abrirá una nueva ventana.
aparece en la parte de la derecha
¾
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.
Para ellos seguimos los siguientes pasos:
¾ Abrir la página en donde queremos modificar el fondo
¾ Pulsar en el “Menú
” y seleccionar la opción
159
PROGRAMAS DE FORMACIÓN.
¾
©MELC S.A.
Distancia. Diseño WEB
Nos aparecerá la siguiente ventana
¾ 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:
- 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.
160
PROGRAMAS DE FORMACIÓN.
¾
©MELC S.A.
Distancia. Diseño WEB
Una vez que hemos elegido los colores que queremos pulsar en el
botón de
22.3. EJEMPLO GUIADO PASO A PASO
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”.
¾ Pulsar en el “Menú
” y seleccionar la opción
¾ Nos aparecerá la siguiente ventana
161
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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
¾ Ahora vamos a insertar una imagen de fondo. Para ellos tendrás que
pulsar en la carpeta
que aparece al lado de
162
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
163
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
22.4. AUTOEVALUACIÓN
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
164
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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
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.
¾ 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.
165
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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.
¾ 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…
166
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
23.3. EJEMPLO GUIADO PASO A PASO
¾ 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.
… 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.
167
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
… 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.
… 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:
168
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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…
23.4. AUTOEVALUACIÓN
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
169
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
24.2. EJEMPLO GUIADO PASO A PASO
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
.
¾ 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.
170
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño 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.
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
171
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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:
- flechaarriba.jpg
- flechabajar.jpg
- lobo1.jpg
- lobo2.jpg
- lobo3.jpg
- tarea2.html
172
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
¾ 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:
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
173
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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/tare
a2.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.
174
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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:
175
PROGRAMAS DE FORMACIÓN.
©MELC S.A.
Distancia. Diseño WEB
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.
176

Documentos relacionados