Sie sind auf Seite 1von 21

ESTRATEGIA DIDÁCTICA

Carrera / especialidad: Técnico en programación


Módulo: III Desarrolla aplicaciones Web y móviles
Submódulo: 1 Desarrolla aplicaciones Web
Nombre del docente: LSI Alma Reynoso Álvarez Institución: DGETI
Plantel: CBTis 246 Semestre: Cuarto Turno: Vespertino

Contenido (s): Situaciones:

Utilizando herramientas de diseño gráfico digital para aplicaciones Web


Aceptando y aplicando los cambios en los diseños propuestos por el cliente
Diseña interfaces En forma individual adaptándose de manera positiva a los cambios solicitados
Estableciendo las prioridades del cliente y cumpliendo los tiempos estipulados
En forma grupal cumpliendo los compromisos de trabajo en tiempo y forma

COMPETENCIAS DEL MARCO CURRICULAR COMÚN


Genéricas sugeridas Disciplinares básicas sugeridas
Atributos de las competencias que se necesitan para desarrollar el Competencias que se relacionan con el contenido a desarrollar
contenido
4.2 Aplica distintas estrategias comunicativas según quienes sean C5 Expresa ideas y conceptos en composiciones coherentes y
sus interlocutores, el contexto en el que se encuentra y los creativas, con introducciones, desarrollo
y conclusiones claras.
objetivos que persigue.

Competencias de productividad y empleabilidad de la Secretaría del Trabajo y Previsión Social


Atributos de las competencias que se necesitan para desarrollar el contenido
AD5 Aceptar y aplicar los cambios de los procedimientos y de las herramientas de
trabajo. AC1 Utilizar la comunicación efectiva para identificar las necesidades del cliente.
PO4 Establecer prioridades y tiempos.
ESTRATEGIA DIDÁCTICA

APERTU
RA
Tipo de Evidencia /
N° Actividad Ponderación
evaluación Instrumento
El estudiante expresará sus expectativas y metas comentando
y
aclarando dudas sobre la presentación del contenido: donde el D: La participación del
docente enfatiza las competencias a lograr, las actividades de Autoevaluación estudiante / Lista de 5%
aprendizaje, las evidencias, forma de evaluación, valores y asistencia
actitudes a desarrollar.
Se unen a la presentación de encuadre para observar todos los
aspectos importantes de la materia usando la aplicación de:
https://app.nearpod.com, mediante un pin de acceso
del 6 al 10 de Febrero

proporcionado por la maestra.


- Contenidos y situaciones
Semana 1

- Competencias a desarrollar D: La participación del


- Criterios de evaluación estudiante durante el
Autoevaluación 2%
- Método a utilizar encuadre / Lista de
- Expectativas sobre el curso asistencia
- Los roles a asumir
- Recursos necesarios
- Escenarios laborales
- Funcionamiento de la lista de asistencia, acuerdos
Reglamento del laboratorio de computo (Asignación de
- lugar)
- Material a utilizar
- Software
- Integrar grupo en facebook
El estudiante responderá el cuestionario de evaluación
del 13 al 17
de Febrero
Semana 2

diagnóstica acerca de la interfaz de páginas web, con las


preguntas: ¿Qué es una página web? ¿Qué es una interfaz de C: La interfaz de
usuario? ¿Conoces la diferencia entre un sitio web y una
página Coevaluación página Web / 5%
web? ¿qué es un hipervínculo? ¿Qué te llama la atención de Cuestionario
una página web? ¿Qué elementos de diseño conoces?
¿Cuáles
son las teorías del diseño y sus características?
El estudiante observará una serie de páginas presentadas por
el D: La participación del
Autoevaluación
docente y en una lluvia de ideas expresará sus ideas acerca de estudiante / Lista de 5%
Coevaluación
las características de las páginas que le gustaron más. asistencia
Se estudian y analizan los tipos de estructuras clásicas en los
sitios web:
-Jerarquía
-Lineal
-Lineal con jerarquía
-Red
Del 20 al 24 de Febrero

Códigos más importantes de HTML


Practicas con códigos HTML
Semana 3

Analiza los Tipos de navegadores existentes:


