Tag: html5

Construct 2: A WYSIWYG editor for HTML5

Kelly TenkelyLeave a Comment on Construct 2: A WYSIWYG editor for HTML53585 views

What it is:  Construct 2 is a free program that makes it possible for ANYONE (kids too!) to make HTML5 games without any programming experience.  Construct 2 is available for free download for Windows XP, Vista and 7.  The approach to game creation is pretty intuitive.  It is easy enough for beginners but is robust enough to make some pretty impressive games.  This editor makes it possible for your students to take their ideas to production.  SO cool! Construct 2 also has physics elements that can be added to games that adds dimension and another aspect of learning in game design.

Construct 2 has a free version, as well as two tiers of paid versions.  The free version doesn’t allow students to create iOS native apps, Android native apps and has a few limitations in organization of a project.  Other than that, it is fully loaded and pretty impressive!

How to integrate Construct 2 into your curriculum: I don’t know about you, but our students are programming crazy!  The only problem: programming comes with a pretty steep learning curve and our kids want to make their ideas come to life now.  I’ve found that students respond well to these kind of WYSIWYG (what you see is what you get) editors.  The great thing about these type of editors: students get to see their ideas come to life and those that are interested in pushing the limits are motivated to learn more coding/programming language.  It is the best of all worlds!  The downfall of Construct 2: WINDOWS.  Yeah, no version for Apple yet.  I have no idea what that is like…my world is Apple.  BUT, I know many of you are in Windows environments (sorry) and many of our students still have Windows at home.  This post is for you!

Construct 2 can be used to create games and HTML5 apps.  This means your students can fully flesh out their learning with choose-their-own adventure stories, history explanations, science simulations/games, design thinking, etc.  Taking learning to “publish” this way is pretty amazing.  I can’t tell you how awesome it is to see students take what they have learned and create something new with it.  I highly recommend it!

Consider offering game construction as an option for students to show what they know.  You will be impressed!

Tips: There are some great tutorials on the Construct 2 website.  This is a great way for your students to engage in a little self-directed learning and exploration. 🙂

Looking for some ways to teach kids about coding?

Please leave a comment and share how you are using Construct 2 in your classroom!

HTML5 WYSIWYG editor- Wix wins again!

Kelly Tenkely1 Comment on HTML5 WYSIWYG editor- Wix wins again!12424 views

What it is:   I never learned HTML, sure I know a few basics but nothing that will build me a good looking, functional website.  Wix has long been my secret weapon.  I use it often.  In fact, it was how I built the Anastasis Academy website.  The one drawback: Wix creates flash sites.  Which means that it doesn’t work on all devices.

Until now.

Wix recently introduced a WYSIWYG (what-you-see-is-what-you-get) editor for building websites in HTML5.  Woohoo!  This is such great news on a number of fronts.  First and foremost, they have again made it possible for your average Joe (and me) to create well-designed, well functioning websites easily.  These HTML5 templates are just as beautiful and impressive as their Flash counterparts.  There are a few less bells and whistles available, but with a little creativity, you can have a fully customized HTML5 site in no time.  If you can edit a word document, you can build a website.

If you have shied away from creating your own classroom website in the past, today is the day to take a deep breath and plunge in.  Wix is the one of the most amazing online website builders I have ever seen.  Why is it so amazing?  1)  It is simple to use and learn, you truly don’t have to know anything about website development. 2) It produces amazing results with a small amount of effort, I am really blown away by the possibilities here. 3) The sign up process is completely painless.  4) You have an unbelievable amount of control when you are feeling creative (still extremely easy!). 5) It is free, and what could be better than free for a teacher?! 6) It is web-based which means that you can update your website from anywhere.

You can choose to publish with a wix domain or purchase your own domain and connect the two.  It is free to use the wix domain…again, you can’t beat free!

How to integrate Wix HTML5 Editor into the classroom: Wix is a great place for students and teachers to create a website quickly and easily.  Wix is the perfect tool to use to create a classroom website for your students.  Post classroom rules, homework assignments, links for your students, units you are working on, school information, parent newsletters, etc.  Wix is also a great place for your students to create a website.  They will go nuts with this (trust me!), Wix is one of those assignments they will continue to work on at home without being asked.  Instead of having students display knowledge of a subject in traditional ways, invite them to create a website about it where they can be the classroom “expert” on the subject.

Be sure to ask your students what non-school websites they are creating too (I know from experience they will take off with this!) you will get to know your students more personally by viewing websites that they create both in and out of class.  You could also create Wix websites as a class if you have limited computer use.  Have your students prepare a website to teach other classes about a subject that they have been studying.

In addition to sharing knowledge, Wix has some fantastic portfolio templates that students could use as a portfolio of school work.  Students can include any pictures, audio, video, and writing that has shaped their learning throughout the year.  Wix will help your students create a professional, polished eportfolio that they can share with family, friends and teachers.

With the addition of the HTML5 templates, teachers can easily create sites that students and parents can access from anywhere, including mobile devices.  Pretty cool!

