GM 2 S 3

Reforma Curricular del Bachillerato Tecnolgico Estructura y Programas de Estudio de la Carrera de Tcnico en Informtica
Profesores que elaboraron la gua didctica del mdulo profesional de la carrera de tcnico en:
Informtica
NOMBRE
Ilych Antonio Ramos Guardado Sergio Anonales Figueroa Artemio Lemus Ruiz Vctor Puc Ibarra Maria Flix Roldan Lpez Javier Snchez Prez Sonia Patricia Ramos Saucedo
ESTADO
Nayarit Morelos Michoacn Yucatn Hidalgo Chihuahua Coahuila
Coordinadores de Diseo: NOMBRE Ismael Lee Cong Manuel Gilberto Mndez Monforte Julio Csar Flores Olivares ESTADO Quintana Roo Yucatn Nayarit
Coordinador del Componente de Formacin Profesional: NOMBRE Espiridin Licea Prez
Directorio
Lic. Josefina Vzquez Mota Secretario de Educacin Pblica Dr. Miguel Szkely Pardo Subsecretaria de Educacin Media Superior Lic. Lus F. Meja Pia Director General de Educacin Tecnolgica Industrial Antrop. Ana Belinda Ames Russek Coordinadora Nacional de Organismos Descentralizados Estatales de CECyTEs Lic. Elena Karakowsky Kleyman Responsable de Desarrollo Acadmico de los CECyTEs Profr. Espiridin Licea Prez Responsable de Normatividad Acadmica de los CECyTEs
Objetivo General
Una vez concluido este submdulo tendrs las capacidades y competencias necesarias para utilizar diferentes servicios de la red Internet as como sus protocolos y lenguajes, disear pginas web tanto en hipertexto como en un editor visual y que incluyan elementos multimedia como video, sonido y animaciones; asimismo, podrs montar pginas en un servidor web. Para lo anterior es necesario auxiliarte de las competencias desarrolladas en los submdulos 1 y 2, de este mismo mdulo y del idioma ingls. Actividades como diseo y montaje de pginas web en un servidor requieren cierto grado de responsabilidad y autonoma, en virtud de lo cual esta competencia est considerada en el nivel 2.
ndice
Contiene los siguientes apartados: I. II. III. IV. V. VI. VII. Mapa curricular. Introduccin al curso. Desarrollo de competencias. Conclusiones de la gua de aprendizaje. Fuentes de informacin. Glosario. Anexos.
Mapa Curricular
CARRERA Tcnico en informtica. MDULO II Software de diseo SUBMDULO III Elaborar pginas Web utilizando las aplicaciones actuales
COMPETENCIA 1 Utilizar los servicios de Internet.
COMPETENCIA 2 Manejar protocolos y lenguajes de Internet.
COMPETENCIA 3 Programar en un lenguaje hipertexto.
de
HABILIDADES Y DESTREZAS Manipular correo electrnico. Manipular Microsoft Outlook Express. Manejar Eudora. Manejar FTP. Navegar por Internet. Manipular Netmeeting. Manejar la mensajera instantnea. Buscar informacin en Internet.
HABILIDADES Y DESTREZAS Disear formularios. Crear hipertexto. Utilizar servidores Web. Manejar protocolos. Manejar el lenguaje http. Manejar el lenguaje HTML. Manejar el lenguaje DHTML.
HABILIDADES Y DESTREZAS Insertar etiquetas principales. Insertar vnculos e hipervnculos. Manejar etiquetas secundarias. Agregar marquesinas. Disear tablas. Insertar Imgenes, sonido y video. Insertar caracteres especiales.
CONOCIMIENTOS Navegadores. Internet Explorer. Buscadores en Internet. Metabuscadores. Tipos de buscadores. Riesgos y seguridad en Internet. Sistemas de comunicacin personal. World Wide Web. Protocolos de Internet (http, https, ftp, telnet, mailto).
CONOCIMIENTOS Teoras del diseo (Minimalismo, Conceptualismo). Funciones de diseo (necesidades, impacto, enfoque). Diseo de formatos (zonas ureas, direccin y sentido, equilibrio). Teora del color (circulo cromtico, RGB (Red, Green, Blue), CMY (Cyan, Magenta, Yellow), contrastes).
CONOCIMIENTOS Editores de texto Lenguaje de hipertexto Estructura de una pgina Web Vnculos e hipervnculos Navegadores de Internet ACTITUDES Orden.
ACTITUDES Responsabilidad.
Pgina 5 de 129
Mapa Curricular
COMPETENCIA 4 Disear una pgina Web en un editor visual.
COMPETENCIA 5 Crear hipervnculos.
COMPETENCIA 6 Crear vnculos Web.
HABILIDADES Y DESTREZAS Manipular el software de diseo. Ubicar los elementos de la pantalla. Insertar componentes. Manipular la barra de Insertar (Comn, Diseo, Formularios, Texto, HTML, Aplicacin, Elemento Flash y Favoritos.) Administrar sitios Web. Crear tablas. Insertar imgenes. Insertar comentarios. Anexar contadores de visitas. Administrar titulares. Insertar fecha y hora. Adicionar marquesinas. Manipular botones activables. Insertar aplicaciones multimedia. Crear formularios para manipular bases de datos. Insertar marcos CONOCIMIENTOS Diseo de una pgina Web. Etiquetas del lenguaje de hipertexto. Aplicaciones multimedia. Formularios. Estructura de una base de datos. Funciones de las barras de herramientas.
HABILIDADES Y DESTREZAS Insertar marcadores. Habilitar los efectos de conversin de hipervnculos. Manipular la conexin a las pginas Web.
CONOCIMIENTOS Direcciones absolutas relativas Hipervnculos ACTITUDES Orden.
HABILIDADES Y DESTREZAS Crear vnculos a otros documentos en Web. Crear vnculos y anclas. Crear la estructura de una URL. Utilizar el protocolo http. Vincular archivos. Utilizar el protocolo mailto. Realizar listas vinculadas. Vincular tablas. Vincular imgenes. Vincular sonidos. Vincular videos.
CONOCIMIENTOS Creacin de vnculos Lenguaje html Protocolos de Internet
ACTITUDES Orden.
Pgina 6 de 129
Mapa Curricular
COMPETENCIA 7 Almacenar pginas en un servidor Web.
HABILIDADES Y DESTREZAS Manipular un FTP annimo. Manipular un FTP no annimo. Almacenar las pginas Web en un servidor dedicado o gratuito.
CONOCIMIENTOS Protocolo FTP Manejo de utileras FTP Buscadores de Internet Servidores de Internet ACTITUDES Responsabilidad.
Pgina 7 de 129
Un mensaje para ti
De nueva cuenta tenemos la oportunidad de encontrarnos. Ya llevas un buen tramo recorrido de tu formacin en la informtica. A lo largo de todo este tiempo seguramente has adquirido muchos conocimientos y has desarrollado muchsimas habilidades y destrezas para desempearte fcilmente en esta rea tan complicada. Ahora mismo, te encuentras cursando el segundo mdulo llamado software de diseo Sin embargo debes tener claro que en la informtica nada, absolutamente nada puede permanecer esttico, al contrario todo esta en constante cambio. Por eso, ahora tenemos la oportunidad de poner en tus manos una nueva gua de aprendizaje, con la cual seguramente podrs realizar una serie de actividades que te permitirn aumentar tus conocimientos y desarrollar tus destrezas en la informtica, pero ms especficamente en la creacin de pginas Web utilizando las aplicaciones actuales. Este tercer submdulo tiene por lo tanto la finalidad de que al trmino del mismo seas capaz de crear pginas web en aplicaciones como editores visual y que se vean enriquecidas con elementos multimedia como video, texto, sonido y animacin. Obviamente el campo de trabajo para esta rea es muy grande, pero resumiendo te podemos mencionar que con lo visto aqu, podrs colocarte a trabajar en reas donde se desarrollen pginas Web utilizando diseos grficos, como son: empresas de publicidad, de comunicacin, imprentas, oficinas de servicios pblicos y privados e instituciones educativas y autoempleo. Debemos recordar que este submdulo est muy relacionado con otros dos que en su conjunto forman el mdulo de software de diseo; te invitamos a que analices la figura siguiente para que veas dicha relacin. Todas las competencias que se integran el submdulo sern desarrolladas en un contexto prctico, ello en funcin de que los sitios de insercin laboral para esta rea exigen que demuestres las capacidades y habilidades de competencia, bajo estas caractersticas; sin olvidar la aplicacin de
Pgina 8 de 129
conocimientos de formacin bsica como el idioma Ingls, ortografa y gramtica, as como herramientas tecnolgicas como el Internet. En funcin de la disponibilidad tecnolgica del plantel, as como de la iniciativa y perseverancia en tu propia formacin, se plantea que todas las actividades incluidas en esta gua de aprendizaje las desarrolles en reas de cmputo del plantel, o en su caso, espacios pblicos o privados que te permitan acceder a esta tecnologa. Como parte de la evaluacin necesaria para determinar si ya lograste ser competente en esta rea de formacin, te planteamos observar las siguientes evidencias: 1. 2. 3. 4. 5. 6. 7. Los servicios de Internet utilizados. Los protocolos y lenguajes de Internet manejados. El hipertexto programado en un lenguaje. La pgina Web diseada en un editor visual. Los hipervnculos creados. Los vnculos Web creados. Las pginas almacenadas en un servidor Web.
Pgina 9 de 129
Simbologa
PRCTICA
EJEMPLO
ERRORES TPICOS
EJERCICIO
CONCLUSIONES
INTRODUCCION
CONTINGENCIA
OBJETIVO
Pgina 10 de 129
Competencias, habilidades y destrezas