-Importancia
-Navegadores más importantes
-Funcionalidades
-Línea de tiempo de navegadores
Juega en una actividad de Memorama donde identifica el
logotipo y nombre de cada uno de ellos.
https://www.educaplay.com/es/recursoseducativos/2783603/tip
os_de_navegadores.htm

Analiza un video de YouTube sobre la problemática actual de


los diferentes navegadores:
https://www.youtube.com/watch?v=6pgCcJZC3zs&t=208s
C: Conocimiento D: Desempeño P: Producto
ESTRATEGIA DIDÁCTICA

DESARROLLO
Tipo de Evidencia /
N° Actividad Ponderación
evaluación Instrumento
El estudiante realiza una práctica identificando las diferentes
estructuras de sitios web, y analiza la propia página del plantel
CBTIS 246
Evaluación mediante el uso de la aplicación Kahoot (30%)
C: La interfaz de una
Presentar proyecto en PREZI.com donde se enfoca en analizar Autoevaluación página Web / Guía de 5%
una marca comercial, su historia, su trayecto, video, etc. (se
anexa rubrica) (20%) Aplicación web
observación
Del 27 Febrero al 3 de Marzo

Evaluación teórica mediante el uso de la aplicación


https://kahoot.it/
Semana 4

Dividendo al grupo en dos partes, para distribuirlos en laboratorio


de computo
Con los siguientes contenidos:
1. ¿Qué es HTML?
2. ¿Qué significan las siglas HTML?
3. Estructuras lineal
4. Estructura Jerárquica
5. Estructura lineal con jerarquía
6. Estructura de red
7. ¿Qué son los tags
8. Donde escribir código fuente
9. Los tags más importantes en HTML
10. Insertar imágenes en HTML (Fondo, página)
11. Marquee
12. Navegadores

El alumno de forma individual creara una página, usando el


lenguaje de HTML, donde a través de códigos, incluirá título,
del 6 al 10de
Semana 5

encabezados, imágenes, y fondo a su página.


Marzo

Usando el tema de su artista favorito: biografía, discografía, etc.


P: El problema
Compartirá el resultado de su página en el grupo de Facebook
Autoevaluación publicado en
Donde podrá realizar la evaluación 5%
Coevaluación Facebook / Lista de
cotejo

El alumno comenzara a exponer sus proyectos creados en


PREZI
El alumno investiga cómo crear hipervínculos en una página
web para enlazar a otra página. P: La interfaz
Crea un proyecto con una página principal y tres vínculos a tres
páginas donde muestra sus 3 artistas favoritos, usando
imágenes, formato a texto y movimiento en la página. Heteroevaluación diseñada / Lista de 5%
Comparte su trabajo con sus compañeros. cotejo
Retroalimentación de su calificación de 1° parcial dudas y/o
aclaraciones.
El alumno investiga que es una línea de tiempo. ¿Cómo poder
crear una línea de tiempo interactiva? P: La lista de
Realiza sus apuntes en el cuaderno elementos del
Del 13 al 17 de Marzo

Crea una línea interactiva de un personaje famoso: Mark Autoevaluación 5%


problema a solucionar
Zuckerberg, destacando eventos importantes, añadiendo
/ Lista de asistencia
Semana 6

imágenes, al final comparte su trabajo con los compañeros en el


grupo de Facebook.

-HTML, tags para cambiar la combinación de colores en un sitio


web.
Realiza prácticas para asignar la combinación de colores a los
sitios web.
Utiliza la aplicación Colorbox, donde puede fácilmente asignar
combinación de colores a los sitios.
Anexos

Evaluación del 1° Parcial


Asistencia y participación Actividades de clase, prácticas y Examen Proyecto de Aplicación
tareas web (PREZI)
20% 30% 30% 20%

| CBTIS 246 | DAW | TV


“Lista de Cotejo” para calificar PREZI:
Evolución de un producto
Nombre ____________________________________ Grado:____Grupo:____

Aspecto Si no
1. Esta hecho en PREZI
2. Muestra portada del trabajo
3. Contiene la historia del producto
4. Mantiene un buen diseño
(Colores, fondo, color de la letra)

