Monthly Archives: June 2015

Multimedia: Creating a Class Avatar

Need to return to my electronic portfolio on Weebly?  Click here.


Though I’ve been working to flip learning in my classroom for a while, one of my tasks for school was to create a short instructional video.  If you are interested in seeing just how easy it can be, read below!

Screen Shot 2015-06-09 at 4.42.23 PM



Task 3 asks students to create a multimedia presentation for use in instruction. As I work to build the new content for my 1:1 English III American Literature Class, I decided to create a video to guide students through the creation of their personal avatar using Bitstrips on their school-issued iPads. This task will be assigned to students the first day of class as the avatar is used on a daily basis to monitor progress on a visual bulletin board on display in the class. Additionally, students will use their avatar and the Bitstrips App itself for a variety of classroom assignments throughout the year. The video for this lesson has been uploaded on my class page and can be found at

Planning the Video

Instructional Purpose

Austin-East Magnet School of the Arts is a 1:1 school where all students have been assigned iPads and all teachers are expected to find some manner of incorporating them into the class curriculum. English III, however, piloted the iPads and now operates in a Personalized Learning Environment with limited whole class instruction. To help monitor progress, student avatars are clipped onto the current module in the course. Additionally, students will use their avatars to demonstrate mastery of specific skills and concepts on a variety of assignments throughout the year. Therefore, the purpose of this lesson is to guide students to create a personalized classroom avater using Bitstrips. This application was selected as it is exciting and always changing, hopefully engaging students in the curriculum like never before. Learners in the lesson will consist of 125 juniors enrolled in English III. Technological skills of these students is somewhat limited as there is no formal technology class, though the students have had access to the iPads during the previous school year.

Concept Mapping

            Before creating the video, I created the lesson plan and determined how I wanted to create the video. First, I listed out exactly what I needed to include in the lesson. Then, I created a powerpoint file with slides for explaining the objective and the steps of the task based on what I generated in my planning. I also included a sample of my Bitstrip and how the avater would be beneficial to me as a student within the content of the slides as well. In scripting my voice over for the lesson, I used a graphic organizer to track key details I needed to include. Finally, I decided it might be helpful to include a few screenshots of the process of creating the avatar on Bitstrips. To get the screenshots, I reset my account on Bitstrip so that I could start from the beginning and have pictures of what the students would actually see during their process. I have been creating videos for classroom instruction for a while, so I planned my video using the same graphic organizer I have used at Austin-East.

Objective: Through the use of Bitstrips, the student will be able to create a personalized avatar for monitoring progress and completion of future classroom assignments.Steps:

1. Students will download and install the app.

2. Students will create the avatar.

3. Students will submit the avatar through Canvas for grading.

Slide/Screen Image Description/Notes/Scripting
Intro Slide Welcome to the course; general purpose of creating the avatar to guide the PLE.
Objective/Steps Read objective to students as expected by TAP guidelines. Transition into a review of the steps to complete the lesson.
Step 1 – Screenshot of app in the app store. This will help ensure students are getting the right app. Also, students will be instructed to pause the video here, continuing after the installation of the app.
Steps – 2/3 Continue with explaining students will create the avatar and submit it to Canvas for grading.
Meet Bitstrip Steph~ Avatar

~ Picture of Module Progression

Show my Bitstrip as an example, including images of the purpose of the avatar.~ Module Progression – Point out that the images are the lessons and the things hanging on the bottom are the avatars to signal where students are in the lesson.
Sample Bitstrip Assigmnet Show sample of a final product using Bitstrips.
Screenshots of Avatar Creation Include screenshots to let students see the process of creating the avatar once in the application. This helps get students excited about all of the options they will have for creating the avatar to resemble them as closely as possible.
Closure Slide Remind students they can ask for help at any time.


Creating the Video: Process Explanation