Mdulo I Submdulo III
Software de Diseo. Elaborar pginas Web utilizando las aplicaciones actuales. 1. 2. 3. 4. 5. 6. 7. Utilizar los servicios de Internet. Manejar protocolos y lenguajes de Internet. Programar en un lenguaje de hipertexto. Disear una pgina Web en un editor visual. Crear hipervnculos. Crear vnculos Web. Almacenar pginas en un servidor Web.
Competencias a Desarrollar
COMPETENCIA
I Utilizar los servicios de Internet.
Introduccin
envenido!!! Este Submdulo III, te permitir desarrollar las habilidades y destrezas para que puedas Elaborar pginas Web utilizando las aplicaciones Actuales. Vamos a desarrollar la primera competencia con los ejercicios y prcticas que te proponemos, adems de tu empeo y entusiasmo lograremos desarrollar las habilidades y destrezas para: Manipular el correo electrnico, el Microsoft Outlook Express, el Eudora, el protocolo FTP, navegar por Internet, manejar la mensajeria instantnea, as como buscar informacin 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 participacin entusiasta y sin la iniciativa de tu parte, por lo que te invitamos a que contines trabajando con el mismo nimo con que lo has hecho hasta ahora en tu formacin profesional.
Pgina 11 de 129
HABILIDAD
1. Manipular correo electrnico. 2. Manipular Microsoft Outlook Express. 3. Manejar Eudora. Vamos a iniciar nuestro trabajado ayudndote a desarrollar las primeras habilidades, para que t puedas manipular el correo electrnico, que es uno de los principales medios de comunicacin en Internet utilizado para enviar y recibir informacin en algunos de los principales clientes de correo Electrnico.
RESULTADO DE APRENDIZAJE
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 pgina Web diseada para ello, y por tanto usando slo un programa navegador Web. El correo Web es cmodo para mucha gente, porque permite ver y almacenar los mensajes desde cualquier sitio (en un servidor remoto, accesible por la pgina web) en vez de en un ordenador personal concreto. Como desventaja, es difcil de ampliar con otras funcionalidades, porque la pgina ofrece unos servicios concretos y no podemos cambiarlos. Adems, suele ser ms lento que un programa de correo, ya que hay que estar continuamente conectado a pginas Web y leer los correos de uno en uno. En la siguiente figura se muestra la estructura de un programa para enviar un correo electrnico, comenta con tus compaeros y describe su funcionalidad:
Pgina 12 de 129
EJEMPLO 2
Observa las dos figuras siguientes y comenta con tus compaeros 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 descripcin corta que ver la persona que lo reciba antes de abrir el correo. El propio mensaje. Puede ser slo texto, o incluir formato, y no hay lmite de tamao. Adems, se suele dar la opcin de incluir archivos adjuntos al mensaje. Esto permite traspasar datos informticos de cualquier tipo mediante el correo electrnico. Para especificar el destinatario del mensaje, se escribe su direccin 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. Adems 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 Carbn): Quienes estn en esta lista recibirn tambin el mensaje, pero vern 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 Carbn 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 ningn destinatario.
Pgina 13 de 129
EJERCICIO 1 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda ejecutar una demostracin prctica en donde se de de alta una cuenta de correo electrnico 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 atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Genera una cuenta de correo en Hotmail, que sea fcil de recordar para ti, en caso de que ya la tengas, revisa que este activa. Ya que proporcionars la direccin de correo al profesor.
Pgina 14 de 129
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 informacin: Es importante recordar al alumno que si por error escribe mal la direccin de correo la informacin no llega al destino solicitado. Instrucciones para el alumno.- Revisa tu correo electrnico, busca la informacin solicitada por el docente y envala como archivo anexo, editando dicha informacin en cualquier editor de texto. EJEMPLO 3 Los clientes de correo electrnico, son programas para gestionar los mensajes recibidos y poder escribir nuevos mensajes. Suelen incorporar muchas ms 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 ledos sin estar conectados a Internet (adems, se quedan grabados en el ordenador). En cambio, en una pgina 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 compaeros cuales son las diferencias y semejanzas entre dos de los programas de correo gratuitos.
Pgina 15 de 129
Microsoft Outlook
Mozilla Thunderbird
Eudora EJERCICIO 3 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda ejecutar una demostracin prctica en donde se de de alta una cuenta de correo electrnico 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 atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas.
Pgina 16 de 129
PRCTICA 1 Competencia I.- Utilizar los servicios de Internet. Habilidades.1. Manipular correo electrnico. 2. Manipular Microsoft Outlook Express. 3. Manejar Eudora. Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Proporcione un correo electrnico 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: GUA DE OBSERVACIN: TINF04/M2S3/ED1-3. Instrucciones para el alumno.1. Realiza una cuenta gratuita de Correo electrnico que permita ser configurada en un programa cliente. 2. Configura en un programa cliente de correo electrnico, con la cuenta de correo antes creada. 3. Escribe tu nombre completo en algn procesador de textos y envalo como archivo anexo a tu profesor. 4. Llama al docente para que te revise la prctica. 4. Manipular FTP. Vamos a iniciar nuestro trabajado ayudndote a desarrollar la habilidad para que puedas cargar y descargar archivos por medio del ftp (protocolo de transferencia de archivos), e informacin en un servidor utilizando alguna aplicacin cliente.
HABILIDAD
Desarrollo
El ftp: (File Transfer Protocol), utilizar el protocolo FTP de transferencia de ficheros. Se utilizar cuando la informacin que se desee acceder se encuentre en un servidor de ftp. Por defecto se acceder a un servidor annimo (anonymous), si se desea indicar el nombre de usuario se usar: ftp://mquina.dominio@usuario, y luego le pedir la clave de acceso.
Pgina 17 de 129
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 demostracin prctica para la utilizacin de algn programa FTP donde se explique como enviar y bajar informacin. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. PRCTICA II Competencia I.- Utilizar los servicios de Internet. Habilidades.4. Manejar Ftp. Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Proporcione una direccin de Internet o la direccin de un servidor, donde el alumno puede subir y bajar informacin. Utilizando cualquier programa FTP. Pgina 18 de 129
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: GUA DE OBSERVACIN: TINF04/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 va ftp al sitio o direccin indica por el docente. 4. Descarga el archivo indicado por el docente va ftp. 5. Llama al docente para que te revise la prctica.
HABILIDAD
5. Navegar por Internet. 6. Manejar la mensajera instantnea. 7. Buscar informacin en Internet. En esta habilidad lograremos que t puedas navegar por Internet utilizando varios de sus servicios como: Foros de discusin, el chat y la mensajera instantnea, adems de la bsqueda de informacin.
Desarrollo
Web (World Wide Web) en ocasiones se utiliza la palabra Web como sinnimo de Internet. El hipertexto es lo que permite que al hacer clic en una palabra o grfico pasemos de la pgina en la que estamos a otra pgina distinta. Quin y cmo se crea la informacin en Internet? Los servidores de Internet pertenecen a las universidades, las instituciones pblicas y a las empresas. Las empresas de hospedaje o Hosting venden espacio a otras empresas o a particulares. Pero tambin hay servidores gratuitos que alojan pginas personales a cambio de publicidad. Un Buscador, es una herramienta que permite buscar informacin en toda la Internet a partir de unas palabras que se introducen describiendo lo que se busca. Las URL se utilizarn para definir el documento de destino de los hiperenlaces, para referenciar los grficos y cualquier otro fichero que se desee incluir dentro de un documento HTML. El formato de una URL ser: servicio://mquina.dominio:puerto/camino/fichero.
Pgina 19 de 129
EJEMPLO 5 TIPOS DE BUSCADORES Aunque algunos buscadores utilizan conjuntamente varios de los mtodos que vamos a describir a continuacin resulta til conocer cada forma distinta de buscar. Buscadores por palabras clave. Son los buscadores ms comunes, el usuario introduce una palabra clave y el motor del buscador examina su base de datos para mostrar las pginas encontradas. Buscadores por categoras. Estos buscadores que estn organizados por tpicos de conocimiento de forma que al elegir una opcin nos enva a otra pgina con ms categoras, as sucesivamente podemos llegar a ver las pginas que existen sobre un tema muy concreto; por ejemplo, deportes deportes extremos - parapente - vuelo libre. Es decir en estos buscadores se puede buscar eligiendo categoras en lugar de introducir palabras claves. Metabuscadores. Se podran llamar tambin buscadores mltiples ya que realizan varias bsquedas simultneas en los dems buscadores y muestran los resultados ordenados por buscador. Buscadores especficos. Son buscadores que slo contienen informacin sobre un tema concreto, por ejemplo, buscadores de legislacin, buscadores de libros, etc. Tambin incluimos en este tipo las pginas recopilatorias de pginas 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 compaeros, cuales son sus semejanzas y diferencias.
Pgina 20 de 129
http://www.google.com/
http://www.altavista.com/
http://www.yahoo.com/
http://www.lycos.es/
http://www.alltheweb.com/
http://es.msn.com/
Pgina 21 de 129
EJERCICIO 4 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda ejecutar una demostracin prctica para buscar informacin, en los diferentes tipos de buscadores: o Buscadores por palabra clave. o Buscadores por categorias. o Metabuscadores. o Buscadores especficos. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; 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 informacin generada por los tres buscadores. 3. Anota las direcciones o referencias de las pginas a las que te envi el buscador. 4. Lee detalladamente la informacin encontrada en los tres buscadores, compara y genera tu propia conclusin apoyndote en ellas. 5. Coloca de encabezado tu nombre en el archivo, guarda e imprime tu documento para entregrselo a tu profesor. Instrucciones para el docente.- Revisa que la prctica del alumno cumpla con lo requerido, cuidando ortografa y gramtica, adems de tomar en cuenta la limpieza del trabajo, realimentando las posibles contingencias.
Pgina 22 de 129
Recuerda que la informacin en Internet la generamos todos, y no siempre esta correcta, por eso es importante compararla con otra bsqueda. Tampoco la informacin 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 informacin para que no lleve basura. No olvides anotar siempre la direccin o referencia de la pgina en donde encontraste esa informacin.
EJEMPLO 6 Los foros en Internet son tambin conocidos como foros de mensajes, de opinin o foros de discusin y son una aplicacin Web que le da soporte a discusiones en lnea. Por lo general los foros en Internet existen como un complemento a un sitio Web invitando a los usuarios a discutir o compartir informacin relevante a la temtica del sitio, en discusin libre e informal, con lo cual se llega a formar una comunidad en torno a un inters comn. Un foro en Internet, comnmente, permite que el administrador del sitio defina varios foros sobre una sola plataforma. stos funcionarn como contenedores de las discusiones que empezarn los usuarios; otros usuarios pueden responder en las discusiones ya comenzadas o empezar unas nuevas segn lo crean conveniente. Veamos algunos ejemplos de foros de discusin o consulta:
http://www.forosdelweb.com/
http://www.lawebdelprogramador.com/news/ Pgina 23 de 129
EJERCICIO 6 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda ejecutar una demostracin prctica en la realizacin de un foro, en alguna pgina gratuita en donde se permita, para esta asignatura. Una vez registrada la direccin de foro, dar de alta el registro de todos los estudiantes del grupo y generar la participacin 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 atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Y una vez generado el grupo, date de alta en el mismo para ser un participante. EJEMPLO 7 MENSAJERA INSTANTNEA Los mensajeros instantneos son programas que utilizan el protocolo TCP IP y sirven para enviar y recibir mensajes instantneos con otros usuarios conectados a Internet u otras redes, adems de saber cuando estn disponibles para hablar. Pgina 24 de 129
La mensajera instantnea tiene la caracterstica de que cuando llega un correo nos avisa en el mismo instante, tambin nos informa cuando se conecta algn miembro de una lista de usuarios que nosotros habremos creado previamente. En ese momento podemos decidir escribirle un correo o establecer una conversacin como en un Chat, enviar un archivo, establecer un conversacin de voz as como activar una cmara Web. El Chat en ingls significa charla. Usualmente se refiere a una comunicacin escrita a travs de Internet entre dos o ms personas que se realiza instantneamente. Es comn que estas personas escriban bajo pseudnimos llamados nick o apodo. Los mensajeros instantneos ms utilizados son ICQ, Yahoo! Messenger, MSN Messenger, AIM (AOL Instant Messenger) y Google Talk (que usa el protocolo abierto Jabber).
ICQ
Yahoo! Messenger
Pgina 25 de 129
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 prctica para establecer una comunicacin via mensajeria instantanea, explicando todas sus funciones. En por lo menos unos de los mensajeros instantaneos. Establezca una clase en lnea con todos sus alumnos.
Pgina 26 de 129
Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Entra al mensajero indicado por el profesor para poder establecer una comunicacin en lnea. EJERCICIO 8 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda ejecutar una demostracin prctica para acceder a algunos sitios gubernamentales, asi como el acceso a noticieros. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. PRCTICA III Competencia I.- Utilizar los servicios de Internet. Habilidades.5. Navegar por Internet. 6. Manejar la mensajera instantnea. 7. Buscar informacin en Internet. Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.Proporciona una direccin de correo para que le enven la informacin. 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: GUA DE OBSERVACIN: TINF04/M2S3/ED1-3. Instrucciones para el alumno.1. Investiga la siguiente informacin en por lo menos dos buscadores Web: o Qu es la educacin en Internet (en lnea)? o Ventajas de la educacin en Internet. o Desventajas de la educacin en Internet. 2. En un documento del procesador de textos, copia y pega la informacin generada por los dos buscadores.
Pgina 27 de 129
3. Anota las direcciones o referencias de las pginas a las que te envi el buscador. 4. Lee detalladamente la informacin encontrada en los tres buscadores, compara y genera tu propia conclusin apoyndote en la informacin 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 pgina de gobierno tu CURP, copia y pgala en el documento antes generado. 8. Entra al mensajero indicado por el profesor y enva 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 prcticas realizadas oportunamente para desarrollar las habilidades y destrezas al utilizar los servicios de Internet, manipular el correo electrnico, configurar un cliente de correo, descargar y transferir archivos, manejar la mensajera instantnea, as como navegar, buscar y depurar informacin. La evaluacin de las habilidades y destrezas, conocimientos y actitudes de esta competencia se har mediante el instrumento de evaluacin gua de observacin TINF-04/M2S3/ED1-3.
Pgina 28 de 129
COMPETENCIA
II Manejar protocolos y lenguajes de Internet.
Introduccin
sta competencia te permitir desarrollar las habilidades y destrezas para que puedas manejar los protocolos y el lenguaje de programacin HTML utilizado para generar las pginas de Internet. Una red es una configuracin de computadora que intercambia informacin. Pueden proceder de una variedad de fabricantes y es probable que tenga diferencias tanto en hardware como en software, para posibilitar la comunicacin entre estas es necesario un conjunto de reglas formales para su interaccin. A estas reglas se les denominan protocolos. Un protocolo es un conjunto de reglas establecidas entre dos dispositivos para permitir la comunicacin entre ambos. 1. 2. 3. 4. Crear hipertexto. Utilizar servidores Web. Manejar protocolos. Manejar el lenguaje HTML.
HABILIDAD
Vamos a comenzar nuestra segunda competencia para desarrollar los protocolos y lenguajes de Internet, la creacin de hipertexto, la utilizacin 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 grfico pasemos de la pgina en la que estamos a otra pgina distinta.
Pgina 29 de 129
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas 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 slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia, tienen la extensin .html o .htm.
EJEMPLO 1 Observa en el ejemplo el hipertexto que me permite conectar una palabra o grfico de la pgina en la que estamos a otra pgina distinta.
Pgina 30 de 129
EJEMPLO 2 En el ejemplo 1, se muestra un hipertexto que nos conecta una pgina a otra, veamos ahora el cdigo de programacin html escrito en un editor de textos de los dos archivos.
Pgina 31 de 129
EJERCICIO 1 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda una prctica demostrativa para generar una pequea pgina Web, utiizando un editor de textos. Proporcionar la direccin de una pgina Web vlida en Internet para que los alumnos la consulten y puedan observar su cdigo. Explique la estructura bsica de una pgina html y genere un ejemplo. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Consulta la direccin de Internet proporcionada por tu profesor y visualiza su cdigo. Busca y descarga en archivo un manual de HTML, no olvides comparar entre varios y elegir el ms completo. Realiza una pequea pgina Web apoyndote del manual antes consultado.
EJEMPLO 3
Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Existen varios navegadores, aqu te mostramos dos de los ms utilizados y que soportan compatibilidad.
Pgina 32 de 129
Microsoft Internet Explorer
Mozilla FireFox
EJERCICIO 2 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda una prctica 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 atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Busca y descarga una versin de algn navegador Web gratuito indicado por el docente. Instala el navegador Web en tu mquina. Llama a tu profesor para que te revise.
Pgina 33 de 129
EJEMPLO 4
Un servidor web es un programa que implementa el protocolo HTTP (hypertext transfer protocol). Este protocolo est diseado para transferir lo que llamamos hipertextos, pginas Web o pginas 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 estn ntimamente ligados no debe dar lugar a confundir ambos trminos. 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 peticin 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/
Pgina 34 de 129
El protocolo https: (HyperText Transport Protocol Secure), es el protocolo para la conexin a servidores de la WWW seguros. Estos servidores son normalmente de mbito comercial y utilizan encriptacin para evitar la intercepcin de los datos enviados, usualmente nmeros de tarjeta de crdito, datos personales, etc..., realizar una conexin a un servidor de la WWW seguro. Veamos el ejemplo la pgina 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 informacin que se desee acceder se encuentre en un servidor de ftp. Por defecto se acceder a un servidor annimo (anonymous). Por ejemplo: ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2.0.0.1candidates/rc1/
Pgina 35 de 129
El protocolo TCP/IP es un protocolo DARPA que proporciona transmisin 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 ms 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.
Pgina 36 de 129
EJERCICIO 3 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda una prctica demostrativa donde se explique el manejo de los principales protocolos de internet, principalmente: http, https y ftp. Adems de la configuracin del protocolo TCP/IP, para conectarse a internet. Revisa la investigacin de los diferentes tipos de servidores. Explica a detalle los diferentes tipos de servidores. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Investiga los tipos de servidores que existen, y entrega la informacin impresa al profesor.
PRCTICA 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 direccin de una pgina para descargar un archivo va 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: GUA DE OBSERVACIN: TINF04/M2S3/ED2-3 Instrucciones para el alumno.1. Investiga qu es un Editor. 2. Copia la informacin encontrada. 3. Crea una pequea pgina Web utilizando la estructura proporcionada por el profesor. 4. Pega la informacin que encontraste. 5. Genera tu pgina Web. 6. Gurdalo en una carpeta con tu nombre.
Pgina 37 de 129
7. Descarga el archivo de la pgina ftp que te indique el profesor en la carpeta antes creada. 8. Entra a las propiedades del protocolo TCP/IP y verifica si tu direccin IP es una direccin dinmica o una direccin esttica. 9. Llama a tu profesor para que te revise.
Para esta lograr esta competencia se hizo necesario ejecutar una serie de ejercicios y prcticas secuenciales que permiten desarrollar las habilidades y destrezas para crear un hipertexto bsico, utilizar los servidores Web, manejar los protocolos y lenguajes de Internet. La evaluacin de las habilidades y destrezas, conocimientos y actitudes de esta competencia se har mediante el instrumento de evaluacin gua de observacin TINF-04/M2S3/ED2-3.
Pgina 38 de 129
COMPETENCIA
III Programar en un lenguaje de hipertexto.
Introduccin
N la actualidad mucha gente accede a Internet y busca informacin, la cual se encuentra generada en un formato de hipertexto por medio de una pgina Web. Recuerda que un hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia, tienen la extensin .html o .htm. Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las pginas Web resultantes del cdigo interpretado. En esta competencia realizaremos la programacin de pginas Web, codificndola en un editor de textos. Insertando etiquetas principales (Estructura de una pgina Web), vnculos e hipervnculos, anexando marquesinas, diseando tablas, insertando Imgenes, sonido y video as como la insercin de caracteres especiales. Una vez que terminemos con esta competencia tu podrs programar y generar las pginas Web que necesites, ya sea personal o comercial, adems que puedes apoyarte del software de diseo para realizar diseos, imgenes, y logotipos para tu aplicacin, as mismo podrs crear animaciones multimedia que le pueden dar aun mas profesionalismo a tus pginas Web.
Pgina 39 de 129
HABILIDAD
1. 2. 3. 4.
Insertar etiquetas principales. Manejar etiquetas secundarias. Agregar marquesinas. Insertar caracteres especiales.
Vamos a comenzar nuestra tercera competencia conociendo el funcionamiento las etiquetas principales y secundarias de una pgina Web, agregando marquesinas para movimiento de nuestros objetos insertando estas etiquetas en un editor de textos para generar una pgina Web.
Desarrollo
Un "editor de texto" es un programa que permite escribir y modificar archivos digitales compuestos nicamente por texto sin formato, conocidos comnmente como archivos de texto. Hay una gran variedad de editores de texto. Algunos son de uso general, mientras que otros estn diseados 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 ms te agrade y generar tus pginas Web, recuerda que se tiene que guardar con la extensin .htm o html. En la siguiente ilustracin se muestran dos editores de texto fciles 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 programacin (edicin hexadecimal, reemplazado de texto...).
Pgina 40 de 129
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 da existen un gran nmero de editores que permiten crear pginas Web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y el uso de mens permite ganar rapidez. Los editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario conocer HTML para poder depurar el cdigo de nuestra pginas.
Pgina 41 de 129
Algunos de los editores visuales con los que podrs crear tus pginas 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 pginas Web ms utilizados. Macromedia Dreamweaver
Microsoft FrontPage
Estos programas generadores de cdigo los manejaremos en la siguiente competencia, por ahora dediqumonos a aprender la sintaxis del lenguaje HTML.
Pgina 42 de 129
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 aadir 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 bsica de una pgina Web. 1. Iniciamos cualquier editor de textosPara este ejemplo utilizaremos el bloc de notas.
2. Escribamos la estructura bsica de una pgina Web.
3. Te preguntars para qu sirve cada etiqueta, bueno la describiremos a continuacin. Pgina 43 de 129
<html> <head> <title>Mi Primer Pgina...</title> </head> <body bgcolor="#FFCC99"> Elaborar pginas Web utilizando las aplicaciones actuales </body> </html>
Declara el inicio del programa Declara la cabecera y el ttulo de la pgina Web Establece un color de fondo para el cuerpo del programa Texto que se muestra dentro de la pgina Web Se cierra el cuerpo del programa Cierra la etiqueta para el programa
4. Una vez aclarada la estructura de una pgina Web, guardemos nuestro cdigo, con el nombre de Cecyt.htm o Cecyt html. (Recuerda que se admite la extensin .htm o html).
5. Una vez guardado el archivo, cirralo y vayamos a la carpeta donde fue guardado, ya debe aparecer con un icono correspondiente al navegador que tengamos instalado.
Pgina 44 de 129
6. Abramos este archivo para ver como qued nuestra pgina Web.
7. Este sera el resultado de nuestra pgina Web. 8. Con la opcin de que si queremos ver o modificar el cdigo de nuestra pgina Web, presionamos el botn derecho sobre la pgina para ver nuestro cdigo.
9. Para mostrar nuevamente el cdigo de nuestra pgina Web donde podemos modificar los datos que nosotros queramos por ejemplo que el color del body ahora que sea en color azul: <body bgcolor="#3399CC ">
Pgina 45 de 129
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 minsculas o maysculas y no marca error por eso, pero si sera un error no escribir las etiquetas correctamente, lo que ocasionara que no se mostrara correctamente nuestra pgina Web. Sin embargo es recomendable que adoptemos un solo formato al escribirlas, es decir o todas la etiquetas las escribimos solo con minsculas o todas las escribimos con maysculas, esto para evitar que al momento de subir las pgina al servidor, los enlaces generen error.
Pgina 46 de 129
EJERCICIO 1 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre la paleta de colores y la combinacin de los mismos. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Descarga de algn buscador la paleta de colores y gurdala en algn medio de informacin como un disco de 3 o tu memoria para que la traigas siempre y la consultes cuando necesites de algn color en especial.
EJEMPLO 4
Formatear el texto <font> ... Las propiedades del texto pueden modificarse a travs 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 face color Posibles valores Nombre de la fuente, o fuentes Nmero hexadecimal o texto color del texto predefinido Valores del 1 al 7, siendo por defecto el 3, tamao del texto o desplazamiento respecto al tamao por defecto, aadiendo + o - delante del valor Significado fuente
size
Ejemplo:
<font color="#FFFFCC" size="10" face ="Arial"> VIVA MEXICO </font> A continuacin se muestran algunas etiquetas asociadas al tipo de letra:
Pgina 47 de 129
Etiqueta <b> <i> <u> <s> <tt> <big>
Significado negrita cursiva subrayado tachado teletipo (mquina de escribir) aumenta el tamao de la fuente
Ejemplo CECyTE CECyTE CECyTE CECyTE CECyTE
CECyTE
CECyTE
<small> disminuye el tamao de la fuente
EJEMPLO 5
Marquesina Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que pueden desplazarse de un lado a otro de la ventana en forma de lnea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.
<marquee bgcolor="#FFFFFF" behavior="alternate" direction="down"> VIVA MEXICO </marquee>
<marquee bgcolor="#FFFFFF" direction="up"> VIVA MEXICO </marquee> <br><br>
behavior="scroll"
Pgina 48 de 129
<marquee bgcolor="#FFFFFF" direction="rigth"> VIVA MEXICO </marquee> <br><br>
behavior="scroll"
<marquee bgcolor="#FFFFFF" direction="right"> VIVA MEXICO </marquee> <br><br>
behavior="slide"
<marquee bgcolor="#FFFFFF" direction="left"> VIVA MEXICO </marquee> <br><br>
behavior="slide"
A travs 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 travs del atributo direction puede modificarse la direccin en la que se mover el texto. Puede tomar los valores: o down (de arriba a abajo). o up (de abajo a arriba).
Pgina 49 de 129
o o
left (de derecha a izquierda). right (de izquierda a derecha).
Tambin es posible establecer un color de fondo, a travs del atributo bgcolor. Existen otros atributos como: La velocidad de desplazamiento vara con scrollamount, que marca los saltos segn el valor numrico, scrooldelay que determina el retraso en el movimiento en milisegundos. El atributo loop que define el nmero de veces que vamos a ver moverse el texto. Los atributos hspace y vspace los conocemos, definiran 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 pgina Web en donde pruebes el cdigo de las marquesinas del Ejemplo 5.
EJEMPLO 6 Caracteres especiales. Una pgina Web se visualiza en pases 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 pgina, debemos sustituirlo por su cdigo. Por ejemplo, la "" (a minscula acentuada) se escribe "á" de modo que la palabra pgina se escribira en una pgina HTML de este modo: página. A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:
Pgina 50 de 129
Carcter < >
Representacin < > á Á é É í Í ó Ó ú Ú ñ Ñ
Carcter & "
Representacin € ç Ç ü Ü & ¿ ¡ " · º ª ¬ © ®
EJERCICIO 3 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda una demostracin prctica guiada sobre la creacin de pginas Web, con colores de fondo e imgenes; reglas, tipos de letras, formatos y color de las letras, utilizando marquesinas, alineacin de parrafos, insercin de listas, numeracin y vietas, asi como la insercin de caracteres especiales. Se sugiere que el alumno genere una pgina Web con las herramientas que se vayan explicando durante la prctica guiada. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor.
Pgina 51 de 129
PRCTICA 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 prctica, realimenta con todo el grupo las respuestas de la misma. Instrucciones para el alumno.- Contesta brevemente cual es la funcin que hace cada una de las etiquetas. Recuerda escribir ordenadamente con letra legible, con limpieza y sin faltas de ortografa.
CODIGO 1. 2. <html> <head> <title> Mi Primer pgina Web... </title> </head> <body bgcolor="#FFCC99"> <body background="fondo.jpg"> <!Saludos//--> <font color="#FFFFCC" size="10" face ="Arial" > VIVA MEXICO </font> <p align="center"> </p> <p align="left"> </p> HOLA HOLA EXPLICA PARA QUE SIRVE
3. 4. 5. 6.
7. 8.
Pgina 52 de 129
9.
<p align="rigth"> </p>
HOLA
10. <marquee bgcolor="#FFFFFF" behavior="alternate" direction="down"> VIVA MEXICO </marquee> <br><br> 11. <marquee bgcolor="#FFFFFF" behavior="scroll" direction="up"> VIVA MEXICO </marquee> <br><br> 12. <marquee bgcolor="#FFFFFF" behavior="scroll" direction="rigth"> VIVA MEXICO </marquee> <br><br> 13. <marquee bgcolor="#FFFFFF" behavior="slide" direction="right"> VIVA MEXICO </marquee> <br><br> 14. <marquee bgcolor="#FFFFFF" behavior="slide" direction="left"> VIVA MEXICO </marquee> <br><br> 15. scrollamount 16. scrooldelay 17. loop 18. hspace y vspace 19. <big>
Pgina 53 de 129
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>
Pgina 54 de 129
PRCTICA 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. 2. 3. 4. 5. Inicializa el navegador instalado. Utiliza los buscadores de Internet para bajar una pgina Web que hable de los tipos de protocolos. Enva la informacin que encontraste acerca de protocolos y a la direccin de correo proporcionada por tu profesor en un archivo adjunto. Inicia el editor Bloc de notas. Genera el cdigo para crear una pgina Web siguiendo la siguiente estructura. a. Insertar como ttulo de la pgina tu nombre completo. b. Coloca en color azul el cuerpo de la pgina. c. Insertar como ttulo dentro de la pgina ELABORACIN DE PGINAS WEB. d. Insertar el texto buscado y haz una sntesis en el cuerpo de la pgina. e. Coloca una marquesina de color blanco con texto Arial nmero 12 en color rojo movimiento alternativo y direccin izquierda que se repita solamente 3 veces. f. Inserta las siguientes palabras y caracteres especiales en la Pgina Web. Pgina (Con letra en negritas). Cancin (Con letra cursiva). (con letra subrayado). (con letra teletipo o mquina de escribir). Guardar la pgina con el nombre Prctica2 y con formato htm en algn medio de informacin. Prueba que funcione adecuadamente tu pgina con lo requerido y una vez que termines llama al profesor y entrega tu disco. Pgina 55 de 129
6. 7.
HABILIDAD
5. Disear tablas. 6. Insertar Imgenes, sonido y video. 7. Insertar vnculos e hipervnculos. Continuemos con nuestra tercera competencia en donde lograremos disear tablas, insertar imgenes, sonido y video a las pginas, as como insertar vnculos e hipervnculos.
EJEMPLO 7
Tabla <table> Las tablas estn formadas por celdas, que son los recuadros que se obtienen como resultado de la interseccin entre una fila y una columna. Aplicar las herramientas de software de diseo para el manejo de grficos. Generar animacin con aplicaciones multimedia. Elaborar pginas 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 formarn la tabla. Fila <tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas debern insertarse entre las etiquetas <table> y </table>. Por ejemplo, para crear una tabla con cinco filas escribiramos: <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 nmero de filas, es necesario tambin especificar el nmero de columnas.
Pgina 56 de 129
Una celda es el resultado de la interseccin entre una fila y una columna, por lo que podremos especificar el nmero 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 width Sirve para Ancho de la tabla Valores Un nmero, acompaado de % cuando se desee que sea en porcentaje Un nmero, acompaado de % cuando se desee que sea en porcentaje Un nmero Un nmero Un nmero left (izquierda) right (derecha) center (centro) Nmero hexadecimal Nmero hexadecimal Nmero hexadecimal
height
Alto de la tabla Espacio entre el contenido de las celdas y el borde Espacio entre celdas Grosor del borde Alineacin de la tabla dentro de la pgina Color de fondo Imagen de fondo Color del borde
cellpadding cellspacing border align bgcolor background bordercolor
Ya modificando los atributos de la tabla anterior nos quedara:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF"> <tr> <td>CECyTE EMILIANO ZAPATA </td> Pgina 57 de 129
<td>CECyTE TLAYECAC </td> </tr> <tr> <td> CECyTE TENEXTEPANGO </td> <td> CECyTE YECAPIXTLA </td> </tr> </table>
Tambin existen algunos atributos validos para las celdas: Atributo Sirve para Valores left (izquierda) Alineacin del align right (derecha) contenido de la celda center (centro) baseline (lnea de Alineacin vertical base) valign del contenido de la bottom (inferior) celda middle (medio) top (superior) bgcolor Color de fondo nmero hexadecimal background Imagen de fondo nmero hexadecimal bordercolor Color del borde nmero hexadecimal
Si modificamos nuevamente los atributos de nuestra tabla:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF"> <tr align="center" bgcolor="#0000CC"> <td>CECyTE EMILIANO ZAPATA </td> <td bgcolor="#00FF00">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 travs del atributo colspan se especifica el nmero de columnas por las que se extender la celda y a travs del atributo rowspan se especifica el nmero de filas por las que se extender la celda.
Pgina 58 de 129
<table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="3">SOFTWARE DE DISEO</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">SUBMODULOS</th> <th colspan="2">CUMPLE</th> </tr> <tr align="center" valign="middle"> <th>SI</th> <th>NO</th> </tr> <tr align="center" valign="middle"> <td>Aplicar las herramientas de software de diseo para el manejo de grficos.</td> <td> 1</td> <td> 2</td> </tr> <tr align="center" valign="middle"> <td>Generar animacin con aplicaciones multimedia.</td> <td> 3</td> <td> 4</td> </tr> <tr align="center" valign="middle"> <td>Elaborar pginas Web utilizando las aplicaciones actuales.</td> <td>5</td> <td>6</td> </tr> </table>
Pgina 59 de 129
EJERCICIO 4 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre la creacin de tablas en una pgina Web. Se sugiere que el alumno genere una pgina Web con la herramienta de tablas que se vayan explicando durante la prctica guiada. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor.
EJEMPLO 8 Existen tambin etiquetas para insertar imgenes sonidos y videos. Vamos a realizar un ejemplo de cmo insertar imgenes dentro de nuestra pgina 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 travs del atributo src. Los formatos de imagen que se utilizan comnmente son el .gif (Imgenes con movimiento o con fondo transparente) o .jpeg (.jpg) y deben de estar almacenados en la carpeta donde est el archivo de la pgina Web para que pueda ser visualizado. Por ejemplo:
<img src="logo.jpg" alt="CECyTE MORELOS" > El texto alternativo se muestra tambin al situar el puntero sobre la imagen. Aqu aparecer CECyTE MORELOS. El atributo border puede tomar valores numricos, que indican el grosor en pxeles del borde.
Pgina 60 de 129
<img src="logo.jpg" alt="CECyTE MORELOS" border ="4"> Para el tamao de una imagen existen dos atributos width (anchura) y height (altura) que pueden modificar el tamao en pxeles de la imagen.
<img src="logo.jpg" alt="CECyTE MORELOS" border ="4" width="200" height="80> La alineacin de las imgenes se establece a travs del atributo align. Valor Sirve para left izquierda middle medio right derecha
<img src="logo.jpg" alt="CECyTE MORELOS" border ="4" width="200" height="80" align="right"> Por ltimo para insertar un imagen dentro de una tabla basta con:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF"> <tr align="center" bgcolor="#0000CC"> <td>CECyTE EMILIANO ZAPATA <img src="logo.jpg" alt="CECyTE MORELOS" border ="4" width="200" height="80">
Pgina 61 de 129
</td> <td bgcolor="#00FF00">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 pginas 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 pgina Web. <bgsound src="sonido.mp3" loop="-1"> Donde src, nos indica la ruta del archivo de audio que se escuchar y el atributo loop="-1" nos indica que ser un ciclo infinito y se reproducir de forma continua. Tambin se puede anexar a nuestra pgina Web un sonido con controles.
<embed src="angel.mp3" autostart="false" loop="true"> </embed> Donde embed permite jalar el control, src nos indica el archivo que vamos a abrir, autostart =false, establece que no se reproduzca automticamente y loop=true que se reproducir nuevamente una vez que termine.
Pgina 62 de 129
EJEMPLO 10
Ahora vamos a insertar un video como ejemplo dentro de una pgina Web. Los formatos de video compatibles son: AVI, el MPEG y el MOV.
<embed src="vidacorta.mpeg" width="400" height="300" autostart="false" loop="true"> </embed> Donde embed permite jalar el control, src nos indica el archivo que vamos a abrir, width="400" nos indica el alto del video y height="300", nos indica el alto autostart =false, establece que no se reproduzca automticamente 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 demostracin prctica sobre la insercin de imgenes, audio y video. No olvide dar una explicacin sobre referencias relativas y absolutas para almacenar los archivos de imagen, sonido y video. Adems de una explicacin de los plugins y activeX. Se sugiere que el alumno genere una pgina Web con la herramienta de insercin de imgenes, audio y video. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor.
Pgina 63 de 129
EJEMPLO 11
Un hiperenlace (tambin llamado enlace, vnculo, hipervnculo o liga) es un elemento de un documento electrnico que hace referencia a otro recurso, por ejemplo, otro documento o un punto especfico del mismo o de otro documento. Los vnculos son enlaces dentro del mismo documento. Los hipervnculos, son enlaces a otros elementos fuera del documento, como archivos, imgenes, sonidos videos etc. Los archivos donde conectan normalmente son a un a pgina 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 pgina queremos saltar. Lo primero de que debemos hacer es declarar nuestra ancla en cualquier lugar de la pgina Web. <a href="#ancla1">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 hipervnculo.
Conectmonos a una pgina que se encuentre dentro de nuestra misma carpeta. <a href="zapata2.htm"> CECyTE PLANTEL EMILIANO ZAPATA </a><br> Donde zapata2.html es la pgina a donde nos conectaremos, y CECyTE PLANTEL EMILIANO ZAPATA, el hipervnculo.
Pgina 64 de 129
Vamos a realizar una conexin a una pgina Web existente <a href="http://www.google.com"> 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="Desarrollo.doc" tarjet=_blank > DESCARGAR... </a>
Pgina 65 de 129
En nuestro ltimo ejemplo vamos a conectar nuestro hipervnculo para que envi un mensaje electrnico a una direccin ya establecida por medio del cliente de correo que tengamos configurado en nuestra mquina. <p align="center"> <a href="mailto:e_zapata@cecytemor.com"> ESCRIBENOS... </a> </p>
Pgina 66 de 129
EJERCICIO 6 Material de Apoyo.- Computadora e Internet. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre anclas, vnculos e hipervnculos, descarga de archivos, conexin a archivos de distinto formato. Se sugiere que el alumno genere una pgina Web con los diferentes tipos de vnculos e hipervnculos. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por tu profesor.
PRCTICA III
Competencia II.- Programar en un lenguaje de hipertexto. Habilidades.5. Disear tablas. 6. Insertar Imgenes, sonido y video. 7. Insertar vnculos e hipervnculos. 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 cdigo para crear una pgina Web siguiendo la siguiente estructura. 4. Insertar como ttulo de la pgina tu nombre completo. 5. Coloca una imagen agradable de fondo. 6. Coloca un archivo de sonido de fondo. 7. Insertar como ttulo dentro de la pgina ELABORACIN DE PGINAS WEB. 8. Coloca una marquesina de color azul con texto Tahoma del nmero 14 en color gris con movimiento alternativo y direccin izquierda. 9. Inserta la siguiente tabla con el color que desees.
Pgina 67 de 129
Software de Diseo Aplicar las herramientas de software de diseo para el manejo de grficos. Generar animacin con aplicaciones multimedia. Elaborar pginas Web utilizando las aplicaciones actuales.
Corel Dra.. Flash Dreamweaver
10. Coloca una imagen centrada dentro de la celda Software de Diseo. 11. Inserta un archivo de sonido con controles. 12. Inserta un archivo de video. 13. Inserta un hipervnculo que te conecte un archivo que t elijas. 14. Inserta un ancla con tu nombre al principio de tu documento. 15. Inserta un hipervnculo al ancla antes creada. 16. Inserta un hipervnculo que te conecte a alguna pgina Web disponible en Internet. 17. Inserta un hipervnculo con tu nombre que te permita enviar un mail a tu direccin de correo. 18. Guarda tu archivo con el nombre de prctica3 con formato htm. 19. Crea una segunda pgina personalizada a tu gusto y gurdala con tu nombre y con formato htm. 20. En la pgina prctica3 inserta una imagen y con ella crea un hipervnculo que te conecte a la pgina que tiene tu nombre. 21. Prueba y revise que tu pgina cumpla con todo lo que se te pide. 22. Guarda tu carpeta completa en algn medio de informacin. 23. Lama a tu profesor para que te revise la prctica.
Pgina 68 de 129
Para esta lograr esta competencia se hizo necesario ejecutar una serie de ejercicios y prcticas secuenciales que nos permitieron desarrollar las habilidades y destrezas para crear una pgina Web, insertar etiquetas principales y secundarias, caracteres especiales, agregar marquesinas, disear tablas, e insertar imgenes, sonido y video; as como vnculos e hipervnculos para realizar diferentes conexiones a archivos. La evaluacin de las habilidades y destrezas, conocimientos y actitudes de esta competencia se har mediante el instrumento de evaluacin lista de cotejo
TINF-04/M2S3/EP1-5.
Pgina 69 de 129
COMPETENCIA
IV. Disear una pgina Web en un editor visual.
Introduccin
Una vez que hemos desarrollado las competencias para la edicin de pginas web mediante el lenguaje HTML vamos a dar un salto a la edicin visual de pginas Web, utilizando el software de diseo que es un programa especializado en el que se genera el cdigo HTML automticamente, fcil de utilizar y con presentacin profesional.
HABILIDADES
1. Manipular el software de diseo. 2. Ubicar los elementos de la pantalla. 3. Insertar componentes. Con este primer conjunto de habilidades estars en posibilidad de manipular y personalizar a tu gusto el software que elijas como editor de pginas 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.
Pgina 70 de 129
EJEMPLO 2 Veamos las pantallas de dos de los principales programas para editar pginas Web: Microsoft FrontPage y Adobe Dreamweaver. Identifica los elementos que tiene la interfaz, barras de herramientas, paneles, mens, etc.
Pgina 71 de 129
Microsoft Office FrontPage.
Adobe Dreamweaver. EJEMPLO 3 La siguiente pantalla pertenece a la interfaz del software editor de pginas de Web de la compaa Adobe, llamado Dreamweaver. Identifica y localiza cada una de ellas.
Pgina 72 de 129
EJERCICIO 1 Instrucciones para el alumno.- Recuerda el nombre en espaol e ingls de cada una de las barras de herramientas y botones que visualizaste en el EJEMPLO 3 y escrbelas 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 demostracin prctica en donde se exponga de forma clara la funcin que tiene cada uno de los elementos de la venta del editor de pginas de Web.
Pgina 73 de 129
PRCTICA 1 Competencia.- Disear una pgina Web en un editor visual. Habilidades.1. Manipular el software de diseo. 2. Ubicar los elementos de la pantalla. 3. Insertar componentes. Recursos Materiales de Apoyo.- Computadora y software editor de pginas 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 edicin de pginas de internet anota cuntas y cules son las barras de herramientas que se pueden ocultar y visualizar.
Pgina 74 de 129
2. En la ventana principal activa los siguientes paneles: Insertar. Lneas de tiempo. Resultados. 3. Cambia de posicin de por lo menos 4 paneles e imprime esa ventana. 4. La configuracin o tamao del rea de trabajo depende de:_________________________
Para activar algn panel de herramientas selecciona la opcin de Ventana en el men de herramientas.
HABILIDADES
1. Manipular la barra de Insertar (Comn, Diseo, Formularios, Texto, HTML, Aplicacin, Elemento Flash y Favoritos.) 4. Administrar sitios Web. 5. Crear tablas. 6. Insertar imgenes. 7. Insertar comentarios. 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. Con el desarrollo de estas habilidades estars en posibilidad de manipular y estructurar el diseo de las pginas Web.
Pgina 75 de 129
El conocimiento previo que debes tener para desarrollar estas habilidades es el manejo de: Diseo de una pgina 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 disea y se colocan los elementos que formarn la pgina Web. En muchos editores de pginas por defecto tienen el tamao de esta rea como una pgina de un documento normal. Por lo que el tamao depende de la resolucin de su monitor.
EJEMPLO 2 LA BARRA DE INSERCIN (Insert Toolbar): Muestra varios iconos que representan los elementos que podemos insertar en la pgina de Internet, por ejemplo: Un vnculo, una direccin de correo electrnico, una imagen, tablas para acomodar texto e imgenes, etc. Esta herramienta es la base para iniciar a disear una pgina Web.
Pgina 76 de 129
Has uso de esta herramienta en el laboratorio de cmputo con el apoyo del profesor.
Este men desplegable contiene una lista con las diferentes categoras dentro de la que se encuentran agrupados los iconos que permiten insertar objetos comunes como hipervnculos y vnculos de e-mail.
EJEMPLO 3 El panel propiedades permite ver las opciones para el texto, las imgenes y los objetos multimedia ya creados; permitiendo modificar el tamao que ocupa en la pgina Web en pxeles y su posicin, el tamao del marco, adems permite elegir segmentos irregulares de su rea para colocar uno o ms vnculos a diferentes pginas Web.
Pgina 77 de 129
EJERCICIO 3 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre la manipulacin de las barras de Insercin (Comn, Diseo, Formularios, Texto, HTML), as como sus propiedades. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor.
EJEMPLO 4 ADMINISTRAR SITIOS WEB Un sitio Web (en ingls: website) es un conjunto de pginas Web, tpicamente comunes a un dominio de Internet o subdominio en la World Wide Web en Internet. No debemos confundir sitio Web con pgina Web, esta ltima es solo un archivo html, y muchas veces las empresas o personas tienen mas de 1 archivo colgados en Internet, lo que se constituye en sitio Web. Un sitio Web est alojado en un sistema de ordenador conocido como servidor Web, tambin llamado servidor HTTP, y estos trminos tambin pueden referirse al software que se ejecuta en este sistema y que recupera y entrega las pginas Web en respuesta a peticiones desde el sitio Web del usuario. Apache es el programa ms comnmente usado como servidor Web y el Internet Information Services (IIS) de Microsoft tambin se usa comnmente. Un sitio Web esttico es uno que tiene contenido que no se espera que cambie frecuentemente y se mantiene manualmente por alguna persona o personas que usan algn tipo de programa editor. Un sitio web dinmico puede tener cambios frecuentes en la informacin. Hay un amplio abanico de sistemas de software, como Active Server Pages (ASP), Java Server Pages (JSP) y el lenguaje de programacin PHP que estn disponibles para generar sistemas de sitios Web dinmicos. Veamos como se crea un sitio local len nuestra mquina llamado CECyTE, el cual contendr todos los archivos de nuestra pgina Web. Pgina 78 de 129
Al definir un sitio local: o Se establece la estructura del sitio que se est creando. o Se indica a Dreamweaver dnde se desea almacenar todos los archivos del sitio. Seleccionar Men Sitio > Nuevo sitio.
En el campo Nombre del sitio, se escribe el nombre del sitio (en este caso CECyTE). Conviene que sea corto. El nombre del sitio slo permite identificarlo internamente y seleccionarlo fcilmente en la lista de sitios que se van definiendo (si es que hay ms de uno).
Indicamos que no utilizamos ninguna tecnologa Servidor.
Pgina 79 de 129
La carpeta raz local, accede a la carpeta en que se situarn las pginas del sitio (previamente creada).
El campo Carpeta raz local se actualizar y mostrar la ruta del sitio local en nuestro disco duro. Dentro de esa carpeta se podrn crear otras, pero todos los archivos del sitio Web deben de estar dentro de la carpeta principal. Como trabajaremos en una carpeta dentro de nuestra mquina local, no utilizamos ningn servidor remoto.
Por ltimo nos muestra el resumen de nuestro sitio Web.
Cuando iniciemos la aplicacin, nos muestra la informacin del sitio que tenemos seleccionado.
Pgina 80 de 129
A partir de aqu ya tenemos el sitio Web creado en la PC, por lo tanto todos los archivos, imgenes y documentos utilizados para las pginas Web, quedarn almacenadas en esta carpeta. Una pgina index (index.htm), es el archivo principal de nuestro sitio Web, es decir va a ser la pgina principal, que se recomienda escribir su nombre del archivo con minsculas.
EJERCICIO 4 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre la Administracin de sitios Web. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor.
EJEMPLO 5 Como lo veamos en la competencia No 3, las tablas representan relaciones entre datos, una tabla esta compuesta por filas y columnas, donde a la interseccin entre una fila y una columna se le conoce como celda.
Este icono permite agregar una tabla a la pgina Web. sta tabla permite acomodar en sus recuadros imgenes, y textos permitiendo tener una mejor estructura en tus pginas.
Observa esta ventana e investiga cul es su funcionamiento.
Pgina 81 de 129
EJERCICIO 5 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre la creacin y manipulacin de tablas. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor.
EJEMPLO 6
Este icono contiene un submen que permite insertar una imagen, un apartador de imagen, una imagen cambiante una imagen Web HTML de Fireworks o una barra de Navegacin. Se recomienda que las imgenes que se manejen estn almacenadas en el mismo directorio de la pgina Web, al momento en que se coloque en servidor de Internet. Observa y analiza la siguiente ventana con tus compaeros y profesor.
Pgina 82 de 129
Busca dos imgenes sobre tu deporte favorito y almacnalas en una carpeta denominada mi primera pgina Web.
EJEMPLO 7
Este icono abre un men flotante que permite insertar elementos como: Animaciones Flash, botones animados, applets de Java, Controladores ActiveX y plugins. En el laboratorio analiza y describe para qu sirve cada uno de los siguientes comandos del icono media.
Pgina 83 de 129
EJERCICIO 6 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre la insercin de imgenes, as como la insercin de objetos media. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor.
EJEMPLO 8 Panel de Marcos(Frames Panel): este comando abre el panel de Frames, el cual muestra y permite editar los Frames o Marcos que contiene la Pgina Web. Los Frames son pginas Web independientes que se muestran sobre otra pgina Web ocupan todo un margen; generalmente en la esquina o a un lado.
Pgina 84 de 129
EJERCICIO 7 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre la manipulacin de marcos o Frames, as como los destinos de los mismos: _blank _parent _self _top Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor. EJEMPLO 9 COMENTARIOS Un comentario es un texto informativo que se anexa en una pgina Web, con el objetivo de identificar las lneas de cdigo de la aplicacin. Un comentario no se ve en la pgina Web, solo queda insertado en el cdigo de la misma.
Pgina 85 de 129
Aqu nos muestra el comentario insertado en el ejemplo.
La lnea 10, nos muestra el comentario insertado. EJEMPLO 10
Este icono abre el cuadro de dilogo de Insert Date el cual permite agregar la fecha del da de hoy u otra a la pgina Web.
Pgina 86 de 129
Analiza con tu docente que otras utilidades tiene esta ventana. CONTADORES DE VISITAS Los contadores de visitas llevan el control del nmero de visitantes que han consultado la pgina Web.
Pgina 87 de 129
EJEMPLO 11 ADICIONAR MARQUESINAS Como veamos en la competencia nmero 3, las marquesinas nos permiten anexar textos, imgenes, entre otros objetos con movimiento dentro de la pgina Web. Aunque algunos editores no cuentan con esta herramienta, lo que podemos hacer es activar la Vista Cdigo y escribir el cdigo de la marquesina.
Este es el resultado del cdigo insertado en la pgina Web.
EJERCICIO 8 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre la insercin de comentarios, contadores de visitas, marquesinas as como la fecha y hora. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor.
Pgina 88 de 129
EJEMPLO 12 MANIPULAR BOTONES ACTIVABLES Dentro del software de diseo, se pueden anexar botones activables, que vienen incluidos en el software de diseo Web, o que son generados en algn software de animacin multimedia, como por ejemplo Macromedia Flash.
Este es el resultado de un botn activable insertado en la pgina Web.
EJERCICIO 9 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre la manipulacin de botones activables, as como los destino de los hipervnculos. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor.
Pgina 89 de 129
EJEMPLO 13 CREAR FORMULARIOS Un formulario es una aplicacin que se utiliza para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, hacer suscripciones a un boletn o revista que editemos, etc. Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y har el tratamiento correspondiente (una base de datos por ejemplo). Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones.
Pgina 90 de 129
EJERCICIO 10 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda revisar la investigacin a los alumnos, sobre los elementos de un formulario. Instrucciones para el alumno.- Investiga cuales son los elementos que se pueden insertar en un formulario e investiga la funcin de cada uno de ellos.
EJERCICIO 11 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda una demostracin prctica sobre la creacin de formularios y la manipulacin de datos a un correo electrnico y a una base de datos. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas. Realiza la prctica indicada por el profesor. PRCTICA 1 Competencia.- Disear una pgina Web en un editor visual. Habilidades.a. Manipular la barra de Insertar (Comn, Diseo, Formularios, Texto, HTML, Aplicacin, Elemento Flash y Favoritos.) b. Administrar sitios Web. c. Crear tablas. d. Insertar imgenes. e. Insertar comentarios. f. Anexar contadores de visitas. g. Administrar titulares. h. Insertar fecha y hora. i. Adicionar marquesinas. j. Manipular botones activables. k. Insertar aplicaciones multimedia. l. Crear formularios para manipular bases de datos. m. Insertar marcos. Recursos Materiales de Apoyo.- Computadora y software de diseo Web. Pgina 91 de 129
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. 2. 3. 4. 5. o o o o 6. 7. Inicia la aplicacin de software de diseo. Genera un sitio con tu nombre donde almacenars tus pginas Web. Disea por lo menos 4 pginas Web sobre tu familia y los valores que se comentan dentro de ella. Estructura tu pgina Web con tres Frames, en el orden que te agrade. Describe a cada uno de los intrigantes de tu familia, apoyndote de los siguientes elementos: La creacin tablas. Insercin de Imgenes, comentarios, la fecha y hora, as como contadores de visitas. Adicin de marquesinas. Manipulacin de botones activables y aplicaciones multimedia. Realiza el diseo de un formulario sobre tu familia o persona en cual permita enviar los datos a una direccin de correo electrnico. Una vez termines t prctica, revisa que cumpla con todos los requerimientos y llama al profesor para que te revise.
Durante el desarrollo de esta competencia se analizaron varios ejemplos, y se llevaron a cabo varios ejercicios y prcticas con la finalidad de lograr todas las habilidades y destrezas correspondientes a: La manipulacin de la barra de Insertar (Comn, Diseo, Formularios, Texto, HTML, Aplicacin, Elemento Flash y Favoritos.), la administracin de sitios Web, la insercin de marcos, imgenes, comentarios, contadores de visitas, la adiccin de marquesinas, la manipulacin de botones activables y aplicaciones multimedia, as como la creacin de formularios para la manipulacin de bases de datos. Para evaluar las habilidades y destrezas, conocimientos y actitudes de esta competencia se har uso del instrumento de evaluacin LISTA DE COTEJO: TINF-04/M2S3/EP2-5
Pgina 92 de 129
COMPETENCIA
V Crear hipervnculos.
Introduccin
uevamente hagamos nfasis en los hipervnculos para conectar diferentes tipos de archivos. En la competencia nmero 3 Programar en un lenguaje de hipertexto, vimos este tipo de conexiones. Con los ejercicios y prcticas que te proponemos en un editor HTML visual, lograremos desarrollar las habilidades y destrezas para: insertar marcadores, habilitar los efectos de conversin de hipervnculos y manipular la conexin a las pginas Web.
HABILIDAD
1. Insertar marcadores. 2. Habilitar los efectos de conversin de hipervnculos. 3. Manipular la conexin a las pginas Web. En esta competencia vas a desarrollar las habilidades para crear e insertar marcadores, habilitar los efectos de conversin de hipervnculos y manipular la conexin a las pginas Web, todo esto un software de diseo.
Desarrollo
Los libros al momento de que los leemos son secuenciales: una letra y otra y una pgina y as hasta el final; en cambio los documentos multimedia son hipertextos. Donde el visitante va a navegar por los apartados que sean de su inters, se detiene en un punto lo consulta y vuelve nuevamente, es decir navega por la informacin. Direcciones absolutas y relativas Una direccin absoluta de un fichero o una pgina es del estilo: C:\Documents and Settings\SeRGio\Mis documentos\Sergio\index.htm (para un vnculo que desde otra pgina nos lleve a la inicial).
Pgina 93 de 129
Si escribes esto en la casilla de direccin URL, el vnculo funciona trabajando en la PC.
Pero qu sucede cuando envas un sitio Web al proveedor de Internet? Probablemente lo has alojado en una carpeta del estilo Cecyte dentro de algn servidor. La pgina index no est en la misma ruta que como estaba en la PC. No est en C:\Documents and Settings\SeRGio\Mis documentos\Sergio\ del servidor. El servidor tiene su propia estructura y organiza sus propias ubicaciones. La direccin absoluta que era vlida en la computadora en la cual se dise el sitio, pero no lo es en el servidor. Una ubicacin relativa se refiere respecto de la pgina principal (index). Si tienes todas las pginas de un sitio Web en la misma carpeta, la direccin relativa es simplemente el nombre del fichero, sin nada por delante. Al remitirlo a tu proveedor de Internet, las direcciones relativas funcionan exactamente igual que en la computadora de diseo. Si alojas las distintas pginas Web en carpetas que cuelgan de la principal, la direccin relativa es la ruta desde la pgina principal hasta la carpeta y fichero en cuestin. Entonces, volvemos a insistir, las direcciones relativas funcionarn en el proveedor perfectamente.
Pgina 94 de 129
Cuando se maneja el cuadro de dilogo Crear Hipervnculo, y la forma de crearlo es el doble clic en el fichero de la pgina correspondiente, se estn utilizando siempre direcciones relativas.
EJEMPLO 1
Cuando hacemos un hipervnculo, nos referimos a una direccin relativa a una pgina Web, que se encuentra dentro de la misma carpeta o sitio Web.
Un ejemplo de una direccin absoluta es cuando realizamos un hipervnculo a una pgina Web que no se encuentra dentro de nuestra carpeta o sitio Web. C:/Documents Acapulco/ and Settings/SeRGio/Escritorio/Web
Pgina 95 de 129
Recuerda que cuando creas un sitio Web en una aplicacin por ejemplo Dreamweaver, todos los archivos de imagen, sonido, de animacin, etc. Que se van insertando en la pgina Web, te pregunta si quieres crear una copia en la carpeta del sitio, para que no tengamos problema al momento de subir todo nuestro sitio o trasladar la carpeta a otra mquina.
EJERCICIO 1 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda ejecutar una demostracin prctica sobre el manejo de direcciones absolutas y relativas. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas.
Pgina 96 de 129
EJEMPLO 2 Un marcador es muy similar a un ancla y nos sirve para identificar el lugar a donde la pgina se va a conectar por medio de un hipervnculo. En el procesador de textos Microsoft Word y en Microsoft Front Page funcionan exactamente igual. Veamos el ejemplo en el software de diseo Microsoft Front Page.
Nos genera: <a name="hola"></a> Donde hola es el nombre del marcador. Ahora vamos a conectar el hipervnculo a la marca antes establecida.
Listo aqu tendramos el marcador e hipervnculo insertado. <a href="#hola">CONECTANDO A HOLA</a>
Pgina 97 de 129
EJEMPLO 3 Veamos el ejemplo en el software de diseo Macromedia Dreamweaver.
Nos genera: <a name="hola"></a> Donde hola es el nombre del marcador. Ahora vamos a conectar el hipervnculo a la marca antes establecida.
Listo aqu tendramos el marcador e hipervnculo insertado. <a href="#hola">CONECTANDO A LA ANCLA </a>
Pgina 98 de 129
EJERCICIO 2 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda ejecutar una demostracin prctica para la creacin, modificacin y eliminacin de marcadores o anclas en por lo menos dos programas de diseo de pginas Web. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas.
EJEMPLO 3
Veamos algunos efectos de conversin de hipervnculos, es decir configuremos la aplicacin para cambiar el aspecto de los hipervnculos, por ejemplo que cuando acerquemos el cursor; cuando visitamos una liga que cambie de color. Microsoft Front Page.
Una vez que guardemos el archivo abramos la pgina Web donde vemos que el aspecto de los hipervnculos cambia.
Pgina 99 de 129
Macromedia Dreamweaver.
Tambin se puede cambiar el aspecto de los hipervnculos en una imagen para que al colocar el cursor sustituya una imagen por otra.
Pgina 100 de 129
EJERCICIO 4 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda ejecutar una demostracin prctica para la manipular los efectos de conversin de hipervnculos e imgenes de sustitucin. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas.
EJEMPLO 4
Veamos un ejemplo de cmo podemos manipular la conexin a las pginas Web en cualquier software de aplicacin. Cuando insertamos un hipervnculo podemos modificar ciertos parmetros como el texto, el vnculo que ser la conexin a la pgina Web o el archivo a conectar. El destino nos indica la ubicacin o destino donde aparece nuestra pgina o nuestro archivo.
Recuerda que en la competencia anterior utilizamos Marcos o Frames para poder organizar la informacin de las pginas Web de una manera mas organizada.
Pgina 101 de 129
Lo ms interesante de los Frames es la posibilidad que tienen de interactuar entre si, es decir pulsar un enlace en el Frame 1 y cargar el contenido en el Frame 2. <html> <head> <title>EJEMPLO DE FRAMES</title> </head> <Frameset rows="80,*" cols="*" Framespacing="10" Frameborder="yes" border="10" bordercolor="#00FF00"> <Frame src="arriba.htm" name="topFrame" scrolling="SI" noresize> <Frameset rows="*" cols="127,*" Framespacing="10" Frameborder="yes" border="10" bordercolor="#00FF00"> <Frame src="izquierdo.htm" name="leftFrame" scrolling="SI" noresize> <Frame src="central.htm" name="mainFrame"></Frameset> </Frameset> <noFrames><body> </body></noFrames> </html> Recuerda que hay ciertos valores reservados para TARGET cuando queremos realizar un hipervnculo. TARGET=_top, hace que la pgina se cargue en la ventana completa del navegador. TARGET=_self, hace que la pgina se cargue en la misma ventana del Frame actual. TARGET=_parent, hace que la pgina se cargue en el Frame "padre", del que desciende el actual. TARGET=_blank, hace que la pgina se cargue en una nueva ventana. TARGET=nombre, hace que la pgina se cargue en el Frame llamado nombre. Si no existe se carga en una ventana nueva.
EJERCICIO 5 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda ejecutar una demostracin prctica para la manipular la conexin a las pginas Web. Instrucciones para el alumno.- Presta atencin al docente Pgina 102 de 129
en la demostracin prctica; pregunta todas las dudas que tengas.
PRCTICA I Competencia V.- Crear hipervnculos. Habilidades.1. Insertar marcadores. 2. Habilitar los efectos de conversin de hipervnculos. 3. Manipular la conexin a las pginas Web. Material de Apoyo.- Computadora y software de diseo. 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/EP3-5. Instrucciones para el alumno.1. Crea una carpeta con el nombre de hipervnculos. 2. Abre el software diseo de diseo de pginas Web. 3. Crea un nuevo Sitio Web llamado con tu nombre y gurdalo en la carpeta antes creada. 4. Genera una pgina Web llamada index, sobre tus amigos con 3 Frames (izquierdo, arriba y en el centro). Arriba Centro
Izquierdo
5. Coloca tu nombre completo como ttulo de la pgina. 6. En la parte superior (Arriba), coloca el siguiente texto: MIS MEJORES AMIGOS. 7. En el lado izquierdo escribe con texto sencillo o texto flash: El nombre de 3 de tus mejores amigos. 8. Genera una animacin Web referente a ti y a tus amigos e insrtala en el Frame del centro. 9. Inserta una marca o un ancla que se llama cecyt 10. Debajo de la animacin flash inserta tu nombre y crea un hipervnculo que se conecte con la marca o ancla cecyt. 11. Inserta una imagen de sustitucin debajo del hipervnculo de tu nombre. 12. Realiza una pgina personal para cada uno de tus tres amigos, donde describas su personalidad. 13. Vincula cada una de las pginas creadas con los nombres que se encuentran en el Frame izquierdo, de manera que aparezcan en el Frame destino centro. Pgina 103 de 129
14. Realiza un hipervnculo de regreso a la pgina principal para cada una de las pginas de tus amigos. 15. Modifica los efectos de conversin de hipervnculos en el software de diseo. 16. Prueba y revise que tu pgina cumpla con todo lo que se te pide. Guarda la carpeta completa donde se almacen tu sitio Web, en algn medio de informacin. 17. Llama al docente para que te revise la prctica.
Para lograr esta competencia se hizo necesario ejecutar una serie de ejercicios y prcticas secuenciales para desarrollar las habilidades y destrezas en la insercin de marcadores, la configuracin de los efectos de conversin de hipervnculos para mejorar el aspecto de las pginas, as como el manipular la conexin a las pginas Web. La evaluacin de las habilidades y destrezas, conocimientos y actitudes de esta competencia se har mediante el instrumento de evaluacin lista de cotejo
TINF-04/M2S3/EP3-5
Pgina 104 de 129
COMPETENCIA
VI Crear Vnculos Web.
Introduccin
ntes de subir nuestra pgina Web a un servidor, vamos a crear vnculos para abrir documentos y archivos, tablas, imgenes, sonidos y videos, as como la utilizacin de algunos de los protocolos de Internet. En la competencia Numero 3 Programar en un lenguaje de hipertexto, vimos algunos de estos apartados, programando esta lneas de cdigo, ahora vamos a utilizar el software de diseo para generar pginas Web.
Desarrollo
1. Crear vnculos a otros documentos en Web. 2. Crear vnculos y anclas. 3. Crear la estructura de una URL. 4. Utilizar el protocolo http. 5. Vincular archivos. 6. Utilizar el protocolo mailto. 7. Realizar listas vinculadas. 8. Vincular tablas. 9. Vincular imgenes. 10. Vincular sonidos. 11. Vincular videos. Dentro de las habilidades que vamos a desarrollar en esta competencia, est la creacin de vnculos a documentos y marcas o anclas, la utilizacin de protocolos como el http y el mailto, la vinculacin de tablas, imgenes, sonidos y videos en nuestras pginas Web todo esto un software de diseo.
HABILIDAD
Pgina 105 de 129
EJEMPLO 1
Recuerda que ya hemos realizado vnculos a otros documentos Web es decir a otras pginas Web.
Pgina 106 de 129
EJEMPLO 2
En la competencia anterior manejamos marcas o anclas que nos sirven para navegar dentro de nuestra misma pgina Web a ciertos lugares establecidos.
EJEMPLO 3
Decamos tambin que una URL (Uniform Resource Locator): Es la direccin que se digita en el computador para que ste muestre la pgina Web que se desea ver en INTERNET.
Veamos entonces cual es su estructura.
Pgina 107 de 129
Por qu es importante conocer la estructura del URL? Porque te permite decidir a primera vista si la pgina encontrada puede o no ser de tu inters. Adems te permite encontrar pginas que desaparecen o vnculos desactualizados para lo cual debes ir recortando el URL comenzando desde la parte derecha del mismo hasta la barra inclinada ( / ) y as sucesivamente hasta llegar al servidor.
EJEMPLO 4
El protocolo mailto, nos permite enviar un mail a un direccin de correo mediante el cliente correo. Recuerda que ya lo hicimos en un editor de textos, y que tambin se pude hacer en un software de diseo de pginas Web.
Pgina 108 de 129
EJEMPLO 5
Como ltimo ejemplo de esta competencia vamos a ver ejemplos de vinculacin de listas de archivos, tablas, as como archivos de imagen, sonido y video. Si te das cuenta es la misma estructura de los hipervnculos, solo tenemos que seleccionar el tipo de archivos al cual nos queremos conectar. Vnculo a una imagen.
Pgina 109 de 129
Vnculo a un archivo de audio.
Vnculo a un archivo de video.
Listas Vinculadas
Pgina 110 de 129
Vincular Tablas
Pgina 111 de 129
EJERCICIO 1 Material de Apoyo.- Computadora y software de diseo. Instrucciones para el docente.- Se recomienda ejecutar una demostracin prctica para crear vnculos a otros documentos, vnculos y anclas dentro del mismo documento, utilizar los protocolos y vincular listas, tablas, imgenes, sonidos y videos con formato compatible. Divida el grupo en equipos de trabajo. Gestione la autorizacin con una pequea empresa pblica o privada para que el alumno disee su pgina Web, misma que se le asignar al grupo de alumnos dividido. Instrucciones para el alumno.- Presta atencin al docente en la demostracin prctica; pregunta todas las dudas que tengas.
PRCTICA I
Competencia VI.- Crear hipervnculos. Habilidades.1. Crear vnculos a otros documentos en Web. 2. Crear vnculos y anclas. 3. Crear la estructura de una URL. 4. Utilizar el protocolo http. 5. Vincular archivos. 6. Utilizar el protocolo mailto. 7. Realizar listas vinculadas. 8. Vincular tablas. 9. Vincular imgenes. 10. Vincular sonidos. 11. Vincular videos. Material de Apoyo.- Computadora y software de diseo. 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/EP4-5. Instrucciones para el alumno.1. Inicia la aplicacin de software de diseo. 2. Genera el sitio donde almacenars tus pginas Web. 3. Disea 5 pginas de manera creativa, para la publicidad de tu empresa que te asign el profesor en el ejercicio anterior.
Pgina 112 de 129
4. Utiliza Frames. 5. Una de las pginas tendr como nombre index.html, y en ellas se tendrn los hipervnculos a las otras pginas, las 4 restantes estarn diseadas de acuerdo a lo que ofreces, servicios, comentarios y ofertas que brinda tu empresa. 6. Las pginas tendrn como caractersticas extras: a. Una marquesina. b. Una animacin Flash. c. Texto flash. d. Botones Flash. e. Una tabla donde organices informacin. f. Una lista o numeracin. g. Insercin de imgenes. h. Insercin de un sonido. i. Insercin de un video j. Imagen de sustitucin. k. Enlaces a anclas o hipervnculos. l. Enlace a direcciones Web. m. Enlace a un correo electrnico. n. Descarga de archivos. o. Enlace a un documento .pdf. 7. Prueba y revisa que tu pgina cumpla con todo lo que se te pide. Guarda la carpeta donde se almacen tu sitio Web, en algn medio de informacin. 8. Llama al docente para que te revise la prctica.
Para esta lograr esta competencia se hizo necesario ejecutar una serie de ejercicios y prcticas que permitieran desarrollar las habilidades y destrezas responsablemente para utilizar los protocolos de Internet y las URL, crear vnculos a documentos en la Web, as como archivos de imagen, sonido y video, adems de vincular listas y tablas de la pgina Web. La evaluacin de las habilidades y destrezas, conocimientos y actitudes de esta competencia se har mediante el instrumento de evaluacin lista de cotejo
TINF-04/M2S3/EP4-5
Pgina 113 de 129
COMPETENCIA
7. Almacenar pginas en un servidor Web.
Introduccin
entonces, los ejemplos, ejercicios y prcticas permitirn que al finalizar la competencia tu ests en posibilidad de almacenar pginas en un servidor ya sea gratuito o en su caso dedicado. Asimismo, durante esta parte del curso, dominars claramente las capacidades para el manejo de software de comunicacin va ftp.
ues finalmente ha llegado el momento de publicar nuestro trabajo. Todas las competencias desarrolladas hasta este momento no tendran sentido si nuestras pginas no se publicarn. Para ello
Mostremos al mundo nuestras pginas!!!
Pgina 114 de 129
Desarrollo
1. Manipular un FTP annimo. 2. Manipular un FTP no annimo. 3. Almacenar las pginas Web en un servidor dedicado o gratuito. Al desarrollar este conjunto de habilidades podrs almacenar pginas en un servidor de internet, a travs de programas FTP.
EJEMPLO 1
HABILIDAD
A travs de las capturas de pantalla que a continuacin se te presentan ejemplificaremos el acceso a un servidor de pginas web mediante una aplicacin FTP denominada Ipswitch WS_FTP. Observa con detalle que se trata de un servidor dedicado y que vamos a aprovechar para subir una pgina de ejemplo, en un directorio que previamente nos ha asignado el administrador de este servidor.
(1) El programa FTP en ejecucin
(2) Creando una nueva cuenta en el programa. Esta cuenta ya debe estar dada de alta en el servidor donde se va a almacenar la pgina y regularmente la crea el administrador del mismo.
(3) Nombre para la conexin
(4) Direccin del servidor
Pgina 115 de 129
(2) Datos de la cuenta
(6) Tipo de cuenta
(7) Finalizando la creacin de la conexin
(8) Conectndose al servidor mediante los datos de la conexin
(9) La pgina antes de subir archivos
(10) Los archivos que se van a subir.
(11) Seleccionado el directorio en la PC donde se encuentran los archivo a subir de la pgina
(12) archivos seleccionados y listos para subirlos al servidor. Ntese que incluye la estructura de directorios.
(13) Comenzando a subir los archivos.
(14) Subiendo los archivos. Obsrvese el avance de cada uno.
Pgina 116 de 129
(15) La pgina montada ya en el servidor.
Muchos servidores permiten subir los archivos de las pginas mediante un programa FTP pero tambin mediante un administrador de archivos en una interfaz www.
EJEMPLO 2
La imagen siguiente muestra una interfaz www para subir archivos al mismo servidor que en el ejemplo 1 de esta competencia.
Pgina 117 de 129
EJERCICIO 1 Material de Apoyo.- Gua de aprendizaje, lpiz, borrador. Instrucciones para el alumno.- en cada uno de los siguientes casos completa la lista de caractersticas que se te solicitan. Instrucciones para el docente.- Revisar que el ejercicio del alumno cumpla con lo requerido, adems de tomar en cuenta la limpieza del trabajo, realimentando las posibles contingencias.
SERVIDOR GRATUITO 3 ventajas
SERVIDOR DEDICADO
3 desventajas
Principal caracterstica
EJERCICIO 2 Material de Apoyo.- Equipo de cmputo, pgina web diseada, software FTP. Instrucciones para el alumno.- Localiza alguna de las pginas creadas durante este curso, crea una cuenta en un servidor gratuito. Sube los elementos de tu pgina a la direccin web asignada mediante un programa FTP. Muestra el trabajo al resto del grupo. Instrucciones para el docente.- Antes de realizar este ejercicio es recomendable realizar una demostracin prctica en donde se muestre las tcnicas necesarias para crear una cuenta en un servidor web gratuito y subir las pginas ah. Asmismo, se recomienda revisar que el ejercicio del alumno cumpla con lo requerido, adems de tomar en cuenta la limpieza del trabajo, realimentando las posibles contingencias.
Pgina 118 de 129
EJERCICIO 3 Material de Apoyo.- Equipo de cmputo, pgina web diseada, software FTP, servidor de pginas web. Instrucciones para el alumno.- El docente te proporcionar los datos de una cuenta en un servidor dedicado. Una vez realizado lo anterior, localiza la pgina utilizada en el ejercicio 2 de esta competencia y sbela al servidor mediante software FTP. Instrucciones para el docente.- Se recomienda crear las cuentas en el servidor antes de realizar este ejercicio. En caso de no tener acceso a un servidor dedicado, una alternativa puede ser montar un servidor local y acceder a l va FTP para montar el servidor una buena opcin es utilizar EASYPHP, que proporciona elementos bsicos para tal finalidad casi sin tener que configurar nada. Asimismo, es recomendable realizar una demostracin prctica en donde se muestre las tcnicas necesarias para crear una cuenta en un servidor web dedicado y subir las pginas ah. Se recomienda, finalmente, revisar que el ejercicio del alumno cumpla con lo requerido, adems de tomar en cuenta la limpieza del trabajo, realimentando las posibles contingencias.
PRCTICA 1 Competencia: 7. Almacenar pginas en un servidor Web. Habilidad(es):
1. Manipular un FTP annimo. 2. Manipular un FTP no annimo. 3. Almacenar las pginas Web en un servidor dedicado o gratuito.
Instrucciones para el alumno.- Localiza la pgina creada en la prctica 1 de la competencia No. 6 de este submdulo. Crea una cuenta en un servidor gratuito y sube la pgina ah. Luego el docente te proporcionar una cuenta en un servidor web en donde podrs subir tu pgina por segunda ocasin. Esto es, tendrs tu pgina en un servidor gratuito y un servidor dedicado. Instrucciones para el docente.- Es recomendable crear una cuenta en un servidor dedicado para que el alumno suba su pgina ah. Revisar que la prctica del alumno cumpla con lo requerido, adems de tomar en cuenta la limpieza del trabajo, realimentando las posibles contingencias. Se sugiere el uso de la gua de observacin TINF-04/M2S3/ED3-3 y la lista de cotejo TINF04/M2S3/EP5-5
Pgina 119 de 129
Con los ejemplos, ejercicios y prcticas desarrollados en esta competencia sin duda estars en posibilidad de montar tus pginas en un servidor, ya sea gratuito en su caso dedicado. Es importante mencionar que adems tienes la posibilidad de que tus pginas sean trasladadas al servidor a travs de programas que funcionan con el protocolo FTP. Finalmente, te podemos sealar que para comprobar que efectivamente ya han sido desarrolladas tus habilidades y destrezas, as como los conocimientos y actitudes, se puede recurrir al instrumento de evaluacin gua de observacin TINF-04/M2S3/ED3-3 para medir tus desempeos y a la lista de cotejo TINF04/M2S3/EP5-5 para medir los productos.
Pgina 120 de 129
CONCLUSIONES DE LA GUIA DE APRENDIZAJE

