Sei sulla pagina 1di 92

Capacitación para

el trabajo en
Informática
Manual de prácticas en el Centro de Cómputo y
vigilancia académica

Sexto Semestre

Nombre del alumno(a): ________________________________


Grupo: ________

1
Contenido
Tópico Pág.
Presentación 4
Mensaje para el padre o tutor 5
¿Cuáles son los deberes que se deben cumplir? 7
Lista de útiles 9
Descripción Modulo IX – definición de competencias a desarrollar y objetos de aprendizaje 10
Prácticas y ejercicios del Módulo IX 12
Prácticas del Bloque I 13
Prácticas del Bloque II 19
Prácticas del Bloque III 26
Prácticas del Bloque IV 31
Registro de evidencias Modulo IX 37
Autoevaluación del Módulo IX por desempeño personal – Ruta crítica 38
Autoevaluación del Módulo IX por competencias del Marco Curricular Común 39
Descripción Modulo X – definición de competencias a desarrollar y objetos de aprendizaje 42
Prácticas Modulo X 45
Prácticas del Bloque I 46
Prácticas del Bloque II 51
Prácticas del Bloque III 60
Prácticas del Bloque IV 70
Prácticas del Bloque V 77
Prácticas del Bloque VI 83
Registro de evidencias Modulo X 88
Autoevaluación del Módulo X por desempeño personal – Ruta crítica 89
Autoevaluación del Módulo X por competencias del Marco Curricular Común 90

2
Directorio
Gobernador Constitucional del Estado de Hidalgo
Lic. José Francisco Olvera Ruiz

Secretaría de Educación Pública


Lic. Aurelio Nuño Mayer

Secretaría de Educación Pública de Hidalgo


Lic. Miguel Ángel Cuatepotzo Costeira

Subsecretaría de Educación Media Superior y Superior de Hidalgo


Dra. Rocío Ruiz de la Barrera

Dirección General de Educación Media Superior


Ing. Juan Benito Ramírez Romero

Director General del Colegio de Bachilleres del Estado de Hidalgo


Lic. Alberto Islas Lara

Director Académico del COBAEH


Psic. Gerardo Martín Barba

Jefa del departamento de Capacitación para el Trabajo del COBAEH


Lic. Verónica Ramírez

Créditos
Diseño instruccional, planificación y desarrollo
Mtro. José Fernando López Pérez
Revisión, guía instruccional y complementos
Mtra. Mónica Montiel Juárez
Docentes de Capacitación para el Trabajo
COBAEH Plantel Téllez

México, 2016

3
Presentación
¡Bienvenido(a)!

Estas comenzando tu último semestre en el Colegio de Bachilleres del Estado de Hidalgo Plantel
Téllez. Seguramente lo haces con muchas expectativas, curiosidad y entusiasmo pues implica el
término de un proyecto que tanto tú como tus padres, comenzaron hace casi tres años con el
único objetivo de brindarte una herramienta más que te permita hacer frente a los retos del
mundo, independientemente de que decidas continuar con tu formación profesional en la
universidad, o bien te incorpores al sector laboral.

De tal forma que la importancia de este último ciclo escolar es determinante pues te brinda la
oportunidad de mejorar significativamente, elevar tu promedio escolar y conseguir aprendizajes
que te preparen para la vida. Pero ¿Cómo conseguirlo? El reto que tienes enfrente es grande y
requiere de tu dedicación, constancia y esfuerzo, sin embargo ten la certeza de que en este camino
que ahora continúas no estás solo pues cuentas con el apoyo de todos quiénes laboramos en el
plantel.

Personalmente me pongo a tus órdenes, no únicamente en cuestiones académicas sino en todo lo


que me sea posible ayudarte o motivarte. Cierto es que nadie es perfecto y como humano
seguramente tendré deficiencias, por lo que solicito tu apoyo para darme a conocer dichas fallas y
ayudarme a resolverlas, ¡Me gustaría mucho escucharte y saber lo que piensas! De este modo
conseguiremos juntos que tu camino formativo sea más entretenido, dinámico pero sobre todo
útil para ti; a fin de que logremos los objetivos planteados y te conviertas en un verdadero agente
de cambio en tu casa, tu comunidad, estado y país.

Estoy seguro de que será un semestre exitoso y lleno de satisfacciones, cierto que habrá
dificultades pero te pido que, en primera instancia, creas y confíes en ti mismo pues tienes la
capacidad para lograr cualquier cosa que te propongas, en segundo lugar, dile a la flojera que
abandone tu cuerpo estudioso y chambeador y finalmente, cuando todo parezca estar en tu contra,
recuerda que los aviones despegan en contra del viento, no con él

Iniciemos esta experiencia y disfrutemos del aprendizaje, ten presente que tú no eres mi alumno,
yo soy tu profesor y estoy a tus órdenes.

Atte.:

4
Mensaje para el padre o tutor
¡Saludos y buen día!

Tal vez le resulte extraño que me dirija a usted en este espacio cuando es su hijo(a) quién asiste a
la escuela, sin embargo es importante recordar que su papel como responsable de su hijo(a) es tan
relevante como lo que él hace en la escuela; por lo que NO se debe demeritar en ningún momento
la vigilancia del padre o tutor en el proceso educativo.

El éxito de la óptima formación académica de su hijo en la escuela se encuentra en función de tres


factores:

Sí uno de los tres elementos falla, repercute directamente en el aprovechamiento del alumno. Es
por ello que debe tener presente que su participación es muy importante para que su hijo(a)
alcance los objetivos no solo en esta materia sino en todas las asignaturas. Así podremos garantizar
que las actividades planeadas se realicen y con ello se dé paso al desarrollo de competencias en el
alumno.

La vigilancia constante del desempeño diario de su hijo(a) en la escuela, la supervisión de tareas y


trabajos extra clase así como su presencia en las juntas de padres pero más importante aún, la
motivación y entusiasmo que despierte en su hijo(a), son una fórmula con la que podremos lograr,
JUNTOS, éxito en el proceso formativo del alumno, a fin de que se convierta en un ciudadano de
bien.

En este manual encontrará espacios de supervisión para que conozca el avance de su hijo en clases,
los trabajos que realiza y las calificaciones obtenidas así como una planeación del curso; ninguno
de esos espacios servirá si no los revisa periódicamente.

5
Sé que tiene otras actividades para el sustento de su familia y el mantenimiento de su hogar y a
veces no es fácil, sin embargo le suplico haga el mayor esfuerzo; tal vez no diariamente porque no
le es posible, pero sí de manera frecuente. De este modo desarrollaremos juntos un hábito de
vigilancia y evitaremos sorpresas desagradables al final del semestre pero sobre todo,
coadyuvaremos, usted desde su casa y yo desde el aula, en la formación integral de su hijo(a);
principal (pero no único) responsable del proceso formativo, y en última instancia, único
beneficiado.

Para iniciar, le pido atentamente tenga a bien obsequiarme una copia de su credencial de elector,
solicite a su hijo(a) que la pegue en el espacio inferior designado para dicho fin. De esta forma
podre legitimar su firma de enterado en los espacios correspondientes.

Agradezco mucho su atención a este escrito, trabajemos junto a su hijo(a) en busca de prepararlo
mejor para los retos de la vida, a fin de que sea productivo para sí mismo y la sociedad en la que
vive, un ejemplo para la comunidad, su familia y amigos. Sí desea tratar algún asunto de manera
personal, me encuentro a sus órdenes. Recuerde que no es necesario que haya junta de padres para
que nos visite, las puertas del plantel están siempre abiertas.

¡Muchas gracias!

Atte.: - Docente de la capacitación para el trabajo

Pegue aquí la copia de su credencial de elector

Los hijos son el reflejo de los padres. 6


¿Cuáles son los deberes que se deben
cumplir?
Seguramente podremos establecer un debate en torno a TODOS los compromisos y acciones que
se deben llevar a cabo en el proceso de enseñanza-aprendizaje, podríamos incluso revisar
estándares internacionales y autores sobre dicho tema. Como no es el propósito entrar en el citado
debate pero sí clarificar los deberes de cada uno de los actores principales del proceso educativo,
se proponen a continuación tres listas de cotejo a fin de tener claros y presentes en todo
momento, al final de la lista hay dos espacios para ti, ¿Qué otros deberes faltan por cubrir?
¿Cumplió?
Los deberes del alumno:
Si No
Ser consciente de cuál es su papel en la escuela: aprender y estudiar
Asistir a todas las sesiones del ciclo escolar
Llegar puntualmente al aula o al laboratorio
Traer todos los materiales de estudio
Guardar el orden dentro del aula, asumir una actitud respetuosa y tolerante con sus
compañeros
Poner atención a la clase
Preguntar dudas al docente y a sus compañeros de manera respetuosa
Realizar las actividades planeadas
Entregar en tiempo y forma
Revisar retroalimentación del docente para identificar sus fallas y resolverlas
Realizar actividades extra clase (en su casa, la biblioteca, etc.)
Procurar hábitos de lectura

¿Cumplió?
Los deberes del docente:
Si No
Ser consciente de cuál es su papel en la escuela: guiar y facilitar el aprendizaje
Asistir a todas las sesiones del ciclo escolar
Iniciar puntualmente la clase
Aprovechar los materiales didácticos disponibles en la escuela
Salvaguardar el orden y hacer efectivo el reglamento del plantel
Tratar a los alumnos con respeto y cordialidad
Dominar su materia
Resolver dudas de manera clara, efectiva y oportuna
Diseñar actividades diversas que permitan el desarrollo de competencias
Definir criterios de evaluación previo al desarrollo de evidencias
Evaluar evidencias y productos de aprendizaje
Entregar retroalimentación de manera oportuna y eficiente

7
¿Cumplió?
Los deberes del padre o tutor:
Si No
Motivar a su hijo para asistir a la escuela
Desarrollar una visión de logro en el alumno, ¿Para qué estudiar?
Fomentar la puntualidad y asistencia del alumno
Facilitar los materiales de estudio
Estar al pendiente del alumno, no dejarlo solo
Vigilar el desempeño del alumno de manera periódica (revisar cuadernos)
Interesarse por las actividades que realiza el alumno
Involucrarse en el proceso formativo dentro de la escuela
Asistir a las juntas de padres que convoque el plantel
Participar en las actividades del plantel
Reconocer el esfuerzo del alumno, seguirlo motivando

Como veras, no se trata del esfuerzo de un solo individuo sino de la acción conjunta de varios
actores, cada uno con responsabilidades particulares que deben cumplir. Sin embargo, recuerda
que el principal responsable eres TÚ, el mayor peso se encuentra en lo que hagas o lo que dejes de
hacer. Recuerda por ejemplo que un alumno aprende con, sin y a pesar del docente. Por ello es
que tu participación debe ser activa y constante.

8
Lista de útiles
No solo en la primaria o secundaria debe definirse una lista de útiles, también es apropiado
hacerlo en el bachillerato pues se trata de los materiales que facilitan el ejercicio de enseñanza-
aprendizaje. Seguro has escuchado que “no se debe ir a la guerra sin fusil”. Bien, pues a
continuación se definen los instrumentos que te permitirán un óptimo ejercicio escolar:

Manual de prácticas y vigilancia académica

Cámara fotográfica de teléfono (cuando se solicite)

Dispositivo de almacenamiento USB

Lápiz, goma, bolígrafo y sacapuntas

Lápices de colores (básicos)

Pegamento y tijeras

Cartulina (cuando se solicite)

Fichas bibliográficas y recortes

9
Descripción Modulo IX
Módulo IX: Producción de animaciones con elementos multimedia

Justificación:

“La tecnología avanza y cambia día con día, en estos cambios se ven involucrados más elementos,
como la multimedia que es una combinación de texto, arte gráfico, sonido, animación, y video.

Estos deben de entrelazarse y hacer que cada uno interactué con los demás, por lo cual se necesita
saber cómo utilizar las herramientas computacionales y las tecnologías multimedia para que
trabajen en conjunto, con estos conocimientos el alumno podrá crear y diseñar, animaciones con
los diferentes elementos (multimedia), y poder ingresar al sector laboral y educativo, además del
desarrollo de habilidades y destrezas.”.

Resultado de aprendizaje del módulo:

“Producirá animaciones con elementos multimedia, introduciéndose a la animación a través de


Pencil, interfaz y las herramientas, además de conocer y manejar la línea de tiempo con sus
complementos para crear un proyecto de animación, asimismo desarrollará las competencias
genéricas necesarias para actuar con eficiencia no solo en el trabajo, si no a lo largo de la vida, de
conformidad con el desempeño integral de la capacitación en informática.”

Competencias a desarrollar para sexto semestre en el módulo IX:


Competencias genéricas Atributos
CG4: Escucha, interpreta y emite mensajes pertinentes
4.5 Maneja las tecnologías de la información y la
en distintos contextos mediante la utilización de
comunicación para obtener información y expresar ideas.
medios, códigos y herramientas apropiados.
5.1 Sigue instrucciones y procedimientos de manera
reflexiva, comprendiendo como cada uno de sus pasos
CG5: Desarrolla innovaciones y propone soluciones a
contribuye al alcance de un objetivo
problemas a partir de métodos establecidos.
5.6 Utiliza las tecnologías de la información y
comunicación para procesar e interpretar información
CG6: Sustenta una postura personal sobre temas de
6.4 Estructura ideas y argumentos de manera clara,
interés y relevancia general, considerando otros
coherente y sintética.
puntos de vista de manera crítica y reflexiva.
8.1 Propone maneras de solucionar un problema o
desarrollar un proyecto en equipo, definiendo un curso
CG8: Participa y colabora de manera efectiva en
de acción con pasos específicos.
equipos diversos
8.2 Aporta puntos de vista con apertura y considera los
de otras personas de manera reflexiva

10
Competencias profesionales de informática:
2. Localiza, obtiene información y se comunica utilizando las tecnologías de la información y de comunicación
(software).
3. Diseña y modifica las imágenes digitales, estáticas y dinámicas, empleando herramientas de software de diseño
(multimedia).

Objetos de aprendizaje

Bloque II:
Bloque I: Introducción a la animación
Pencil, interfaz y herramientas
9.2.1 Pencil
Descarga de Pencil
9.1. 1. Película
Instalación de Pencil
- Animación
Ejecución de Pencil
-Guion
Cerrar Pencil
- Escenario
9.2.2 Elementos de la interface
- Personaje
Barra de Titulo Barra de Menú
- Música de fondo
Área de trabajo Herramientas
- Efecto de sonido
Opciones Visualización
- Escanear
Línea de Tiempo
- Retoque fotográfico
9.2.3 Operaciones básicas con archivos; Nuevo, Abrir,
- Exportar
Guardar
- Conversores
9.2.4Herramientas
- Gestor de descargas
- Lápiz - Pincel
- Editor de audio
- Dibujar - Polilínea
- Editor de video
- Llenado - Selector de Color
- Selector Mover
Bloque III: Línea del tiempo y complementos Bloque IV: Proyecto de animación

