Elaboracin de Pginas Web

Cuadernillo de actividades de aprendizaje

EDUCACIN MEDIA SUPERIOR A DISTANCIA

Con ms educacin sembramos la semilla de un Mxico seguro para ti y tu familia

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Presentacin

Dentro del marco de la Reforma Educativa en la Educacin Bsica y Media Superior, la Direccin General del Bachillerato incorpor en su plan de estudios los principios bsicos de la Reforma integral de la Educacin Media Superior (RIEMS), cuyos propsitos son consolidar la identidad de este nivel educativo en todas sus modalidades y subsistemas que permitan, adems, una educacin pertinente para los estudiantes que les posibiliten establecer una relacin entre la escuela y su entorno, acorde con los contextos social, histrico, cultural y globalizado en el que actualmente vivimos. Bienvenido a este sexto semestre y a la Capacitacin para el Trabajo de Informtica, Modulo II Submdulo III, Elaboracin de pginas web. Como sabes, en la actualidad existe una creciente automatizacin de los procesos de la informacin;el uso de las tecnologas permite que sea ms fcil la bsqueda y sistematizacin de datos. La capacitacin en Informtica proporciona las herramientas necesarias para que adquieras conocimientos y desarrolles habilidades y destrezas, as como una actitud responsable que te lleve a incursionar en el campo laboral de manera exitosa. Asimismo, podrs desarrollar competencias genricas relacionadas con la participacin en los procesos de comunicacin en distintos contextos, la integracin efectiva en los equipos de trabajo y la intervencin desde tu comunidad, pas y el mundo en general. La capacitacin se inicia en el tercer semestre, con el Mdulo I (Elaboracin de Documentos Electrnicos), que te permite desarrollar competencias para elaborar documentos de texto, hojas de clculo y presentaciones grficas mediante el empleo de software, manejo del sistema operativo y las utileras en aplicaciones de oficina, as como preservar el equipo, insumos, informacin y el lugar de trabajo. Este primer mdulo consta de cinco submdulos y tiene una duracin de 272 horas.

Con el Mdulo II,denominado Creacin de Productos Multimedia a travs de Software de diseo, se desarrollarn las siguientes competencias: disear grficos mediante programas de aplicacin, elaborar animaciones interactivas de aplicacin general y especfica en un ambiente multimedia y crear pginas Web. Este mdulo consta de 176 horas y est conformado por tres submdulos. La capacitacin en Informtica tiene un total de 448 horas. Este Cuadernillo de Actividades de Aprendizaje se divide en los siguientes tpicos: En el Tpico I podrs utilizar los elementos fundamentales del diseo para la elaboracin de una pgina web. En el Tpico II manejars los elementos bsicos de un lenguaje utilizable en la creacin de pginas Web (HTML, DHTML, ASP, Java Script, CSS u otros). En el Tpico III disears una pgina web con un software de aplicacin (Dreamweaver). En el Tpico IV aprenders el procedimiento para publicar pginas web. Recuerda que seguimos desarrollando diferentes competencias como la comunicacin, la resolucin de problemas, trabajo en equipo, entre otros; por lo cual se plantean diversas actividades para trabajar de forma individual, en parejas o en equipos, las cuales te permitirn resolver problemas que se presenten en el mbito laboral o educativo.

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

A lo largo del Cuadernillo podrs encontrar sealadas, a travs de vietas, estrategias de organizacin del trabajo o de evaluacin como los siguientes:

Trabajo en pareja Coevaluacin Trabajo en equipo Autoevaluacin Trabajo en grupo Potafolios de evidencia Ideas o sugerencias
Para facilitar su manejo, todos los Cuadernillos de Actividades de Aprendizaje estn estructurados a partir de cuatro secciones: Qu voy a aprender? Se describe el nombre y nmero de Tpico, as como una breve explicacin acerca de lo que aprenders en cada uno. Desarrollando competencias. En esta seccin se describen las actividades de aprendizaje para desarrollar las competencias sealadas en el programa de estudios, para lo cual es necesario tu compromiso y esfuerzo constantes por aprender, ya que se implementan actividades que tendrs que ir realizando a lo largo del curso: en forma individual, en parejas, en equipos o en forma grupal. Dichas actividades van enfocadas a despertar en ti el inters por investigar en diferentes fuentes, para que desarrolles habilidades y destrezas que propicien tu aprendizaje. Qu he aprendido? En esta seccin te presentamos actividades de consolidacin o integracin del tpico que
te permitirn verificar el nivel de desarrollo de las competencias que posees en cada uno.

Quiero aprender ms. En esta seccin se propone la consulta de diversas fuentes de informacin actualizadas,
que son importantes para complementar y consolidar lo aprendido. Es por ello que encontrars varias sugerencias de estos materiales, los cuales sern el medio a travs del cual podrs investigar y descubrir otros asuntos y tpicos por aprender.

Como podrs darte cuenta, acabamos de presentarte un panorama general de: el Mdulo, el Submdulo, el enfoque constructivista y las caractersticas de los Cuadernillos de Actividades de Aprendizaje. Ahora slo falta que t inicies el estudio formal del Submdulo III de la Capacitacin para el Trabajo Elaboracin de pginas web, para lo cual te deseamos:

