Técnico en Producción Técnico en Informática - Index of

Técnico en Informática
Técnico en Producción
Módulo
Módulo
II
II
Creación
Tecnología
de productos
para la conservación
multimedia a través
y transformación
de software
de
de
la
diseño.
leche
Submódulo
Submódulo
II
III
Efectuar análisis fisicoquímicos a
Elaboración
la leche y productos
de páginas
lácteos
Web.
Versión 2.0
Julio, 2008
Página de
Página 1 de 1

Página de
Página 2 de 2

Sergio Anonales Figueroa
Artemio Lemus Ruiz
Mirna López Vázquez
Benita Olguin Angeles
Víctor Gabriel Puc Ibarra
Ilych Antonio Ramos Guardado
María Félix Roldán López
Carlos Daniel Sánchez Nolasco
Alejandro Rey Sarabia Flores
Técnico en Informática
Morelos
Michoacán
Hidalgo
Hidalgo
Yucatán
Nayarit
Hidalgo
Nayarit
Baja California Sur
Julio César Flores Olivares Nayarit
Página de
Página 3 de 3

Al finalizar este submódulo tendrás las capacidades para utilizar los elementos fundamentales del
diseño, manipular los elementos básicos de un lenguaje usado para la creación de páginas Web,
diseñar páginas Web y publicarlas en los servidores de internet. Las actividades que se desarrollarán
requieren cierto grado de responsabilidad y autonomía. En virtud de lo anterior, estas competencias
se encuentran consideradas en el nivel 2.
Página de
Página 4 de 4

Página de
Página 5 de 5

Módulo II Creación de productos multimedia a través de software de diseño
Submódulo I Utilización de software de diseño para el manejo de gráficos
Contenido o Competencia 1 Contenido o Competencia 2
1. Utilizar los elementos fundamentales
del diseño.
2. Manejar los elementos básicos de un
lenguaje usado en la creación de páginas
WEB (HTML, DHTML, ASP, Java Script,
CSS u otros)..
Temas y Subtemas Temas y Subtemas
1.1. Analizar las teorías del
diseño (minimalismo,
conceptualismo, etc.).
1.2. Identificar el impacto y el
enfoque en diseños existentes.
1.3. Diseñar formatos
considerando las zonas
áureas, dirección, sentido y
equilibrio.
1.4. Aplicar la teoría del color
considerando el círculo
cromático, contrastes, el RGB
(Red, Green, Blue) y CMY
(Cyan, Magenta, Yellow).
Técnico en Informática
2.1. Definir Objetivos y
contenidos de la página Web.
2.2 Esquematizar la estructura
general de una página Web
2.3. Utilizar Etiquetas en una
página Web.
2.4. Establecer vínculos e
hipervínculos
2.5. Manipular objetos y
formularios en una página Web.
2.6. Manipular tablas en una
página Web
2.7. Manipular Imágenes y
animaciones en una página
Web.
2.8. Definir secciones de mapeo
de imágenes en una página web.
2.9. Insertar Sonido y Video en
una página Web.
2.10. Implementar servicios de
correo en una página web.
Página de
Página 6 de 6

Técnico en Informática
Módulo II Redes de área local Creación de productos multimedia a través de
software de diseño.
Submódulo III Elaboración de páginas Web.
Contenido o competencia 3
3. Diseñar una página Web con un
software de aplicación.
Contenido o competencia 4
4. Publicar paginas Web en los
servidores de Internet.
Temas y Subtemas Temas y Subtemas
3.1. Definir Objetivos y
contenidos de la página Web.
3.2. Establecer Etiquetas
(principales y secundarias,
Caracteres especiales) en la
página Web.
3.3. Establecer Links dentro de
la página Web, entre páginas
Web y entre servidores.
3.4. Manipular Imágenes
dentro de una página Web.
3.5. Estructurar tablas en una
página Web.
3.6. Insertar Sonido y Video en
una página Web.
3.7. Almacenar páginas Web
en un servidor dedicado o
gratuito.
4.1. Identificar los servidores de
Internet disponibles para
publicación de información.
4.2. Seleccionar un servidor de
Internet considerando las
características de la página Web.
4.3. Utilizar la página del servidor
de Internet para alojar una
página Web.
4.4. Verificar el funcionamiento
de la página Web dentro del
servidor seleccionado.
Página de
Página 7 de 7

Página de
Página 8 de 8

¡Felicidades Amigo!
Iniciamos juntos una nueva etapa en tu formación por esta fascinante área del conocimiento, las
páginas Web. Una vez que hemos realizado el recorrido por temas tan interesantes como la
programación, el diseño de páginas de Internet y las animaciones, ahora vamos a desarrollar
nuestras capacidades para hacer que dos o más equipos de cómputo se comuniquen entre sí,
logrando con ello compartir tanto información como recursos de hardware y eso a su vez nos ayude
para optimizar y economizar el uso de los recursos informáticos.
¿Suena interesante verdad?
Imagina tener la posibilidad de que con una sola impresora puedan imprimir todos los equipos de
cómputo de tu escuela, o que desde una Pc podamos acceder a una presentación electrónica hecha
por un profesor para su clase, sin necesidad de pedir prestada una memoria o un disco de
almacenamiento. Al igual que las guías que ya hemos estudiado juntos, es importante invitarte para
que pongas todo tu esfuerzo para lograr desarrollar tus capacidades, por nuestra parte y la de tus
maestros, ten la seguridad de que nos hemos realizado todo lo posible para hacerte más sencillo este
proceso.
Nuestro submódulo se complementa con 2 submódulos más que son: Utilización de software de
diseño para el manejo de gráficos y Generación de animaciones con elementos multimedia utilizando
las aplicaciones actuales. Lo que te permite diseñar gráficos, animaciones interactivas y creación de
páginas Web.
Todas las competencias que 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 los contenidos o competencias bajo estas características; sin olvidar la
aplicación de conocimientos de formación básica, como lo son: el idioma inglés, las herramientas
tecnológicas y el Internet.
Como parte de la evaluación necesaria para determinar si ya haz logrado ser competente en esta
área de formación, te planteamos observar las siguientes evidencias:
Página de
Página 9 de 9

Desempeño
1. Aplicar la teoría del color.
2. Utilizar las etiquetas.
3. Establecer los links.
4. Manipular las imágenes.
5. Estructurar las tablas.
6. Insertar el sonido y el video.
7. Establecer las Etiquetas
8. Establecer los links.
9. Manipular las imágenes.
10. Estructurar las tablas.
11. Insertar el sonido y el video.
12. Almacenar la página Web.
13. Manipular los programas de aplicación para correo electrónico.
14. Manipular los navegadores de Internet
15. Manipular los sistemas de comunicación personal.
16. Operar los metabuscadores.
17. Proteger el equipo de los riesgos de Internet.
18. Utilizar los Servidores Web.
Producto
1. Diferentes esquemas de los fundamentos de diseño.
2. Formatos realizados.
3. Esquemas realizados.
4. Los objetivos definidos.
Página de
Página 10 de 10

El docente proyecta un video a los alumnos en donde se muestren diferentes diseños de páginas
Web locales, de la región y de empresas más sobresalientes en el diseño de páginas. Explicando
cuales son sus elementos que contienen y las ventajas de utilizarlas y diseñarlas, así como los temas
o habilidades y conocimientos que debe demostrar y conocer para desarrollar llos contenidos o
competencias del submódulo; además que el alumno ubique la aplicación de los contenidos o
competencias durante el desarrollo de una función en el campo laboral.
El docente organizará una conferencia con una persona experta en el área del diseño de las páginas
Web, dando a conocer su ventajas y desventajas. Así como la importancia de las páginas Web en la
publicidad, la comunicación, las oficinas de servicios públicos y privados e instituciones educativas.
Página de
Página 11 de 11

Página de
Página 12 de 12

Utilizar los elementos fundamentales
del diseño.
1. Conociendo el diseño
2. Combinación de Colores
1. Mirada fría
2. Arco iris
14. Mi primera Critica
15. Buscando el mejor color
3. Rediseñando
1
Página de
Página 13 de 13

¡Hola, que tal!
Bienvenido a este nuevo reto en el increíble mundo del diseño, ponte listo porque iniciaremos
aprendiendo los principios básicos del diseño y el color.
¿Estamos listos?
Este contenido o competencia se titula: ―Utilizar los elementos fundamentales del diseño‖, se
encuentra ubicada en el tercer semestre de tu formación en el bachillerato tecnológico que
actualmente cursas. Es muy importante que sepas que esta guía tiene la función de proporcionarte
las competencias y habilidades que te permitan manejar con destreza las teorías del color, espacios y
equilibrio.
Debes tener en cuenta que todas tus creaciones serán de gran utilidad para las próximas
competencias de este submódulo.
Pero… ¿cómo lo lograras?
Es muy sencillo, aprenderás a través de actividades de aprendizaje tales como: ejercicios,
investigaciones, dinámicas, trabajo colaborativo, prácticas frente a la computadora y de muchas
formas mas, poco a poco irás alcanzando los conocimientos, pero sobre todo las competencias en el
manejo del software que te permitirán realizar trabajos donde el uso de colores, espacios y equilibrio
gráfico serán importantísimos.
Para tal efecto, el contenido de esta primera competencia se distribuye en los siguientes temas:
Analizar las teorías del diseño.
Identificar el impacto y el enfoque en diseños existentes.
Diseñar formatos considerando las zonas, áreas, dirección, sentido y equilibrio.
Aplicar la teoría del color considerando el círculo cromático, contrastes, el RGB y CMY.
Solo nos resta invitarte a que continúes con ese ánimo y ganas de trabajar que te caracterizan,
recuerda que en la medida que te apliques en tus estudios el éxito llegará a tu vida.
¡Adelante con este nuevo espacio de aprendizaje!
Página de
Página 14 de 14

TEMAS O
HABILIDADES
RESULTADO DE
APRENDIZAJE
1.1. Analizar las teorías del diseño (minimalismo, conceptualismo,
etc.).
1.2. Identificar el impacto y el enfoque en diseños existentes.
1.3. Diseñar formatos considerando las zonas áureas, dirección,
Sentido Y equilibrio.
1.4. Aplicar la teoría del color considerando el círculo cromático,
contrastes, el RGB (Red, Green, Blue) y CMY (Cyan,
Magenta, Yellow).
Al término de los temas o habilidades el alumno identificará las
teorías de diseño y del color.
El docente expondrá diferentes páginas Web de diferentes empresas y por medio de una lluvia de
ideas concluirá las características principales y ventajas. Haciendo notar los colores plasmados en las
paginas Web.
Página de
Página 15 de 15

Nombre Conociendo el diseño No. 1
Instrucciones
para el Alumno
Conocimientos
a adquirir
Investiga las principales características de las Teorías del diseño y del diseño de
formatos en una pagina Web.
Teorías del diseño
(Minimalismo,
Conceptualismo).
Teoría del color
(circulo cromático,
RGB (Red, Green,
Blue), CMY (Cyan,
Magenta, Yellow),
contrastes).
Funciones de diseño
(necesidades,
impacto, enfoque).
Diseño de formatos
(zonas áureas,
dirección y sentido,
equilibrio).
Manera
Didáctica
de
Lograrlos
La investigación la podrás realizar a través
de un medio electrónico o bibliográfico.
Página de
Página 16 de 16

Nombre Combinación de colores No. 2
Instrucciones
para el Alumno
Conocimientos
a adquirir
Investiga las características principales de las Teorías del color.
Teorías del diseño
(Minimalismo,
Conceptualismo).
Teoría del color
(circulo cromático,
RGB (Red, Green,
Blue), CMY (Cyan,
Magenta, Yellow),
contrastes).
Funciones de diseño
(necesidades,
impacto, enfoque).
Diseño de formatos
(zonas, áreas,
dirección, sentido y
equilibrio).
Manera
Didáctica
de
Lograrlos
La investigación la podrás realizar a través
de un medio electrónico o bibliográfico.
Página de
Página 17 de 17

Nombre Mirada fría No. 1
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Observa y analiza la siguiente imagen figura 1.
Responsabilidad
Manera
Didáctica
de
Lograrlas
Visualicen e identifiquen la estructura y
diseño de la página Web y comenta la forma
que posee cada una.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
En criterio individual determina cuales son los cambios o sugerencias que aportaría
para que sea más fácil de utilizar para el usuario.
Página de
Página 18 de 18

