Tag Archives: google drive

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.

HTML Editor Apps for Google Drive

We get customer support requests about editing HTML and CSS code in Google Drive. Chromebook users want to be able to use TechnoHTML with their students. TechnoHTML is a technology project with simple programming activities for middle school students that allow them to make a web page. Acting on a customer request I reviewed several HTML editors that work well with Google Drive. In my next post, I will explain how you can use these apps to create a web page in Google Drive.

Chromebook users need an app to create and edit HTML and CSS code. I read user reviews and then tried three of the most popular apps. I had success with all of them. I have noted some of the benefits and shortcomings of each app to help you pick one to use.

NOTE: These apps were tested in a Chrome browser using index.html and picture files stored in a shared Google Drive folder. The apps were connected to Google Drive and then used to create and edit the index.html file.

HTML Editey

PRO:

  • Live Preview: Best feature! HTML Editey has code in the left pane and a preview window in the right pane. The preview updates as you edit the code in the left pane making it easy to see text and formatting changes happening in real time.
  • Color Coded Tags: HTML Editey color codes the tags which makes them easier to read. For example CSS, HTML, picture names, and attributes all appear with different colors.
  • AutoComplete: The app automatically inserts the end tag, which makes coding faster.
  • Word Wrap: Word wrap is when the paragraph text wraps around to the next line instead of running off the screen. This makes it easier to type and edit information.

CON:

  • No Pictures in Live Preview: HTML Editey uses placeholders for the pictures. I could not figure out how to solve this problem, even after doing several online searches. To see the pictures I had to open a separate tab, the Google Drive shared website folder which has the index.html and picture file. This would have been an excellent solution, but since HTML Editey has no SAVE button, I could not force it to immediately update code changes, which meant I had to wait a few moments before reloading the page to see updates to pictures.
  • html editey

    HTML Editey lets you preview text and formatting changes in the right pane.

ShiftEdit

PRO:

  • Color Coded Tags: ShiftEdit color codes the tags which makes them easier to read.
  • AutoComplete: The app automatically inserts the end tag, which makes coding faster.
  • Drop Down Code Choices: I liked the drop down that shows code suggestions. This made it much easier to type the correct code quickly.
  • Syntax Checking: Best feature! If you make a mistake when coding a red X appears by the line number with a explanation along the top of the window.

CON:

  • No Word Wrap in the Coding View: ShiftEdit does have word wrap, which is great for writing text. However, to access word wrap you need to be in Design View and then select Tools-Source code. The Source Code pop up window is not as great for editing code because color coding, autocomplete, drop down code choices, and syntax checking are no longer available.
  • No Pictures in Design View: I could not get ShiftEdit to properly display images when in Design View. I still had to open the Google Drive shared website folder, with the index.html and picture files, in a separate tab. The good news is that ShiftEdit has a Save button. This means that a Reload of the webpage instantly shows saved changes.

Drive Notepad

PRO:

  • Code uses a Larger Font: This may seem like a little thing, but my eyes get tired when I read code. I liked the larger font size.
  • Color Coded Tags: Drive Notepad color codes the tags which makes them easier to read. What makes the color coding better than other apps, is that Drive Notepad colors more of the attributes so that things such as px or % stand out on the page.
  • AutoComplete: The app automatically inserts the end tag, which makes coding faster.
  • Highlights Current Line: Other apps may have this feature, but Drive Notepad makes it very noticeable where your cursor is located and the line you are working on.
  • File Management Options: Drive Notepad has simple options to manage the file. For example, there is a Save button and a setting to adjust word wrap.

CON:

  • No Live Preview: Drive Notepad does not have a preview. I still had to open the Google Drive shared website folder, with the index.html and picture files, in a separate tab. The good news is that Drive Notepad has a Save button. This means that a Reload of the webpage instantly shows saved changes.

Since all these apps are free, it is worthwhile installing them all, and allowing your students to select their preferred app.