Mucho xito !

ndice

Utilizar los elementos fundamentales del diseo

Tpico I

Manejar los elementos bsicos de un lenguaje utilizable en la creacin de pginas Web (HTML, DHTML, ASP, Java Script, CSS u otros)

Tpico II

11

Disear una pgina Web con un software de aplicacin

Tpico III

15

Publicar pginas web

Tpico IV

19

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Que voy a aprender ?

Tpico I
Utilizar los elementos fundamentales del diseo
Los elementos grficos son una parte fundamental del diseo en todas sus modalidades, introduciendo en las composiciones informacin visual que complementa en gran medida el mensaje que se desea transmitir, y que a veces es tan importante en el diseo como los contenidos textuales del mismo. Libros, folletos, carteles, revistas, tarjetas y pginas web incluyen elementos grficos en mayor o menor medida, debiendo conocer el diseador los diferentes objetos grficos que puede emplear en cada trabajo, su significado y sus utilidades, pues cada uno de ellos est orientado a unas tareas concretas. Los elementos grficos se usaron inicialmente poco en la web, debido a que el gran peso de los ficheros grficos haca que las pginas tardaran demasiado en descargarse desde el servidor. Con el aumento de los anchos de banda y la aparicin de avanzados algoritmos de compresin de las imgenes, los grficos fueron introducindose cada vez ms en las pginas web, siendo raro en la actualidad encontrar una que no los use en mayor o menor medida. Existen diferentes objetos grficos que podemos usar en nuestros diseos, entre los que podemos citar logotipos, banners, iconos, bullets, fotografas, ilustraciones, entre otros. Cada uno de ellos posee unas caractersticas de diseo y capacidades de comunicacin propias, jugando un papel diferente en la composicin. http://www.desarrolloweb.com/articulos/2063.php (ltima revisin: 2/11/11)

TOPICO UNO
Desarrollando competencias

Recuerda comenzar con la elaboracin de tu glosario. Al final de este Cuadernillo de Actividades de Aprendizaje, encontrars un espacio para incluir las palabras o frases nuevas, con el fin de que puedas consultarlas y te ayuden a lo largo del desarrollo de este submdulo. Como primera actividad, solicitamos que se renan en parejas para investigar cules son las caractersticas de los formatos de las imgenes que pueden incluir en una pgina web, por ejemplo: GIF JPEG BMP TIFF WMF PNG

A continuacin solicitamos, de igual forma que en la actividad anterior, que busquen informacin y caractersticas sobre los siguientes conceptos propios del diseo de una pgina web: Pgina Web Sitio Web HTML Hipervnculo Lenguaje de programacin Editor Servidor Cliente FTP Hosting Dominio ISP URL Applets Frames (marcos) Webmaster Tablas Banner

Elaboren un resumen con sus hallazgos, comprtalos con otra pareja, e intgrenlo en el portafolios de evidencias.

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Formen los equipos tomando en cuenta los distintos niveles de habilidad de tus compaeras y compaeros, ya que probablemente algunos (as) ya cuentan con aprendizajes sobre el funcionamiento y diseo de pginas web, esto enriquecer tus puntos de vista y podrs desarrollar habilidades referentes a la tolerancia y el respeto a la diversidad, entre otros. Como habrs visto, el diseo de una pgina web se ve limitado por diferentes factores, como tipos de imgenes, de animaciones, tamao del servidor, entre otros. Asimismo, existen otros elementos no formales para el diseo de tu pgina: Ten en cuenta que el diseo es la primera relacin entre tu trabajo y el observador. Debes conocer las necesidades de los observadores o consumidores que entrarn a tu pgina. Es conveniente que puedas ponerte en el lugar del observador, para lo cual es importante que tomes en cuenta, el color, tamao y tipo de letra, las imgenes, videos, msica, entre otros.

Fuentes de consulta

BSICA: LEMAY, Laura. HTML 3.0. (1996). Teach yourself Web publishing with HTML 3.0 in a Week, Sams Net.U.S.A.:Prentice Hall. MARTNEZ, . Manual prctico de HTML. Escuela Tcnica Superior de Ingenieros de Telecomunicacin. (1995). Universidad Politcnica de Madrid. Espaa. PRESSMAN, R. S. (1993). Ingeniera del Software, un Enfoque Prctico. Mxico: McGraw-Hill. RUMBAUGH, J. (1996). Modelado y diseo orientado a objetos. Espaa: Prentice Hall.

ELECTRNICA: http://www.aulaclic.es/dreamweaver8(ltima revisin: 2/11/11) http://www.etsit.upm.es/~alvaro/manual/manual.html(ltima revisin: 2/11/11) http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm(ltima revisin: 2/11/11) http://www.programatium.com/dreamweaver.htm(ltima revisin: 2/11/11) http://www.todo-dreamweaver.com/tutorial-dreamweaver/tutoriales-dreamweaver.html(ltima revisin: 2/11/11)

TOPICO UNO
Qu he aprendido?