Figura 1
Para ver completa la estructura de la
página
Consulta la dirección:
http://www.prendete.net/
Página de
Página 19 de 19

Nombre Arcoiris No. 2
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Observa y analiza las siguientes imágenes.
Responsabilidad
Manera
Didáctica
de
Lograrlas
Visualicen e identifiquen las propiedades de
cada uno de ellos y comenta las que posee
cada una.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
En criterio individual determinen cuales son los cambios o sugerencias para que
sea más práctica para el usuario al utilizarla.
Imagen 1 RYB Imagen 2 RGB Imagen 3 CYM
Página de
Página 20 de 20

Nombre Mi primera critica No. 1
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Intégrate en equipo máximo 3 personas ―Dinámica de integración por el
profesor‖.
Elaboren un cuadro comparativo determinando características o propiedades, de
la estructura y la teoría de diseño, en una página Web por cada uno de los
integrantes de tu equipo.
Responsabilidad
Manera
Didáctica de
Lograrlas
Haz uso de la información previa
investigada sobre características de la
estructura general de una página Web.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Participa y colabora de manera efectiva en equipos diversos.
Haz uso de la información que traes de forma individual y compartela con tus
compañeros de equipo, para elaborar un excelente cuadro comparativo que
expondrás en plenaria.
Página de
Página 21 de 21

Nombre Buscando el mejor color No. 2
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Volver a integrar equipos con la finalidad de que no queden los mismos que
trabajaron en la sección anterior.
Elaboren un mapa sinóptico o cuadro comparativo sobre la Teoría del color y
como lograr el color deseado.
Responsabilidad
Manera
Didáctica de
Lograrlas
Haz uso de la información previa
investigada sobre Características de la
Teoría del color.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Participa y colabora de manera efectiva en equipos diversos.
Analiza los mapas sinópticos o cuadros comparativos que desarrollaron y su
aplicación en el diseño gráfico así como la exposición de los mismos.
Que traigan la misma investigación.
Discusión alargada sobre la creación de mapas y cuadros.
Página de
Página 22 de 22

Nombre Rediseñando
Contenido o
Competencia a
Desarrollar
Temas o
Habilidades
Instrucciones
para el Alumno
Instrucciones
para el
Docente
Recursos
materiales de
apoyo
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Utilizar los elementos fundamentales del diseño.
No. 1
1.1. Analizar las teorías del diseño (minimalismo, conceptualismo, etc.).
1.2. Identificar el impacto y el enfoque en diseños existentes.
1.3. Diseñar formatos considerando las zonas, áreas, dirección, sentido y
equilibrio.
1.4. Aplicar la teoría del color considerando el círculo cromático, contrastes, el
RGB (Red, Green, Blue) y CMY (Cyan, Magenta, Yellow).
Realiza lo que se te indica a continuación.
El docente evaluará los cambios fundamentados en la teoría de diseño y de color
se sugiere que se expongan sus trabajos en una presentación electronica.
Computadora y software de diseño.
Responsabilidad
Manera
Didáctica
de
Lograrlas
Aprende de forma autónoma.
Estimulando en el alumno el sentido del
cumplimiento en tiempo y forma de la
práctica siguiente.
Con las herramientas necesarias, construye su propio conocimiento.
Página de
Página 23 de 23

Realiza los siguientes pasos.
1. Consulta una página Web de alguna empresa comercial o de gobierno.
2. Identifica y analiza cada uno de sus elementos de su estructura, diseño y colores.
3. Copia la página completa en un documento en Word.
4. En el documento de Word rediseña la página Web, haciendo indicaciones y observaciones de
cada uno de los elementos de su estructura, diseño y colores.
5. Fundamenta los cambios y rediseños que realices en la página Web.
Una vez que esté Guardado, llama a tu profesor para que te revise la práctica.
Página de
Página 24 de 24

Con los ejercicios y prácticas ejecutados durante este contenido o competencia, desarrollaste los
temas o habilidades logrando:
1.1 Analizar las teorías del diseño (minimalismo, conceptualismo, etc.).
1.2 Identificar el impacto y el enfoque en diseños existentes.
1.3 Diseñar formatos considerando las zonas, áreas, dirección, sentido y equilibrio.
1.4 Aplicar la teoría del color considerando el círculo cromático, contrastes, el RGB (Red,
Green, Blue) y CMY (Cyan, Magenta, Yellow).
Para evaluar los temas o habilidades, conocimientos y actitudes de este contenido o competencia se
hará uso de los instrumentos de evaluación: GUIA DE OBSERVACION: TINF-04/M3S1/ED y LISTA
DE COTEJO: TINF-04/M3S1/EP
Página de
Página 25 de 25

Manejar los elementos básicos de un
lenguaje usado en la creación de
páginas Web.
3. Navegadores Web
4. Buscadores Web
5. Conociendo el código
6. Diseño Web
3. Una probadita
3. Navega y busca tu Información
4. Identificando la estructura
5. Repaso general de etiquetas
2
Página de
Página 26 de 26

2. Programando en un lenguaje de Hipertexto.
3. Diseñando según las necesidades.
En esta ocasión juntos incursionaremos en el novedoso mundo de la programación y el diseño de
páginas para Internet. Es importante que sepas que vamos a desarrollar nuestras capacidades, para
transformar ideas en un documento creado en un lenguaje de programación, para la creación de
páginas Web, logrando con ello transmitir información, colores, imágenes, movimiento, etc, es decir,
todos estos elementos tan manejados en la actualidad.
¿Suena interesante verdad?
Imagina crear tu propia página donde plasmes tus intereses, gustos, pasatiempos, familia, etc., ¡todo
lo que tu quieras!, definitivamente lo podrás lograr si te aplicas totalmente desde las primeras
actividades de esta competencia.
Para esto, el contenido de esta segunda competencia se constituye por los siguientes temas:
1. Definir objetivos y contenidos de la página Web.
2. Esquematizar la estructura general de una página Web.
3. Utilizar etiquetas en una página Web.
4. Establecer vínculos e hipervínculos.
5. Manipular objetos y formularios en una página Web.
6. Manipular tablas en una página Web.
7. Manipular imágenes y animaciones en una página Web.
8. Definir secciones de mapeo de imágenes en una página Web.
9. Insertar sonido y video en una página Web.
10. Implementar servicios de correo en una página Web.
Página de
Página 27 de 27

Finalmente, queremos invitarte a realizar todas las actividades que te proponga tu maestro o
facilitador, los ejercicios y prácticas en computadora que maneja esta guía, las investigaciones
solicitadas, manifestar tus puntos de vista y socializar los conocimientos con tus compañeros con el
fin de que adquieras todos estos conocimientos de vanguardia, como lo es: la creación de páginas
Web mediante un lenguaje de programación.
TEMAS O
HABILIDADES
RESULTADO DE
APRENDIZAJE
¡Iniciemos pues en este viaje del aprendizaje!
2.1. Definir objetivos y contenidos de la página Web.
2.2. Esquematizar la estructura general de una página Web.
2.3. Utilizar etiquetas en una página Web.
2.4. Establecer vínculos e hipervínculos.
2.5. Manipular objetos y formularios en una página Web.
2.6. Manipular tablas en una página Web.
2.7. Manipular imágenes y animaciones en una página Web.
2.8. Definir secciones de mapeo de imágenes en una página Web.
2.9. Insertar sonido y video en una página Web.
2.10. Implementar servicios de correo en una página Web.
Estructurar una página Web, manipular objetos, etiquetas, vínculos
e hipervínculos, tablas, imágenes, sonido, video, así como la
implementación de los servicios de correo en una página Web.
El docente muestra un video o realiza la consulta de una página Web en el aula, mostrando su código
y la ejecución, haciendo referencia a los elementos básicos, del lenguaje utilizados en la página Web.
Página de
Página 28 de 28

Nombre Navegadores Web No. 3
Instrucciones
para el Alumno
Conocimientos
a adquirir
Lee con atención la información que se te proporciona a continuación.
Internet
Navegadores Web
Manera
Didáctica de
Lograrlos
Se requiere que el alumno analice los
términos necesarios para cumplir con los
conocimientos de esta competencia, lo
esencial es que pueda determinar cual es el
funcionamiento de los navegadores.
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.
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.
Un navegador Web (del inglés, Web browser) es una aplicación software que permite al usuario
recuperar y visualizar documentos de hipertexto, comúnmente descritos en HTML, desde servidores
Web de todo el mundo a través de Internet.
Esta red de documentos es denominada World Wide Web (WWW). Cualquier navegador actual
permite mostrar o ejecutar gráficos, secuencias de vídeo, sonido, animaciones y programas diversos
además del texto y los hipervínculos o enlaces.
Página de
Página 29 de 29

La funcionalidad básica de un navegador Web es permitir la visualización de documentos de texto,
posiblemente con recursos multimedia incrustados.
Los documentos pueden estar ubicados en la computadora en donde está el usuario, pero también
pueden estar en cualquier otro dispositivo que esté conectado a la computadora del usuario o a
través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un
software servidor Web). Tales documentos, comúnmente denominados páginas Web, poseen
hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente
relacionado con el texto o la imagen.
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.
Microsoft Internet Explorer
Mozilla FireFox
Página de
Página 30 de 30

Nombre Buscadores Web No. 4
Instrucciones
para el Alumno
Conocimientos
a adquirir
Lee con atención la información que se te proporciona a continuación.
Internet
Buscadores Web
Tipos de
buscadores
Manera
Didáctica de
Lograrlos
Se requiere que el alumno analice los
términos necesarios para cumplir con los
conocimientos de esta competencia, lo
esencial es que pueda determinar cual es el
funcionamiento de los buscadores Web.
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.
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 de
Página 31 de 31

http://www.google.com/ http://www.altavista.com/
http://www.yahoo.com/ http://www.lycos.es/
http://www.alltheweb.com/ http://es.msn.com/
Página de
Página 32 de 32

Nombre Navega y busca tu información No. 3
Instrucciones
para el Alumno
Instrucciones
para el Profesor
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
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.
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.
Orden
Manera
Didáctica de
Lograrlas
El alumno realiza la investigación en los
distintos navegadores Web.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Interpreta la información investigada, y depurando y estructurando su propia
información a partir de varias alternativas, utilizando medios, códigos y
herramientas apropiadas.
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.
Página de
Página 33 de 33

Nombre Conociendo el código No. 5
Instrucciones
para el Alumno
Conocimientos
a adquirir
Investiga sobre un lenguaje utilizado para creación de páginas Web.
Realizar la investigación en la Internet, utilizando un buscador, a través de un
navegador Web.
Editores de
texto.
Lenguaje de
hipertexto.
Estructura de
una página
Web.
Vínculos e
hipervínculos.
Navegadores
de Internet.
Manera
Didáctica de
Lograrlos
Se requiere que el alumno analice los
términos necesarios para cumplir con los
conocimientos de esta competencia, lo
esencial es que pueda determinar cual es el
funcionamiento de los mismos.
Página de
Página 34 de 34

Nombre Una probadita No. 3
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
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.
¿Qué es una etiqueta?
Identifica y analiza el código presentado y coméntalas con tus compañeros.
Recuerda que 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.
Orden
Manera
Didáctica
de
Lograrlas
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 < >.
Al revisar los pasos e ir los trabajando.
Aprende por iniciativa e interés propio a lo largo de la vida.
Analizar e identificar los distintos tipos de adaptadores de red.
Para mas información básica consulta:
http://www.aulafacil.com/CursoHtml/temario.htm
Página de
Página 35 de 35

Para ello necesitamos un editor de textos:
Un "editor de texto" 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.
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...).
Veamos la estructura básica de una pagina Web.
Declara el inicio del programa
Mi Primer Página...
Declara la cabecera y el título de la página Web
Establece un color de fondo para el cuerpo del
programa.
Elaborar páginas Web utilizando las
aplicaciones actuales
WordPad es un sencillo programa de
procesamiento de texto que viene
incluido en la lista de accesorios
gratuitos en Microsoft Windows.
Texto que se muestra dentro de la página Web
Se cierra el cuerpo del programa
Cierra la etiqueta para el programa
Página de
Página 36 de 36

Veamos escrito en un editor de texto, cuando el archivo es guardado con la extensión: .htm o .html.
Cuyo resultado se visualizara de la siguiente forma:
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 de
Página 37 de 37

