Elaboración de Paginas Web PDF

Elaboración de Páginas Web
Cuadernillo de actividades de aprendizaje

EDUCACIÓN MEDIA SUPERIOR A DISTANCIA
Con más educación sembramos la semilla de un México seguro para ti y tu familia

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web
Presentación
Dentro del marco de la Reforma Educativa en la Educación Básica y Media Superior, la Dirección General del
Bachillerato incorporó en su plan de estudios los principios básicos de la Reforma integral de la Educación Media
Superior (RIEMS), cuyos propósitos son consolidar la identidad de este nivel educativo en todas sus modalidades y
subsistemas que permitan, además, una educación pertinente para los estudiantes que les posibiliten establecer una
relación entre la escuela y su entorno, acorde con los contextos social, histórico, cultural y globalizado en el que
actualmente vivimos.
Bienvenido a este sexto semestre y a la Capacitación para el Trabajo de Informática, Modulo II Submódulo III,
Elaboración de páginas web. Como sabes, en la actualidad existe una creciente automatización de los procesos
de la información;el uso de las tecnologías permite que sea más fácil la búsqueda y sistematización de datos. La
capacitación en Informática 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, podrás desarrollar competencias genéricas relacionadas con la participación en los procesos de
comunicación en distintos contextos, la integración efectiva en los equipos de trabajo y la intervención desde tu
comunidad, país y el mundo en general.
La capacitación se inicia en el tercer semestre, con el Módulo I (Elaboración de Documentos Electrónicos), que te
permite desarrollar competencias para elaborar documentos de texto, hojas de cálculo y presentaciones gráficas
mediante el empleo de software, manejo del sistema operativo y las utilerías en aplicaciones de oficina, así como
preservar el equipo, insumos, información y el lugar de trabajo. Este primer módulo consta de cinco submódulos y
tiene una duración de 272 horas.
Con el Módulo II,denominado Creación de Productos Multimedia a través de Software de diseño, se desarrollarán las
siguientes competencias: diseñar gráficos mediante programas de aplicación, elaborar animaciones interactivas de
aplicación general y específica en un ambiente multimedia y crear páginas Web. Este módulo consta de 176 horas y
está conformado por tres submódulos. La capacitación en Informática tiene un total de 448 horas.
Este Cuadernillo de Actividades de Aprendizaje se divide en los siguientes tópicos:
En el Tópico I podrás utilizar los elementos fundamentales del diseño para la elaboración de una página web.
En el Tópico II manejarás los elementos básicos de un lenguaje utilizable en la creación de páginas Web (HTML,
DHTML, ASP, Java Script, CSS u otros).
En el Tópico III diseñarás una página web con un software de aplicación (Dreamweaver).
En el Tópico IV aprenderás el procedimiento para publicar páginas web.
Recuerda que seguimos desarrollando diferentes competencias como la comunicación, la resolución 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 permitirán resolver problemas que se presenten en el ámbito laboral o educativo.
A lo largo del Cuadernillo podrás encontrar señaladas, a través de viñetas, estrategias de organización del trabajo o
de evaluación como los siguientes:
Trabajo en pareja
Coevaluación
Trabajo en equipo
Autoevaluación
Trabajo en grupo
Potafolios de evidencia
Ideas o sugerencias
Para facilitar su manejo, todos los Cuadernillos de Actividades de Aprendizaje están estructurados a partir de cuatro
secciones: ¿Qué voy a aprender? Se describe el nombre y número de Tópico, así como una breve explicación
acerca de lo que aprenderás en cada uno.
Desarrollando competencias. En esta sección se describen las actividades de aprendizaje para desarrollar las
competencias señaladas en el programa de estudios, para lo cual es necesario tu compromiso y esfuerzo constantes
por aprender, ya que se implementan actividades que tendrás 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 interés
por investigar en diferentes fuentes, para que desarrolles habilidades y destrezas que propicien tu aprendizaje.
¿Qué he aprendido? En esta sección te presentamos actividades de consolidación o integración del tópico que
te permitirán verificar el nivel de desarrollo de las competencias que posees en cada uno.
Quiero aprender más. En esta sección se propone la consulta de diversas fuentes de información actualizadas,
que son importantes para complementar y consolidar lo aprendido. Es por ello que encontrarás varias sugerencias
de estos materiales, los cuales serán el medio a través del cual podrás investigar y descubrir otros asuntos y
tópicos por aprender.
Como podrás darte cuenta, acabamos de presentarte un panorama general de: el Módulo, el Submódulo, el
enfoque constructivista y las características de los Cuadernillos de Actividades de Aprendizaje. Ahora sólo falta
que tú inicies el estudio formal del Submódulo III de la Capacitación para el Trabajo Elaboración de páginas web,
para lo cual te deseamos:
¡ Mucho Éxito !
Índice