Solicitamos que se renan en equipos mixtos, con el fin de que juntos diseen, a lo largo de este material, una pgina web para dar a conocer una micro empresa que atienda problemas importantes de su comunidad, como de desarrollo sustentable, difusin de acciones comunitarias, entre otros. Por lo tanto, es importante que tomen en cuenta que trabajarn con las mismas personas en esta misma seccin a lo largo del presente Cuadernillo. Ya que hayan decidido con quines van a trabajar, debern elegir el giro de la empresa que van a crear, y con base en ello, busquen diversas imgenes que se relacionen con su proyecto (pueden crearlas, tomar fotografas, buscarlas en diversas fuentes, entre otros). Integren en el portafolios de evidencias esta informacin. Asimismo, realicen en papel o en otro programa de computadora al que tengan acceso, el diseo de su pgina a grandes rasgos, tomando en cuenta a quin va dirigido, tipo de pgina (informativa, participativa, entre otros), colores que van a usar, tipografa a utilizar, objetivo de la pgina, videos a incluir, audio que desearan utilizar, entre otros. Realicen una investigacin en la red sobre pginas parecidas a las que ustedes quieren desarrollar, observen el diseo utilizado y contrstelo con sus ideas. Utilicen su investigacin y pre-diseo como gua para elaborar su propia pgina. Recuerda que puedes hacer uso de tus aprendizajes de los submdulos anteriores, sobre la utilizacin de software de diseo para el manejo de grficos y la produccin de animaciones con elementos multimedia.

Quiero aprender ms
Te recomendamos algunos sitios electrnicos en los cuales podrs continuar con el aprendizaje de estos tpicos:

http://www.desarrolloweb.com/manuales/47/ (ltima revisin: 2/11/11) http://es.scribd.com/doc/36418810/Apuntes-Paginas-WEB (ltima revisin: 2/11/11) http://www.desarrolloweb.com/articulos/2063.php (ltima revisin: 2/11/11) http://www.un.org/spanish/Depts/dpi/seminario/pdf/principiosfireworks.pdf (ltima revisin: 2/11/11) http://www.inta.gov.ar/activ/comunica/estiloweb.pdf(ltima revisin: 2/11/11) http://www.desarrolloweb.com/manuales/33/(ltima revisin: 2/11/11)

10

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Que voy a aprender ?

Tpico II
Manejar los elementos bsicos de un lenguaje utilizable en la creacin de pginas Web (HTML, DHTML, ASP, Java Script, CSS u otros)
El World Wide Web (WWW) es un sistema que contiene una cantidad de informacin casi infinita. Pero esta ltima debe estar ordenada de alguna forma para que sea posible encontrar lo que se busca. La unidad bsica donde est almacenada esta informacin son las pginas Web. Estas pginas se caracterizan por contener texto, imgenes, animaciones... e incluso sonido y video. Una de las caractersticas ms importantes de las pginas Web es que son hipertexto. Esto quiere decir que las pginas no son elementos aislados, sino que estn unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo) de una pgina para navegar hasta otra pgina. Ser cuestin del programador de la pgina inicial decidir qu palabras o frases sern activas y a dnde nos conducir al pulsar sobre ellas. En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto, sino hipermedia. Los que defienden el cambio se apoyan en que, aunque en sus orgenes el WWW constaba nicamente de texto, en la actualidad es un sistema principalmente grfico y se puede hacer que las zonas activas sean, no slo texto, sino imgenes, videos, botones,... en definitiva cualquier elemento de una pgina. Incluso, el trmino original no ha sido reemplazado todava.
http://mmc.geofisica.unam.mx/LuCAS/Manuales-LuCAS/doc-curso-html/doc-curso-html/x38.html (ltima revisin:2/11/11)

11

TOPICO DOS
Desarrollando competencias

Como primera actividad, solicitamos que se renan en parejas mixtas, y busquen nuevamente en fuentes bibliogrficas o electrnicas,las caractersticas principales del lenguaje HTML que es el ms utilizado para la creacin de pginas web. A continuacin te mostramos la estructura bsica de un documento en HTML, esto te servir como primera actividad para empezar a disear tus pginas. Un documento HTML est limitado siempre por las etiquetas <html> y </html> El documento se compone por dos partes principalmente: El encabezado limitado por: <head> y </head>, que se refiere al lugar donde podemos encontrar el ttulo de nuestro documento. El cuerpo limitado por: <body> y </body>, que se refiere al lugar donde podemos encontrar el texto, imgenes, entre otros contenidos, que forman nuestro documento. Ahora te mostramos un ejemplo de la estructura bsica del documento html: <html> <head> <title>mi primerapgina web</title> </head> <body> <h1>aprendiendo a desarrollar una pgina web</h1> </body> </html> Escribe esta informacin en el bloc de notas ubicado en la carpeta de Accesorios, y guarda el documento con terminacin .html; cierra el archivo y vuelve a abrirlo utilizando el explorador de internet con el que cuentes. Vers que un editor de texto simple es lo que necesitas para crear una pgina web. Como ves, hay rdenes especficas que debes escribir para poder programar de manera correcta. En parejas heterogneas, investiguen en distintas fuentes ms caractersticas del lenguaje HTML, cmo pueden agregar imgenes, cmo pueden hacer ligas, entre otros. Elaboren una hoja donde enlisten todas las rdenes que programaron a travs de este lenguaje. Muestren su pgina a otra pareja; compartan sus resultados en plenaria, as como las dificultades que se les presentaron. Ahora que ya manejas con mayor habilidad el lenguaje HTML, podrs darte cuenta de que las pginas no tienen gran interactividad, es decir, podemos cargar la pgina con toda la informacin que queramos, pero carece de interactividad. Para esto usaremos JavaScript, que es un lenguaje basado en objetos y guiado por eventos. Los programas JavaScript se encuentran en documentos HTML.