Después de revisar la descripción, escribe: ¿De qué manera puedo emplear los aprendizajes que
logre? Complementa con una investigación sobre cortometrajes.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
11
Prácticas y ejercicios del
módulo IX:

Producción de
animaciones

12
Ejercicios del módulo IX – Bloque I
Ejercicio 1: Identificando conceptos básicos

Instrucciones: Selecciona dos películas de dibujos animados y realiza, para cada una el siguiente
análisis:

Nombre de la película:
Personajes:
Protagónico(s): Antagónico(s): Secundario(s): Alegórico(s):

Escenario(s):

Guion

Nombre de la película:
Personajes:
Protagónico(s): Antagónico(s): Secundario(s): Alegórico(s):

Escenario(s):

Guion

13
Ejercicio 2: Un título para la animación

Instrucciones: Observa los clips que se proyectan. Elige el título que consideres para la obra y
completa los datos que se solicitan

Nombre del cortometraje:


Personajes:
Protagónico(s): Antagónico(s): Secundario(s): Alegórico(s):

Escenario(s):

Guion

Nombre del cortometraje:


Personajes:
Protagónico(s): Antagónico(s): Secundario(s): Alegórico(s):

Escenario(s):

Guion

Una vez que conozcas el nombre original, discute con tus compañeros la experiencia de analizar
una obra artística desde diferentes puntos de vista, incluida la postura del autor.

14
Ejercicio 3: Introducción al storyboard

Instrucciones: Realiza una búsqueda en internet y responde a los siguientes cuestionamientos:

 ¿Para qué utiliza la industria cinematográfica el storyboard?

 ¿Qué elementos se definen en él?

 ¿Para qué te puede servir a ti?

Con los espacios disponibles, realiza un storyboard de 6 escenas del siguiente fragmento:
Los tres cerditos
Tres cerditos habían crecido alegres en una cabaña en el bosque, y como ya eran mayores, sus papas decidieron
que era hora de que cada uno construyera su propia casa. Los tres se despidieron y cada uno comenzó a pensar el
material con el que construiría.

Solicita instrucciones al docente para elaborar la Evidencia número 2, tomando el ejercicio previo
como un ejemplo del desempeño que se espera de ti.

15
Ejercicio 4: Primera fase del proyecto - Redactar un guion

 ¿Cuál fue el tema que te interesó?

 ¿Qué idea es la que deseas expresar o comunicar?

Reflexiona y medita un poco, cuando estés preparado, redacta aquí tu guion. Cuida la ortografía,
evita las redundancias. Antes de entregarlo para revisión, léelo un par de veces y analiza su
coherencia.

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
El título de mi proyecto es:

16
Evidencia 1

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributos 4.2 y 4.5 Competencia número 2
Revisa las páginas 10 y 11 de tu manual

Producto de aprendizaje: Tira de película de dibujos animados

Descripción:
a) El alumno elige libremente una película de dibujos animados y busca en internet las escenas más importantes de
toda la película, imprime cuatro imágenes por página (preferentemente a color).
b) Utilizando una cartulina cortada en cuatro tiras horizontales, las une y en ella pega las imágenes de acuerdo a la
secuencia de la película dejando un espacio para intercalar, título, descripción de cada escena y sus datos de
identificación.
c) Frente a cada escena, realizará la descripción de la imagen considerando:
 Personajes
 Diálogos (guion)
 Escenario
Instrumento de evaluación: Lista de cotejo

Valo ¿Realizó?
No Criterios de evaluación
r Si No
El alumno trae el material necesario para la elaboración de la evidencia
1 (imágenes impresas de las escenas de la película, cartulina, pegamento, tijeras, 30
plumones y lapiceros
2 Sigue las instrucciones del docente para la elaboración de su producto 10
3 Las imágenes presentan una secuencia acorde a la película que desea ilustrar 10
4 La descripción que redactó el estudiante es acorde a cada escena 20
El trabajo no presenta errores ortográficos y trabaja ordenadamente y con
5 20
limpieza
6 Exhibe su trabajo en el salón de clases 10
Total 100

Calificación

17
Evidencia 2

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencia número 2
Revisa las páginas 10 y 11 de tu manual

Producto de aprendizaje: Storyboard


Descripción:
a) El estudiante busca y selecciona un cuento corto
b) A partir del texto, realiza un guion gráfico empleando hojas blancas, cada recuadro deberá contener los
elementos básicos
 Número de escena
 Personajes
 Descripción
 Escenario

Instrumento de evaluación: Lista de cotejo

¿Realizó?
No Criterios de evaluación Valor
Si No
El alumno trae consigo hojas blancas y lápices de colores para la elaboración del guion gráfico
1 20
así como el cuento impreso que eligió
2 Divide la historia en por lo menos 10 escenas 10
3 Realiza los dibujos que grafiquen la historia en cada escena y colorea cada uno 20
Indica el número de escena, la descripción de cada una así como los elementos importantes
4 20
para la animación
El trabajo no presenta errores ortográficos ni de redacción, lo elabora ordenadamente y con
5 15
limpieza
6 Realiza y entrega su trabajo en tiempo y forma 15
Total 100

Calificación

18
Ejercicios del módulo IX – Bloque II
Práctica 1: El ambiente de trabajo en Pencil

Instrucciones:

a) Revisa los términos que se encuentren en inglés y anótalos en la tabla inferior. Busca su
traducción en el diccionario, apóyate con tu maestra de inglés para términos complejos.

Palabra Significado Palabra Significado Palabra Significado


Pencil

Palabra Significado Palabra Significado Palabra Significado

Palabra Significado Palabra Significado Palabra Significado


Piel de cebolla

Palabra Significado Palabra Significado Palabra Significado

Palabra Significado Palabra Significado Palabra Significado


Layer

Palabra Significado Palabra Significado Palabra Significado

b) A partir de tu experiencia con otros programas y sus ventanas así como con la definición
anterior, asocia los siguientes términos con la parte que correspondan en la ventana:

Elementos de la interface
a) Barra de Titulo e) Opciones
b) Barra de Menú f) Visualización
c) Área de trabajo g) Línea de Tiempo
d) Caja de herramientas

19
Práctica 2: Primera animación en Pencil

Instrucciones:

a) Explora las funciones de cada una de las herramientas contenidas en la caja de Pencil.

b) Desarrolla la animación que se sugiere a continuación (Regar plantas), aunque puede ser una que tú desees, solo
vigila que cumpla con los criterios:

20
Criterios:

Realiza las anotaciones de la siguiente manera:


Sketch Colouring tool Draw
¿Qué hace? ¿Qué se ¿Qué hace? ¿Qué se ¿Qué hace? ¿Qué se
configura? configura? configura?

Polyline Erase Clear


¿Qué hace? ¿Qué se ¿Qué hace? ¿Qué se ¿Qué hace? ¿Qué se
configura? configura? configura?

Fill Pick colour Select


¿Qué hace? ¿Qué se ¿Qué hace? ¿Qué se ¿Qué hace? ¿Qué se
configura? configura? configura?

Select/Move object Move/Zoom Canvas Modify Curve


¿Qué hace? ¿Qué se ¿Qué hace? ¿Qué se ¿Qué hace? ¿Qué se
configura? configura? configura?

Estas anotaciones te serán de gran utilidad en la elaboración de tu evidencia.


Evidencia 3

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencia número 2
Revisa las páginas 10 y 11 de tu manual

Producto de aprendizaje: Cuadro sinóptico


Descripción:
a) En un cuarto o media cartulina, el alumno sintetiza e ilustra cada una de las herramientas de la caja de Pencil
b) La información que deberá contener el cuadro es:
 Nombre de la herramienta
 Icono
 Función ¿Qué hace?
 ¿Qué se puede configurar de ella?
21
Instrumento de evaluación: Lista de cotejo

¿Realizó?
No Criterios de evaluación Valor
Si No
1 El alumno trae consigo hojas blancas y recortes de las herramientas de Pencil 15
2 Organiza la información según la estructura del cuadro sinóptico, utilizando llaves 15
Estructura la información de la práctica en el laboratorio y sintetiza los apartados que se
3 10
solicitan para las doce herramientas de Pencil
Coloca para cada elemento el nombre, su ícono así como funcionalidad y elementos
4 30
configurables
El trabajo no presenta errores ortográficos ni de redacción, lo elabora ordenadamente y con
5 10
limpieza
6 Realiza y entrega su trabajo en tiempo y forma 10
Total 100

Calificación

Evidencia 4

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencias número 2 y 3
Competencia número 5, atributo 5.6
Revisa las páginas 10 y 11 de tu manual

Producto de aprendizaje: Práctica - Desarrollar animaciones empleando la aplicación Pencil, haciendo uso de las
herramientas que provee, a fin de comunicar mensajes pertinentes y creativos.

Deseas desarrollar un comercial para concientizar al espectador sobre el cuidado del agua. Para ello realizarás una animación
en Pencil donde demuestres un dominio en el uso de las herramientas que ofrece.

Sigue los requerimientos indicados en la lista de cotejo, debes generar una secuencia similar a la que se muestra a
continuación. En ella, deberás animar un mundo lleno de agua al que le aparece un grifo por donde se empieza a derramar el
agua hasta quedarse vacío. Al final de la secuencia, agrega un mensaje personal que refleje tu postura en torno al cuidado del
agua.

22
¿Realizó?
No. Criterios de evaluación Valor
Si No
1 Abre Pencil e inicia su proyecto correctamente 10
Guarda su trabajo y evita pérdidas por la inestabilidad del software
2 10
(Nombre_Evidencia 4)
3 Emplea el pincel, el lápiz y la pluma para dibujar los elementos de la secuencia 15
4 Maneja la paleta de colores asignando a cada elemento su color particular 15
5 Emplea la polilínea y la herramienta de relleno para complementar sus dibujos 15
Hace uso de herramientas complementarias para corregir errores (borrador y
6 10
limpiador)
7 Utiliza por lo menos 40 fotogramas en su animación 15
8 Agrega un mensaje personal que refleje su postura en torno al cuidado del agua 10
Total 100

Calificación

Ejercicio 5: Segunda fase del proyecto – Elaborar Storyboard


Retoma el guion que redactaste en la página 15 y realiza los gráficos que te guiaran en tu animación.

23
24
Práctica 3:

Instrucciones:

Abre un archivo nuevo de Pencil, utiliza las herramientas de la caja y los fotogramas necesarios para realizar las
siguientes secuencias de animación:

Reloj

Caminando

Manzana

25
Ejercicios del módulo IX – Bloque III
Ejercicio 6: Los elementos de la línea del tiempo

Instrucciones: Relaciona ambas columnas, coloca el número del planteamiento en los paréntesis
con la respuesta apropiada.

1. Capa Vectorial ( )

2. Ejecutar animación ( )

3. Capa de Cámara ( )

4. Fotogramas por segundo ( )

5. Repetir animación ( )

6. Capa de Sonido ( )

7. Agrega quitar fotogramas ( )

8. Piel de cebolla ( )

9. Capa de Mapa de Bits ( )

10. Agregar quitar capas ( )

Práctica 4: Trabajo con múltiples capas

Instrucciones de aplicación:

1. Accede al programa Pencil.


2. Crea un archivo nuevo de animación.
3. Dedica una capa para dibujar un paisaje.
4. Activa el pincel color negro y dibuja: montañas, un sol y una cabaña.
5. Asigna el nombre paisaje.
6. Dedica una capa para mover un avión en el cielo.
7. Agrega la capa, diferenciándola con el nombre de avión, agrega los fotogramas y dibuja un
avión.
8. Dedica una capa para mover un auto en el piso.
26
9. Agrega 1 capa, diferenciándola con el nombre de auto y dibuja el auto.
10. Agrega una última capa, diferenciándola con el nombre de humo, agrega los fotogramas y
dibuja el humo que sale de la chimenea de la cabaña.
11. Regresa a la primera posición.
12. Realiza una revisión visual a la presentación (mediante el botón de reproducción).
13. Copia las pantallas de los fotogramas, agrega nombre, grupo, número de práctica.

Para docente – Guía de observación


No ¿Realizó?
Criterios de evaluación
. Si No
1 Ejecuta la aplicación
2 Crea un nuevo archivo de animación
3 Dedica una capa para dibujar un paisaje
Activa el pincel de diversos colores y dibuja montañas, un solo y una cabaña más
4
los elementos que decida
5 Le asigna a la capa el nombre “Paisaje”
6 Dedica una capa para mover un avión en el cielo
Agrega la capa, diferenciándola con el nombre de avión, agrega los fotogramas y
7
dibuja un avión
8 Dedica una capa para mover un auto en el piso
9 Agrega 1 capa, diferenciándola con el nombre de auto y dibuja el auto
Agrega una última capa, diferenciándola con el nombre de humo, agrega los
10
fotogramas y dibuja el humo que sale de la chimenea de la cabaña
11 Regresa a la primera posición
12 Visualiza los efectos mediante el botón de reproducción
Copia las pantallas de los fotogramas, agrega su nombre, grupo, número de
13
práctica
Total

Calificación

27
Evidencia 5

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencia número 2
Revisa las páginas 10 y 11 de tu manual

Producto de aprendizaje: Crucigrama

Descripción:

Como una actividad para reforzar y comprobar los contenidos teóricos del bloque y del módulo en general, diseña
y complementa un crucigrama, donde puedas escribir los términos que correspondan a la descripción
proporcionada.

La estructura del crucigrama es importante pero más aún lo son las descripciones que realices. Con tus propias
palabras, formula una oración que permita identificar un concepto.

Los términos que deberás emplear son los siguientes:


 Fotograma  Cámara
 Vectorial  Personaje
 Pencil  Limpiador
 Sonido  Exportar
 Importar  Storyboard
 Animación  Relleno

Tú decides cuales serán horizontales y cuales verticales, mira el siguiente ejemplo:

VERTICALES HORIZONTALES

1.- Aplicación libre de código abierto, útil para realizar 1.-Capa que posibilita el trabajo con el modificador de
animaciones sencillas curvas

¿Realizó?
No. Criterios de evaluación Valor
Si No
Realiza el crucigrama en una hoja de opalina, trae consigo el material necesario para
1 10
trabajar
2 Rescata una conceptualización personal de cada uno de los términos indicados 20
3 Redacta las sentencias de manera coherente y sin faltas ortográficas 20

28
¿Realizó?
No. Criterios de evaluación Valor
Si No
Acomoda los espacios necesarios de acuerdo con la estructura propia de un
4 20
crucigrama
5 Entrega en tiempo y forma 10
En binas, intercambia su trabajo con su compañero y resuelve correctamente el que le
6 20
fue asignado
Total 100