Los ejercicios y prcticas que se han propuesto en esta gua de aprendizaje te permitirn desarrollar las habilidades, destrezas, conocimientos y actitudes necesarias para utilizar los servicios de Internet, manejar los protocolos y lenguajes de Internet, programar en un lenguaje de hipertexto, disear una pgina Web en un editor visual, crear vnculos e hipervnculos y por ltimo almacenar nuestras pginas generadas en un servidor web comercial o gratuito. Para comprobar que has desarrollado la competencia en todos los apartados sealados con anterioridad se utilizarn dos tipos de instrumentos de evaluacin: las guas de observacin para medir tus desempeos y las listas de cotejo para los productos logrados.
Pgina 121 de 129
Fuentes de Informacin
Castellanos Casas, Ricardo y Ferreira Corts, Gonzalo. (2003), Informtica 2. La herramienta del nuevo Mileno. Mxico, DF. Editorial Alfaomega. Castellanos Casas, Ricardo y Ferreira Corts, Gonzalo. (2003), Informtica 3. La herramienta del nuevo Mileno. Mxico, DF. Editorial Alfaomega. Castellanos Casas, Ricardo y Ferrerira Corts, Gonzalo, (2003), Informtica 1. La herramienta del nuevo Mileno. Mxico, DF. Gail, Linda C, (1995), Enciclopedia de Trminos de Microcomputacin, Mxico DF. Editorial Prentice-Hall Hispanoamericana. Gonzlez Trejo, Margarita y otros. (2000), Introduccin a Internet. Coleccin Guas y textos de cmputo. Direccin General de Servicios de Cmputo Acadmico, UNAM. Gonzlez Trejo, Margarita y otros. (2000), Introduccin a Internet. Gua didctica y cuaderno de prcticas. Coleccin Guas y textos de cmputo. Direccin General de Servicios de Cmputo Acadmico, UNAM. Ibarra Delgado, Alma y otros. (2000), Pginas para Internet. Coleccin Guas y textos de cmputo. Direccin General de Servicios de Cmputo Acadmico, UNAM. Ibarra Delgado, Alma y otros. (2000), Pginas para Internet. Gua didctica y cuaderno de prcticas. Coleccin Guas y textos de cmputo. Direccin General de Servicios de Cmputo Acadmico, UNAM. Macromedia. Manual oficial del usuario. Dreamweaver MX. Page, Khristine Annwn. (2004), Dreamweaver MX 2004: Trucos esenciales versin dual. Anaya Multimedia-Anaya Interactiva. Pea de San Antonio, scar. (2001), Dreamweaver 4: administracin de sitios y pginas Web. Ra-Ma, Librera y Editorial Microinformtica Prez, Csar. (2003), Curso prctico multimedia de Dreamweaver MX. Garben.
Pgina 122 de 129
S.A. (2004), Diseo web con HTML y FrontPage XP. Grupo Eidos Talavera Rosales, Alejandro. (2002), Pginas interactivas para Internet. Coleccin Guas y textos de cmputo. Direccin General de Servicios de Cmputo Acadmico, UNAM. www.aulaclic.com www.lawebdelprogramador.com www.forosdelweb.com www.cristalab.com www.nomaster.com www.webestilo.com www.webexperto.com
Pgina 123 de 129
Glosario
ACTIVE X: Lenguaje desarrollado por Microsoft para la elaboracin de aplicaciones exportables a la red y capaces de operar sobre cualquier plataforma a travs, normalmente, de navegadores WWW. ANIMACIN: Una animacin es una secuencia de imgenes, o cuadros, que se visualiza en el tiempo. Cada cuadro vara ligeramente del inmediatamente anterior, creando la ilusin de movimiento cuando los cuadros se ven en sucesin rpida. APLICACIN: Es un programa que realiza una tarea especfica en el ordenador como el tratamiento de textos, el tratamiento de imgenes, descompresin de archivos, etc. APRENDIZAJE: Proceso mediante el cual la experiencia causa un cambio permanente en el conocimiento o en la conducta. ARCHIVO ADJUNTO: Archivos anexados a un correo electrnico, para ser enviados. ARCHIVO: Unidad de informacin almacenada en el disco con un nombre especfico. Tambin se le llama fichero. Puede contener datos en cdigo mquina, necesarios para la ejecucin de un programa, o informacin comn y corriente procesada por el usuario. Los nombres de los archivos no pasan de ocho caracteres. Tienen una extensin consistente en tres caracteres que lo identifican en su tipo o lo relacin con un programa determinado. ATRIBUTOS: Son valores que se asignan a objetos, imgenes, fuentes, etc. AUTODIAGNSTICO: Instrumento para conocer el estado de competencia en el que se encuentra el candidato para la evaluacin de competencia laboral. AVI: Formato de fichero multimedia tipo QuickTime, desarrollado por Microsoft. BASE DE DATOS: Informacin agrupada en registros que a su vez contienen varios campos. BOCETO: Modelo que simula la realidad, construido de manera sencilla. BROWSER: (Navegador): Programa usado para visualizar documentos WWW en Internet. Los ms utilizados en estos momentos son Netscape e Internet Explorer. CAMPO: Datos individuales, un conjunto de campos relacionados integra un registro. Pgina 124 de 129
CAMPOS DE COMBINACIN: Datos utilizados para realizar una combinacin de correspondencia, provienen de una base de datos. CAPAS: Las capas compuestas por varios elementos generados pueden simplificarse y convertirse en una imagen rasterizada plana que puedes editarse con las herramientas de pintura, puedes convertir datos de capas de texto, formas, capas de relleno, capas enlazadas, trazados de recorte de capa, la capa actual o de todas las capas. CELDA: Elemento de una tabla, se forma de la interseccin entre una fila y una columna. CLIC: Se le nombra as a la utilizacin mediante una pulsacin del botn izquierdo del Mouse, que sirve para seleccionar un texto o activar un elemento de la interfaz de usuario, o ubicar el cursor en una ubicacin determinada. COMANDO: En programacin, es una instruccin o sentencia del lenguaje, que est sujeto a su sintaxis. Realiza tareas predefinidas. COMPRESIN/DESCOMPRESIN: Mtodo para cifrar/descifrar seales que permite transmitir (o almacenar) ms informacin de la que, de otro modo, podra aceptar el soporte. COMPRESIN: Es la accin de hacer mas pequeo el tamao de un archivo con el fin de que ocupe menos espacio. CONCATENACIN: Agrupamiento de varios criterios en una funcin campos en uno. varios
CRITERIO DE DESEMPEO: Refiere resultados significativos para alcanzar los previstos en el enunciado del elemento y la calidad de los resultados. CRITERIO DE EVALUACIN: Pautas que permiten valorar el desempeo competente de un participante a partir del criterio de desempeo. DEGRADADOS: Las herramientas de degradado crean una fusin gradual entre varios colores. Puedes seleccionar rellenos de degradado existentes o crear los suyos propios. DESCOMPRESIN: Es la accin de regresar un archivo comprimido a su tamao normal. DESTINATARIOS: Direcciones de correo electrnico a las cuales ser enviado un archivo o correo electrnico.
Pgina 125 de 129
DIAPOSITIVAS: Elemento de Microsoft Power Point, corresponde al rea de trabajo del programa, que puede contener imgenes, sonido, animacin, video, etc. Al conjunto de diapositivas se le conoce como presentacin. DISCO FLEXIBLE: Nombre utilizado para el Disco de 3 pulgadas, o Disquete. DISPOSITIVOS DE ALMACENAMIENTO: Dispositivos electrnicos, magnticos u pticos utilizados para almacenar datos. DOCUMENTO MAESTRO: Es el documento Original que sirve como base para realizar una combinacin de correspondencia. DRIVER: Significa controlador. Es el software adicional necesario para controlar la comunicacin entre el sistema y un cierto dispositivo fsico, tal como un monitor o una impresora. EDICIN DE UN ARCHIVO: Rectificar un texto es, por ejemplo, editarlo. Tambin se aplica en la correccin o modificacin de fotografas mediante programas especiales como Photoshop, Picture Publisher, Photopaint. ESTELA: Rastro visible que deja el puntero al moverse por la pantalla. EXPORTAR: Es el mtodo por medio del cual se guarda un archivo en un formato distinto al que le asigna un programa. EXTENSIN: Es el sufijo que se utiliza para acompaar a los archivos de manera tal que los clasifiquen por su contenido y tipo de aplicacin. FILE: Significa archivo o expediente en ingles. jemplo: FORMATEO: Preparacin fsica de un medio extrable, para borrar la informacin contenida anteriormente o utilizada con el fin de detectar errores en el dispositivo. FORMATO DE ARCHIVO: Patrn o forma que utiliza un programa para almacenar los documentos que produce. Existen formatos de texto, de imgenes, de sonido, etc. Se identifica por la extensin: un punto y una abreviatura del formato. Por e .doc / .gif / .mp3. FPS: Fotogramas por segundo, es la unidad de medida para la velocidad con la que se reproducen los videos y animaciones. GIF: Graphic Interchange Format. Formato de Intercambio Grfico, un formato de archivos grficos popularizado inicialmente por Compuserve.
Pgina 126 de 129
GUIAS: Las guas aparecen como lneas flotantes sobre toda la imagen, pero no se imprimen, puedes mover, eliminar o bloquear una gua para evitar desplazarla de manera accidental. HARDWARE: Todo lo que se puede tocar de un equipo de cmputo, es la materia tangible (teclado, Mouse, disco duro, CPU, etc.) HIPERVNCULO: Acceso directo mediante una palabra o imagen a una hoja de un documento, o a otro archivo en otra ubicacin, muy utilizado para navegar por Internet, por varias pginas en diferentes partes del mundo unidas por hipervnculos. HOJAS ADYACENTES: Trmino utilizado para nombrar a las hojas de Excel que se encuentran una al lado de otra. HOJAS NO ADYACENTES: Trmino utilizado para nombrar a las hojas de Excel que se encuentran separadas una de la otra. IMAGEN: Se denomina as a toda presentacin sin movimiento. INSUMOS: Trmino utilizado para nombrar al material utilizado por un equipo de cmputo, directa o indirectamente (papel, tinta, cintas magnticas discos flexibles, tner, etc.). INTERFAZ DE USUARIO: El modo en que un programa facilita el proceso de comunicacin entre el hombre y el ordenador. Windows, por ejemplo, presenta una interfaz de usuario bastante prctica. INTERFAZ DEL USUARIO: Es el ambiente de trabajo de un sistema operativo de forma tal que resulte fcil y amigable su utilizacin (ventanas, iconos, botones, etc.) INTERFAZ: Conjunto de especificaciones permiten la conexin del ordenador con los perifricos de entrada y salida. JPEG (JOINT PHOTOGRAPHIC EXPERTS GROUP O GRUPO DE EXPERTOS DE ENSAMBLE FOTOGRFICO): Tipo de formato de imagen o compresin de imagen. Est pensado especialmente para imgenes fotogrficas por la calidad que da al comprimir stas. LETRA CAPITAL: Objeto insertado a manera de cuadro de texto, utilizada en el inicio de un prrafo, comnmente de mayor tamao que el resto del texto y de diferente tipo de fuente.
Pgina 127 de 129
LIBERADOR DE ESPACIO: Herramienta del sistema operativo encargada de eliminar archivos temporales, archivos de Internet, archivos contenidos en la papelera de reciclaje, que ocupan un espacio en el disco duro. LIBRO: Se le asigna este nombre al archivo guardado de Excel. MACRO: Pequeo programa elaborado en Visual Basic, para automatizar tareas como insertar tablas, cambiar formato, etc. MANO (Herramienta): Selecciona la herramienta Mano y arrastre para tener una panormica de la imagen. Para usar la herramienta Mano mientras est seleccionada otra herramienta, mantenga pulsada la barra espaciadora mientras arrastra en la imagen. MANTENIMIENTO PREVENTIVO: Realizado al equipo de cmputo con el fin de prevenir que este se dae o se descomponga. MASCARAS: Las mscaras permiten aislar y proteger reas de una imagen conforme se aplican cambios de color, filtros u otros efectos al resto de la imagen. MP3: Tipo de formato de archivos de msica digital comprimida. Es la ltima tecnologa en msica digital. MPEG: Moving Pictures Expert Group. Se trata de un modo estndar de comprimir vdeo e imgenes en movimiento. Multimedia: Sistemas informticos que integran audio, vdeo y datos. OBJETO: Elemento insertado en una hoja de trabajo que tiene propiedades particulares, puede ser una tabla, imagen, video, archivo de sonido, autoforma, etc. PALETAS: Las paletas le ayudan a supervisar y modificar imgenes. Las paletas aparecen por defecto apiladas en grupos. PIXEL: Contraccin de "Picture Element/s". El elemento ms pequeo de la superficie de un monitor. PLANTILLAS: Formatos previamente diseados para la elaboracin de documentos. PNG (PORTABLE NETWORK NETWORK): Grficos portables de red. Formato grfico muy completo especialmente pensado para redes. PUNTERO: Direccin URL incrustada en los datos que especifica su ubicacin en otro registro o archivo. El hipervnculo es un ejemplo de puntero.
Pgina 128 de 129
REGISTROS: Campos agrupados en una sola fila, conteniendo informacin relacionada entre s. REGULADORES: Dispositivo electrnico que regula el voltaje elctrico con el fin de proporcionar una corriente regular a un equipo. RGB (RED, GREEN AND BLUE): Son los tres colores usados para producir la luz visual. Estos tres colores se intercalan dentro de los tubos del monitor permitiendo formar distintas imgenes que luego se visualizan. SCANDISK: Utilera utilizada para verificar un disco duro o disco flexible, con el fin de verificar su integridad y encontrar errores. SOFTWARE: Es la materia intangible, lo que no podemos ver y tocar pero que sabemos que se encuentra ah, como los programas de una computadora. SOFTWARE-PROGRAMA: Conjunto de instrucciones que indican al hardware o partes fsicas lo que debe realizar, para obtener un resultado concreto. Segn sea el software o programa puede clasificase como de propsito especfico (sistemas operativos, lenguajes de programacin, etc.) o propsito general (procesadores de texto, de imgenes, hojas de clculo, etc). TABLA: Esta formada por un conjunto de filas y columnas que a su vez forman Celdas, es utilizada para agrupar en sus celdas datos. USB: Universal Serial Bus. Es un conector estndar para conectar dispositivos externos. Permite una mayor velocidad que otros puertos y permite la conexin "en caliente" (no es necesario apagar el equipo). UTILERAS: Programas utilizados para mejorar el rendimiento de un equipo de cmputo. WAV: Extensin que corresponde al archivo de sonido de Windows Wave. WORLD WIDE WEB (RED MUNDIAL, CONOCIDO TAMBIN COMO: WWW, W3): Sistema de arquitectura cliente/servidor para distribucin y obtencin de informacin en Internet basado en hipertexto o enlaces. Sistema de adquisicin de informacin a travs de pginas web y visualizando estas en un navegador.
Pgina 129 de 129

