PROGRAMACIÓN

BÁSICA
MÓDULO 1
 MODULO 1: Introducción a la Programación

En e st e m ó d u lo conoceremos la b a se d e l m u n d o d e la
p ro g ra m a c ió n mientras aprendemos lo necesario para
c re a r n u e st ro s p ro p io s p ro g ra m a s.

MODULO 2: Programación: Primeros pasos en JavaScript

En este módulo revisaremos la plataforma sobre la que

trabajaremos: Khan Academy. A partir de esta
herramienta trabajaremos distintos conceptos
relacionados a la programación y escribiremos nuestros

CONTENIDO primeros programas.

MODULO 3: Programación: Conceptos esenciales en

ciencias de la computación

COMPLETO En este módulo aprenderemos

esenciales de ciencias de la computación, cómo estos
los

se encuentran en nuestro diario vivir y cómo se utilizan

conceptos

para crear proyectos más complejos en programación.

MODULO 4: Programación: Aplicación de conceptos

esenciales en ciencias de la computación

En este módulo final desarrollaremos un

proyecto que involucre todos los conceptos
aprendidos en lo módulos anteriores.
MODULO 1: Introducción a la Programación

School of Tech nace para entregar

herramientas tecnológicas que
permitan disminuir la brecha de
oportunidades educativas en Chile y el
SCHOOL OF mundo. Realizamos una intervención
TECH socioeducativa basada en tecnología,
que crea valiosas e innovadoras formas
de aprendizaje, en donde niños y
profesores aprenden, se relacionan y
desarrollan las competencias que el
mundo necesita.
MODULO 1: Introducción a la Programación

Bienvenido/a al Módulo 1 del curso

de Programación Básica.

¡HOLA En este módulo conoceremos la base

del mundo de la programación
mientras aprendemos lo necesario

MUNDO! para crear

programas.
nuestros propios
 MODULO 1
MODULO 1: Introducción a la Programación
 MODULO 1
MODULO 1: ¿Qué es la “Programación”?

“La p rog ram ación es el proceso utilizado p a ra id e a r y o rd e n a r la s a c c io n e s n e c e s a ria s para realizar un

proyecto, preparar ciertas máquinas o aparatos para que empiecen a funcionar en el momento y en la
forma deseados o elaborar programas para su empleo en computadoras.” - Re a l Ac a d e m ia Es p a ñ o la
 MODULO 1
MODULO 1: ¿En qué se usa la Programación?

La programación es posible encontrarla en todo tipo de ámbitos como la creación de

videojuegos, robótica, simulaciones estadísticas de deportes, filtros de instagram, etc.
 MODULO 1
MODULO 1: ¿Por qué es importante?

Todo lo relacionado a tecnología o dispositivos electrónicos se encuentran programados hoy en día. La

programación en sí misma nos permite desarrollar cualquier idea creativa que tengamos a partir de
recursos limitados, por lo que se convierte en una salida laboral importante. Además su aprendizaje
permite desarrollar el razonamiento lógico-formal.
 MODULO 1
MODULO 1: ¿Cómo aprendo a Programar?

Como vimos anteriormente, p rog ram ar s e t ra t a d e d a r la s ó rd e n e s p re c is a s a u n e q u ip o o c o m p u t a d o r de

tal manera que haga lo que yo deseo. Si bien puede sonar sencillo, e l c o m p u t a d o r t ie n e s u p ro p io le n g u a je
y es debido a eso que se debe ser consciente sobre la forma en que se dan dichas órdenes. Al igual que
como se aprende un lenguaje, se debe estudiar a partir de la práctica y aprendiendo sus reglas.
 MODULO 1
MODULO 1: ¿Cómo trabajaremos en este Curso?

Este curso tiene como base una metodología de aprendizaje activo, por lo que se orientará a que se
trabaje de forma práctica a través de desafíos y pequeños proyectos. De todas formas, para realizar dichos
desafíos y proyectos, necesitamos los contenidos necesarios para llevarlos a cabo y adicionalmente se
contará con videos cortos que nos explica cómo utilizarlos a modo de ejemplo.
 MODULO 1
MODULO 1: ¿Cómo trabajaremos en este Curso?