Tópico I 7
Utilizar los elementos fundamentales del diseño
Tópico II 11
Manejar los elementos básicos de un lenguaje utilizable en la creación
de páginas Web (HTML, DHTML, ASP, Java Script, CSS u otros)
Tópico III 15
Diseñar una página Web con un software de aplicación
Tópico IV 19
Publicar páginas web
¿ Que voy a aprender ?
Tópico I
Utilizar los elementos fundamentales del diseño
Los elementos gráficos son una parte fundamental del diseño en todas sus modalidades,
introduciendo en las composiciones información visual que complementa en gran medida
el mensaje que se desea transmitir, y que a veces es tan importante en el diseño como los
contenidos textuales del mismo.
Libros, folletos, carteles, revistas, tarjetas y páginas web incluyen elementos gráficos en
mayor o menor medida, debiendo conocer el diseñador los diferentes objetos gráficos que
puede emplear en cada trabajo, su significado y sus utilidades, pues cada uno de ellos está
orientado a unas tareas concretas.
Los elementos gráficos se usaron inicialmente poco en la web, debido a que el gran peso
de los ficheros gráficos hacía que las páginas tardaran demasiado en descargarse desde el
servidor. Con el aumento de los anchos de banda y la aparición de avanzados algoritmos
de compresión de las imágenes, los gráficos fueron introduciéndose cada vez más en las
páginas web, siendo raro en la actualidad encontrar una que no los use en mayor o menor
medida.
Existen diferentes objetos gráficos que podemos usar en nuestros diseños, entre los que
podemos citar logotipos, banners, iconos, bullets, fotografías, ilustraciones, entre otros.
Cada uno de ellos posee unas características de diseño y capacidades de comunicación
propias, jugando un papel diferente en la composición.
http://www.desarrolloweb.com/articulos/2063.php (última revisión: 2/11/11)
7
TOPICO UNO
Desarrollando competencias
Recuerda comenzar con la elaboración de tu glosario. Al final de este Cuadernillo de Actividades de Aprendizaje,
encontrarás 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 submódulo.
Como primera actividad, solicitamos que se reúnan en parejas para investigar cuáles son las
características de los formatos de las imágenes que pueden incluir en una página web, por
ejemplo:
⋅ GIF
⋅ JPEG
⋅ BMP
⋅ TIFF
⋅ WMF
⋅ PNG
A continuación solicitamos, de igual forma que en la actividad anterior, que busquen información y características
sobre los siguientes conceptos propios del diseño de una página web:
⋅ Página Web
⋅ Sitio Web
⋅ HTML
⋅ Hipervínculo
⋅ Lenguaje de programación
⋅ Editor
⋅ Servidor
⋅ Cliente FTP
⋅ Hosting
⋅ Dominio
⋅ ISP
⋅ URL
⋅ Applets
⋅ Frames (marcos)
⋅ Webmaster
⋅ Tablas
⋅ Banner
Elaboren un resumen con sus hallazgos, compártalos con otra pareja, e intégrenlo en el portafolios de evidencias.
8
Formen los equipos tomando en cuenta los distintos niveles de habilidad de tus compañeras y compañeros, ya
que probablemente algunos (as) ya cuentan con aprendizajes sobre el funcionamiento y diseño de páginas web,
esto enriquecerá tus puntos de vista y podrás desarrollar habilidades referentes a la tolerancia y el respeto a la
diversidad, entre otros.
Como habrás visto, el diseño de una página web se ve limitado por diferentes factores, como tipos de imágenes, de
animaciones, tamaño del servidor, entre otros. Asimismo, existen otros elementos no formales para el diseño de tu
página:
⋅ Ten en cuenta que el diseño es la primera relación entre tu trabajo y el observador.