GM 2 S 3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

GM 2 S 3

Transféré par

Droits d'auteur :

Formats disponibles

Reforma Curricular del Bachillerato Tecnolgico Estructura y Programas de Estudio de la Carrera de Tcnico en Informtica

Coordinador del Componente de Formacin Profesional: NOMBRE Espiridin Licea Prez

COMPETENCIA 1 Utilizar los servicios de Internet.

COMPETENCIA 2 Manejar protocolos y lenguajes de Internet.

COMPETENCIA 3 Programar en un lenguaje hipertexto.

COMPETENCIA 4 Disear una pgina Web en un editor visual.

COMPETENCIA 5 Crear hipervnculos.

COMPETENCIA 6 Crear vnculos Web.

CONOCIMIENTOS Direcciones absolutas relativas Hipervnculos ACTITUDES Orden.

CONOCIMIENTOS Creacin de vnculos Lenguaje html Protocolos de Internet

COMPETENCIA 7 Almacenar pginas en un servidor Web.

Competencias, habilidades y destrezas

I Utilizar los servicios de Internet.

http://www.lawebdelprogramador.com/news/ Pgina 23 de 129

AIM (AOL Instant Messenger)

II Manejar protocolos y lenguajes de Internet.

Microsoft Internet Explorer

EJEMPLO 5 Veamos el acceso a un buscador muy conocido:

