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.

Advertisements

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.

Saddle Up for 2016-17

computercowboyIt’s time to saddle up and get ready for the 2016 – 17 school year.  Classes begin in Whitesboro on August 22 and so the teachers are diligently working through Professional Development exercises and preparing exams and lesson plans for the arrival of our new group.

It is also time to dust off the blog site and get ready for another year of promoting technology and all things computer.  I have already been accepted to present at the #TCEA2017 conference in Austin in February and I will also be going there two more times as part of my UT On-Ramps program.  As of today I am one class away from graduating from West Texas A&M University with my Masters Degree in Instructional Technology.  I will (fingers crossed) begin a Doctoral program with Sam Houston State University in the Spring of 2017.  Wish me luck 🙂  Meanwhile I have a full plate of classes to teach this year.  We offer Robotics and Automation, Concepts of Engineering, Principles of Information Technology, Computer Maintenance, Computer Science, as well as Basic and Advanced Programming.  Why couldn’t they have all this stuff available when I was in High School??

Technology Skills that Every Teacher Must Posses

Tech560One of the most often addressed issues for both teachers and administrators in today’s rapidly changing educational environment is exactly WHAT technologies and applications are needed to successfully deliver the content and practice the skills necessary for a post-industrial education.   What tools do we really need in order to facilitate learning for students today?  I have been researching the question extensively and these ten items seem to be making every list I can find.  No doubt this is not an exhaustive list and surely not everyone’s favorite will be present here but hey…if you don’t see your personal preference then by all means, comment and let me know what it is.  The most common things I have found, in NO particular order, are…

1.  The ability to use key words and control a search engine.  Most people use Google or Bing or some other search engine, and most know that you need to give it a clue as to what you’re looking for, but too many people, teacher or otherwise, have no idea what a search engine is capable of.  Were you aware that presenting keywords in different formats would lead to different results?  Surrounding a word or phrase, for example, with quotation marks means you are looking for that EXACT phrase, spelling, punctuation, etc.  If you enter the terms three, blind, and mice into Google you will get a great many results about eye health, rodent control, and mathematics.  If you enter the phrase “three blind mice” surrounded by quotation marks you will get only results dealing directly with the nursery rhyme in question.

The “-” or minus sign also has great significance to search engines.  If you enter keywords and would like to exclude other key words often associated with whatever you entered, then use the minus sign.  For example, if you wish to search for Batman but avoid any reference to Robin, you might enter Batman -Robin.  You will see many results for the Dark Knight but no reference to his nerdy partner.  The plus or “+” symbol works exactly opposite.  If you want to search for Captain America and specifically get info about his shield you might enter Captain America +shield.  You are likely to get results about Cap, his shield, and you will also likely get results from the Strategic Homeland Intervention, Enforcement and Logistics Division.  In order to further filter these results you could use Captain America +vibranium -“Nick Fury”.  We want info about Cap and his accessory but not about the organization of the same name.  If we purposely include a reference to that material that the shield is made from and purposely exclude the leader of the SHIELD organization, it is likely that our results will fall more into the realm of what we want to know.

There are many tutorials available online to learn search engine techniques.  You owe it to your kids to not only learn them, but share them with your classes.  Lets put an end to Search Engine Illiteracy.  A key word is a terrible thing to waste.

2.  Be a Microsoft Office Master.  Microsoft Office is the standard application suite for business in the world today.  Anyone searching for any kind of job in a corporate environment needs to be able to use Word and Excel at the very least.  If you are a teacher then you should not expect your students to do anything that you, yourself, can not do.  Setting up and switching between Chicago, MLA, and APA style formatting and citation should be second nature.  You can’t expect a student to properly format a footnote if you can’t help them get it done.  You should be able to write simple Macros for Excel in VBA and automate various Office tasks.  Passing on those types of soft skills to your students can take you from being a good teacher to being a great teacher.

3.  You should be fluent in Social Media.  Having a Facebook page that you haven’t visited since its inception does not count.  You need to able to communicate with your students using a language that they understand.  You need to be able to teach proper digital citizenship to any and every class you have.  In order to engage students you need to appear relevant.  Without social media interaction you will not be considered so.  You also need to know your limitations.  Social media is a great tool for education as long as it is used by professionals within the guidelines set by your school.  Having your students as friends on Facebook or followers on Twitter can be a tragedy in the making.  Know the rules and know your options.  Tools like Remind.com and Edmoto are invaluable but you still have to follow the rules.