12

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Ahora te mostramos un ejemplo de JavaScript: <html> <head> <script type=text/javascript> functiondisplayDate() { document.getElementById(demo).innerHTML=Date(); } </script> </head> <body> <h1>mi primerapgina web</h1> <p id=demo>Esto es un pargrafo.</p> <button type=button onclick=displayDate()>Display Date</button> </body> </html> De manera similar que en el ejercicio anterior, escribe esta informacin en el bloc de notas ubicado en la carpeta de Accesorios, y guarda el documento con terminacin .html; cierra el documento y vuelve a abrirlo, utilizando el explorador de internet con el que cuentes. Vers qu es lo que aparece. En parejas, investiguen en distintas fuentes ms caractersticas del lenguaje JavaScript, cules son los comandos que pueden utilizar, cmo se escriben, entre otros. Elaboren una hoja donde enlisten todas las rdenes que programaron a travs de este lenguaje. Muestren su pgina a otra pareja; compartan sus resultados en plenaria, as como las dificultades que se les presentaron. Realiza los mismos procedimientos de las actividades anteriores con los elementos bsicos de lenguaje ASP y CSS. Finalmente, renan todos elementos bsicos de los lenguajes y plsmenlos en una pgina web. Muestren su pgina a otra pareja, discutan sus resultados en plenaria, con la finalidad de intercambiar experiencias y facilitar el trabajo.

13

TOPICO DOS

Fuentes de consulta
BSICA: LEMAY, Laura. HTML 3.0. (1996). Teach yourself Web publishing with HTML 3.0 in a Week, Sams Net.U.S.A.:Prentice Hall. MARTNEZ, . Manual prctico de HTML. Escuela Tcnica Superior de Ingenieros de Telecomunicacin. (1995). Universidad Politcnica de Madrid. Espaa. PRESSMAN, R. S. (1993). Ingeniera del Software, un Enfoque Prctico. Mxico: McGraw-Hill. RUMBAUGH, J. (1996). Modelado y diseo orientado a objetos. Espaa: Prentice Hall. ELECTRNICA: http://www.aulaclic.es/dreamweaver8(ltima revisin: 2/11/11) http://www.etsit.upm.es/~alvaro/manual/manual.html(ltima revisin: 2/11/11) http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm(ltima revisin: 2/11/11) http://www.programatium.com/dreamweaver.htm(ltima revisin: 2/11/11)

Qu he aprendido?

De acuerdo con la micro empresa de su inters, debern redactar un documento sobre el proyecto de su eleccin; ya que con base en esta informacin, ser necesario que retomen los aprendizajes de este tpico (HTML, JavaScript, ASP, CSS, entre otros) y planeen el diseo de su pgina. Ser importante que comiencen a experimentar con la informacin que contendr el sitio. Cuando cuenten con el archivo, guarden este ltimo, ya que debern mostrarlo ante el grupo. Evaluarn el trabajo realizado con una lista de cotejo, que deber elaborar todo el grupo con base en los desempeos que esperan lograr.

Quiero aprender ms
Te recomendamos algunos sitios electrnicos en los cuales podrs continuar con el aprendizaje de estos tpicos:
http://www.adelat.org/media/docum/nuke_publico/01impr.pdf (ltima revisin: 2/11/11) http://aprendeenlinea.udea.edu.co/lms/ova/course/view.php?id=4 (ltima revisin: 2/11/11) http://www.tinkuy.info/recursos/sites/default/files/recursos/Manual%20de%20Dreamweawer.PDF (ltima revisin: 2/11/11) http://exa.unne.edu.ar/depar/areas/informatica/SistemasOperativos/TFLino.pdf (ltima revisin: 2/11/11) http://www.comocreartuweb.com/curso-de-html/curso-html-introducion.html(ltima revisin: 2/11/11) http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf(ltima revisin: 2/11/11)

14

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Que voy a aprender ?

