1. Reforma Curricular del Bachillerato Tecnológico
Estructura y Programas de Estudio de la
Carrera de Técnico en Informática
Profesores que elaboraron la guía didáctica del
módulo profesional de la carrera de técnico en:
Informática
NOMBRE ESTADO
Ilych Antonio Ramos Guardado Nayarit
Sergio Anonales Figueroa Morelos
Artemio Lemus Ruiz Michoacán
Víctor Puc Ibarra Yucatán
Maria Félix Roldan López Hidalgo
Javier Sánchez Pérez Chihuahua
Sonia Patricia Ramos Saucedo Coahuila
Coordinadores de Diseño:
NOMBRE ESTADO
Ismael Lee Cong Quintana Roo
Manuel Gilberto Méndez Monforte Yucatán
Julio César Flores Olivares Nayarit
Coordinador del Componente de Formación
Profesional:
NOMBRE
Espiridión Licea Pérez
2. Directorio
Lic. Josefina Vázquez Mota
Secretario de Educación Pública
Dr. Miguel Székely Pardo
Subsecretaria de Educación Media Superior
Lic. Luís F. Mejía Piña
Director General de Educación Tecnológica
Industrial
Antrop. Ana Belinda Ames Russek
Coordinadora Nacional de Organismos
Descentralizados Estatales de CECyTEs
Lic. Elena Karakowsky Kleyman
Responsable de Desarrollo Académico de los
CECyTEs
Profr. Espiridión Licea Pérez
Responsable de Normatividad Académica de
los CECyTEs
3. Objetivo General
Una vez concluido este submódulo tendrás las capacidades y competencias
necesarias para utilizar diferentes servicios de la red Internet así como sus
protocolos y lenguajes, diseñar páginas web tanto en hipertexto como en un
editor visual y que incluyan elementos multimedia como video, sonido y
animaciones; asimismo, podrás montar páginas en un servidor web. Para lo
anterior es necesario auxiliarte de las competencias desarrolladas en los
submódulos 1 y 2, de este mismo módulo y del idioma inglés. Actividades
como diseño y montaje de páginas web en un servidor requieren cierto
grado de responsabilidad y autonomía, en virtud de lo cual esta
competencia está considerada en el nivel 2.
4. Índice
Contiene los siguientes apartados:
I. Mapa curricular.
II. Introducción al curso.
III. Desarrollo de competencias.
IV. Conclusiones de la guía de aprendizaje.
V. Fuentes de información.
VI. Glosario.
VII. Anexos.
5. Mapa Curricular
CARRERA
Técnico en informática.
MÓDULO II
Software de diseño
SUBMÓDULO III
Elaborar páginas Web utilizando las
aplicaciones actuales
COMPETENCIA 1 COMPETENCIA 2 COMPETENCIA 3
Utilizar los servicios de Internet. Manejar protocolos y lenguajes de Programar en un lenguaje de
Internet. hipertexto.
HABILIDADES Y DESTREZAS
• Manipular correo electrónico. HABILIDADES Y DESTREZAS
• HABILIDADES Y DESTREZAS
• Manipular Microsoft Outlook Express. Diseñar formularios.
• • Insertar etiquetas principales.
• Manejar Eudora. Crear hipertexto.
• • Insertar vínculos e hipervínculos.
• Manejar FTP. Utilizar servidores Web.
• • Manejar etiquetas secundarias.
• Navegar por Internet. Manejar protocolos.
• • Agregar marquesinas.
• Manipular Netmeeting. Manejar el lenguaje http.
• • Diseñar tablas.
• Manejar la mensajería instantánea. Manejar el lenguaje HTML.
• Manejar el lenguaje DHTML. • Insertar Imágenes, sonido y video.
• Buscar información en Internet.
• Insertar caracteres especiales.
CONOCIMIENTOS
CONOCIMIENTOS • Teorías del diseño CONOCIMIENTOS
• Navegadores. (Minimalismo, • Editores de texto
• Internet Explorer. Conceptualismo). • Lenguaje de hipertexto
• Buscadores en Internet. • Funciones de diseño • Estructura de una página
(necesidades, impacto, Web
• Metabuscadores.
enfoque). • Vínculos e hipervínculos
• Tipos de buscadores.
• Diseño de formatos (zonas • Navegadores de Internet
• Riesgos y seguridad en Internet.
• Sistemas de comunicación personal. áureas, dirección y sentido,
• World Wide Web. equilibrio).
• Teoría del color (circulo ACTITUDES
• Protocolos de Internet (http, https, ftp, • Orden.
telnet, mailto). cromático, RGB (Red, Green,
Blue), CMY (Cyan, Magenta,
Yellow), contrastes).
ACTITUDES ACTITUDES
• Responsabilidad. • Responsabilidad.
Página 5 de 129
6. Mapa Curricular
CARRERA
Técnico en informática.
MÓDULO II
Software de diseño
SUBMÓDULO III
Elaborar páginas Web utilizando las
aplicaciones actuales
COMPETENCIA 4 COMPETENCIA 5 COMPETENCIA 6
Diseñar una página Web en un editor Crear hipervínculos. Crear vínculos Web.
visual.
HABILIDADES Y DESTREZAS HABILIDADES Y DESTREZAS HABILIDADES Y DESTREZAS
• Manipular el software de diseño. • Insertar marcadores. • Crear vínculos a otros documentos
• Ubicar los elementos de la pantalla. • Habilitar los efectos de en Web.
• Insertar componentes. conversión de hipervínculos. • Crear vínculos y anclas.
• Manipular la barra de Insertar (Común, • Manipular la conexión a las • Crear la estructura de una URL.
Diseño, Formularios, Texto, HTML, páginas Web. • Utilizar el protocolo http.
Aplicación, Elemento Flash y Favoritos.) • Vincular archivos.
• Administrar sitios Web. • Utilizar el protocolo mailto.
• Crear tablas. CONOCIMIENTOS • Realizar listas vinculadas.
• Insertar imágenes. • Direcciones absolutas y • Vincular tablas.
• Insertar comentarios. relativas • Vincular imágenes.
• Anexar contadores de visitas. • Hipervínculos • Vincular sonidos.
• Administrar titulares. • Vincular videos.
• Insertar fecha y hora.
• Adicionar marquesinas. ACTITUDES
• Manipular botones activables. • Orden.
CONOCIMIENTOS
• Insertar aplicaciones multimedia. • Creación de vínculos
• Crear formularios para manipular bases • Lenguaje html
de datos. • Protocolos de Internet
• Insertar marcos
CONOCIMIENTOS ACTITUDES
• Diseño de una página Web. • Responsabilidad.
• Etiquetas del lenguaje de hipertexto.
• Aplicaciones multimedia.
• Formularios.
• Estructura de una base de datos.
• Funciones de las barras de
herramientas.
ACTITUDES
• Orden.
Página 6 de 129
7. Mapa Curricular
CARRERA
Técnico en informática.
MÓDULO II
Software de diseño
SUBMÓDULO III
Elaborar páginas Web utilizando las
aplicaciones actuales
COMPETENCIA 7
Almacenar páginas en un servidor
Web.
HABILIDADES Y DESTREZAS
• Manipular un FTP anónimo.
• Manipular un FTP no anónimo.
• Almacenar las páginas Web en
un servidor dedicado o gratuito.
CONOCIMIENTOS
• Protocolo FTP
• Manejo de utilerías FTP
• Buscadores de Internet
• Servidores de Internet
ACTITUDES
• Responsabilidad.
Página 7 de 129
8. Un mensaje para ti
De nueva cuenta tenemos la oportunidad de encontrarnos. Ya llevas un buen
tramo recorrido de tu formación en la informática. A lo largo de todo este tiempo
seguramente has adquirido muchos conocimientos y has desarrollado
muchísimas habilidades y destrezas para desempeñarte fácilmente en esta área
tan complicada. Ahora mismo, te encuentras cursando el segundo módulo
llamado software de diseño
Sin embargo debes tener claro que en la informática nada, absolutamente nada
puede permanecer estático, al contrario todo esta en constante cambio. Por eso,
ahora tenemos la oportunidad de poner en tus manos una nueva guía de
aprendizaje, con la cual seguramente podrás realizar una serie de actividades
que te permitirán aumentar tus conocimientos y desarrollar tus destrezas en la
informática, pero más específicamente en la creación de páginas Web utilizando
las aplicaciones actuales.
Este tercer submódulo tiene por lo tanto la finalidad de que al término del mismo
seas capaz de crear páginas web en aplicaciones como editores visual y que se
vean enriquecidas con elementos multimedia como video, texto, sonido y
animación.
Obviamente el campo de trabajo para esta área es muy grande, pero
resumiendo te podemos mencionar que con lo visto aquí, podrás colocarte a
trabajar en áreas donde se
desarrollen páginas Web
utilizando diseños gráficos, como
son: empresas de publicidad, de
comunicación, imprentas, oficinas
de servicios públicos y privados e
instituciones educativas y
autoempleo.
Debemos recordar que este
submódulo está muy relacionado
con otros dos que en su conjunto
forman el módulo de software de
diseño; te invitamos a que
analices la figura siguiente para
que veas dicha relación.
Todas las competencias que se integran el submódulo serán desarrolladas en
un contexto práctico, ello en función de que los sitios de inserción laboral para
esta área exigen que demuestres las capacidades y habilidades de
competencia, bajo estas características; sin olvidar la aplicación de
Página 8 de 129
9. conocimientos de formación básica como el idioma Inglés, ortografía y
gramática, así como herramientas tecnológicas como el Internet.
En función de la disponibilidad tecnológica del plantel, así como de la iniciativa y
perseverancia en tu propia formación, se plantea que todas las actividades
incluidas en esta guía de aprendizaje las desarrolles en áreas de cómputo del
plantel, o en su caso, espacios públicos o privados que te permitan acceder a
esta tecnología.
Como parte de la evaluación necesaria para determinar si ya lograste ser
competente en esta área de formación, te planteamos observar las siguientes
evidencias:
1. Los servicios de Internet utilizados.
2. Los protocolos y lenguajes de Internet manejados.
3. El hipertexto programado en un lenguaje.
4. La página Web diseñada en un editor visual.
5. Los hipervínculos creados.
6. Los vínculos Web creados.
7. Las páginas almacenadas en un servidor Web.
Página 9 de 129
11. Competencias, habilidades y destrezas
Módulo I Software de Diseño.
Submódulo III Elaborar páginas Web utilizando las aplicaciones actuales.
1. Utilizar los servicios de Internet.
2. Manejar protocolos y lenguajes de Internet.
3. Programar en un lenguaje de hipertexto.
Competencias
a Desarrollar
4. Diseñar una página Web en un editor visual.
5. Crear hipervínculos.
6. Crear vínculos Web.
7. Almacenar páginas en un servidor Web.
COMPETENCIA I Utilizar los servicios de Internet.
Introducción
B
envenido!!! Este Submódulo III, te
permitirá desarrollar las habilidades
y destrezas para que puedas
Elaborar páginas Web utilizando las
aplicaciones Actuales.
Vamos a desarrollar la primera
competencia con los ejercicios y prácticas
que te proponemos, además de tu empeño
y entusiasmo lograremos desarrollar las habilidades y destrezas para: Manipular
el correo electrónico, el Microsoft Outlook Express, el Eudora, el protocolo
FTP, navegar por Internet, manejar la mensajeria instantánea, así como buscar
información en Internet.
Es importante manejar estas habilidades y destrezas debido a que los servicios
de Internet se manejan en cualquier ámbito laboral.
Recuerda que todo esfuerzo de nuestra parte resultará infructuoso sin la
participación entusiasta y sin la iniciativa de tu parte, por lo que te invitamos a
que continúes trabajando con el mismo ánimo con que lo has hecho hasta ahora
en tu formación profesional.
Página 11 de 129
12. 1. Manipular correo electrónico.
HABILIDAD 2. Manipular Microsoft Outlook Express.
3. Manejar Eudora.
Vamos a iniciar nuestro trabajado ayudándote a desarrollar
las primeras habilidades, para que tú puedas manipular el
RESULTADO DE
correo electrónico, que es uno de los principales medios de
APRENDIZAJE comunicación en Internet utilizado para enviar y recibir
información en algunos de los principales clientes de correo
Electrónico.
Desarrollo
El conocimiento previo que debes
tener para desarrollar esta habilidad
es el manejo del sistema operativo,
así como de los navegadores de
Internet.
EJEMPLO 1
Casi todos los proveedores de correo dan el servicio de
correo Web (webmail): Permiten enviar y recibir correos
mediante una página Web diseñada para ello, y por tanto
usando sólo un programa navegador Web.
El correo Web es cómodo para mucha gente, porque permite
ver y almacenar los mensajes desde cualquier sitio (en un
servidor remoto, accesible por la página web) en vez de en
un ordenador personal concreto.
Como desventaja, es difícil de ampliar con otras
funcionalidades, porque la página ofrece unos servicios
concretos y no podemos cambiarlos. Además, suele ser más
lento que un programa de correo, ya que hay que estar
continuamente conectado a páginas Web y leer los correos
de uno en uno.
En la siguiente figura se muestra la estructura de un
programa para enviar un correo electrónico, comenta con tus
compañeros y describe su funcionalidad:
Página 12 de 129
13. EJEMPLO 2
Observa las dos figuras siguientes y comenta con tus
compañeros cuales son las diferencias y semejanzas entre
dos de los proveedores de correo gratuitos.
Destinatario: una o varias direcciones de correo a las que
ha de llegar el mensaje.
Asunto: una descripción corta que verá la persona que lo
reciba antes de abrir el correo.
El propio mensaje. Puede ser sólo texto, o incluir formato, y
no hay límite de tamaño. Además, se suele dar la opción de
incluir archivos adjuntos al mensaje. Esto permite traspasar
datos informáticos de cualquier tipo mediante el correo
electrónico.
Para especificar el destinatario del mensaje, se escribe su
dirección de correo en el campo llamado Para dentro de la
interfaz (ver imagen de arriba). Si el destino son varias
personas, normalmente se puede usar una lista con todas las
direcciones, separadas por comas o punto y coma.
Además del campo Para existen los campos CC y CCO, que
son opcionales y sirven para hacer llegar copias del mensaje
a otras personas:
Campo CC (Copia de Carbón): Quienes estén en esta lista
recibirán también el mensaje, pero verán que no va dirigido a
ellos, sino a quien esté puesto en el campo Para. Como el
campo CC lo ven todos los que reciben el mensaje, tanto el
destinatario principal como los del campo CC pueden ver la
lista completa.
Campo CCO (Copia de Carbón Oculta): Una variante del
CC, que hace que los destinatarios reciban el mensaje sin
aparecer en ninguna lista. Por tanto, el campo CCO nunca lo
ve ningún destinatario.
Página 13 de 129
14. EJERCICIO 1
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica en donde se de de alta una
cuenta de correo electrónico gratuito, asi como el enviar y
descargar correos anexando y descargando archivos, en por
lo menos dos de los principales proveedores de este servicio:
Yahoo y Hotmail. Indicando las ventajas y desventajas de
cada uno de ellos.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Genera una cuenta de correo en Hotmail, que sea
fácil de recordar para ti, en caso de que ya la tengas, revisa
que este activa. Ya que proporcionarás la dirección de correo
al profesor.
Página 14 de 129
15. EJERCICIO 2
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Solicita a los alumnos la
cuenta de correo realizada en hotmail y enviales un correo
solicitando investiguen esta información:
Es importante recordar al alumno que si por error escribe mal
la dirección de correo la información no llega al destino
solicitado.
Instrucciones para el alumno.- Revisa tu correo
electrónico, busca la información solicitada por el docente y
envíala como archivo anexo, editando dicha información en
cualquier editor de texto.
EJEMPLO 3
Los clientes de correo electrónico, son programas para
gestionar los mensajes recibidos y poder escribir nuevos
mensajes.
Suelen incorporar muchas más funcionalidades que el correo
Web, ya que todo el control del correo pasa a estar en el
ordenador del usuario. Por ejemplo, algunos incorporan
potentes filtros anti-spam.
El funcionamiento de un programa de correo es muy
diferente al de un correo Web, ya que un programa de correo
descarga de golpe todos los mensajes que tenemos
disponibles, y luego pueden ser leídos sin estar conectados a
Internet (además, se quedan grabados en el ordenador). En
cambio, en una página Web se leen de uno en uno, y hay
que estar conectado a la red todo el tiempo.
Algunos ejemplos de programas de correo son: Mozilla
Thunderbird, Outlook Express y Eudora.
Observa las figuras siguientes y comenta con tus
compañeros cuales son las diferencias y semejanzas entre
dos de los programas de correo gratuitos.
Página 15 de 129
16. Microsoft Outlook Mozilla Thunderbird
Eudora
EJERCICIO 3
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica en donde se de de alta una
cuenta de correo electrónico gratuito, que permita ser
configurado en un programa cliente de correo, en por lo
menos uno de los clientes de este servicio: Microsoft Outlook
Express y Eudora.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Página 16 de 129
17. PRÁCTICA 1
Competencia I.- Utilizar los servicios de Internet.
Habilidades.-
1. Manipular correo electrónico.
2. Manipular Microsoft Outlook Express.
3. Manejar Eudora.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Proporcione un correo
electrónico al grupo.
Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: GUÍA DE OBSERVACIÓN: TINF-
04/M2S3/ED1-3.
Instrucciones para el alumno.-
1. Realiza una cuenta gratuita de Correo electrónico que
permita ser configurada en un programa cliente.
2. Configura en un programa cliente de correo electrónico,
con la cuenta de correo antes creada.
3. Escribe tu nombre completo en algún procesador de
textos y envíalo como archivo anexo a tu profesor.
4. Llama al docente para que te revise la práctica.
HABILIDAD 4. Manipular FTP.
Vamos a iniciar nuestro trabajado ayudándote a desarrollar la
RESULTADO DE habilidad para que puedas cargar y descargar archivos por
APRENDIZAJE
medio del ftp (protocolo de transferencia de archivos), e
información en un servidor utilizando alguna aplicación
cliente.
Desarrollo
El ftp: (File Transfer Protocol), utilizará el protocolo FTP de
transferencia de ficheros. Se utilizará cuando la información que
se desee acceder se encuentre en un servidor de ftp. Por defecto
se accederá a un servidor anónimo (anonymous), si se desea
indicar el nombre de usuario se usará:
ftp://máquina.dominio@usuario, y luego le pedirá la clave de
acceso.
Página 17 de 129
18. EJEMPLO 4
Observa la siguiente pantalla, es un programa cliente FTP
llamado Ipswitch WS_FTP para la transferencia de archivos.
EJERCICIO 3
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica para la utilización de algún
programa FTP donde se explique como enviar y bajar
información.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
PRÁCTICA II
Competencia I.- Utilizar los servicios de Internet.
Habilidades.-
4. Manejar Ftp.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Proporcione una dirección
de Internet o la dirección de un servidor, donde el alumno
puede subir y bajar información. Utilizando cualquier
programa FTP.
Página 18 de 129
19. Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: GUÍA DE OBSERVACIÓN: TINF-
04/M2S3/ED1-3.
Instrucciones para el alumno.-
1. Inicia el programa ftp indicado por el docente.
2. Genera un documento en un procesador de textos con tu
nombre.
3. Transfiere el archivo generado anteriormente vía ftp al
sitio o dirección indica por el docente.
4. Descarga el archivo indicado por el docente vía ftp.
5. Llama al docente para que te revise la práctica.
5. Navegar por Internet.
HABILIDAD 6. Manejar la mensajería instantánea.
7. Buscar información en Internet.
En esta habilidad lograremos que tú puedas navegar por
RESULTADO DE
Internet utilizando varios de sus servicios como: Foros de
APRENDIZAJE discusión, el chat y la mensajería instantánea, además de la
búsqueda de información.
Desarrollo
Web (World Wide Web) en ocasiones se utiliza la palabra Web como sinónimo de Internet.
El hipertexto es lo que permite que al hacer clic en una palabra o gráfico pasemos de la página en
la que estamos a otra página distinta.
¿Quién y cómo se crea la información en Internet?
Los servidores de Internet pertenecen a las universidades, las instituciones públicas y a las
empresas. Las empresas de hospedaje o Hosting venden espacio a otras empresas o a particulares.
Pero también hay servidores gratuitos que alojan páginas personales a cambio de publicidad.
Un Buscador, es una herramienta que permite buscar información en toda la Internet a partir de
unas palabras que se introducen describiendo lo que se busca.
Las URL se utilizarán para definir el documento de destino de los hiperenlaces, para referenciar los
gráficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. El formato de
una URL será: servicio://máquina.dominio:puerto/camino/fichero.
Página 19 de 129
20. EJEMPLO 5
TIPOS DE BUSCADORES
Aunque algunos buscadores utilizan conjuntamente varios de
los métodos que vamos a describir a continuación resulta útil
conocer cada forma distinta de buscar.
Buscadores por palabras clave. Son los buscadores más
comunes, el usuario introduce una palabra clave y el motor
del buscador examina su base de datos para mostrar las
páginas encontradas.
Buscadores por categorías. Estos buscadores que están
organizados por tópicos de conocimiento de forma que al
elegir una opción nos envía a otra página con más
categorías, así sucesivamente podemos llegar a ver las
páginas que existen sobre un tema muy concreto; por
ejemplo, deportes – deportes extremos - parapente - vuelo
libre. Es decir en estos buscadores se puede buscar
eligiendo categorías en lugar de introducir palabras claves.
Metabuscadores. Se podrían llamar también buscadores
múltiples ya que realizan varias búsquedas simultáneas en
los demás buscadores y muestran los resultados ordenados
por buscador.
Buscadores específicos. Son buscadores que sólo
contienen información sobre un tema concreto, por ejemplo,
buscadores de legislación, buscadores de libros, etc.
También incluimos en este tipo las páginas recopilatorias de
páginas Web sobre temas concretos, por ejemplo de
recursos gratis.
En la siguiente figura se muestran algunos de los buscadores
mas comunes, observa y comenta con tus compañeros,
cuales son sus semejanzas y diferencias.
Página 20 de 129
22. EJERCICIO 4
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica para buscar información, en los
diferentes tipos de buscadores:
o Buscadores por palabra clave.
o Buscadores por categorias.
o Metabuscadores.
o Buscadores específicos.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
EJERCICIO 5
Material de Apoyo.- Computadora e Internet.
Instrucciones para el alumno.-
1. Investiga lo siguiente en Internet en por lo menos 3
buscadores: FACTORES PARA ELEGIR UN BUEN
BUSCADOR. SERVICIOS QUE PROPORCIONA EL
INTERNET.
2. En un documento del procesador de textos, copia y pega
la información generada por los tres buscadores.
3. Anota las direcciones o referencias de las páginas a las
que te envió el buscador.
4. Lee detalladamente la información encontrada en los tres
buscadores, compara y genera tu propia conclusión
apoyándote en ellas.
5. Coloca de encabezado tu nombre en el archivo, guarda e
imprime tu documento para entregárselo a tu profesor.
Instrucciones para el docente.- Revisa que la práctica del
alumno cumpla con lo requerido, cuidando ortografía y
gramática, además de tomar en cuenta la limpieza del
trabajo, realimentando las posibles contingencias.
Página 22 de 129
23. Recuerda que la información en Internet la generamos todos, y
no siempre esta correcta, por eso es importante compararla
con otra búsqueda.
Tampoco la información que encontramos primero es la mas
completa, ni tampoco entre mas encontremos es mejor y no
basta con solo copiar y pegar si no que tenemos que
seleccionar y depurar la información para que no lleve basura.
No olvides anotar siempre la dirección o referencia de la página
en donde encontraste esa información.
EJEMPLO 6
Los foros en Internet son también conocidos como foros de
mensajes, de opinión o foros de discusión y son una
aplicación Web que le da soporte a discusiones en línea.
Por lo general los foros en Internet existen como un
complemento a un sitio Web invitando a los usuarios a
discutir o compartir información relevante a la temática del
sitio, en discusión libre e informal, con lo cual se llega a
formar una comunidad en torno a un interés común.
Un foro en Internet, comúnmente, permite que el
administrador del sitio defina varios foros sobre una sola
plataforma. Éstos funcionarán como contenedores de las
discusiones que empezarán los usuarios; otros usuarios
pueden responder en las discusiones ya comenzadas o
empezar unas nuevas según lo crean conveniente.
Veamos algunos ejemplos de foros de discusión o consulta:
http://www.forosdelweb.com/ http://www.lawebdelprogramador.com/news/
Página 23 de 129
24. EJERCICIO 6
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica en la realización de un foro, en
alguna página gratuita en donde se permita, para esta
asignatura. Una vez registrada la dirección de foro, dar de
alta el registro de todos los estudiantes del grupo y generar
la participación en los siguientes temas al menos: el servicio
de internet y la verdad de sus contenidos, los foros como
medio de aprendizaje.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Y una vez generado el grupo, date de alta en el
mismo para ser un participante.
EJEMPLO 7
MENSAJERÍA INSTANTÁNEA
Los mensajeros instantáneos son programas que utilizan el
protocolo TCP IP y sirven para enviar y recibir mensajes
instantáneos con otros usuarios conectados a Internet u
otras redes, además de saber cuando están disponibles para
hablar.
Página 24 de 129
25. La mensajería instantánea tiene la característica de que
cuando llega un correo nos avisa en el mismo instante,
también nos informa cuando se conecta algún miembro de
una lista de usuarios que nosotros habremos creado
previamente. En ese momento podemos decidir escribirle
un correo o establecer una conversación como en un
Chat, enviar un archivo, establecer un conversación de voz
así como activar una cámara Web.
El Chat en inglés significa charla. Usualmente se refiere a
una comunicación escrita a través de Internet entre dos o
más personas que se realiza instantáneamente. Es común
que estas personas escriban bajo pseudónimos llamados
nick o apodo.
Los mensajeros instantáneos más utilizados son ICQ,
Yahoo! Messenger, MSN Messenger, AIM (AOL Instant
Messenger) y Google Talk (que usa el protocolo abierto
Jabber).
ICQ
Yahoo!
Messenger
Página 25 de 129
26. Yahoo!
Messenger
AIM (AOL
Instant
Messenger)
Google Talk
EJERCICIO 7
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostracion práctica para establecer una comunicación
via mensajeria instantanea, explicando todas sus funciones.
En por lo menos unos de los mensajeros instantaneos.
Establezca una clase en línea con todos sus alumnos.
Página 26 de 129
27. Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Entra al mensajero indicado por el profesor para
poder establecer una comunicación en línea.
EJERCICIO 8
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda ejecutar
una demostración práctica para acceder a algunos sitios
gubernamentales, asi como el acceso a noticieros.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
PRÁCTICA III
Competencia I.- Utilizar los servicios de Internet.
Habilidades.-
5. Navegar por Internet.
6. Manejar la mensajería instantánea.
7. Buscar información en Internet.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.-
Proporciona una dirección de correo para que le envíen la
información.
Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: GUÍA DE OBSERVACIÓN: TINF-
04/M2S3/ED1-3.
Instrucciones para el alumno.-
1. Investiga la siguiente información en por lo menos dos
buscadores Web:
o ¿Qué es la educación en Internet (en línea)?
o Ventajas de la educación en Internet.
o Desventajas de la educación en Internet.
2. En un documento del procesador de textos, copia y pega
la información generada por los dos buscadores.
Página 27 de 129
28. 3. Anota las direcciones o referencias de las páginas a las
que te envió el buscador.
4. Lee detalladamente la información encontrada en los tres
buscadores, compara y genera tu propia conclusión
apoyándote en la información encontrada.
5. Genera un documento en un procesador de textos con tu
nombre completo.
6. Coloca de encabezado tu nombre en el archivo.
7. Busca en alguna página de gobierno tu CURP, copia y
pégala en el documento antes generado.
8. Entra al mensajero indicado por el profesor y envía el
archivo por este medio al correo del profesor.
9. Una vez recibido el archivo por el docente. Guarda tus
archivos y espera las instrucciones del profesor.
Conclusiones de la competencia
Para esta lograr esta competencia se hizo necesario ejecutar una serie de
ejercicios y prácticas realizadas oportunamente para desarrollar las habilidades
y destrezas al utilizar los servicios de Internet, manipular el correo electrónico,
configurar un cliente de correo, descargar y transferir archivos, manejar la
mensajería instantánea, así como navegar, buscar y depurar información.
La evaluación de las habilidades y destrezas, conocimientos y actitudes de esta
competencia se hará mediante el instrumento de evaluación guía de
observación TINF-04/M2S3/ED1-3.
Página 28 de 129
29. COMPETENCIA II Manejar protocolos y lenguajes de Internet.
Introducción
E
sta competencia te permitirá
desarrollar las habilidades y
destrezas para que puedas
manejar los protocolos y el
lenguaje de programación HTML
utilizado para generar las páginas
de Internet.
Una red es una configuración de computadora que intercambia información.
Pueden proceder de una variedad de fabricantes y es probable que tenga
diferencias tanto en hardware como en software, para posibilitar la comunicación
entre estas es necesario un conjunto de reglas formales para su interacción. A
estas reglas se les denominan protocolos.
Un protocolo es un conjunto de reglas establecidas entre dos dispositivos para
permitir la comunicación entre ambos.
1. Crear hipertexto.
2. Utilizar servidores Web.
HABILIDAD 3. Manejar protocolos.
4. Manejar el lenguaje HTML.
Vamos a comenzar nuestra segunda competencia para
RESULTADO DE
desarrollar los protocolos y lenguajes de Internet, la creación
APRENDIZAJE de hipertexto, la utilización de servidores Web, el manejo de
protocolos, así como el manejo del lenguaje HTML.
Desarrollo
El hipertexto es lo que permite que al hacer clic en una palabra o gráfico
pasemos de la página en la que estamos a otra página distinta.
Página 29 de 129
30. El HTML (Hyper Text Markup Language) es el lenguaje con el
que se escriben las páginas web. Es un lenguaje de hipertexto,
es decir, un lenguaje que permite escribir texto de forma
estructurada, y que está compuesto por etiquetas, que marcan el
inicio y el fin de cada elemento del documento.
Un documento hipertexto no sólo se compone de texto, puede
contener imágenes, sonido, vídeos, etc., por lo que el resultado
puede considerarse como un documento multimedia, tienen la
extensión .html o .htm.
EJEMPLO 1
Observa en el ejemplo el hipertexto que me permite conectar
una palabra o gráfico de la página en la que estamos a otra
página distinta.
Página 30 de 129
31. EJEMPLO 2
En el ejemplo 1, se muestra un hipertexto que nos conecta una página a
otra, veamos ahora el código de programación html escrito en un editor
de textos de los dos archivos.
Página 31 de 129
32. EJERCICIO 1
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
práctica demostrativa para generar una pequeña página
Web, utiizando un editor de textos.
Proporcionar la dirección de una página Web válida en
Internet para que los alumnos la consulten y puedan
observar su código.
Explique la estructura básica de una página html y genere un
ejemplo.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Consulta la dirección de Internet proporcionada por tu
profesor y visualiza su código.
Busca y descarga en archivo un manual de HTML, no olvides
comparar entre varios y elegir el más completo. Realiza una
pequeña página Web apoyándote del manual antes
consultado.
EJEMPLO 3
Los navegadores de hoy en día pretenden ser compatibles con
la última versión de HTML. Existen varios navegadores, aquí
te mostramos dos de los más utilizados y que soportan
compatibilidad.
Página 32 de 129
33. Microsoft Internet Explorer
Mozilla FireFox
EJERCICIO 2
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
práctica demostrativa donde se identifiquen versiones de
navegadores Web gratuitos que se pueden descargar de
internet.
Revisar que el alumno descargue e instale el navegador
Indicado.
Instrucciones para el alumno.-
Presta atención al docente en la demostración práctica;
pregunta todas las dudas que tengas.
Busca y descarga una versión de algún navegador Web
gratuito indicado por el docente.
Instala el navegador Web en tu máquina.
Llama a tu profesor para que te revise.
Página 33 de 129
34. EJEMPLO 4
Un servidor web es un programa que implementa el
protocolo HTTP (hypertext transfer protocol). Este
protocolo está diseñado para transferir lo que llamamos
hipertextos, páginas Web o páginas HTML (hypertext
markup language): Textos complejos con enlaces, figuras,
formularios, botones y objetos incrustados como
animaciones o reproductores de sonidos.
Sin embargo, el hecho de que HTTP y HTML estén
íntimamente ligados no debe dar lugar a confundir ambos
términos. HTML es un formato de archivo y HTTP es un
protocolo.
Un servidor Web se encarga de mantenerse a la espera de
peticiones HTTP llevada a cabo por un cliente HTTP que
solemos conocer como navegador. El navegador realiza una
petición al servidor y éste le responde con el contenido que
el cliente solicita.
Un servidor Web muy importante es el denominado Apache:
EJEMPLO 5
Veamos el acceso a un buscador muy conocido:
http://www.google.com/
Página 34 de 129
35. El protocolo https: (HyperText Transport Protocol Secure), es el
protocolo para la conexión a servidores de la WWW seguros.
Estos servidores son normalmente de ámbito comercial y
utilizan encriptación para evitar la intercepción de los datos
enviados, usualmente números de tarjeta de crédito, datos
personales, etc..., realizará una conexión a un servidor de la
WWW seguro. Veamos el ejemplo la página de un banco:
https://www.bbva.es/TLBS/tlbs/jsp/esp/home/index.jsp
ftp: (File Transfer Protocol), utilizará el protocolo FTP de
transferencia de archivos. Se utilizará cuando la información que
se desee acceder se encuentre en un servidor de ftp. Por
defecto se accederá a un servidor anónimo (anonymous). Por
ejemplo:
ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2.0.0.1-
candidates/rc1/
Página 35 de 129
36. El protocolo TCP/IP es un protocolo DARPA que proporciona
transmisión fiable de paquetes de datos sobre redes. El nombre
TCP / IP proviene de dos protocolos importantes de la familia, el
Transmission Control Protocol (TCP) y el Internet Protocol (IP).
Todos juntos llegan a ser más de 100 protocolos diferentes
definidos en este conjunto.
El TCP / IP es la base del Internet que sirve para enlazar
computadoras que utilizan diferentes sistemas operativos,
incluyendo PC, minicomputadoras y computadoras centrales
sobre redes de área local y área extensa.
Página 36 de 129
37. EJERCICIO 3
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
práctica demostrativa donde se explique el manejo de los
principales protocolos de internet, principalmente: http, https
y ftp.
Además de la configuración del protocolo TCP/IP, para
conectarse a internet.
Revisa la investigación de los diferentes tipos de servidores.
Explica a detalle los diferentes tipos de servidores.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Investiga los tipos de servidores que existen, y entrega la
información impresa al profesor.
PRÁCTICA I
Competencia II.- Manejar protocolos y lenguajes de
Internet.
Habilidades.-
1. Crear hipertexto.
2. Utilizar servidores Web.
3. Manejar protocolos.
4. Manejar el lenguaje HTML.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Proporciona la dirección de
una página para descargar un archivo vía ftp.
Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: GUÍA DE OBSERVACIÓN: TINF-
04/M2S3/ED2-3
Instrucciones para el alumno.-
1. Investiga qué es un Editor.
2. Copia la información encontrada.
3. Crea una pequeña página Web utilizando la estructura
proporcionada por el profesor.
4. Pega la información que encontraste.
5. Genera tu página Web.
6. Guárdalo en una carpeta con tu nombre.
Página 37 de 129
38. 7. Descarga el archivo de la página ftp que te indique el
profesor en la carpeta antes creada.
8. Entra a las propiedades del protocolo TCP/IP y verifica si
tu dirección IP es una dirección dinámica o una dirección
estática.
9. Llama a tu profesor para que te revise.
Conclusiones de la competencia
Para esta lograr esta competencia se hizo necesario ejecutar una serie de
ejercicios y prácticas secuenciales que permiten desarrollar las habilidades y
destrezas para crear un hipertexto básico, utilizar los servidores Web, manejar
los protocolos y lenguajes de Internet.
La evaluación de las habilidades y destrezas, conocimientos y actitudes de esta
competencia se hará mediante el instrumento de evaluación guía de
observación TINF-04/M2S3/ED2-3.
Página 38 de 129
39. COMPETENCIA III Programar en un lenguaje de hipertexto.
Introducción
E N la actualidad mucha gente
accede a Internet y busca
información, la cual
encuentra generada en un formato de
se
hipertexto por medio de una página
Web. Recuerda que un hipertexto no
sólo se compone de texto, puede
contener imágenes, sonido, vídeos,
etc., por lo que el resultado puede
considerarse como un documento
multimedia, tienen la extensión .html o
.htm.
Los navegadores se encargan de interpretar el código HTML de los
documentos, y de mostrar a los usuarios las páginas Web resultantes del
código interpretado.
En esta competencia realizaremos la programación de páginas Web,
codificándola en un editor de textos. Insertando etiquetas principales (Estructura
de una página Web), vínculos e hipervínculos, anexando marquesinas,
diseñando tablas, insertando Imágenes, sonido y video así como la inserción de
caracteres especiales.
Una vez que terminemos con esta competencia tu podrás programar y generar
las páginas Web que necesites, ya sea personal o comercial, además que
puedes apoyarte del software de diseño para realizar diseños, imágenes, y
logotipos para tu aplicación, así mismo podrás crear animaciones multimedia
que le pueden dar aun mas profesionalismo a tus páginas Web.
Página 39 de 129
40. 1. Insertar etiquetas principales.
2. Manejar etiquetas secundarias.
HABILIDAD 3. Agregar marquesinas.
4. Insertar caracteres especiales.
Vamos a comenzar nuestra tercera competencia conociendo
el funcionamiento las etiquetas principales y secundarias de
RESULTADO DE
una página Web, agregando marquesinas para movimiento
APRENDIZAJE de nuestros objetos insertando estas etiquetas en un editor
de textos para generar una página Web.
Desarrollo
Un quot;editor de textoquot; es un programa que permite escribir y
modificar archivos digitales compuestos únicamente por
texto sin formato, conocidos comúnmente como archivos de
texto.
Hay una gran variedad de editores de texto. Algunos son de
uso general, mientras que otros están diseñados para
escribir o programar en un lenguaje. Algunos son muy
sencillos, mientras que otros tienen implementadas gran
cantidad de funciones.
EJEMPLO 1
Existen gran variedad de Editores de Texto donde puedes
utilizar el que más te agrade y generar tus páginas Web,
recuerda que se tiene que guardar con la extensión .htm o
html.
En la siguiente ilustración se muestran dos editores de texto
fáciles de utilizar.
Notepad o Bloc de notas es un editor de texto simple
incluido en los sistemas operativos de Microsoft desde 1985.
Su funcionalidad es muy sencilla, con capacidades de
formato (negrita, cursiva...) propias de procesadores de
textos, o facilidades de programación (edición hexadecimal,
reemplazado de texto...).
Página 40 de 129
41. WordPad es un sencillo programa de procesamiento de
texto que viene incluido en la lista de accesorios gratuitos en
Microsoft Windows.
EJEMPLO 2
Hoy en día existen un gran número de editores que permiten
crear páginas Web sin la necesidad de escribir ni una sola
línea de código HTML.
Estos editores disponen de un entorno visual, y generan
automáticamente el código de las páginas. Al poder ver en
todo momento cómo quedará la página en el navegador, se
facilita la creación de las páginas, y el uso de menús permite
ganar rapidez.
Los editores visuales pueden generar en ocasiones código
basura, es decir, código que no sirve para nada, en otras
ocasiones puede ser más efectivo corregir directamente el
código por lo que resulta necesario conocer HTML para
poder depurar el código de nuestra páginas.
Página 41 de 129
42. Algunos de los editores visuales con los que podrás crear tus
páginas Web son: Adobe Dreamweaver, Microsoft
Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage,
HotDog Proffesional, Netscape Composer y Arachnophilia,
de los cuales algunos tienen la ventaja de ser gratuitos.
Aquí te mostramos dos de los editores visuales de páginas
Web más utilizados.
Macromedia Dreamweaver
Microsoft FrontPage
Estos programas generadores de
código los manejaremos en la
siguiente competencia, por ahora
dediquémonos a aprender la
sintaxis del lenguaje HTML.
Página 42 de 129
43. EJEMPLO 3
¿Qué es una etiqueta?
Una etiqueta o marcas delimitan cada uno de los elementos que
componen un documento HTML. Existen dos tipos de etiquetas, la
de comienzo de elemento y la de fin o cierre de elemento.
La etiqueta de comienzo está delimitada por los caracteres < >.
Está compuesta por el identificador o nombre de la etiqueta, y
puede contener una serie de atributos opcionales que permiten
añadir ciertas propiedades. Su sintaxis es: <identificador
atributo1 atributo2 ...>.
La etiqueta de final está delimitada por los caracteres </ >. Está
compuesta por el identificador o nombre de la etiqueta, y no
contiene atributos. Su sintaxis es: </identificador>.
Realicemos un ejemplo con la estructura básica de una página
Web.
1. Iniciamos cualquier editor de textos…Para este ejemplo
utilizaremos el bloc de notas.
2. Escribamos la estructura básica de una página Web.
3. Te preguntarás para qué sirve cada etiqueta, bueno la
describiremos a continuación.
Página 43 de 129
44. <html> Declara el inicio del
programa
<head> Declara la cabecera
<title>Mi Primer Página...</title> y el título de la
</head> página Web
<body bgcolor=quot;#FFCC99quot;> Establece un color
de fondo para el
cuerpo del programa
Elaborar páginas Web utilizando las Texto que se
aplicaciones actuales muestra dentro de la
página Web
</body> Se cierra el cuerpo
del programa
</html> Cierra la etiqueta
para el programa
4. Una vez aclarada la estructura de una página Web,
guardemos nuestro código, con el nombre de Cecyt.htm o
Cecyt html. (Recuerda que se admite la extensión .htm o
html).
5. Una vez guardado el archivo, ciérralo y vayamos a la
carpeta donde fue guardado, ya debe aparecer con un
icono correspondiente al navegador que tengamos
instalado.
Página 44 de 129
45. 6. Abramos este archivo para ver como quedó nuestra página
Web.
7. Este sería el resultado de nuestra página Web.
8. Con la opción de que si queremos ver o modificar el código
de nuestra página Web, presionamos el botón derecho
sobre la página para ver nuestro código.
9. Para mostrar nuevamente el código de nuestra página Web
donde podemos modificar los datos que nosotros queramos
por ejemplo que el color del body ahora que sea en color
azul: <body bgcolor=quot;#3399CC quot;>
Página 45 de 129
46. 10. Solo basta con guardar pasarnos a nuestro navegador y
presionar F5 para actualizar.
11. Donde nos mostrará nuestros nuevos resultados.
Las etiquetas pueden estar escritas en minúsculas o
mayúsculas y no marca error por eso, pero si sería un
error no escribir las etiquetas correctamente, lo que
ocasionaría que no se mostrara correctamente nuestra
página Web. Sin embargo es recomendable que
adoptemos un solo formato al escribirlas, es decir o todas
la etiquetas las escribimos solo con minúsculas o todas
las escribimos con mayúsculas, esto para evitar que al
momento de subir las página al servidor, los enlaces
generen error.
Página 46 de 129
47. EJERCICIO 1
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la paleta de colores y la
combinación de los mismos.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Descarga de algún buscador la paleta de colores y guárdala
en algún medio de información como un disco de 3 ½ o tu
memoria para que la traigas siempre y la consultes cuando
necesites de algún color en especial.
EJEMPLO 4
Formatear el texto <font> ...
Las propiedades del texto pueden modificarse a través de la
etiqueta <font>. Para ello, podemos insertar el texto entre las
etiquetas <font> y </font>, especificando algunos de los atributos
de la etiqueta:
Atributo Significado Posibles valores
face fuente Nombre de la fuente, o fuentes
Número hexadecimal o texto
color color del texto
predefinido
Valores del 1 al 7, siendo por
defecto el 3,
size tamaño del texto o desplazamiento respecto al
tamaño por defecto, añadiendo + o
- delante del valor
Ejemplo:
<font color=quot;#FFFFCCquot; size=quot;10quot; face =quot;Arialquot;>
VIVA MEXICO
</font>
A continuación se muestran algunas etiquetas asociadas al tipo de
letra:
Página 47 de 129
48. Etiqueta Significado Ejemplo
<b> negrita CECyTE
<i> cursiva CECyTE
<u> subrayado CECyTE
<s> tachado CECyTE
<tt> teletipo (máquina de escribir) CECyTE
<big> aumenta el tamaño de la fuente CECyTE
<small> disminuye el tamaño de la fuente CECyTE
EJEMPLO 5
Marquesina
Las marquesinas son texto, imágenes, o una mezcla entre
texto e imágenes, que pueden desplazarse de un lado a otro
de la ventana en forma de línea.
Para insertar una marquesina, es necesario insertar el texto
entre las etiquetas <marquee> y </marquee>.
<marquee bgcolor=quot;#FFFFFFquot;
behavior=quot;alternatequot; direction=quot;downquot;>
VIVA MEXICO
</marquee>
<marquee bgcolor=quot;#FFFFFFquot; behavior=quot;scrollquot;
direction=quot;upquot;>
VIVA MEXICO
</marquee>
<br><br>
Página 48 de 129
49. <marquee bgcolor=quot;#FFFFFFquot; behavior=quot;scrollquot;
direction=quot;rigthquot;>
VIVA MEXICO
</marquee>
<br><br>
<marquee bgcolor=quot;#FFFFFFquot; behavior=quot;slidequot;
direction=quot;rightquot;>
VIVA MEXICO
</marquee>
<br><br>
<marquee bgcolor=quot;#FFFFFFquot; behavior=quot;slidequot;
direction=quot;leftquot;>
VIVA MEXICO
</marquee>
<br><br>
A través del atributo behavior puede modificarse el tipo de
movimiento. Puede tomar los valores:
o alternate (de lado a lado de la ventana, como si
rebotará en los extremos).
o scroll (de un lado a otro, continuamente).
o slide (de un lado a otro, pero una sola vez).
o A través del atributo direction puede modificarse la
dirección en la que se moverá el texto. Puede tomar
los valores:
o down (de arriba a abajo).
o up (de abajo a arriba).
Página 49 de 129
50. o left (de derecha a izquierda).
o right (de izquierda a derecha).
También es posible establecer un color de fondo, a través
del atributo bgcolor.
Existen otros atributos como:
La velocidad de desplazamiento varía con scrollamount, que
marca los saltos según el valor numérico, scrooldelay que
determina el retraso en el movimiento en milisegundos.
El atributo loop que define el número de veces que vamos a
ver moverse el texto.
Los atributos hspace y vspace los conocemos, definirían el
espacio horizontal y vertical del texto fuera de la marquesina.
EJERCICIO 2
Material de apoyo.- Computadora e Internet.
Instrucciones para el docente.- Revise y apoye al alumno
por si tuviera alguna duda.
Instrucciones para el alumno.- Realiza una página Web en
donde pruebes el código de las marquesinas del Ejemplo 5.
EJEMPLO 6
Caracteres especiales.
Una página Web se visualiza en países distintos, que usan
conjuntos de caracteres distintos. El lenguaje HTML nos ofrece
un mecanismo por el que podemos estar seguros que una serie
de caracteres raros se van a ver bien en todos los ordenadores
independientemente de su juego de caracteres.
Cuando queremos poner uno de estos caracteres especiales en
una página, debemos sustituirlo por su código.
Por ejemplo, la quot;áquot; (a minúscula acentuada) se escribe
quot;áquot; de modo que la palabra página se escribiría en una
página HTML de este modo: página.
A continuación se muestra una lista con algunos caracteres y el
nombre con el que han de ser representados:
Página 50 de 129
52. PRÁCTICA I
Competencia II.- Programar en un lenguaje de hipertexto.
Habilidades.-
1. Insertar etiquetas principales.
2. Manejar etiquetas secundarias.
3. Agregar marquesinas.
4. Insertar caracteres especiales.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Revisa las respuestas de
cada uno de los alumnos.
Una vez revisada la práctica, realimenta con todo el grupo
las respuestas de la misma.
Instrucciones para el alumno.- Contesta brevemente cual
es la función que hace cada una de las etiquetas. Recuerda
escribir ordenadamente con letra legible, con limpieza y sin
faltas de ortografía.
CODIGO EXPLICA PARA QUE SIRVE
1. <html>
2. <head>
<title>
Mi Primer página Web...
</title>
</head>
3. <body bgcolor=quot;#FFCC99quot;>
4. <body
background=quot;fondo.jpgquot;>
5. <!—Saludos…//-->
6. <font color=quot;#FFFFCCquot;
size=quot;10quot; face =quot;Arialquot; >
VIVA MEXICO
</font>
7. <p align=quot;centerquot;> HOLA
</p>
8. <p align=quot;leftquot;> HOLA
</p>
Página 52 de 129
56. 5. Diseñar tablas.
HABILIDAD 6. Insertar Imágenes, sonido y video.
7. Insertar vínculos e hipervínculos.
Continuemos con nuestra tercera competencia en donde
RESULTADO DE
lograremos diseñar tablas, insertar imágenes, sonido y video
APRENDIZAJE a las páginas, así como insertar vínculos e hipervínculos.
EJEMPLO 7
Tabla <table>
Las tablas están formadas por celdas, que son los recuadros
que se obtienen como resultado de la intersección entre una fila y
una columna.
Aplicar las herramientas de software de
diseño para el manejo de gráficos.
Generar animación con aplicaciones
multimedia.
Elaborar páginas Web utilizando las
aplicaciones actuales.
Para crear una tabla tenemos dos etiquetas <table> y </table>.
Entre dichas etiquetas habrá que especificar las filas y columnas
que formarán la tabla.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las
filas de la tabla. Estas etiquetas deberán insertarse entre las
etiquetas <table> y </table>.
Por ejemplo, para crear una tabla con cinco filas escribiríamos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o celda <td>
Para crear una tabla no basta con especificar el número de filas,
es necesario también especificar el número de columnas.
Página 56 de 129
57. Una celda es el resultado de la intersección entre una fila y una
columna, por lo que podremos especificar el número de celdas
por fila.
<table>
<tr>
<td>CECyTE EMILIANO ZAPATA </td>
<td>CECyTE TLAYECAC </td>
</tr>
<tr>
<td> CECyTE TENEXTEPANGO </td>
<td> CECyTE EMILIANO YECAPIXTLA </td>
</tr>
</table>
Formato de la tabla
Atributo Sirve para Valores
Un número,
acompañado de %
width Ancho de la tabla
cuando se desee que
sea en porcentaje
Un número,
acompañado de %
height Alto de la tabla
cuando se desee que
sea en porcentaje
Espacio entre el
cellpadding contenido de las Un número
celdas y el borde
cellspacing Espacio entre celdas Un número
border Grosor del borde Un número
Alineación de la left (izquierda)
align tabla dentro de la right (derecha)
página center (centro)
bgcolor Color de fondo Número hexadecimal
background Imagen de fondo Número hexadecimal
bordercolor Color del borde Número hexadecimal
Ya modificando los atributos de la tabla anterior nos quedaría:
<table width=quot;50%quot; border=quot;2quot; align=quot;centerquot; cellspacing=quot;0quot;
bordercolor=quot;#000000quot; bgcolor=quot;#FFFFFFquot;>
<tr>
<td>CECyTE EMILIANO ZAPATA </td>
Página 57 de 129
58. <td>CECyTE TLAYECAC </td>
</tr>
<tr>
<td> CECyTE TENEXTEPANGO </td>
<td> CECyTE YECAPIXTLA </td>
</tr>
</table>
También existen algunos atributos validos para las celdas:
Atributo Sirve para Valores
left (izquierda)
Alineación del
align right (derecha)
contenido de la celda
center (centro)
baseline (línea de
Alineación vertical base)
valign del contenido de la bottom (inferior)
celda middle (medio)
top (superior)
bgcolor Color de fondo número hexadecimal
background Imagen de fondo número hexadecimal
bordercolor Color del borde número hexadecimal
Si modificamos nuevamente los atributos de nuestra tabla:
<table width=quot;50%quot; border=quot;2quot; align=quot;centerquot; cellspacing=quot;0quot;
bordercolor=quot;#000000quot; bgcolor=quot;#FFFFFFquot;>
<tr align=quot;centerquot; bgcolor=quot;#0000CCquot;>
<td>CECyTE EMILIANO ZAPATA </td>
<td bgcolor=quot;#00FF00quot;>CECyTE TLAYECAC </td>
</tr>
<tr>
<td> CECyTE TENEXTEPANGO </td>
<td> CECyTE YECAPIXTLA </td>
</tr>
</table>
Combinar celdas
Para las etiquetas <td> y <th> existen los atributos colspan y
rowspan, que se utilizan para combinar celdas.
A través del atributo colspan se especifica el número de
columnas por las que se extenderá la celda y a través del atributo
rowspan se especifica el número de filas por las que se
extenderá la celda.
Página 58 de 129
59. <table width=quot;575quot; border=quot;2quot; cellspacing=quot;2quot;>
<tr align=quot;centerquot; valign=quot;middlequot;>
<th colspan=quot;3quot;>SOFTWARE DE DISEÑO</th>
</tr>
<tr align=quot;centerquot; valign=quot;middlequot;>
<th rowspan=quot;2quot;>SUBMODULOS</th>
<th colspan=quot;2quot;>CUMPLE</th>
</tr>
<tr align=quot;centerquot; valign=quot;middlequot;>
<th>SI</th>
<th>NO</th>
</tr>
<tr align=quot;centerquot; valign=quot;middlequot;>
<td>Aplicar las herramientas de software de diseño para
el manejo de gráficos.</td>
<td> 1</td>
<td> 2</td>
</tr>
<tr align=quot;centerquot; valign=quot;middlequot;>
<td>Generar animación con aplicaciones multimedia.</td>
<td> 3</td>
<td> 4</td>
</tr>
<tr align=quot;centerquot; valign=quot;middlequot;>
<td>Elaborar páginas Web utilizando las aplicaciones
actuales.</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Página 59 de 129
60. EJERCICIO 4
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la creación de tablas en una
página Web.
Se sugiere que el alumno genere una página Web con la
herramienta de tablas que se vayan explicando durante la
práctica guiada.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas.
Realiza la práctica indicada por el profesor.
EJEMPLO 8
Existen también etiquetas para insertar imágenes sonidos y
videos.
Vamos a realizar un ejemplo de cómo insertar imágenes dentro
de nuestra página Web para hacerla mas agradable.
Para insertar una imagen es necesario insertar la etiqueta
<img>. Dicha etiqueta no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a través del atributo
src.
Los formatos de imagen que se utilizan comúnmente son el .gif
(Imágenes con movimiento o con fondo transparente) o .jpeg
(.jpg) y deben de estar almacenados en la carpeta donde está el
archivo de la página Web para que pueda ser visualizado. Por
ejemplo:
<img src=quot;logo.jpgquot; alt=quot;CECyTE MORELOSquot; >
El texto alternativo se muestra también al situar el puntero sobre
la imagen. Aquí aparecerá CECyTE MORELOS.
El atributo border puede tomar valores numéricos, que indican
el grosor en píxeles del borde.
Página 60 de 129
61. <img src=quot;logo.jpgquot; alt=quot;CECyTE MORELOSquot; border =quot;4quot;>
Para el tamaño de una imagen existen dos atributos width
(anchura) y height (altura) que pueden modificar el tamaño en
píxeles de la imagen.
<img src=quot;logo.jpgquot; alt=quot;CECyTE MORELOSquot; border =quot;4quot;
width=quot;200quot; height=quot;80>
La alineación de las imágenes se establece a través del atributo
align.
Valor Sirve para
left izquierda
middle medio
right derecha
<img src=quot;logo.jpgquot; alt=quot;CECyTE MORELOSquot; border =quot;4quot;
width=quot;200quot; height=quot;80quot; align=quot;rightquot;>
Por último para insertar un imagen dentro de una tabla basta con:
<table width=quot;50%quot; border=quot;2quot; align=quot;centerquot; cellspacing=quot;0quot;
bordercolor=quot;#000000quot; bgcolor=quot;#FFFFFFquot;>
<tr align=quot;centerquot; bgcolor=quot;#0000CCquot;>
<td>CECyTE EMILIANO ZAPATA
<img src=quot;logo.jpgquot; alt=quot;CECyTE MORELOSquot; border =quot;4quot;
width=quot;200quot; height=quot;80quot;>
Página 61 de 129
62. </td>
<td bgcolor=quot;#00FF00quot;>CECyTE TLAYECAC </td>
</tr>
<tr>
<td> CECyTE TENEXTEPANGO </td>
<td> CECyTE YECAPIXTLA </td>
</tr>
</table>
EJEMPLO 9
En este ejemplo veamos como agregar sonidos a nuestras
páginas Web.
Los formatos de audio compatibles son: el WAV, el MP3 y en
algunas ocasiones el MIDI.
Primero vamos a insertar un sonido de fondo a nuestra página
Web. <bgsound src=quot;sonido.mp3quot; loop=quot;-1quot;>
Donde src, nos indica la ruta del archivo de audio que se
escuchará y el atributo loop=quot;-1quot; nos indica que será un ciclo
infinito y se reproducirá de forma continua.
También se puede anexar a nuestra página Web un sonido con
controles.
<embed src=quot;angel.mp3quot; autostart=quot;falsequot; loop=quot;truequot;>
</embed>
Donde embed permite jalar el control, src nos indica el archivo
que vamos a abrir, autostart =”false”, establece que no se
reproduzca automáticamente y loop=”true” que se reproducirá
nuevamente una vez que termine.
Página 62 de 129
63. EJEMPLO 10
Ahora vamos a insertar un video como ejemplo dentro de una
página Web.
Los formatos de video compatibles son: AVI, el MPEG y el
MOV.
<embed src=quot;vidacorta.mpegquot; width=quot;400quot; height=quot;300quot;
autostart=quot;falsequot; loop=quot;truequot;>
</embed>
Donde embed permite jalar el control, src nos indica el archivo
que vamos a abrir, width=quot;400quot; nos indica el alto del video y
height=quot;300quot;, nos indica el alto autostart =”false”, establece
que no se reproduzca automáticamente y loop=”true” que se
reproducirá nuevamente una vez que termine.
EJERCICIO 5
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre la inserción de imágenes, audio
y video.
No olvide dar una explicación sobre referencias relativas y
absolutas para almacenar los archivos de imagen, sonido y
video. Además de una explicación de los plugins y activeX.
Se sugiere que el alumno genere una página Web con la
herramienta de inserción de imágenes, audio y video.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por el profesor.
Página 63 de 129
64. EJEMPLO 11
Un hiperenlace (también llamado enlace, vínculo, hipervínculo o liga) es
un elemento de un documento electrónico que hace referencia a otro
recurso, por ejemplo, otro documento o un punto específico del mismo o de
otro documento.
Los vínculos son enlaces dentro del mismo documento.
Los hipervínculos, son enlaces a otros elementos fuera del documento,
como archivos, imágenes, sonidos videos etc. Los archivos donde conectan
normalmente son a un a página Web o a un archivo.
Iniciemos con nuestro ejemplo de anclas.
Un ancla nos permitirá crear enlaces dentro del mismo documento
especificando a que lugar concreto de una página queremos saltar.
Lo primero de que debemos hacer es declarar nuestra ancla en cualquier
lugar de la página Web.
<a href=quot;#ancla1quot;>ESTA ES UN ANCLA </a>
Donde utilizamos a href para colocar el nombre de nuestra ancla. En texto
ANCLA1 es opcional y puede ir o no y por último cerramos nuestra
etiqueta </a> de hipervínculo.
Conectémonos a una página que se encuentre dentro de nuestra misma
carpeta. <a href=quot;zapata2.htmquot;> CECyTE PLANTEL EMILIANO ZAPATA
</a><br>
Donde zapata2.html es la página a donde nos conectaremos, y CECyTE
PLANTEL EMILIANO ZAPATA, el hipervínculo.
Página 64 de 129
65. Vamos a realizar una conexión a una página Web existente
<a href=quot;http://www.google.comquot;> CONECTANDONOS AGOOGLE </a>
Para descargar o abrir un archivo, por ejemplo un documento de texto.
Debemos de tener el archivo en la misma carpeta.
<a href=quot;Desarrollo.docquot; tarjet=_blank > DESCARGAR... </a>
Página 65 de 129
66. En nuestro último ejemplo vamos a conectar nuestro hipervínculo para que
envié un mensaje electrónico a una dirección ya establecida por medio del
cliente de correo que tengamos configurado en nuestra máquina.
<p align=quot;centerquot;>
<a href=quot;mailto:e_zapata@cecytemor.comquot;>
ESCRIBENOS...
</a> </p>
Página 66 de 129
67. EJERCICIO 6
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.- Se recomienda una
demostración práctica sobre anclas, vínculos e hipervínculos,
descarga de archivos, conexión a archivos de distinto
formato.
Se sugiere que el alumno genere una página Web con los
diferentes tipos de vínculos e hipervínculos.
Instrucciones para el alumno.- Presta atención al docente
en la demostración práctica; pregunta todas las dudas que
tengas. Realiza la práctica indicada por tu profesor.
PRÁCTICA III
Competencia II.- Programar en un lenguaje de hipertexto.
Habilidades.-
5. Diseñar tablas.
6. Insertar Imágenes, sonido y video.
7. Insertar vínculos e hipervínculos.
Material de Apoyo.- Computadora e Internet.
Instrucciones para el docente.-
Verificar que frente a los integrantes del grupo o del equipo,
el alumno desarrolle cada uno de los pasos indicados. Se
sugiere el uso de: LISTA DE COTEJO: TINF-04/M2S3/EP1-5
Instrucciones para el alumno.-
1. Crea una carpeta con tu nombre.
2. Inicia el editor Bloc de notas.
3. Genera el código para crear una página Web siguiendo la
siguiente estructura.
4. Insertar como título de la página tu nombre completo.
5. Coloca una imagen agradable de fondo.
6. Coloca un archivo de sonido de fondo.
7. Insertar como título dentro de la página “ELABORACIÓN
DE PÁGINAS WEB”.
8. Coloca una marquesina de color azul con texto Tahoma
del número 14 en color gris con movimiento alternativo y
dirección izquierda.
9. Inserta la siguiente tabla con el color que desees.
Página 67 de 129
68. Software de Diseño
Aplicar las herramientas de software de diseño para Corel Dra..
el manejo de gráficos.
Generar animación con aplicaciones multimedia. Flash
Elaborar páginas Web utilizando las aplicaciones Dreamweaver
actuales.
10. Coloca una imagen centrada dentro de la celda Software
de Diseño.
11. Inserta un archivo de sonido con controles.
12. Inserta un archivo de video.
13. Inserta un hipervínculo que te conecte un archivo que tú
elijas.
14. Inserta un ancla con tu nombre al principio de tu
documento.
15. Inserta un hipervínculo al ancla antes creada.
16. Inserta un hipervínculo que te conecte a alguna página
Web disponible en Internet.
17. Inserta un hipervínculo con tu nombre que te permita
enviar un mail a tu dirección de correo.
18. Guarda tu archivo con el nombre de práctica3 con
formato htm.
19. Crea una segunda página personalizada a tu gusto y
guárdala con tu nombre y con formato htm.
20. En la página práctica3 inserta una imagen y con ella crea
un hipervínculo que te conecte a la página que tiene tu
nombre.
21. Prueba y revise que tu página cumpla con todo lo que se
te pide.
22. Guarda tu carpeta completa en algún medio de
información.
23. Lama a tu profesor para que te revise la práctica.
Página 68 de 129
69. Conclusiones de la competencia
Para esta lograr esta competencia se hizo necesario ejecutar una serie de
ejercicios y prácticas secuenciales que nos permitieron desarrollar las
habilidades y destrezas para crear una página Web, insertar etiquetas
principales y secundarias, caracteres especiales, agregar marquesinas, diseñar
tablas, e insertar imágenes, sonido y video; así como vínculos e hipervínculos
para realizar diferentes conexiones a archivos.
La evaluación de las habilidades y destrezas, conocimientos y actitudes de esta
competencia se hará mediante el instrumento de evaluación lista de cotejo
TINF-04/M2S3/EP1-5.
Página 69 de 129
70. COMPETENCIA IV. Diseñar una página Web en un editor visual.
Introducción
Una vez que hemos desarrollado las competencias para la edición de páginas
web mediante el lenguaje HTML vamos a dar un salto a la edición visual de
páginas Web, utilizando el software de diseño que es un programa especializado
en el que se genera el código HTML automáticamente, fácil de utilizar y con
presentación profesional.
1. Manipular el software de diseño.
HABILIDADES 2. Ubicar los elementos de la pantalla.
3. Insertar componentes.
Con este primer conjunto de habilidades estarás en
RESULTADO DE
posibilidad de manipular y personalizar a tu gusto el software
APRENDIZAJE que elijas como editor de páginas de internet.
Desarrollo
El conocimiento previo que debes tener para desarrollar estas
habilidades es el manejo de:
• Barra de herramientas para el entorno de trabajo.
• Etiquetas del lenguaje de hipertexto.
• Aplicaciones multimedia.
EJEMPLO 1
Analiza las siguientes figuras con el docente y visualiza las
herramientas y elementos que las integran.
Página 70 de 129
71. EJEMPLO 2
Veamos las pantallas de dos de los principales programas para
editar páginas Web: Microsoft FrontPage y Adobe
Dreamweaver. Identifica los elementos que tiene la interfaz,
barras de herramientas, paneles, menús, etc.
Página 71 de 129
72. Microsoft Office FrontPage.
Adobe Dreamweaver.
EJEMPLO 3
La siguiente pantalla pertenece a la interfaz del software editor
de páginas de Web de la compañía Adobe, llamado
Dreamweaver. Identifica y localiza cada una de ellas.
Página 72 de 129
73. EJERCICIO 1
Instrucciones para el alumno.- Recuerda el nombre en
español e inglés de cada una de las barras de herramientas
y botones que visualizaste en el EJEMPLO 3 y escríbelas en
los recuadros, sin observar la ventana que tiene los
nombres, activa y desactiva los elementos de esta ventana
en el laboratorio.
Instrucciones para el docente.- Se recomienda realizar una
demostración práctica en donde se exponga de forma clara
la función que tiene cada uno de los elementos de la venta
del editor de páginas de Web.
Página 73 de 129
74. PRÁCTICA 1
Competencia.- Diseñar una página Web en un editor visual.
Habilidades.-
1. Manipular el software de diseño.
2. Ubicar los elementos de la pantalla.
3. Insertar componentes.
Recursos Materiales de Apoyo.- Computadora y software
editor de páginas de internet.
Instrucciones para el docente.- Verificar que los alumnos
desarrollen cada uno de los pasos indicados.
Instrucciones para el alumno.- Realiza de formar ordenada
y con responsabilidad los pasos siguientes:
1. En la ventana principal del software de edición de
páginas de internet anota cuántas y cuáles son las
barras de herramientas que se pueden ocultar y
visualizar.
Página 74 de 129
75. 2. En la ventana principal activa los siguientes
paneles:
• Insertar.
• Líneas de tiempo.
• Resultados.
3. Cambia de posición de por lo menos 4 paneles e
imprime esa ventana.
4. La configuración o tamaño del área de trabajo
depende de:_________________________
Para activar algún panel de herramientas
selecciona la opción de Ventana en el
menú de herramientas.
1. Manipular la barra de Insertar (Común, Diseño,
Formularios, Texto, HTML, Aplicación, Elemento Flash
y Favoritos.)
4. Administrar sitios Web.
5. Crear tablas.
6. Insertar imágenes.
7. Insertar comentarios.
HABILIDADES 8. Anexar contadores de visitas.
9. Administrar titulares.
10. Insertar fecha y hora.
11. Adicionar marquesinas.
12. Manipular botones activables.
13. Insertar aplicaciones multimedia.
14. Crear formularios para manipular bases de datos.
15. Insertar marcos.
RESULTADO DE Con el desarrollo de estas habilidades estarás en posibilidad
de manipular y estructurar el diseño de las páginas Web.
APRENDIZAJE
Página 75 de 129
76. El conocimiento previo que debes tener para desarrollar
estas habilidades es el manejo de:
• Diseño de una página Web.
• Etiquetas del lenguaje de hipertexto.
• Aplicaciones multimedia.
• Estructura de una base de datos.
• Funciones de las barras de herramientas.
EJEMPLO 1
Esta pantalla muestra el área de trabajo en donde se diseña y se
colocan los elementos que formarán la página Web. En muchos
editores de páginas por defecto tienen el tamaño de esta área como
una página de un documento normal. Por lo que el tamaño depende
de la resolución de su monitor.
EJEMPLO 2
LA BARRA DE INSERCIÓN (Insert Toolbar):
Muestra varios iconos que representan los elementos que podemos
insertar en la página de Internet, por ejemplo: Un vínculo, una
dirección de correo electrónico, una imagen, tablas para acomodar
texto e imágenes, etc.
Esta herramienta es la base para iniciar a diseñar una página Web.
Página 76 de 129
77. Has uso de esta herramienta en el laboratorio de cómputo con el
apoyo del profesor.
Este menú desplegable contiene una lista con las diferentes
categorías dentro de la que se encuentran agrupados los iconos que
permiten insertar objetos comunes como hipervínculos y vínculos de
e-mail.
EJEMPLO 3
El panel propiedades permite ver las opciones para el texto, las
imágenes y los objetos multimedia ya creados; permitiendo modificar
el tamaño que ocupa en la página Web en píxeles y su posición, el
tamaño del marco, además permite elegir segmentos irregulares de su
área para colocar uno o más vínculos a diferentes páginas Web.
Página 77 de 129
