Tag Archives: google drive

New! HTML Coding for Chromebook Users

teach STEM skills

Teach HTML coding using Chromebooks

TechnoHTML5 has always been a favorite top seller for educators. With the current focus on STEM education, teaching HTML coding is more relevant than ever. Now that Chromebooks are prevalent in the classroom, TechnoKids has modified this popular project specifically for Chromebook users. Using a web-based text editor that integrates with Google Drive makes HTML coding a breeze. Now when you order TechnoHTML5 you will receive two versions: one for desktop HTML text editors such as Notepad or Code Writer and a version for Chromebook users that uses a free app such as HTML Editey.

STEM Activities to Learn Life Skills

I wrote in a previous blog about the reasons to teach programming. Of course, not many students will choose careers as computer scientists or program developers, but that’s not the main rationale for coding lessons. Strong communication skills and personality traits that lead to success in life and the workplace are critical goals for students. Learning to code does just that. As they learn to plan, organize, write, edit, and troubleshoot, students build invaluable life skills. Perseverance, problem solving, analytical thinking, creativity, and collaboration are enhanced by learning programming. These crucial personal habits will benefit students for life.

Everything Educators Need to Teach HTML

TechnoHTML5 for Chromebooks is an introductory HTML project for middle and high school grades. Students build a web page using HTML and CSS. They style text, graphics, and hyperlinks. Optional challenges have them format lists, add a background image, create a class, add animated gifs, and more! Step-by-step instructions with checklists in the Student Workbook build organizational skills. The Teacher Guide includes assessment tools such as a summary of skills and customizable marking sheet to evaluate the completed web page projects. Digital resources include sample files, reference sheets, review questions, and skill reviews for practice.

Coding for Chromebook

Students design a web page on the topic of their choice using TechnoHTML5.

Chromebooks Make HTML Coding Easy

HTML Coding is fun and easy using a Chromebook and Google Drive. coding for ChromebookOn a desktop, I found it cumbersome to always save my work in the text editor then toggle to a browser and refresh to see a preview. But using a free text editor for Chromebooks such as HTML Editey provides instant feedback. Two panes allow the user to write code and see immediate results.

There are many other great features to HTML Editey that we’ll write about in an upcoming post.

How to Share TechnoKids Files Using Google Drive

At TechnoKids, we’re often asked how our templates, samples, or workbook files can be shared with students. One common option is to use Google Drive. The only prerequisite is that each student must have an individual Gmail account.

Before getting started it is important to refer to your site license agreement. TechnoKids files cannot be placed in the public domain. The folder MUST BE KEPT SECURE and only shared with approved users.

INSTRUCTIONS FOR THE TEACHER

Make a Folder in My Drive

  1. Sign in to the teacher’s Google Drive account.
  2. Make a folder:
    1. Click New and pick Folder.
      new
    2. Name the folder with the name of the project you’re using, e.g., Bookmaking, Toon, or Journal.
    3. Click Create.
  3. Upload the files to the new folder:
    1. Drag and drop the files from the folder OR click New and choose File Upload.
    2. Navigate to the location of the files, select them, and click Open.
  4. Copy files from the TechnoKids student folder to a Google Drive folder.

    Convert the Files (OPTIONAL)

    IMPORTANT: Google Docs does not have a native format. This means that TechnoKids templates are Microsoft Office files. To make it easier for your students to open the templates, convert the files into Google Docs files.

    If you are using a TechnoKids project that has templates such as TechnoBookmaking, TechnoMe, or TechnoRestaurateur then do this step.

  5. If the file is a Microsoft Office file type (pptx, docx, or xlsx), double click on it.
  6. Is the file a template? If yes, do this step.

  7. Select Open with and pick the Google application such as Google Slides, Google Docs, or Google Sheets.
  8. Open the file with the Google application.

  9. The file will open in the Google application. This will create a Google file that is easy to share with students. Close the tab (X).
  10. You will notice you have TWO files – one is the original Microsoft Office file – the other one is the new Google file. DELETE the original file. KEEP THE GOOGLE FILE.
  11. Delete the original file and keep the new Google file.

  12. Repeat to convert all templates and delete the original files. For example, the picture below is for the project TechnoRestaurateur.
  13. Google Drive

    Now there is only a Google Sheets, Docs, and Slides version of the files.

    Share the Folder

  14. Go back to My Drive. If necessary, close any tabs that were opened for the converted files.
  15. Select the folder.
  16. Click Share.
  17. share share TechnoKids files

  18. Enter the email addresses of all students. You may have created a directory so they can be all added at once.
  19. Click the edit options and choose Can view only. This step ensures that students cannot edit the file unless they save a copy.
  20. edit options share TechnoKids files

  21. You may want to add a note to your students. Students will receive an email with a link. Click Send

TIP: You may want to share a link with students instead of send an email. To do this, click Get shareable link. Select can view. Share the link with students. MAKE CERTAIN THAT WHERE YOU POST THE LINK IS SECURE AND THAT IT WILL NOT BE ACCESSIBLE TO THE PUBLIC.

