PROCESSING

 >>> you can download it here

Processing is an open-source programming language and integrated development environment based on Java, used as a medium for teaching and creating multimedia and interactive digital design projects. It is developed by artists and designers as an alternative tool to proprietary software.

Processing es un lenguaje de programación y entorno de desarrollo integrado de código abierto basado en Java, que sirve como medio para la enseñanza y producción de proyectos multimedia e interactivos de diseño digital. Es desarrollado por artistas y diseñadores como una herramienta alternativa al software propietario. 

PIXELS AND COLORS

Computer screens are made up of a matrix of dots that we call PIXELS. The more pixels a screen or digital image has, the higher its resolution. Each pixel can have a different color, which is a combination of three components: RED (R), GREEN (G), and BLUE (B). This is the RGB code, which expresses each component as a number between 0 and 255.

Thus, 0,0,0 is black and 255,255,255 is white.

You can visit this webpage to get the RGB code of any color:  https://htmlcolorcodes.com/

COORDINATES

The coordinate origin (0,0) on a computer screen is the top-left corner. Each pixel has two coordinates (x, y) to indicate its position on the screen. 

The x coordinate (width) is the horizontal distance from the left edge of the screen, and

The y coordinate (height) is the vertical distance from the top edge of the screen.

WINDOW SIZE

You can define the size of the window where you run the program with the command size(x,y);

x = width    y=height

URL to download the program: https://processing.org/

You can download processing-4.3.3. for windows x64 here (you dont need to install anything only run the exe file)

PRACTICES

P1-Hello world

P2-Geometric Shapes 1

P3-Geometric Shapes 2

P4-House

P5-Olympic Rings

P6-Hello Mouse

P7-Advanced Hello Mouse

P8-Traffic Lights

P9-Tunk

P10-Free activity

**P 1: Hello Word - Drawing a dot and a line - Dibujar un punto y una línea

To draw a dot use the sentence: point (x,y);

To draw a line use: line (x1,y1,x2,y2);

**P2: Geometric shapes (photocopy)

**P3.: Geometric shapes (2) - Dibujar formas geométricas simples

Reproduce exactly this model

P4: Drawing a house

You can follow Amalia's model, but it´s better you design yours!

P5: Olympic Rings

Help:

- The stroke weight refers to the edge of the shape. Use at least 5 >> strokeWeight(5);

- Transparent shapes >> fill(R,G,B,0); >> the last number is the opacity 0=transparent

- White Backgound >> background(255);

✧ ➷༄*ੈ✩ ✧ ➷ೃ༄*ੈ✩ ✧ ➷ೃ༄*ੈ✩

VARIABLES

A variable is a memory address where data can be stored. The use of variables involves three actions:

1.-Defining the variable (int, float, boolean, char, string)

2.-Assigning it a value

3.-Using the variable

Una variable es una dirección de memoria donde se puede guardar un dato. El uso de variables implica tres acciones:

1. Definir la variable (int, float, boolean, char, string)

2. Asignarle un valor

3. Utilizar la variable

FUNCTIONS

A function is a set of instructions grouped under a single name. There are functions defined in the development environment, such as draw() and setup(), as well as others that can be defined by the user. To execute a function, you need to use the following syntax:

Una función es un conjunto de instrucciones agrupadas bajo un mismo nombre. Existen funciones definidas en el entorno de desarrollo como draw() y setup(), y otras que puede definir el usuario. Para que se ejecute una función hay que usar la sintaxis:

void setup (){

código que se va a ejecutar

}

P6: Create a program to control the mouse - Hello Mouse!

Elaborar un programa para controlar el ratón - Hola Mouse!

BUCLES Y CONDICIONALES

Cuando el programa tenga que tomar una decisión utilizaremos la sentencia condicional if / else que indicarán las instrucciones que se ejecutarán si se cumple o no una condición. Se utilizarán los signos =>< para establecer esas condiciones.

if (nombre ==5){

//instrucciones que se ejecutarán si se cumple la función

}

else{

//insrucciones que se ejecutarán si no se cumple la función

}

 

