Developer's Corner - Hello World! - Writing Your First Chrome App

What Is a Chrome Extension?

A Chrome extension is a plugin for the Chrome browser that extends and enhances the built-in functionality of the browser and Chrome OS operating system. Extensions are the only way to "install" software on a Chromebook. Extensions come in two flavors: background extensions and apps. Extensions run in the background, often require little to no user interaction, and typically exist within the browser window itself. AdBlock is a good example of an extension that requires no user interaction; it runs in the background doing the task it was programmed to do. Apps are similar to traditional desktop applications such as Word or iTunes; they can open their own separate windows and a launcher button is added to the Chrome app launcher when they're installed. Complex apps usually have features of both background extensions and apps. Chrome apps are really just a special type of extension from a programming perspective. 

Chrome apps are nothing more than web applications that run locally on the user's computer, unlike a traditional web page where the browser has to first download the web application's files before it can run scripts or display the web page. Chrome apps, just like web sites, are developed with three main technologies: HTML, CSS, and JavaScript. If you're not familiar with these technologies, check out the following resources:

• CodeCademy - An interactive tutorial for many different web technologies.
• W3Schools - A reference resource suitable for beginners.
• Mozilla Developer Network - A reference resource suitable for intermediate or advanced learners who need more detailed Application Programming Interface (API) reference.

Write Your First Extension - Hello World!

Hello World is traditionally the first program a developer writes when starting on a new platform, so we'll do the same in this exercise. Because students are likely to be using Chromebooks, this application will be programmed on a Chromebook.

Step 1. Download a Chrome app suitable for programming; any editor with syntax highlighting is acceptable. I use Text on Chrome OS, but Caret is another capable option. If you're following along on a Mac or PC then I recommend Text Wrangler or Notepad++, respectively. Sublime Text is another excellent editor available for both Mac and PC.

Step 2. Create a folder in the Downloads folder on your Chromebook to save your files for this exercise. You can also create the folder on Google drive, but you'll have to copy it to Downloads before loading the extension because developer extensions cannot be loaded directly from Google Drive.

Step 3. Chrome apps, unlike their Internet-based siblings, require a special file called a manifest. The manifest provides information such as name, description, version, any permissions that your app might need, and many other pieces of information that Chrome needs to properly execute the app whilst keeping the end-user secure. This file must be named manifest.json, and it must be in the root directory of the application.

Open up your text editor, and type the JSON (JavaScript Object Notation) formatted code below. Pay special attention to the special characters because they're crucial to maintain correct JSON syntax. JSON is especially useful in web applications because it's easily interpreted by both JavaScript within the browser as well as various server-side languages. Save the file as manifest.json in the folder you created in step 2.

manifest.json

Step 4: Let's write the HTML for the application. Open a new file in your text editor and save it as main_window.html. Enter the HTML code below. Notice the embedded CSS inside the style element. It's considered best practice to put your CSS in an external file so it can be used my multiple pages, but I've simply embedded it in the HTML file to keep things simple.

main_window.html

Step 5: Look back at line 8 of manifest.json and notice the scripts array; items in that array will be executed by Chrome when the app launches. We'll use background.js to open our window containing the contents of main_window.html. Open a new file in in your text editor and save it as background.js. Enter the Javascript code below. Make sure you pay special attention to the special characters. JavaScript is case-sensitive, so make sure you're using capital letters when necessary.

background.js

That's it! To install your extension into Chrome, click the right-most on Chrome's toolbar, click settings, and click extensions on the left side of the settings page. You might need to tick the "Developer Mode" option to enable the developer features. Click "Load unpacked extension", and select the folder you created earlier. Your app will now be in the app launcher, or you can simply press "Launch" from the extensions page. If Chrome throws an error or the app fails to launch then check your code for any errors.

Hello World!

In the next post, we'll dive a little deeper by using JavaScript to add some additional functionality to our Hello World app. Make sure you keep your copy of the project safe by syncing it to Google Drive.

What is the difference between an App and an Extension?