⋅ Debes conocer las necesidades de los observadores o consumidores que entrarán a tu página.
⋅ Es conveniente que puedas ponerte en el lugar del observador, para lo cual es importante que tomes en
cuenta, el color, tamaño y tipo de letra, las imágenes, videos, música, entre otros.
Fuentes de consulta
BÁSICA:
LEMAY, Laura. HTML 3.0. (1996). Teach yourself Web publishing with HTML 3.0 in a Week, Sams Net.U.S.A.:Prentice Hall.
MARTÍNEZ, Á. Manual práctico de HTML. Escuela Técnica Superior de Ingenieros de Telecomunicación. (1995). Universidad Politécnica de
Madrid. España.
PRESSMAN, R. S. (1993). Ingeniería del Software, un Enfoque Práctico. México: McGraw-Hill.
RUMBAUGH, J. (1996). Modelado y diseño orientado a objetos. España: Prentice Hall.
ELECTRÓNICA:
http://www.aulaclic.es/dreamweaver8(última revisión: 2/11/11)

http://www.etsit.upm.es/~alvaro/manual/manual.html(última revisión: 2/11/11)
http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm(última revisión: 2/11/11)
http://www.programatium.com/dreamweaver.htm(última revisión: 2/11/11)
http://www.todo-dreamweaver.com/tutorial-dreamweaver/tutoriales-dreamweaver.html(última revisión: 2/11/11)
9
TOPICO UNO
¿Qué he aprendido?
Solicitamos que se reúnan en equipos mixtos, con el fin de que juntos diseñen, a lo largo de este material, una
página web para dar a conocer una “micro empresa” que atienda problemas importantes de su comunidad, como
de desarrollo sustentable, difusión de acciones comunitarias, entre otros. Por lo tanto, es importante que tomen
en cuenta que trabajarán con las mismas personas en esta misma sección a lo largo del presente Cuadernillo.
Ya que hayan decidido con quiénes van a trabajar, deberán elegir el giro de la empresa que van a crear, y con
base en ello, busquen diversas imágenes que se relacionen con su proyecto (pueden crearlas, tomar fotografías,
buscarlas en diversas fuentes, entre otros). Integren en el portafolios de evidencias esta información.
Asimismo, realicen en papel o en otro programa de computadora al que tengan acceso, el diseño de su página a
grandes rasgos, tomando en cuenta a quién va dirigido, tipo de página (informativa, participativa, entre otros),
colores que van a usar, tipografía a utilizar, objetivo de la página, videos a incluir, audio que desearían utilizar, entre
otros. Realicen una investigación en la red sobre páginas parecidas a las que ustedes quieren desarrollar, observen el
diseño utilizado y contrástelo con sus ideas.
Utilicen su investigación y pre-diseño como guía para elaborar su propia página.
Recuerda que puedes hacer uso de tus aprendizajes de los submódulos anteriores, sobre la utilización de software
de diseño para el manejo de gráficos y la producción de animaciones con elementos multimedia.
Quiero aprender más
Te recomendamos algunos sitios electrónicos en los cuales podrás continuar con el aprendizaje de estos tópicos:
http://www.desarrolloweb.com/manuales/47/ (última revisión: 2/11/11)

http://es.scribd.com/doc/36418810/Apuntes-Paginas-WEB (última revisión: 2/11/11)
http://www.desarrolloweb.com/articulos/2063.php (última revisión: 2/11/11)
http://www.un.org/spanish/Depts/dpi/seminario/pdf/principiosfireworks.pdf (última revisión: 2/11/11)
http://www.inta.gov.ar/activ/comunica/estiloweb.pdf(última revisión: 2/11/11)
http://www.desarrolloweb.com/manuales/33/(última revisión: 2/11/11)
10
Tópico II
Manejar los elementos básicos de un lenguaje

utilizable en la creación de páginas Web
(HTML, DHTML, ASP, Java Script, CSS u otros)
El World Wide Web (WWW) es un sistema que contiene una cantidad de información
casi infinita. Pero esta última debe estar ordenada de alguna forma para que sea posible
encontrar lo que se busca. La unidad básica donde está almacenada esta información son las
páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones...
e incluso sonido y video. Una de las características más importantes de las páginas Web
es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino
que están 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 página para navegar hasta otra página.
Será cuestión del programador de la página inicial decidir qué palabras o frases serán
activas y a dónde 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 orígenes el WWW constaba
únicamente de texto, en la actualidad es un sistema principalmente gráfico y se puede
hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones,... en
definitiva cualquier elemento de una página. Incluso, el término original no ha sido
reemplazado todavía.
http://mmc.geofisica.unam.mx/LuCAS/Manuales-LuCAS/doc-curso-html/doc-curso-html/x38.html
(última revisión:2/11/11)
11
TOPICO DOS
Como primera actividad, solicitamos que se reúnan en parejas mixtas, y busquen nuevamente en fuentes
bibliográficas o electrónicas,las características principales del lenguaje HTML que es el más utilizado para la
creación de páginas web.
A continuación te mostramos la estructura básica de un documento en HTML, esto te servirá como primera actividad
para empezar a diseñar tus páginas.
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 título de nuestro
documento.
El cuerpo limitado por: <body> y </body>, que se refiere al lugar donde podemos encontrar el texto, imágenes,
entre otros contenidos, que forman nuestro documento.
Ahora te mostramos un ejemplo de la estructura básica del documento html:

