Embedding - Generate your own iFrames

If you are like me, you use a variety of tools to share content with your students. Tools like goFormative, Wizer.me, Symbaloo learning paths, PowerMyLearning, DeckToys and even webpages you create on WIX or GoogleSites, are super useful in part because they allow you to embed content from other places. This means that your students "stay" on the same platform as they work on their assignment, lessening the risk of distractions from moving between platforms. The developers of most of the apps and simulations I add to these sites know that their content is shared on other platforms and they have made it easy by providing embed codes right on their platforms.

But what happens when you find something you really want to share but there is no embed code in sight? In the past, I would just add the link, and teach the students to navigate between several tabs. This is fine for most, but of course some would use this as an excuse to visit something else - that meme generator they've been itching to show off, for example.

After a bit of searching ways to create embed codes, I came across this easy to use iframe code generator

To use it, the only thing you need is the URL of the content/resource you are wanting to embed.

Once you have pasted the URL in place, you click on Generate, and presto your embeddable iFrame Code appears almost as if by magic.

Of course, if you wish, you can also play around with height width, adding scrollbars, borders, etc. (as I did on the "blob-in-blog" above).



Now, depending on where you are going to use that embed code, the only thing you have to worry about is whether the original site's URL is secure or not. Most of the educational sites that have embedding content options do require that the embedded link is "secure" - HTTPS and not just HTTP.

I have also shared this with my students, who blog for me every week and who sometimes create products using different edtech tools. They, in turn, publish their products by embedding them into their blogs.

I am sure there are other iframe generators out there. Have you found a different one that you like better? Share with us in the comment section.

Paper prototypes - From idea to reality

If your students are anything like mine, they hate planning. Whenever they hear something along the lines of "Create a presentation, website, game, etc.", they immediately run to their devices and open a tool, never mind that they have no idea what will be put in there. Then, they blankly stare at screens or worse, start furiously typing (or copy/pasting) with little thought as to why they are putting any kind of content or ideas in there. Much like writing an essay without an outline, they just want to get to what they consider the "fun part" and skip over the very boring planning stages.

As teachers, we have tried to solve this problem with graphic organizers, templates, storyboards and a myriad of other tools which, while useful, tend to thwart creativity. We then have to sit through presentations and products that look basically the same. What's worse is that students seldom see the connection between the planning tools and the end product, so there is little cross-usability.

Pondering this problem, I took inspiration from game developers and introduced the idea of paper prototypes to my students. It went something like this:

_______________________________________________________________________________

What is paper prototyping?

Paper Prototyping is exactly what it sounds like. It's your opportunity to make a usable version of your game/website/app/presentation on paper or with other physical objects. This means you don't need any electronic device to make your product.

Making a paper prototype allows you to create a version of your product much quicker; this gives you time to include as many features as you like. DREAM BIG – now's your chance!

Creating your prototype allows you to test your product before it is made. This means you can make fast decisions about your product without wasting hours adding features you may realize you don't like.

Sketch your main screen:

Get out your sharpies, coloring pencils, etc. Make a sketch of your product. You may use this general template, or a specific template for your particular product. The paper prototype is like a draft, so don't worry about creating perfect drawings.

Add Functionality:

Once you have your main screen, it is time to add buttons, sprites, or whatever you need to help the user of your product navigate through your product. Cut each element out, and play around with placement.

Sketch other screens:

Continue the process of sketching, cutting out items and placing them. You can reuse backgrounds as needed. Just make sure you keep all papers and cutouts organized.

Play test:

You have all your screens and cutouts. You have a general idea of how your product works. Create a video where you demonstrate your product.

Here are some sample videos of paper prototypes:

• http://www.viddler.com/v/64238391
• http://www.viddler.com/v/f9b8d6fd
• http://www.viddler.com/v/44512a2a

Feedback:

Have a partner play test with you. This conversation will help you become aware of possible interactions with your product that you have not foreseen. Use the I like, I wish, I wonder format to provide feedback:

• I-LIKE: Highlight what you see as a strength in the work. 
• I-WISH: State one area that could be improved. Focus on the big ideas.
• I-WONDER: Ask clarifying questions and offer specific solutions to the stated I-Wish.

Rubric

_______________________________________________________________________________