Calificación

Evidencia 6
Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencias número 2 y 3
Competencia número 5, atributo 5.6
Revisa las páginas 10 y 11 de tu manual
Producto de aprendizaje: Práctica – la capa vectorial y su funcionalidad como herramienta de retoque
Instrucciones: Abre Pencil y sigue las indicaciones:

29
¿Realizó?
No. Criterios de evaluación Valor
Si No
1 Cumplió con el apartado 1 10
2 Cumplió con el apartado 2 10
3 Cumplió con el apartado 3 10
4 Cumplió con el apartado 4 10
5 Cumplió con el apartado 5 10
Con los principios abarcados, genera un diseño propio que demuestre el dominio de
6 50
la herramienta informática con calidad
Total 100

Calificación

Práctica 5: Continuación del trabajo con capas

Instrucciones: Con las herramientas disponibles en la capa vectorial, realiza las siguientes secuencias de
animación:

Fases de la luna

Caminando (2)

Saltando

30
Prácticas del módulo IX – Bloque IV
Evidencia 7

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencias número 2 y 3
Competencia número 5, atributo 5.6
Competencia número 6, atributo 6.4
Revisa las páginas 10 y 11 de tu manual

Producto de aprendizaje: Cortometraje

Nivel de desempeño
Excelente Satisfactorio Puede mejorar Inadecuado
4 3 2 1
Criterio
El storyboard está El storyboard está El storyboard tiene
completo con dibujos relativamente completo omisiones significativas El storyboard no está
para cada escena, notas con dibujos para la en el planeamiento de las terminado ó está tan
detalladas en los títulos, mayoría de las escenas y escenas. Hay algunos incompleto que no
transiciones, efectos notas en los títulos, dibujos y notas en los podría ser usada ni
especiales, sonido, etc. El transiciones, efectos títulos, transiciones,
Storyboard storyboard refleja un especiales, sonido, etc. El efectos especiales, sonido,
como una guía
planeamiento y una storyboard refleja un etc. El storyboard refleja general. El storyboard
organización planeamiento y una intentos de planeamiento de cuentos refleja muy
sobresalientes para los organización efectivos y organización para los poco planteamiento
efectos visuales en el para los efectos visuales efectos visuales en el de los efectos visuales.
cortometraje en el video. video.
El guion tiene algunas
El guion está
fallas mayores. No
completo y está claro. El guion está bastante
está siempre claro lo
El mensaje que quiere completo. Está claro No hay guion o es
que desea comunicar.
Guion comunicar es lo que quiere expresar. una copia de una obra
El guion muestra un
sobresaliente. El guion El guion muestra existente
intento de
es bastante planeamiento.
planeamiento, pero
profesional.
parece incompleto.
La calidad del video y La calidad del video y La calidad no es muy
La calidad del video y
el enfoque fue el enfoque fue buena, pero el enfoque
Calidad el enfoque no es muy
excelente en todas sus excelente en la mayor fue excelente en todas
buena.
partes. parte del video. las partes del video
Utiliza Utiliza la técnica Stop
Utiliza
adecuadamente la Motion y consigue el No utiliza ninguna
adecuadamente la
técnica Stop Motion y efecto de movimiento técnica de animación y
técnica Stop Motion y
Animación consigue el efecto de en su cortometraje el trabajo parece una
consigue el efecto de
movimiento en su aunque presenta transición de
movimiento en su
cortometraje aunque pausas constantes y diapositivas
cortometraje
presenta pausas transiciones simples

31
Hay un uso correcto El audio es
Hay un uso expresivo del audio. Sin descuidado. Las El audio deja mucho
del audio. Las embargo, las palabras, palabras, los ruidos y que desear. Las
palabras, los ruidos y los ruidos y la música la música no están palabras, los ruidos y
la música, no siempre están subordinados a la la música no están
subordinados a la subordinados a la estructura narrativa subordinados a la
Música y sonido
estructura narrativa estructura narrativa del cortometraje. Las estructura narrativa
del cortometraje, del cortometraje ni funciones de estos del cortometraje.
producen significados producen, de manera elementos sonoros Estos elementos
sugerentes y sistemática, dentro del sistema sonoros parecen haber
complejos. significados sugerentes textual son difíciles de sido escogidos al azar.
y complejos determinar

Puntaje/Calificación:

20-18 / 10 17-15 / 9 14-12 / 8 11-9 / 7 8-6 / 5

Evidencia 8

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencias número 2 y 3
Competencia número 5, atributo 5.6
Competencia número 8, atributo 8.1
Revisa las páginas 10 y 11 de tu manual

Producto de aprendizaje: Previo para video musical

Instrucciones:

a) Pega abajo la letra impresa de la canción elegida:

Autor/interprete: Año: Género: La elegimos porque…

32
b) Realiza un storyboard básico que te facilite el proceso de animación

33
No ¿Realizó?
Criterios de evaluación Valor
. Si No
1 Formo equipos de cuatro integrantes 10
2 Consensó y eligió una canción 10
3 Buscó la información relevante y realizó el registro 20
4 Realizó un storyboard siguiente la letra de la canción, a mano y con color 20
Trabajó colaborativamente con sus compañeros, identificando roles y
5 20
responsabilidades
Trabajó en tiempo y forma, trayendo material y realizando los ejercicios en
6 20
clase
Total 100

Calificación

34
Evidencia 9

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencias número 2 y 3
Competencia número 5, atributo 5.6
Competencia número 8, atributo 8.1
Revisa las páginas 10 y 11 de tu manual

Producto de aprendizaje: Video musical

Instrucciones:

a) Descarga las imágenes para animar tu guion (escenario y personajes) – Mira el ejemplo:

b) Utiliza las herramientas computacionales necesarias (LibreOffice Draw) para modificar las imágenes:

c) Genera las escenas requeridas e intégralas en la animación:

35
¿Realizó?
No. Criterios de evaluación Valor
Si No
Los integrantes del equipo descargan las imágenes necesarias y delegan el trabajo
1 10
individual
Emplean software para manipulación de gráficos (LibreOffice Draw) para editar las
2 20
imágenes y generar las necesarias
Utilizan Pencil o Movie Maker para generar la secuencia de imágenes y producir el
3 20
efecto de movimiento
4 Integran a la sucesión de imágenes, el audio de la canción 20
5 Obtienen el producto final y lo preservan en un dispositivo de almacenamiento 10
6 Publican su trabajo en YouTube 20
Total 100

Calificación

36
Registro de evidencias Modulo IX
Firma del padre o
No. Nombre y descripción Calificación
tutor
1 Tira de película animada (7%)
2 Storyboard (7%)
3 Cuadro sinóptico (7%)
4 Práctica (7%)
5 Crucigrama (7%)
6 Práctica (7%)
7 Cortometraje (23%)
8 Previo de proyecto video musical (7%)
9 Video musical (7%)
10 Manual de trabajo (7%)
11 Asistencia (7%)
12 Conducta (7%)
13
14
15

Promedio y calificación final del módulo IX

Revisión del docente Firma del padre o tutor

37
Autoevaluación del Módulo IX por
desempeño personal – Ruta crítica
La calificación obtenida debe estar en función del esfuerzo que hayas imprimido, realiza un
ejercicio de autoanálisis y responde a continuación:

¿Asististe
No Si
a todas
las clases?

¿Cuáles fueron las


razones por las que ¿Pusiste
No Si
faltaste? atención a
la clase?

¿Qué te distrajo?
No ¿Realizaste las Si
Faltas totales: actividades
¿Qué tanto te intereso planteadas?
la clase?
¿Cuál fue el
impedimento para que
no realizaras las No ¿Estas conforme Si
¿Cuál es tu propósito
actividades (prácticas y con los
en la escuela?
ejercicios)? resultados?

A B

¿Cuál fue el
impedimento para que
no realizaras las
actividades (prácticas y ¿Cuáles son tus
ejercicios)? objetivos para el
siguiente modulo?

38
Autoevaluación del Módulo IX por
competencias del Marco Curricular Común
En el apartado de “Descripción del módulo” (Página 10) se especifican las competencias
genéricas del Marco Curricular Comuna para desarrollar en este nivel educativo y con esta
asignatura, mismas que fueron definidas por el cuerpo colegiado de docentes y autoridades
educativas. Sin embargo, el desarrollo de competencias no puede ser limitado, por lo que te
solicitamos realices una autoevaluación respecto a las competencias y sus atributos que consideras,
desarrollaste en este módulo aunque no estuvieron contempladas. Revisa con cuidado cada
atributo y describe si crees que lo desarrollaste y en qué medida:
1: No lo desarrollé
2: Inicié con su desarrollo
3: Lo desarrolle por completo

 Marca con una X:

1 2 3
Competencias Atributos
1. Se conoce y valora a sí 1.1 Enfrenta las dificultades que se le presentan y es consciente de sus valores, fortalezas y debilidades.
mismo, y
aborda problemas y retos, 1.2 Identifica sus emociones, las maneja de manera constructiva y reconoce la necesidad de solicitar apoyo
ante una situación que lo rebase.
teniendo en cuenta los 1.3 Elige alternativas y cursos de acción con base en criterios sustentados y en el marco de un proyecto de
objetivos vida.

que persigue. 1.4 Analiza críticamente los factores que influyen en su toma de decisiones.

1.5 Asume las consecuencias de sus comportamientos y decisiones.

1.6 Administra los recursos disponibles, teniendo en cuenta las restricciones para el logro de sus metas.

2. Es sensible al arte y 2.1 Valora el arte como manifestación de la belleza y expresión de ideas, sensaciones y emociones.
participa
en la apreciación e 2.2 Experimenta el arte como un hecho histórico compartido, que permite la comunicación entre individuos
de sus expresiones en y culturasa en
espacio, el tiempo
la vez y el
que desarrolla un sentido de identidad.
interpretación
distintos
géneros. 2.3 Participa en prácticas relacionadas con el arte.
3. Elige y practica estilos 3.1 Reconoce la actividad física como un medio para su desarrollo físico, mental y social.
de vida 3.2 Toma decisiones a partir de la valoración de las consecuencias de distintos hábitos de consumo y
saludables. conductas de riesgo.
3.3 Cultiva relaciones interpersonales que contribuyen a su desarrollo humano y el de quienes lo rodean.
4. Escucha, interpreta y 4.1 Expresa ideas y conceptos mediante representaciones lingüísticas, matemáticas o gráficas.
emite
mensajes pertinentes en 4.2 Aplica distintas estrategias comunicativas según quienes sean sus interlocutores, el contexto en el que
distintos se encuentra y los objetivos que persigue
contextos, mediante la
utilización
de medios, códigos y 4.3 Identifica las ideas clave en un texto o discurso oral e infiere conclusiones a partir de ellas.

herramientas apropiados. 4.4 Se comunica en una segunda lengua en situaciones cotidianas.


4.5 Maneja las tecnologías de la información y la comunicación para obtener información y expresar ideas.

39
5. Desarrolla 5.1 Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno de sus pasos
innovaciones y contribuye al alcance de un objetivo

propone soluciones a
problemas,
a partir de métodos
5.2 Ordena información de acuerdo con categorías, jerarquías y relaciones.
establecidos.
5.3 Identifica los sistemas, reglas o principios medulares que subyacen a una serie de fenómenos.
5.4 Construye hipótesis, diseña y aplica modelos para probar su validez.
5.5 Sintetiza evidencias obtenidas mediante la experimentación para producir conclusiones y formular
nuevas preguntas.
5.6 Utiliza las tecnologías de la información y comunicación para procesar e interpretar información.
6. Sustenta una postura 6.1 Elige las fuentes de información más relevantes para un propósito específico y discrimina entre ellas de
acuerdo con su relevancia y
personal
sobre temas de interés y confiabilidad.
relevancia general, 6.2 Evalúa argumentos y opiniones e identifica prejuicios y falacias.
otros puntos de vista de
considerando 6.3 Reconoce los propios prejuicios, modifica sus puntos de vista al conocer nuevas evidencias, e integra
nuevos conocimientos y
manera
perspectivas al acervo con el que cuenta.
crítica y reflexiva.
6.4 Estructura ideas y argumentos de manera clara, coherente y sintética.

·---------------
7. Aprende por iniciativa e --------------------------------------------
7.1 Define metas y da seguimiento a sus procesos de construcción de conocimiento. -- - --
propio a-----
interés lo largo de la - - -
vida. controlando ---------------
7.2 Identifica las actividades que le resultan de menor y mayor interés o dificultad, reconociendo y

sus reacciones frente a retos y obstáculos.


7.3 Articula saberes de diversos campos y establece relaciones entre ellos y su vida cotidiana.

8. Participa y colabora de 8.1 Propone maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo un curso
manera de acción con pasos específicos.
efectiva en equipos
diversos.
8.2 Aporta puntos de vista con apertura y considera los de otras personas de manera reflexiva.
8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta
dentro de distintos equipos de
trabajo.
9. Participa con una 9.1 Privilegia el diálogo como mecanismo para la solución de conflictos.
conciencia
cívica y ética en la vida de
su
comunidad, región, 9.2 Toma decisiones a fi n de contribuir a la equidad, bienestar y desarrollo democrático de la sociedad.
México y el
mundo.
9.3 Conoce sus derechos y obligaciones como mexicano y miembro de distintas comunidades e
instituciones, como
participación y reconoce
herramienta
el valorpara
de laejercerlos.
9.4 Contribuye a alcanzar un equilibrio entre el interés y bienestar individual y el interés general de la
sociedad.
9.5 Actúa de manera propositiva frente a fenómenos de la sociedad y se mantiene informado.
9.6 Advierte que los fenómenos que se desarrollan en los ámbitos local, nacional e internacional ocurren
dentro de un contexto global
interdependiente.
10.1 Reconoce que la diversidad tiene lugar en un espacio democrático de igualdad, de dignidad y
10. Mantiene una actitud derechos de todas las personas, y rechaza
respetuosa hacia la toda forma de discriminación.

interculturalidad y la 10.2 Dialoga y aprende de personas con distintos puntos de vista y tradiciones culturales mediante la
diversidad ubicación de sus propias

de creencias, valores, circunstancias en un contexto más amplio.


ideas y 10.3 Asume que el respeto de las diferencias es el principio de integración y convivencia en los contextos
prácticas sociales. local, nacional e internacional.

40
11. Contribuye al 11.1 Asume una actitud que favorece la solución de problemas ambientales en los ámbitos local, nacional e
desarrollo de manera
sustentable internacional.
crítica, 11.2 Reconoce y comprende las implicaciones biológicas, económicas, políticas y sociales del daño
ambiental en
con acciones responsables.
un contexto global interdependiente.