Nombre Identificando la estructura No. 4
Instrucciones
para el Alumno
Instrucciones
para el docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
1.
2.
Mi Primer página Web...
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.
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.
Orden
Manera
Didáctica de
Lograrlas
El alumno utiliza la investigación de los
etiquetas del lenguaje para crear página
Web.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Interpreta la información investigada, interpreta y diseña la estructura básica de
una página Web, utilizando medios, códigos y herramientas apropiadas.
CODIGO EXPLICA PARA QUE SIRVE CADA ETIQUETA
Página de
Página 38 de 38

3.
4.
5.
6.
VIVA MEXICO
7. HOLA
8. HOLA
9. HOLA
10.
VIVA MEXICO
11.
VIVA MEXICO
Página de
Página 39 de 39

12.
VIVA MEXICO
13.
VIVA MEXICO
14.
VIVA MEXICO
15. scrollamount
16. scrooldelay
17. loop
18. hspace y vspace
19.
20.
Página de
Página 40 de 40

21. HOLA /h1>
22.
.
.
.
HOLA
23. CECyTE
24. CECyTE
25. CECyTE
26. CECyTE
27. CECyTE
28. &nbsp
29. &aacute
Página de
Página 41 de 41

30.
31.
Página de
Página 42 de 42

Nombre Programando en un lenguaje de hipertexto No. 2
Contenido o
Competencia a
Desarrollar
Temas o
Habilidades
Instrucciones
para el Alumno
Instrucciones
para el Docente
Manejar los elementos básicos de un lenguaje usado en la creación de páginas
WEB (HTML, DHTML, ASP, Java Script, CSS u otros).
2.1. Definir objetivos y contenidos de la página Web.
2.2. Esquematizar la estructura general de una página Web.
2.3. Utilizar etiquetas en una página Web.
1. Inicializa el navegador instalado.
2. Utiliza los buscadores de Internet para bajar una página Web que hable de
los tipos de protocolos.
3. Envía la información que encontraste acerca de protocolos y a la dirección
de correo proporcionada por tu profesor en un archivo adjunto.
4. Inicia el editor Bloc de notas.
5. Genera el código para crear una página Web siguiendo la siguiente
estructura.
a. Insertar como título de la página tu nombre completo.
b. Coloca en color azul el cuerpo de la página.
c. Insertar como título dentro de la página ―ELABORACIÓN DE
PÁGINAS WEB‖.
d. Insertar el texto buscado y haz una síntesis en el cuerpo de la
página.
e. Coloca una marquesina de color blanco con texto Arial número 12
en color rojo movimiento alternativo y dirección izquierda que se
repita solamente 3 veces.
f. Inserta las siguientes palabras y caracteres especiales en la
Página Web.
Página (Con letra en negritas).
Canción (Con letra cursiva).
© (con letra subrayado).
® (con letra teletipo o máquina de escribir).
6. Guardar la página con el nombre Práctica2 y con formato htm en algún
medio de información.
1. Prueba que funcione adecuadamente tu página con lo requerido y una vez
que termines llama al profesor y entrega tu disco.
Verificar que frente a los integrantes del grupo o del equipo, el alumno
desarrolle cada uno de los pasos indicados.
Página de
Página 43 de 43

Recursos
materiales de
apoyo
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Computadora e Internet.
Orden
Manera
Didáctica
de
Lograrlas
Aprende de forma autónoma
Realizando la secuencia de pasos en la
práctica mostrada.
Con las herramientas necesarias, construye su propio conocimiento.
Página de
Página 44 de 44

Nombre Diseño Web No. 6
Instrucciones
para el Alumno
Conocimientos
a adquirir
Tabla
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 y . Entre dichas etiquetas habrá que
especificar las filas y columnas que formarán la tabla.
Fila
Es necesario insertar las etiquetas y por cada una de las filas de la tabla. Estas etiquetas
deberán insertarse entre las etiquetas y .
Por ejemplo, para crear una tabla con cinco filas escribiríamos:
...
...
...
Lee con atención algunas etiquetas que nos permiten personalizar nuestra página
Web.
Diseñar tablas.
Insertar
Imágenes,
sonido y video.
Insertar
vínculos e
hipervínculos.
Manera
Didáctica de
Lograrlos
Se requiere que el alumno analice los
términos necesarios para cumplir con los
conocimientos de esta competencia, lo
esencial es que pueda determinar cual es el
funcionamiento de los mismos en el diseño
Web.
Página de
Página 45 de 45

...
...
Columna o celda
Para crear una tabla no basta con especificar el número de filas, es necesario también especificar
el número de columnas. 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.
CECyTE EMILIANO ZAPATA
CECyTE TLAYECAC
CECyTE TENEXTEPANGO
CECyTE EMILIANO YECAPIXTLA
Formato de la tabla
width
Atributo Sirve para Valores
Ancho de la tabla
height Alto de la tabla
cellpadding
Espacio entre el contenido de las
celdas y el borde
Un número, acompañado de %
cuando se desee que sea en
porcentaje
Un número, acompañado de %
cuando se desee que sea en
porcentaje
Un número
cellspacing Espacio entre celdas Un número
border Grosor del borde Un número
align
Alineación de la tabla dentro de la
página
left (izquierda)
right (derecha)
center (centro)
bgcolor Color de fondo Número hexadecimal
background Imagen de fondo Número hexadecimal
bordercolor Color del borde Número hexadecimal
Página de
Página 46 de 46

Ya modificando los atributos de la tabla anterior nos quedaría:
CECyTE EMILIANO ZAPATA
CECyTE TLAYECAC
CECyTE TENEXTEPANGO
CECyTE YECAPIXTLA
También existen algunos atributos validos para las celdas:
Atributo Sirve para Valores
align Alineación del contenido de la celda
valign Alineación vertical del contenido de la celda
left (izquierda)
right (derecha)
center (centro)
baseline (línea de base)
bottom (inferior)
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:
Página de
Página 47 de 47

CECyTE EMILIANO ZAPATA
CECyTE TLAYECAC
CECyTE TENEXTEPANGO
CECyTE YECAPIXTLA
Combinar celdas
Para las etiquetas y 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.
SOFTWARE DE DISEÑO
SUBMODULOS
CUMPLE
SI
NO
Aplicar las herramientas de software de diseño para el manejo de gráficos.
1
Página de
Página 48 de 48

2
Generar animación con aplicaciones multimedia.
3
4
Elaborar páginas Web utilizando las aplicaciones actuales.
5
6
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 . 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:
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 de
Página 49 de 49

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.

CECyTE TLAYECAC
CECyTE TENEXTEPANGO
CECyTE YECAPIXTLA
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.
Donde src, nos indica la ruta del archivo de audio que se escuchará y el atributo loop="-1" 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.
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.
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.
Página de
Página 51 de 51

Donde embed permite jalar el control, src nos indica el archivo que vamos a abrir, width="400" nos
indica el alto del video y height="300", nos indica el alto autostart =”false”, establece que no se
reproduzca automáticamente y loop=”true” que se reproducirá nuevamente una vez que termine.
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.
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.
ESTA ES UN ANCLA
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 de hipervínculo.
Conectémonos a una página que se encuentre dentro de nuestra misma carpeta. CECyTE PLANTEL EMILIANO ZAPATA
Donde zapata2.html es la página a donde nos conectaremos, y CECyTE PLANTEL EMILIANO
ZAPATA, el hipervínculo.
Página de
Página 52 de 52

Vamos a realizar una conexión a una página Web existente
CONECTANDONOS AGOOGLE
Para descargar o abrir un archivo, por ejemplo un documento de texto. Debemos de tener el archivo
en la misma carpeta.
DESCARGAR...
Página de
Página 53 de 53

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.
ESCRIBENOS...
Página de
Página 54 de 54

Nombre Repaso general de etiquetas No. 5
Instrucciones
para el Alumno
Instrucciones
para el Docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
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.
Se recomienda una demostración práctica sobre la creación de una página Web
que incluya: reglas, marquesinas, textos con distintos formatos, tablas, imágenes,
sonido de fondo, sonido, video, anclas, vínculos e hipervínculos.
Orden
Manera
Didáctica de
Lograrlas
Al poner atención a la secuencia de
operaciones que realizo el profesor y al
expresar sus dudas.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Relaciona su conocimientos previos y los nuevos proporcionados por el profesor
para la creación de una pagina Web, utilizando las etiquetas html.
Página de
Página 55 de 55

Nombre Diseñando según las necesidades No. 3
Contenido o
Competencia a
Desarrollar
Temas o
Habilidades
Instrucciones
para el Alumno
Manejar los elementos básicos de un lenguaje usado en la creación de páginas
WEB (HTML, DHTML, ASP, Java Script, CSS u otros).
2.1. Definir objetivos y contenidos de la página Web.
2.2. Esquematizar la estructura general de una página Web.
2.3. Utilizar etiquetas en una página Web.
2.4. Establecer vínculos e hipervínculos
2.5. Manipular objetos y formularios en una página Web.
2.6. Manipular tablas en una página Web
2.7. Manipular Imágenes y animaciones en una página Web.
2.8. Definir secciones de mapeo de imágenes en una página Web.
2.9. Insertar sonido y video en una página Web.
2.10. Implementar servicios de correo en una página Web.
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.
Software de Diseño
Aplicar las herramientas de software de diseño para
el manejo de gráficos.
Corel Dra..
Generar animación con aplicaciones multimedia. Flash
Elaborar páginas Web utilizando las aplicaciones
actuales.
Dreamweaver
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.
Página de
Página 56 de 56

Instrucciones
para el Docente
Recursos
materiales de
apoyo
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
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.
Verificar que frente a los integrantes del grupo o del equipo, el alumno desarrolle
cada uno de los pasos indicados
Computadora, Internet y software de diseño.
Orden
Manera
Didáctica
de
Lograrlas
Aprende de forma autónoma
Realizando la secuencia de pasos en la
práctica mostrada.
Con las herramientas necesarias, construye su propio conocimiento.
Página de
Página 57 de 57

Con los ejercicios y prácticas ejecutados durante este contenido o competencia, desarrollaste los
temas o habilidades logrando:
2.1. Definir objetivos y contenidos de la página Web.
2.2. Esquematizar la estructura general de una página Web.
2.3. Utilizar etiquetas en una página Web.
2.4. Establecer vínculos e hipervínculos
2.5. Manipular objetos y formularios en una página Web.
2.6. Manipular tablas en una página Web
2.7. Manipular Imágenes y animaciones en una página Web.
2.8. Definir secciones de mapeo de imágenes en una página Web.
2.9. Insertar sonido y video en una página Web.
2.10. Implementar servicios de correo en una página Web.
Para evaluar los temas o habilidades, conocimientos y actitudes de este contenido o competencia se
hará uso de los instrumentos de evaluación: GUIA DE OBSERVACION: TINF-04/M3S1/ED y LISTA
DE COTEJO: TINF-04/M3S1/EP
Página de
Página 58 de 58

Diseñar una pagina Web con un
software de aplicación
7. El baúl de tus archivos
8. Conociendo los editores visuales para el diseño de paginas Web.
9. Conociendo la barra de Inserción ( Insert Toolbar)
10. Que es un sitio Web
11. Dividiendo tú pagina.
12. Que es un Formulario
13. Conectando tus paginas
14. Los servidores Web
4. Mostremos un ejemplo de un mapa del sitio.
5. Editores Visuales de paginas Web
6. Pantalla del editor Web Visual
7. Mostrando el área de trabajo
8. Creando un sitio Web
9. Utilizando los Frames
10. La importancia de los comentarios
11. Inserción de etiquetas secundarias
12. Inserción de tablas
3
Página de
Página 59 de 59

13. Inserción de Imágenes.
14. Inserción de elementos multimedia.
15. Inserción de botones activables.
16. Referencias
17. Saltando en tu documento
18. Efectos en tus conexiones
19. Manipulación en tus conexiones
20. Manipulando la conexión a las páginas Web.
21. Identifica la diferencia.
6. Diseña un mapa del sitio
7. Identifica y anota los nombres de los componentes de la pantalla
8. Manipulación de los componentes de la pantalla del editor Web Visual
9. Aprende a crear un sitio Web
10. Presta atención a la explicación media
11. Elementos del formulario
12. Presta atención a la explicación de formularios
13. Observa con atención
14. Manipulando la conexión a las paginas Web
15. Aprende a almacenar tus paginas Web en un servidor gratuito
4. La comunicación te envuelve
Página de
Página 60 de 60