5. Inserto imágenes
6. Maneja un buen diseño
7. Contiene videos relacionados
8. Maneja por lo menos un mapa mental relacionado al tema
9. Tiene una línea de tiempo del producto o marca
10. Presento de forma puntal
11. Expuso su trabajo
Total

Selecciona la opción que califique tu práctica 


ESTRATEGIA DIDÁCTICA

DESARROLLO
Tipo de Evidencia /
N° Actividad Ponderación
evaluación Instrumento
El alumno desarrolla una línea de tiempo en la aplicación
Timeline JS de un personaje favorito, añadiendo, datos, P: La entrevista al
información, recolectando imágenes de los sucesos, vínculos cliente, reporte y
a videos en caso de ser necesario. Heteroevaluación 10%
diseño de la interfaz /
El alumno investiga Conceptos de Riesgos en Internet:
Ciberbullyng, Ciberacoso, Groming, Sexting, llenando una Lista de cotejo
tabla donde investiga ejemplos, imágenes y recolecta videos
como ejemplo de situaciones de riesgo en internet y las
comparte con sus compañeros en el grupo cerrado de
Facebook.

El alumno trabaja el el Software Dreamweaver, donde conoce


la interfaz, ubica los principales comandos y funciones para la
creación de páginas web.
del 20 al 24 de Marzo

Trabaja elaborando una página con el tema de “Redes


Semana 7

Sociales”, donde realiza una página principal, y varias


páginas enlazadas a esta, tomando en cuenta las principales
redes que existen hasta el momento:
- Facebook
- Whatsapp
- Pinterest
- Linkedin
- Twitter
- YouTube
Investigando sus características, ventajas, desventajas.
Se vio en clase el tema de las redes sociales, analizando el
impacto que han tenido en nuestras vidas actualmente, se
analizado este video:
https://www.youtube.com/watch?v=a-sQWqzlhI&t=508s

Se vieron conceptos de actualidad como medida preventiva


ante situaciones que se pueden dar en las redes sociales
analizando conceptos de riesgos en internet:
- Ciberacoso
- Ciberbullyng
- Sexting
- Groming
Presentaron una tabla como tarea, con el concepto,
características, ejemplos e imágenes.

Se dejó de tarea ver una película donde se presenta el acoso y


Ciberbullyng a través de videos, y presentar una tarea de
película: C: El bosquejo de la
interfaz y el tipo de
Un breve resumen
- Contestar estas preguntas Autoevaluación cambios que se 5%
¿Qué te pareció la película? puede realizar / Guía
¿Qué hubieras hecho tú en el caso de la protagonista de la de observación
película Lucia?
¿Consideras que el papá hizo lo correcto?
¿Qué aprendiste de esta película?

https://www.youtube.com/watch?time_continue=4619&v=7JjFyEX
vG30
Del 27 al 31 de Marzo

-Actividades de Redes Sociales


Semana 8

-Definición
-Características
-Ventajas
-Desventajas
- Usos y cuidados
-Ejemplos de redes sociales
-Redes sociales temáticas
1.
https://www.educaplay.com/es/recursoseducativos/2868166/redes_soc
iales.htm
2.
https://www.educaplay.com/es/recursoseducativos/2883220/redes_soc
iales.htm
3.
https://www.educaplay.com/es/recursoseducativos/2895862/redes_soc
iales.htm

-Como definir un sitio en Dreamweaver


Los pasos a seguir para organizar y definir un sitio en el
programa adobe Dreamweaver

-Orden en proyectos
Organización de carpetas, para archivos txt, imágenes, páginas
y todo lo que incluya un sitio pero d forma organizada
(Se sugiere tener todo respaldado en memoria y USB y en
Google Drive)

Proyecto de evaluación
Signos Zodiacales
Crear un sitio en Adobe Dreamweaver, donde aparezcan todos
los signos zodiacales, sus características, imágenes
Se usa la rúbrica para evaluar proyecto.

P: El bosquejo de la
EVALUACIION 2° PARCIAL
interfaz con los
5%
TEORICA Hetroevaluación cambios / Lista de
Del 24 al 28 de abril
Del 3 al 7 de Abril

PRACTICA- PROYECTO SIGNOS ZODIACALES


Semana 10
Semana 9

El estudiante demuestra lo aprendido realizando una práctica


