Tag Archives: stem

Add a Video Using Google Sites

One sure way to make a website engaging for viewers is to add video content. When creating a page with Google Sites, you can almost seamlessly insert a video using YouTube. A huge and easily searchable website, YouTube is a great resource to find theme appropriate clips to share. Here are a few tips for inserting a video using Google Sites into a web page.

  1. Search YouTube FIRST
  2. video using google sites

    When creating a web page using Google Sites, under the Insert tab you’ll find the YouTube tool. You can click it to go directly to a window that allows you to enter keywords to search right in YouTube.

    But DON’T! The problem is that you’ll see lots of images of results but won’t be able to preview the actual videos.

    Instead, open a new tab in the browser and go to YouTube. THEN enter your keywords and browse through the results. When you find one, view the whole video to critically determine if it is what you’re looking for. Be sure not to post a video that you haven’t thoroughly previewed.

  3. Pick a Short Video
  4. With the proliferation of videos online, it takes a really compelling sample to hold the attention of your audience. Check the length of a video. Try to find a clip that is only a minute or two (or less!) long. Of course some topics require longer explanation, but be aware that your viewers may not watch the whole clip unless it is especially fascinating or unique.

    When you have found a video you like, copy the URL.

  5. NOW Search YouTube Using the URL
  6. Return to the browser tab that has your Google Sites web project. Now pick the YouTube tool under the Insert tab. In the dialog box that appears, instead of typing keywords, paste the URL you copied from YouTube.

    Paste the copied URL from YouTube into the search box

    Click Search. Your video will appear, click on it, and then click Select. That’s how easy it is to add a video using Google Sites.

  7. Format the Video
  8. You can now customize the clip:

    • Click Settings to choose:
      • how you want the controls to appear
      • the color of the progress bar
      • whether the viewer can see the video full screen in another browser tab or will watch it only on your web page
    • Drag the video to position it on the page.
    • Hover over the left side of the video to pick Section Background. Choose an option.

  9. Preview the Web Page
  10. Select the Preview tool and see what the video will look like when it’s published. Remember the nifty responsive design feature of Google Apps – click each of the three options: Phone, Tablet, or Large screen to view the layout on different devices. Now you can again preview the whole video clip if necessary.

    video using google sites

    Add a YouTube video to engage viewers in your website

    TechnoSite Web Design Project for Kids

    TechnoSite

    In TechnoSite students become web designers.

    All of these tips to add a video using Google Sites and much more are included in TechnoSite, a web design project designed specifically for teachers of elementary grades. Empower your students with STEM skills as they construct professional looking websites for any curriculum topic, area of interest, sport, or hobby. Everything you need is included: Teacher Guide, Student Workbook, Assessment Tools, Sample Websites, and more! Find out TechnoSite details, view samples, and see the project learning objectives here.

Web Design For Kids – Google Sites Features to Love

Web design for kids has never been as easy. Google Sites is an ideal app to construct fun, engaging, and useful websites for use in the classroom. Not only is Google Sites free with a Google account, but the tools are simple to use yet students can create professional looking results. Captivate interest and develop essential skills for the future by making websites with your students.

TechnoSite is an all new TechnoKids project that uses Google Sites to transform students into skilled web designers. In this TechnoKids project, they learn how to build a website that includes links to fun places for kids on the World Wide Web. Here are some of the nifty features that we like about web design for kids with Google Sites.

Insert Unique and Fun Elements

web design for kids

  • Themes
    When starting to make a web page, students can choose a theme. This creates a consistent, professional looking site. The font and color can also be chosen to create a one-of-a-kind design. However, there are a limited number of choices so that students are bogged down in making a decision.
  • Image Carousel
    This ‘gadget’ allows you to use a picture frame that with automatically display multiple images. Simply select two or more pictures and insert them into an image carousel. The website viewer can click the arrows to see each picture or it can be set to loop through the set of pictures automatically.
  • Layouts
    To add text and images, a selection can be made from the Layouts gallery. These preset designs contribute a polished, ‘expert’ look to the website.

Elementary students can make professional looking websites using Google Sites.

Customizable Web Page Banner

The banner at the top of the page can include text and a background image. There is a gallery of designs in Google Sites to choose from, or the web page creator can search for an image. Since it’s tricky to find a simple themed picture that looks great in the short and wide banner space, add the keyword wallpaper to the search term. Google Image Search narrows down the results to more appropriate images for the banner.

Set Navigation Mode

By default, the navigation bar automatically appears at the top right of the banner on the Home Page. Navigation settings can be adjusted to move the bar to the left side of the page. This is convenient if the layout or images look better if the page is narrower or simply if the designer wants to personalize the navigation settings.

Add a Logo to Create an Instant Color Theme

To make the website unique, a small logo can be added at the top left of the banner. Search for a simple small image or upload one to suit the webpage topic. The colors from the logo will be automatically used to produce a custom color theme.

Make Quick and Easy Changes

Want to change the order of the pages in the website? It’s easy: under the Page tab, just drag the pages to set the order you want. The navigation bar automatically adjusts too!

Test Responsive Design

With the extensive variety of devices that are commonly used to view web pages, it’s convenient to be able to preview how the website in different modes. When previewing the page, you can switch to see how it will look on a phone, tablet, and large screen. Compare how the layout changes depending on the screen of the device.

web design for kids

Responsive Design in Google Sites allows you to preview what the layout will look like on a wide screen, tablet, or phone.

Web Design for Kids Made Easy

Certainly Google Sites is an outstanding yet simple and intuitive tool for the classroom. The features are fun and powerful yet allow kids to create and publish projects that they will be eager to share. And TechnoSite is the all new TechnoKids project that empowers kids to build STEM skills using Google Sites. Find out more about TechnoSite here.

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.