<html>
<head>
<title>mi primerapágina web</title>
</head>
<body>
<h1>aprendiendo a desarrollar una página web</h1>
</body>
</html>
Escribe esta información en el “bloc de notas” ubicado en la carpeta de “Accesorios”, y guarda el documento con
terminación .html; cierra el archivo y vuelve a abrirlo utilizando el explorador de internet con el que cuentes. Verás
que un editor de texto simple es lo que necesitas para crear una página web.
Como ves, hay órdenes específicas que debes escribir para poder programar
de manera correcta. En parejas heterogéneas, investiguen en distintas fuentes
más características del lenguaje HTML, cómo pueden agregar imágenes, cómo
pueden hacer ligas, entre otros. Elaboren una hoja donde enlisten todas las
órdenes que programaron a través de este lenguaje. Muestren su página 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, podrás darte cuenta de que las páginas no tienen
gran interactividad, es decir, podemos cargar la página con toda la información 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
Ahora te mostramos un ejemplo de JavaScript:
<html>
<head>
<script type=”text/javascript”>
functiondisplayDate()
{
document.getElementById(“demo”).innerHTML=Date();
}
</script>
</head>
<body>
<h1>mi primerapágina web</h1>

<p id=”demo”>Esto es un parágrafo.</p>
<button type=”button” onclick=”displayDate()”>Display Date</button>
</body>
</html>
De manera similar que en el ejercicio anterior, escribe esta información en el “bloc de notas” ubicado en la carpeta
de “Accesorios”, y guarda el documento con terminación .html; cierra el documento y vuelve a abrirlo, utilizando el
explorador de internet con el que cuentes. Verás qué es lo que aparece.
En parejas, investiguen en distintas fuentes más características del lenguaje

JavaScript, cuáles son los comandos que pueden utilizar, cómo se escriben, entre
otros. Elaboren una hoja donde enlisten todas las órdenes que programaron
a través de este lenguaje. Muestren su página 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 básicos de lenguaje ASP y CSS.
Finalmente, reúnan todos elementos básicos de los lenguajes y plásmenlos en una página web. Muestren su
página a otra pareja, discutan sus resultados en plenaria, con la finalidad de intercambiar experiencias y facilitar
el trabajo.
13
TOPICO DOS
Fuentes de consulta
BÁSICA:
Madrid. España.
ELECTRÓNICA:
De acuerdo con la “micro empresa” de su interés, deberán redactar un documento sobre el

proyecto de su elección; ya que con base en esta información, será necesario que retomen los
aprendizajes de este tópico (HTML, JavaScript, ASP, CSS, entre otros) y planeen el diseño de su
página. Será importante que comiencen a experimentar con la información que contendrá el
sitio. Cuando cuenten con el archivo, guarden este último, ya que deberán mostrarlo ante el
grupo.
Evaluarán el trabajo realizado con una lista de cotejo, que deberá elaborar todo el grupo con base en los
desempeños que esperan lograr.
Te recomendamos algunos sitios electrónicos en los cuales podrás continuar con el aprendizaje de estos tópicos:
http://www.adelat.org/media/docum/nuke_publico/01impr.pdf (última revisión: 2/11/11)

http://aprendeenlinea.udea.edu.co/lms/ova/course/view.php?id=4 (última revisión: 2/11/11)
http://www.tinkuy.info/recursos/sites/default/files/recursos/Manual%20de%20Dreamweawer.PDF (última revisión: 2/11/11)
http://exa.unne.edu.ar/depar/areas/informatica/SistemasOperativos/TFLino.pdf (última revisión: 2/11/11)
http://www.comocreartuweb.com/curso-de-html/curso-html-introducion.html(última revisión: 2/11/11)
http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf(última revisión: 2/11/11)
14
Tópico III
Diseñar una página Web con un software de aplicación

