Informatica Gam2 S3

2,222 views
2,107 views

Published on

Published in: Travel, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,222
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
62
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Informatica Gam2 S3

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

×