autónoma a través de la recolección de datos, identificando
las necesidades de su cliente a través de una entrevista,
Elaborando el reporte correspondiente y el diseño de la
interfaz del usuario de la página de manera manual.
El estudiante observa el video proyectado por el docente en
Demuestra de la interfaz los cambios pertinentes en la página
de su empresa, tomando en cuenta la actitud del
programador. cotejo
El alumno crea una infografía de algún tema de su interés en
el sitio
https://www.genial.ly/es tratando que sea un tema de
Del 24 al 28 de abril

interés para los jóvenes que estudian en el plantel Cbtis 246, C: El diseño de una
Semana 10

creara un código QR que dirija a su infografía, el cual lo Autoevaluación infografía 5%


pegara junto con todos los demás códigos de sus
compañeros de clase en una vitrina del edificio del plantel,
para que los demás alumnos lleven su dispositivo móvil y
usen los diferentes códigos QR e ingresen a las diferentes
infografías creadas por los alumnos y revisen por ellos
mismos los temas de interés para ellos.
Rubrica de Infografía
Se ve el tema de Marcos (frames) en Dreamweaver, se da
una explicación, se toman apuntes y se realiza practica
guiada en Dreamweaver.

Se evaluaran la practicas integradoras:


 Redes sociales

RÚBRICA PARA EVALUAR INFOGRAFÍA


Nombre: _____________________________________________________Grado:_____Grupo:____
OBJETIVO: Evaluar la infografía con el propósito de retroalimentar al estudiante y apoyar en su formación
profesional.

Criterios:
1.- Partes de la infografía (título, texto explicativo, gráficos, fuente y réditos).
2.- Coherencia y pertinencia.
3.- Organización de la información
4.- Diseño de la infografía
5.- Creatividad
PUNTOS EXCELENTE BIEN REGULAR

20 15 10

CRITERIOS

Partes de la Incluyó todas las Incluyó al menos Incluye dos al menos de las
infografía partes indicadas cuatro de las partes partes que forman la
de una infografía que forman parte de infografía
una infografía
Coherencia y Todos los gráficos Todas los gráficos Todos las gráficos están
pertinencia están relacionadas están relacionadas relacionadas con el tema
al tema y son fácil relacionadas al tema las fuentes no están
de entender. Las y la mayoría son fácil citados.
fuentes de entender. Las
presentadas están fuentes de los
citadas. gráficos la mayoría
están citadas
Organización de El tema es claro y La idea principal es La idea principal no es clara,
la información bien enfocado, algo clara se parece haber poca
destaca la idea necesita mayor información recopilada y
principal y es información de desordenada
respaldada con apoyo.
información
detallada
Diseño y Los diagramas e Los diagramas e Los diagramas e
composición de la ilustraciones son ilustraciones no son ilustraciones no son
infografía ordenados y ordenados ni ordenados ni precisos y no
precisos, se precisos y rara vez se combinan con el texto
combinan se combinan con el para mejorar el
perfectamente con texto para mejorar el entendimiento del tema
el texto para entendimiento del
mejorar el tema
entendimiento del
tema
Creatividad Los gráficos Una o dos de los Los gráficos están basados
usados en la gráficos usados en la en el diseño e ideas de otras
infografía reflejan infografía reflejan la personas.
un excepcional creatividad del
grado de estudiante
creatividad del
estudiante
TOTAL 100 75 50

Evaluación del 2° Parcial

Asistencia y Actividades de clase, Examen Proyecto de


participación prácticas y tareas Proyecto Evaluación Signos
Redes Sociales Zodiacales
Dreamweaver
20% 40% 20% 20%
C: Conocimiento D: Desempeño P: Producto
ESTRATEGIA DIDÁCTICA

DESARROLLO
Tipo de Evidencia /
N° Actividad Ponderación
evaluación Instrumento
Herramienta de Fireworks para editar y diseñar sus propios
botones para un sitio web, de signos zodiacales,
modificando el que ya se tenía y añadiendo sus propios
botones diseñados en dicho software.
Usar la herramienta de mapa de imágenes para delimitar
zonas de interactividad y vínculo entre las diferentes
páginas del sitio. D: La participación del
estudiante al recoger
Se presenta el proyecto de trabajo final para la materia:
Del 1 al 5 Mayo
Semana 11