Tpico III
Disear una pgina Web con un software de aplicacin
Elementos de una pgina web Texto. El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene instaladas (a veces se utiliza una tecnologa de fuentes incrustadas, con lo que vemos en el monitor una fuente que realmente no poseemos, pero es poco frecuente.) El texto editable puede marcarse con el ratn o el teclado y copiarse a otra aplicacin, como el bloc de notas (muchos de los elementos textuales de las pginas, en especial los ttulos, botones de navegacin, entre otros; son realmente grficos, y su texto no es editable). Imgenes. Son ficheros enlazados desde el fichero de la pgina propiamente dicho. Se puede hablar de tres formatos casi exclusivamente: GIF, JPG y PNG. Audio, generalmente en MIDI, WAV y MP3. Adobe Flash. Adobe Shockwave. Grficas Vectoriales (SVG - Scalable Vector Graphics). Hipervnculos, Vnculos y Marcadores. La pgina web tambin puede traer contenido que es interpretado de forma diferente, dependiendo del navegador y generalmente no es mostrado al usuario final. Estos elementos incluyen, pero no exclusivamente: Scripts, generalmente Java Script. Meta tags. Hojas de Estilo (CSS - Cascading Style Sheets). Plantillas de diseo web http://www.mitecnologico.com/Main/PaginaWebConceptoYElementos(ltima revisin: 2/11/11) 15

TOPICO TRES
Desarrollando competencias

En esta seccin aprenders a utilizar el software de aplicacin llamado Dreamweaver, que es uno de los ms utilizados en el desarrollo de pginas web. Como la mayora de los programas desarrollados para Windows, la estructura es por ventanas, y se parece a otros software vistos por ti, como el Excel, Word o Flash. Puedes encontrar barras de diferentes tipos, como la barra de nombre, de men, de grupos, entre otros, en donde se encuentran las funciones. Primero es necesario que te familiarices con el ambiente con el cual vas a trabajar, para esto es importante que sepas cules son las funciones principales del software. En la pantalla inicial se encuentran varios elementos, como el panel de objetos, el selector de etiquetas, el inspector de propiedades, la barra del lanzador, la ventana del documento, y las barras ya mencionadas.

Es posible que trabajes con otra versin de Dreamweaver, sin embargo, las funciones bsicas son prcticamente las mismas.

16

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Ahora, formen parejas nuevamente, procuren reunirse con personas con las que no hayan trabajado anteriormente, para realizar un resumen en el cual describan la funcin de cada uno de los elementos siguientes: La barra de ttulo La barra de mens La barra de herramientas estndar La barra de herramientas de documento La barra de estado Los paneles e inspectores El inspector de Propiedades La barra de herramientas Insertar o panel de objetos Asimismo, debern investigar cules son y para qu sirven las diferentes vistas: cdigo, diseo y combinada. Realicen un resumen. Ahora empezaremos a disear la pgina. Abran el programa Dreamweaver, seleccionen abrir un documento nuevo y seleccionen la categora Pgina bsica, HTML. Ahora introduzcan algn ttulo seguido de un texto corto y escriban la direccin de otra pgina al final. Ahora abran el men de modificar y elige la opcin de propiedades de la pgina. Ah podrn modificar el color del texto, el color de fondo, una imagen y los mrgenes. Explora todas las opciones del men modificando el contenido de tu pgina. Recuerda grabar tu archivo en algn dispositivo USB, CD, o incluso en el disco duro. Ahora que ya conoces bsicamente cmo funciona el software seguiremos con otros ejercicios. Tengan en cuenta que un sitio web es un conjunto de archivos dispuestos y relacionados entre s. El ejercicio de planificacin y diseo que realizaron en el tpico I ser importante para crear las pginas que va a contener. Primero necesitan crear una carpeta en el disco local. Los documentos HTML se crean en esta carpeta, y las imgenes y dems objetos grficos deben estar en nuevas carpetas dentro de sta. Recuerda mantener una organizacin adecuada. A esto se le conoce como sitio local. Tengan en cuenta que tendrn que copiar los archivos para poder verse en un sitio remoto, es decir, en un sitio de la red. Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio en Dreamweaver. Dirjanse al men Sitio, a la opcin Administrar sitios. Recuerden que a travs del panel Archivos, pestaa Archivos, se puede acceder a cada uno de los sitios creados y a la opcin Administrar sitio. En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad. Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la que definir las caractersticas del sitio. http://www.aulaclic.es/dreamweaver8/t_3_1.htm 17

TOPICO TRES
Ahora, debern investigar en parejas cmo se desarrollan y elaboran los siguientes puntos: Crear hiperenlaces Insertar imgenes Modificar tablas Configurar marcos Insertar elementos de formulario Insertar elementos multimedia Trabajar con plantillas Compartan sus resultados en plenaria, as como las dificultades encontradas. Evalen la participacin utilizando un registro anecdtico.

BSICA: LEMAY, Laura. HTML 3.0. (1996). Teach yourself Web publishing with HTML 3.0 in a Week, Sams Net.U.S.A.:Prentice Hall. MARTNEZ, . Manual prctico de HTML. Escuela Tcnica Superior de Ingenieros de Telecomunicacin. (1995). Universidad Politcnica de Madrid. Espaa. PRESSMAN, R. S. (1993). Ingeniera del Software, un Enfoque Prctico. Mxico: McGraw-Hill. RUMBAUGH, J. (1996). Modelado y diseo orientado a objetos. Espaa: Prentice Hall. ELECTRNICA: Fuentes de consulta http://www.aulaclic.es/dreamweaver8(ltima revisin: 2/11/11) http://www.etsit.upm.es/~alvaro/manual/manual.html(ltima revisin: 2/11/11) http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm(ltima revisin: 2/11/11) http://www.programatium.com/dreamweaver.htm(ltima revisin: 2/11/11) http://www.todo-dreamweaver.com/tutorial-dreamweaver/tutoriales-dreamweaver.html(ltima revisin: 2/11/11)

