New! TechnoSite Web Design Lessons for Google Sites

It’s here! TechnoKids’ all-new project TechnoSite makes it simple for students to become creative and competent web designers.

TechnoSite

In this project, students use Google Sites to construct a professional looking, multi page website. Incorporating their own content, images, and links, they create a website that includes links to fun places for kids on the World Wide Web. Along the way, they learn how to become website critics, rate the quality and safety of popular sites, and develop essential search strategies.

It has never been easier to quickly create a custom website. With a free Google account, not only do students have access to Docs, Sheets, and Slides apps (and more!) but Google Sites as well. Use the templates, themes, and familiar tools to build fun and engaging web pages. Collaborate online with peers. Then publish and share information and ideas with classmates, a team, club, or interest group. Pick a topic and you’re ready to design!

What Can You Do with Google Sites?

Google Sites website

Design a multi-page website with TechnoSite and Google Sites.

TechnoSite gives students the building blocks of a website. Following illustrated, detailed instructions in the Student Workbook, they can use Google Sites to:

  • apply a theme to have a consistent, professional looking design
  • create a banner and pick a background image
  • use suggested layouts to arrange information
  • add text, images, dividers, hyperlinks, and hotspots
  • incorporate video
  • include a logo
  • design a photo gallery
  • insert an Image Carousel
  • position a navigation bar
  • and lots more!
Google Sites Preview

Google Sites preset themes and layouts allow students to quickly make a professional looking site. In this Preview mode, you can see what the site will look like on a wide screen, tablet, or phone.

What Will Students Learn Using TechnoSite?

Before beginning to build their website, students are introduced to the World Wide Web. They master internet terminology such as web browser and home page. They learn how to critique websites using standard criteria: navigation ease, appearance, content, and safety. Then a rating scale is applied to decide if the sites may earn their “Kid Stamp of Approval”. Students also become Super Searchers as they compare search engines, scan and filter results, and try different keyword phrases.

TechnoSite integrates a variety of learning skills as student build their websites. Following is a condensed selection from the Skill Summary included in the Assessment Tools in the project:

Digital Literacy

  • use appropriate keywords to locate information using search engines
  • determine whether a website is appropriate for children
  • collaborate with a peer to improve the quality of a website

Language Arts

  • organize research using a planner
  • describe a website to summarize the content and entice visitors to click on the link
  • reflect upon the web design process

Internet Skills

  • use keyword suggestions to locate resources on the Internet
  • scan search results to discern the website that is the best match
  • analyze the results of different search engines

Web Design Skills

  • customize design using a banner, theme, and images
  • insert text, images, dividers, and video
  • insert and test hyperlink and hotspots

What Is Included in TechnoSite?

When you purchase TechnoSite, everything teachers need to complete the project and teach students to build a website is included in the resources:

  1. Teacher Guide in pdf format for printing or viewing
  2. Student Workbook in pdf format for printing or viewing
  3. Assessment Tools: Student Checklists and Teacher Marking Sheet and Skill Summary
  4. Sample Websites using Google Sites
  5. Reviews, Skill Reviews, and Extension Activities to support learning

You’re ready. Order and download TechnoSite today and your students will become skilled web designers tomorrow!

5 Reasons to Teach Offline Coding Activities

Offline coding activities are an excellent way to introduce children to programming concepts. Consider the inclusion of unplugged exercises to promote computational thinking. These can be interwoven throughout a coding unit or as a jump-off point prior to beginning a project. Refer to the bottom of the article for a free offline coding activity from the technology project TechnoTales published by TechnoKids Inc.

Why Teach Offline Coding Activities?

Why teach offline coding activities when kids can use apps to build their own scripts and watch them run? Isn’t hands-on learning by building scripts more meaningful?

It is true. There are many apps and text-based editors that are ideal for teaching children about programming. Primary or elementary students will find Scratch Jr or Scratch a fun and easy way to create interactive stories and animated scenes using color-coded blocks. As well, middle or high school students will enjoy writing scripts to build a web page using HTML or a simple game in Python.

In these cases, the focus of instruction tends to be upon knowing the function of coding blocks or commands. However, a prerequisite skill to coding is the ability to decompose complex tasks, express ideas using symbols, sequence steps, apply logic, and plot coordinates. This is where offline coding activities are beneficial. They remove the emphasis from the technology and instead place it upon computational thinking skills.

Consider the four ways offline coding activities can provide a foundation for learning about programming:

Divide a Task into a Set of Instructions

A program is a set of instructions that tell a computer what to do. Most have many parts that work together to complete a task. Before students can start to build scripts, they must first have the ability to divide a task into smaller pieces. Offline coding activities that have students make an ordered list of steps are a great way to teach decomposition. For example, writing how-to instructions, recipes, or directions will help students develop the analytical skills required to think like a programmer.

Form a Connection Between Symbols and Ideas

A programmer writes code which is like a secret language. They use commands in the form of symbols, keywords, or phrase to produce a set of instructions. This requires an abstract way of thinking. Offline coding activities can help students represent ideas using objects. For example, writing directions to reach a specific destination using up ↑, down ↓, left ←, and right → arrows is an ideal way to practice expressing an idea using symbols.

offline coding activities

Offline coding activities help students to think like a programmer. Design a set of instructions to move the knight to a place on the map.

Sequence Steps

The commands in a script must be sequenced to complete a specific task. A programmer must determine what should happen and when. Offline coding activities that require students to order items is one way to develop a systematic way of thinking. For example, sequencing story events, listing significant milestones chronically, or reorganizing stages of a life cycle are some ways to foster logical reasoning.

Apply Logic Reasoning to Control an Outcome

Some parts of a program will only run if a condition is true. Conditional logic can be complex to code for beginners. Offline activities that connect daily life to if-then statements are one way to establish understanding of this concept. For example, students can identify what happens if a power button is pushed on a tv, the school bell rings, or the teacher is talking. These common occurrences will help students understand how conditions are used to control events.

Plot Coordinates to Position Objects

The function of some programs is to place or move objects. This may be done to control the action of a robot, video game player, or character. This requires an understanding of x and y coordinates to plot the movement. Typically, plotting ordinals is not taught until middle school. However, some coding apps such as Scratch require this knowledge to animate objects efficiently. Fun offline coding exercise can help provide a foundation for understanding how to position objects. For example, identifying a location on a map using longitude and longitude is one way to establish the purpose of coordinates. Another option is to design a dot-to-dot drawing on a grid that has an ordered list of x and y values for each dot.

Free Offline Coding Activity

If you are interested in helping students develop computational thinking skills download the free offline coding activity Design Your Own Quest. It is from the technology project, TechnoTales. In the activity, students write instructions to move a knight to a specific place on the map using up ↑, down ↓, left ←, and right → arrows.

TechnoTales uses Scratch Jr to animate a modern fairy tale. Scripts are used to tell the story of a hero that embarks on a quest to solve a problem. The character must find a hidden item and a helper to live happily ever after. This fun storytelling activity blends creative writing with coding. The lessons are ideal for primary and elementary students.

free coding activity

Code an interactive story using Scratch Jr. Download a free offline coding activity.

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!

NEW! TechnoTales Coding Activities for Beginners

TechnoTales is a new STEM project by TechnoKids Inc. It includes coding activities for beginners. Primary and elementary students in Grades 2-4 follow the detailed instructions to create a modern fairy tale using Scratch Jr. They learn how to build scripts to animate the story action.

coding activities for beginners

TechnoTales has coding activities for beginners. Build scripts to create an interactive story.

Blend Creative Writing With Coding

The lessons in TechnoTales guide students through the writing process. The project begins with an exercise that forms a connection between storytelling and scripts. Next, students answer questions about an example fairy tale to recognize the story elements. Once familiar with the task, they use a planning sheet to select the setting, characters, and plot. Afterwards, step-by-step instructions explain how create the story pages. A checklist is used to help students review the completed fairy tale to make revisions. Upon completion, the Techno Tale is shared with viewers.

story planner for a coding unit

Imaginative resources support learning.

Storytelling and Coding Activities for Beginners

TechnoTales gradually introduces students to programming concepts. Each story page applies a different coding technique:

Page 1 – Once Upon a Time: Introduce the problem in the story. Animate the hero embarking on a quest using Motion and Looks blocks.
Page 2 – Find a Hidden Item: Engage the viewer. Tap objects on the story page to reveal a hidden item that will help the hero.
Page 3 – Get Help: Seek someone that will help to solve the problem. Count the number of steps to produce an animated sequence that triggers an event when characters bump each other.
Page 4 – Happily Ever After: Create the story ending. Send and receive messages to show the characters celebrating.

Download Scratch Jr to Complete TechnoTales

To use the coding activities in TechnoTales you must have Scratch Jr installed on your devices. Scratch Jr is a free coding app for iPad, Android tablets, and Chromebooks. The interface is designed specially for children. To introduce programming concepts, colored blocks are sequenced together to form scripts. It is fun and easy to build interactive stories, animated scenes, and games.

Scratch Jr interface

Combine coding blocks to build scripts that animate the story action.

Teach Coding to Kids Using TechnoTales Instructional Resources

When you purchase TechnoTales, you will receive:

  • Teacher Guide: Detailed instructions for teaching a coding unit provide tips and strategies.
  • Student Workbook: Digital worksheets with screenshots and illustrated scripts support learning.
  • Example Videos: Sample fairy tales created with Scratch Jr help students gain an understanding of the task and spark inspiration.
  • Scratch Jr Flashcards: Large colored or black and white coding blocks can be used to build scripts as a visual aid.
  • Review Questions: Multiple choice, fill-in-the-blank, or short answer questions assess knowledge of Scratch Jr tools and scripts.
  • Skill Reviews: Optional activities solidify learning by transferring skills to a new coding project.
  • Assessment Tools: Customizable checklists and marking sheets evaluate the fairy tale.
  • Extension Activities: Enrichment lessons challenge students to expand their coding skills.
  • Offline Coding Exercises: Board game that applies computational thinking to have a player complete a quest.