1. En primer lugar, se comienza por revisar el contenido de forma rápida a través de algunos ejemplos
que nos ayuden a identificar los contenidos que se buscan revisar y profundizar.
2. Posteriormente se introducirá la actividad a realizar a través de un video de uno de los instructores
de School of Tech, para mostrar de qué forma se trabaja y que les ayudará a modo de ejemplo.
3. Finalmente, se trabajará en una actividad que nos ayuden a entender mejor los conceptos y nos
permitan interiorizarlos de mejor manera.

Además podrán trabajar en pequeños proyectos que podrán encontrar en los módulos de este curso.
 MODULO 1
MODULO 1: Algoritmos

ALGORITMO

Un ALGORITMO se trata de una Un ejemplo simple sería el

cómo se dibuja un triángulo:
secuencia ordenada de pasos o
instrucciones para cumplir un 1. Dibujar una línea en
objetivo. diagonal hacia arriba.
2. Dibujar una línea en
diagonal hacia abajo.
3. Dibujar una línea
horizontal entre las otras
dos líneas
 MODULO 1
MODULO 1: Algoritmos

ALGORITMO

1. Dibujar una línea en

diagonal hacia arriba.
2. Desde el punto donde
termina la primera línea,
girar 60° y dibujar una
línea igual de larga.
3. Desde el punto donde
termina la segunda
línea, girar 60° y dibujar
una línea igual de larga. Pero puede haber más de un algoritmo para lograr lo mismo.
 MODULO 1
MODULO 1: Algoritmos

ALGORITMO

Es muy importante que las

instrucciones sean ordenadas y
precisas. El computador no va
a interpretar lo que le decimos
como un humano y dibujara tal
cual se lo indiquemos.
 MODULO 1
MODULO 1: DRAG & DROP

[Link]

El bloque celeste es la
Es una plataforma que en la que instrucción.
se programa por bloques
usando “Drag & Drop”. Para crear
nuestros algoritmos debemos
arrastrar bloque con El conjunto de
instrucciones y dejarlos en instrucciones es un
algoritmo y se llevará a
nuestro código. cabo cuando presiones
el botón ejecutar.

Interfaz de la página [Link]

 MODULO 1
MODULO 1: VIDEO
 MODULO 1
MODULO 1: ACTIVIDAD

[Link]

¡Ingresa a estos niveles y completa todos los desafíos!

¡Recu erd a! NIVEL 1

Para dar un nivel por
completado, el círculo que

NIVELES
aparece en la parte superior
debe quedar verde oscuro. Sí NIVEL 2
queda verde claro puedes
presionarlo y volver a revisar tu
algoritmo.
NIVEL 3
 MODULO 1
MODULO 1: EVALUACIÓN

EVALUACIÓN
PROGRAMACIÓN
BÁSICA
MÓDULO 2
MODULO 2: Programación: Primeros pasos en JavaScript

Bienvenido/a al Módulo 2 del curso

de Programación Básica.

¡HOLA En este
plataforma
módulo
sobre
revisaremos
la
la
que
trabajaremos: Khan Academy. A

MUNDO! partir
trabajaremos
de esta
distintos
herramienta

relacionados a la programación y
conceptos

escribiremos nuestros primeros

programas.
 MODULO 2
MODULO 2: Programación: Primeros pasos en JavaScript

En este módulo revisaremos la plataforma sobre la que

trabajaremos: Khan Academy. A partir de esta herramienta
trabajaremos distintos conceptos relacionados a la programación y
escribiremos nuestros primeros programas.
 MODULO 2
MODULO 2: Repaso ¿Qué es un Algoritmo?

ALGORITMO

Un ALGORITMO se trata de una Un ejemplo simple sería el

cómo se dibuja un triángulo:
secuencia ordenada de pasos o
instrucciones para cumplir un 1. Dibujar una línea en
objetivo. diagonal hacia arriba.
2. Dibujar una línea en
diagonal hacia abajo.
3. Dibujar una línea
horizontal entre las otras
dos líneas
 MODULO 2
MODULO 2: ¿Qué es Khan Academy?

1 KHAN ACADEMY

Es una plataforma donde INTERFACE KHAN ACADEMY

podemos programar utilizando
JavaScript para crear diferentes
programas, como dibujos,
animaciones y juegos
En esta sección
puedes ver tu
programa en
tiempo real

En esta sección escribes tu código.

 MODULO 2
MODULO 2: Introducción a Khan Academy

2 KHAN ACADEMY