11.3 Contribuye al alcance de un equilibrio entre los intereses de corto y largo plazo con relación al
ambiente.

41
Descripción Modulo X
Módulo X: Elaboración de páginas web

Justificación:

“En el último módulo de la capacitación de informática sexto semestre, el alumno será capaz de
crear páginas web, con el software de aplicación necesario, abordando temáticas como, aspectos de
la página, editor, preparación de sitio y la publicación de la página conforme a los conocimientos,
habilidades y destrezas adquiridas durante el presente y anteriores módulos, y con ello podrá
ingresar al sector laboral y educativo, aplicando lo aprendido durante estos diez módulos de
capacitación, en los cuatro semestres impartidos por el Colegio de Bachilleres del Estado de
Hidalgo”.

Resultado de aprendizaje del módulo:

“Elaborará su primera página Web, con lo básico como el aspecto de la página, utilizando el
editor Web, preparando un sitio Web y publicando la página en un sitio, además desarrollará las
competencias genéricas necesarias para actuar con eficiencia no solo en el trabajo, si no a lo largo
de la vida, de conformidad con el desempeño integral de la capacitación en informática”.

Competencias a desarrollar para sexto semestre en el módulo X:


Competencias genéricas Atributos
CG4: Escucha, interpreta y emite mensajes
pertinentes en distintos contextos mediante la 4.5 Maneja las tecnologías de la información y la comunicación
utilización de medios, códigos y herramientas para obtener información y expresar ideas.
apropiados.
5.1 Sigue instrucciones y procedimientos de manera reflexiva,
CG5: Desarrolla innovaciones y propone comprendiendo como cada uno de sus pasos contribuye al
soluciones a problemas a partir de métodos alcance de un objetivo
establecidos. 5.6 Utiliza las tecnologías de la información y comunicación
para procesar e interpretar información
CG6: Sustenta una postura personal sobre
temas de interés y relevancia general, 6.4 Estructura ideas y argumentos de manera clara, coherente y
considerando otros puntos de vista de manera sintética.
crítica y reflexiva.
8.1 Propone maneras de solucionar un problema o desarrollar
un proyecto en equipo, definiendo un curso de acción con
CG8: Participa y colabora de manera efectiva
pasos específicos.
en equipos diversos
8.2 Aporta puntos de vista con apertura y considera los de
otras personas de manera reflexiva

42
Competencias profesionales de informática:
1. Desarrolla documentos electrónicos, de acuerdo con los requerimientos establecidos (software).
2. Localiza, obtiene información y se comunica utilizando las tecnologías de la información y de comunicación (software).
8. Diseña y actualiza páginas Web, de acuerdo con los requerimientos del usuario (multimedia).

Objetos de aprendizaje

Bloque II:
Bloque I: Introducción a las páginas web
HTML básico
10.1.1 Introducción
10.1.2 Conceptos básicos
 Internet
 Navegadores
 Servidores 10.2.1 Etiquetas
 Protocolos  Estructura básica de la página
 Sitio web  Estructura del texto
 Editor web  Imágenes
 URL  Enlaces
 HTML  Divisiones o capas
 CSS
 Redes sociales
 Redes informáticas

Bloque III: Aspecto de la página Bloque IV: Editor web


10.3.1 Las ventajas que presenta el uso de CSS
10.3.2 Terminología empleada en CSS
10.3.3 Para crear una hoja de estilo externa
10.3.4 Crear reglas de estilo 10.4.1 ¿Qué es un editor web?
10.3.5 Estilos 10.4.2 Elegir un editor.
10.3.6 Formato del Texto
10.3.7 Bordes
10.4.3 El entorno del editor web
10.3.8 Márgenes 10,4.4 Crear y guardar una página.
10.3.9 Fondo 10,4.5. Escribir el texto en la página web
10.3.10 Como declarar un estilo
10.3.11 Donde declarar un estilo
10.3.12 Orden de aplicación de los estilos CSS
Bloque V: Preparar un sitio web Bloque VI: Publicar el sitio web
10.5.1 Que es un sitio web
10.5.2 La temática del sitio
10.5.3 Organizar los archivos
10.5.4 Navegación 10.6.1 Subir la página a Internet
10.5.5 Estructura del Menú
10.5.6 Estructura de la página

43
Después de revisar la descripción, escribe: ¿De qué manera puedo emplear los aprendizajes que
logre?___________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Busca información sobre el uso de las páginas web en el ambiente escolar y laboral, ¿Para qué son
empleadas?

Páginas web en el ámbito escolar: Páginas web en el ámbito laboral:


 Entregar trabajos o tareas académicas  Anunciar y vender productos
___________________________________ __________________________________
___________________________________ __________________________________
___________________________________ __________________________________
___________________________________ __________________________________
___________________________________ __________________________________
___________________________________ __________________________________

 Facebook es una red social que te permite publicar fotos, subir videos y expresarte.
Indica, ¿Qué limitaciones tiene? ¿Puedes cambiar el color de fondo o la orientación de las
fotos?

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Alumno(a), ¿Para qué crees que vayas a usar tú las páginas web?

44
Prácticas del módulo X:

Elaboración de
páginas web

45
Prácticas del módulo X – Bloque I
Ejercicio 1: Las páginas web y yo

Instrucciones: Completa los siguientes cuadros:

 Página de internet que visito:


¿Con que propósito la visito?

Considero que esta página ha cambiado al mundo por:


_______________________________________________________________________
_______________________________________________________________________

 Página de internet que visito:


¿Con que propósito la visito?

Considero que esta página ha cambiado al mundo por:


_______________________________________________________________________
_______________________________________________________________________

Investiga y anota cuál fue la contribución de los siguientes personajes:

Mark Zuckerberg Chad Hurley & Steve Chen

Tim Berners-Lee Evan Williams, Biz Stone, Jack Dorsey, Evan


Henshaw-Plath y Noah Glass

 Reflexiona, ¿Hay una diferencia intelectual significativa entre ellos y tú? ¿Son acaso más inteligentes?

 ¿Qué necesitas tú para cambiar el mundo?

46
Ejercicio 2: El impacto del internet en la sociedad

Responde a las siguientes preguntas:

- ¿Cuál es el impacto del internet en tu vida cotidiana? - ¿Cómo era la forma de comunicarnos antes del internet y
como es después?

Antes:

Después:

- ¿Qué es lo que más llama tu atención de los servicios de - ¿Qué te gustaría aprender en este módulo?
internet?

Comparte tus respuestas con tus compañeros:

Evidencia 1

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencia número 2
Competencia número 8, atributo 8.2
Revisa las páginas 41 y 42 de tu manual

Producto de aprendizaje: Cuadro sinóptico


Instrucciones:
a) Formar equipos de 4 integrantes:

Equipo:
Nombre:
Nombre:
Nombre:
Nombre:

b) Reunidos en equipos, se reparten los siguientes temas:

47
Internet Navegadores
Servidores Protocolos
Sitio web Editor web
URL HTML
Redes sociales Redes informáticas

c) Realizar en opalina, un cuadro sinóptico que reúna los datos más importantes sobre el tema, todos los
miembros del equipo deben realizar el producto. Observa el ejemplo a continuación:

d) Compleméntalo con recortes y gráficos que ilustren cada criterio


Instrumento de evaluación: Lista de cotejo

¿Realizó?
No Criterios de evaluación Valor
Si No
El alumno trae consigo hojas de opalina, tijeras, pegamento y la información
1 15
de su tema así como gráficos del mismo
Cada estudiante revisa y estructura la información que trajo para identificar
2 15
ideas principales
Elabora el organizador siguiendo la estructura del cuadro sinóptico, a partir
3 20
de términos principales e ideas secundarias
Complementa cada apartado con un gráfico alusivo que clarifique la idea y
4 20
enriquezca el producto de aprendizaje
El trabajo no presenta errores ortográficos ni de redacción, lo elabora
5 15
ordenadamente y con limpieza
6 Realiza y entrega su trabajo en tiempo y forma 15
Total 100

Calificación

Evidencia 2

48
Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencia número 2
Competencia número 5, atributo 5.6
Revisa las páginas 41 y 42 de tu manual

Desempeño de aprendizaje: Exposición


Instrucciones:

a) A partir del trabajo individual, cada equipo revisa los aspectos más relevantes del cuadro sinóptico para
estructurar una presentación electrónica

b) Los estudiantes elaboran una presentación electrónica (PowerPoint o Impress) que sirva como sustento a la
exposición. Observa el ejemplo:

c) El equipo delega los temas y los expone en plenaria frente al grupo


d) Responden efectivamente las dudas de sus compañeros

49
Instrumento de evaluación: Rúbrica

Nivel de desempeño
Excelente Satisfactorio Puede mejorar Inadecuado
4 3 2 1
Criterio
D a f o r m a t o a la p r
es enta ci ón apl ica nd o Da f or ma to a l a pr es
Da f or ma to a la pr es en
diseño de la di e nt ac ió n ap li ca n do
tación aplicando dise
a p o s i t i v a o u s a n d o p la di s eño de la dia
ño de la di a po si ti v
n t i l l a d e d i s e ñ o. U t i l i z po si ti va o us ando p la
a o u sando plant illa de Da forma to a
a diferentes t ipo s de nt il la de di s e ño . U t i l
di s eño . Ut il iz a dif eren la pr esent ac ió n ap
letra d e acuerdo a los
Uso de la paquetería títulos de la prese
t es ti pos d e l et ra d e a iz a di f e re nt e s t i pos licando diseño de la
cuerdo a los tít ul de letra de acuerdo diapositiva o usando pl
nta ció n. Aplica anim a
os de la pr es a nt il l a d e di s eño .
ación a la pres ent
e nt ac i ó n. Ap los títulos
ación, establece hiperví
lica animación a la pres de la
ncu l os ex ternos e inte
entaci ón. pr esent aci ó n.
rnos a l o largo de
la presentació n
T o d o s l o s es t u d i a n t e s e n A l g u n o s d e l o s e s t u d i a n t es e n
el T o d o s l o s es t u d i a n t e s e n el Va r i o s e s t u d i a n t es e n e l g r u p
gr up o puede n c o nt e s t el gr u p o pu e d e n c ont e gr up o puede n c o nt e s t o
Generación de ar sta r a d e cu a d a m e n t e l a m a y o ar pa r e c e n t en er poco
ad e cu a d a m e n t e t o d a s l r í a d e l as p r eg u n t as r e l a c i o n ad e cu a d a m e n t e a l g u n a s d e l conocimi ent o s obr e l
conocimiento as p r e g u nt a s r e l a c i o n a d as c o ad a s c o n l a p r e s e n t a c i ó n y e as p r e g u nt a s r e l a c i o n a d as c o ai n f o r m a c i ó n y p r o c es
n lainform ación en la pres en l p r o c e s ot é c n i c o u s a d o p a r a n lainform ación en l a pres e os t é c n i c os u s a d o s e n
tación y el proces o t éc nico u cr e ar l a . nt a c i ó n y e l p r o c e s o t é c n i c o u la p r es e nt a c i ó n
sa d o p a r a c r e ar l a . sado paracrearla.
L a pr es e n t a c i ó n t i e n e
un L a pr es e n t a c i ó n t i e n e La pr es ent ación y l
Atractivo y format o e x c ep c i o n a l un L a pr es e n t a c i ó n t i e n e l a
ment e f o r m a t o a t r a ct i v o y ai n f o r m a c i ó n b i e n o r g a n i z a d or g a n i z a c i ó n d e l m a t e r i a l
organización at r a ct i v o y u n a i n f or m a c i ó n una a es
bien informació n bien organizada confus o par a el lect or .
or g a n i z a d a
R e g i s t r o s c u i d a d o s os y p r
Reg ist r os cu idados os y pr Reg ist r os cu idados os y pr L a s f u e nt e s no
e c is os
e c is os e c is os son
son mant enidos
son m a n t e n i d os par son m a n t e n i d os par d o cu m e n ta d a s e n f o r m
Fuentes pa r a d o c u m e nt a r e l o r i g e
ad o cu m e n ta r e l o r i g e n d e 9 4 - ad o cu m e n ta r e l o r i g e n d e 8 4 - ap r e c is a n i s o n r e g is t r a d as e
n d e 95 -
85% d e l a i n f o r m a c i ó n u s ad a 75% d e l a i n f o r m a c i ó n u s ad a nmuc ha d e la inf or mación us
100 % d e l a i nf or ma c i ón us a d
e n l a p r es e nt a c i ó n e n l a p r es e nt a c i ó n ad a e n l a p r e s e nt a c i ó n
a e n l a p r es e nt a c i ó n
M e n os d e l 8 0 % d e
99 - 9 0 % d e l a i n f or m a c i ó n u s la
Toda la i nfor ma ci ón u s ada e 89 - 8 0 % d e l a i n f or m a c i ó n e n
Contenido y precisión n l a p r es e nt a c i ó n e s c o r r e c t a
ad a e n l a p r e s e nt a c i ó n e s c o r r
la p r es e nt a c i ó n e s c o r r e ct a i n f o r m a c i ó n e n l a p r es e n t a c
e ct a ión
es c o r r e c t a.

Puntaje/Calificación:

20-18 / 10 17-15 / 9 14-12 / 8 11-9 / 7 8-6 / 5

50
Prácticas del módulo X – Bloque II
Práctica 1: Mi primera página web

Instrucciones:

a) Inicia sesión en Windows, crea en el escritorio una carpeta con tu nombre y el del modulo

b) Abre el Bloc de Notas y escribe el código que se muestra a continuación, tal y como se encuentra escrito:

<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<p>Hola mundo</p>
</body>
</html>
Fuente: Manual Elaboración de páginas web Kompozer. COBAEH Plantel Tlahuelilpan

c) Un archivo que se crea con el Bloc de notas tiene por defecto la extensión .txt; así que cuando lo guardes dentro
de la carpeta, borra esa extensión y escribe: Practica01.html

d) Ahora, utilizando el Explorador de Windows, abrimos la carpeta en la que hemos guardado el archivo y
hacemos doble clic sobre él. Responde las siguientes preguntas:

 ¿Con qué icono aparece el archivo?

 De lo que escribiste en el código, ¿Qué se visualiza en pantalla? ¿Dónde está lo escrito entre <>?

e) Sigue las instrucciones del docente para modificar esa primera página web, anota los cambios realizados y los
resultados mostrados en pantalla

Cambio ¿Qué ocurrió? Cambio ¿Qué ocurrió?

51
Ejercicio 3: Glosario básico
Instrucciones:
En HTML se utilizan muchas palabras en inglés para configurar las características de las páginas, así que investiga
los siguientes términos, facilitaran tu trabajo próximo. Solicita el apoyo de tu maestra de inglés, además puedes
utilizar un diccionario o internet.

