Tag Archives: technology skills

Chromebook Users, HTML Coding, and Pictures

Chromebooks and HTML

TechnoKids has recently released a programming project written especially for Chromebook users. TechnoHTML5 has long been a fan favorite among teachers. It’s now been edited specifically for use with Chromebooks and Google Drive. Students create a web page using HTML and CSS, style text, add images, and insert links.

Using a web-based text editor to write HTML has some unique features. One of the things we really liked about using a Chromebook was the free text editor HTML Editey. On one screen that is divided into two side-by-side panes, the user can write code and simultaneously see a preview. The ability to see successful results and troubleshoot problems on the same screen is great! See our previous post that lists all the ways that this app can make Chromebook users into skilled web page developers.

Adding pictures to an HTML project on a Chromebook is unique, as you are using a web-based app. Instead of collecting images and saving them in a folder to upload with the HTML file, you have to link to existing images on the Internet. Here are some tips to make that job easier for your students.

chromebook users

First, Consider Copyright

As responsible digital citizens, students should be familiar with usage rights. Ensure that they know that they cannot simply link to any image they want.

Some pictures need to be purchased to use them. Those will often have a watermark, or a company name, printed on them covering part of the picture. Other pictures may have a note describing how they can be used while others are free with no limitations on use. These are often called royalty-free.

Copyrighted pictures posted online may have a copyright © symbol on the image with the date or name of the owner. This is a way of identifying who took the picture. If students want to use a copyrighted picture to complete school work, in most cases they can. However, the copyright symbol must not be removed.

Most search engines can filter images to quickly find those that you can use by license or usage rights. Before copying an image web address, have students check to make sure the picture may be used in school work.

Search for an Image

Narrow the search: When searching for pictures to use on a web page with a Chromebook, you may want to filter the search. In Google Images, click Tools. Change the size to Medium to avoid large file sizes. From Usage Rights, pick a choice that allows you to use the picture.

Look at the source: When previewing the image thumbnail, look at the source of the picture. If it is from Pixabay, you cannot link to the image.

Check the picture size: A typical web page is about 960 pixels wide. Use this as a guide when selecting images. Rest the cursor over an image thumbnail. The pixel size will show. Is it too large?

Test the Image

  1. Copy the image address:Chromebook and HTML

    • When you find a picture you want, click the thumbnail to see it in a preview window.
    • Right click on the image.
    • From the menu, choose Copy image address. TIP: To right click on a Chromebook, press the ALT key at the same time you click the mouse button or track pad.

  2. Test the image web address to make sure that it will work:

    • Open a new tab in the web browser.
    • Click inside the address bar.
    • Right click and select Paste or press CTRL + V. Press ENTER. Can you see the picture? If yes, you should be able to link to it. If not, find another image.

TIPS:
You may need to find a different picture if the web address…
• is very long.
• does not include the picture file type such as .jpg or .gif .
• has many symbols.

How to Add an Image Using a Web-Based Text Editor

  1. Place the cursor where you want to add the picture. Type:

    <img src=”” alt=”description”>
  2. Place the cursor between the pair of quotation marks and press CTRL + V or right click and pick Paste to add the image web address copied earlier:

    <img src=”http://www.website.com/picture.gif” alt=”description”>
  3. View the picture in the web page preview pane.

More Tips for Adding Images for Chromebook Users

Picture Dimensions:

It’s good practice to include the width and height of the picture in the img tag. The picture will display without this information. However, it is helpful to the web browser.
For example:

<img src=”http://www.website.com/picture.gif” alt=”description” width=”600″ height=”400″>

To discover the picture dimensions, insert the image into the web page, right click on the image and select Inspect.

chromebook users

Check picture dimensions.

If you want to resize the picture, change the figures in the code by a proportional amount, for example, divide both width and height by 2 to make the image smaller on the web page:

<img src=”http://www.website.com/picture.gif” alt=”description” width=”300″ height=”200″>

Add Breaks to Adjust Text:

One easy solution to change the placing of a picture and text is to add a number of breaks <br> before or after text. Or, divide a large paragraph into two smaller ones.

Wrap Text:

By default, pictures are inline and aligned to the left. You can change the float of an image to wrap text.

For example, make the image float to the left and the text wrap around it by adding the code:

<img style=”float: left;” src=”http://www.website.com/picture.gif” alt=”description”>

Create a Picture Class:

To apply different style options to pictures, you can create classes. If you add a style to the img element in the head of the web page document, all the pictures will look the same.

For example, you can create a class called .pictureright that can be applied to all the pictures that you would like to align to the right. You can apply settings to make a unique style. The code may look something like this:

.pictureright { float: right;
margin-right: 50px;
border-style: solid;
border-width: 5px;
border-color: orangered; }

Then, in the body of the document, add the .pictureright class to the code an existing image:

<img class=”pictureright” src=”http://www.website.com/picture.gif” alt=”chromebook users”>

Exclusively for Chromebook Users

Find these ideas and lots more in TechnHTML5 for Chromebooks. See samples and investigate the source code that constructed them. Create a unique web page using the Student Workbook in digital or printed format. Integrate programming into curriculum. Enhance STEM skills to make your students future-proof!

Teaching Ideas for Programming with TechnoCode

coding with Scratch

TechnoKids’ newest release is TechnoCode, a technology project that introduces coding with Scratch to elementary and middle school students. It is an ideal project for Grades 4 and up. Jam-packed with programming activities, TechnoCode sparks an interest in computer science. Step by step instructions explain how to build animations, stories, games, art, music, and simulations.

Empower students with real-world skills they can use in the workplace. The instructional materials in TechnoCode encourage students to think like programmers. Resources include sample videos to inspire imaginations, planning sheets with guiding questions to help design scripts, assessment tools to evaluate student work, and coding journal logs to reflect upon learning.

Ideas for Implementation

The TechnoCode project has students create animated scenes, construct mazes, broadcast stories, engineer games, design artwork, compose music, build a diorama, and more! The activities are suitable for any teaching situation. Select the option that works best for you and your students:

  • Coding Unit with Elementary Students: Assignments in Sessions 1-3 in TechnoCode are ideal for students new to Scratch. The activities are perfect for Grades 4 and up. Students design animations, create art, develop games, and compose music. The emphasis is on coding basics including how to build scripts, sequence commands, control action with if then conditions, and create simple loops. The activities focus upon directing movement, synchronizing sound, and understanding x and y coordinates.
  • Coding Unit with Middle School Students: Once students understand the fundamentals of coding in Sessions 1-3, they extend their learning in Sessions 4-6. The activities are ideal for students that understand the fundamentals and are ready for a challenge. The critical and computational thinking required is ideal for students in Grades 6-8. They produce a story, engineer a game, develop a treasure hunt, build a diorama, and remix a project. The emphasis is on having students manipulate the appearance of sprites, direct the timing of events with broadcasting, and create original artifacts using conditions, variables, and operators.
  • Scratch activities for kids.

    Build games using Scratch. Learn how to use variables to track the score.

  • Computer Science Course: TechnoCode has 25 assignments designed to ignite an interest in computer science. The focus is on thinking like a programmer. Each coding activity is divided into four parts – exploration, practice, freestyle, and reflection. Using a question and answer format, students discover the function of command blocks. Next, they follow guided instructions to build scripts. Afterwards, they apply their skills to complete open-ended challenges. Once a Scratch project is finished, students write a coding journal entry to reflect upon the experience.
  • Hour of Code: If you only have one class to teach coding there are many assignments in TechnoCode that can be used for this purpose. If your students are beginners, they can develop simple animations. Assignment 5 targets how to build a script, Assignment 6 explores directing movement, and Assignment 14 focuses upon changing the appearance of a sprite. If your students have existing knowledge of Scratch, the skill reviews in Sessions 2-5 are excellent challenges.
  • Coding Workshop Series: If you are running a workshop series as part of an after-school program or community event, then you will need to select assignments that fit the number of classes offered. As well, consider the age range and coding abilities of students.

