Recomendados
Más contenido relacionado
Similar a Diseña tu propio sitio web [autoguardado]
Similar a Diseña tu propio sitio web [autoguardado] (20)
Diseña tu propio sitio web [autoguardado]
- 1. Diplomado Aprende a Aprender con TIC Proyecto Colaborativo Mini Web Quest Diseña tu propio sitio web Docente: René Joel Criollo Pérez Noviembre 2012
- 2. Introducción ¿Ya sabes diseñar un sitio web?, ¿conoces la forma en que puedes insertar un video en tu página web?, o tal vez insertar un archivo de tu música favorita, o incluir una imagen con movimiento o una marquesina con diferentes trayectorias de desplazamiento. Hoy en día existen muchas formas de diseñar un sitio web de manera atractiva e interactiva, con la finalidad de que sea un sitio que impacte a los demás y que involucre toda tu imaginación y creatividad. ¡Los limites a tú imaginación tú los pones! http://edweb.sdsu.edu/WebQuest/
- 3. Tarea Al final de este trabajo obtendrás como producto un sitio web de calidad, desarrollando en equipos de trabajo colaborativo de dos integrantes. En este proceso obtendrás los conocimientos y habilidades necesarios para identificar el lenguaje de programación HTML, recopilando sus principales códigos o etiquetas que permitirán no solo diseñar el sitio, si no enriquecerlo y mejorarlo para presentarlo de una manera impactante. Una vez que este terminado el producto deberás socializarlo con los demás equipos comentando cuales fueron tus experiencias y que aprendizajes has logrado. La tarea se relaciona cumple las condiciones de la Tareaonomía de Bernie Dodge iniciando con tareas de recopilación y aterrizando el desarrollo del Producto en las tareas de diseño.
- 4. Proceso 1. Integrar a los estudiantes en equipos de 2 alumnos. 2. Responder el Andamio Cognitivo “HTML Conceptos Básicos” 3. Utilizando como base el Andamio cognitivo procederás a diseñar tu primera página Web a partir de una plantilla general que poco a poco podrás modificar. 4. Abre el Programa Bloc de notas ubicado dentro de los Accesorios de Windows y copia el código de HTML tal y como las observas. 5. Al terminar de copiar el código fuente guarda el archivo asignándole el nombre “Mi primera pagina Web”. Es importante que escribas en la extensión del archivo .htm o .html. 6. Abre el programa Internet Explorer, no importa que tu computadora tenga o no conexión a Internet. Ahora Abre tu archivo utilizando el procedimiento que conoces, haz clic en archivo, abrir y busca tu archivo y ábrelo.
- 5. Código HTML <HTML> <HEAD> <TITLE> Mi Primera Pagina Web </TITLE> </HEAD> <BODY bgcolor="FFAA00"> <CENTER> <H1> Mis aficiones </H1> </CENTER> <HR> Sin un orden particular, mis <B> aficiones </B> son las siguientes: <!-- Una lista sin orden alguno --> <UL> <LI> El cine <LI> El deporte <UL> <LI> Natación <LI> Futbol </UL> <LI> La música </UL> La música que más me gusta es <I> (en orden de preferencia): </I> <!-- Una lista con un orden --> <OL> <LI> El rock <LI> El jazz <LI> La música clásica </OL> </BODY> </HTML>
- 6. 7. Seguramente vas a visualizar una página como la que se muestra en la imagen: 8. Ahora observa tu creación, has diseñado una Página Web utilizando los códigos del lenguaje HTML, tienes una plantilla muy general la cual puedes modificar como tu quieras, por ejemplo realiza los siguientes cambios: Escribe Tu nombre y tus propias aficiones Cambia el color del fondo y de la fuente al que tú quieras. Inserta dos imágenes que te parezcan atractivas una de ellas declarara como referencia a la dirección www.google.com.mx Escribe una breve reseña de tu persona y lo que consideras es más importante para ti, es decir tus cualidades.
- 7. 9. Para realizar cada cambio recuerda que se realiza en el listado del Bloc de Notas, las etiquetas que vas a utilizar están contenidas en los tutoriales de la sección de Recursos, solo busca las que sean correctas. 10. Conforme vayas realizando cambios en tu Bloc de notas, guárdalos y para que los visualices en el Internet Explorer presiona la tecla F5 o has clic en el botón actualizar 11. Finalmente incluye las siguientes etiquetas en la parte final antes de cerrar el </BODY>. <br><br> <ADDRESS> Ultima Actualización: Febrero / 2012 <BR> <A href="mailto:escribe tu dirección de correo electrónico "> Envía un Correo con tus comentarios y sugerencias</A> <BR> Copyright 2012 </ADDRESS> Una vez terminadas las paginas los equipos las mostraran al grupo con la finalidad de compartirlas y comentar experiencias y como superaron sus complicaciones
- 8. Recursos El sitio “http://www.aulafacil.com/CursoHtml/temario.htm” de aula fácil llamado “Los sabios.com” contiene un curso sobre el lenguaje HTML muy detallado y que funciona como tutorial. En http://www.facebook.com/groups/560006764016462/ espacio donde los alumnos intercambiarán opiniones, comentarios, solicitarán ayuda, descargarán documentos de apoyo y mantendrán comunicación con sus profesores y compañeros. En el sitio “http://es.wikipedia.org/wiki/HTML” de Wikipedia maneja contenidos teóricos que pueden ser interesantes para los estudiantes que les atrae la lectura y que tratan de saber un poco más sobre el lenguaje de programación HTML. En “http://www.webestilo.com/html/” es posible que los alumnos ubiquen algunos contenidos que proporcionarán elementos a un sitio web, como mapas de imágenes, enlaces y links. El sitio “http://www.aulaclic.es/html/b_2_2_1.htm” será posible que los estudiantes ubiquen una tabla que contiene los códigos de colores en el sistema numérico hexadecimal, que son necesarios para cambiar la apariencia de un sitio o pagina web.
- 9. “http://www.ordenadores-y-portatiles.com/url.html” define y describe de manera clara estos conceptos que deberán conocer los estudiantes. http://www.youtube.com/watch?v=en0EfNXmL6M http://www.youtube.com/watch?v=dm1pKuXcbKg&feature=related hacen referencia a dos recursos de material video grafico que ofrece el sitio YouTube. Los videos describen visualmente a forma de tutorial los pasos para crear desde cero un sitio web de forma sencilla y entendible para los alumnos. Los tres sitios sugeridos como buscadores son: http://www.google.com, http://www.yahoo.com.mx, http://www.altavista.com para los dos primeros sitios son de uso común y ofrecen opciones de búsqueda de imágenes, videos, noticias, web, traductor, blogs, sites, grupos. Altavista es un buscador muy recomendable, destaca su facilidad de uso, su velocidad de respuesta y el gran tamaño de su base de datos. Rubrica de Evaluación: http://rubistar.4teachers.org/index.php?screen=ShowRubric&rubric_id=2163564&
- 10. Conclusión Al interior de los equipos de trabajo y en el grupo en general, se participara en un momento de reflexión para comentar como se ha diseñado el sitio web, que problemas tuvieron durante el desarrollo del sitio y como los han superado para producir un producto de calidad. Se utilizara el cañón para socializar a todo el grupo los diferentes sitios web, dando respuesta a las siguientes interrogantes: ¿Que pasos siguió cada equipo cuando les surgieron nuevas inquietudes para incluir en su página nuevos elementos que la hicieran más atractiva e interactiva? ¿Qué aprendieron sobre el manejo del lenguaje HTML y el diseño de páginas web? ¿El producto que han realizado creen que es lo mejor que pueden hacer o tal vez ya podrían superarlo y diseñar un sitio mejor? Finalmente pensar en si ya involucraron toda su imaginación y creatividad para diseñar el sitio web, si realmente lograron su objetivo inicial o si podríamos empezar de nuevo eligiendo un tema diferente y tal vez diseñar un sitio web en el cual ¡Los limites a tú imaginación tú los pones! ¡El aprendizaje apenas comienza!