Posición en pantalla Atributos de texto


 Izquierda  Tamaño
 Derecha  Color
 Centro  Rostro
 Superior  Superior
 Inferior  Inferior
 Ancho
 Alto
Colores
 Verde  Morado
 Azul  Blanco
 Gris  Negro
 Rosa  Rojo
 Dorado  Cian
 Plateado  Amarillo
 Violeta  Café

Ejercicio 4: Investigación etiquetas HTML


Busca en internet o en la bibliografía disponible en el plantel, información que te permita completar los siguientes
cuadros:

Etiqueta Atributos Función


face

font

Ejemplo de sintaxis de la etiqueta font:


<font face=”

La etiquita font sirve para…

52
Etiqueta Atributos Función
align

Ejemplo de sintaxis de la etiqueta font:


<p align=”

La etiqueta p sirve para…

Etiqueta Atributos Función


behavior

marquee

Ejemplo de sintaxis de la etiqueta font:


<marquee behavior=”

La etiqueta marquee sirve para…

Etiqueta Atributos Función


src

img

Ejemplo de sintaxis de la etiqueta font:


<img src=”

La etiqueta img sirve para…

53
Etiqueta Atributos Función
href

Ejemplo de sintaxis de la etiqueta font:


<a href=”

La etiqueta a sirve para…

Etiqueta Atributos Función


background

body

Ejemplo de sintaxis de la etiqueta font:


<body background=”

La etiqueta body sirve para…

Etiqueta Atributos Función


style

div

Ejemplo de sintaxis de la etiqueta font:


<div style=”

La etiqueta div sirve para…

54
Práctica 2
a) Abre el bloc de notas, transcribe el siguiente ejemplo:

<html>
<head>
<title>COBAEH. COLEGIO DE BACHILLERES DEL ESTADO DE HIDALGO</title>
</head>
<body>
<h1> Bienvenido a COBAEH </h1>
<h2> " Plantel Téllez " </h2>
<h3> Presentación </h3>
<p> En esta web encontraras información sobre el Colegio de
Bachilleres y nuestra oferta educativa. &gt; Contamos con la * Capacitación en Informática * </p>
<h2> Contacto </h2>
<p> Si Gustas comunicarte con nosotros y ser parte de nuestra familia COBAEH. Comunícate al Tel. 01 743
74 17186; Te esperamos!!! </p>
</body>
</html>
Fuente: Manual Elaboración de páginas web Kompozer. COBAEH Plantel Tlahuelilpan

b) Guarda el archivo como Practica02.html


Práctica 3
a) Abre el bloc de notas, transcribe el siguiente ejemplo:

<html>
<head>
<title>COBAEH. COLEGIO DE BACHILLERES DEL ESTADO DE HIDALGO</title>
</head>
<body>
<h1> Bienvenido a COBAEH </h1>
<h2> " Plantel Téllez " </h2>
<h3> Presentación </h3>
<p> En esta web encontraras información sobre el Colegio de b
Bachilleres y nuestra oferta educativa. </p>
<p>Contamos con la * Capacitación en Informática * </p>
<p> Utilizando equipos de calidad * puedes verlos en la siguiente imagen.</p>

<img src="graficos/pc_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" />

<h2> Contacto </h2>


<p> Si Gustas comunicarte con nosotros y ser parte de nuestra familia COBAEH. Comunícate al Tel. 01 743
74 17186; Te esperamos!!! </p>
</body>
</html>
Fuente: Manual Elaboración de páginas web Kompozer. COBAEH Plantel Tlahuelilpan

b) Guarda el archivo como Practica03.html

55
Práctica 4
a) Abre el bloc de notas, transcribe el siguiente ejemplo:

<html>
<head>
<title>COBAEH. COLEGIO DE BACHILLERES DEL ESTADO DE HIDALGO</title>
</head>
<body>
<h1> Bienvenido a COBAEH </h1>
<h2> " Plantel Téllez " </h2>
<h3> Presentación </h3>
<p> En esta web encontraras información sobre el Colegio de b
Bachilleres y nuestra oferta educativa. </p>
<p>Contamos con la * Capacitación en Informática * </p>
<p> Utilizando equipos de calidad * puedes verlos en la siguiente imagen.</p>

<img src="graficos/pc_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" />

<p> ¡Conoce a toda la gran familia! <a href="http://www.cobaeh.edu.mx">COBAEH</a> &lt; </p>

<h2> Contacto </h2>


<p> Si Gustas comunicarte con nosotros y ser parte de nuestra familia COBAEH. Comunícate al Tel. 01 743
74 17186; Te esperamos!!! </p>
</body>
</html>
Fuente: Manual Elaboración de páginas web Kompozer. COBAEH Plantel Tlahuelilpan

b) Guarda el archivo como Practica04.html

Evidencia 3

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.2 Competencias número 2 y 8
Competencia número 8, atributo 8.2
Revisa las páginas 41 y 42 de tu manual

Desempeño de aprendizaje: Etiquetas y atributos que conforman a una página web


Instrucciones:
a) Formar equipos de 4 integrantes:

Equipo:
Nombre:
Nombre:
Nombre:
Nombre:

56
b) En hojas de colores, realizan las siguientes divisiones y escriben las etiquetas que se indican; más la de los
contenidos proyectados:

<HTML> <IMG>
</HTML> </IMG>
<TITLE> <A>
</TITLE> </A>
<BODY> <FONT>
</BODY> </FONT>
<HEAD> <MARQUEE>
</HEAD> </MARQUEE>

c) Observa la página web que proyecta el docente, analiza sus características y contenidos
d) Anota al reverso de las etiquetas, los atributos necesarios para conseguir la configuración que muestra el
navegador web
e) Ordena con tus compañeros las etiquetas y los contenidos, confirma tu selección con el código fuente de la
pantalla proyectada de la página
Instrumento de evaluación: Guía de observación

¿Realizó?
No Criterios de evaluación Valor
Si No
1 ¿Formó equipos de 4 integrantes? 10
2 ¿Trajo hojas de papel y material para trabajar? (hojas de papel, plumón, tijeras) 10
¿Anotó los atributos correctos en las etiquetas necesarias para la estructura básica de
3 10
la página? (HTML, HEAD, BODY, TITLE)
¿Anotó los atributos correctos en las etiquetas necesarias para configurar el texto así
4 20
como sus estilos? (FONT, B, U ,I, P)
¿Anotó los atributos correctos en las etiquetas necesarias para insertar imágenes e
5 15
hipervínculos? (IMG, A)
6 ¿Escribe las instrucciones sin errores ortográficos? 10
7 ¿Trabaja colaborativamente, escuchando las aportaciones de sus compañeros? 10
8 ¿Acomoda las etiquetas que generan la página proyectada sin errores? 15
Total 100

Calificación

Evidencia 4

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.5 Competencias número 2 y 8
Competencia número 5, atributo 5.6
Revisa las páginas 41 y 42 de tu manual

57
Producto de aprendizaje: Currículum vitae en página web para comunicar información personal de una manera
propia a través de una página web, empleando los aprendizajes logrados en el transcurso del módulo.

Instrucciones:

Construye una página web, debe seguir el siguiente modelo pero con información tuya, toma en cuenta los
criterios de evaluación descritos en el instrumento:

Curriculum vitae

Tu nombre completo
Edad
Dirección, ciudad y país
Teléfono
Correo electrónico

Estudios

Primaria (año)
Secundaria (año)
Bachillerato (año)

Idiomas

Otros idiomas y nivel de dominio

Experiencia laboral

Lugares donde se haya laborado


Funciones
De que año a que año
(Si no tienes experiencia laboral, inventa tres)

Formación adicional e intereses

Cursos, diplomados y otros proyectos Deportes, pasatiempos e intereses laborales


Escribe aquí cursos que hayas tomado, sino tienes Escribe aquí una lista de lo que te gusta hacer
ninguno escribe tres que te gustaría hacer

Ligas de interés

Escribe aquí tres links que dirijan a sitios web que te agraden y que complementen la información de tu currículo,
ejemplo:

Colección de revistas científicas (http://www.redalyc.org/)

58
Instrumento de evaluación: Lista de cotejo

¿Realizó?
No Atributo del producto Valor
Si No
Guarda tu página web en una carpeta (Modulo X) en el escritorio con el nombre
1 5
Evidencia4.html
Color de fondo de la página web #D8D8D8. En el título de tu página coloca tu
2 10
nombre completo
El texto “Curriculum vitae” tipo Times New Roman, tamaño 15 puntos, color negro.
3 5
Aplica movimiento al texto así como el estilo de negrita
Inserta una imagen tuya similar a la del ejemplo, configura sus atributos de tamaño
4 10
(ancho y alto) así como el título y el texto alternativo
Tu información personal (desde nombre a correo electrónico) orientado a la derecha.
5 5
Tipo de letra Cambria, tamaño 12 puntos, Color #380B61, en negrita
Todos los títulos (Estudios, Idiomas, Experiencia laboral, Formación adicional y ligas
6 de interés) orientados a la izquierda, tipo Arial Black, tamaño 13 puntos, color 10
#120A2A y subrayados
El resto del texto (tu información personal) tipo Arial, Tamaño 11 puntos, color
7 10
#0B243B orientados a la izquierda.
8 Las escuelas del apartado “Estudios”, colócalos en una lista no numerada 5
9 El apartado de idiomas, colócalo en estilo cursiva 5
10 Dibuja la tabla con la información que se solicita 10
11 Los títulos de las columnas, colócalos en negrita 5
12 Los cursos que tienes o que te gustaría tener, colócalos en una lista numerada 5
13 Tus pasatiempos y otros intereses, colócalos en una lista no numerada 5
Inserta y configura tres hipervínculos que te direccionen a sitios que te interesan y que
14 10
puedan hablar de lo que te gusta. Entrega reporte
15 Abre tu página web final con Internet Explorer para su revisión. Extra
Total 100

Calificación evidencia 4:

59
Prácticas del módulo X – Bloque III
Práctica 4: CSS

Instrucciones:

a) Revisa la siguiente información:

Las Hojas de estilo en cascada o estilos CSS (Cascade Style Sheet) permiten controlar el diseño y el aspecto de las
paginas aumentando las posibilidades en cuanto a colores, tipos, tamaños y posicionamiento de cualquier tipo de
objeto html, ya sea texto, imagen, tabla o campo de formulario (lo que sea que se pueda identificar con una
etiqueta html).
Se puede definir una hoja de estilo como una colección de reglas que afectan a la apariencia de un documento o
parte del mismo.

Las ventajas que presenta el uso de CSS

• Control sobre el diseño de la página: con los estilos CSS se separa el contenido de la página web, un documento
.html, de todas las reglas referidas a su diseño y aspecto, que están separadas en un documento externo he
independiente con extensión .css.
• Actualización automática del diseño: empleando hojas de estilo se puede modificar la hoja de estilo individual y
cambiar la apariencia de un sitio web completo.
• Discreción: los navegadores más antiguos no pueden entender las reglas de las hojas de estilo pero no dan
errores, simplemente las ignoran. De este modo no se mostraran los efectos de diseño asignados pero si el texto
básico de las páginas y la apariencia del HTML.

Fuente: Manual Elaboración de páginas web Kompozer. COBAEH Plantel Tlahuelilpan

b) Transcribe el siguiente código y realiza el análisis que solicita el docente:

<html>
<head>
<title> COBAEH COLEGIO DE BACHILLERES DEL ESTADO DE HIDALGO</title>
<style type="text/css"></style>
</head>

<body style="color: rgb(0, 0, 0); background-color: rgb(153, 255, 153);" alink="#000099" link="#000099"
vlink="#990099">

<h1 style="text-align: center; color: white;">


<span style="background-color: rgb(0, 153, 0);">
Bienvenido a COBAEH</span> </h1>
<h2 style="text-align: center;"><span style="color: rgb(0, 153, 0);"> " Plantel Téllez "</span> </h2>
<h3> Presentación </h3>

<p style="text-align: justify;"> En esta web encontraras información sobre el Colegio de Bachilleres y nuestra
oferta educativa.<br> Contamos con:<br> </p>

60
<div style="text-align: center;">&nbsp;<big style="font-weight: bold; background-color: rgb(60, 151, 143);
color: white;"><big>
* Capacitación en Informatica, utilizando equipos de calidad * </big></big><br style="font-weight: bold;
color: rgb(0, 0, 1);"> </div> <p style="text-align: center;"><big style="color: rgb(255, 102,
0);"><big><big>puedes ver el tipo de equipo que utilizamos, en la siguiente imagen.&nbsp;
<img style="width: 160px; height: 120px;" alt="PC" src="../PC.jpg"></big></big></big></p>
<p><big style="color: rgb(255, 102, 0);"><big><big><big><span style="font-weight: bold; color:
rgb(140, 117, 255);">Interesante enlace sobre COBAEH: </span>

<a style="font-weight: bold; color: rgb(140, 117, 255);"


href="http://www.cobaeh.edu.mx">COBAEH</a></big>&lt; </big></big></big></p> <h2><big
style="color: rgb(255, 102, 0);"><big><big> Contacto </big></big></big></h2>

<p style="text-align: right;">


<big style="color: rgb(255, 102, 0);"><big><big><big> Si Gustas comunicarte con nosotros y ser parte de
nuestra familia COBAEH. Comunicate al Tel. 01 743 741 7186; Te esperamos!!!
</big></big></big></big></p>

</body>
</html>

Fuente: Manual Elaboración de páginas web Kompozer. COBAEH Plantel Tlahuelilpan


Evidencia 5

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.5 Competencias número 2 y 8
Competencia número 8, atributo 8.2
Revisa las páginas 41 y 42 de tu manual

Desempeño de aprendizaje: Exposición (“Hoy, la clase la das tú”)

Instrucciones:

a) Organízate en equipos de 5 integrantes (deberá haber cinco equipos en total)

Equipo:
Nombre:
Nombre:
Nombre:
Nombre:
Nombre:

b) Revisa la siguiente información y participa en el sorteo de temas

61
Tema 1: Terminología empleada en CSS

Para comprender el funcionamiento de las hojas de estilo en cascada es necesario conocer los
términos empleados en las mismas:

Propiedad
Una propiedad es una característica de un elemento que puede verse modificada mediante una hoja
de estilo. Por ejemplo color o text-transform. Estas propiedades son muy numerosas permitiendo
cambiar muchas características que hasta ahora no era posible.

Valor
Valor es el dato que se asigna a una determinada propiedad. Por ejemplo #FFFFFF es un valor para
el color y uppercase es un valor de la propiedad text-transform.

Declaración
Una declaración está formada por una propiedad y su valor. La declaración comienza por el nombre
de la propiedad seguido de dos puntos y a continuacion del valor de la propiedad. En nuestro
ejemplo color: #FFFFFF; y text-transform: uppercase; son dos declaraciones.

