Tag Archives: stem

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!

Add the A to STEM Education

Educators agree that STEM education is essential to prepare students for the challenges of the 21st century workforce. The skills they learn in science, technology, engineering, and math subject areas also develop vital skills necessary for success: critical thinking, creativity, problem solving, and collaboration. Although there’s quite a debate about whether the A for the arts needs to be added to STEM to make STEAM or if it’s already there inherently, it’s evident that fine arts, language, and music play a key component in a curriculum to prepare young people to face the complex challenges of the future.

steam career readiness

The Arts are a vital part of STEM education

Education Models for the Future

Traditional school curriculum segregates studies into separate subject areas. However, project-based learning is an instructional approach that blends subjects. Students are faced with an authentic, meaningful, real world challenge. And these are non-Googleable questions! Students investigate a problem and propose viable solutions in an interdisciplinary study. Technology is commonly used as a tool. Whatever skills are required to solve the problem – math, science, language arts – must be learned and mastered. Students need to be able to think innovatively, plan, create, and communicate the resulting project. Usually STEM subject areas are needed, and students build valuable job skills such as computational thinking, initiative, perseverance, and communication.

Where Do the Arts Appear?

To answer these ‘big’ project-based challenges, students need to integrate the arts. Creative thinking and design are a central part of innovation. Being able to imagine an outcome, visualize a product, or communicate an abstract idea requires artistic skills integrated with multiple STEM skills.

Here are a couple of examples of the arts integrated with STEM in the real world:

STEM Education requires the Arts

  • Product Design
    Designing an innovative product may require engineering, mathematical, and scientific problem solving. But it also needs an attractive appearance to make an emotional connection to consumers. These are artistic decisions.
  • Advertising
    When a new product is brought to the market, communication skills are essential. Advertisers excel in persuasive writing. In addition, the creation of new logos requires a knowledge of graphic design. The success of a venture often depends on artistic choices.
Arts and STEM education

Infuse the arts into STEM education.

The Arts in Computer Science

We’ve been working with Scratch recently to develop a STEM project, TechnoCode, that teaches coding skills. The students will learn programming skills as they make animations, games, or interactive stories.

Coding design decisions should be engaging so that the user who interacts with the finished product is intrigued and captivated. Also, artistic choices affect if the project is user friendly and fun to play. Some of the stylistic choices students need to make when programming include:

  • Drawing custom characters
  • Designing backgrounds
  • Adding sensory cues – motion, sound, visual – to build interest, express an idea, and hook the user
  • Creating “Game over” messages that encourage and entice the user to try again
  • Making scoring and timing decisions using aesthetic choices that appeal to players

The brainstorming, problem-solving, and decision making involved in programming demand innovation and ingenuity in design choices. To foster the trailblazers of tomorrow, STEM education needs to acknowledge and incorporate the arts.

New Release! Programming Project for STEM Classrooms

In response to the recent spotlight on building STEM skills, TechnoKids is announcing the first of a new and innovative series of computer science technology projects designed to teach programming learning objectives.

Teach Coding

programming

Use Scratch and TechnoCode to teach programming skills

The first of these projects is TechnoCode, just released for junior and middle school grades. The focus of the all new TechnoCode project is to spark an interest in coding. Using Scratch, students become young programmers. They learn computational thinking as they construct a collection of scripts to develop animated scenes, mazes, interactive stories, and games. Additional activities challenge students to create artwork, compose music, construct a diorama, and more! Jam packed with fun programming activities, TechnoCode is ideal for students new to Scratch – a popular, free program that uses graphical blocks to teach logical reasoning.

Programming Fun

Through guided discovery and exploration, TechnoCode teaches students to build algorithms that sequence commands, events, loops, and conditions. After each activity, they complete coding journal logs to reflect on their learning, track their progress, express feelings, and celebrate successes.

coding and programming with Scratch

Scratch is a free program to teach coding developed by MIT. Graphic blocks are stacked to create scripts for animations, games, stories, and more!

In TechnoCode, students follow illustrated, step-by-step instructions to learn how to:

  • Use programming terminology and understand the role of a programmer
  • Code a scene with characters, a backdrop, movement, and sound
  • Build an animated aquarium
  • Design a one-of-a-kind maze game
  • Construct an animated story about a magical place
  • Plan and develop a unique game with timing and a scoring system

Learning is chunked and scaffolded: skills learned in each of the six sessions are reviewed and extended in following sessions. Challenges and extension activities offer optional enrichment opportunities. Junior and middle school teachers can elect to complete as many of the projects as time, grade level, and curriculum learning standards require.

programming with Scratch

Students learn computational thinking, reasoning, problem solving, and creativity as they build scripts.

Foster Digital Citizenship Skills

The collaborative element of Scratch is its online community.

To get inspired, Scratchers can browse a huge gallery of sample interactive stories, music, art, animations, and games. They can remix: start with a project someone else has coded and shared, and then add their own creative touches. When the remixed project is uploaded, Scratch automatically credits both the originator and the contributor, thereby promoting the essential skill of citing the source. The See Inside button on any shared Scratch project allows others to view the code to ‘see how it’s done’, an ideal learning opportunity. Finally, students can share their own work and invite ‘likes’ and comments.

Experiencing success and support of other budding programmers is a key ingredient to building enthusiasm for computer science.

Prepare Students for Jobs

Empower students with the essential, real-world skills they will need in the workplace of tomorrow. Both STEM and CTE – Career and Technical Education – highlight the value of preparing young people with technical as well as employability skills. Ideal skillsets include a diverse combination of higher-level thinking, technology, and interpersonal proficiencies. Teaching programming can do that. TechnoCode is a fun, challenging series of hands-on activities to master a foundational set of computer science standards. As they achieve success, students become enthusiastic, confident problem solvers – critical skills to make them “future proof”.

TechnoCode – STEM, CTE, and ICT Project to Integrate Programming

TechnoCode has everything an educator needs to teach beginning coding skills to students: a teacher guide and student workbook in pdf format, sample completed projects to inspire young imaginations, planning sheets with questions to help design scripts, coding journal logs for reflection, and assessment tools to evaluate student work. Hook tech-savvy young people. Equip your students with practical, creative, and authentic twenty-first century skills.

programming and coding

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.