In the Chrome store, you will notice that there is a section to select Apps and a section to select Extensions. What is the difference between the two?

Chrome App - Chrome Apps are really just websites that allow you to accomplish a certain task. If I wanted to create a video on my Chromebook, I could go to WeVideo.com or click the App for WeVideo. Downloading apps from the Chrome store allows us to have quick access to websites that we use on a regular basis. Apps are categorized in the Chrome store. This helps me when I am searching for a good website/app to use for a specific purpose. **Note:  Apps now also include many offline-capable applications that work similarly to traditional PC or MAC programs- opening as a separate window.  You can find these under "For Your Desktop" and they're also marked with a lightning bolt in your search results**

Chrome Extension - A Chrome extension gets it name because it actually extends your browser's capabilities across many websites. These capabilities could be anything from taking a screenshot, creating a screen recording, having text read to you, etc. For example, I used a Chrome extension called Webpage Screenshot to take the screenshot you see in this post and to annotate that screenshot. That extension works no matter what webpage I am on. 

Teaching Story Development to Digital Natives with StoryJumper

Teaching Story Development to Digital Natives with StoryJumper

StoryJumper www.storyjumper.com

It’s Thursday and that mean it is time for Chromebooks in Education to highlight a Web 2.0 cool tool for student production. A partnership teacher and I were preparing lesson concepts for next year when we stumbled across StoryJumper. As I write this, my mind is racing with applications for this web tool.

The graphics are a little crude, but that isn’t necessarily a drawback. The attempt (and the fear of potential failure) to achieve professional / polished work can be intimidating for students that aren't tech savvy. That anxiety stifles students’ creativity in my opinion. A sloppy looking platform gives students the freedom to get past the details and into the meat of the learning objective. Additionally, the interface of the program is simple and students will not be bogged down in the navigation or manipulation that can be common with products like Prezi.

Graphics from: www.storyjumper.com

The images available within the program lend themselves to fictional or fantastical tales; great for the younger audience. However, when needed students can supplement the library stock with uploaded images. As a result the application is useful to all grade levels.

The StoryJumper site is going to increase the learning and literacy skills of all grade levels (but not in the same way). Younger students will love working with graphic manipulatives in their story. It will encourage their creative instincts while they develop their 21st century skills including digital learning, critical thinking, decision making and communication. Older students will have fun with those features but also be cognitively ready to take advantage of the programs’ story development aids. The program offers stimulation to most learning types; tactile, logical, linguistic and spatial learners.

What I was most impressed with was the length to which the developers went to to make this website classroom ready. First, this website will work on any browser. That consideration isn't as important in Moore County, NC because we have great hardware in the hands of our students (HP Chromebooks), but it may be a relevant consideration for your LEA’s situation. Second, teachers’ accounts are free & they can set up “classroom” lists with students, usernames, and set time limits for in-class work (students have the option to create "at home" accounts to show their creation to their parents or work from home). Third, there is a one-click button that will create “getting started handouts” for each student with their personal log in information. Last but definitely not least, scaffolding and differentiation have been built into the program! Click on “Help” and find the link “download worksheet”. Seen below, the worksheet walks students through all the steps of character and story development.

TIP: If you are not in a one to one environment, students can complete story worksheets  & storyboards ahead of time to maximize time on task when you have hardware access.

Graphics from: www.storyjumper.com

I love this website and I can't wait to start using it in MCS classrooms next year. I see this fitting perfectly with our ELA, History, Foreign Language, and Science instruction. If you can think of anything else, put in the comments box below and share with our PLN. 

Read Graphite’s review here:

http://www.graphite.org/website/storyjumper

Read Common Sense Media’s review here: 

https://www.commonsensemedia.org/website-reviews/storyjumper

Will Herring

Digital Integration Facilitator

Moore County Schools

wherring@ncmcs.org

@WilliamHerrin16

Student Feature - Movenote in AP Biology