5. Aprende a almacenar tus paginas Web en un servidor gratuito
1. Diseñando una pagina Web en un editor visual
2. Diseñando una página Web en un editor visual con características especificas.
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.
TEMAS O
HABILIDADES
RESULTADO DE
APRENDIZAJE
3.1 Definir objetivos y contenidos de la página Web.
3.2 Establecer Etiquetas (principales y secundarias, Caracteres
especiales) en la página Web.
3.3. Establecer Links dentro de la página Web, entre páginas
Web y entre servidores.
3.4. Manipular Imágenes dentro de una página Web.
3.5. Estructurar tablas en una página Web.
3.6. Insertar Sonido y Video en una página Web.
Al término de este tema lograras la habilidad para definir los
objetivos, y estructurar los contenidos de la página Web.
Estructurar etiquetas principales, secundarias y caracteres
especiales, establecer Links dentro de la página Web y entre los
servidores, manipular imágenes, estructuras tablas e insertar
Sonido y video en una pagina Web
Página de
Página 61 de 61

Página de
Página 62 de 62

El docente solicita una investigación sobre el tema de Calentamiento global, y de manera grupal por
medio de una lluvia de ideas los alumnos plantean el objetivo de la página, los contenidos que
contendrá la información así como la estructura del documento.
Página de
Página 63 de 63

Nombre El baúl de tus archivos No. 7
Instrucciones
para el Alumno
Conocimientos
a adquirir
Mapa del sitio (site map)
Investiga que es un mapa de sitio Web, y cual su objetivo.
√ Determinación del
objetivo de página Web.
√ Mapa del sitio
Manera
Didáctica
de
Lograrlos
El análisis de la investigación que se
realizara a través de un medio
electrónico o bibliográfico.
Es la representación gráfica o textual de un sitio Web. El mapa de un sitio Web puede ser un
documento que se utiliza para planificar el diseño de la Web, o puede ser una página Web donde se
listan todas -o las más importantes- páginas Web de un sitio (generalmente organizadas de alguna
manera).
Es importante determinar a que tipo de personas estaría dirigida nuestra página Web. Enfocándonos
al objetivo que queremos lograr con la información que se va plasmar en ella.
Para garantizar el éxito en cualquier proyecto, resulta indispensable efectuar su planeación, es decir,
trazar y poner por escrito los detalles del proyecto, antes de su ejecución.
Página de
Página 64 de 64

Nombre Mostremos un ejemplo de un mapa del sitio. No. 4
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Roberto Ruiz Alarcón
Nieto (pagina1_1.htm)
Analiza la siguiente imagen con tus compañeros
√ Orden
Manera
Didáctica
de
Lograrlas
Visualiza e identifica la estructura de la
página Web.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Visualizando e identificando los aspectos importantes en el diseño de la estructura
de la página Web.
Pedro Garcia Ruiz
Hijo (pagina1.htm)
Familia García Ruiz
Juan García y Maria Ruiz
Pagina principal (index.htm)
Wendy Ruiz Alarcón
Nieto (pagina1_1.htm)
Mariela García Ruiz
Hija (pagina2.htm)
Página de
Página 65 de 65

Nombre Diseña un mapa del sitio No. 6
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Intégrate en equipo máximo 3 personas para realizar la dinámica de integración
dada por el profesor.
Elaboren un mapa del sitio, con el tema de Drogadicción, definiendo el objetivo
que se persigue al dar a conocer este problema social.
Orden,
responsabilidad
Manera
Didáctica de
Lograrlas
Haz uso de la información previa
investigada sobre la drogadicción.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Participa y colabora de manera efectiva en equipos diversos.
El mapa de sitio también puede hacer
referencia a un listado de enlaces que
pertenecen a un sitio Web.
Haz uso de la información que investigaste de forma individual y comparte esta,
con tus compañeros de equipo, para elaborar un mapa del sitio definiendo un
objetivo para presentara tu información.
Página de
Página 66 de 66

Nombre
Instrucciones
para el Alumno
Conocimientos
a adquirir
Conociendo los editores visuales para el diseño de paginas Web.
Lee con atención el siguiente texto y analiza la información descrita.
√ Editores visuales Web
√ Elementos de la pantalla
√ Inserción de componentes
Manera
Didáctica
de
Lograrlos
No. 8
A través del análisis de
la lectura.
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.
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.
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.
Página de
Página 67 de 67

Nombre Editores Visuales de paginas Web No. 5
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Analiza las siguientes figuras en grupo con apoyo de tu docente y comenta las
diferencias y semejanzas entre tus compañeros.
√ Orden
Manera
Didáctica de
Lograrlas
Aquí te mostramos dos de los editores visuales de páginas Web más utilizados.
Macromedia Dreamweaver
Microsoft FrontPage
Al identificar la secuencia de las imágenes que
se muestran, así como las diferencias y
semejanzas entre ambos editores.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Analizar e identificar los dos tipos de editores Web visuales.
Página de
Página 68 de 68

Estos son los programas
generadores de código los
manejaremos en este
contenido.
Página de
Página 69 de 69

Nombre Pantalla del editor Web Visual. No. 6
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Analiza los elementos de la pantalla del editor Web Visual.
√ Orden
Manera
Didáctica de
Lograrlas
Al identificar los elementos que componen la
pantalla del editor Web visual.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Analizar e identificar los componentes de un editor Web Visual.
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 de
Página 70 de 70

Nombre Identifica y anota los nombres de los componentes de la pantalla. No. 7
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Identifica los nombres de los elementos de la pantalla y escríbelas en los
recuadros en el Idioma Ingles.
Orden,
responsabilidad
Manera
Didáctica de
Lograrlas
El docente les pedirá a los alumnos que se
integren con otro de sus compañeros.
En parejas identificaran, anotaran y
traducirán los nombres de los componentes
de la pantalla.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Participa y colabora de manera efectiva en equipos diversos.
La identificación de los elementos de la pantalla, en el idioma Ingles, esto debido
a las diferentes versiones del Idioma del Editor Web visual.
Página de
Página 71 de 71

Página de
Página 72 de 72

Nombre Manipulación de los componentes de la pantalla del editor Web Visual No. 8
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Realiza de formar ordenada y con responsabilidad los pasos siguientes:
1. En la ventana principal del software de edición de páginas Web, anota
cuántas y cuáles son las barras de herramientas que se pueden ocultar
y visualizar.
2. En la ventana principal activa los siguientes paneles:
o Insertar.
o Líneas de tiempo.
o Resultados.
3. Cambia de posición de por lo menos 4 paneles e imprime esa ventana.
Orden,
responsabilidad
Manera
Didáctica de
Lograrlas
El docente revisara como los alumnos
manipulan los componentes de la pantalla
del editor Web, así como la impresión de la
misma.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Participa y colabora de manera efectiva en equipos diversos.
La manipulación de los componentes de la pantalla del editor Web visual, la
ubicación de los elementos de la pantalla, así como la inserción de componentes.
Página de
Página 73 de 73

Nombre Mostrando el área de trabajo No. 7
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Analiza los elementos de la pantalla del editor Web Visual.
√ Orden
Manera
Didáctica de
Lograrlas
Al identificar el área de trabajo en pantalla del
editor Web visual.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Analizar e identificar los componentes de un editor Web Visual.
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.
Página de
Página 74 de 74

Nombre Conociendo la barra de Inserción ( Insert Toolbar) No. 9
Instrucciones
para el Alumno
Conocimientos
a adquirir
Analiza la siguiente información que se presenta.
Elementos de la
barra de
herramientas.
Panel de
propiedades.
LA BARRA DE INSERCIÓN (Insert Toolbar):
Manera
Didáctica
de
Lograrlos
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.
Realizando un recorrido por cada uno de los
elementos que contiene nuestro Editor Web
Visual.
Has uso de esta herramienta en el laboratorio de cómputo con el apoyo del profesor.
Página de
Página 75 de 75

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.
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 de
Página 76 de 76

Nombre Que es un sitio Web No. 10
Instrucciones
para el Alumno
Conocimientos
a adquirir
ADMINISTRAR SITIOS WEB
Analiza la información que se te presenta y enriquece tus conocimientos
investigando más sobre el tema.
Que es un sitio Web
Ventajas de crear un
sitio Web
Manera
Didáctica
de
Lograrlos
Al analizar la información proporcionada
identificando la importancia de crear y utilizar
un sitio Web
Un sitio Web (en inglés: website) es un conjunto de páginas Web, típicamente comunes a un dominio
de Internet o subdominio en la World Wide Web en Internet.
No debemos confundir sitio Web con página Web, esta última es solo un archivo html, y muchas
veces las empresas o personas tienen mas de 1 archivo colgados en Internet, lo que se constituye en
sitio Web.
Un sitio Web está alojado en un sistema de ordenador conocido como servidor Web, también llamado
servidor HTTP, y estos términos también pueden referirse al software que se ejecuta en este sistema
y que recupera y entrega las páginas Web en respuesta a peticiones desde el sitio Web del usuario.
Apache es el programa más comúnmente usado como servidor Web y el Internet Information
Services (IIS) de Microsoft también se usa comúnmente.
Un sitio Web estático es uno que tiene contenido que no se espera que cambie frecuentemente y se
mantiene manualmente por alguna persona o personas que usan algún tipo de programa editor.
Un sitio web dinámico puede tener cambios frecuentes en la información. Hay un amplio abanico de
sistemas de software, como Active Server Pages (ASP), Java Server Pages (JSP) y el lenguaje de
programación PHP que están disponibles para generar sistemas de sitios Web dinámicos.
Página de
Página 77 de 77

Nombre Creando un sitio Web No. 8
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Veamos como se crea un sitio local len nuestra máquina llamado CECyTE, el cual contendrá todos
los archivos de nuestra página Web.
Al definir un sitio local:
En las siguientes imágenes se muestra como crear un sitio Web.
Orden
Manera
Didáctica
de
Lograrlas
Aprende por iniciativa e interés propio a lo largo de la vida.
Al identificar la secuencia de las imágenes
que se muestran, para crear un sitio Web.
Analizar e identificar la secuencia a seguir para crear un sitio Web.
o Se establece la estructura del sitio que se está creando.
o Se indica a Dreamweaver dónde se desea almacenar todos los archivos del sitio.
Seleccionar Menú Sitio > Nuevo sitio.
Página de
Página 78 de 78

En el campo Nombre del sitio, se escribe el nombre
del sitio (en este caso CECyTE). Conviene que sea
corto. El nombre del sitio sólo permite identificarlo
internamente y seleccionarlo fácilmente en la lista
de sitios que se van definiendo (si es que hay más
de uno).
Indicamos que no utilizamos ninguna tecnología
Servidor.
La carpeta raíz local, accede a la carpeta en que
se situarán las páginas del sitio (previamente
creada).
El campo Carpeta raíz local se actualizará y
mostrará la ruta del sitio local en nuestro disco
duro.
Dentro de esa carpeta se podrán crear otras, pero
todos los archivos del sitio Web deben de estar
dentro de la carpeta principal.
Como trabajaremos en una carpeta dentro de
nuestra máquina local, no utilizamos ningún
servidor remoto.
Página de
Página 79 de 79

Por último nos muestra el resumen de nuestro sitio
Web.
Cuando iniciemos la aplicación, nos muestra la
información del sitio que tenemos seleccionado.
A partir de aquí ya tenemos el sitio Web creado en la
PC, por lo tanto todos los archivos, imágenes y
documentos utilizados para las páginas Web,
quedarán almacenadas en esta carpeta.
Una página index (index.htm), es el archivo principal
de nuestro sitio Web, es decir va a ser la página
principal, que se recomienda escribir su nombre del
archivo con minúsculas.
Página de
Página 80 de 80

Nombre Dividiendo tú pagina. No. 11
Instrucciones
para el Alumno
Conocimientos
a adquirir
Lee y analiza con atención los siguientes términos.
Marcos o frames
Manera
Didáctica
de
Lograrlos
Se requiere que el alumno analice estos
términos necesarios para cumplir con los
conocimientos de esta competencia, lo
esencial es que pueda determinar cual es la
ventaja de dividir nuestra página Web.
Los marcos HTML permiten a los autores presentar documentos con vistas múltiples, que pueden ser
ventanas o subventanas independientes. Las vistas múltiples ofrecen a los autores una manera de
mantener cierta información visible mientras otras vistas se desplazan o se sustituyen. Por ejemplo,
dentro de una misma ventana, un marco podría mostrar un gráfico estático, un segundo marco un
menú de navegación, y un tercero el documento principal que puede ser desplazado, o reemplazado
al navegar por el segundo marco.
Panel de Marcos(Frames Panel): este comando abre el panel de Frames, el cual muestra y permite
editar los Frames o Marcos que contiene la Página Web. Los Frames son páginas Web
independientes que se muestran sobre otra página Web ocupan todo un margen; generalmente en la
esquina o a un lado.
Página de
Página 81 de 81