Once I had the plan, the powerpoint slides, and the screenshots, I began to create my instructional video using Explain Everything. I selected this application because it is the easiest screencasting application I have found while working to flip my classroom. While the process followed may seem confusing at first, the icons make the application a fantastic method for building and editing videos that can easily be shared to Youtube.

Step 1: Import the powerpoint slides into a new project.

The easiest way to import the powerpoint slides is directly from email. After creating the powerpoint on my computer, I email myself the file. On the iPad, I open the powerpoint. Once the powerpoint is open, I hold down the icon to open the file with a specific program and select Explain Everything. When Explain Everything opens, the program defaults to creating a new project with the incoming images.

Step 2: Add any additional images or slides desired.

To add slides, I simply clicked the plus sign on the bottom left of the screen. This area shows the total number of slides in the film strip. After the powerpoint, I was starting with nine slides. When I added the screenshots from the Bitstrip app, I needed two more slides. To add the screenshot of the app store, I navigated to slide three and added a slide there. To install the desired picture, I clicked the add button from the left menu. When the add option menu opened, I selected to add from existing photos. This opened my camera roll so that I only needed to touch the desired photo to add it to the slide. Once added, a photo editing menu bar appears. I enlarged the image to fill the screen completely and moved on to working on another slide. At this point, I was ready to add the screenshots of actually using the application so students would know what to expect. For this, I decided I wanted to add all three images on the same slide to save time. To do this, I went to the tenth slide and click the plus sign to add a slide. On the new slide, I again selected the add button from the left, navigating through adding from existing photos and selecting the images from my camera roll. To save time, I included only four images: the main entry image for gender selection, the first screen to pick the facial shape, the menu of categories for creating the specific looks and accessories for the avatar, and the final approval of the avatar. Having all of my slides entered into the project, I was ready to begin recording the voice over.

Step 3: Record the Voice Over.

To record the voice over, I kept my planning guide on the screen of my laptop while working from the screen of my iPad. Starting at slide one, I touched the red circle that signals the record button and began talking. When I was finished with the slide and ready to go to the next slide, I clicked the pause button before advancing the slide. I find the pause button before advancing the slide is a helpful step in case editing is needed to individual slides – you don’t have to worry about cutting off in the middle of a sentence or cutting the audio too close because the extra second pause gives the time to make the splits and adjustments if they are needed. Because I operate the video just as I would in the classroom, though, I also use the writing tool for emphasis. On the slide with the screenshot of the app store, I used the writing tool to circle the app I wanted students to download. On the slide where I show the examples of how the avatar is helpful, I used the writing tool to underline the avatars that were hanging on the course module display to draw emphasis to their presence.

For each slide, I follow the same process of recording, playing it back, and moving to the next slide. When I find I don’t like the way a slide sounds, I simply record over the audio and start fresh. To do this, I select the button to show audio and pull the cursor over to the zero on the audio timer. The screen automatically verifies the desire to film over the existing script, and once affirming this action I am able to record the slide again. Once I felt like each slide was where I wanted it to be, I held down the play button for a few seconds to make the magic play button open. The newly created play button is slightly larger than the stationary button on the screen because it allows the video to play in its entirety for once more preview before uploading or exporting the video. After watching my video, I realized I just barely made it under the two-minute maximum and decided I was ready for publication.

Step 4: Publish the video.

Publishing the final product in Explain Everything is also very easy. To publish, I simply touch the export icon on the lower right of the screen. A new menu option opens that allows me to select the method for sharing. I selected Youtube, and another menu opened up for me to add the name of the video and set the viewing status. I named the video for the task, and I set the video to public. From here, the work is done because the application automatically exports and uploads the video to my Youtube channel. Upon completion, the application opens a prompt with the link of the video and an option to automatically email the link. Out of habit, I email the link to myself and then click the link to verify the video has finalized correctly.

Benefits of Preplanning