INSTRUCTIONS FOR THE STUDENTS

  1. Open the email and click the link to go to their Google Drive OR open their Google Drive.
  2. Click Shared with me.
  3. Open the folder.
  4. Right click on a file OR single click the file and click More actions.
  5. more actions share TechnoKids files

  6. Pick Make a copy.
  7. Go to My Drive and double click the Copy file to open it.
  8. Rename the file. Now students will be able to work on, edit, and have a copy of their own file.

WHAT ABOUT THE PDF ASSIGNMENT SHEETS?

Each TechnoKids project has a Workbook folder. In it, are digital assignments that students can use to follow instructions and type their answers. Your students must make a copy of each PDF assignment. This will save the file to their Google Drive. They can then use the Chrome extensions XODO or KAMI to open the file and type their answers. To learn more read the blog article, PDF Reader for TechnoKids Files or watch the video, Annotate with XODO TechnoKids Workbooks.

Make a Flip Book

Make a flip book
Create an online animated flip book.

FlipSnack is a site that animates the pages of a document. Using any pdf file, you can generate a fun, interactive version of a story, journal, or any piece of writing that your students have created.

If you do not have an account, the book will not save. If you make your own free account, your book will have a link you can share with others.

  1. Sign In to Google Drive and open your story.
  2. Click the File menu. Choose Download as > PDF Document (.pdf)
  3. Choose a place to save the file (for example: desktop).
  4. Go to http://www.flipsnack.com/
  5. Click Create Your Publication.
  6. Drag and drop the pdf file you saved in Step 2 into the selection box; or click the select button and go and get your file.
  7. Click Next.
  8. Click to read your book!

Have your students written stories using TechnoStories or journals using TechnoJournal? They will be delighted to make flip books from their creations and share their links with their friends, teachers, or parents!

Create a Web Page in Google Drive

TechnoKids creates a technology project for teachers interested in teaching an introduction to HTML and CSS. We encounter many frustrated Chromebook users that want to complete the activities but are not sure how to modify them to suit their learning environment. I have some great news! You can code a web page in Google Drive with the help of an HTML Editor app. I spent the morning testing several apps to find one suitable for Grade 7 and 8 students. Here are the steps you need to complete to make a web page with HTML code in Google Drive:

STEP ONE – Share a Folder Publicly

You don’t need to upload your files to a separate website domain. Instead, any folder that is shared publically in Google Drive is given a URL. This URL becomes the website domain. You will put the index and pictures files into this folder. Here is how:

  1. In the Chrome web browser view your Google Drive.
  2. Make sure you are in the old version of Google Drive. Click the Settings gear and select Leave the new Drive.
  3. Click CREATE. Select Folder.
  4. Name the folder website. Click Create.
  5. Select the folder. In the left pane, select DETAILS.
  6. Click Share in the SHARING area.
  7. share settings

    You need to change the share settings.

  8. Click Advanced. In the Who has access area, click Change.
  9. create a public folder

    You need to make the folder public.

  10. Select On – Public on the web. Click Save.
  11. public folder

    Any files in the folder will be viewable by anyone.

  12. Click Done.
  13. A link will appear on the Details pane in the HOSTING area. This is the URL of the website.
  14. folder url

    The folder has a URL.

Inside this folder you will create the index.html file and store all the pictures you are going to include on the web page.

2. Install an HTML Editor App

To install an app:

  1. In your Google Drive, click CREATE.
  2. Select Connect more apps.
  3. In the search box type in the name of the app. For example, Drive Notepad, ShiftEdit, or HTML Editey.
  4. Click CONNECT.
  5. You will be asked to make it the default app. I typically remove the checkmark so that I can pick the app I want instead.
  6. Click OK.
  7. Now you can create and edit files with the app!

3. Create an Index File

An index.html will contain the code to make the web page.

  1. Click on your website folder from step 1 to open it.
  2. With the folder open click CREATE. (This will cause the index.html you create to be stored in the shared folder)
  3. When asked to create the file in the shared folder, click CREATE AND SHARE.
  4. Since it is the first time using the app, you will be asked to grant permission. You must complete this step before the app will open. You only need to do this once.
  5. Select the HTML editor app you connected in the previous step. The app should open in a new Chrome browser tab. You should have two tabs open!
  6. tabs

    You should have two tabs open in the Chrome browser.

  7. Type your code. For example:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>About Web Page </title>
    </head>
    <body>
    <h1>Web Page Title</h1>
    <p>Type the information for your page.</p>
    </body>
    </html>
    
  8. Save the file as index.html (Every app has different saving options)

4. How to Preview the Web Page

To see how the web page will look you need to open the shared folder you created in step 1.

  1. LEAVE THE APP WINDOW OPEN!
  2. Click the Google Drive browser tab.
  3. Select the website folder you created in step 1.
  4. Click the link on the Details tab in the right pane to view the web page you just created in step 3.
  5. folder url

    The folder has a URL.

5. Write Code and Preview Web Page

You can now toggle back and forth between the coding app and the web page. TIPS:

  • Save your changes in the coding app. If you cannot save changes (HTML Editey), you will need to wait until the app automatically saves the file.
  • You will need to Reload the web page preview to see the updated code changes.

6. How to Edit the Code

At some point you will need to leave your computer and stop coding. When you come back to the device you will need to reopen the saved index.html file to continue to write code. To do this:

  1. Click on your index.html file.
  2. Click the Open arrow and select the HTML Editor app from the list.
  3. To preview the web page complete step 4.