…and speaking of rules.  According to the protocol for content development I have just gone past the amount of material that most people want to digest at any one reading so I am going to transform this entry into a three part series.  Be sure to drop by tomrrow and see the next three technical skills that a teacher needs.

Thoughts on TCEA 2015 #LearnAnywhere and Technology in General

tceaHaving just returned from the Texas Computer Educator’s Association Convention and Exposition, held in Austin, TX, I have garnered some insights that I think might be worth sharing.

1. There is very little in the way of “Computer Education” going on in the state of Texas or anywhere for that matter.  We use tablets, phones, and just about anything else, but the traditional computer is sorely lacking in representation.  This is unfortunate because, while the previously mentioned devices allow us very convenient access to online resources, they are very difficult, if not impossible, to create new content with. Programs like Visual Studio, Eclipse, Adobe Premier Pro and After Effects, Autodesk Maya and Motionbuilder are not available.  The resources and hardware accessible to tablets and phones is not able to run these applications.  In short, don’t declare the humble desktop dead just yet.  Most of the digital content developed in this world today still comes from a desktop PC or Mac or Linux system.  (Even laptops can be a pain to create on.)

2. There is very little content creation education going on in the state of Texas or anywhere else at the secondary level or below.  We use “educational” programming languages and tools like Alice or Scratch or Turtle.  While these platforms have their place.  They are great for teaching programming constructs like IF/THEN statements and Loops and variables, They do not, however, scale well into the real world.  Why not use real languages like Java or C or Python to teach the same concepts, and at the same time, provide students with information they can use post High School.  There are not so many calls for Scratch developers in business today.  We can use the same time and resources to teach kids Java syntax as well as general programming structures and theories.  We need to be generating lines of code and pixels of video, all sorts of content, that we are not doing.

3. If we DID choose to create content, there is a TON of resources available for free or nearly so.  Nearly every major software creator offers educational or academic pricing.  3d modeling programs like Maya and 3DS Max can cost a movie studio thousands of dollars per license but a student or teacher can have access to the same program for a pittance.  Programs like Microsoft Dreamspark, Adobe Academic Pricing for Creative Cloud, and Autodesk software provide professional tools for academics for essentially free.  Add to that lot the Open-source programs available through Linux, as well as third-party developers who just want to create something and you can build an excellent program for the cost of hardware.  (Now we just have to get the cost for THAT down to a reasonable level.)

4. We tend to waste opportunities like this.  We don’t take advantage of what we are given.  The Whitesboro contingent of teachers who went gathered a great deal of information but if we don’t do anything with it then it is wasted.  I am trying , as we speak, to collate my notes and materials for distribution.  I know some of our other attendees have already posted their findings in a shared folder for free access by all faculty members, but we need to make sure that what we learned is not just lost.

5. Austin traffic is dreadful.  I am used to Dallas rush hour and there are a GREAT many more people in Dallas than in Austin.  I suspect it must be the fact that Dallas is so much more spread out and the freeways there are more modern than in Austin.  For whatever reason, I would not like to commute in the Austin area.

Dos Doceri Por Favor

Do you have an iPad or a Microsoft Surface?  Do you have a PC hooked to a white board in your room?  Would you like for them to work together from anywhere in the room?.  Idocerimagine letting the students come up to work on the board and then resetting it from across the room. This is your lucky day.  The Doceri tablet/PC remote system makes presentations and controlling systems as easy as Pi (lol).

Doceri allows the presenter to remotely control any PC or Apple desktop using any iPad or Windows tablet with the app installed.  The desktop must have the Doceri host installed.  The tablet must have the Doceri client application.  The two connect over a wireless network to allow the user to open and close programs, create documents.  In short, anything you can do sitting at the PC you can do from anywhere in the room.  In addition, the Doceri app includes tools to mark up and highlight anywhere on the screen you happen to be working on.  These markups will appear on the projected image from the desktop.  This is a great tool to emphasize material when lecturing or demonstrating and allows you to point out important points during a whiteboard lesson.

The app/host combination is free to evaluate but a license fee of $30 will remove the watermark and popup nag screen from the application.  The price of registering also includes a web based tutorial for educators to learn the finer points of Doceri and it’s capabilities.  For you flippers out there, Doceri will allow you to record presentations, including markups, and post them to the Internet.  The Doceri company is perfectly willing to accept Purchase Orders from educational institutions.  If you don’t have access to an Apple or Windows PC, Doceri will also work with an iPad using Airplay to share the presentation to a flat-screen monitor.  In short, Doceri is a great tool for presentations of all kind.  It works with Airplay, whiteboards, or it can turn an ordinary projector into an interactive presentation.