For this week's Student Feature, I would like to showcase a student from Union Pines High School in Cameron, NC.  Gavin is a sophomore at Union Pines and created a Movenote Video on Lipids in his AP Biology class.  Gavin's teacher, Glenn Caviness, was very impressed by his video because of its accurate information with the right touch of humor.

      +Movenote         @Movenote 



Movenote is a web-based tool that allows users to record themselves presenting slides, pictures or presentations.  Mr. Caviness used this tool to have his AP Biology students create review videos that were shared out with others in the class using Google Docs.  Students could then view their classmates videos to study for the End-of-Course Test.

You can check out Gavin's Movenote video here or by copying and pasting the following link in your browser:   https://www.movenote.com/v/VJUlGYJwfvF-i

There are several other students who created Movenote videos and shared them out with the class.  The links below will take you to those presentations.

Proteins:

https://www.movenote.com/v/zgeKt8hokXODN

Mitosis & Meiosis:

https://www.movenote.com/v/Poet_Fw4KNK

Symbiosis:

https://www.movenote.com/v/EWtqXP6TjbC

Population Growth:

https://www.movenote.com/v/5AfRD-3e8cM

Water:

https://www.movenote.com/v/eAjYvE2vB-3XL

Circulatory System:

https://www.movenote.com/v/gKdk6mOTQyoTU

Nitrogen Cycle:

https://www.movenote.com/v/0gaw6XSBbwv

Cell Structure:

https://www.movenote.com/v/sSwJHvj3coSEd

Evidence for Evolution:

https://www.movenote.com/v/kljaD12m2X_s9

Cellular Respiration:

https://www.movenote.com/v/vD7Tpu9ph25

To contact Mr. Caviness about this project, you can email him at gcaviness@ncmcs.org 

Until next time,

Tyler Callahan

@STEM_TC

Digital Integration Facilitator

Moore County Schools

jcallahan@ncmcs.org

Teacher Feature - Ashley Luersman and her Mystery Skype

Allow me to introduce you to a teacher at Carthage Elementary School who has been one of my favorite colleagues to work with this school year. Ashley Luersman teaches second grade at CES and she is one of those teachers who you would want your child to have. It is hard to believe this is only her second year in the classroom since graduating from Grand Valley State University in Allendale, Michigan. She is passionate about her profession, she truly loves what she does and she believes in the benefits of integrating technology in her classroom. 

One particular digitally-infused activity that I thought was most impactful for her students was a social studies lesson where she lead her classroom in a Mystery Skype (If you are not familiar with what a Mystery Skype is, here's a brief overview: two predetermined classrooms connect via Skype and the students pose questions to each other to determine their counterpart's secret location). 

I know what you're thinking. How can something that a second grade teacher uses in her classroom apply to what I'm doing with my students? Well, I'm way ahead of you. When I sat down with Ms. Luersman to gather more information about her Mystery Skype experience I was overwhelmed with the positive feedback she gave me and how many benefits there were from participating in the inquiry based, cross-country conversation. "The learning was relevant to my students which made it much more engaging. We had covered the curriculum in class prior to the activity, but the Mystery Skype gave the students a hands-on opportunity to make the information more meaningful. Choice was a big part of this assignment. The students decided not only what questions they would ask the other class, but we provided the students with a choice of what they were going to be responsible for during the activity. Whether it was being a researcher, a google earth expert, runner to communicate with other teams, or the person who communicates with the other class among other jobs. This also gave my students a chance to collaborate and they had a tremendous role in the learning process, I was just the facilitator. This was a great experience for my students. They knew they were learning, but they loved it! I will definitely be doing more Mystery Skypes next year." - Ms. Luersman

Create Your Own Classroom Posters!

Create Your Own Classroom Posters!

   As classroom teachers and administrators, we know how expensive decorative supplies and programs can be. With new technology, it is possible to create your own, personalized, classroom posters. These posters can state your class motto, school pledge, or favorite quote. 

   

   These customizable posters can be created at recitethis.com. Simply type in your word, quote, or statement and choose a theme.

    

      After selecting your desired poster template, you are ready to share, download, and eventually print. After just a few easy steps, your classroom will be transformed into a unique, personalized, learning environment.