Khan Academy es de uso gratuito y nos permite crear un usuario en el que podremos ir guardando nuestros proyectos, e incluso se pueden
llevar a cabo otros cursos gratuitos en los que podrían participar que ofrece la página. Nosotros aprovecharemos la interfaz de Khan Academy
para desarrollar distintos programas y desarrollar los proyectos que llevemos a cabo en este y los siguientes módulos
 MODULO 2
MODULO 2: Crear una cuenta en Khan Academy

3 KHAN ACADEMY

Khan Academy permite que sus

usuarios se creen a partir del
botón “Regístrate”. Es de gran
ayuda que además es posible
crear dicha cuenta a partir de un
correo Gmail o una cuenta de
Facebook, por lo que puede
hacerse este paso bastante
rápido. Deben crear la cuenta y
continuar luego con esta
presentación.
 MODULO 2
MODULO 2: ¿Qué es JavaScript?

4 JAVASCRIPT

Javascript (JS) es uno de los

lenguajes de programación más
usados del mundo, usado
principalmente en el desarrollo
de páginas web.
 MODULO 2
MODULO 2: ¿Qué es JavaScript?

5 JAVASCRIPT

Este lenguaje de programación (uno de los tantos

que nuestros equipos computacionales utilizan)
nos permite comunicarnos y programar las
instrucciones que queremos que se lleven a cabo
en los computadores que utilicemos. En este
taller lo utilizaremos para realizar dibujos en
primer lugar, que posteriormente podrán ser
animados a partir de lógica computacional.
 MODULO 2
MODULO 2: Cómo escribir en JavaScript: Sintaxis

6 JAVASCRIPT

Cuando nos referimos a cualquier lenguaje,

debemos pensar que tiene un vocabulario y
distintas reglas que permiten que sea entendible.
Por ejemplo, tanto el español como el inglés
tienen diferentes vocabularios y reglas sobre
cómo se entienden. En los lenguajes de
programación también ocurre y debemos conocer
algunas reglas.
 MODULO 2
MODULO 2: Cómo escribir en JavaScript: Sintaxis

7 JAVASCRIPT

Dentro de las reglas que debemos conocer

tenemos que considerar elementos como los que
se ven en la imagen de al costado. Vemos que son
palabras sin faltas de ortografía, en inglés (pero
podrían crearse algunas en español), que luego
poseen algunos números entre paréntesis y cada
línea termina con un “;” (“Punto y coma”).
Veremos un poco más adelante que significan
estas reglas y cómo las interpreta el computador.
 MODULO 2
MODULO 2: Cómo crear un proyecto en Khan Academy

8 KHAN ACADEMY

Para crear un proyecto en Khan Academy, tan

solo debemos buscar en google lo siguiente:
“nuevo programa khan academy”. Luego,
debemos hacer click en el primer link que se ve en
la imagen.
 MODULO 2
MODULO 2: Cómo crear un proyecto en Khan Academy

9 KHAN ACADEMY “nombre de usuario”

Luego de hacer click, se mostrará la interfaz en la

que trabajaremos para desarrollar actividades y
proyectos. Para que nuestros proyectos queden
guardados, debemos apretar el botón donde dice
“Guardar” (botón azul abajo a la derecha), estando
ingresados con nuestro usuario de Khan
Academy.

“Guardar”
 MODULO 2
MODULO 2: VIDEO

10 KHAN ACADEMY
 MODULO 2
MODULO 2: Primeras figuras en Khan Academy

11 KHAN ACADEMY
Donde se irá
CANVAS haciendo el dibujo.
Ahora que comenzaremos a
dibujar, lo haremos en la interfaz
de Khan Academy. Recuerda
apretar el botón “Guardar” desde
un principio para que se guarde
en tu usuario. Comenzaremos
con algo sencillo: Hacer una
elipse que se encuentre en la
mitad del canvas (lienzo) y que
tenga un ancho de 50 pixeles y
un alto de 100 pixeles.
 MODULO 2
MODULO 2: Primeras figuras en Khan Academy

12 KHAN ACADEMY

El cuadrado donde se irá

dibujando tiene una dimensión
de 400x400 pixeles, por lo que
los primeros 2 números nos
indican la posición de manera
horizontal y vertical
respectivamente, los que
llamaremos parámetros de
posición. Los siguientes
números son parámetros de
dimensión, que nos indican el
ancho y el alto de la elipse
respectivamente.
 MODULO 2
