Unidad III - 2013

Herramientas Web y Diseño Web

Prof. Edwin Raymundo Delgado

4to. Secretariado Bilingüe

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

Semana 2 – HT1Hoja de Trabajo No. 1Actividad:

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 navegadorb. Fabricantec. Versionesd. Características o Ventajas

Semana 2 – HT2Hoja de Trabajo No. 2 ACTIVIDAD No. 2

FECHA: Del 26 al 30 de agostoTEMA: 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.comwww.librosweb.es

Del 26 al 30 de agostoACTIVIDAD No. 1Herramienta: WordTipo 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.

Semana 3 – HT3Del 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. 2Del 26 al 30 de agostoTarea 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.

Blog – Mapas Conceptuales

TEMA: Mapas Conceptuales

Herramienta: www.bubbl.usTipo 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

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.

ACTIVIDAD No. 1Del 9 al 13 de septiembre

TEMA: Listas, Numeración y TablasHerramienta: Notepad++, Mozilla FirefoxTipo 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 romanab. Una lista de frutas con numeración alfabética

ACTIVIDAD No. 2Instrucciones: 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

!! 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 6Del 16 al 20 de septiembre

Examen Corto (teoría)

Semana 6 – HT6 ACTIVIDAD No. 1

Del 16 al 20 de septiembre

Instrucciones:

Ingrese al sitio www.blogspot.comy 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.

Plantillas CSS-Blogger

Semana 7 – HT7Del 23 al 27 de septiembre

TEMA: Cambio de PlantillaHerramienta 2.0: BloggerTipo 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.

!! 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 6Del 16 al 20 de septiembre

Examen Corto (teoría)