Elementos de una página web
Texto. El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene instaladas (a veces
se utiliza una tecnología 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 ratón o el teclado y copiarse a otra
aplicación, como el bloc de notas (muchos de los elementos textuales de las páginas, en especial los títulos, botones
de navegación, entre otros; son realmente gráficos, y su texto no es editable).
Imágenes. Son ficheros enlazados desde el fichero de la página 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.
Gráficas Vectoriales (SVG - Scalable Vector Graphics).
Hipervínculos, Vínculos y Marcadores.
La página web también 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 diseño web

http://www.mitecnologico.com/Main/PaginaWebConceptoYElementos(última revisión: 2/11/11)
15
TOPICO TRES
En esta sección aprenderás a utilizar el software de aplicación llamado Dreamweaver, que es uno de los más utilizados
en el desarrollo de páginas web.
Como la mayoría 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 cuáles 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 versión de Dreamweaver, sin embargo, las funciones básicas son prácticamente las mismas.
16
Ahora, formen parejas nuevamente, procuren reunirse con personas con las
que no hayan trabajado anteriormente, para realizar un resumen en el cual
describan la función de cada uno de los elementos siguientes:
La barra de título
La barra de menús
La barra de herramientas estándar
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, deberán investigar cuáles son y para qué sirven las diferentes vistas: código, diseño y combinada.
Realicen un resumen.
Ahora empezaremos a diseñar la página. Abran el programa Dreamweaver, seleccionen abrir un

documento nuevo y seleccionen la categoría Página básica, HTML. Ahora introduzcan algún
título seguido de un texto corto y escriban la dirección de otra página al final. Ahora abran el
menú de modificar y elige la opción de propiedades de la página. Ahí podrán modificar el color
del texto, el color de fondo, una imagen y los márgenes. Explora todas las opciones del menú
modificando el contenido de tu página. Recuerda grabar tu archivo en algún dispositivo USB,
CD, o incluso en el disco duro.
Ahora que ya conoces básicamente cómo 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
planificación y diseño que realizaron en el tópico I será importante para crear las páginas que va a contener.
Primero necesitan crear una carpeta en el disco local. Los documentos HTML se crean en esta carpeta, y las imágenes
y demás objetos gráficos deben estar en nuevas carpetas dentro de ésta. Recuerda mantener una organización
adecuada. A esto se le conoce como sitio local. Tengan en cuenta que tendrán 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 formarán un sitio local, ya es posible definir el sitio en Dreamweaver. Diríjanse al
menú Sitio, a la opción Administrar sitios. Recuerden que a través del panel Archivos, pestaña Archivos, se puede
acceder a cada uno de los sitios creados y a la opción Administrar sitio.
En el caso de haber seleccionado la opción 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 opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir las
características del sitio.
http://www.aulaclic.es/dreamweaver8/t_3_1.htm
17
TOPICO TRES
Ahora, deberán investigar en parejas cómo se desarrollan y elaboran los siguientes puntos:
⋅ Crear hiperenlaces
⋅ Insertar imágenes
⋅ Modificar tablas
⋅ Configurar marcos
⋅ Insertar elementos de formulario
⋅ Insertar elementos multimedia
⋅ Trabajar con plantillas
Compartan sus resultados en plenaria, así como las dificultades encontradas. Evalúen la
participación utilizando un registro anecdótico.
BÁSICA:
MARTÍNEZ, Á. Manual práctico de HTML. Escuela Técnica Superior de Ingenieros de Telecomunicación. (1995).
Universidad Politécnica de Madrid. España.
ELECTRÓNICA: Fuentes de consulta

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 página web,
pueden jugar incluso con los textos, insertar imágenes y utilizar
las diversas herramientas para decidir cómo es más atractiva la
página. Muestren ante el resto del grupo su proyecto y evalúen
este último con una lista de cotejo.

Te recomendamos algunos sitios electrónicos en los cuales
podrás continuar con el aprendizaje de estos tópicos:
http://www.aula21.net/Wqfacil/ejemplos/webtic.htm (última revisión: 2/11/11)

http://iscseleny.webcindario.com/modulo2.html (última revisión: 2/11/11)
http://www.apple.com/mx/ilife/iweb/ (última revisión: 2/11/11)
http://www.basekit.com.mx/?gclid=CJrfiLavkqwCFRBdhwodUTxLoQ (última revisión: 2/11/11)
http://www.aulafacil.com/AulaDream/Dream/temario.htm(última revisión: 2/11/11)
18
Tópico IV
Publicar páginas Web

Para que la página pueda verse, lo primero que debemos hacer es colocarla en un servidor de Internet, que a fin de
cuantas no es más que otro ordenador con características especiales. Pues bien, publicar una página no es ni más ni
menos que eso, colocarla en otro ordenador, que es el servidor.
Ahora viene la pregunta, ¿y dónde están los servidores? Eso es muy sencillo, están 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 todavía hay más, cuando ya tienes tu página publicada, ¿bajo qué nombre aparece tu página 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 opción
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. Lógicamente 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) están ofreciendo URLs como carpetas secundarias bajo subdominio. De esta manera las URL se hacen
demasiado extensas, un ejemplo de URL de este tipo podría ser:
http://subdominio.dominio.com/web_gratis/mi_web
19
TOPICO CUATRO
Además, los espacios gratuitos incluyen publicidad y su funcionamiento no es del todo homogéneo 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 opción para conseguir ese nombre que necesitamos. También es importante tener en cuenta
que si en otro momento conseguimos un dominio que se ajuste a nuestras necesidades podremos redireccionarlo a
la dirección 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 cuestión sobre cómo publicar un sitio web. Aclararemos que la
mayoría de los servidores hacen la publicación mediante protocolo de transferencia de archivos FTP, mientras
que otros mediante HTTP (protocolo de transferencia de hipertexto). Dado que el primero es el más común, sólo
hablaremos de éste. La publicación mediante FTP es tremendamente sencilla.
Debido a que el sitio ftp no es más 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 añadidura, sólo comentaremos que en algunos sitios ftp hay que crear
una capeta nombrada como html, mientras que en otros no. Asimismo, la publicación se hace más fiable si en vez
de copiar y pegar se emplea un programa ftp. Para publicar una página Web precisarás de una dirección FTP a la que
accederás desde tu navegador o desde un programa FTP, una cuenta FTP, y una contraseña. Estas tendrán la forma:
http://www.uterra.com/crea_tu_web/publicacion_web.htm(última revisión: 2/11/11)
En esta ocasión 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 heterogéneos lleven a cabo una investigación

