Tag: Google Sites

Google Sites Layouts Vastly Improved My Digital Breakouts Site

Posted in EducationTagged , , , Leave a comment

I love Google Sites and recently spent a lot of time using it to convert 14 digital breakouts from Classic to New Sites. Since then, Google has announced a new tool in the Google Sites editor – layouts. Layouts solve the problem of aligning images and elements which can be tricky because there are no guidelines like those in Google Slides and Google Drawings. For instance, a page in my Langston Hughes-themed poetry digital breakout has side-by-side YouTube videos. I could never get them to be the exact same size and perfectly aligned. Layouts solved that problem. Have a look:

Using Layouts

Find the layouts tool under the Insert menu in the Google Sites editor.

Screenshot of layouts options in the Google Sites editor.
Layouts options in the Google Sites editor.

The editor uses the picture icon but Google Drive files, YouTube videos, Google MyMaps, file uploads, and Google Calendars can also be added to a layout. I hope web embeds will join this list in the future.

Animated GIF showing elements that can be added to layouts.
Options for elements to add to a layout.

My Digital Breakouts Platform Site

I created the platform for my digital breakouts using Google Sites. For each subject area, I embedded a Google Doc that listed and linked to breakouts. I decided to revamp each subject area page using layouts. This meant using thumbnail images and text instead of a single doc for each page. Here are before-and-after shots:

Before and after images of the Math page of my digital breakouts website.

Before and after images of the World History page of my digital breakouts website.

Pro tip: When using images in Google Sites, pay attention to accessibility by adding alt text:

Animated GIF demonstrating how to add alt text to an image in Google Sites.
Click twice to bring up the crop, link, and Add alt text options.

How using Google Sites Layouts instead of embedded Google Docs improved the site:

  • Design. It’s cleaner and nice. The thumbnails are much more prominent.
  • It is searchable. The content in the embedded Google Docs was not searchable in the Google Sites search:
    Animated GIF showing that a search of my digital breakout site for the term "The New Deal" yielded no results.
    No results!

    Look what happens now that the site uses layouts with images and text instead of embedded Google Docs:

    Animated GIF showing a search of my digital breakout site for the term "The New Deal" yielding the correct result.
    It works!
  • The site is now much more mobile friendly. The embedded Google Docs did not render nicely on tablets and phones. They had to be opened in the Google Docs app to be accessed. Now they are all available with no additional apps to open.

So check out my digital breakouts site. Hopefully, you will like how I used layouts and find a digital breakout or two to use with your middle or high school students. How do you use Google Sites in your instructional practice? What Google Sites questions do you have? Please comment below or tweet me @TomEMullaney. Thanks for reading.

Advertisements

I Converted My Digital Breakouts from Classic to New Google Sites

Posted in EducationTagged , , , , , , , , , , , , , , , , , , , 1 Comment

The summer before my senior year of high school, I had to read Crime and Punishment for my AP Literature class. At first glance, the book’s 545 pages seemed an insurmountable challenge. Then I realized that if I read 10 pages a day, every day, I would complete the novel with time to spare before the first day of school. That’s exactly what I did.

A similarly daunting task presented itself when Google finally allowed Classic Sites to be converted to New Sites this spring. I had 14 digital breakouts created in Classic Sites. The Classic and New Sites platforms are very different. Simply clicking the “Try it now” button only starts the work of making a site visually appealing.

Image depicting the
Clicking “Try it now” only starts the work.

Additionally, I wanted to improve the digital breakouts as I converted them. Starting the third week of June, I set out to convert all 14 breakouts by the end of July. It took six weeks of working like Charlie when he landed a job in a mailroom on Always Sunny, but I am proud to say, much like reading Crime and Punishment 23 years ago, it is finally done. Read on to learn about the changes I made, which digital breakouts are affected, the edtech tools I used, and how I addressed accessibility.