Selector
Un selector es una etiqueta estándar de HTML o un nuevo nombre escrito por nosotros al cual se le
quiere asignar una declaración. Por ejemplo: p, H1, strong son selectores del HTML.

Regla de estilo
Una regla es un selector junto con la declaración, por ejemplo, H1{color:rojo}. Al crear reglas es
posible agrupar selectores y declaraciones. Un ejemplo de regla con dos declaraciones seria: strong

{ color: #FFFFFF; text-transform: uppercase; } Para separar las declaraciones se utiliza punto y
coma.
También se pueden agrupar los selectores como en este ejemplo
H1,H2{color:rojo;font-family:arial}
Tanto los h1 y h2 serán mostrados de color rojo y tipo de letra Arial. En este caso se utiliza la coma
para separar los selectores.

Hoja de estilo
Una hoja de estilo es un conjunto de reglas que definen completamente el aspecto de todos los
elementos de la página.

Colocación de las reglas de estilo


Las reglas de estilo pueden ir colocadas:
1. Dentro de una etiqueta individual.
<etiqueta STYLE="propiedad1:valor;...;propiedadN:valor"> ...texto... </etiqueta>
Estas reglas solo afectan a una etiqueta particular. No se utilizan las llaves para escribir las
declaraciones sino que se escriben entre comillas dentro del modificador STYLE. Este tipo de
colocación es el que implementa KompoZer a las capas en cuanto a tamaño y demás cuando las
modificamos mediante la interfaz gráfica.
2. Afectando a toda la página.
Van colocadas dentro del HEAD de la página, entre dos etiquetas <STYLE type="text/css">
reglas...</STYLE> y afectan a todas las etiquetas del mismo tipo que aparezcan a lo largo de la
página.
3. En un archivo externo llamado hoja de estilos cuya extensión es .CSS

62
Tema 2: Estilos

La forma en que se ven todos los elementos de nuestra página web depende del estilo.

El estilo se compone de distintas propiedades y sus valores correspondientes. Las propiedades


pueden ser el color de la fuente, el tamaño, la alineación, los márgenes, etc... Los valores dependen
de cada propiedad, por ejemplo, a la propiedad color le podemos asignar valores como red (rojo),
blue (azul), ... y a la propiedad tamaño fuente le podemos asignar un valor en porcentaje 100%,
120%, ... o en pixels 12px, 15px, ....

El formato a seguir para definir una propiedad es: propiedad: valor; o propiedad: valor1 valor2 valor3;
si puede tener varios valores.

Por ejemplo, si queremos que el texto sea de color rojo y un tamaño de fuente de 120%,
escribiríamos el siguiente estilo:

color:red; font-size:120%

¿Dónde escribimos el estilo? Hay varias formas de hacerlo, como vamos a ir viendo a lo largo del
curso, pero lo más recomendable es agrupar todas las declaraciones de estilos en un solo lugar,
definiendo un bloque dentro de la etiqueta Head que contenga la definición de estilos. Para ello,
tenemos que incluir en la etiqueta <style type="text/css"> ... </style> y definir dentro los estilos
correspondientes a cada elemento de nuestra página, como puedes ver al principio de esta página.

Si queremos que un estilo afecte a todos los elementos de la página, debemos definir un estilo para
la etiqueta body. En esta etiqueta se suele definir el color de fondo y los valores genéricos de color y
tamaño del tipo de letra. En nuestro ejemplo hemos definido el estilo del body así:

body {font-family: Verdana, Arial, sans-serif;


font-size: 15px;
color: #735846;
text-align: justify;
background-color: #3d2e2a;}

Que quiere decir que, el tipo de letra o fuente, será Verdana, ( o Arial si no existe Verdana, o sans-
serif si no existen las anteriores); el tamaño será 15 pixels, el color será el definido por el valor
#735846 (en este tema básico sobre colores puedes ver qué quiere decir esto), la alienación del
texto será justificada y el color de fondo de la página será el #3d2e2a.

Una página web está diseñada y pensada para verse a través de un monitor. El monitor utiliza los
colores primarios aditivos rojo, verde y azul. Esto es conocido como el sistema RGB por las siglas de
los colores en inglés.
De esta forma podemos crear un color indicando la cantidad de cada uno de los primarios que
interviene en la mezcla. Para cada color podemos especificar 256 intensidades distintas, y al ser tres
colores podemos obtener un total aproximado de 16 millones de colores.

En html, podemos definir un color RGB con valores hexadecimales, siguiendo el formato #F7F0E2
(el más utilizado), con valores para cada color entre el 00 (mínimo) y FF (máximo). Podemos
expresarlo con valores decimales, con la fórmula rgb(247, 240, 226), con valores entre 0 y 255, o
siguiendo este mismo formato con valores porcentuales, como rgb(90%, 60%, 35%). Así, el color lo
podemos definir cómo #FA75C4, rgb(250, 117, 196) o rgb(98%, 46%, 77%).

63
Tema 3: Formato de texto (primera parte)

Color
El color se expresa con la propiedad color. El valor que puede tomar esta propiedad se puede expresar
de varias formas:

a) Un número hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;.


b) Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);.
c) Tres números entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);.
d) Un nombre. Algunos colores se pueden expresar con su nombre en inglés. Por ejemplo color: green; o
color: DarkGreen;.

Fuente
Podemos elegir la fuente (o tipo de letra) a través del atributo font-family. Podemos indicar cualquier
fuente que queramos, teniendo en cuenta que si incluye espacios, debe de ir entre comillas dobles. Por
ejemplo font-family: arial; o font-family: "Times New Roman";.

Pero hemos de tener en cuenta que puede que quien vea la página no tenga instalada la fuente que
queramos. Para evitar esto, existen cinco fuentes genéricas que sí se mostrarán en cualquier equipo:
serif, sans-serif,cursive, fantasy, monospace. Esto no quiere decir que sólo debamos de utilizar estas
cinco. El valor de font-family pueden ser varias fuentes, separadas por comas. El navegador elegirá

Comenzando por la derecha, la primera disponible, por lo que es conveniente terminar por una genérica.
Por ejemplo, font-family:Georgia, "Times New Roman", Times, serif;.
Igual que ocurría con el color, los editores gráficos ofrecen la posibilidad de elegir diferentes fuentes y pre
visualizar su forma.

Tamaño
El tamaño se regula a través de la propiedad font-size. Podemos utilizar cualquiera de las unidades de
tamaño, pero lo más frecuente es utilizar px (pixels), o porcentajes % o em, estas dos últimas son
tamaños relativos al tamaño de la fuente del elemento que está por encima. 100% o 1em, sería el mismo
tamaño, mientras que 200% o 2em sería el doble y 50% o 0.5em sería la mitad.

Si utilizamos valores relativos, facilitamos que se pueda cambiar de tamaño todo el texto de la página de
forma más coherente. Así los discapacitados visuales podrán utilizar el comando para cambiar el tamaño
de texto que tienen los navegadores.

Inclinación
Podemos poner una fuente en cursiva utilizando la propiedad font-style. Puede tomar uno de los
siguientes valores:

a) normal. Coloca el estilo de forma normal, sin inclinación.


b) oblique. Inclina el texto.
c) italic. Además de inclinarlo, sustituye la fuente por su versión en itálica si está disponible. Aunque la
mayoría de los navegadores no lo hacen.

Grosor
Podemos aumentar el grosor de la fuente, lo que equivaldría a ponerla en negrita, utilizando font-weight.
Puede tomar los siguientes valores:

a) normal. El texto no se muestra en negrita.


b) bold. El texto se muestra en negrita.

Nota. En teoría se pueden expresar distintas intensidades de negrita, pero los navegadores no las
muestran.

64
Tema 4: Formato de texto (segunda parte) y bordes

Decoración
Con la propiedad text-decoration podemos hacer que el texto muestre, por ejemplo, los distintos tipos
de subrayado, con los siguientes valores:

a) none, el texto se muestra sin ningún tipo de decoración.


b) underline, el texto aparece subrayado.
c) overline, el texto aparece sobrerrayado.
d) line-through, el texto aparece tachado.
e) blink, el texto parpadea. (No funciona en Internet Explorer, en Firefox 3, si).

Mayúsculas y minúsculas
Aunque escribamos el texto en mayúsculas o minúsculas, luego podemos cambiarlo a través del
estilo. Por ejemplo utilizando text-transform podemos transformar el texto de ejemplo "Es un texto de
EJEMPLO" de las siguientes maneras:

a) uppercase, para transformarlo todo a mayúsculas.


b) lowercase, para transformarlo todo a minúsculas.
c) capitalize, para poner la primera letra de cada palabra en mayúsculas.
d) none, para no realizar ninguna transformación.
e) Existe otra propiedad que juega con la mayúsculas, font-variant. Esta propiedad puede hacer que
las minúsculas se muestren como mayúsculas de menor tamaño.
f) small-caps, realiza la conversión de las minúsculas.
g) normal, no realiza la conversión.

Bordes
Podemos agregar un borde alrededor de un elemento html, con la propiedad border. Esta propiedad
engloba las tres propiedades del borde.

a) color, un color RGB. Se define con la propiedad border-color. Por ejemplo, border-color: blue; o
border-color: #F37760;.
b) grosor, normalmente expresado en px. se define con la propiedad border-width. Por ejemplo,
border-width: 2px;.
c) estilo, uno de los estilos o aspecto que puede tener el borde. Puede ser cualquiera de los
siguientes, que definimos con la propiedad border-style:

Por lo tanto, podríamos definir el borde de un elemento de la siguiente manera:

<p style="border-color:#009933; border-width: 3px; border-


style:double;">bordes</p>

En este caso, podemos resumirlo con el atributo border, siguiendo el formato

border: color grosor estilo;,

lo que quedaría: border:#009933 3px double;.

Cada elemento tiene cuatro bordes, que podríamos definir de forma independiente, como border-top,
border-right, border-bottom y border-left. A su vez, para cada uno de ellos podemos definir su color,
grosor y estilo de forma independiente, por ejemplo border-bottom-color o border-top-width.

65
Tema 5: Márgenes y fondo

Los elementos html tienen dos márgenes. El margen externo y el margin interno. Ambos se refieren
a la distancia hacia uno u otro lado con respecto al borde del elemento, a su límite,
independientemente de que el borde sea visible o no.

El margen externo se regula con la propiedad margin. El margen exterior es la distancia mínima
que habrá entre el borde exterior del elemento y el elemento siguiente, por cada uno de sus cuatros
lados.

Los márgenes no se suman, se solapan, prevaleciendo el mayor. Así, si un párrafo tiene un margen
inferior de 50px y el de abajo un margen superior de 30px, entre ellos quedará un margen de 50px,
por ser el mayor, pero no de 70px.
Otro valor que podemos dar al margen es auto. Este valor da a ambos márgenes el mismo valor, y
nos permite, por ejemplo, horizontalmente un elemento con una anchura determinada

El margen interno se regula con la propiedad padding. Se refiere a la distancia que hay ente el
borde del elemento y su contenido. El padding sí que forma parte del elemento, por eso muestra el
mismo fondo. Por defecto, la mayoría de elementos incluyen un margen exterior, y algunos un
margen interior, que debemos de tener en cuenta.

Fondo

Otro aspecto que podemos personalizar es el fondo, con la propiedad background.

background-color nos permite establecer el color de fondo del elemento. Por ejemplo,
background-color: green;.

También podemos utilizar una imagen, con la propieadad background:


url(graficos/fondo.png);. En url() introducimos la dirección de la imagen que queremos
utilizar.

Si utilizamos una imagen podemos configurar otras propiedades:

background-repeat, determina si el fondo se repite. Puede tomar los valores no-repeat si no


queremos que se repita, repeat-x para que se repita en horizontal, repeat-y para que lo haga
en vertical o repeat para que llene todo el fondo, que es el valor que toma si no le indicamos otra
cosa.

Si no se repite la imagen de fondo, podemos posicionarla con background-position. Podemos


darle los valores de los cuatros lados (top, right, bottom y left), combinarlos para colocarla en
las esquinas, por ejemplo top left, o centrarla con el valor center.

También podemos introducir medidas, donde el primer valor se refiere a la posición horizontal y el
segundo al vertical, por ejemplo background-position: 50% 50%;.

Fuente: Manual Elaboración de páginas web Kompozer. COBAEH Plantel Tlahuelilpan


Mi tema es:

66
c) Con los contenidos, estructuraras una sesión de clase en donde impartas (no solo expongas) el tema referente a
CSS
d) En tu clase, deberás:

 Delegar las participaciones de los integrantes del equipo pues cada uno tendrá una calificación individual
 Elaborar material didáctico para ilustrar tu tema y ejemplificarlo
 Vigilar la disciplina, los permisos al baño y el orden del grupo (respetando en todo momento a tus
compañeros)
 Evaluar el aprendizaje de tus compañeros mediante un examen (puede ser un cuestionario, un crucigrama
o algún otro material, excepto sopas de letras); mismo que deberá ser revisado por todo el equipo y
realizar la retroalimentación correspondiente

Instrumento de evaluación: Listas de cotejo

Trabajo en equipo Participación individual


 Organización del tema 15 Criterio I-1 I-2 I-3 I-4 I-5
Valor
 Dominio del tema 20
Claridad y
 Material didáctico 25
25 expresión oral
(EJEMPLOS) Dominio del
 Control de grupo 15 25
tema (preguntas)
 Evaluación 25 Uso del material
25
TOTAL 100 didáctico
Participación en
25
el equipo
TOTAL 100

La calificación en la evidencia 5 se realizará multiplicando la calificación individual obtenida en la exposición por la


calificación que obtuvo el equipo:
Ejemplo:
- Trabajo en equipo: 9
- Participación individual: 7
- Calificación: 9*7=63 → 6.3

Antes de iniciar la clase, es prudente preguntarte a ti y a tus compañeros:

 ¿Profundice el tema investigando en internet y otras fuentes?

 ¿Domino el tema? ¿Lo entiendo y puedo explicarlo?

 ¿Tengo preparado mi material didáctico? ¿Apoya lo que voy a presentar? ¿Muestro ejemplos?

 Respecto a mi examen, ¿es adecuado?, ¿Qué les voy a evaluar a mis compañeros?

 ¿Me encuentro listo para realizar la revisión y retroalimentación a mis compañeros?

Práctica 5: Página web con estilos CSS

Instrucciones:

a) Retoma tu evidencia número 4 (Currículum Vitae) y modifícala para emplear las reglas de estilo vistas, debes
obtener el mismo resultado visual.

67
Evidencia 6

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.5 Competencias número 2 y 8
Competencia número 5, atributo 5.6
* Competencia 6, atributo 6.4
Revisa las páginas 41 y 42 de tu manual