When I first started making videos for my students, I did not take the time to create an outline of what I was going to say. This led to rambling in the videos, making the videos longer without any real reason for the length. Students would disengage from the videos, and I would tire of the hours waiting for the videos to export and upload. Then there was the challenge of storage. Creating an outline of the video was a natural progression that helped to make the whole process flow and produce a better final product with clear expectations and concise communication to the students.

When I am recording the video from my iPad, I have my graphic organizer outline of the video on the screen of my computer so that I can use it as a guide. Creating a plan for the video helps ensure the purpose of the video is met without leaving out vital details. Specifically considering this assignment, I knew I needed to get through the video instruction in less than two minutes. By planning the slides of the video in advance, I only included the bare minimum needed for the purpose of helping students create the avatar. By planning the description of what I was going to say, I was able to get directly to the point of the slide and not take too much time. By having the plan in front of me while working, I was able to stay focused and produce a clear video in a fraction of the time I would have taken otherwise. The greatest benefit I find, however, is that when I have created a thorough plan and reflect on the plan while working on the film, I stick to the plan, I say what needs to be said, and I don’t have to spend a large amount of time proofing and rerecording each individual slide.






Bitstrips. (2015). Bitstrips (Version 1.8.142). [Android Application Software]. Retrieved from


Tagged , , ,

How to Create an AMAZING Classroom Website

Need to return to my electronic portfolio on Weebly?  Click here.

Screen Shot 2015-06-09 at 4.52.47 PM

Interested in creating a classroom website? Consider Weebley. Here’s what you need to know…