Para repetir una o más instrucciones un número determinado de veces utilizaremos la sentencia for o while ...

for (byte i=0; i<10 ; i=i+1){

//instrucciones a repetir

}

  *********************

while (boton==0);{

//instrucciones a repetir

}

P7: Advanced Hello Mouse - the color is changing!

Hola Mouse Avanzado - el color del trazo va cambiando de color

P8: TRAFFIC LIGHTS - SEMÁFORO

https://fdiazuceda.blogspot.com/2023_12_12_archive.html

Para dibujar este semáforo copiamos el siguiente código:

void setup() {

  size (400,400);                                        // Creamos una ventana de 400x400 pixeles

  rect(120,20,120,360);                             // Dibujamos un rectángulo

  triangle(20,20,120,20,120,120);             // Triángulo  en la parte superior izquierda

  triangle(240,20,340,20,240,120);           // Triángulo  en la parte superior derecha

  triangle(20,140,120,140,120,240);        // Triángulo  en la parte central izquierda

  triangle(240,140,340,140,240,240);      // Triángulo  en la parte central derecha

  triangle(20,260,120,260,120,350);        // Triángulo  en la parte inferior izquierda

  triangle(240,260,340,260,240,350);      // Triángulo  en la parte inferior derecha

  fill(0,0,0);                                                 // Ponemos el relleno del fondo en negro

  ellipse (180,80,100,100);                        // Dibujamos el círculo superior

  ellipse (180,200,100,100);                      // Dibujamos el círculo central

  ellipse (180,320,100,100);                      // Dibujamos el círculo inferior

}

A continuación programamos el siguiente código para que vaya encendiéndose de cada color:

* No olvidar definir la variable time al principio para poner el tiempo a cero:

Y finalmente definimos el dibujo para cada color:

P9: DEPÓSITO

El depósito debe simular que se llena con la letra "a" y se vacía con la tecla "z" 

   

TAREA PARA EL LUNES 23 DE MARZO

 - Si no has podido terminar la aplicación personal, puedes continuar con ella y enviarme el nuevo archivo aia para revisarlo justo antes de la evaluación y subir algo la nota.

- Si ya la has terminado, realiza esta otra aplicación (un juego) que contará ya para la nota final de curso!!

Puedes elegir entre:

>> PRÁCTICA 8 de la web de Justo: JUEGO PONG

>> PRÁCTICA 9 de la web de Justo: JUEGO TOPO

Cómo ya sabes, tienes los recursos, las instrucciones y un vídeo explicativo en la web (solo es necesario hacer un juego a elegir entre los dos que son de una dificultad similar)

APP INVENTOR

 

Enlace a web App Inventor

Web de Justo Rodríguez Orta - App Inventor Bloque1 - PRÁCTICAS -

Web de Justo Rodríguez Orta - App Inventor Bloque 2 

✿ -------------------- ✿ ----------------------- ✿

Guía de Turismo con App Inventor del IES Fray Luis de León - Youtube -

Creación de enlaces externos - vídeo explicativo del siguiente código  -

APLICACIÓN TURÍSTICA

Conditions:

1. - At least 4 different windows (screen1 and 3 more) conected with buttons to come back to the main screen. 
2. - Al least one link to an external URL 
3. - At least one link to an audio that must work with one clic and stop with a double clic 
4. - One button to close the app 
5. - One of the screens must have a map with some markers 
6. - One lable with your name in the main screen 
7. - A description of the places must be written as text in lables and the same text must be reproduced by audio (you can create the mp3 file using an AI or recording your voice) - Texto a voz vidnoz
   
   
   
8.  - Use buttons with different shapes, colours, icons... you can visit this webpage to download icons: https://icon-icons.com/es/
9. - Use different layouts to place images, buttons, etc (horizontal, vertical or table arrangements) 
10. - Original design (you can visit some other applications to look for ideas for your design). Scketch a draft on a paper before starting your app!

CONDICIONES

1. Al menos 4 ventanas diferentes (pantalla1 y 3 más) conectadas con botones para volver a la pantalla principal.

2. Al menos un enlace a una URL externa.

3. Al menos un enlace a un audio que funcione con un clic para reproducir y doble clic para detenerlo.

4. Un botón para cerrar la aplicación.

5. Una de las pantallas debe tener un mapa con algunos marcadores.

6. Una etiqueta (label) con tu nombre en la pantalla principal.

7. La descripción de los lugares debe estar escrita como texto en etiquetas y el mismo texto debe reproducirse en audio (puedes crear el archivo mp3 usando una IA o grabando tu voz).

8. Utiliza botones con diferentes formas y colores.

9. Usa diferentes diseños (layouts) para colocar imágenes, botones, etc. (disposición horizontal, vertical o en tabla).

10. Diseño original (puedes visitar otras aplicaciones para buscar ideas para tu diseño). ¡Haz un boceto en papel antes de empezar tu aplicación!

Smartphone Applications (aplicaciones para móviles) - Introduction

Smartphone applications, commonly called apps, are programs designed to help users perform different tasks on their mobile devices. There are thousands of apps available, so it is useful to classify them into categories. This helps users understand what each app is used for and makes it easier to choose the right one.

Apps can be classified according to their purpose. For example, communication apps allow people to send messages, make calls, or join video meetings. Social media apps help users share content and interact with others online. Entertainment apps are used for games, music, videos, or reading.

Another way to classify apps is by their functionality. Productivity apps help users organize their time, take notes, or manage tasks. Educational apps are designed for learning and include language apps, math games, or study tools. Utility apps provide basic services such as calculators, calendars, or file managers.

Apps can also be classified by how they are used. Some apps work offline, while others need an internet connection. Finally, apps can be free or paid, depending on how they are distributed. 

Understanding these classifications students become more responsible and effective smartphone users.

>> How to organise your phone apps

>> 10 Crazy Apps

3 Types of  mobile apps development

Calculator with Scratch - 4PINF

 Have a look to this tutorial by Fernando Arciniega. Thanks collegue!

You can download buttoms here

Variables:

• Num1
• Num2
• Operation
• Screen

For each number:

For operations:

For the result botton:

To clear data:

                                        or  

4. VISUAL PROGRAMMING - Scratch Games- 4PINF

 

Challenge 1: A dodge game

- 2 sprites, 3 lives (variable), 2 backdrops

- Sprite 1 moves randomly.

- Sprite 2 moves with the arrow keys to dodge Sprite 1.

-  You start with 3 lives, and every time you touch Sprite 1 you loose one life.

- When lives come to 0, change the backdrop showing Game Over and stop all.

ADVANCED: Create a new sprite that moves ramdomly and when you touch it you can have an extra live!!

Challenge 2: A clicker game with fallling objects

Watch the tutorial you find in the Scratch webpage:

Also follow the instructions to this link for creating falling objects

ADVANCED: Create other objects falling with a diffirent score. You can also add sprites to loose points or even to end the game. 

>> Create a line at the botton and in case the sprite comes to the floor you loose one live!

Challenge 3: A catch game with falling objects

Help: https://www.create-learn.us/blog/beginner-scratch-challenges-for-kids/

Or watch this video:

ADVANCED: 

- When the falling object touches the floor you loose one point

- If you get to -1 points the game is over (change backdrop and stop all)

- Create another falling object moving faster with extra score

- When you get 10 points the falling objects goes faster

>>> Some clues to programming:

To add one point when catching the apple and go up to a random position:

To loose one point when the apple touches the floor and go up to a random position:

To end the game when the score is under 0:

To move the bowl:

Challenge 4: A maze game

https://www.create-learn.us/blog/how-to-make-a-maze-in-scratch/

Challenge 5: A Flappy Bird Game

https://www.youtube.com/watch?v=PfQiTBbHHY4&ab_channel=Fuelvin

Other challenges: 

https://sites.google.com/tldsb.on.ca/coding/challenges/jr-int-challenges-year-one

3. Programming Languagues - 4PINF

Programming languajes:

Low-level: Machine code (binary code), Assembly...

Hight-level: JavaScript, Python, Java, Visual Basic, Perl, Ruby, C#, and many others...