Results

Needless to say, I was very happy with the results. Going through this exercise allowed my students to think in terms of usability and content and helped them make better decisions for their final product. They had a plan for creating, unburdened by the constraints of a specific tool.

Moving forward, I plan to incorporate paper prototyping for all sorts of products, even presentations, hoping to see more creative final products. I think it is well worth the effort. What do you think?

More paper prototype resources:

• Resources and Tools for Paper Prototyping
• Free Printable Sketching, Wireframing, and Note-Taking PDF Templates
• 20 Free Printable Sketching and Wireframing Templates
• 10 Free Printable Web Design Wireframing Templates

Building a Classroom Website?

Many educators have decided to take the plunge to create their own websites. These websites serve as a central place to compile educational resources for students, communicate expectations, etc. We can think of them almost as interactive "green sheets". Parents can be directed to the class webpage to look at calendars, news from the classroom and upcoming events, while students can look in them to find links to content they may have missed, homework assignments, and even gain access to specific educational resources or web tools recommended by the teacher.

Some districts host teacher websites in their own servers and provide specific tools to be used (Adobe's Dreamweaver for example). However, most often teachers are left to their own devices and their website become a matter of personal preference. With little guidance, teachers choose a particular web creation tool simply because someone they know uses it. However, with the many options out there it is really up to the individual teacher to decide just how they would like their website to represent their classroom.

Google Sites

This is probably the most accessible web page creation tool, especially if you are a GaFE school. It works well simply because it integrates all other GaFE tools. It has the added benefit of allowing you to restrict views to only the individuals within your school or district domain, which for some institutions is a must. However the main disadvantage is that you are very restricted in the look and feel of what is your personal webpage. Google Sites all appear extremely similar. Customizing your navigation or adding anything non-GaFE requires a major investment of time finding tutorials, and the answer is either "It cannot be done" or working with code that, unless you know what you are doing, only makes matters worse. 

If you decide to go Google Sites, visit Mr. Amsler, who kindly published a "Working with Google Sites" web page that serves as a great guide of how and what to do.

Weebly for Education

www.adventurestemprogram.com

Weebly for Education is what a former colleague of mine decided to use for our school website, which means that, as the webpage manager, I now have the "joy" of using it on a consistent basis. Its drag and drop simplicity is a favorite with educators interested in creating a more personal look for their websites. In Weebly the website layout and design are all done for you. If you later decide to change the template, you simply click on the new template and everything is transferred to "where it should be". This seems ideal, right? It can be, but it becomes incredibly limiting when you want to get creative because Weebly only allows you to insert elements into pre-defined areas. Unless you are really handy with code, which Weebly does allow you to modify, you are kind of stuck with their templates. This is the main reason I personally dislike it.

Weebly offers other cool stuff, like the ability to add an assignment form to your site allowing students the ability to upload their assignments and submit them to you via your website. You also have the option to create student accounts so that your students can create their own Weebly websites, all moderated by you.

If you decide to go Weebly, make sure that you create an account using Weebly for Education, as opposed to just Weebly, to gain access to the educator tools. You may also wish to visit educatorstechnology.com to find some good tutorials to help you get started.

WIX

http://mariana68.wix.com/adventurescience 

This is my personal favorite due to its maximum flexibility of design. WIX is a true drag and drop web page creation tool, offering complete customization without any HTML or coding knowledge.  All you have to do is just pick a design that works for you, and swap in your own pictures, text and information. If you are feeling particularly creative, or you do not find something you like, you can choose to start with a blank template add backgrounds, images, text and embed anything anywhere. You literally design your own page with minimal effort. It is worth noting that with WIX you cannot change templates. If you decide that you want to change your look, you will need to change the individual items. 

WIX also has an incredibly comprehensive help center. There are help buttons everywhere, so that if there is ever any doubt on what or how to do something, help is just a click away. You will not need to go a-searching for anything. They have even gone the extra mile and created WixEd a free online education program that teaches Wix users everything they need to know about web page creation.

WIX does not have a dedicated "educator" side, so in some districts you may need to call your IT department before using it in order to have it white-listed. If they need convincing, feel free to show them any of the many sites I have created using the platform. They can be found by clicking on the PBL tab.

I know there are many others. Which one do you use?