Changes made:

  • Nicer design – Classic Google Sites rendered unattractive websites. New Sites makes beautiful websites. Classic sites did not have the option to have a banner at the top of a page, so that was the foremost design issue to address when converting to New Sites.
  • Fewer browser tabs – One of my concerns with edtech is the overwhelming amount of tabs students and teachers constantly have open in their web browsers. While I was unable to completely eradicate multiple tabs, I was able to reduce the number of tabs in most of the digital breakouts.
  • Favicons and site logos – I added a favicon and site logo (usually the same image) for each site. This avoids the generic Google Sites favicon and makes the site feel more immersive.
  • Accessibility – I regret that I did not consider accessibility when I created the 14 digital breakouts. Thank goodness I learned so much about accessibility from my colleague Lindsey Blass when I worked for SFUSD. As I converted the digital breakouts I was able to use what she taught me about color contrast, narration, and alt text to make the breakouts more inclusive.
  • Some locks have changed. For teachers who have used any of these breakouts before, please have a look to see how they have changed.
  • The URLs are all the same. One great aspect of the conversion is that no URLs change. There is no need to update links anywhere they have been published.

Digital Breakouts Updated:

Social Studies

Let’s start with a four-pack of 60’s-70s US history digital breakouts I am especially proud of:

  • Cuban Missile Crisis – The Cuban Missile Crisis was the very first digital breakout I created. I was never satisfied with it so I completely revamped it. Realizing the Armageddon Letters and Time Ghost YouTube channels told the story better than I can, I leaned heavily on their content. Another big change is the breakout is now sequential, meaning students work on one lock at a time to advance to the next lock. There are four locks in total.
  • Defeat Barry Goldwater – This is most difficult of my digital breakouts. It could be a whole class exercise or an end-of-year US II review because it focuses on the Summer of 1964, a critical time for the Civil Rights Movement and US escalation in Vietnam. Warning: I did not reduce the number of tabs in this breakout. There are a lot of them.
  • Shirley Chisholm: Unbought, Unbossed, & Unlocked – This digital breakout tells the story of the first Black woman to run for president – Shirley Chisholm. It broke my heart when beta testers told me they did not know about her. US II teachers: if you try just one of my digital breakouts with your students, please make it this one!