Desempeño de aprendizaje: Estudio de caso “Uso responsable de las redes sociales”

Instrucciones:

a) El docente proyecta un par de videos sobre un caso real de bullying cibernético. El estudiante observa la
situación y completa la siguiente tabla de manera individual:

Personajes Contexto Situaciones problemáticas Posibles alternativas y


consecuencias
¿Quiénes están ¿En qué nivel educativo y ¿Qué ocurrió? ¿Qué decisiones se
involucrados? lugar ocurre? debieron tomar?
¿Cuáles debieran ser las
consecuencias?

b) Organízate en equipos de 4 integrantes, en conjunto respondan las siguientes preguntas:

¿Cuáles son las consideraciones éticas que fueron violentadas en el caso…


 Para la maestra?

 Para la alumna?

¿Qué acciones hubieras realizado tú sí fueras la maestra?

Elige a un representante que comparta sus respuestas. Anota la información relevante que emitan los otros equipos

c) Redacta el caso considerando:

68
 Los hechos
 Las opiniones
 Las consecuencias
 Tus respuestas

“En una escuela de educación media superior en México se dio una problemática en torno …

d) Finalmente, después de analizar un ejemplo del impacto negativo en el uso de las redes sociales, redacta en un
párrafo el compromiso que asumes como usuario de los servicios de internet y próximo generador de contenido:

Ejemplo:
“Yo, ___________________________________, me comprometo a actuar con responsabilidad en todas y
cada una de mis publicaciones de redes sociales y en las páginas web que elabore y comparta, ejerciendo mi
derecho a la libre expresión y respetando……”

Instrumento de evaluación: Guía de observación

¿Realizó?
No Criterios de evaluación Valor
Si No
1 ¿Asistió a la clase de proyección del caso? 10
2 ¿ Realizó el análisis individual) 15
3 ¿Formó equipos e intercambio respuestas a las preguntas? 15
4 ¿Redactó el caso? 15
5 ¿Redactó su compromiso individual? 15
6 ¿Realizó el trabajo sin faltas de ortografía ni errores de redacción? 15
7 ¿Cumplió en tiempo y forma? 15
Total 100

Calificación

69
Prácticas del módulo X – Bloque IV
Ejercicio 4: El entorno de Kompozer

Instrucciones:

a) Revisa la siguiente información:

El aspecto general del editor es el siguiente:

Debajo, encontramos una barra de menús, desde la que podemos acceder a todas las opciones del programa. Las
opciones más comunes, como Guardar, Nuevo, o insertar Enlaces o Imágenes las encontramos en la llamada barra
de redacción:

Debajo de esta barra, encontramos las barras de formato, pensadas para formatear el documento.

70
Encontramos dos desplegables muy interesantes. El primero, que en la imagen muestra Texto en el cuerpo, nos
permite elegir el elemento que contienen el texto que escribimos, por ejemplo un encabezado o un párrafo. El
segundo, que en la imagen muestra (sin clase) nos permite asignar una clase al texto. Si seleccionamos un
fragmento de texto, y le asignamos una clase, encerrará el texto en una etiqueta <span> con la clase dada.

Tomando también en cuenta que esta barra contiene diferentes opciones, como en cualquier otra aplicación, para
cambiar estilo, tamaño, alineación y color de fuente. Insertar viñetas y sangrías

En la parte central, encontramos el área de edición, donde podemos editar el contenido de nuestra página.
Podemos tener varias abiertas en distintas pestañas.
La forma en que podemos ver y trabajar con la página, depende del modo de edición, de las cuatros disponibles en
la parte inferior:
Normal. Con este modo, vemos el diseño de la página como se mostraría en un navegador. Aunque aparecen
algunas marcas más, como información de la ubicación de algunas etiquetas especiales, como comentarios y scripts,
y líneas rojas punteadas en los bordes de tablas y divisiones.
El modo Etiquetas HTML funciona como el anterior, pero mostrando en cada etiqueta un cuadradito amarillo
con su identificador.
El modo Código fuente nos permite trabajar directamente sobre el código fuente de la página.
El modo Vista preliminar, muestra la página como se vería en un navegador, sin ninguna marca adicional.

Fuente: Manual Elaboración de páginas web Kompozer. COBAEH Plantel Tlahuelilpan

71
Práctica 6: HTML en Kompozer - texto

Instrucciones:

a) Accede a la vista “Código fuente” del editor web, escribe el siguiente texto:

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
Hola mundo<br>
<br>
Texto normal<br>
<br>
Soy&nbsp; inteligente, exitoso, muy guapo e inmensamente feliz<br>
<span style="font-weight: bold;"><br>
</span>Texto en negrita<span style="font-weight: bold;"><br>
Soy&nbsp; inteligente, exitoso, muy guapo e inmensamente feliz</span><br>
<span style="font-style: italic;"><br>
</span>Téxto en cursiva<span style="font-style: italic;"><br>
Soy&nbsp; inteligente, exitoso, muy guapo e inmensamente feliz</span><br>
<span style="text-decoration: underline;"><br>
</span>Texto subrayado<span style="text-decoration: underline;"><br>
Soy&nbsp; inteligente, exitoso, muy guapo e inmensamente feliz</span><br>
<br>
<big><big><big><small>Texto grande<br>
</small>Adios<br>
</big></big></big>
</body>
</html>

b) Accede ahora a la Vista previa o Normal, responde:

* ¿Qué ocurrió con el texto?

* ¿Qué herramientas del editor facilitan el proceso de edición de texto?

72
Práctica 7: HTML en Kompozer - objetos

Instrucciones:

a) Accede a la vista “Código fuente” del editor web, escribe el siguiente texto:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<img
src="file:///C:/Users/MONICA%7E1/AppData/Local/Temp/moz-screenshot.jpg"
alt="">
</body>
</html>

b) Explora las opciones visuales del editor Web, escribe:

* ¿Cuál es el icono necesario para insertar imágenes?

* ¿Qué características se pueden configurar de la imagen?

Evidencia 7

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributos 4.2, 4.5 Competencias número 2 y 8
Competencia número 5, atributo 5.6
Revisa las páginas 41 y 42 de tu manual

Desempeño de aprendizaje: Cuadro comparativo y diagramas

Instrucciones:

a) Realiza un cuadro donde compares las ventajas y desventajas en la elaboración de páginas web empleando reglas
CSS y un editor web. Escribe por lo menos cinco aspectos en cada apartado, para que al final tengas una lista de
diez ventajas y diez desventajas.

Observa el siguiente ejemplo:

73
Etiquetas y reglas de estilo CSS Editor web (Bluefish o KompoZer)
Ventajas Desventajas Ventajas Desventajas
Mayor control sobre el Requiere de un Es más rápido, se puede Algunas instrucciones
formato de los elementos conocimiento adecuado trabajar la página con la disponibles en CSS no se
de la página sobre la sintaxis e idioma vista diseño puede usar en el editor
ingles

b) Una vez terminado el cuadro, toma en consideración lo aprendido hasta el momento en cuanto a la elaboración
de páginas web:
Formato de
Formato de página Imagen Hipervínculo Elementos extras
párrafo/texto
Título de página Alineación del Insertar imagen Dirección de salto Bordes
Color de página texto Tamaño En donde se abre el Tablas
Borde de página Tipo de fuente Titulo vinculo Viñetas
Tamaño Texto alternativo Texto en
Estilo (N,K y S) movimiento
Decoración
Transformación

c) A continuación, para cada uno de los aspectos, realiza un esquema como el que se muestra a continuación:
¿Cómo se hace?

Alineación del texto Con KompoZer


Con CSS

<p style=”text-align:center”>

d) Realiza los diagramas en hojas blancas o de color

Instrumento de evaluación: Guía de observación


¿Realizó?
No Criterios de evaluación Valor
Si No
1 ¿Asistió a las clases de elaboración de la evidencia? 10
2 ¿Realizó el cuadro comparativo con todas las diferencias) 15
3 ¿Realizó los diagramas comparativos para dar formato a la página? 15
4 ¿Realizó los diagramas comparativos para dar formato al texto? 15
5 ¿Realizó los diagramas comparativos para insertar objetos y elementos extras? 15
6 ¿Agregó imágenes o gráficos a sus diagramas 10
7 ¿Realizó el trabajo sin faltas de ortografía ni errores de redacción? 10
8 ¿Cumplió en tiempo y forma? 10
Total 100

Calificación

74
Evidencia 8

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributos 4.5 Competencias número 2 y 8
Competencia número 5, atributo 5.6
Revisa las páginas 41 y 42 de tu manual

Desempeño de aprendizaje: Práctica con anclas

Instrucciones:

a) Busca información e imágenes sobre diversos personajes u objetos que guarden una relación común entre ellos
(futbolistas, escritores, actores, personajes de caricatura, etc.)

b) Agrupa las imágenes en una sola carpeta, puedes también emplear imágenes desde internet si tu equipo tiene la
conexión:

c) Abre el editor web Kompozer y emplea una tabla para generar un menú de opciones:

75
d) En la parte inferior, utiliza tablas para describir cada uno de los elementos de tu menú:

e) Cuando finalices, sigue el procedimiento que explique el docente para insertar y configurar anclas y con ellas,
hipervínculos internos; con esto se facilitará la navegación en la página

Mira el ejemplo completo en la siguiente dirección (necesitas conexión a internet):

http://www.geocities.ws/ejemplocobaehcal/index.htm
Instrumento de evaluación: Lista de cotejo

¿Realizó?
No Criterios de evaluación Valor
Si No
1 Selecciona un tema y busca información relativa a él con aportación personal 10
Descarga las imágenes requeridas o copia la dirección URL de las imágenes en
2 15
internet
3 La página fue elaborada empleando las herramientas que provee el editor web 20
La página muestra una estructura, un menú e hipervínculos que permiten la
4 20
navegación
5 La página contiene hipervínculos internos bien configurados 20
8 ¿Cumplió en tiempo y forma? 15
Total 100

Calificación

76
Prácticas del módulo X – Bloque V
Práctica 8: Sitio web en Kompozer - introducción

Instrucciones:

a) Elabora dos páginas web empleando reglas de estilo en Kompozer:

PÁGINA 1 – Himno Nacional Mexicano

- Como título “Himno Nacional Mexicano” centrado, negrita, Arial Black, tamaño 20 pixeles, color verde y con
color de fondo blanco. Coloca un borde de 10 pixeles de ancho color rojo estilo solido.
- Abajo, el nombre de los autores en viñeta, tamaño 18, Arial y cursiva, alineados a la izquierda, coloca una
imagen de ambos alineada a la derecha (emplea <div style= “float: right;”> antes de colocar la etiqueta de
imagen)
- Todas las estrofas en negrita, tamaño 15, Arial, alineadas al centro y de color negro
- El coro en cursiva, tamaño 17, Arial, alineadas al centro y de color negro
- Con una imagen de la bandera o el escudo nacional como fondo de pantalla, centrado
- Entre cada coro y estrofa coloca un color de fondo en el párrafo, primero verde, luego blanco y después rojo.
Repite hasta que no haya más texto

PÁGINA 2 – Himno del Colegio de Bachilleres del Estado de Hidalgo


- Como título” Himno del Colegio de Bachilleres del Estado de Hidalgo” centrado, negrita, Lucida Console,
tamaño 20 pixeles, color verde y con color de fondo blanco. Coloca un borde de 10 pixeles de ancho color gris
estilo doble.
- Abajo, el nombre del autor (será tu deber investigarlo) en viñeta, tamaño 18, Lucida Fax y cursiva, alineado a la
izquierda
- Todas las estrofas en negrita, tamaño 17, Lucida Fax, alineadas al centro y de color negro
- El coro en cursiva, tamaño 18, Lucida Fax, alineadas al centro y de color negro
- Coloca una imagen del logo del COBAEH como fondo de pantalla, que se repita en y
- Entre cada coro y estrofa coloca un color de fondo en el párrafo, primero verde y luego gris. Repite hasta que
no haya más texto

* Configura un hipervínculo externo que permita ir de una página a otra y regresar, emplea texto o imagen.

Ejercicio 6: ¿Qué es un sitio web?

Instrucciones:

a) Participa en la lluvia de ideas del grupo y rescata los conceptos principales que surjan cuando piensas en “sitio
web”. Anótalos:

77
b) Reúnete en trinas y con los términos de la lluvia de ideas, conforma un concepto para el término “sitio web”

Un sitio web es:


Nuestro concepto es:

c) Reflexiona, ¿De qué manera pueden asociarse entre sí las ideas resultantes de la actividad? Esta reflexión te será
útil en la elaboración de tu siguiente evidencia.

Evidencia 9

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.5 Competencias número 2
Competencia número 5, atributo 5.6
Revisa las páginas 41 y 42 de tu manual

Producto de aprendizaje: Mapa conceptual en CMapTools

Instrucciones:

a) Organiza los términos y agrúpalos en un mapa conceptual que ha de ser elaborado empleando la herramienta
informática CMapTools, puedes partir de las siguientes ideas (agrega las que tu definiste):

 Sitio web  HTML  URL


 Página web  Internet  Servidor
 Navegador web  Dominio  Redes sociales

Instrumento de evaluación: Lista de cotejo

Valor Cumplió
No. Aspecto a evaluar
Si No
1 Asistió y participo en la lluvia de ideas 10
El mapa conceptual permite identificar nodos y palabras de enlace
2 15
propio de un organizador grafico como ese
3 Relaciona los conceptos por términos comunes 15
4 Entrega el trabajo impreso elaborado con la herramienta CMapTools 20
5 Resume los conceptos y enriquece con imágenes 15
6 Entrega a tiempo 15
7 Hace uso correcto de las reglas ortográficas 10
Total: 100
Calificación:

78
Problema:

Formato para trabajar la metodología del Aprendizaje Basado en Problemas

Nombre: ____________________________________________ (Representante *)


Nombre: ____________________________________________
Nombre: ____________________________________________
Nombre: ____________________________________________
Nombre: ____________________________________________

Metodología del Aprendizaje Basado en Problemas

 PASO 1: Leer y analizar el escenario del problema


 PASO 2: Hacer una lista de hipótesis o ideas preliminares sobre el problema
 PASO 3: Hacer una lista de los términos que se conocen del problema
 PASO 4: Hacer una lista de los términos desconocidos del problema
 PASO 5: Hacer una lista de lo que se necesita para resolver el problema
 PASO 6: Definir el problema
 PASO 7: Consultar fuentes de información
 PASO 8: Presentar resultados (Sitio web)

1.- Lo que se desconoce del problema (términos o conceptos específicos)

Lista de conceptos a definir


Concepto desconocido Definición Fuente consultada

79
2.- Redefinir el problema