Happy designing!

~Deanna Spizzirri

Global Connections on Chromebooks with ePals

One of the absolute best tools I've encountered over the years to increase global awareness and collaboration across the world is ePals (located at http://epals.com).

"ePals" are what the name implies - Electronic Pen Pals.  But the service offers so much more (and all free!).  With ePals, you can connect with classrooms from over 200 countries all over the world, whose students speak 136 different languages and range in age from preschool to college age.  

Once you're logged in as a teacher and have completed your class profile, you can easily search for and connect with classes through an intuitive process.  As you can see, it's very easy to narrow down your search so you can start looking at profiles that fit your classroom's exact needs. 

The three types of collaboration that are available are simple email exchanges (like a traditional pen pal), video chats, and collaborative project work spaces.  These three can certainly be combined as you grow more comfortable with your ePals.

Click here to browse / search for classrooms so you can see how the interface works.

---

A sample profile

Each classroom profile is created by the teacher and explains the types of connections they are hoping to make.

---

Finally, another great service that ePals provides are message forums for teachers and students alike.  Here, students can pose and answer questions to the global community that are interesting or relevant to their lives. Here, you'll see students from all over the world discuss things like their favorite foods, favorite books, favorite movies, as well as globally important issues such as gun control, women's roles, and cloning. It's great to see students read through and contribute their own thoughts and ideas about topics that are highly relevant to their lives.  It can be quite an eye-opener for many students who may otherwise never get an opportunity to communicate with kids their age from around the globe.

---

Here's to hoping you take the dive and expose your students to the global community in a way that is very accessible and "real."  Try ePals!

A Notable Addition to MCS Chromebooks

A Notable Addition to MCS Chromebooks

Hi everyone! My name is Will Herring & I’m the newest member of the Moore County School’s Digital Integration Facilitation team. During my second week on the job, one of MCSs’ outstanding APUSH teachers asked if there was an app in the Moore@School Google App Store that would allow his students to 1) annotate and 2) collaborate in PDF files. To prepare for the AP test he needs to have students practice with document based questions (DBQ’s) that can run upwards of 8-10 pages per student. If such an app was available, teachers could save thousands of copies (and time), expose their students to a wider range of resources, and give them powerful tools to activate critical reading, thinking, and peer editing skills.

Enter Notable PDF to the Google Marketplace. Notable is available as either an App or extension in Google Chrome. Import PDF’s individually with “Open As” or set Notable as your default viewer. Connect with real-time collaborators with the “link” icon in the top right corner of your screen. Once you have the document you need, there are two options for annotation;

Highlight & Comment: Choose the “highlight” icon in the top right of the screen, select the color you want, and select text you want to annotate. When you release the mouse, a comment box will automatically appear on the right-hand column.

O Target & Comment: Double click on the document where you would like to add a notation. A “target”  placeholder will stay there and a comment box will appear in the right-hand column.

I can see a place for this app for collaborative idea development, peer review/feedback (but not replace Docs), and resource analysis. I’m really looking forward to see how our foreign language and visual arts teachers figure out how to use this tool.

Maybe the greatest feature for my logistics oriented mind is that Notable will work offline and upload when the student returns to a WiFi enabled area. This is so important for those students without access away from school.

Student Feature of Glogster at Westmoore!

      

  For this week's student feature, Mrs. Ellis' 7th grade ELA students, wished to share their Glogster presentations. Glogster is an online tool that allows students and teachers to create interactive online posters. These posters can include links to webpages or documents, and can be embedded with text, pictures, video, and audio.

      Mrs. Ellis' students used Glogster to create a summary poster of their recently completed book, The Giver. Their poster had to include events and dialogue critical to the story's main idea and a timeline of story events. Below are links to the students' Glogster pages, and their opinions about the project.

C. Bartholomew

   It's a whole lot better than writing an essay because you can add pictures, and it isn't as frustrating to get your thoughts out. It makes the paper easier to read because the words are in smaller groups. It's a much better presentation. 

Taylor McNeill

   I like the Glogster because it is easier. You can break up your thoughts into sections instead of in one long paper which makes it easier to read. You can add in animation to add interest to your Glogster, and you can add color. 

Teacher Feature - Jilian Reynolds

Jilian Reynolds is a rock star 7th grade ELA teacher at Elise Middle School in Robbins, NC.  She is one of those teachers that has always been at the forefront of using technology with students, always chomping at the bit for more!

Because of this, at the start of this 2013-2014 school year, Jilian was a natural selection to pilot 1:1 Chromebooks for our county.  Her students did amazing work, created incredible multimedia projects, and have become a model classroom for others to come visit and see what every student is capable of doing on these machines.  She and her student's work and willingness to share their positive feedback on the Chromebook experience was a big factor in our decision to move forward with these devices for all students in grades 6-12.

As a bonus, Ms. Reynolds produced a short video with her students that shows how she uses Chromebooks in her classroom to easily and powerfully differentiate instruction and assessments.  Enjoy!

Backchannels in Education

As our district has rolled out Chromebooks in several middle and high schools across the county, teachers have come to rely on using backchannels to increase student participation in classroom discussions. Designed similarly to old school chat rooms, backchannels are secondary conversations that occur while the primary focus may be a lecture, video, or some other teacher-led presentation. There are several great websites that offer students the ability to have a voice in the classroom: Padlet, Socrative, and Nearpod are a few of my favorites. But the digital tool that I've grown to like using is TodaysMeet.

TodaysMeet is a free resource that teachers (AND STUDENTS!) can use to create isolated rooms for hosting backchannel discussions. You do not need to create an account with TodaysMeet in order to use the service. Once your room is created, give your students the web address and have them join the digital conversation.

Classroom Ideas for TodaysMeet:

• Students can ask questions and get answers without interrupting the class
• Poll your students
• Students can record their reactions and/or questions about a video that you show in your classroom. You could also require your students to answer questions about the video to increase engagement.
• Students can create a conversation where they become a character in a novel/passage/story and they add comments or answer questions as if they were the character from their book.
• Brainstorm ideas for group projects

Infographics in the Classroom

An infographic is a way to take a complicated topic and display it in a visually appealing design that is easy to understand. It combines text and graphics in a meaningful way. Students must thoroughly know the material to create a good infographic. To learn more about infographics and to see some good examples of infographics, visit Kathy Schrock's blog.

Students have access on their Chromebooks to an infographic creation tool called Piktochart in the Chrome Web Store.

Piktochart is a very easy tool to use. Students can login with their Google Drive account and choose from several templates to create their infographic. Students can even upload their own pictures for use in the infographic. When the infographic is complete, students should download it as a .jpg or a .png file to share with the teacher through Google Drive. Students will not need a lot of instruction on how to use Piktochart; however, they will need guidance on how to create a good infographic. 

Collaborating with Google Drawing

Collaboration is a key 21st Century skill. Google has a Drawing feature that allows students to collaborate on a work space that allows them to insert images, text, shapes, lines and scribbles.  Like other Google tools, Drawing allows for comments and chat while collaborating.  During our Pilot Project for our 1:1 initiative, teachers used Google Drawing to create timelines in English class and Science safety diagrams in science class.  Student final projects were created in Google Drawings to share out links to their mini-projects.

Once your drawings are complete, you can use them pretty much anywhere.  You can save them as multiple file types (.png, .jpeg, .pdf and .svg) and insert them into documents or embed them into websites (once published to the web).  A cool feature of Google Drawings is the snap to grid feature that allows you to easily align objects with precision.  The best part about Google Drawings is that it is FREE!

Some ideas for using Google Drawings in the classroom:

• Timelines
• Mind mapping
• Brainstorming
• Flow charts
• Procedures
• Geographical mapping
• Posters

Let us know how you are using Google Drawings in the comments!

Tyler Callahan
jcallahan@ncmcs.org
@STEM_TC