Qu he aprendido?
Ahora, solicitamos que con lo que hasta ahora han elaborado sobre su proyecto de micro empresa, empleen el software Dreamweaver para comenzar a desarrollar la pgina web, pueden jugar incluso con los textos, insertar imgenes y utilizar las diversas herramientas para decidir cmo es ms atractiva la pgina. Muestren ante el resto del grupo su proyecto y evalen este ltimo con una lista de cotejo.

Quiero aprender ms
Te recomendamos algunos sitios electrnicos en los cuales podrs continuar con el aprendizaje de estos tpicos:
http://www.aula21.net/Wqfacil/ejemplos/webtic.htm (ltima revisin: 2/11/11) http://iscseleny.webcindario.com/modulo2.html (ltima revisin: 2/11/11) http://www.apple.com/mx/ilife/iweb/ (ltima revisin: 2/11/11) http://www.basekit.com.mx/?gclid=CJrfiLavkqwCFRBdhwodUTxLoQ (ltima revisin: 2/11/11) http://www.aulafacil.com/AulaDream/Dream/temario.htm(ltima revisin: 2/11/11)

18

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Que voy a aprender ?

Tpico IV
Publicar pginas Web
Para que la pgina pueda verse, lo primero que debemos hacer es colocarla en un servidor de Internet, que a fin de cuantas no es ms que otro ordenador con caractersticas especiales. Pues bien, publicar una pgina no es ni ms ni menos que eso, colocarla en otro ordenador, que es el servidor. Ahora viene la pregunta, y dnde estn los servidores? Eso es muy sencillo, estn por todas partes en la red, unos ofrecen hosting (espacio para publicar tu web) gratuito, mientras que otros lo venden. Obviamente el que se compra es mucho mejor que el que obtienes gratuitamente. Y todava hay ms, cuando ya tienes tu pgina publicada, bajo qu nombre aparece tu pgina en la red?, eso es lo que se llama URL. Las URLs pueden tomar diversas formas: dominios, subdominios y carpetas web. Veamos un ejemplo de cada uno:

Cada una de estas tres formas de conseguir una URL tiene sus ventajas, no obstante est claro que la mejor opcin de todas es el dominio. No obstante,ya est siendo muy complicado conseguir un buen dominio, puesto que hay empresas que compran los dominios libres de valor comercial para revenderlos. Las otras formas de conseguir URLs de calidad es la relacionada con los subdominios y las carpetas. Lgicamente las carpetas han de ser primarias y mejor si dependen de un dominio que de un subdominio. De hecho, los mejores espacios web gratuitos (en cuanto a URL) estn ofreciendo URLs como carpetas secundarias bajo subdominio. De esta manera las URL se hacen demasiado extensas, un ejemplo de URL de este tipo podra ser: http://subdominio.dominio.com/web_gratis/mi_web 19

TOPICO CUATRO
Adems, los espacios gratuitos incluyen publicidad y su funcionamiento no es del todo homogneo ni constante. Dado que con los subdominios y las carpetas Web se dispone de una gran cantidad de nombres disponibles, sta puede ser una buena opcin para conseguir ese nombre que necesitamos. Tambin es importante tener en cuenta que si en otro momento conseguimos un dominio que se ajuste a nuestras necesidades podremos redireccionarlo a la direccin que ya tenemos y de esta forma podremos acceder a nuestra web desde dos direcciones distintas. Este portal, uterra.com ofrece carpetas web primarias, a las que se puede acceder desde un dominio cualquiera si se hace un redireccionamiento. De la misma manera se puede direccionar una carpeta a un dominio. Hechas estas aclaraciones vamos al grano de la cuestin sobre cmo publicar un sitio web. Aclararemos que la mayora de los servidores hacen la publicacin mediante protocolo de transferencia de archivos FTP, mientras que otros mediante HTTP (protocolo de transferencia de hipertexto). Dado que el primero es el ms comn, slo hablaremos de ste. La publicacin mediante FTP es tremendamente sencilla. Debido a que el sitio ftp no es ms que una carpeta, lo que hay que hacer es copiar y pegar de la carpeta de tu ordenador a la carpeta del sitio ftp. Como aadidura, slo comentaremos que en algunos sitios ftp hay que crear una capeta nombrada como html, mientras que en otros no. Asimismo, la publicacin se hace ms fiable si en vez de copiar y pegar se emplea un programa ftp. Para publicar una pgina Web precisars de una direccin FTP a la que acceders desde tu navegador o desde un programa FTP, una cuenta FTP, y una contrasea. Estas tendrn la forma:

http://www.uterra.com/crea_tu_web/publicacion_web.htm(ltima revisin: 2/11/11)