In my Educational Technology course works, the Technology Design Portfolio Task 1 asks students to create the shell of a website to demonstrate technological abilities associated with the task. In time, my website will become a real resource for prospective employers to review to see a variety of products that exemplify of my technology skills. Please access my site by visiting
Creating a Website
In looking to create your own website, the first step is to identify the purpose of the page. For me, I wanted to create a page that could serve as an electronic portfolio of ways I have personally used technology in my English III American Literature class. Because this is intended for prospective employers, the examples of materials included in the page will come from a variety of places throughout the curriculum I have been creating with my students.
Once identifying the specific purpose, the next step is selecting a website development tool. Though I have a paid personal blog on WordPress, I decided to use the free version of Weebly to create a website that would double as an e-portfolio to demonstrate my technological skills because it is the site recommended by local districts in my area. Additionally, Weebly is incredibly easy to work with as it operates by a simplistic “drag and drop” design element for adding content. While Weebly does have a Help Center to give additional support, I decided to skip the hour-long video and play around to learn how to use the site on my own.
Setting the Stages
Once creating an account in Weebly, the basics will be set up for you, and a prompt will direct your path through creating a website theme. In selecting a theme, I scanned for themes that were free, visually appealing, and available for computer and mobile devices. This was important because in an interview, the panel members are more likely to have a mobile device than an actual computer to access my page. After selecting the theme, the prompt will direct you to choose the website domain. As you enter your selected text, a green check will show that your domain is available whereas a red letter x will show you that you cannot use a domain. I wanted to select something that would relate to my purpose, so I selected “MrsStephKirk”. At this point, the stage is set and you are ready to move into building your site by filling the home page and adding and desired additional pages.
Once in the editing phase of your website creation, Weebly divides the options into manageable chucks of Build, Design, Pages, Store, Settings, and Help. This section will help guide users through creation of the site before selecting Publish, which is highlighted in orange on the right of the page.
Building a Website
Under the Build option, your page will preview on the right while a menu of options is available on the left. Weebly is set to automatically create a table of your design elements, but you may select any element, drag it onto your previewed page, and drop it into the desired position. Options for the elements include text, images, maps, embed codes, structural elements such as spacers and dividers, and media elements.
In building my page, I started out with the default page of an image on the right with a title and small text on the left. To change the text, click on the text field and start typing. It is that easy. For images, I selected an image of my own classroom. To add my own image, I clicked the cog representing setting and uploaded my image from my computer. Next, I wanted to be able to add images to link to the pages required as a part of TDT Task 1. For this, I dragged over three images and a text field beneath each image. For the images that will act as the links to the additional pages, I created a graphic using WeeMe on the iPad and removing the image background in powerpoint. I added the text of the desired linking page and saved the slides as images, uploading them to the page by following the prompts. Next, I added a spacer from the drag and drop menu on the left and created a title for Additional Links. Under this title, I knew I wanted to place a link to my personal blog and to my personal Teachers Pay Teachers store. Therefore, I dragged over to image placeholders and a text section beneath each image so that I could describe what the links would go to. For these images, I simply visited the pages and created a screenshot to upload. After creating this shell for the main site page, I needed to create the pages that would serve as the links.
Adding Pages
With the basic elements on the first page, I was ready to add additional pages. To do this, I selected the Pages heading on the top options menu bar. The default on Weebly sets you up with three pages, but you may have a total of five on the free version. By clicking the page titles on the left, I was able to customize my pages as desired. For my pages, I selected Welcome, About Stephanie, Graphics, Multi-Media, Resources and Files, and Contact. In setting up the page, I clicked the title of the page on the left and made adjustments to the page by using the prompts on the right. The first change I made was to set the basic page headers to landing page. Next, I decided whether or not to make the page option show up in the site navigation. In looking on the main page, anything over three didn’t make the final cut on the home page and defaulted into a drop-down menu labeled as more. Rather than leave the more option, I wanted a less cluttered visual and decided to hide About Stephanie and Contact from the navigation options. Those links will be on the page, but not listed in the menu itself. Next, I clicked Advanced Options to see what else I could do with my pages. Since Task 1 is to create a shell, I decided to select the option to hide all pages from search engines. With the shell set up, I wanted to sculpt the outline of the pages before submission. To do this, I clicked the page on which I wanted to work, moving back to the Build option on the top menu bar. At this point, I followed the drag and drop steps I followed when building the site until I had each of the desired elements in a position I found visually appealing on each of my pages.
Designing the Details
Once my pages were created, I wanted to explore the Design menu option from the top menu bar. This selection area allows changing fonts, including font sizes and colors. Just as I read from left to right and top to bottom, I started working on my individual pages from left to right and top to bottom. This part was easy: the scaffold was there, so I clicked around the website elements and identified the text style, size, and color I liked best when looking at the preview on the right side of the page. Once I moved through each page, I clicked save on the bottom right. This saves all changes made on the page and gets the page ready to publish when ready. However, there is one more step before publishing the page.
Applying Links
After creating the pages and adjusting the design elements, I needed to set up my links where I wanted them to be. To do this, I started with the default link settings of connecting to external URLs because I knew that would be easiest. By clicking on the pictures for the additional links, another box opened with options for the image. I selected the option reading link, which opened a variety of linking options. To add the link to the external URLs, I selected external site, the default setting, and typed in the address to my personal blog and to my TPT store as directed by the image selected. Next, I moved into adding the links to the pages within this site. For this, the steps are similar except that you must change the default from external URL to Standard Page. Once selecting Standard Page, a drop down menu will populate with the pages you have created. To add the link, I only needed to verify the desired page for each image and select the page I wanted the image to link to.
Finalizing the Page
Having the feeling that my page was complete, I selected the orange publish option on the top right of the Weebly interface. This informed me that my page was live and gave me a link to view the page. As a final preview, I opened the link in a new tab and clicked around to make sure all links worked and that I liked the view of the final product. Fortunately, everything worked as I expected and I was pleased with the published site. As a final check, I emailed myself the link, logged out of Weebly, and examined the page again. Success.
Updating and Editing
At this point, the shell of the page is created enough to submit my Task 1. When I am ready to add elements, I will simply log into my Weebly account and view the page on the right with the editing tool menu on the left. Depending on what I want to add, I will follow the same steps I have outlined as I created this shell. Hopefully, this page will be a living document of my technological skills as they advance during my studies and help me find future employment in technology-rich schools.

Tagged , , , ,