Usando una presentación compartida en el sitio de Nearpod Coevaluación información del 5%


- Encontrar un negocio para realizar un análisis,
desarrollo e implementación de un sitio web propio.
- Información, Imágenes, diseño, redes sociales, etc.
- Elaborado en la herramienta WIX
- Tener un tema o propósito
- La página principal debe tener por lo menos 5
vínculos
- Un formulario de contacto con diferentes preguntas
- Idea original, no proyectos iguales.
- Fotografías no bajadas de internet (originales)
problema / Lista de
asistencia
Se presenta la rúbrica con los aspectos a considerar para la P: La interfaz del
elaboración del proyecto final de la materia
Del 8 al 12 de Mayo

Se trabajan herramientas de selección de zonas interactivas


Semana 12

de tipo: rectangular, circular y poligonal.


Proyecto Republica México

Tema de Formularios de Google


El estudiante participa activamente en la práctica guiada que
el docente propone, para diseñar una interfaz del usuario de
un formulario de contacto de un sitio web.
usuario de una página
Heteroevaluación web en un software 5%

de diseño gráfico /
Lista de cotejo
El estudiante participa en la práctica propuesta y
supervisada
por el docente para realizar el diseño de la interfaz sugerida
Del 15 al 19 de Mayo

por P: La interfaz del


el docente intercambiando una impresión con otros
Semana 13

equipos usuario de una página


Coevaluación
distribuidos por los docente que durante una lluvia de ideas
y web en un software 5%
Heteroevaluación
asumiendo una actitud positiva y constructiva hablarán de
las de diseño gráfico /
características y del diseño de los equipos que les
haya Lista de cotejo
gustado.
El estudiante aplica todo lo aprendido de manera creativa y
22 al
Sem

Sem

2 de
May

May

Juni
ana

ana

o al
Del

Del
14

26
de

15

29
de

en
o

P: La interfaz
equipos de trabajo al realizar el diseño de la interfaz de su
cliente, en el software de diseño gráfico (corel draw) durante Heteroevaluación diseñada / Lista de 10%
la
cotejo
práctica autónoma.
El estudiante con su equipo de trabajo presentan al resto del P: La solución del
Heteroevaluación
grupo la solución al problema estudiado, para ello, utilizan
las problema / Lista de 5%
Coevaluación
TIC. cotejo

C: Conocimiento D: Desempeño P: Producto


ESTRATEGIA DIDÁCTICA

CIERRE
Tipo de Evidencia /
N° Actividad Ponderación
evaluación Instrumento

P: El Sitio web
El estudiante comparte el contenido de todas las fases para diseñado
diseño de la Interfaz del usuario de su página Web con sus Coevaluación diseñado / Lista de 5%
compañeros del grupo, diseñando un sitio web que contenga cotejo
Del 5 al 9 de Junio

todas las fases, quienes harán comentarios constructivos de al


menos dos equipos de trabajo acerca de lo que les gusta o
Semana 16

podría mejorar en su resultado.


El estudiante reflexiona en torno a lo aprendido y desarrollado D: La participación del
en cada una de las prácticas y menciona en plenaria las estudiante durante la
ventajas de contar con una competencia de diseño de Heteroevaluación 2%
interfaces. plenaria / Lista de
El estudiante integrará su portafolio de evidencias de todos los asistencia
Productos realizado durante las prácticas y lo entregan al
docente para su evaluación. P:Portafolio de
Heteroevaluación evidencia//Lista de 3%
cotejo
C: Conocimiento D: Desempeño P: Producto
CONSIDERACIONES PARA REALIZAR DEMOSTRACIONES Y PRÁCTICAS ANEXOS

ANTES DURANTE DESPUÉS