Tips: Did you wonder how I created that Web 2.0 advent calendar?  Wix is my secret!

Please leave a comment and share how you are using Wix HTML5 Editor in your classroom!

Automatoon: Create HTML5 animations

Kelly TenkelyLeave a Comment on Automatoon: Create HTML5 animations15112 views


What it is: Oh. My. Word.  I’m slowly but surely making my way through my Google Reader and stumbled on a post by @rmbyrne on his EXCELLENT blog Free Tech 4 Teachers about Automatoon.  I immediately started playing with Automatoon and cannot say enough about how COOL it is!  Automatoon makes it simple for students (or teachers) to create animations within a web browser.  My very favorite part? It was built-in HTML5!! Do you know what that means? It works on iDevices (like the iPad and iPod touch).  A non-flash animations site! Pure genius.  This is one of the easiest animation programs I have seen.  Students can draw characters in pieces (kind of like a puppet or paper doll) and then create points where the pieces connect.  The drawings can animate by moving, bending or adding pieces to the picture.  SO cool!  After watching the demo video, I think even young students could have Automatoon mastered in no time.  The tools built into Automatoon are pretty robust for what a simple program it is to use.  Your students will look like animation masters, bringing their creations to life.  When students are finished creating their animations, they can download them as a zip file to be uploaded to any site.  There are two ways to login, students can login with a “throwaway” login that will not save their animation (but will let them create and download a quick animation) or login with a Google account.  This is fantastic for schools that take advantage of Google apps for education!

How to integrate Automatoon into the classroom: Kids of all ages love cartoons and animations, Automatoon gives them the tools to be the creator of those cartoon animations.  Students can create animations to animate processes in science (think the water cycle, plant life cycle, rock cycle, etc.), vocabulary words (in either native language or a second language), animate a piece of creative writing, animate a persuasive argument (think advertisement), animate a “book report”, animate solving a math problem, animate a story problem or animate an event in history.  The possibilities are really endless on this one, students will only be limited by their imaginations.

Automatoon is easy enough to use that with a little pre-planning, students could create animations in 5-10 minutes.  This is handy for those situations where you have one or two computers in the classroom or a limited time in a computer lab.  After learning how to use Automatoon, students can quickly create animations to illustrate learning.  Automatoon is a FANTASTIC little tool for your visual learners…they will “get” it.

Are your students having a hard time understanding a math or science concept or a vocabulary word?  Why not create an animation that illustrates the concept/word and share it on an interactive whiteboard or projector-connected computer?  The animation can be saved on the classroom website so that students can go back and access it throughout the year.

If you have a classroom website or wiki you could create a classroom animation collection.  Students can upload their creations to the class site for a great collection of learning.  It would be neat to animate sight words (Snapwords style), math or science vocabulary and create a visual “glossary” online that all of your students have contributed to.  Classes can add to it every year or you can work with other classes around the world to create a collaborative glossary.  This would also be a great tool to aid students in creating their own “e-textbooks” about any subject.  Students can create animations to embed in their other research, reflections and links.

Way cool.

Tips: Be sure to watch the intro video (above) to get a 5 minute low down on how to use Automatoon…very useful!

Please leave a comment and share how you are using Automatoon in your classroom!

Swiffly: Convert SWF (Flash) files to HTML5

Kelly Tenkely3 Comments on Swiffly: Convert SWF (Flash) files to HTML52883 views

What it is: Google rocks my socks.  The good people at Google that are dreaming up ways to change the world never cease to amaze me. Today, new to Google Labs is a little tool called Swiffy.  Swiffy let’s you upload a SWF file (otherwise known as Flash) and convert it to HTML5.  Sweet.  This means that you can use flash content on devices without a Flash player (i.e. iPhones, iPads and iPod Touch).  You know what that means?  The iDevices are officially the PERFECT device thanks to Google.  (No need for the list of reasons you don’t like iDevices, I’m a hardcore fan and you are not likely to change my mind with a rant. Deal? Deal.)  Swiffy works directly from your web browser, I have tried it out in Firefox, Safari and Chrome.  It worked in all three well!  It will also work from Mobile Safari which means it will work from your iDevice.  Very handy.  Using Swiffy is as easy as uploading a file and clicking “upload and convert”.  It couldn’t be easier.

How to integrate Swiffy into the classroom: When I was in college I had a professor that often said “The wheels of academia are SLOW to turn.”  She couldn’t have been more correct.  I have seen this in nearly every arena of education.  Technology is no exception.  Many wonderful resources are available as flash files.  The problem?  iDevices (the iPad, iPod Touch) are becoming more frequently used in the classroom and they are not flash friendly.  Google labs comes to the rescue with Swiffy.  Simply upload the flash file and convert it to HTML 5 using Swiffy. The new HTML5 files can be distributed to student devices so that learning can continue uninterrupted by something silly like file type.  Very cool.

Tips: SWF 5 currently gives the best results.  If possible save the SWF file this way!

Please leave a comment and share how you are using Swiffy  in your classroom!