documental sobre FTP y comenten con otro pequeño grupo la información
recabada. Evalúen la participación con un registro anecdótico.
Formen parejas mixtas para que en el laboratorio de informática, configuren FTP desde Dreamweaver. Solicitamos
que realicen lo siguiente: diríjanse a Administrador de Sitios, y den click sobre “Sitios de Dreamweaver”.
Posteriormente, para hacer referencia a la configuración FTP, deberán proporcionar la información que solicitan.
20
Posteriormente, verán que también pueden elegir el lenguaje con el cuál van a programar la página web (si ese es el caso).
Tomen en cuenta que la recomendación es que modifiquen y actualicen los archivos en la computadora.
También es importante que seleccionen la ruta en la cual crearán el directorio para almacenar los archivos.
A continuación, 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
través de la web.
• Conexión: El nombre que tendrá el usuario para ingresar a través de FTP.
Cuando se requiera establecer la conexión mediante otro puerto, es recomendable configurar el cliente FTP en
“pasivo”.
Algo también importante en este caso, es que se puede proteger a los archivos para que no se puedan editar de
manera paralela, utilicen esta aplicación siempre, con el fin de que los cambios que se generen en el sitio, sea
debido a una decisión conjunta, de equipo.
Otra opción que deben considerar es la siguiente: “Cargar archivos en el servidor automáticamente 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 página. Sin embargo, si cometen errores, no podrán recuperar la versión anterior, por ello deben ser
cuidadosos. Investiguen qué otras ventajas y desventajas tiene.
Para terminar con esta sección, deberán mostrar ante el grupo el trabajo que realizaron, y evalúen éste con una
lista de cotejo. Es importante que el instrumento contemple los desempeños esperados.
Fuentes de consulta
BÁSICA:
Madrid. España.
ELECTRÓNICA:
21
TOPICO CUATRO
Finalmente, es momento de mostrar el sitio que crearon a los demás, con el fin de que puedan conocer su micro
empresa.
Deberán publicar su página 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 opinión de los demás, será necesario incluir en algún espacio de la página, una opción en la que
soliciten esta información. 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 demás,
así como esperar tu turno para hablar y respetar las opiniones.
Ahora que has terminado este bloque, te recomendamos los siguientes sitios, en los cuales puedes continuar
aprendiendo sobre los tópicos que has estudiado:
http://www.leccionweb.org/leccion5.html (última revisión: 2/11/11)