Desarrollando competencias
En esta ocasin configuraremos un sitio remoto, esto con el fin de que Dreamweaver se comunique de forma directa con el servidor de internet, esto permitir que trabajes al mismo tiempo con los archivos en tu computadora, as como en el sitio remoto, en internet. Ahora, solicitamos que en equipos heterogneos lleven a cabo una investigacin documental sobre FTP y comenten con otro pequeo grupo la informacin recabada. Evalen la participacin con un registro anecdtico. Formen parejas mixtas para que en el laboratorio de informtica, configuren FTP desde Dreamweaver. Solicitamos que realicen lo siguiente: dirjanse a Administrador de Sitios, y den click sobre Sitios de Dreamweaver. Posteriormente, para hacer referencia a la configuracin FTP, debern proporcionar la informacin que solicitan. 20

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Posteriormente, vern que tambin pueden elegir el lenguaje con el cul van a programar la pgina web (si ese es el caso).

Tomen en cuenta que la recomendacin es que modifiquen y actualicen los archivos en la computadora. Tambin es importante que seleccionen la ruta en la cual crearn el directorio para almacenar los archivos. A continuacin, proporcionen los datos que se solicitan para dar de alta el almacenamiento: Host: ftp.nombredeldominio.com Carpeta: public_html(Linux) wwwroot (windows).Es en donde se subir el contenido que se mostrar a travs de la web. Conexin: El nombre que tendr el usuario para ingresar a travs de FTP. Cuando se requiera establecer la conexin mediante otro puerto, es recomendable configurar el cliente FTP en pasivo. Algo tambin importante en este caso, es que se puede proteger a los archivos para que no se puedan editar de manera paralela, utilicen esta aplicacin siempre, con el fin de que los cambios que se generen en el sitio, sea debido a una decisin conjunta, de equipo. Otra opcin que deben considerar es la siguiente: Cargar archivos en el servidor automticamente al guardar, ya que permitir que una vez que se guarden los archivos, Dreaweaver los subir, y esto les permitir ir mejorando poco a poco la pgina. Sin embargo, si cometen errores, no podrn recuperar la versin anterior, por ello deben ser cuidadosos. Investiguen qu otras ventajas y desventajas tiene. Para terminar con esta seccin, debern mostrar ante el grupo el trabajo que realizaron, y evalen ste con una lista de cotejo. Es importante que el instrumento contemple los desempeos esperados.

Fuentes de consulta
BSICA: LEMAY, Laura. HTML 3.0. (1996). Teach yourself Web publishing with HTML 3.0 in a Week, Sams Net.U.S.A.:Prentice Hall. MARTNEZ, . Manual prctico de HTML. Escuela Tcnica Superior de Ingenieros de Telecomunicacin. (1995). Universidad Politcnica de Madrid. Espaa. PRESSMAN, R. S. (1993). Ingeniera del Software, un Enfoque Prctico. Mxico: McGraw-Hill. RUMBAUGH, J. (1996). Modelado y diseo orientado a objetos. Espaa: Prentice Hall. ELECTRNICA: http://www.aulaclic.es/dreamweaver8(ltima revisin: 2/11/11) http://www.etsit.upm.es/~alvaro/manual/manual.html(ltima revisin: 2/11/11) http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm(ltima revisin: 2/11/11) http://www.programatium.com/dreamweaver.htm(ltima revisin: 2/11/11) http://www.todo-dreamweaver.com/tutorial-dreamweaver/tutoriales-dreamweaver.html(ltima revisin: 2/11/11)

21

TOPICO CUATRO
Qu he aprendido?

Finalmente, es momento de mostrar el sitio que crearon a los dems, con el fin de que puedan conocer su micro empresa. Debern publicar su pgina web con la herramienta de su preferencia. Inviten a la comunidad educativa a visitarlos, ya que ser importante que reciban retroalimentaciones por parte de ellos. Para obtener la opinin de los dems, ser necesario incluir en algn espacio de la pgina, una opcin en la que soliciten esta informacin. Cuando cuenten con los resultados, comenten en plenaria y retroalimenten. Es importante mencionar los aspectos positivos y de mejora. Recuerda escuchar las exposiciones de los dems, as como esperar tu turno para hablar y respetar las opiniones.

Quiero aprender ms

Ahora que has terminado este bloque, te recomendamos los siguientes sitios, en los cuales puedes continuar aprendiendo sobre los tpicos que has estudiado:
http://www.leccionweb.org/leccion5.html (ltima revisin: 2/11/11) http://www.desarrolloweb.com/manuales/publicar-webs-internet.html (ltima revisin: 2/11/11) http://www.youtube.com/watch?v=cOu-_l3aNv0 (ltima revisin: 2/11/11) http://www.luiskano.net/blog/2011/06/13/crea-personaliza-y-publica-tu-sitio-web-con-microsoft-webmatrix/ (ltima revisin: 2/11/11)

22

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Anexos

23