III Programar en un lenguaje de hipertexto.

EJEMPLO 3 Qu es una etiqueta?

2. Escribamos la estructura bsica de una pgina Web.

Etiqueta <b> <i> <u> <s> <tt> <big>

Ejemplo CECyTE CECyTE CECyTE CECyTE CECyTE

<small> disminuye el tamao de la fuente

<marquee bgcolor="#FFFFFF" behavior="alternate" direction="down"> VIVA MEXICO </marquee>

<marquee bgcolor="#FFFFFF" direction="up"> VIVA MEXICO </marquee> <br><br>

<marquee bgcolor="#FFFFFF" direction="rigth"> VIVA MEXICO </marquee> <br><br>

<marquee bgcolor="#FFFFFF" direction="right"> VIVA MEXICO </marquee> <br><br>

<marquee bgcolor="#FFFFFF" direction="left"> VIVA MEXICO </marquee> <br><br>

left (de derecha a izquierda). right (de izquierda a derecha).

Carcter < >

Carcter & "

<p align="rigth"> </p>

cellpadding cellspacing border align bgcolor background bordercolor

Ya modificando los atributos de la tabla anterior nos quedara:

Si modificamos nuevamente los atributos de nuestra tabla:

Corel Dra.. Flash Dreamweaver

IV. Disear una pgina Web en un editor visual.

Microsoft Office FrontPage.

Indicamos que no utilizamos ninguna tecnologa Servidor.

Por ltimo nos muestra el resumen de nuestro sitio Web.

Observa esta ventana e investiga cul es su funcionamiento.

Aqu nos muestra el comentario insertado en el ejemplo.

La lnea 10, nos muestra el comentario insertado. EJEMPLO 10

Este es el resultado del cdigo insertado en la pgina Web.

Este es el resultado de un botn activable insertado en la pgina Web.

Si escribes esto en la casilla de direccin URL, el vnculo funciona trabajando en la PC.

Listo aqu tendramos el marcador e hipervnculo insertado. <a href="#hola">CONECTANDO A HOLA</a>

EJEMPLO 3 Veamos el ejemplo en el software de diseo Macromedia Dreamweaver.

Pgina 100 de 129

Pgina 101 de 129

en la demostracin prctica; pregunta todas las dudas que tengas.

Pgina 104 de 129

VI Crear Vnculos Web.

Pgina 105 de 129

Pgina 106 de 129

Veamos entonces cual es su estructura.

Pgina 107 de 129

Pgina 108 de 129

Pgina 109 de 129

Vnculo a un archivo de audio.

Vnculo a un archivo de video.

Pgina 110 de 129