http://www.desarrolloweb.com/manuales/publicar-webs-internet.html (última revisión: 2/11/11)
http://www.youtube.com/watch?v=cOu-_l3aNv0 (última revisión: 2/11/11)
http://www.luiskano.net/blog/2011/06/13/crea-personaliza-y-publica-tu-sitio-web-con-microsoft-webmatrix/ (última revisión: 2/11/11)
22
Anexos
23
ANEXOS
Portafolio de evidencias
El portafolio de evidencias es un sistema de evaluación que comprende la compilación de productos elaborados
por el estudiantado que dan cuenta de su proceso de aprendizaje. Por lo anterior, no se trata de una recopilación
de “todos” los trabajos elaborados, sino de aquellos que se consideran significativos y permitan la reflexión en el
alumnado. A continuación se presentan las fases para operar el portafolio de evidencias y las instrucciones para la
selección de evidencias.
Fases para operar el portafolio de evidencias.

1. Definir y comunicar al estudiantado el propósito del portafolio de evidencias con base en los objetos de aprendizaje,
competencias a desarrollar, desempeños esperados, entre otros elementos, así como el periodo de compilación de los
productos (por bloque, bimestre, semestre).
2. Definir y comunicar los criterios de selección de evidencias promoviendo en el alumnado el análisis y examen de
su propio trabajo.
3. Definir la forma de monitoreo y retroalimentación del personal docente al estudiantado sobre el portafolio de
evidencias.
Instrucciones de selección de evidencias.

1. Las evidencias que se incluyan pueden ser de lo más variado, como evidencias escritas, audiovisuales, artísticas,
entre otras. Todas las evidencias son elaboradas por el estudiantado.
2. Las evidencias deben dar cuenta de un proceso de aprendizaje y permitir la reflexión del mismo.
3. El estudiante tiene que involucrarse en la selección de evidencias que conformarán el portafolio, buscando que
éstas sirvan para cumplir el propósito del portafolio en cantidad, calidad y ordenación de las mismas.
24
Escala de clasificación
Como señala el documento de Lineamientos de Evaluación del Aprendizaje (DGB, 2011), la escala de clasificación
sirve para identificar, además de la presencia de determinado atributo, la frecuencia en que éste se presenta.
Escala de clasificación para evaluar una exposición.
Para el cálculo y asignación de niveles de desempeño (tales como deficiente, regular, bueno, excelente, entre otros),
una vez determinados los desempeños y la frecuencia con que se presentan en la exposición de la cosmovisión de
una sociedad antigua, contrastada con distintas perspectivas actuales, así como el uso de resúmenes descriptivos
véase Lineamientos de Evaluación del Aprendizaje, página 63-65.
25
ANEXOS
Tabla de cotejo
“En comparación con otros instrumentos, las tablas de cotejo presentan menos complejidad. Su objetivo es determinar
la presencia de un desempeño y para ello se requiere identificar las categorías a evaluar y los desempeños que
conforman a cada una de ellas. Para valorar su presencia, es suficiente con colocar una línea para cada desempeño y
escribir sobre ella una marca para identificar su presencia.”1
Recuerda que tú en compañía de tus compañeros y compañeras elaborarán sus propias listas de cotejo.
A continuación te presentamos una serie de ejemplos con distintos diseños y tópicos a evaluar que te ayudarán
como muestra para desarrollar tus propias listas.
Lista de cotejo para evaluar una exposición.
1 Lineamientos de evaluación del aprendizaje, p. 58. En http://www.dgb.sep.gob.mx/portada/lineamientos-eval-aprendizaje.pdf

