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

Tpico I

Tpico II

11

Tpico III

15

Tpico IV

19

Utilizar los elementos fundamentales del diseo

Manejar los elementos bsicos de un lenguaje utilizable en la creacin

de pginas Web (HTML, DHTML, ASP, Java Script, CSS u otros)

Disear una pgina Web con un software de aplicacin

Publicar pginas web

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