Página de
Página 82 de 82

Nombre Utilizando los Frames No. 9
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Observa, lee y analiza los siguientes objetos.
Orden
Aprende de forma autónoma
Manera
Didáctica
de
Lograrlas
Al observar en la figura como se puede
dividir la pantalla para organizar mejor la
información a mostrar.
Aprende por iniciativa propia reconociendo los Frames en que se divide nuestra
página Web.
Página de
Página 83 de 83

Nombre Aprende a crear un sitio Web No. 9
Instrucciones
para el Alumno
Instrucciones
para el Docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
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.
Se recomienda una demostración práctica sobre la creacion de Frames, haciendo
notar la importancia de utilzar los frames.
orden
Se expresa y se comunica
Manera
Didáctica de
Lograrlas
Al poner atención a la secuencia de
operaciones que realiza el profesor y al
expresar sus dudas.
Relaciona su conocimientos previos y los nuevos proporcionados por el profesor
para la creación de Frames expresándose en forma, oral y escrita.
Página de
Página 84 de 84

Nombre La importancia de los comentarios No. 10
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
COMENTARIOS
Observa y lee la información que se proporciona a continuación.
Orden
Aprende de forma autónoma
Manera
Didáctica
de
Lograrlas
Al observar en la figura para insertar un
comentario.
Aprende por iniciativa propia reconociendo la importancia de los comentarios, en la
documentación de las páginas Web.
Un comentario es un texto informativo que se anexa en una página
Web, con el objetivo de identificar las líneas de código de la
aplicación.
Un comentario no se ve en la página Web, solo queda insertado en el
código de la misma.
Página de
Página 85 de 85

Aquí nos muestra el comentario insertado en el ejemplo.
La línea 10, nos muestra el comentario insertado.
Página de
Página 86 de 86

Nombre Inserción de etiquetas secundarias. No. 11
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Este icono abre el cuadro de diálogo de Insert
Date el cual permite agregar la fecha del día de
hoy u otra a la página Web.
Contadores de Visitas
Observa y lee la información que se proporciona a continuación.
Orden
Aprende de forma autónoma
Manera
Didáctica
de
Lograrlas
Los contadores de visitas llevan el control del
número de visitantes que han consultado la
página Web.
Al observar en la figura para insertar algunas
etiquetas secundarias.
Aprende por iniciativa propia reconociendo la inserción de algunas etiquetas
secundarias en la página Web.
Página de
Página 87 de 87

Adicionar Marquesinas
Las marquesinas nos permiten anexar textos, imágenes, entre otros objetos con movimiento dentro
de la página Web.
Aunque algunos editores no cuentan con esta herramienta, lo que podemos hacer es activar la Vista
Código y escribir el código de la marquesina.
Este es el resultado del código insertado en la página Web.
Página de
Página 88 de 88

Nombre Inserción de tablas. No. 12
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Observa y lee la información que se proporciona a continuación sobre las tablas.
Orden
Aprende de forma autónoma
Manera
Didáctica
de
Lograrlas
Las tablas representan relaciones entre datos, una tabla esta compuesta por filas y columnas,
donde a la intersección entre una fila y una columna se le conoce como celda.
Este icono permite agregar una tabla a la página Web. Ésta tabla permite acomodar en sus
recuadros imágenes, y textos permitiendo tener una mejor estructura en tus páginas.
Observa esta ventana e investiga cuál es su funcionamiento.
Al observar en la figura para insertar tablas y
organizar mejor la información.
Aprende por iniciativa propia conociendo la inserción de tablas para la organización
de la información.
Página de
Página 89 de 89

Nombre Inserción de Imágenes. No. 13
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Observa y lee la información que se proporciona a continuación sobre la inserción
de Imágenes.
Orden
Aprende de forma autónoma
Manera
Didáctica
de
Lograrlas
Al observar la secuencia de las figuras para
insertar Imágenes dentro de la página Web.
Aprende por iniciativa propia conociendo la secuencia para insertar imágenes
dentro de la página.
Página de
Página 90 de 90

Este icono contiene un submenú que permite insertar una imagen, un apartador de imagen, una
imagen cambiante una imagen Web HTML de Fireworks o una barra de Navegación.
Se recomienda que las imágenes que se manejen estén almacenadas en el mismo directorio de la
página Web, al momento en que se coloque en servidor de Internet. Observa y analiza la siguiente
ventana con tus compañeros y profesor.
NOTA.- Busca dos imágenes sobre tu deporte favorito y almacénalas en una carpeta denominada
―mi primera página Web‖.
Página de
Página 91 de 91

Nombre Inserción de elementos multimedia. No. 14
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Observa y lee la información que se proporciona a continuación sobre la inserción
de los elementos multimedia
Orden
Aprende de forma autónoma.
Manera
Didáctica
de
Lograrlas
Este icono abre un menú flotante que permite insertar elementos como:
Animaciones Flash, botones animados, applets de Java, Controladores
ActiveX y plugins.
En el laboratorio analiza y describe para qué sirve cada uno de los
siguientes comandos del icono media.
Al observar la secuencia de las figuras para
insertar elementos multimedia.
Aprende por iniciativa propia conociendo la secuencia para insertar elementos
multimedia dentro de la página.
Página de
Página 92 de 92

Nombre Inserción de botones activables. No. 15
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Manipular Botones Activables
Observa y lee la información que se proporciona a continuación sobre la inserción
de botones activables.
Orden
Aprende de forma autónoma.
Manera
Didáctica
de
Lograrlas
Dentro del software de diseño, se pueden anexar botones
activables, que vienen incluidos en el software de diseño
Web, o que son generados en algún software de
animación multimedia, como por ejemplo Macromedia
Flash.
Este es el resultado de un botón activable insertado en la página Web.
Al observar la secuencia de la explicación de
las figuras para insertar botones activables.
Aprende por iniciativa propia conociendo la secuencia para insertar botones
activables dentro de la página.
Página de
Página 93 de 93

Nombre Presta atención a la explicación media No. 10
Instrucciones
para el Alumno
Instrucciones
para el Docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
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.
Se recomienda una demostración práctica sobre la inserción de comentarios,
marquesinas, imágenes, fecha, tablas, así como la inserción de objetos
multimedia como son:
o Audio
o Video
o Animaciones Flash
o Botones activables
orden
Se expresa y se comunica
Manera
Didáctica de
Lograrlas
Al poner atención a la secuencia de
operaciones que realizo el profesor y al
expresar sus dudas.
Relaciona su conocimientos previos y los nuevos proporcionados por el
profesor para insertar etiquetas en la pagina Web expresándolas en forma, oral
y escrita.
Página de
Página 94 de 94

Nombre Que es un Formulario No. 12
Instrucciones
para el Alumno
Conocimientos
a adquirir
Crear Formularios
Observa y analiza la siguiente información y las ilustraciones.
Formularios
Elementos de un
formulario
Manera
Didáctica
de
Lograrlos
Se requiere que el alumno analice estos
términos necesarios para cumplir con los
conocimientos de los formularios, sus
elementos y su funcionamiento.
Un formulario es una aplicación que se utiliza para recoger datos de los usuarios, nos pueden
servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones
de los usuarios, recibir preguntas, hacer suscripciones a un boletín o revista que editemos,
etc.
Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un
programa que recibirá los datos y hará el tratamiento correspondiente (una base de datos por
ejemplo).
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables,
y botones.
Página de
Página 95 de 95

Página de
Página 96 de 96

Nombre Elementos del formulario No. 11
Instrucciones
para el Alumno
Instrucciones
para el Docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Realiza una investigación sobre los elementos que se pueden integrar en un
formulario.
Se recomienda revisar la investigación realizada por los alumnos.
Orden
Manera
Didáctica de
Lograrlas
El alumno le da un orden a la investigación
realizada, analizando y organizando la
información de los elementos de un
formulario.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Interpreta la información investigada, y diseña un documento con la información
de los elementos que componen un formulario.
Recuerda que los formularios sirven para recibir información de los
usuarios, como por ejemplo una encuesta, un cuestionario en donde los
datos se pueden almacenar en una base de datos o enviar por medio de un
correo electrónico.
Página de
Página 97 de 97

Nombre Presta atención a la explicación de formularios No. 12
Instrucciones
para el Alumno
Instrucciones
para el Docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
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.
Se recomienda una demostración práctica sobre la creación de formularios y la
manipulación de datos a un correo electrónico y a una base de datos.
Orden
Se expresa y se comunica
Manera
Didáctica de
Lograrlas
Al poner atención a la secuencia de
operaciones que realizo el profesor y al
expresar sus dudas.
Relaciona su conocimientos previos y los nuevos proporcionados por el profesor
para la creación de formularios, así como la manipulación en el envió de la
información.
Página de
Página 98 de 98

Nombre
Competencia a
Desarrollar
Habilidades
Recursos
materiales de
apoyo
Diseñando una página Web en un editor visual.
Diseñar una página Web con un software de aplicación.
Definir objetivos y contenidos de la página Web.
No. 1
Establecer Etiquetas (principales y secundarias, Caracteres
especiales) en la página Web.
Establecer Links dentro de la página Web, entre páginas Web y entre
servidores.
Manipular Imágenes dentro de una página Web.
Estructurar tablas en una página Web.
Insertar Sonido y Video en una página Web.
Computadora y software de diseño Web.
Página de
Página 99 de 99

Instrucciones
para el Alumno
Instrucciones
para el
docente
Instrucciones para el alumno.- Realiza de formar ordenada y con
responsabilidad los pasos siguientes:
1. Inicia la aplicación de software de diseño.
2. Genera un sitio con tu nombre donde almacenarás tus páginas Web.
3. Diseña por lo menos 4 páginas Web sobre tu familia y los valores que se
comentan dentro de ella.
4. Estructura tu página Web con tres Frames, en el orden que te agrade.
5. Describe a cada uno de los intrigantes de tu familia, apoyándote de los
siguientes elementos:
o La creación tablas.
o Inserción de Imágenes, comentarios, la fecha y hora, así como
contadores de visitas.
o Adición de marquesinas.
o Manipulación de botones activables y aplicaciones multimedia.
6. Realiza el diseño de un formulario sobre tu familia o persona en cual
permita enviar los datos a una dirección de correo electrónico.
7. Una vez termines tú práctica, revisa que cumpla con todos los
requerimientos y llama al profesor para que te revise.
Verificar que los alumnos desarrollen cada uno de los pasos indicados.
Página de
Página 100 de 100

Nombre Conectando tus paginas No. 13
Instrucciones
para el Alumno
Conocimientos
a adquirir
Los libros al momento de que los leemos son secuenciales: una letra y otra y una página y así hasta
el final; en cambio los documentos multimedia son hipertextos. Donde el visitante va a navegar por
los apartados que sean de su interés, se detiene en un punto lo consulta y vuelve nuevamente, es
decir navega por la información.
Direcciones absolutas y relativas
Lee y analiza con atención los siguientes términos.
Vínculos
Hipervínculos
Direcciones
absolutas
Direcciones
Relativas
Manera
Didáctica
de
Lograrlos
Una dirección absoluta de un fichero o una página es del estilo:
Se requiere que el alumno analice estos
términos necesarios para cumplir con los
conocimientos sobre los vinculos e
hipervínculos para realizar lo links a las
paginas Web.
C:\Documents and Settings\SeRGio\Mis documentos\Sergio\index.htm (para un vínculo que
desde otra página nos lleve a la inicial).
Si escribes esto en la casilla de dirección URL, el vínculo funciona trabajando en la PC.
Página de
Página 101 de 101

