• Author / Uploaded
• Leha Alh

• Categories
• HTML
• Red mundial
• Tecnología
• Adobe Dreamweaver
• Página web

Citation preview

---

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.

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web 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 Aprendiza­je 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 pro­picien 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ú ini­cies 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

Tópico II

11

Tópico III

15

Tópico IV

19

Utilizar los elementos fundamentales del diseño

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)

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

Publicar páginas web

Cuadernillo de actividades de aprendizaje / Elaboración de 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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web 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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web

¿ Que voy a aprender ?

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 Desarrollando competencias

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 y El documento se compone por dos partes principalmente: El encabezado limitado por: y , que se refiere al lugar donde podemos encontrar el título de nuestro documento. El cuerpo limitado por: y , 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:

mi primerapágina web

aprendiendo a desarrollar una página web

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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web Ahora te mostramos un ejemplo de JavaScript:



mi primerapágina web

Esto es un parágrafo.

Display Date

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: 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)

¿Qué he aprendido?

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.

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.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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web

¿ Que voy a aprender ?

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 Desarrollando competencias

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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas 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 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: 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: Fuentes de consulta 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)

¿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 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.

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.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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web

¿ Que voy a aprender ?

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)

Desarrollando competencias 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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web 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: 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)

21

TOPICO CUATRO ¿Qué he aprendido?

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.

Quiero aprender más

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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web

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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web 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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web 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

Cuadernillo de actividades de aprendizaje / Elaboración de páginas web 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