Tag Archives: using technology in the classroom

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!

Sound Libraries Continued, Two More Free Resources

In a previous article, I listed 8 great free sound resources that students can use to download fun and engaging sounds to add to their stories, presentations, or other digital creations. Fortunately, there are new sound libraries posted regularly and here’s a couple we found that are appropriate for educational use. If you have others to recommend, please let us know.

BBC Sound Effects

  • search by suggested category, then narrow the search by a specific term, e.g., Animals – lion
  • all 16 000 sound effects are in WAV format
  • sounds are available for download under terms of BBC copyright but may be used for personal, educational, or research purposes
  • clear and easy preview with description and sound duration listed

BigSoundBank

  • search feature includes alternate suggested search terms to help find suitable results
  • all sounds are free and royalty-free
  • sounds are in a variety of formats: MP3, WAV, AIFF, and more
  • limited library of hundreds of sounds, but if no fitting sounds are found, other external sound websites are suggested
  • also included is a thorough listing of additional sound and music websites
  • sections of the site are in the creator’s native language French, but the library of sounds are listed in English

free sound libraries

Project-Based Lessons for Technology Integration

TechnoKids has projects in which students add sound or music to engage their audience and add interest.

In TechnoCode, students use Scratch to build games, puzzles, mazes, animations, stories, and more. They write scripts to add sound blocks that play audio clips, make them repeat, and combine sound with other actions.

In TechnoInternet, students learn about responsible digital citizenship. As they practice Internet safety, they also explore online radio stations and music services, search for sound clips, and bookmark sound libraries.

Sound Libraries Caution Note

Some sound collections may contain sounds inappropriate for school use. Discuss digital citizenship responsibilities with students before using these resources to confirm their understanding of suitable content.

Differentiated Instruction and TechnoKids

differentiated instruction

Every time teachers step into their classrooms, they face the evidence of the need for differentiated instruction. Each student arrives at school at a different starting point: a certain attitude of readiness for learning, an individual style of acquiring knowledge, and a distinct level of mastery of concepts. Multiply these three factors by the number of students in the classroom. The resulting figure is daunting but makes it obvious that ‘one teaching method fits all’ isn’t a practical strategy.

Differentiated instruction recognizes and supports individual differences in learning by using a variety of teaching strategies. There are so many options and resources available today that we can adjust for the diverse abilities, needs, learning styles, and interests of our students. As teachers, our goal is to optimize student growth and success at all levels of ability, not simply to achieve or reach a standardized benchmark. Teach every student.

Brain based learning studies support a variety of instructional strategies. As students make connections between what they already know and their new learning, interconnections in neural pathways are formed. As a result, information is stored in multiple areas. Meaning and retention are both enhanced.

In teaching ICT, we have lots of ways of tailoring instruction to meet individual needs. TechnoKids project-based computer lessons support differentiated instruction with student resources, teaching strategies, and assessment tools.

Process

Differentiated instruction requires that we provide a variety of learning opportunities. Students should be able to build a repertoire of tools. They can accommodate their own preferred styles of learning, as well as recognize and build skills in their individual areas of weakness.

TechnoKids project-based learning supports the process of learning using differentiated instruction:

  • Vary learning tools. Integrate technology and use the computer as an alternative and additional tool.
  • Target different senses with multiple instructional strategies. TechnoKids Student Workbooks engage students by reading written instructions, studying illustrations that support text, looking at infographics, and handling manipulatives such as TechnoKids tool flashcards. Sample files have students listen to audio and watch video. Brain based learning studies show that most of us learn best when the kinesthetic senses are used – doing, handling, building. Robotics projects prepare students to build STEM skills and support hands-on learning. TechnoKids Teacher Guides provide teaching strategies, technology integration ideas, and assessment tools.
  • Chunk material into manageable parts. TechnoKids projects are divided into smaller sessions or assignments. In this way, a complex task becomes doable.
  • Present learning tasks in graphic organizers. When students create a plan of their ideas for a an inquiry, TechnoKids projects often have them use a chart, brain storming web, or mind map to outline and develop their proposals.
  • Repeat to reinforce. Students build skills through practice, so Skill Reviews and Extension Activities allow for repetition.
  • Allow students to work at different paces. By using the pdf or print copies of TechnoKids workbooks, individual students can complete the activities on their own timeline.
  • Mix up individual and group collaboration. Individual, pair, small group, and whole class activities should all be part of classroom experiences. Flexible grouping allows students with similar learning styles to work together.