Pero ¿qué sucede cuando envías un sitio Web al proveedor de Internet? Probablemente lo has
alojado en una carpeta del estilo Cecyte dentro de algún servidor. La página index no está en la
misma ruta que como estaba en la PC. No está en C:\Documents and Settings\SeRGio\Mis
documentos\Sergio\ del servidor.
El servidor tiene su propia estructura y organiza sus propias ubicaciones. La dirección absoluta que
era válida en la computadora en la cual se diseñó el sitio, pero no lo es en el servidor.
Una ubicación relativa se refiere respecto de la página principal (index). Si tienes todas las páginas
de un sitio Web en la misma carpeta, la dirección relativa es simplemente el nombre del fichero, sin
nada por delante.
Al remitirlo a tu proveedor de Internet, las direcciones relativas funcionan exactamente igual que en la
computadora de diseño. Si alojas las distintas páginas Web en carpetas que cuelgan de la principal,
la dirección relativa es la ruta desde la página principal hasta la carpeta y fichero en cuestión.
Entonces, volvemos a insistir, las direcciones relativas funcionarán en el proveedor perfectamente.
Cuando se maneja el cuadro de
diálogo Crear Hipervínculo, y la forma
de crearlo es el doble clic en el fichero
de la página correspondiente, se están
utilizando siempre direcciones relativas.
Página de
Página 102 de 102

Nombre Referencias No. 16
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Lee con atención el siguiente texto. En el se muestran algunas imágenes y
explicaciones para una referencia relativa.
Orden
Cuando hacemos un hipervínculo, nos
referimos a una dirección relativa a
una página Web, que se encuentra
dentro de la misma carpeta o sitio Web.
Manera
Didáctica
de
Lograrlas
Aprende por iniciativa e interés propio a lo largo de la vida.
Analizar e identificar los distintos tipos de referencias.
Al identificar la secuencia de las imágenes
que se muestran, así como el tipo de
referencia relativa o absoluta.
Página de
Página 103 de 103

Un ejemplo de una dirección absoluta
es cuando realizamos un hipervínculo
a una página Web que no se
encuentra dentro de nuestra carpeta o
sitio Web.
C:/Documents and
Settings/SeRGio/Escritorio/Web
Acapulco/
Recuerda que cuando creas un sitio Web en una
aplicación por ejemplo Dreamweaver, todos los
archivos de imagen, sonido, de animación, etc. Que
se van insertando en la página Web, te pregunta si
quieres crear una copia en la carpeta del sitio, para
que no tengamos problema al momento de subir
todo nuestro sitio o trasladar la carpeta a otra
máquina.
.
Página de
Página 104 de 104

Nombre Saltando en tu documento No. 17
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Lee con atención el siguiente texto. En el se muestran algunas imágenes y
explicaciones para una referencia relativa.
Orden
Un marcador es muy similar a un ancla y nos sirve para identificar el lugar a donde la página
se va a conectar por medio de un hipervínculo.
En el procesador de textos Microsoft Word y en Microsoft Front Page funcionan exactamente
igual.
Veamos el ejemplo en el software de diseño Microsoft Front Page.
Nos genera:
Manera
Didáctica
de
Lograrlas
Aprende por iniciativa e interés propio a lo largo de la vida.
Analizar e identificar los marcadores o anclas.
Al identificar la secuencia de las imágenes
que se muestran, así como el tipo de
referencia relativa o absoluta.
Página de
Página 105 de 105

Donde ―hola” es el nombre del marcador.
Ahora vamos a conectar el hipervínculo a la marca antes establecida.
Listo aquí tendríamos el marcador e hipervínculo insertado.
CONECTANDO A HOLA
Veamos el ejemplo en el software de diseño Macromedia Dreamweaver.
Nos genera:
Donde ―hola” es el nombre del marcador.
Ahora vamos a conectar el hipervínculo a la marca antes establecida.
Listo aquí tendríamos el marcador e hipervínculo insertado.
CONECTANDO A LA ANCLA
Página de
Página 106 de 106

Nombre Efectos en tus conexiones No. 18
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Veamos algunos efectos de conversión de hipervínculos, es decir configuremos la aplicación para
cambiar el aspecto de los hipervínculos, por ejemplo que cuando acerquemos el cursor; cuando
visitamos una liga que cambie de color.
Microsoft Front Page.
Lee con atención el siguiente texto. En el se muestran algunas imágenes y
explicaciones para proporcionar efectos a tus vínculos e hipervínculos.
Orden
Manera
Didáctica
de
Lograrlas
Aprende por iniciativa e interés propio a lo largo de la vida.
Al identificar la secuencia de las imágenes
que se muestran, así como los efectos de
vínculos e hipervínculos.
Analizar, identificar y realizar efectos en vínculos e hipervínculos.
Página de
Página 107 de 107

Una vez que guardemos el archivo abramos la página Web donde vemos que el aspecto de los
hipervínculos cambia.
Macromedia Dreamweaver.
También se puede cambiar el aspecto de los hipervínculos en una imagen para que al colocar el
cursor sustituya una imagen por otra.
Página de
Página 108 de 108

Nombre Observa con atención No. 13
Instrucciones
para el Alumno
Instrucciones
para el Docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
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.
Se recomienda una demostración práctica sobre la creación de vínculos e
hipervínculos, referencias relativas y absolutas, así como la aplicación de efectos
a los vínculos e hipervínculos.
Orden
Se expresa y se comunica
Manera
Didáctica de
Lograrlas
Al poner atención a la secuencia de
operaciones que realizo el profesor y al
expresar sus dudas.
Relaciona sus conocimientos previos y los nuevos proporcionados por el profesor
para la creación de vínculos e hipervínculos, así como la aplicación de efectos.
Página de
Página 109 de 109

Nombre Manipulación en tus conexiones No. 19
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Lee con atención el siguiente texto. En el se muestran algunas imágenes y
explicaciones para manipular las conexiones en los frames.
Orden
Manera
Didáctica
de
Lograrlas
Aprende por iniciativa e interés propio a lo largo de la vida.
Al identificar la secuencia de las imágenes
que se muestran, así como la manipulación
de las conexiones con los frames.
Analizar, identificar y realizar el direccionamientos de vínculos e hipervínculos al
conectarlos con los Frames.
Veamos un ejemplo de cómo podemos manipular la conexión a las páginas Web en cualquier
software de aplicación.
Cuando insertamos un hipervínculo podemos modificar ciertos parámetros como el texto, el vínculo
que será la conexión a la página Web o el archivo a conectar.
El destino nos indica la ubicación o destino donde aparece nuestra página o nuestro archivo.
Recuerda que en la competencia anterior utilizamos Marcos o Frames para poder organizar la
información de las páginas Web de una manera mas organizada.
Página de
Página 110 de 110

Lo más interesante de los Frames es la posibilidad que tienen de interactuar entre si, es decir
pulsar un enlace en el Frame 1 y cargar el contenido en el Frame 2.
EJEMPLO DE FRAMES
Recuerda que hay ciertos valores reservados para TARGET cuando queremos realizar un
hipervínculo.
TARGET=_top, hace que la página se cargue en la ventana completa del navegador.
TARGET=_self, hace que la página se cargue en la misma ventana del Frame actual.
TARGET=_parent, hace que la página se cargue en el Frame "padre", del que desciende el
actual.
TARGET=_blank, hace que la página se cargue en una nueva ventana.
TARGET=nombre, hace que la página se cargue en el Frame llamado nombre. Si no existe se carga
en una ventana nueva.
Página de
Página 111 de 111

Nombre Manipulando la conexión a las paginas Web No. 20
Instrucciones
para el Alumno
Instrucciones
para el Docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
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.
Se recomienda ejecutar una demostración práctica para la manipular la conexión
a las páginas Web en los Frames.
Orden
Se expresa y se comunica
Manera
Didáctica de
Lograrlas
Al poner atención a la secuencia de
operaciones que realizo el profesor y al
expresar sus dudas.
Relaciona sus conocimientos previos y los nuevos proporcionados por el
profesor para la manipulación de la conexión a las paginas Web.
Página de
Página 112 de 112

Nombre
Competencia a
Desarrollar
Habilidades
Recursos
materiales de
apoyo
Diseñando una página Web en un editor visual con características
especificas.
Diseñar una página Web con un software de aplicación.
Definir objetivos y contenidos de la página Web.
No. 2
Establecer Etiquetas (principales y secundarias, Caracteres
especiales) en la página Web.
Establecer Links dentro de la página Web, entre páginas Web y entre
servidores.
Manipular Imágenes dentro de una página Web.
Estructurar tablas en una página Web.
Insertar Sonido y Video en una página Web.
Computadora y software de diseño Web.
Página de
Página 113 de 113

Instrucciones
para el Alumno
Instrucciones para el alumno.- Realiza de formar ordenada y con
responsabilidad los pasos siguientes:
1. Crea una carpeta con el nombre de hipervínculos.
2. Abre el software diseño de diseño de páginas Web.
3. Crea un nuevo Sitio Web llamado con tu nombre y guárdalo en la carpeta antes
creada.
4. Genera una página Web llamada index, sobre tus amigos con 3 Frames
(izquierdo, arriba y en el centro).
Arriba
Izquierdo Centro
5. Coloca tu nombre completo como título de la página.
6. En la parte superior (Arriba), coloca el siguiente texto: MIS MEJORES
AMIGOS.
7. En el lado izquierdo escribe con texto sencillo o texto flash: El nombre de 3 de
tus mejores amigos.
8. Genera una animación Web referente a ti y a tus amigos e insértala en el
Frame del centro.
9. Inserta una marca o un ancla que se llama ―cecyt‖
10. Debajo de la animación flash inserta tu nombre y crea un hipervínculo que se
conecte con la marca o ancla ―cecyt‖.
11. Inserta una imagen de sustitución debajo del hipervínculo de tu nombre.
12. Realiza una página personal para cada uno de tus tres amigos, donde
describas su personalidad.
13. Vincula cada una de las páginas creadas con los nombres que se encuentran
en el Frame izquierdo, de manera que aparezcan en el Frame destino centro.
Página de
Página 114 de 114

Instrucciones
para el
docente
TEMAS O
HABILIDADES
RESULTADO DE
APRENDIZAJE
14. Realiza un hipervínculo de regreso a la página principal para cada una de
las páginas de tus amigos.
15. Modifica los efectos de conversión de hipervínculos en el software de
diseño.
16. Prueba y revise que tu página cumpla con todo lo que se te pide. Guarda la
carpeta completa donde se almacenó tu sitio Web, en algún medio de información.
17. Llama al docente para que te revise la práctica.
Verificar que los alumnos desarrollen cada uno de los pasos indicados.
3.7. Almacenar páginas Web en un servidor gratuito o delicado
Al término de este tema lograras la habilidad almacenar la s
paginas Web en un servidor gratuito o delicado para que pueda
ser accedida desde cualquier maquina conectada a Internet.
El docente realiza una demostración práctica en donde se aplique un ejemplo de cómo almacenar
una pagina Web en un servidor, así como la mención de algunos servidores Web gratuitos que
permiten almacenar estas paginas.
Página de
Página 115 de 115

Nombre Los servidores Web No. 14
Instrucciones
para el Alumno
Conocimientos
a adquirir
Anota aquí tu investigación
Investiga lo siguiente:
o Que es un Servidor Web
o Que es una arquitectura cliente Servidor
o Que es un servidor Web dedicado o gratuito
√ Servidor Web
Manera
Didáctica
de
Lograrlos
El análisis de la investigación que se
realizara a través de un medio
electrónico o bibliográfico.
Página de
Página 116 de 116

Nombre Identifica la diferencia. No. 21
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Analiza las siguientes imágenes con tus compañeros
√ Orden
Manera
Didáctica
de
Lograrlas
Visualiza e identifica la diferencia de la
referencia o u ubicación donde se encuentra
almacenada la página Web.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Visualizando e identificando la ubicación en donde se encuentra almacenada la
página Web.
¿Escribe cual es la diferencia que notas en la barra de direcciones del navegador?
Página de
Página 117 de 117

Decíamos también que una URL (Uniform Resource Locator): Es la dirección que se digita
en el computador para que éste muestre la página Web que se desea ver en INTERNET.
Veamos entonces cual es su estructura.
¿Por qué es importante conocer la estructura del URL?
Porque te permite decidir a primera vista si la página encontrada puede o no ser de tu
interés.
Te permite encontrar páginas que desaparecen o vínculos desactualizados para lo cual
debes ir recortando el URL comenzando desde la parte derecha del mismo hasta la barra
inclinada ( / ) y así sucesivamente hasta llegar al servidor.
Página de
Página 118 de 118

