Ready to Reload

learningAnother year has come to a close.  It is time to begin preparations for the next year.  This is a most important time for any teacher, but especially for technology instructors because the material changes so rapidly and we owe it to our students to do our best to update materials.  It might be OK to teach English or Geometry with a 2 or 3 year old book but digital technology can   be obsolete in months or even weeks.

For me this will be a particularly  busy summer because I am also preparing to present Java game development at the WeTeach_CS in June in Austin.  If you are a Computer Science teacher you should definitely make plans to attend.  If you are thinking about becoming a Computer Science teacher you will be able to sign up for a $1000 stipend for passing the CS exam.  You REALLY need to consider attending.  I will also be attending a training session at the Colorado School of Mines in July to become a Bootstrap evangelist.  If you have not heard of Bootstrap, drop me a line.  It is a great way to teach Computer Programming and Algebra at the same time.  Finally I will be presenting at the OnRamps Summer Conference in Austin towards the end of July.  I am taking the family to Colorado for that presentation and we will spend a week there afterwards for a vacation.  Yes, teachers get to goof off all summer…right.

Meanwhile I am committed to revamp and polish my courses for the summer.  I am also committed to adding Captivate content to my coursework.  I have completed the first lesson in basic programming and integrated the SCORM package into Canvas.  Now it is just a matter of grinding them out until they are done.  I think I will track my progress in Captivate as I add content.  If you are interested in using Adobe Captivate then stay tuned.  I will add “how-to” content as I update.  I am also trying to introduce Muvizu animations as an instructional tool.  Wish me luck on that one.

I am also going to focus on developing video content from my class.  I have an acceptable camera and tripod.  Now I just need to figure out how to video classes without using a camera operator.  I am also doing a considerable amount of audio recording using Captivate and Camtasia to build online lessons.  My goal is to make my class completely available over the Internet for students who are absent on any given day.

If that was not enough to do for the summer, I am also learning to speak and read and write conversational Japanese.  Thus far I have almost completed Hiragana and I have begun Katakana and even started the Kanji.  If you are already a non-native Japanese speaker I would really like to hear how you managed it.  Needless to say the summer is a busy time for teachers.

Well I think that is quite enough for one summer so I am going to get busy.

夏を楽しむ

(Enjoy the summer)

Teacher Tools – Day 3

htmlToday my picks for useful teacher tools are both related. HTML stands for Hyper-text Markup Language. It is the code used to create web pages, among other things. The code allows us to present text and other visible features through an HTML aware browser and allows us to create links to other documents using the anchor tag.

Every teacher should be able to write basic HTML and know the common tags.  Teachers should also be familiar with creating and uploading web documents to a site.  HTML is becoming the most common way to present content to students both in the classroom and remotely.  LMS systems like Canvas or Moodle all use HTML to present content and they allow you to edit HTML tags in order to more accurately control the material that you present in your classroom pages.  Being able to control the placement of text around an image, for example, is important to the presentation of your material.  If your pages are difficult or uncomfortable to read, it is likely that students will not read them.  You owe it to yourself and your students to learn the basics of HTML and web design and to use those tools as you create your materials.

The other part of this partnership is the use of Cascading Style Sheets to format and control the appearance of your material.  It is an established design principle that content and formatting should be separate.  Having the information in a different document from the formatting instructions allows you to change the appearance of your material without having to modify, or even touch, your material.  You can also edit your content without having to wade through presentation markup.  The current web model uses a markup technology called Cascading Style Sheets (CSS) to accomplish this feat.  The content is stored in an HTML document as basically paragraphs of text with no formatting.  The paragraphs are tagged with class and id names that allow the author to assign presentation information even down to a single letter of a word or sentence.  CSS allows us to separate and update presentation and appearance for an HTML document without having to disturb the content and without having to search through the content for formatting tags.  To become a better teacher in the 21st century classroom you should commit right now to learning at least the basics of HTML and CSS and then establishing an online presence.  Build an educational philosophy page, a curriculum vitae, or a blog site to discuss the things that are important to you.

Useful Skills in Canvas