Image links to the Shirley, Chisholm, Unbought, Unbossed, & Unlocked! digital breakout.
US II Teachers: Please use this digital breakout!
  • Richard KNICKSon – A New York Knicks-themed digital breakout. Why the Knicks? Because they’re my favorite team and they won their only two NBA championships when Nixon was president!

    • Other Social Studies digital breakouts I updated include Escape the Guillotine (French Revolution), Ratify the Bill of Rights, Decide the 1800 Election (Alexander Hamilton), Sell World War I to the American Public, and Liberate Paris (middle school version) (high school version).

    Math

    • Combine Like Terms & Save Halloween – This very popular breakout is now more user-friendly.
    • Liberate the Sphero – A good breakout for reviewing broad concepts with 7th and 8th-grade students or to introduce Spheros and digital breakouts. to Math teachers.
    • Escape to Summer Vacation – Another broad review for 7th and 8th-grade Math. This breakout is much less complicated now and uses fewer browser tabs.

    English Language Arts

    EdTech Tools Used:

    I used a number of tools to improve these digital breakouts:

    Image links to a virtual tour of the White House I created for the Richard KNICKSon digital breakout.
    Click this image to view the tour.
    • EdPuzzle – EdPuzzle adds questions to YouTube videos. It also crops YouTube videos. New Google Sites now allows for embedding external tools so EdPuzzle is fair game. I wish it rendered perfectly with the next tool.
    • ThingLink – ThingLink is the go-to weapon in the fight against multiple browser tabs. YouTube videos, Google Slides, and Google Forms render perfectly on ThingLink images – with no need to open new tabs. If only EdPuzzles did too! Escape to Summer Vacation benefited greatly from ThingLink. ThingLink also a video component. I used that in Unbought, Unbossed, & Unlocked. I wish it also cropped videos.
    • Google Drawings – I replaced Google Drawings hotspot image maps with ThingLink images because they do not open new tabs for YouTube, Google Slides, and Google Forms. I still used Google Drawings to create favicons (512×512-pixel dimensions) because it produces transparent images.
    Animated GIF demonstrating how to click the 3 dots in the Google Sites editor to add a site favicon
    Click the 3 dots in the Google Sites editor to add a favicon.

    Additionally, I used Google Drawings for those times when I did not like the options my chosen Google Sites theme generated for section backgrounds.

    Create a Google Drawing with 800×200 pixel dimensions and use it as an image for the section background. Or just make a copy of this Google Drawing and change the color as needed.

    Google Sites Section Style options: Regular, Emphasis 1, Emphasis 2, Image
    Don’t like the section background options? Use Google Drawings to create the background you want and use it as an image.

  • LunaPic – LunaPic is a great website for adding artistic effects to images. Ignore the 1997 web design – the site is actually very powerful. And it’s free. I used LunaPic to manipulate the site banners for Cuban Missile Crisis, Decide the 1800 Election, and Liberate the Sphero.
  • Canva – Canva is another wonderful tool for manipulating images. It is a freemium site. I use the free version. Use either the YouTube thumbnail template or set 767×280 pixel custom dimensions to make a Sites banner. I used Canva to make the site banner for Sell World War I to the American Public and the Eiffel Tower ThingLink images in Liberate Paris (middle school version) (high school version).
  • Soundtrap – The Soundtrap mobile app is great for recording quick sound clips. It works on any Play Store enabled Chromebook. I detail how I used sound clips in the Accessibility section.
  • Google Forms – Classic Google Forms are still more customizable for background colors and fonts. I did not convert any of my classic Forms to new. Google recently announced that classic Forms will migrate to the new editor soon. I hope this does not change the fonts and colors on these forms because…
  • FontFace Ninja Google Chrome Extension – The FontFace Google Chrome extension is great for identifying fonts on websites. I used it to match the fonts in my classic Google Forms to the fonts in Google Sites themes. Please note: this extension does not work well with the Google Sites editor. I often clicked “Publish” before sites were complete so I could use Fontface Ninja to identify fonts in the “view published site” version.
  • Colorzilla Google Chrome Extension – The Colorzilla Google Chrome extension grabs the hex code of a color on a website. That color can then be used in components of a digital breakout such as Google Forms and Google Slides.

    • Accessibility:

    • WebAIM Color Contrast Checker – The WebAim Color Contrast Checker website details the contrast between any two colors using hex codes. If colors don’t have enough contrast, the site has clickable levers to adjust a color until there is enough contrast. I used this to ensure text and background had enough contrast in Google Forms and Sites.
    • Narration in Tour Creator – Add audio to points of interest in Tour Creator. When I discovered this, I was excited!
    • Alt text for images in Google Sites – One final tip for accessibility – add alt text to images so students with screen readers know what an image depicts. Click the image to add alt text:
    Animated GIF depicting adding alt text to an image in Google Sites
    Click the image to add alt text.

    Thank you for reading. I hope these digital breakouts are useful for your classroom or better yet, inspire you to create your own. Please comment below, tweet me @TomEMullaney, or email me (mistermullaney@gmail.com) if you have questions, need hints, or notice a mistake.

    Feedback for Students in G Suite – An Overview

    Posted in EducationTagged , , , , , , , , , , , 3 Comments

    Teachers and students in districts that use Google for Education have access to a free suite of apps, G Suite, to create and publish. But why use G Suite? Why not Microsoft, pen-and-paper, or go full tactile and have students use typewriters? The reason to use G Suite is feedback – collaboration too, but that is a separate blog post!

    A Quick Note

    This post is meant for teachers who are almost proficient with or just learning G Suite. Additionally, this post contains nothing about add-ons, extensions, coding, or anything extra. Strictly G Suite.

    What is so special about feedback?

    One of the most valuable interventions teachers can use with students is feedback. According to Hattie and Timperley (2007) feedback is vital:

    …Feedback is one of the most powerful influences on learning and achievement…The feedback that students receive from their teachers is also vital. It enables students to progress towards challenging learning intentions and goals.

    – Visible Learning

    Marianne Stenger shared research tips for providing students meaningful feedback in Edutopia. Number 2 on the list? The sooner the better. That’s where G Suite comes in. Here is a quick-and-dirty look at using G Suite to give students immediate feedback.

    Comments (Works in Docs, Slides, Sheets, and Drawings)

    Comments are a great way to give students immediate feedback as they work in G Suite. Select text or an image. There are three ways to insert a comment:

    Demonstration of 3 Ways to Insert a Comment in the Google Docs Editor

    Use either of these methods and type a comment:

    Animated GIF of a comment inserted into a Google Doc

    Comments are even better when an editor is tagged in them. This sends an email to their Gmail. Tag an editor by typing “+” or “@” followed by their email address.

    Animated GIF of an editor tagged in a comment

    Comment boxes serve as spaces where teachers and students can converse. Here teachers and peers can give feedback about work.

    Screen capture of a discussion in a Google Docs comment

    Comments “disappear” when they are resolved. The good news is they never truly disappear. The “Comments” button in the upper right of the editor keeps a record of them. This is great for keep track of all feedback students receive, whether it is from teachers or peers.

    Demonstration of Comments history in Google Docs

    Feedback in Google Classroom

    Teachers can add a private comment to any assignment in Google Classroom. This is what it looks like as a student:

    Private comment feedback from a teacher in Google Classroom

    Teachers can also give feedback for students’ answers when they reply to questions in Google Classroom:

    Feedback on a student's reply to a question in Google Classroom

    A nice aspect of feedback in Google Classroom is that it keeps track of the number of private feedback comments exchanged between student and teacher. What a great way to document the amount of feedback provided to a student.

    Google Classroom keeps track of the feedback comments exchanged between teacher and student

    Google Keep (Works in Docs, Drawings and Slides)

    Google Keep integration is a great way to give feedback in Docs, Drawings, and Slides. One way to do this is to have comments ready to go in a Google Keep note, then copy-and-paste them into comments.

    Additionally, Google Keep can be used to give students longer-form narrative feedback in Docs, Drawings, and Slides. To make the most of this strategy, create a label for each student and each assignment in Google Keep. That way, feedback can be organized by assignment and by student.

    In Docs:

    In Drawings:

    In Slides:

    Google Forms (Response Validation and Quiz Mode)

    Response validation is a great way to give students a question they work on until they get correct. I love using Response Validation for digital breakouts. Simply use short-answer questions in Google Forms, click the three dots, and choose Response Validation.

    Screen capture of Response validation in Google Forms

    This is a great strategy for a math problem – students receive an error message until they type the correct answer. They know immediately if they are correct or wrong – instant feedback!

    Animated GIF of response validation in Google Forms

    Error messages (the red text above) are a great way to scaffold for students as they work on finding an answer.

    Here I demonstrate to use Response Validation:

    Quiz Mode is another good way to give students feedback in Google Forms.  Quiz mode allows teachers to give different feedback for correct and incorrect answers. It also allows for links to be added to answer feedback, meaning students can be directed to a resource to re-learn questions they answered incorrectly. Watch as I demonstrate:

    Two G Suite Apps That Are Not Great for Student Feedback – (Forms?! and Sites)

    Didn’t I just discuss ways to use Google Forms to give students feedback? Yes, I did. Forms is great for giving feedback when they answer forms their teachers create. However, when students create Google Forms, there is no good way for teachers to give feedback inside of Google Forms. The same holds true for the Google Sites (still called New Sites). As much as I love Google Sites, I wish there was a way teachers and students could exchange feedback inside its editor.

    If you would like to share your thoughts with me, please comment below or tweet me at @TomEMullaney. Thank you for reading.

    The G Suite logo I used in the image for this blog post.

    Make Awesome Exit Tickets with Digital Breakouts

    Posted in EducationTagged , , , , 7 Comments

    Author’s Note: This strategy is very similar to the Make Vocabulary Fun with Digital Breakouts strategy I blogged about on BamRadioNetwork’s EdWords blog.

    Here is a strategy for using digital breakouts to make exit tickets that challenge and engage learners while producing useful assessment data.

    Step One: Make a Google Form with the digital breakout locks.

    Use response validation to set each lock (they are short answer questions) to be a key vocabulary word or concept from the lesson. Sometimes locks are referred to as “codes” as seen below. Set each question to be a required question.

    Screenshot 2017-06-08 at 10.45.45 AM

    Keep this to four or five locks.

    Step Two: Make a Google Form with quiz mode enabled.

    Click the settings gear in the upper right corner of the form to enable quiz mode.Quiz Mode

    Add multiple choice questions to Google Form that assess what students learned. The number of questions should equal the number of locks in the first Google form. Choose the correct answer for each question in the form. Feedback for correct answers should be short answer questions that assess the lesson. The answers to those questions are the locks in step one. Feedback for incorrect answers should be links to remediating content.

    Updated for Blog Post

    Step Three: Make a one-page Google Site.

    The first element is a text box that outlines a scenario where something is locked. Have fun writing it and model creativity for learners. See below for an example.

    The second element is a section with another text box. Put the text, “Want some hints? Click here.” in the box. Link “here” to the Google Form with multiple choice questions from step two. Set the section style to “Emphasis 2” or “image” to call attention to this text box. This box can also contain a link to a resource that reviews the lesson content if a teacher wants to provide that scaffold. Here are two examples of what this section can look like:

     

    Without Scaffold Resource
    Without scaffolding recourse and section style set to “image.”

     

     

    With Scaffold Resource
    With scaffolding resource and section style set to “Emphasis 2.”

    The third element on the page is the Google Form with the locks from step one. Simply insert it.

    That’s it. The exit ticket is complete. It gives learners a way to interact with lesson content and assesses them using multiple choice and short answer questions. All a teacher has to make are:
    Two Google Forms
    A one-page Google Site

    Please make copies of the two Google Forms in this Google Drive folder to use as templates to make a digital breakout exit ticket. Click the image below to try a US history digital breakout exit ticket I made for tenth-grade students.

    Kill the Bank! Thumbnail

    Thank you for reading. If you would like to discuss this strategy further, please comment below or tweet me at @TomEMullaney.

    Make Vocabulary Fun with Digital Breakouts

    Posted in EducationTagged , , , , , Leave a comment

     

    My latest BamRadioNetwork EdWords blog post is Make Vocabulary Fun with Digital Breakouts – my strategy for using Quizlet, Google Forms, and Google Sites to rejuvenate vocabulary review. Thank you for reading and considering it. Please comment below or tweet me at @TomEMullaney if you would like to discuss further.

    Why This Teacher Loves Canva

    Posted in EducationTagged , , , , , , 4 Comments

    why-this-teacher-loves-canva-blog-post-splash-image

    I sat in an eighth-grade math teacher’s classroom, working on problems she shared with her students using Mathspace. I do not usually enjoy multi-step math problems but found myself delighted and completely engaged. Reflecting on it later, I realized a significant part of the experience was Mathspace’s sleek, modern design. I like Google Classroom more than LMSs in part because of its beautiful design but it took my Mathspace experience to realize an important rule when creating digital learning experiences for students:

    Design Counts!

    If we want students to engage in digital lessons, we owe it to them to make learning materials visually appealing. Personally, I enhance imagery to make Google Sites, digital breakouts, and YouTube thumbnails that look good and hook students. Canva is a great tool for teachers and students to create imagery that adds beauty to their creations.

    Making an image in Canva is easy. Users can create images with template dimensions such as Facebook and Twitter posts, and, my favorite, YouTube thumbnails. Additionally, users can set custom dimensions such as 800 x 200 (Google Classroom images) and 767 x 280 (Google Sites banner images):

    The Wikimedia Commons is a great source for copyright-friendly images to jazz up a lesson. Here is how to easily upload them into the Canva editor:

    canva-inserting-an-image

    Canva lets teachers make images more dramatic or cheerful with Instagram-like filters:

    canva-image-filters

    A great tool to use in conjunction with Canva is the Colorzilla Google Chrome extension. It allows users to grab any color they see in an image and use it to make more elements. Additionally, Canva’s transparency tool is another way for amateurs to become instant graphic artists:

    Canva is a great tool for students to use their creativity. My colleague Cristie Watson had students create six-word memoirs in Canva which inspired me to make my own:

    Teachers looking for more ways to incorporate Canva into instruction should look at their lesson plans as well as tutorials and design resources.

    There two small drawbacks. I use the free version of Canva so I cannot make images with transparent backgrounds. That is why I made this site’s favicon in Google Drawings. Additionally, images can only be cropped into rectangles, unlike Google Drawings which allows users to crop with different shapes. These drawbacks make Google Drawings a better tool for making digital badges.

    We want our students engaging in the 4Cs in our classrooms. That engagement becomes inevitable when we engage in them ourselves. Canva is a great tool for tapping your inner creativity and drawing it out of students too.

    Author’s Note: I have not been compensated for writing this. I have not collaborated with Canva. They were unaware I that I worked on this post.

    Comparing Digital Breakouts in New Google Sites and Classic Google Sites

    Posted in EducationTagged , , , , 3 Comments

    comparing-digital-breakouts-in-classic-google-sites-and-new-google-sites

    The New Google Sites is live in personal GMail accounts. It is vastly different from what is now known as “Classic Sites.” Here are my thoughts on using both tools to make digital breakouts.

    Looks are important.

    Students are more likely to engage with a breakout if it is visually appealing. The New Sites makes much nicer looking websites. Have a look at my digital breakout templates in Classic Sites and New Sites to see the vast difference. Speaking of design, use Canva to make beautiful header images. 280 pixels high and 767 pixels wide are the ideal dimensions.

    It is so easy!

    Classic Sites is difficult to work with. It is not intuitive. New Sites could not be any easier to use. Make one site with it and you’re a pro. I am thrilled to share New Sites with teachers because they can point, click, and make a beautiful website!

    The one drawback.

    Beautiful, easy sites! So what’s the catch? There is one, and it is big. Third-party sites that embed in Classic Sites, such as EdPuzzle, ThingLink, and Quizlet, don’t embed in New Sites. Instead, there is a preview that opens a new tab when clicked:

    edpuzzle-in-new-sites

    New Sites is still better.

    New Sites’ beauty, ease, and fantastic G Suite integration make it well worth it. EdPuzzle doesn’t work? Find a short video and pair it with a Google Form! Google Slides, PDFs in Google Drive, Docs, Sheets, and even My Maps embed flawlessly – with no code needed! Simply click and drag to move or change size.

    I am perfectly willing to use only G Suite tools in New Sites while I wait for embeds to be added to the platform’s functionality.

    Beware the navigation!

    New Sites has two navigation settings:

    new-sites-navagation

    This means that all site pages are visible by default. However, you can hide pages individually:

    hide-from-navigation

    Here are some suggestions.

    For what it’s worth, here are some suggestions from someone who made many digital breakouts in Classic Sites and can’t wait to get started in New Sites:

    • Figure out what you want your students to work with before making your digital breakout. What PDFs, Google Docs, Google Slides, YouTube videos, Google My Maps, etc. do you want your students interacting with during your digital breakout? Figure that out and your locks will flow from there.
    • Keep the elements on each page minimal. Do not overload students with too many things to view on any one page. Keep it simple and visually appealing. New Sites and Canva help those of us (like me!) who are not artistically inclined.
    • Make one lock super easy. Once students crack one lock, they are hooked. I don’t always follow my own advice on this one. I should.
    • Make digital breakouts in personal Google accounts. No one has a crystal ball. Making a Google Site in a school domain means it could go away if employment status changes. Use personal Google accounts to ensure sites do not disappear when changing jobs.
    • Beta test! Before students try a breakout, have your PLC beta test it to make sure everything is correct. Errors from incorrect links to grammar are common when making digital breakouts. Beta testing makes sure students work on a refined finished product.

    Thank you for reading. Comment below or send me a tweet @TomEMullaney with questions.

    Digital Breakouts in the New Google Sites

    Posted in EducationTagged , , , , , 13 Comments

    new-sites-digital-breakout-template-blog-post-splash-image

    The new Google Sites is live. This is a template website to give you ideas for making digital breakouts in the new Sites. Currently, there is no way to copy sites or publish them as templates. The good news is that the new Sites is so intuitive that making digital breakouts is easier than ever!

    Here are the digital breakouts I have created on my own or in conjunction with colleagues.

    If you have never tried a digital breakout, please watch this video where I take you through the template to show you how it works:

    Please make copies of the files in this Google Drive folder to help you make digital breakouts. This template site uses Google Forms, an embedded PDF, an embedded YouTube video, and Google Slides. Google My Maps and Google Sheets are other G Suite tools that are great for embedding in digital breakouts.

    Comment below or send me a tweet @TomEMullaney with questions.

    All Digital Breakouts I make are inspired by the innovators behind BreakoutEDU,  James Sanders and Mark Hammons, as well as by the creators of Digital BreakoutEDU,  Justin Birckbichler and Mari Venturino.

    Update June 4, 2017:

    Have a look at my video about a small problem with digital breakouts in the new Google Sites and a solution: