• Author / Uploaded
• musykera

Citation preview

---

Técnico en Informática    

Módulo II Creación de productos multimedia a través de software de diseño. Submódulo III Elaboración de páginas Web.

Página de   Página 1 de 144

Página de   Página 2 de 144

Artemio Lemus Ruiz

Morelos

Víctor Gabriel Puc Ibarra

Yucatan

Mariana Rogero Macias

Zacatecas

María Félix Roldán López

Hidalgo

Alejandro Rey Sarabia Flores

Baja California Sur

AAAAAAAAAAAAAA 

 

 

 

 

 

BBBBBBBBBBBBBBBBBBB 

AAAAAAAAAAAAAA 

 

 

Adriana García Ortiz 

 

 

 

 

 

 

Hidalgo 

Antonio Ix Chuc  

 

 

 

 

 

 

Campeche 

Manuel G. Méndez Monforte   

 

 

 

 

Yucatán 

BBBBBBBBBBBBBBBBBBB 

 

Página de   Página 3 de 144

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 144

Página de   Página 5 de 144

Técnico en Informática Móulo Submódulo

II

Creación de productos multimedia a través de software de diseño

III

Elaboración de páginas Web.

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).

Atributos de la competencia 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).

Atributos de la competencia 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 144

Técnico en Informática Módulo Submódulo

II

Redes de área local Creación de productos multimedia a través de software de diseño.

III

Elaboración de páginas Web.

Contenido o competencia 3 3. Diseñar una página Web con un software de aplicación.

Atributos de la Competencia 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.

Contenido o competencia 4 4. Publicar páginas Web.

Atributos de la Competencia 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 144

Página de   Página 8 de 144

¡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.

Página de   Página 9 de 144

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: 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 144

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 los contenidos o competencias del submódulo; aplicando 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 estas en la publicidad, la comunicación, las oficinas de servicios públicos y privados e instituciones educativas.

Página de   Página 11 de 144

Página de   Página 12 de 144

Utilizar los elementos fundamentales del diseño.

1.

Conociendo el diseño

2.

Combinación de Colores

3.

Internet básico

1.

Mirada fría

2.

Arco iris

1

1. Mi primera Crítica 2. Buscando el mejor color

1. Rediseñando

Página de   Página 13 de 144

¡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 atributos 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óximos contenidos 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 más, 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. Utilizar y manipular correo electrónico, mensajería instantánea.

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 144

ATRIBUTOS DE LA COMPETENCIA

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 páginas Web.

Página de   Página 15 de 144

Nombre

Conociendo el diseño

No.

1

Instrucciones Investiga las principales características de las Teorías del diseño y del diseño de para el Alumno formatos en una página Web. Teorías del diseño (Minimalismo, Conceptualismo).

Saberes a adquirir

Teoría del color (circulo cromático, RGB (Red, Green, Blue), CMY (Cyan, Magenta, Yellow), contrastes).

Manera Didáctica de Lograrlos

La investigación la podrás realizar a través de un medio electrónico o bibliográfico.

Funciones de diseño (necesidades, impacto, enfoque). Diseño de formatos (zonas áureas, dirección y sentido, equilibrio).

Página de   Página 16 de 144

Nombre

Combinación de colores

No.

2

Instrucciones Investiga las características principales de las Teorías del color. para el Alumno Teorías del diseño (Minimalismo, Conceptualismo).

Saberes a adquirir

Teoría del color (circulo cromático, RGB (Red, Green, Blue), CMY (Cyan, Magenta, Yellow), contrastes).

Manera Didáctica de Lograrlos

La investigación la podrás realizar a través de un medio electrónico o bibliográfico.

Funciones de diseño (necesidades, impacto, enfoque). Diseño de formatos (zonas, áreas, dirección, sentido y equilibrio).

Página de   Página 17 de 144

Nombre

Internet básico

No.

3

Instrucciones Investiga los diferentes tipos de correo electrónico y mensajeros que actualmente para el Alumno son los más utilizados

Saberes a adquirir

Conocer los diferentes tipos clientes de correos electrónicos y manipular uno de ellos (outlook). Conocer los diferentes tipos de mensajeros en línea y saber manipular uno de ellos (Netmeeting).

Manera Didáctica de Lograrlos

La investigación la podrás realizar a través de un medio electrónico o alguno más que se encuentre a su alcance.

Página de   Página 18 de 144

Nombre

Mirada fría

No.

1

Instrucciones para el Alumno Observa y analiza la siguiente imagen figura 1.

Actitudes a formar

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.

Competencias Genéricas a Desarrollar

4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización de medios, códigos y herramientas apropiados.

Manera Didáctica de Lograrlas

4.a) Expresa ideas y conceptos mediante representaciones lingüísticas, matemáticas o  gráficas.

Página de   Página 19 de 144

Figura 1

Página de   Página 20 de 144

 

Nombre

Arcoíris

No.

2

Instrucciones para el Alumno Observa y analiza las siguientes imágenes.

Actitudes a formar

Responsabilidad

Manera Didáctica de Lograrlas

Visualicen e identifiquen las propiedades de cada uno de ellos y comenta las que posee cada una.

Competencias Genéricas a Desarrollar

2. Es sensible al arte y participa en la apreciación e interpretación de sus expresiones en distintos géneros.

Manera Didáctica de Lograrlas

a). Valora el arte como manifestación de la belleza y expresión de ideas, sensaciones y emociones.

Imagen 1 RYB

Imagen 2 RGB

Imagen 3 CYM

Página de   Página 21 de 144

Nombre

Mi primera critica Intégrate en equipo máximo 3 personas profesor”.

Instrucciones para el Alumno

Actitudes a formar

Competencias Genéricas a Desarrollar Manera Didáctica de Lograrlas

No.

“Dinámica de

integración por

1 el

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. Haz uso de la información previa Manera Didáctica de investigada sobre características de la Responsabilidad Lograrlas estructura general de una página Web.

8. Participa y colabora de manera efectiva en equipos diversos. b) Aporta puntos de vista con apertura y considera los de otras personas de manera reflexiva.

Página de   Página 22 de 144

Nombre

Buscando el mejor color

No.

2

Volver a integrar equipos con la finalidad de que no queden los mismos que trabajaron en la sección anterior. Instrucciones para el Alumno

Actitudes a formar

Competencias Genéricas a Desarrollar

Manera Didáctica de Lograrlas

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.

5. Desarrolla innovaciones y propone soluciones a problemas a partir de métodos establecidos. 8. Participa y colabora de manera efectiva en equipos diversos. 5.b) Ordena información de acuerdo a categorías, jerarquías y relaciones 8.a) Propone maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo un curso de acción con pasos específicos.

Que traigan la misma investigación. Discusión alargada sobre la creación de mapas y cuadros.

Página de   Página 23 de 144

Nombre

No.

Rediseñando

Contenido o Competencia a Desarrollar

Utilizar los elementos fundamentales del diseño.

Atributos de la

1.1. 1.2. 1.3.

Competencia

1.4.

1

Analizar las teorías del diseño (minimalismo, conceptualismo, etc.). 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 (Red, Green, Blue) y CMY (Cyan, Magenta, Yellow).

Instrucciones para el Alumno Realiza lo que se te indica a continuación. Instrucciones para el Docente

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 electrónica.

Recursos materiales de apoyo

Computadora y software de diseño.

Actitudes a formar

Competencias Genéricas a Desarrollar Manera Didáctica de Lograrlas

Responsabilidad, orden y limpieza

Manera Didáctica de Lograrlas

Estimulando en el alumno el sentido del cumplimiento en tiempo y forma de la práctica siguiente.

7. Aprende por iniciativa e interés propio a lo largo de la vida.

a) Articula saberes de diversos campos y establece relaciones entre ellos y su vida cotidiana.

Página de   Página 24 de 144

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 alguna aplicación (Adobe Photo shop) 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.

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 144

Manejar los elementos básicos de un lenguaje usado en la creación de páginas Web.

4.

Navegadores Web

5.

Buscadores Web

6.

Conociendo el código

7.

Diseño Web

2

3. Una probadita

3.

Navega y busca tu Información

4.

Identificando la estructura

5.

Repaso general de etiquetas

Página de   Página 26 de 144

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 144

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.

¡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. ATRIBUTOS DE

2.5. Manipular objetos y formularios en una página Web.

LA COMPETENCIA

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.

RESULTADO DE APRENDIZAJE

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 144

Nombre

Navegadores Web

No.

4

Instrucciones Lee con atención la información que se te proporciona a continuación. para el Alumno Internet Saberes a adquirir

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

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.

Página de   Página 29 de 144

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. 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 144

Nombre

Buscadores Web

No.

5

Instrucciones Lee con atención la información que se te proporciona a continuación. para el Alumno Internet Buscadores Web Saberes a adquirir

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 más comunes, observa y comenta con tus compañeros, cuáles son sus semejanzas y diferencias.

Página de   Página 31 de 144

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 144

Nombre

Instrucciones para el Alumno

Instrucciones para el Profesor

Actitudes a formar

Competencias Genéricas a Desarrollar Manera Didáctica de Lograrlas

Navega y busca tu información

No.

3

1. Investiga lo siguiente en Internet en por lo menos 3 buscadores: FACTORES PARA ELEGIR UN BUEN BUSCADOR Y 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. Manera Didáctica El alumno realiza la investigación en los Orden distintos navegadores Web. de Lograrlas 4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización de medios, códigos y herramientas apropiados. e) Maneja las tecnologías de la información y la comunicación para obtener información y expresar ideas.

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 144

Nombre

Conociendo el código

No.

5

Investiga sobre un lenguaje utilizado para creación de páginas Web. Instrucciones Realizar la investigación en la Internet, utilizando un buscador, a través de un para el Alumno navegador Web. 9 Editores de texto. 9 Lenguaje de hipertexto. 9 Estructura de Saberes a adquirir

una página Web. 9 Vínculos e

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.

hipervínculos. 9 Navegadores de Internet.

Página de   Página 34 de 144

Nombre

Una probadita

No.

3

Identifica y analiza el código presentado y coméntalas con tus compañeros. Instrucciones para el Alumno 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.

Actitudes a formar

Competencias Genéricas a Desarrollar Manera Didáctica de Lograrlas

Orden

Manera Didáctica de Lograrlas

Al revisar los pasos e ir los trabajando.

7. Aprende por iniciativa e interés propio a lo largo de la vida.

a) Define metas y da seguimiento a sus procesos de construcción de conocimiento

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.

Para mas información básica consulta  http://www.aulafacil.com/CursoHtml/tema rio.htm 

Página de   Página 35 de 144

¿Qué es una etiqueta? Una etiqueta o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

La etiqueta de comienzo está delimitada por los caracteres < >.     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...).

WordPad es un sencillo programa de procesamiento de texto que viene incluido en la lista de accesorios gratuitos en Microsoft Windows.

Página de   Página 36 de 144

Veamos la estructura básica de una página Web.

Declara el inicio del programa

Declara la cabecera y el título de la página Web

Mi Primer Página...

Establece un color de fondo para el cuerpo del programa.

Elaborar páginas Web utilizando las aplicaciones actuales

Texto que se muestra dentro de la página Web

Se cierra el cuerpo del programa

Cierra la etiqueta para el programa

Veamos escrito en un editor de texto, cuando el archivo es guardado con la extensión: .htm o .html.

Página de   Página 37 de 144

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 38 de 144

Nombre

Instrucciones para el Alumno

Identificando la estructura

No.

4

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.