ANEXOS
Portafolio de evidencias El portafolio de evidencias es un sistema de evaluacin que comprende la compilacin de productos elaborados por el estudiantado que dan cuenta de su proceso de aprendizaje. Por lo anterior, no se trata de una recopilacin de todos los trabajos elaborados, sino de aquellos que se consideran significativos y permitan la reflexin en el alumnado. A continuacin se presentan las fases para operar el portafolio de evidencias y las instrucciones para la seleccin de evidencias. Fases para operar el portafolio de evidencias. 1. Definir y comunicar al estudiantado el propsito del portafolio de evidencias con base en los objetos de aprendizaje, competencias a desarrollar, desempeos esperados, entre otros elementos, as como el periodo de compilacin de los productos (por bloque, bimestre, semestre). 2. Definir y comunicar los criterios de seleccin de evidencias promoviendo en el alumnado el anlisis y examen de su propio trabajo. 3. Definir la forma de monitoreo y retroalimentacin del personal docente al estudiantado sobre el portafolio de evidencias. Instrucciones de seleccin de evidencias. 1. Las evidencias que se incluyan pueden ser de lo ms variado, como evidencias escritas, audiovisuales, artsticas, entre otras. Todas las evidencias son elaboradas por el estudiantado. 2. Las evidencias deben dar cuenta de un proceso de aprendizaje y permitir la reflexin del mismo. 3. El estudiante tiene que involucrarse en la seleccin de evidencias que conformarn el portafolio, buscando que stas sirvan para cumplir el propsito del portafolio en cantidad, calidad y ordenacin de las mismas.

24

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Escala de clasificacin Como seala el documento de Lineamientos de Evaluacin del Aprendizaje (DGB, 2011), la escala de clasificacin sirve para identificar, adems de la presencia de determinado atributo, la frecuencia en que ste se presenta. Escala de clasificacin para evaluar una exposicin.

Para el clculo y asignacin de niveles de desempeo (tales como deficiente, regular, bueno, excelente, entre otros), una vez determinados los desempeos y la frecuencia con que se presentan en la exposicin de la cosmovisin de una sociedad antigua, contrastada con distintas perspectivas actuales, as como el uso de resmenes descriptivos vase Lineamientos de Evaluacin del Aprendizaje, pgina 63-65. 25

ANEXOS
Tabla de cotejo En comparacin con otros instrumentos, las tablas de cotejo presentan menos complejidad. Su objetivo es determinar la presencia de un desempeo y para ello se requiere identificar las categoras a evaluar y los desempeos que conforman a cada una de ellas. Para valorar su presencia, es suficiente con colocar una lnea para cada desempeo y escribir sobre ella una marca para identificar su presencia.1 Recuerda que t en compaa de tus compaeros y compaeras elaborarn sus propias listas de cotejo. A continuacin te presentamos una serie de ejemplos con distintos diseos y tpicos a evaluar que te ayudarn como muestra para desarrollar tus propias listas. Lista de cotejo para evaluar una exposicin.

1 Lineamientos de evaluacin del aprendizaje, p. 58. En http://www.dgb.sep.gob.mx/portada/lineamientos-eval-aprendizaje.pdf Consultado el 29 de noviembre de 2011. 26

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

Para el clculo y asignacin de niveles de desempeo (tales como deficiente, regular, bueno, excelente, entre otros), una vez determinados los desempeos presentes en la sntesis de la investigacin sobre los conceptos de modernidad y posmodernidad, as como el uso de resmenes descriptivos. (Vase Lineamientos de Evaluacin del Aprendizaje, pginas 61-63 http://www.dgb.sep.gob.mx/portada/lineamientos-eval-aprendizaje.pdf).

Ejemplo de lista de cotejo para evaluar un organizador grfico

27

ANEXOS
Rbrica2 Las rbricas son instrumentos que permiten describir el grado de desempeo que muestra una persona en el desarrollo de una actividad o problema. Segn Daz Barriga (2005) las rbricas son guas o escalas de evaluacin donde se establecen niveles progresivos de dominio o pericia relativos al desempeo que una persona muestra respecto de un proceso o produccin determinada. Tambin es posible decir que las rbricas integran un amplio rango de criterios que cualifican de modo progresivo el trnsito de un desempeo incipiente o novato al grado del experto (Martnez-Rojas, 2008). A continuacin te mostramos algunos ejemplos de rbrica: Rbrica para evaluar exposicin de cartel3

2 Lineamientos de evaluacin del aprendizaje, p. 62. En http://www.dgb.sep.gob.mx/portada/lineamientos-eval-aprendizaje. pdfConsultado el 22 de noviembre de 2011. 3 Basado en el original. RBRICAS DE LOS PRODUCTOS: (ACTIVIDAD 7) ME ORGANIZO, COMUNICO E INFORMO.http://www.cneq.unam.mx/
programas/actuales/especial_maest/1_uas/portafolio/04_herbolaria/documents/RUBRICASDELAACTIV7.pdf Consultado el 20 de noviembre de 2011.

28

Cuadernillo de actividades de aprendizaje / Elaboracin de pginas web

REGISTRO ANECDTICO Es una descripcin acumulativa de ejemplos observados por los profesores. Proporciona un conjunto de hechos evidentes relacionados con hbitos, ideas y personalidad del alumnado.

Gua de observacin La gua de observacin es un instrumento que recolecta informacin, y es muy parecido a la lista de cotejo, sin embargo la gua da mayor informacin sobre el proceso de la actividad y no slo de los desempeos finales.

29