A compiler is a computer program. It translates a high-level programming language (C, C++, etc.) into binary code for a particular CPU (Central Processing Unit).

"Hello Word" in 10 coding languages: https://medium.com/streamelopers/hello-world-en-10-lenguajes-a30f73d771c4

Most common high level programming languages for begginers

Conversion Decimal to Binary - Binary to Decimal

 

 

Visual Programming vs Textual Programming

WRITE A SUMMARY IN YOUR BLOG ABOUT PROGRAMMING LANGUAGES:

Define what is a programming language. Explain what is the difference between a Low-level and a High-level programming language and write some examples. Explain also what is a compiler.

2. Computational Thinking - Algorithms - Flowcharts

Computational thinking involves taking a complex problem and breaking it down into a series of small, more manageable problems (decomposition). Each of these smaller problems can then be looked at individually, considering how similar problems have been solved previously (pattern recognition) and focusing only on the important details, while ignoring irrelevant information (abstraction). Next, simple steps or rules to solve each of the smaller problems can be designed (algorithms).

****

****

**

Algorithms and Flowcharts

Link to Lorena's Blog (Spanish)

ACTIVITY: Write in your blog an introduction about Computational Thinking explaining the 4 steps. Explain algo what is an ALGORITHM and create a FLOWCHART with canva about cooking your breakfast. Publish the image in the same post in your blog!

Here you have a simple example:

When you finish, try another flowchart for the algorithm to follow for creating the Initial Test with Scratch. It may be something like this:

1B.Presentation - BLOG - PINF 4th ESO (Post 1) - sept2025-

 Create a blog using "blogger". Follow these instructions:

- Access to blogger with your account @gmail.com

- Blog's URL: xxxxdigramiro.blogspot.com  (xxxx=student's number)

- Blog's title: Digitalization 4th ESO Name

- Go to "Configuración" and change the language of your blog into English

PRIVACY: - Go to "Settings" now, and disable the option to be visible to search engines and in the PERMISSIONS section, change Reader Access from "public" to "custom readers". Then invite the teacher adding this email address: profesorticramiro@gmail.com

- Customize your blog

- Create an "avatar" with your physical appearance and download the images. 

Visit these pages:

https://app.pixton.com/

- To have access to the class 4PINF2025 follow this link: https://login.pixton.com/jhzwzx

http://www.pocoyo.com/en/pocoyizeyourself

       

- For this first post in your blog "01.Introduction" write a presentation about yourself and what for are you using this blog. Also explain your previous knowledge and experience with computers and other devices. You can use these questions to help you...

Do you have a laptop or tablet for yourself at home? Do you share with your family? How many hour per day/per week do you use a computer at home? How many hours do you spend with your smartphone? Do you think you are adicted to your phone or social media? What do you think about the new rules about the phone at school? Do you know something about programming? Do you have any experience with programming? Why did you choose this subject? Do you like computers and programming?

Add the image of your "avatar" in this post

- Finnaly add a gadget in the side of your blog that will be title as LINKS OF INTEREST and here you add the teacher's blog and so far, pixton and pocoyize website. Here, you will have to publish the link of every application we use!!

1A.Introduction PINF SEPT2025

 PINF : Programación Informática

Programming - Coding

1st Assessment: 

Computational thinking - Algorithms - Flowcharts

Programming Languages: Blocs and Textual Programs

Scratch

2nd Assessment: Apps for smartphones

 

3rd Assessment: Textual programming

                                           *ੈ✩‧₊˚*ੈ✩‧₊˚*ੈ✩‧₊˚*ੈ✩‧₊˚*ੈ✩‧₊˚*ੈ✩‧₊˚

Initial Test:

A) Open  Scratch and, after logging in, create a program where the cat (Sprite) does the following actions when the green flag is clicked:

• Say "Hello" for 2 seconds.

• Move 100 steps to the right and wait 1 second.

• Ask: "Can you help me?"

  If your answer is yes: say "Thanks" for 2 seconds.

  If your answer is no: say "I had to try."

• Finally, say "See you soon."

B)

• Add a new sprite
• Make it move with the arrows up, down, right and left
• Change the backdrop when this second sprite touches the edges