Canvas_vertical_colorDuring this edition of Technology in Education I will demonstrate the easiest method (that I know of anyhow) to integrate video into Canvas pages.  This technique will work with YouTube, Microsoft SharePoint, or any other video hosting service that allows embedding via the iframe tag.  Once again we will be using the HTML editor.First we need to select the video we wish to embed into the page we are editing.  On YouTube, videos that are available for embedding, as most are, will have a link to create the embed code for you.  You will merely need to copy this code and paste it into the html already in your page.  If we wish to include this video from OnRamps, for example, we first need to find it on YouTube…chrome_2017-03-10_17-22-58

Once we have located our video we need to find the “Share” link located directly under the title…

chrome_2017-03-10_17-26-10As you can see, the “Share” link is marked with a curved arrow and the word “Share”.

 

 

 

 

Clicking that link will reveal the sharing options we can make use of. The option we want to select is “Embed”.

chrome_2017-03-10_17-28-25

Selecting “Embed” will generate a snippet of html code containing our “iframe” that will allow us to embed the video into our page and have it play as though it were part of the page we are creating.  We need to copy the highlighted code and then paste it into the page we are editing using the HTML Editor.

chrome_2017-03-10_17-43-37

Once the code is pasted into our page’s html we can click the “Save” button and view the results of our work…

chrome_2017-03-10_17-42-13

Your students will be able to watch this video, assuming they have access to YouTube, without the distraction of the “Up Next” list along the right border of the page.  .

chrome_2017-03-10_17-35-17

They can access only the material that you want them to view.  Be aware that if the video is hosted on a secure server like Microsoft SharePoint, your students may have to provide a username and password to access the content.  If you look carefully at the code pasted in the example above you will notice that it says whitesboro.sharepoint.com rather than youtube.com as the source of the video.  This is because I am forced to download all videos originating from YouTube and re-host them on our SharePoint video server because students at my school do not have unlimited access to the YouTube site.  It does not matter what source you use, as long as their material is available via an “iframe”

If the material in this post has been of any help, please leave a like a comment, if nothing else, to let me know you are out there 🙂

 

Useful Skills in Canvas

w3c_logoI am going to start a series aimed primarily at teachers who use the Canvas Learning Management System.  I have found, over the course of the last three years, some tips and tricks that can make your experience with Canvas easier, or possibly more effective.  The first trick I will offer is the use of HTML to control how your embedded images relate to the text you place them with in pages, quiz questions.  Most people ignore the HTML editor portion of Canvas and just use the Rich Content Editor.  I think this is a mistake because the HTML editor allows you much more control and functionality.  All you need is a cursory knowledge of in-line style commands and CSS.

Let’s say you wish to add a picture to the top of an informational page.  Ordinarily you would upload the file to Canvas, use the Embedded Image button in the page editor tool bar to place the picture, and then put your cursor where you want the text to appear and start typing.  The problem here is that if you wish the text to appear on one side or the other of the image and/or to wrap the image, it is difficult do do in the Rich Text Editor.  Often you end up with a single line of text next to the image and the rest of your text below the image, like this…

chrome_2017-03-08_11-05-20

With the addition of a tiny html snippet into the HTML editor you can go from this to what appears in the image below.

chrome_2017-03-08_11-10-25

To accomplish this task we only need open the HTML editor and find the code that embeds the image into the page.  We are looking for the following structure:

chrome_2017-03-08_11-12-51We see the line img src=”https://whitesboro…  This line tells us the source for the picture we have embedded into our page.  We need to edit that html slightly with the addition of the following snippet of html code.

“style=”float: left; padding-right: 15px;”

Everything, including the quotation marks, must be included.  Essentially this line of code tells the HTML browser to float or move the picture always to the left of the text and to give us a 15 pixel space between the right margin of the image and the start of our text.  Entered correctly, the code will now look like this…

chrome_2017-03-08_12-18-23This is the same bit of html with the code snippet above pasted in.  We placed the line of code between the “img” and the “src” and now our text politely starts at the top of our image, wraps nicely around our image, and gives us a 15 pixel buffer space between the right margin of the image and the left margin of the text.  This particular bit of html can be pasted anywhere that you are allowed to edit a page with html.  In fact, I used it on the smaller images on this page at WordPress to allow me to wrap the text around the images.  This is just one example of the power that simple HTML and in-line CSS style commands provide.  The link above will take you to the W3C page on style sheets and you can begin your journey from there.

If information like this is useful to you, please leave a like and share on social media.  If there is some topic you would like covered, please leave a comment below.