Instrucciones para el docente

Actitudes a formar

Una vez revisada la práctica, realimenta con todo el grupo las respuestas de la misma.

Orden

Manera Didáctica de Lograrlas

El alumno describirá cada una de las etiquetas que le permiten crear una página web.

Competencias Genéricas a Desarrollar

Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización de medios, códigos y herramientas apropiados.

Manera Didáctica de Lograrlas

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.

Página de   Página 39 de 144

CÓDIGO 1.

2.

EXPLICA PARA QUE SIRVE CADA ETIQUETA

Mi Primer página Web...

3.

4.

5.

6.

size="10"

VIVA MEXICO

7.

HOLA

8.

HOLA

9.

HOLA

Página de   Página 40 de 144

10.

VIVA MEXICO





11.

VIVA MEXICO





12.

VIVA MEXICO





13.

VIVA MEXICO





14.

VIVA MEXICO





15.

Scrollamount

16.

Scrooldelay

Página de   Página 41 de 144

17.

Loop

18.

hspace y vspace

19.

20.

21.

HOLA /h1> . . . HOLA

22.




23.

CECyTE

24.

CECyTE

25.

CECyTE

Página de   Página 42 de 144

26.

CECyTE

27.

CECyTE

28.

 

29.

á

30.

31.

Página de   Página 43 de 144

Nombre

Programando en un lenguaje de hipertexto

No.

Contenido o Competencia a Desarrollar

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).

Atributos de la

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.

competencia

1. 2. 3. 4. 5.

Instrucciones para el Alumno

2

Inicializa el navegador instalado. Utiliza los buscadores de Internet para bajar una página Web que hable de los tipos de protocolos. 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. Inicia el editor Bloc de notas. 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. Instrucciones para el Docente

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 44 de 144

Recursos materiales de apoyo

Actitudes a formar

Competencias Genéricas a Desarrollar Manera Didáctica de Lograrlas

Nombre

Computadora e Internet.

Orden

Manera Didáctica de Lograrlas

Realizando la secuencia de pasos en la práctica mostrada.

7. Aprende por iniciativa e interés propio a lo largo de la vida

a) Define metas y da seguimiento a sus procesos de construcción de conocimiento

Diseño Web

No.

6

Instrucciones Lee con atención algunas etiquetas que nos permiten personalizar nuestra página para el Alumno Web. 9 Diseñar tablas. 9 Insertar Imágenes, Saberes a adquirir

sonido y video. 9 Insertar vínculos e

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.

hipervínculos

Página de   Página 45 de 144

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: ............... 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

Página de   Página 46 de 144

Atributo

Sirve para

Valores Un número, acompañado de cuando se desee que sea porcentaje Un número, acompañado de cuando se desee que sea porcentaje

width

Ancho de la tabla

Height

Alto de la tabla

Cellpadding

Espacio entre el contenido de las Un número celdas y el borde

Cellspacing

Espacio entre celdas

Un número

Border

Grosor del borde

Un número

Align

left (izquierda) Alineación de la tabla dentro de la right (derecha) página center (centro)

Bicolor

Color de fondo

Número hexadecimal

Background

Imagen de fondo

Número hexadecimal

Bordercolor

Color del borde

Número hexadecimal

% en % en

Ya modificando los atributos de la tabla anterior nos quedaría:



Página de   Página 47 de 144

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

left (izquierda) right (derecha) center (centro)

Valign

Alineación vertical del contenido de la celda

baseline (línea de base) bottom (inferior) middle (medio) top (superior)

Bicolor

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:

CECyTE EMILIANO ZAPATA	CECyTE TLAYECAC
CECyTE TENEXTEPANGO	CECyTE YECAPIXTLA

Combinar celdas

Página de   Página 48 de 144

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	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.

Página de   Página 49 de 144

Vamos a realizar un ejemplo de cómo insertar imágenes dentro de nuestra página Web para hacerla más 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.

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.