1. Unidad III - 2013
Herramientas Web y Diseño Web
Prof. Edwin Raymundo Delgado
4to. Secretariado Bilingüe
2. SEMANA 1
Contenido de la unidad
• INTERNET
• Evolución y desarrollo de la web
• Navegadores y Motores de
busqueda
• Tecnicismos en Internet
HTML
• Introducción a HTML
• Etiquetas
• Navegadores
• Codigo fuente de una pagina web
• Tag y Tags basicos.
• Etiquetas de color de fondo
• Insertar elementos y Enlaces
• WEB 2.0
• • Recursos Web
UNIDAD III
DISEÑO WEB
3. Semana 2 – HT1
Hoja de Trabajo No. 1
Actividad:
Fecha: Del 19 al 23 agosto
Instrucciones: Realice lo que
se le pide.
Investigue en Internet
información relacionada con
la evolución de la web y
realice una línea de tiempo
en Word, utilizando la
herramienta Smart Art.
Actividad:
Instrucciones:
Realice un cuadro comparativo sobre los
principales navegadores que existen para
accesar a Internet e incluya el concepto , la
definición de Navegador, elabórelo con
creatividad.
Incluya en su cuadro comparativo:
a. Imagen del navegador
b. Fabricante
c. Versiones
d. Características o Ventajas
4. Semana 2 – HT2
Hoja de Trabajo No. 2 ACTIVIDAD No. 2
FECHA: Del 26 al 30 de agosto
TEMA: Diseño Web
Herramienta: Notepad ++
Tipo de actividad: Individual
Diseñe una pagina web creativa sobre el
valor “Honestidad”, en base a sus
conocimientos previos.
Aplique las etiquetas de cabecera, etiquetas
para color y las etiquetas para implementar
imágenes.
Sitio de referencia:
www.virtualnauta.com
www.librosweb.es
Del 26 al 30 de agosto
ACTIVIDAD No. 1
Herramienta: Word
Tipo de actividad: individual
Elabore un esquema o una mapa mental, que
ilustre la clasificación de los Motores de
Búsqueda que existen para buscar información
en Internet.
Utilice un documento de Microsoft Word e
incluya imágenes y formas. Coloque en su
cuaderno el esquema o mapa mental impreso.
El trabajo individual, deberá subir su archivo a Moodle.
5. Semana 3 – HT3
Del 26 al 30 de agosto
Tarea para casa
ACTIVIDAD No. 1
Instrucciones:
Practica de etiquetas que se utilizan
para darle formato al texto a una pagina
web y las etiquetas relacionadas con
hipervínculos.
Diseñe una página tipo directorio web,
que le permita acceder a:
A. Una Universidad
B. Un Banco
C. Un Restaurant
D. Un colegio de prestigio
ACTIVIDAD No. 2
Del 26 al 30 de agosto
Tarea para casa
Instrucciones:
• Ingrese al sitio www.prezi.com y proceda a
crear una presentación colaborativa acerca
del tema: “Diseño Web”, con su equipo de
proyecto, que incluya los siguientes tópicos:
• HTML
• XHTML
• HTML5
• BLOG
• GOOGLE SITES
• JAVASCRIPT
• FLASH
Deberá publicar el embed code, que proporciona
Prezi en el foro establecido para el efecto.
6. Blog – Mapas
Conceptuales
TEMA: Mapas Conceptuales
Herramienta: www.bubbl.us
Tipo de Actividad: Grupal
Instrucciones:
Ingrese al sitio, regístrese, la
actividad consiste en trabajar un
mapa conceptual colaborativo,
que incluya pequeñas definiciones
acerca de los tecnicismos de uso
en Internet.
Invite a los miembros de su
proyecto, para que el mapa
conceptual sea elaborado por
todos.
(Completarlo en casa)
IMPORTANTE !!! MOODLE!!!
En un documento de Microsoft Word, inserte
el mapa elaborado, debidamente identificado:
HT4 - nombre, grado y sección
Semana 4 – HT4
7. Semana 5
Proyecto TICS
“Orgulloso de ser guatemalteco”
Supervisión
Evaluación del desarrollo
Seguimiento y observaciones
Del 09 al 13 de septiembre
Revisión de
actividades, el
desarrollo del
proyecto, las
sugerencias y
observaciones.
8. ACTIVIDAD No. 1
Del 9 al 13 de septiembre
TEMA: Listas, Numeración y Tablas
Herramienta: Notepad++, Mozilla Firefox
Tipo de Actividad: individual
Instrucciones:
Considerando el ejemplo del docente, realice
la practica de listas y numeración, en un
nuevo archivo HTML.
Se requiere una lista con viñetas de las
materias que cursa en el presente ciclo
escolar.
Se requieren dos listas:
a. Una lista de verduras con numeración
romana
b. Una lista de frutas con numeración
alfabética
ACTIVIDAD No. 2
Instrucciones:
Considerando el ejemplo del docente, realice la
practica de tablas en un documento HTML.
Ejercicio:
Se requiere una pagina web para un
Supermercado, para el departamento de Frutas
y Verduras, que describa lo siguiente:
• Nombre del articulo
• Precio
• Fotografía
Semana 5 – HT5
9. !! IMPORTANTE !!
Mapas Conceptuales
Recurso: www.text2mindmap.com
Instrucciones: Para programar una pagina
web, existen diferentes etiquetas, algunas
son para encabezados, otras para
formatos, existen para listas, etc.
Ingrese al sitio, diseñe un mapa que
describa los grupos de etiquetas que se
usan en el diseño de una pagina web.
La imagen resultante del sitio:
Súbala a Moodle, y identifiquela como:
Examen Corto - nombre, grado y sección
Semana 6
Del 16 al 20 de septiembre
Examen Corto (teoría)
10. Semana 6 – HT6
ACTIVIDAD No. 1
Del 16 al 20 de septiembre
Instrucciones:
Ingrese al sitio www.blogspot.com
y proceda a crear un blog
colaborativo, para poster las
futuras publicaciones de las
actividades realizadas en el aula.
Este blog será administrado por
una persona y tendrá su equipo de
colaboradores (los cuales deben
registrarse).
El blog deberá tener diseño,
configurado con colores,
esquemas, etc.
• ACTIVIDAD No. 2
Instrucciones:
Ingrese al sitio www.prezi.com y
proceda a crear una presentación
colaborativa acerca del tema: “Diseño
Web”, que incluya los siguientes
tópicos:
• HTML
• XHTML
• HTML5
• BLOG
• GOOGLE SITES
• JAVASCRIPT
• FLASH
La presentación de Prezi deberá
estar posteada como primer entrada
en su blog.
11. Plantillas CSS-
Blogger
Semana 7 – HT7
Del 23 al 27 de septiembre
TEMA: Cambio de Plantilla
Herramienta 2.0: Blogger
Tipo de Actividad: Grupal
Instrucciones:
Proceda a investigar, cual es el
procedimiento para implementar una
plantilla con código CSS a un blog.
Realice una copia de su blog a un nuevo
blog, aplique una plantilla CSS a ese blog
creado, ponga en práctica la información
que haya encontrado en Internet.
Las actividades realizadas en el
curso, estarán posteadas en el
blog, según las instrucciones del
docente.
12. !! IMPORTANTE !!
Mapas Conceptuales
Recurso: www.text2mindmap.com
Instrucciones: Para programar una pagina
web, existen diferentes etiquetas, algunas
son para encabezados, otras para
formatos, existen para listas, etc.
Ingrese al sitio, diseñe un mapa que
describa los grupos de etiquetas que se
usan en el diseño de una pagina web.
La imagen resultante del sitio:
Súbala a Moodle, y identifiquela como:
Examen Corto - nombre, grado y sección
Semana 6
Del 16 al 20 de septiembre
Examen Corto (teoría)