MODULO 2: Primeras figuras en Khan Academy

13 KHAN ACADEMY

Podemos ver que también se

puede hacer con otras figuras,
como lo es el rectángulo de la
imagen. Debemos fijarnos de
todas formas, en que con el
rectángulo ocurre algo
diferente. La posición que
definen los primeros 2 números
no es sobre el centro del
rectángulo, si no, que es la
posición de la esquina superior
izquierda.
 MODULO 2
MODULO 2: Funciones Básicas en Khan Academy

14 KHAN ACADEMY

A continuación, puedes ver

otras figuras que puedes utilizar,
a las que llamaremos
“funciones” por ahora. Más
adelante se explicará la razón de
dicho nombre. Te invitamos a
que pruebes realizar dichas
figuras para que comiences a
familiarizarte con ellas.
 MODULO 2
MODULO 2: Funciones Básicas en Khan Academy

15 KHAN ACADEMY

Como podrás ver, algunas de

ellas son distintas a ellipse(...) y a
rect(...), y trabajan solo con
puntos en el canvas, como por
ejemplo: triangle(...), line(...) y
quad(...). En este tipo de figuras,
tan solo debes colocar los
puntos en el canvas y JS los
juntará para crear la figura.
 MODULO 2
MODULO 2: Funciones Básicas en Khan Academy

16 KHAN ACADEMY

¡IMPORTANTE!
Te debes de haber dado cuenta
que cuando escribimos la
canvas canvas
posición vertical (“y”: parámetro
de posición) de alguna figura,
entre más grande el número,
más abajo la dibuja. Lo anterior
se debe a que el canvas
considera lo vertical de 0 a 400
desde arriba hacia abajo. Es
decir que el 0 se encuentra en lo
más alto y el 400 es el límite de
abajo.
 MODULO 2
MODULO 2: Funciones Básicas en Khan Academy

17 KHAN ACADEMY

Estas son la primeras figuras

que dibujaras en Khan Academy:
“x” se refiere a la posición
horizontal de la figura, “y” de su
posición vertical, “w” es el ancho
y “h” es el alto.
 MÓDULO 2: ¿Cómo puedo cambiar la posición de mis MODULO 2
figuras de manera simple?

18 KHAN ACADEMY

Nos gustaría poder mover

nuestras figuras o cambiar su
tamaño en bloque, es decir que
modificando solo un número
poder mover varias figuras o
cambiar el tamaño de la figura
ya sea tanto en ancho como
alto. .
 MODULO 2
MODULO 2: Variables

19 VARIABLE

¿Cómo usar funciones en

DESAFÍO 1
Khan Academy?

DESAFÍO 2 DESAFÍO 3
 MÓDULO 2: ¿Cómo puedo crear más rápido mis figuras, sin MODULO 2
repetir todo el código?

20 KHAN ACADEMY

Nos gustaría poder crear figuras

complejas sin la necesidad de
repetir todo el código, por
ejemplo un pez está compuesto
de varias figuras geométricas,
entonces me gustaría no tener
que repetir todo el código por
cada pez .
 MODULO 2
MODULO 2: Funciones

¿Cómo usar funciones en

DESAFÍO 1
Khan Academy?
 MODULO 2
MODULO 2: VIDEO
PROGRAMACIÓN
BÁSICA
MÓDULO 3
MODULO 3: Programación: Conceptos
esenciales en ciencias de la computación

Bienvenido/a al Módulo 3 del curso

de Programación Básica.

¡HOLA En este módulo aprenderemos los

conceptos esenciales de ciencias de
la computación, cómo estos se

MUNDO! encuentran en nuestro diario vivir y

cómo
proyectos
se utilizan
más
para
complejos
crear
en
programación.
 MODULO 3
MODULO 3: ¿Cómo se anima digitalmente?

KHAN ACADEMY

La animación digital se logra

usando el mismo concepto que
ANIMACIÓN EN PAPEL
la animación en papel. Se
compone de muchos dibujos
con leves diferencias que se
miran uno seguido tras otro.

ANIMACIÓN DIGITAL
 MODULO 3
MODULO 3: Función Draw

KHAN ACADEMY

La función Draw corresponde a

un ciclo infinito dentro de
nuestro código. Es decir todo
código escrito dentro será
repetido de manera secuencial
hasta que nosotros detengamos
el programa de manera manual.
 MODULO 3