Content

Recognize that students have different levels of familiarity with concepts before a lesson is taught. Differentiate activities by designing assignments that cover various levels of Bloom’s taxonomy, from remembering (lowest level) to evaluating (highest level).

  • Give students the big picture. Most TechnoKids resource files include a number of samples of completed projects. Seeing and reviewing a finished project solution motivates students, builds interest, and provides a clear example of what is being assigned.
  • Provide a starting point. A number of TechnoKids projects, especially primary level projects, include templates. Students can focus on the technology and learning skills without getting bogged down in the less critical details of setting up a document.
  • Combine methods of instruction. Blend a mixture of teacher directed, print, video, and any other instructional techniques. This serves the purpose of both maintaining student engagement as well as appealing to diverse learning styles.

Product

The final creation or solution to an inquiry process should be interdisciplinary and open-ended. Allow students to build on their learning style strengths by offering choices. Self directed learning allows for students to work independently and develop critical skills such as organization, creativity, judgement, and persistence.

  • Build engagement by offering choices. Involve students by encouraging them to pitch their own ideas for projects. TechnoKids projects allow for creative thinking and open-ended learning experiences.
  • Offer a variety of outputs. When students are given options, they take more responsibility for their learning and become more engaged. TechnoKids projects may be a presentation, visual art, timeline, graphic story, newsletter, questionnaire, blog, interactive map, animation, and many more!
  • Provide opportunities for assorted types of assessment. TechnoKids grading tools include student, peer, and teacher checklists, rubrics, rating scales, marking sheets, and skill summaries.
  • Incorporate reflection. Summarize learning, process new learning, identify areas for improvement, and set goals. Many TechnoKids projects contain a reflection component in a final celebration of learning.

Computer Science and Technology Integration

Brain research tells us that learning really ‘sticks’ when activities are both meaningful to students as well as integrated in curriculum in an interdisciplinary approach. As well, students are motivated when they are actively discovering and investigating a problem.

computer science

Teach coding with Scratch to middle school and junior students to build computational thinking skills.

TechnoCode, the newest technology project developed by TechnoKids, was created specifically to spark an interest in computer science by engaging students. As they use Scratch to build programming skills, young learners construct a series of activities for kids. As game designers, they consider their users’ interests and abilities. They become authentic programmers who plan, code, and actually field test their unique creations.

The TechnoCode project is primarily a STEM project that teaches coding. However, the activities also integrate into other areas of curriculum including language arts, mathematics, social studies or science, visual arts, and music.

Computer Science

TechnoCode is an introduction to programming. The activities have students build algorithms that sequence commands, events, loops, and conditions. Use the project to target computer science learning outcomes. The project includes a detailed list of skills achieved in each Session, ideal as a teacher checklist for assessment.

Language Arts

The assignments in Session 1 and Session 4 can be integrated into curriculum as a language arts unit. In these assignments, students engage in visual storytelling. They create animated scenes and stories. To extend language arts learning outcomes, the concept of plot, setting, and characters is also applied when engineering games in Session 3 and 5.

Integrate coding into curriculum.

Integrate coding into curriculum.

Mathematics

Integrate TechnoCode into an existing problem-solving unit in Math class. The assignments are an ideal fit because coding requires mathematical and logical thinking. For example, placing sprites on the stage requires plotting ordered pairs, rotating objects involves knowledge of angles, and setting the size of sprites uses percentages. As well, logic is used to control when or if an action happens.

Social Studies or Science

Include The Session 4 Skill Review in TechnoCode as a creative way to showcase learning into another subject area. In this activity, students build an interactive diorama. It shows a scene from nature or a historical event that engages the viewer to click on objects to learn more. Complete the activity to have students share facts or create a simulation about a topic currently being studied. Samples provided include space exploration, tornado, and farming.

Visual Arts

Target visual arts learning outcomes with TechnoCode. Graphic design is interwoven throughout the activities. Students apply their creativity to paint or edit unique sprites and backdrops. They also apply their skills to engage the audience using visual elements. In addition, the Session 2 Extension Activity specifically has students draw artwork with a pen using code.

Music

Integrate TechnoCode into a music class. In the Session 3 Extension Activity, students invent an instrument. This activity is a fun way for students to express their musical talent.

programming

TechnoCode technology project teaches programming using graphical blocks.

Inspire your students to become coding ninjas with TechnoCode!