Consultado el 29 de noviembre de 2011.
26
Para el cálculo y asignación de niveles de desempeño (tales como deficiente, regular, bueno, excelente, entre otros),
una vez determinados los desempeños presentes en la síntesis de la investigación sobre los conceptos de modernidad
y posmodernidad, así como el uso de resúmenes descriptivos. (Véase Lineamientos de Evaluación del Aprendizaje,
páginas 61-63 http://www.dgb.sep.gob.mx/portada/lineamientos-eval-aprendizaje.pdf).
Ejemplo de lista de cotejo para evaluar un organizador gráfico
27
ANEXOS
Rúbrica2
“Las rúbricas son instrumentos que permiten describir el grado de desempeño que muestra una persona en el
desarrollo de una actividad o problema. Según Díaz Barriga (2005) las rúbricas son guías o escalas de evaluación
donde se establecen niveles progresivos de dominio o pericia relativos al desempeño que una persona muestra
respecto de un proceso o producción determinada. También es posible decir que las rúbricas integran un amplio
rango de criterios que cualifican de modo progresivo el tránsito de un desempeño incipiente o novato al grado del
experto (Martínez-Rojas, 2008)”.
A continuación te mostramos algunos ejemplos de rúbrica:
Rúbrica para evaluar exposición de cartel3
2 Lineamientos de evaluación 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. RÚBRICAS 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
REGISTRO ANECDÓTICO
Es una descripción acumulativa de ejemplos observados por los profesores. Proporciona un conjunto de hechos
evidentes relacionados con hábitos, ideas y personalidad del alumnado.
Guía de observación
La guía de observación es un instrumento que recolecta información, y es muy parecido a la lista de cotejo, sin
embargo la guía da mayor información sobre el proceso de la actividad y no sólo de los desempeños finales.
29

Elaboración de Paginas Web PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Elaboración de Paginas Web PDF

Cargado por

Copyright:

Formatos disponibles

Elaboración de Páginas Web

Cuadernillo de actividades de aprendizaje

Con más educación sembramos la semilla de un México seguro para ti y tu familia

Este Cuadernillo de Actividades de Aprendizaje se divide en los siguientes tópicos:

En el Tópico IV aprenderás el procedimiento para publicar páginas web.

¿ Que voy a aprender ?

Utilizar los elementos fundamentales del diseño

http://www.desarrolloweb.com/articulos/2063.php (última revisión: 2/11/11)

⋅ Ten en cuenta que el diseño es la primera relación entre tu trabajo y el observador.

http://www.aulaclic.es/dreamweaver8(última revisión: 2/11/11)

Utilicen su investigación y pre-diseño como guía para elaborar su propia página.

Quiero aprender más

http://www.desarrolloweb.com/manuales/47/ (última revisión: 2/11/11)

¿ Que voy a aprender ?

Manejar los elementos básicos de un lenguaje

Ahora te mostramos un ejemplo de la estructura básica del documento html:

Ahora te mostramos un ejemplo de JavaScript:

<h1>mi primerapágina web</h1>

<button type=”button” onclick=”displayDate()”>Display Date</button>

En parejas, investiguen en distintas fuentes más características del lenguaje

De acuerdo con la “micro empresa” de su interés, deberán redactar un documento sobre el

Quiero aprender más

http://www.adelat.org/media/docum/nuke_publico/01impr.pdf (última revisión: 2/11/11)

¿ Que voy a aprender ?

Diseñar una página Web con un software de aplicación

Audio, generalmente en MIDI, WAV y MP3.

Gráficas Vectoriales (SVG - Scalable Vector Graphics).

Hipervínculos, Vínculos y Marcadores.

Scripts, generalmente Java Script.

Hojas de Estilo (CSS - Cascading Style Sheets).

Plantillas de diseño web

Ahora empezaremos a diseñar la página. Abran el programa Dreamweaver, seleccionen abrir un

ELECTRÓNICA: Fuentes de consulta

Ahora, solicitamos que con lo que hasta ahora han elaborado

Quiero aprender más

http://www.aula21.net/Wqfacil/ejemplos/webtic.htm (última revisión: 2/11/11)

¿ Que voy a aprender ?

Publicar páginas Web

http://www.uterra.com/crea_tu_web/publicacion_web.htm(última revisión: 2/11/11)

Ahora, solicitamos que en equipos heterogéneos lleven a cabo una investigación

Quiero aprender más

http://www.leccionweb.org/leccion5.html (última revisión: 2/11/11)

Fases para operar el portafolio de evidencias.

Instrucciones de selección de evidencias.

Escala de clasificación para evaluar una exposición.

Lista de cotejo para evaluar una exposición.

1 Lineamientos de evaluación del aprendizaje, p. 58. En http://www.dgb.sep.gob.mx/portada/lineamientos-eval-aprendizaje.pdf

Ejemplo de lista de cotejo para evaluar un organizador gráfico

2 Lineamientos de evaluación del aprendizaje, p. 62. En http://www.dgb.sep.gob.mx/portada/lineamientos-eval-aprendizaje.

También podría gustarte