MODULO 3: Función Draw

FUNCIÓN DRAW

Podemos ver en este diagrama

Modificar una
Elegir el color Dibujar el objeto que una vez completado los 4
Pintar el fondo variable del
para el objeto a animar pasos se empiezan a repetir,
objeto
generando la animación digital.
 MODULO 3
MODULO 3: Video
 MODULO 3: ¿Cómo lograr que mis animaciones interactúan MODULO 3
con su entorno?

KHAN ACADEMY

Nos gustaría que los objetos en

nuestras animaciones fuesen
capaces de interactuar con su
entorno. Por ejemplo que la
pelota rebote en los bordes.
 MODULO 3
MODULO 3: Función Draw

FUNCIÓN DRAW

¿Cómo usar funciones en

DESAFÍO 1
Khan Academy?

DESAFÍO 2 DESAFÍO 3
 MODULO 3
MODULO 3: Sentencias Condicionales

SENTENCIA CONDICIONAL

EJEMPLOS
Es una estructura lógica que nos
permite que una parte del
código solo se ejecute si se
cumple una condición. También Si llueve, entonces abro mi paraguas
se aplican en nuestro diario vivir
para definir nuestro actuar bajo
ciertas condiciones

Si la pelota toca el borde, entonces

rebota
 MODULO 3
MODULO 3: Sentencias Condicionales

SENTENCIA CONDICIONAL

Esta es nuestra
condición

SI HACE FRÍO ENTONCES ME ABRIGO

Esta es la instrucción que seguimos SOLO

si nuestra condición es VERDADERA
 MODULO 3
MODULO 3: Sentencias Condicionales

Al diagrama anterior se le
FUNCIÓN DRAW
agregó una sentencia
condicional.

Dibujar el Modificar una

Elegir el color ¿Está tocando un
Si la pelota está tocando Pintar el fondo
para el objeto
objeto a
animar
variable del
objeto borde la pelota? SI Cambiar
el borde, entonces es dirección

necesario cambiar la
dirección, caso contrario
no se hace nada

NO
 MODULO 3
MODULO 3: Video
 MODULO 3
MODULO 3: Sentencias Condicionales

SENTENCIA CONDICIONAL

¿Cómo usar funciones en

¿Qué son los Booleanos?
Khan Academy?

DESAFÍO 2 DESAFÍO 3
PROGRAMACIÓN
BÁSICA
MÓDULO 4
MODULO 4: Programación: Aplicación de conceptos
esenciales en ciencias de la computación

Bienvenido/a al Módulo 4 del curso

de Programación Básica.

¡HOLA En este módulo final desarrollaremos

un proyecto que involucre todos los
conceptos aprendidos en lo módulos

MUNDO! anteriores.
 MODULO 4: Programación: Aplicación de conceptos MODULO 4
esenciales en ciencias de la computación

INTRODUCCIÓN

En este módulo desarrollaremos un proyecto que involucre todos

los conceptos aprendidos en lo módulos anteriores.
 MODULO 4
MODULO 4: ¿Qué tipos de proyectos podemos lograr?

KHAN ACADEMY

La plataforma de Khan Academy

tiene un fuerte componente ¡Es importante buscar inspiración en otros proyectos antes de
visual, entonces el foco de
desarrollar los propios!
nuestros proyectos será en la
línea de programas interactivos.

BUSCADOR DE PROYECTOS EN KHAN ACADEMY

 MODULO 4
MODULO 4: ¿Qué tipos de proyectos podemos lograr?

KHAN ACADEMY

Puedes explorar en los

siguientes links proyectos
KHANÉMON (Basado en Pokémon)
seleccionados por nosotros para
buscar inspiración.
Super Mario Bros

Shooting Stars

La Mona Lisa
 MODULO 4: ¿Cómo lograr que mi programa interactúe con MODULO 4
el usuario?

VIDEOJUEGOS

Nos gustaría que nuestro programa fuese capaz

de interactuar con el uso de mouse y teclado por
parte del usuario, como lo hace un videojuego por
ejemplo.
 MODULO 4
MODULO 4: Programas interactivos

¿Cómo lograr interacción con el ¿Cómo lograr interacción con el

mouse? teclado?

Desafío 1 Desafío 2
 MODULO 4
MODULO 4: VIDEO