Redefine el problema complementado con los términos desconocidos que ya fueron investigados

3.- Análisis del problema

¿Qué conozco del problema? ¿Qué debo saber respecto al problema?

4.- Organizar las ideas relativas al problema

Emplear un organizador gráfico, mapa mental o diagrama de Venn que permita visualizar y estructurar lo que se tiene hasta
ahora respecto al problema.

Organizador de ideas

80
5.- Objetivos de solucionar el problema

Relativo a la redefinición del Paso 2 ¿Porque es importante solucionar el problema? (Mínimo tres objetivos de la
solución)

6.- Resumen de referencias

Realizar una consulta en fuentes de información tanto bibliográficas como en internet (pueden ser e-books o artículos de
divulgación científica) que atiendan a los objetivos planteados en el paso 5. Referenciar las fuentes de consulta de manera
apropiada usando el formato APA y entregar la síntesis así como la propuesta de solución. Entregar como sustento del sitio
web.

Evidencia 10

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.5 Competencias número 2 y 8
Competencia número 5, atributo 5.6
Competencia número 8, atributo 8.2
Revisa las páginas 41 y 42 de tu manual

Producto de aprendizaje: Sitio web

Instrucciones:

a) El equipo de trabajo elabora el sitio web con la ayuda de un editor web, basados en los trabajos de planeación y
búsqueda previos definiendo la importancia de: (1) elementos visuales y multimedia; (2) organización y
presentación de la información así como (3) navegación y apariencia del sitio.

b) Solicita el apoyo del docente para facilitar los procesos que te resulten complejos

c) El sitio debe contar como mínimo con una página de inicio o índice (index) y las necesarias para mostrar los
contenidos, así como imágenes, hipervínculos, tablas y texto con formato así como viñetas y videos de YouTube
embebidos.

81
Instrumento de evaluación: Rúbrica

Aspecto a Competente Independiente Básico avanzado No competente


Total
evaluar 4 3 2 0
Emplea todos los Su trabajo permite
Utiliza la mayoría de
elementos abarcados apreciar el poco
los elementos abarcados Emplea arbitrariamente
en el bloque IV y hace dominio que tiene del
Uso del editor en bloque IV y hace las herramientas del
un uso adecuado de editor web para la
web KompoZer uso adecuado de ellos editor web para generar
ellos tales como realización de su sitio.
para la navegación de su su sitio.
imágenes, No emplea elementos
página.
hipervínculos y tablas de navegación.
Los textos que integran
Los textos que Los textos que integran
Los textos que integran su contenido permiten
integran su contenido su contenido siguen las
su contenido muestran apreciar su falta de
siguen las reglas reglas ortográficas y
errores ortográficos y capacidad de redacción
Ortografía ortográficas y gramaticales aunque hay
gramaticales además de así como el
gramaticales además de algunos errores de
algunos errores de desconocimiento de las
mostrar coherencia en coherencia en la
redacción. reglas ortográficas
la redacción. redacción.
básicas
Organiza y estructura La información esta
La información no
la información, la resumida pero no
presenta estructura y la La información no
enriquece con completamente
información expresada es muestra organización ni
Elementos imágenes y videos que organizada en la página.
una copia de la fuente coherencia. Las páginas
multimedia y dan realce y calidad a Se auxilia de elementos
consultada. Existen están saturadas de texto
contenido su trabajo. Hace la multimedia. Hace la
pocos elementos y no muestra elementos
debida referencia a las debida referencia a las
multimedia visibles en multimedia.
fuentes de información fuentes de información
pantalla
consultada. consultada.
El sitio web permite
visualizar la El sitio web se presenta El sitio web es una
Apego a la metodología seguida como una solución opción de solución pues
El sitio web no es una
propuesta de por los estudiantes y es viable e innovadora al no se apega a la
solución al problema
solución una solución viable, problema pero no metodología ni al
innovadora y definitiva definitiva. problema.
al problema
La combinación de
La navegación y la La navegación permite al No es posible navegar
colores permite al
combinación de usuario realizar una entre las páginas del
usuario realizar una
Navegación y colores permiten al consulta amigable pero sitio y la combinación
consulta ergonómica
diseño usuario realizar una los colores seleccionados de colores genera
pero la navegación
consulta amigable y producir molestia a la cansancio o molestia en
presenta deficiencias
ergonómica. vista del usuario la vista del usuario
con los vínculos

Puntaje/Calificación:

20-18 / 10 17-15 / 9 14-12 / 8 11-9 / 7 8-6 / 5

82
Prácticas del módulo X – Bloque VI
Evidencia 11

Competencias a desarrollar:

Genéricas Profesionales
Competencia número 4, atributo 4.5 Competencias número 2 y 8
Competencia número 5, atributo 5.6
Competencia número 6, atributo 6.4
Revisa las páginas 41 y 42 de tu manual

Producto de aprendizaje: Publicar el sitio web en internet

Instrucciones:

1. Concluir el sitio web a nivel local 2. Organizar los contendidos del sitio

1.1 Es recomendable hacer uso del editor web y terminar 2.2 Es recomendable tener organizados en carpeta
nuestro sitio, es decir, que funcione de manera óptima a todas las páginas e imágenes que se usen en el sitio
nivel local

1.2 Titulo de la página: Formato de texto, Enlaces,


Imágenes. Pruébalo también en tu navegador

3. Ubicar un web hosting gratuito y registrarse

83
3.2 Completa el formulario, el primer dato sirve para 3.3 Escribe los caracteres especiales, acepta los términos
definir el nombre de tu dominio. y haz clic en el botón “Create my account”

3.4 Aparecerá una pantalla de confirmación, para iniciar haz clic donde se indica (Access members área at)

84
85
86
Instrumento de evaluación: Lista de cotejo

Pond. Realizó
No. Reactivo
(%) Si No
1 La página está ubicada en un sitio gratuito. 10
2 La página se publicó en el tiempo establecido. 20
3 La dirección de la página es del conocimiento del alumno. 10
4 La aplicación tiene una página de inicio. 6
5 La página se puede visualizar desde diferentes equipos. 15
6 Los vínculos de la página están libres de errores. 13
7 Las imágenes de la página se muestran de manera correcta. 13
8 Los videos de la página se ejecutan sin problemas. 13
Total: 100

87
Registro de evidencias Modulo X
Firma del padre o
No. Nombre y descripción Calificación
tutor
1 Cuadro sinóptico (6%)
2 Exposición (6%)
3 Trabajo colaborativo con etiquetas (6%)
4 Currículum vitae en página web (6%)
5 Exposición y clase (6%)
6 Estudio de caso (6%)
7 Cuadro comparativo y diagramas (6%)
8 Práctica con anclas (6%)
9 Mapa conceptual (6%)
10 Sitio web (15%)
11 Publicar el sitio web en internet (13%)
12 Conducta (6%)
13 Asistencia (6%)
14 Manual de trabajo (6%)
15

Promedio y calificación final del módulo X

Revisión del docente Firma del padre o tutor

88
Autoevaluación del Módulo X por
desempeño personal – Ruta crítica
La calificación obtenida debe estar en función del esfuerzo que hayas imprimido, realiza un
ejercicio de autoanálisis y responde a continuación:

¿Asististe
No Si
a todas
las clases?

¿Cuáles fueron las


razones por las que ¿Pusiste
No Si
faltaste? atención a
la clase?

¿Qué te distrajo?
No ¿Realizaste las Si
Faltas totales: actividades
¿Qué tanto te intereso planteadas?
la clase?
¿Cuál fue el
impedimento para que
no realizaras las No ¿Estas conforme Si
¿Cuál es tu propósito
actividades (prácticas y con los
en la escuela?
ejercicios)? resultados?

A B

¿Cuál fue el
impedimento para que
no realizaras las
actividades (prácticas y ¿Cuáles son tus
ejercicios)? objetivos para el
siguiente modulo?

89
Autoevaluación del Módulo X por
competencias del Marco Curricular Común
En el apartado de “Descripción del módulo” (Página 9) se especifican las competencias genéricas
del Marco Curricular Comuna para desarrollar en este nivel educativo y con esta asignatura,
mismas que fueron definidas por el cuerpo colegiado de docentes y autoridades educativas. Sin
embargo, el desarrollo de competencias no puede ser limitado, por lo que te solicitamos realices
una autoevaluación respecto a las competencias y sus atributos que consideras, desarrollaste en este
módulo aunque no estuvieron contempladas. Revisa con cuidado cada atributo y describe si crees
que lo desarrollaste y en qué medida:
1: No lo desarrollé
2: Inicié con su desarrollo
3: Lo desarrolle por completo

 Marca con una X:

1 2 3
Competencias Atributos
1. Se conoce y valora a sí 1.1 Enfrenta las dificultades que se le presentan y es consciente de sus valores, fortalezas y debilidades.
mismo, y
aborda problemas y retos, 1.2 Identifica sus emociones, las maneja de manera constructiva y reconoce la necesidad de solicitar apoyo
ante una situación que lo rebase.
teniendo en cuenta los 1.3 Elige alternativas y cursos de acción con base en criterios sustentados y en el marco de un proyecto de
objetivos vida.

que persigue. 1.4 Analiza críticamente los factores que influyen en su toma de decisiones.

1.5 Asume las consecuencias de sus comportamientos y decisiones.

1.6 Administra los recursos disponibles, teniendo en cuenta las restricciones para el logro de sus metas.

2. Es sensible al arte y 2.1 Valora el arte como manifestación de la belleza y expresión de ideas, sensaciones y emociones.
participa
en la apreciación e 2.2 Experimenta el arte como un hecho histórico compartido, que permite la comunicación entre individuos
de sus expresiones en y culturasa en
espacio, el tiempo
la vez y el
que desarrolla un sentido de identidad.
interpretación
distintos
géneros. 2.3 Participa en prácticas relacionadas con el arte.
3. Elige y practica estilos 3.1 Reconoce la actividad física como un medio para su desarrollo físico, mental y social.
de vida 3.2 Toma decisiones a partir de la valoración de las consecuencias de distintos hábitos de consumo y
saludables. conductas de riesgo.
3.3 Cultiva relaciones interpersonales que contribuyen a su desarrollo humano y el de quienes lo rodean.
4. Escucha, interpreta y 4.1 Expresa ideas y conceptos mediante representaciones lingüísticas, matemáticas o gráficas.
emite
mensajes pertinentes en 4.2 Aplica distintas estrategias comunicativas según quienes sean sus interlocutores, el contexto en el que
distintos se encuentra y los objetivos que persigue
contextos, mediante la
utilización
de medios, códigos y 4.3 Identifica las ideas clave en un texto o discurso oral e infiere conclusiones a partir de ellas.

herramientas apropiados. 4.4 Se comunica en una segunda lengua en situaciones cotidianas.


4.5 Maneja las tecnologías de la información y la comunicación para obtener información y expresar ideas.

90
5. Desarrolla 5.1 Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno de sus pasos
innovaciones y contribuye al alcance de un objetivo

propone soluciones a
problemas,
a partir de métodos
5.2 Ordena información de acuerdo con categorías, jerarquías y relaciones.
establecidos.
5.3 Identifica los sistemas, reglas o principios medulares que subyacen a una serie de fenómenos.
5.4 Construye hipótesis, diseña y aplica modelos para probar su validez.
5.5 Sintetiza evidencias obtenidas mediante la experimentación para producir conclusiones y formular
nuevas preguntas.
5.6 Utiliza las tecnologías de la información y comunicación para procesar e interpretar información.
6. Sustenta una postura 6.1 Elige las fuentes de información más relevantes para un propósito específico y discrimina entre ellas de
acuerdo con su relevancia y
personal
sobre temas de interés y confiabilidad.
relevancia general, 6.2 Evalúa argumentos y opiniones e identifica prejuicios y falacias.
otros puntos de vista de
considerando 6.3 Reconoce los propios prejuicios, modifica sus puntos de vista al conocer nuevas evidencias, e integra
nuevos conocimientos y
manera
perspectivas al acervo con el que cuenta.
crítica y reflexiva.
6.4 Estructura ideas y argumentos de manera clara, coherente y sintética.

·---------------
7. Aprende por iniciativa e --------------------------------------------
7.1 Define metas y da seguimiento a sus procesos de construcción de conocimiento. -- - --
propio a-----
interés lo largo de la - - -
vida. controlando ---------------
7.2 Identifica las actividades que le resultan de menor y mayor interés o dificultad, reconociendo y

sus reacciones frente a retos y obstáculos.


7.3 Articula saberes de diversos campos y establece relaciones entre ellos y su vida cotidiana.

8. Participa y colabora de 8.1 Propone maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo un curso
manera de acción con pasos específicos.
efectiva en equipos
diversos.
8.2 Aporta puntos de vista con apertura y considera los de otras personas de manera reflexiva.
8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta
dentro de distintos equipos de
trabajo.
9. Participa con una 9.1 Privilegia el diálogo como mecanismo para la solución de conflictos.
conciencia
cívica y ética en la vida de
su
comunidad, región, 9.2 Toma decisiones a fi n de contribuir a la equidad, bienestar y desarrollo democrático de la sociedad.
México y el
mundo.
9.3 Conoce sus derechos y obligaciones como mexicano y miembro de distintas comunidades e
instituciones, como
participación y reconoce
herramienta
el valorpara
de laejercerlos.
9.4 Contribuye a alcanzar un equilibrio entre el interés y bienestar individual y el interés general de la
sociedad.
9.5 Actúa de manera propositiva frente a fenómenos de la sociedad y se mantiene informado.
9.6 Advierte que los fenómenos que se desarrollan en los ámbitos local, nacional e internacional ocurren
dentro de un contexto global
interdependiente.
10.1 Reconoce que la diversidad tiene lugar en un espacio democrático de igualdad, de dignidad y
10. Mantiene una actitud derechos de todas las personas, y rechaza
respetuosa hacia la toda forma de discriminación.

interculturalidad y la 10.2 Dialoga y aprende de personas con distintos puntos de vista y tradiciones culturales mediante la
diversidad ubicación de sus propias

de creencias, valores, circunstancias en un contexto más amplio.


ideas y 10.3 Asume que el respeto de las diferencias es el principio de integración y convivencia en los contextos
prácticas sociales. local, nacional e internacional.

91
11. Contribuye al 11.1 Asume una actitud que favorece la solución de problemas ambientales en los ámbitos local, nacional e
desarrollo de manera
sustentable internacional.
crítica, 11.2 Reconoce y comprende las implicaciones biológicas, económicas, políticas y sociales del daño
ambiental en
con acciones responsables.
un contexto global interdependiente.

11.3 Contribuye al alcance de un equilibrio entre los intereses de corto y largo plazo con relación al
ambiente.

92

Potrebbero piacerti anche