Coding with Scratch is highly addictive and fun! Your students will develop a host of essential technology skills as they create unique games, interactive stories, animations, and more!

Coding Journals for Computer Science

coding journals

I’ve been having lots of fun learning to code with Scratch over the past month. It inspired me to write blogs about the benefits of teaching programming skills and computer science standards. But it also prompted me to ponder about teaching practices associated with coding. Many of the resources I researched suggested that students write coding journals or logbooks.

Some technology curriculum even incorporates learning journals as an essential component. A case in point is the Robotics unit of the Prince Edward Island Career and Technical Education Curriculum. Students write routine, specific journal entries and these are included in assessment.

Journal writing is a common task for primary students to build writing fluency. But journals can also be a powerful tool for learning programming, consolidating of coding skills, and self-reflection for young people in junior, middle school, and senior grades.

Guide Students to Reflect Upon Learning

Reflection can be difficult. Providing guiding questions can help students think about the coding experience. In TechnoCode, a STEM project by TechnoKids, coding journals log entries are part of the coding experience. Open-ended questions, rating scales, and checklists guide students to reflect upon their learning. It is valuable to include prompts about the design process, debugging, coding block usage, and attitude towards programming.

coding journals

Include guiding questions to help students reflect upon learning when using coding journals.

What to Use to Write a Coding Journal?

OneNote, Microsoft Word, and Google Docs are common tools with which students are familiar. The app used should be easily accessible for students at the beginning, during a coding class, or as an end of class activity. Anything that can generate a text file and can be kept open on the desktop will work. Students should be able to open the learning journal file as ideas come to them.

Why Write a Coding Journal?

There are many benefits to support writing a coding journal. In addition to the basic journal writing learning objectives of improving written communication, coding journals can:

  • Articulate ideas
    Students write about their creative plans, list coding steps, document their work, and/or set realistic goals. Rather than jumping right in and starting to write code, journals can be a tool to plan and organize animations, stories, or games.
  • Build coding skills
    When natural language is used to express the actions that are to be translated into coding language, understanding and retention is enhanced. As they write in their own voice, students build a firm foundation for coding terminology. Listing both the plain text and the programming algorithms can become a personal ‘how to’ dictionary to be referenced as needed.
  • Problem solve
    Debugging is a routine part of learning to code. When students are stuck, they can turn to a coding journal to figure out a solution. Writing about the problem forces the programmer to slow down their thinking and use self-talk to describe the issue and trouble shoot. Each part of the code needs to be checked in a logical manner. This process has been referred to as rubber ducking. The term came from a programmer who carried a rubber duck around with him. Whenever he had a problem, he would explain it to the duck. In listing the code line by line, he would often find the error and fix it. In this case, the journal becomes the rubber duck to which the author is ‘speaking’.
  • Reflect and track progress
    A programmer can write down all the attempts made to solve a problem in a journal. When the journal is reviewed afterwards, it represents a progress report of all the knowledge gained and growth achieved. This is authentic evidence of learning. Written communication of ideas can make a student become more thoughtful about their new skills. A journal can be a form of self-assessment.
  • Express feelings
    The process of coding frequently leads to challenges and trouble shooting. In a coding journal, students can be encouraged to reflect critically on their feelings, whether it is hope and enthusiasm for new projects or detailing frustrations with algorithms that don’t ‘work’. Writing about obstacles can defuse the feelings and modify perspective.
  • Promote collaboration
    Instead of private writing, coding journals can be composed using social media. Blog posts and tweets encourage commenting. As students help each other they build responsible digital citizenship skills while developing programming skills at the same time. Positive support from peers and input from teachers forms connections, fosters teamwork, and boosts confidence.