a) Menciono el propósito. g) Realizo la demostración a o) Coordino a los estudiantes para
b) Realizo una introducción. diferentes ritmos. revisar las anotaciones en el
c) Explico el rol que asumirán los h) Mantengo contacto visual con los instrumento de evaluación.
estudiantes. estudiantes. p) Propicio la autoevaluación.
d) Entrego a los estudiantes el i) Incorporo los contenidos q) Propicio el intercambio de
instrumento de evaluación y explico (tecnológicos, técnicos, experiencias de los estudiantes en
los aspectos que incluye y su utilidad. normativos, competencias del equipo y grupal.
e) Explico la forma de evaluación. MCC y de productividad y r) Retroalimento al estudiante de
f) Informo la fase del método de empleabilidad). forma oportuna.
DEMOSTRACIÓN
aprendizaje que se iniciará. j) Enfatizo en los elementos que le s) Registro la evidencia de
permitirá cumplir la fase del aprendizaje.
método de aprendizaje. t) Coordino la ejecución de la fase del
k) Despierto el interés del estudiante. método de aprendizaje.
l) Fomento el trabajo colaborativo. u) Verifico que la fase del método de
m) Hago preguntas en voz alta que aprendizaje se haya cumplido.
orienten mis acciones. v) Realizo un diagnóstico para valorar
n) Subrayo las dificultades o errores la posibilidad de repetirla.
que surgen en el contexto laboral.
a) Realizo los incisos (a, b, c, d, e y f) de e) Realizo los incisos (g, h, i, j, k, l, m k) Realizo los incisos (o, p, q, r, s, t, u
la demostración. y n) de la demostración. y v) de la demostración.
b) Verifico que las instrucciones hayan f) Fomento un clima de relación de l) Fomento la coevaluación y verifico
sido comprendidas. ayuda y soporte entre los que se lleve a cabo.
c) Explico las reglas de seguridad. estudiantes. m) Informo los resultados de la
d) Verifico que los estudiantes cuenten g) Verifico que la secuencia de evaluación de la evidencia
con los recursos que se utilizarán. ejecución de la práctica se (producto o desempeño).
cumpla.
PRÁCTICA h) Retroalimento para orientar o
GUIADA corregir disfunciones.
i) Corroboro que sean cumplidos los
roles asignados.
j) Superviso y atiendo situaciones
que pongan en riesgo la integridad
del estudiante, equipos e
infraestructura.
CONSIDERACIONES PARA REALIZAR DEMOSTRACIONES Y PRÁCTICAS ANEXOS

ANTES DURANTE DESPUÉS


a) Realizo los incisos (a, b, c y d) de la b) Verifico que se incorporen los g) Realizo los incisos (k, l y m) de la
práctica guiada. contenidos (tecnológicos, técnicos, práctica guiada.
normativos, competencias del h) Realizo heteroevaluación.
MCC y de productividad y
empleabilidad).
PRÁCTICA c) Fomento el trabajo colaborativo.
SUPERVISADA d) Verifico que la fase del método de
aprendizaje se cumpla.
e) Superviso y retroalimento el
procedimiento.
f) Realizo los incisos (f, g, h. i, j) de
la práctica guiada.
a) Realizo el inciso (a) de la práctica b) Realizo los incisos (b, c, d, e y f) c) Realizo los incisos (g y h) de la
supervisada. de la práctica supervisada. práctica supervisada.
PRÁCTICA d) Coordino la presentación de las
AUTÓNOMA evidencias (producto o
desempeño).

Una vez establecido el propósito y alcances de la demostración o práctica, verificado y asegurando la calidad y cantidad de los equipos,
herramientas y/o materiales y las condiciones del lugar en que se realizará, inicie la demostración o práctica.

Aplicaciones utilizadas en clase


Additio (control de asistencias, calificaciones, rubricas, etc.)
Kahoot (Actividades de evaluación, evidencias de aprendizaje, etc.)
Nearpod (Actividades de evaluación y compartir recursos)
Educaplay (Recursos interactivos para profesores)

Webgrafia:
https://web.additioapp.com
https://app.nearpod.com
https://kahoot.it/
http://cosdac.sems.gob.mx/portal/index.php/docentes/formacion-profesional-tecnica-1/estrategias-didacticas-formacion-
profesional-tecnica-1

Elabora: Recibe: Avala:

LSI Alma Reynoso Alvarez Ing. Miguel Orozco Escamilla BERTHA LETICIA
Profesor(es) Jefe de Servicios Docentes Presidente de Academia
Presidente de la Academia de
Informática

Das könnte Ihnen auch gefallen