Nombre Aprende a almacenar tus paginas Web en un servidor gratuito
Instrucciones
para el Alumno
Instrucciones
para el Docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
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.
Se recomienda una demostración práctica en donde se explique como
almacenar las paginas Web en un servidor dedicado o gratuito.
Orden
Se expresa y se comunica
Manera
Didáctica de
Lograrlas
No
.
15
Al poner atención a la secuencia de
operaciones que realiza el profesor y al
expresar sus dudas.
Relaciona su conocimientos previos y los nuevos proporcionados por el
profesor para almacenar pagina Web en un servidor gratuito expresándose en
forma, oral y escrita.
Recuerda que la ventaja de crear un sitio Web es
tener todas las páginas y los archivos
almacenados en un solo lugar con el objeto de
almacenar rápidamente toda la pagina en un
Servidor Web.
.
Página de
Página 119 de 119

Nombre
Competencia a
Desarrollar
Habilidades
Instrucciones
para el Alumno
Instrucciones
para el
Docente
Recursos
materiales de
apoyo
Actitudes a
formar
Almacenando una pagina Web en un servidor Web gratuito.
Diseñar una página Web con un software de aplicación.
Almacenar páginas Web en un servidor dedicado o gratuito.
No. 5
1. Investiga en Internet algún servidor Web, en donde puedas almacenar las
paginas Web generadas en la práctica anterior de hipervinculos, debes de fijarte
que el espacio de almacenaje proporcionado por el servidor Web, sea el necesario.
2. Almacena tus archivos en el servidor Web dedicado o gratuito.
3. Prueba que la página Web que almacenaste en el servidor se encuentre
funcionando adecuadamente mostrando todas las imágenes y probando sus
hipervínculos…
Una vez que hayas probados tu página en el servidor, proporciona la dirección de
Internet en donde se encuentra almacenada tu página Web, al profesor para que te
revise la práctica.
El docente evaluara las páginas Web de los alumnos, revisándolas desde la
dirección de Internet proporcionada.
Computadora e Internet.
Orden
Responsabilidad
Manera
Didáctica
de
Lograrlas
Investiga un servidor gratuito para
almacenar la página Web.
Página de
Página 120 de 120

Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
El alumno busca un sitio Web gratuito para almacenar la pagina Web, evaluando el
espacio disponible que se proporciona. Y una vez almacenada la pagina el alumno
prueba que funcione adecuadamente.
Los ejercicios y prácticas ejecutados en este contenido, permiten que tú adquieras las habilidades y
destrezas, conocimientos y actitudes necesarias para Diseñar una página Web con un software de
aplicación, para establecer etiquetas primarias y secundarias, frames, tablas, imágenes, sonido,
video, formularios, links, hipervínculos, así como subir las paginas Web a un servidor Web gratuito.
La evaluación de las habilidades y destrezas, conocimientos y actitudes de esta competencia se hará
uso de los instrumentos de evaluación
Página de
Página 121 de 121

Publicar páginas Web en los
servidores de Internet.
15. ¿Quien traslada tus archivos?
22. Aplicación Ftp
16. Completa la información
17. Almacenando en un servidor gratuito
18. Almacenando en un servidor dedicado
6. Publicando las páginas en un servidor Web.
3. Practica Integradora Final
4
Página de
Página 122 de 122

Finalmente ha llegado el momento de publicar nuestro trabajo. Todas las competencias desarrolladas
hasta este momento no tendrían sentido si nuestras páginas no se publicaran. Para ello entonces, los
ejemplos, ejercicios y prácticas permitirán que al finalizar la competencia tu estés en posibilidad de
almacenar tus páginas en un servidor ya sea gratuito o en su caso dedicado. Asimismo, durante esta
parte de curso, dominarás claramente las capacidades para el manejo de software de comunicación vía
ftp.
TEMAS O
HABILIDADES
RESULTADO DE
APRENDIZAJE
4.1. Identificar los servidores de Internet disponibles para
publicación de información.
4.2 Seleccionar un servidor de Internet considerando las
características de la página Web
4.3. Utilizar la página del servidor de Internet para alojar una
página Web.
4.4. Verificar el funcionamiento de la página Web dentro del
servidor seleccionado.
Al término de este tema lograras la habilidad para identificar,
seleccionar y alojar las paginas Web en un servidor de Internet.
Además de verificar el funcionamiento de la pagina Web dentro del
servidor seleccionado.
El docente solicita una investigación sobre las ventajas y desventajas de por lo menos tres servidores
Web que permitan almacenar las paginas Web.
Página de
Página 123 de 123

Nombre ¿Quien traslada tus archivos? No. 15
Instrucciones
para el Alumno
Conocimientos
a adquirir
Lee con atención la información que se te presenta a continuación.
√ Protocolo de transferencia
Ftp
Manera
Didáctica
de
Lograrlos
El análisis de la información.
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://maquina.dominio@usuario, y luego le pedirá la clave de acceso.
Un servidor FTP es un programa especial que se ejecuta en un equipo servidor
normalmente conectado a Internet (aunque puede estar conectado a otros tipos de redes,
LAN, MAN, etc.). Su función es permitir el intercambio de datos entre diferentes
servidores/ordenadores.
Por lo general, los programas servidores FTP no suelen encontrarse en los ordenadores
personales, por lo que un usuario normalmente utilizará el FTP para conectarse remotamente
a uno y así intercambiar información con él.
Las aplicaciones más comunes de los servidores FTP suelen ser el alojamiento Web, en el
que sus clientes utilizan el servicio para subir sus páginas Web y sus archivos
correspondientes; o como servidor de backup (copia de seguridad) de los archivos
importantes que pueda tener una empresa.
Cuando un navegador no está equipado con la función FTP, o si se quiere cargar ficheros en
un ordenador remoto, se necesitará utilizar un programa cliente FTP. Un cliente FTP es un
programa que se instala en el ordenador del usuario, y que emplea el protocolo FTP para
conectarse a un servidor FTP y transferir archivos, ya sea para descargarlos o para subirlos.
Página de
Página 124 de 124

Para utilizar un cliente FTP, se necesita conocer el nombre del fichero, el ordenador en que
reside (servidor, en el caso de descarga de archivos), el ordenador al que se quiere transferir
el archivo (en caso de querer subirlo nosotros al servidor), y la carpeta en la que se
encuentra.
Nombre Aplicación Ftp No. 22
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
A través de las capturas de pantalla que a continuación se te presentan
ejemplificaremos el acceso a un servidor de páginas web mediante una aplicación
FTP denominada Ipswitch WS_FTP.
Observa con detalle que se trata de un servidor dedicado y que vamos a
aprovechar para subir una página de ejemplo en un directorio que previamente nos
ha asignado el administrador de este servidor.
Orden
Manera
Didáctica
de
Lograrlas
Aprende por iniciativa e interés propio a lo largo de la vida.
Analizar e identificar las pantallas de una aplicación FTP.
Al identificar la secuencia de las imágenes
que se muestran, así como el tipo de medio
de transmisión que utilizan para establecer la
comunicación y la transferencia de archivos.
Página de
Página 125 de 125

(1) El programa FTP en ejecución (2) Creando una nueva cuenta en el programa.
Esta cuenta ya debe estar dada de alta en el
servidor donde se va a almacenar la página y
regularmente la crea el administrador del
mismo.
(3) Nombre para la conexión
(2) Datos de la cuenta
(7) Finalizando la creación de la conexión
(9) La página antes de subir archivos
(4) Dirección del servidor
(6) Tipo de cuenta
(8) Conectándose al servidor mediante los
datos de la conexión
(10) Los archivos que se van a subir.
Página de
Página 126 de 126

(11) Seleccionado el directorio en la PC donde
se encuentran los archivo a subir de la página
(13) Comenzando a subir los archivos.
(15) La página montada ya en el servidor.
(12) archivos seleccionados y listos para
subirlos al servidor. Nótese que incluye la
estructura de directorios.
(14) Subiendo los archivos. Obsérvese el
avance de cada uno.
Página de
Página 127 de 127

Nombre Complementa la información No. 16
Instrucciones
para el Alumno
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
3 ventajas
Realiza una investigación sobre los servidores dedicados o gratuitos.
Orden
Manera
Didáctica de
Lograrlas
El alumno le da un orden a la investigación
realizada, complementando la tabla.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Interpreta la información investigada, interpreta y complementa la información
utilizando medios, códigos y herramientas apropiadas.
SERVIDOR GRATUITO SERVIDOR DEDICADO
Página de
Página 128 de 128

3 desventajas
Principal
característica
Página de
Página 129 de 129

Nombre Almacenando en un servidor gratuito No. 17
Instrucciones
para el Alumno
Instrucciones
para el Docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
Localiza alguna de las páginas creadas durante este curso, crea una cuenta en
un servidor gratuito. Sube los elementos de una página a la dirección Web
asignada mediante un programa FTP. Muestra el trabajo al resto del grupo.
Antes de realizar este ejercicio es recomendable realizar una demostración
práctica en donde se muestre las técnicas necesarias para crear una cuenta en
un servidor web gratuido y subir las páginas ahí. Asímismo, se recomienda
revisar que el ejercicio del alumno cumpla con lo requerido, además de tomar en
cuenta la limpieza del trabajo, realimentando las posibles contingencias.
Orden
Manera
Didáctica de
Lograrlas
El alumno busca un servidor gratuito,
identifica sus características, selecciona el
más adecuado creando una cuenta y
almacenando una página Web.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Interpreta la información del servidor, identifica las características del mismo, el
espacio disponibles; y almacena la pagina Web utilizando las herramientas
apropiadas.
Página de
Página 130 de 130

Nombre Almacenando en un servidor dedicado No. 18
Instrucciones
para el Alumno
Instrucciones
para el Docente
Actitudes a
formar
Competencias
Genéricas a
Desarrollar
Manera
Didáctica de
Lograrlas
El docente te proporcionará los datos de una cuenta en un servidor dedicado.
Una vez realizado lo anterior, localiza una página Web y súbela al servidor
mediante software FTP.
Se recomienda crear las cuentas en el servidor antes de realizar este ejercicio.
En caso de no tener acceso a un servidor dedicado, una alternativa puede ser
montar un servidor local y acceder a él vía FTP – para montar el servidor una
buena opción es utilizar EASYPHP, que proporciona elementos básicos para tal
finalidad casi sin tener que configurar nada.
Asimismo, es recomendable realizar una demostración práctica en donde se
muestre las técnicas necesarias para crear una cuenta en un servidor web
dedicado y subir las páginas ahí. Se recomienda, finalmente, revisar que el
ejercicio del alumno cumpla con lo requerido, además de tomar en cuenta la
limpieza del trabajo, realimentando las posibles contingencias.
Orden
Manera
Didáctica de
Lograrlas
El alumno almacena la pagina Web en un
servidor dedicado, utilizando una aplicación
ftp.
Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
Almacena la pagina Web en un servidor dedicado, utilizando la aplicación ftp
apropiada.
Página de
Página 131 de 131

Nombre Publicando las páginas en un servidor Web. No. 6
Competencia a
Desarrollar
Habilidades
Recursos
materiales de
apoyo
Instrucciones
para el Alumno
Instrucciones
para el
docente
Publicar páginas Web en los servidores de Internet.
Identificar los servidores de Internet disponibles para publicación de
información.
Seleccionar un servidor de Internet considerando las características
de la página Web
Utilizar la página del servidor de Internet para alojar una página
Web.
Verificar el funcionamiento de la página Web dentro del servidor
seleccionado.
Computadora, Internet y software de diseño Web.
Localiza alguna página creada en las prácticas anteriores. Crea una cuenta en un
servidor gratuito y sube la página ahí. Luego el docente te proporcionará una
cuenta en un servidor Web en donde podrás subir tu página por segunda ocasión.
Esto es, tendrás tu página en un servidor gratuito y un servidor dedicado.
Es recomendable crear una cuenta en un servidor dedicado para que el alumno
suba su página ahí. Revisar que la práctica del alumno cumpla con lo requerido,
además de tomar en cuenta la limpieza del trabajo, realimentando las posibles
contingencias.
Verificando el funcionamiento de las página Web dentro del servidor seleccionado.
Página de
Página 132 de 132