What to Write in a Coding Journal?

  1. Develop a learning plan
  2. Celebrate successes and new learning
  3. List problems, describe attempted solutions, and explain lessons learned
  4. Describe experiments tried to promote logical thinking and the scientific method
  5. Record creative ideas and inspirational thoughts to remember and tackle at another time
  6. Take notes of questions still unanswered
  7. Complete a self-assessment
  8. Respond to specific prompts, such as:
    • Write about something you still want to learn.
    • Outline a coding task that you found difficult.
    • Describe what you accomplished today.
    • How would you rate your final project?
    • What are your strengths in learning to code?

Next Steps to Coding Journals

Teachers who use coding journals make a convincing case for their value. There are still more issues to think about. Here are a few of them:

✓ Can the student share the journal with the teacher and/or peers?
✓ Should the teacher provide feedback to the thoughts in a student’s coding journal?
✓ Will the coding journal be part of the evaluation of the programming project?

Computational Thinking and Scratch

It is important to develop computational thinking. In my last blog about computer science learning standards, I wrote about the benefits of students learning to program. Coding was once thought to be a mysterious, obscure skill restricted to a few masterminds. But in light of the STEM demands of the future job world, it’s now considered the ‘new literacy’. Learning to code prepares students for the challenges of the careers of tomorrow. Not only are computers an integral part of daily life but learning how to engage with and control them is a powerful leverage that we can give our young people.

Additionally, programming teaches skills that apply to all jobs: logical or computational thinking, flexibility, persistence, problem-solving, confidence, creativity, and collaboration. Best of all, it’s challenging and it’s fun!

What is computational thinking?

computational thinking like a programmer

Teach students to think in sequential steps like a programmer

Computational thinking is the ability to break down a big problem into smaller sub-problems and to arrange them in an appropriate sequence. It’s a step-by-step procedure that is the foundation of science hypotheses and experiments, diagnoses such as medical evaluations and mechanical problems, and even tying up shoelaces. This cognitive, methodical approach to problem solving is the basis of algorithmic thinking: define the steps to complete the task.

How can computational thinking be taught?

computational thinking

Now that there are graphical programming tools such as Scratch and ScratchJr to teach coding to very young students, we should prepare them to think in a sequential, logical way. Before turning to the computer, break down some simple daily tasks into steps.

Here are some offline activities to try. Have students list all the ‘baby steps’, in the correct order, to complete a task. Then you may want to put their lists to the test by having one student instruct another to follow the steps literally as directed!

  • drink from a juice box
  • go out the door
  • put toothpaste on a toothbrush
  • make a peanut butter sandwich
  • get on a bicycle
  • add 2 two-digit numbers
  • shuffle playing cards
  • take out the garbage
  • get out of bed
  • blow up a balloon

They will soon find that ‘Get a balloon and blow’ might have the tester holding a balloon in his hand but blowing into the air. The steps should be broken down into something like this:

  1. Pick up a balloon.
  2. Place the open end of the balloon between your thumb and index finger.
  3. Put the open end of the balloon into your mouth.
  4. Blow into the balloon.
  5. Squeeze the open end of the balloon shut.
  6. Continue to blow until the balloon is full of air.
  7. Squeeze the open end of the balloon shut.
  8. Tie the open end of the balloon into a knot.

Use natural language first

Scratch cat

Before using the blocks in Scratch have students explain, in their own words, what steps are needed to perform a task.

For example, to make Scratch the cat walk and talk to the viewer, use natural language to list the instructions to the cat:

  1. Begin.
  2. Then take 10 steps forward.
  3. Say “Hello!”

After the steps have been explained verbally or written in natural language sentences, then go to the Scratch program and find the coding blocks that will perform those steps.

computational thinking

Preparing students to think logically and plan their ideas using their own words offline first will ensure success as they begin to construct code.

Scratch lessons and computational thinking.

Develop computational thinking skills using Scratch lessons in TechnoCode.

Are you looking for programming lessons for kids?

TechnoCode, a STEM project, includes activities that emphasize computational thinking. The lesson plans use Scratch to build games, puzzles, and animations. The instructional goal is to have students think like programmers. Easy to follow instructions with natural language help students to understand coding. Resources include planning sheets with guiding questions, coding challenges to differentiate learning, and coding journals.