Nombre Practica Integradora General. No. 3
Competencia a
Desarrollar
Habilidades
Utilizar los elementos fundamentales del diseño.
Manejar los elementos básicos de un lenguaje usado en la creación de
páginas WEB (HTML, DHTML, ASP, Java Script, CSS u otros).
Diseñar una página Web con un software de aplicación.
Publicar páginas web en los servidores de Internet.
1.1. Analizar las teorías del diseño (minimalismo, conceptualismo, etc.).
1.2. Identificar el impacto y el enfoque en diseños existentes.
1.3. Diseñar formatos considerando las zonas áureas, dirección, sentido y
equilibrio.
1.4. Aplicar la teoría del color considerando el círculo cromático,
contrastes, el RGB (Red, Green, Blue) y CMY (Cyan, Magenta, Yellow).
2.1. Definir Objetivos y contenidos de la página Web.
2.2 Esquematizar la estructura general de una página Web
2.3. Utilizar Etiquetas en una página Web.
2.4. Establecer vínculos e hipervínculos
2.5. Manipular objetos y formularios en una página Web.
2.6. Manipular tablas en una página Web
2.7. Manipular Imágenes y animaciones en una página Web.
2.8. Definir secciones de mapeo de imágenes en una página web.
2.9. Insertar Sonido y Video en una página Web.
2.10. Implementar servicios de correo en una página web.
3.1. Definir Objetivos y contenidos de la página Web.
3.2. Establecer Etiquetas (principales y secundarias, Caracteres
especiales) en la página Web.
3.3. Establecer Links dentro de la página Web, entre páginas Web y entre
servidores.
3.4. Manipular Imágenes dentro de una página Web.
3.5. Estructurar tablas en una página Web.
3.6. Insertar Sonido y Video en una página Web.
3.7. Almacenar páginas Web en un servidor dedicado o gratuito.
Página de
Página 133 de 133

Recursos
materiales de
apoyo
Instrucciones
para el Alumno
Instrucciones
para el
docente
4.1. Identificar los servidores de Internet disponibles para publicación de
información.
4.2. Seleccionar un servidor de Internet considerando las características
de la página Web.
4.3. Utilizar la página del servidor de Internet para alojar una página Web.
4.4. Verificar el funcionamiento de la página Web dentro del servidor
seleccionado.
Computadora, Internet y software de diseño Web.
Realiza la practica Integradora proporcionada por tu profesor.
Se recomienda diseñar una practica Integradora que involucre todo lo visto en el
curso, enfocándose a combinar los otros dos submodulos, como es el diseño de
Imágenes y de animaciones para enriquecer el trabajo solicitado.
Se sugiere que en equipo, los alumnos diseñen la página Web de una empresa
real, investigando requerimientos y diseñando animaciones y toda su publicidad,
como son:Logotipo, Folletos, tarjetas de presentación, Pancartas, etc.
Página de
Página 134 de 134

Con los ejemplos, ejercicios y prácticas desarrollados es este contenido, sin duda estarás en
posibilidad de identificar, seleccionar y montar tus páginas en un servidor, ya sea gratuito en su caso
dedicado. Verificando el funcionamiento de la página Web. Es importante mencionar que además
tienes la posibilidad de que tus páginas sean trasladadas al servidor a través de programas que
funcionan con el protocolo FTP.
Finalmente, te podemos señalar que para comprobar que efectivamente ya han sido desarrolladas
tus habilidades y destrezas, así como los conocimientos y actitudes, se puede recurrir al instrumento
de evaluación.
Página de
Página 135 de 135

Página de
Página 136 de 136

Los ejemplos, ejercicios y prácticas que se han propuesto en esta guía de aprendizaje te permitirán
desarrollar los temas o habilidades, conocimientos y actitudes con respecto al diseño de formatos
publicitarios, logotipos, invitaciones. Para lograr tu plena capacidad en este aspecto se recurrió a
diferentes actividades que fueron presentados de acuerdo a su dificultad, iniciando en las más
sencillas y finalizando por las más complicadas.
Para comprobar que has desarrollado los contenidos o competencias en todos los apartados
señalados con anterioridad, se utilizarán dos tipos de instrumentos de evaluación: las GUÍAS DE
OBSERVACIÓN para medir tus desempeños y las LISTAS DE COTEJO para los productos logrados.
Página de
Página 137 de 137

Esta guía esta concebida como un medio de aprendizaje en la educación técnica, de nivel medio
superior, que sin ser sustituto del docente, sirve de apoyo a la dinámica del proceso. Al orientar las
actividades de los alumnos en el aprendizaje significativo, a través de situaciones problemáticas y
tareas que garanticen la apropiación activa critico- reflexiva y creadora de los contenidos, con la
adecuada dirección, y control de sus propios aprendizajes.
La forma de evaluar el presente submódulo es en primer termino considerando los instrumentos de
evaluación, los cuales determinan el producto y desempeño, derivados por cada una de las prácticas
plasmadas en la guía.
Página de
Página 138 de 138

Castellanos Casas, Ricardo y Ferreira Cortés, Gonzalo. (2003), Informática 2. La herramienta
del nuevo Mileno. México, DF. Editorial Alfaomega.
Castellanos Casas, Ricardo y Ferreira Cortés, Gonzalo. (2003), Informática 3. La herramienta
del nuevo Mileno. México, DF. Editorial Alfaomega.
Castellanos Casas, Ricardo y Ferrerira Cortés, Gonzalo, (2003), Informática 1. La herramienta
del nuevo Mileno. México, DF.
Gail, Linda C, (1995), Enciclopedia de Términos de Microcomputación, México DF. Editorial
Prentice-Hall Hispanoamericana.
González Trejo, Margarita y otros. (2000), Introducción a Internet. Colección Guías y textos de
cómputo. Dirección General de Servicios de Cómputo Académico, UNAM.
González Trejo, Margarita y otros. (2000), Introducción a Internet. Guía didáctica y cuaderno
de prácticas. Colección Guías y textos de cómputo. Dirección General de Servicios de
Cómputo Académico, UNAM.
Ibarra Delgado, Alma y otros. (2000), Páginas para Internet. Colección Guías y textos de
cómputo. Dirección General de Servicios de Cómputo Académico, UNAM.
Ibarra Delgado, Alma y otros. (2000), Páginas para Internet. Guía didáctica y cuaderno de
prácticas. Colección Guías y textos de cómputo. Dirección General de Servicios de Cómputo
Académico, UNAM.
Macromedia. Manual oficial del usuario. Dreamweaver MX.
Page, Khristine Annwn. (2004), Dreamweaver MX 2004: Trucos esenciales versión dual.
Anaya Multimedia-Anaya Interactiva.
Peña de San Antonio, Óscar. (2001), Dreamweaver 4: administración de sitios y páginas Web.
Ra-Ma, Librería y Editorial Microinformática.
Pérez, César. (2003), Curso práctico multimedia de Dreamweaver MX. Garben.
S.A. (2004), Diseño web con HTML y FrontPage XP. Grupo Eidos
Página de
Página 139 de 139

Talavera Rosales, Alejandro. (2002), Páginas interactivas para Internet. Colección Guías y
textos de cómputo. Dirección General de Servicios de Cómputo Académico, UNAM.
www.aulaclic.com
www.lawebdelprogramador.com
www.forosdelweb.com
www.webexperto.com
Página de
Página 140 de 140

ACTIVE X: Lenguaje desarrollado por Microsoft para la elaboración de aplicaciones exportables a la
red y capaces de operar sobre cualquier plataforma a través, normalmente, de navegadores WWW.
ANIMACIÓN: Una animación es una secuencia de imágenes, o cuadros, que se visualiza en el
tiempo. Cada cuadro varía ligeramente del inmediatamente anterior, creando la ilusión de movimiento
cuando los cuadros se ven en sucesión rápida.
APLICACIÓN: Es un programa que realiza una tarea específica en el ordenador como el tratamiento
de textos, el tratamiento de imágenes, descompresión de archivos, etc.
ARCHIVO ADJUNTO: Archivos anexados a un correo electrónico, para ser enviados.
ARCHIVO: Unidad de información almacenada en el disco con un nombre específico. También se le
llama fichero. Puede contener datos en código máquina, necesarios para la ejecución de un
programa, o información común y corriente procesada por el usuario. Los nombres de los archivos no
pasan de ocho caracteres. Tienen una extensión consistente en tres caracteres que lo identifican en
su tipo o lo relación con un programa determinado.
ATRIBUTOS: Son valores que se asignan a objetos, imágenes, fuentes, etc.
AVI: Formato de fichero multimedia tipo QuickTime, desarrollado por Microsoft.
BROWSER: (Navegador): Programa usado para visualizar documentos WWW en Internet. Los más
utilizados en estos momentos son Netscape e Internet Explorer.
CELDA: Elemento de una tabla, se forma de la intersección entre una fila y una columna.
COMANDO: En programación, es una instrucción o sentencia del lenguaje, que está sujeto a su
sintaxis. Realiza tareas predefinidas.
COMPRESIÓN/DESCOMPRESIÓN: Método para cifrar/descifrar señales que permite transmitir (o
almacenar) más información de la que, de otro modo, podría aceptar el soporte.
COMPRESIÓN: Es la acción de hacer mas pequeño el tamaño de un archivo con el fin de que ocupe
menos espacio.
DEGRADADOS: Las herramientas de degradado crean una fusión gradual entre varios colores.
Puedes seleccionar rellenos de degradado existentes o crear los suyos propios.
DESTINATARIOS: Direcciones de correo electrónico a las cuales será enviado un archivo o correo
electrónico.
FORMATO DE ARCHIVO: Patrón o forma que utiliza un programa para almacenar los documentos
que produce. Existen formatos de texto, de imágenes, de sonido, etc. Se identifica por la extensión:
un punto y una abreviatura del formato. Por e .doc / .gif / .mp3.
Página de
Página 141 de 141

FPS: Fotogramas por segundo, es la unidad de medida para la velocidad con la que se reproducen
los videos y animaciones.
GIF: Graphic Interchange Format. Formato de Intercambio Gráfico, un formato de archivos gráficos
popularizado inicialmente por Compuserve.
HIPERVÍNCULO: Acceso directo mediante una palabra o imagen a una hoja de un documento, o a
otro archivo en otra ubicación, muy utilizado para navegar por Internet, por varias páginas en
diferentes partes del mundo unidas por hipervínculos.
IMAGEN: Se denomina así a toda presentación sin movimiento.
INTERFAZ: Conjunto de especificaciones permiten la conexión del ordenador con los periféricos de
entrada y salida.
JPEG (JOINT PHOTOGRAPHIC EXPERTS GROUP O GRUPO DE EXPERTOS DE ENSAMBLE
FOTOGRÁFICO): Tipo de formato de imagen o compresión de imagen. Está pensado especialmente
para imágenes fotográficas por la calidad que da al comprimir éstas.
MP3: Tipo de formato de archivos de música digital comprimida. Es la última tecnología en música
digital.
MPEG: Moving Pictures Expert Group. Se trata de un modo estándar de comprimir vídeo e imágenes
en movimiento.
Multimedia: Sistemas informáticos que integran audio, vídeo y datos.
PALETAS: Las paletas le ayudan a supervisar y modificar imágenes. Las paletas aparecen por
defecto apiladas en grupos.
PNG (PORTABLE NETWORK NETWORK): Gráficos portables de red. Formato gráfico muy completo
especialmente pensado para redes.
RGB (RED, GREEN AND BLUE): Son los tres colores usados para producir la luz visual. Estos tres
colores se intercalan dentro de los tubos del monitor permitiendo formar distintas imágenes que luego
se visualizan.
TABLA: Esta formada por un conjunto de filas y columnas que a su vez forman Celdas, es utilizada
para agrupar en sus celdas datos.
WORLD WIDE WEB (RED MUNDIAL, CONOCIDO TAMBIÉN COMO: WWW, W3): Sistema de
arquitectura cliente/servidor para distribución y obtención de información en Internet basado en
hipertexto o enlaces. Sistema de adquisición de información a través de páginas web y visualizando
estas en un navegador.
Página de
Página 142 de 142

ANEXO 1.- SPIDER WEB
un spider web responde a los siguientes preguntas, ¿Qué?, ¿Cómo?, ¿Cuándo?, ¿Dónde?,
¿Porqué?
¿PORQUÉ?
Por la necesidad de
automatizar y agilizar
el trabajo.
¿QUÉ?
Es una máquina
electrónica que
recibe y procesa
datos
COMPUTADORA
¿DÓNDE?
En la Universidad de
Pennsylvania.
¿CÓMO?
Esta estructurada de
Hardware y software
¿CUÁNDO?
En el año de 1947
Página de
Página 143 de 143