Author: Aaron

Aaron Snowberger is an experienced web developer, graphic designer, and educator in ESL and computer technology. He holds a Bachelor's degree in Computer Science, Master's degree in Media Design, and professional certifications for React (JavaScript) development, and as a Google Certified Educator and Trainer. Aaron is passionate about helping new learners discover the joys of technology, and has presented across the country at multiple local, national, and international conferences in both the ESL and web development fields. His most recent talk was given at the 2019 JSConf (JavaScript Conference) in Seoul on September 3, 2019. (https://2019.jsconfkorea.com/en/tutorials)

Coding an Advent Calendar: Day 3

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable.

Day 3

CSS bow & ribbon
I wanted to make a bow for the present entirely out of CSS, so I went back to CSS-Tricks.com’s “The Shapes of CSS” example page and found an infinity loop. I created an extra <div> for it and played around with the code a bit to get the shape right (flatter, less round, slightly more angled like it was sitting on top of the box), then changed the border colors to create a multi-colored look.

For the ribbon underneath the bow (I decided a bow alone looked a little weird), I used some similar transform: rotate() techniques from the bow and also applied different border colors to the shape to give it a similar multi-colored look like the bow.

Footer
From the beginning of this project, I knew I wanted to create some kind of horizontal, side-scrolling effect: either to display the presents in a type of slideshow, or to scroll the background as a white winter wonderland scene. I decided to add FontAwesome gift icons denoting each day leading up to Christmas in the footer that people could click on to open the present for that day.

A couple ideas for continued development:

  • Make the presents either disabled or inactive (non-clickable – error message pops up) if that day has not yet begun
  • Add small graphic hills, trees, or reindeer in the background, just above the footer (here’s some inspiration from SitePoint’s previous Christmas site)
:hover, :active, "christmas" CSS styles  
I also added some special CSS classes to help denote the current day (active), the hovered day (hover), and Christmas Day ("christmas").

References

Here are some more good resources for finding help with CSS Shapes:

  1. CSS-Tricks.com: The Shapes of CSS
  2. EnjoyCSS.com Shapes Gallery
  3. CSSPortal: Shapes
  4. CSS clip-path Maker
  5. Creating Non-Rectangular Layouts With CSS Shapes
  6. Getting Started with CSS Shapes: Wrapping content around custom paths

The last two are (extensive) blog articles that dive deep into creating non-rectangular layouts on webpages using CSS shapes.

Work Completed (to date)

  • December 3, 2016
    • CSS bow & ribbon
    • Footer with FontAwesome presents
    • Hover, active, and “Christmas Day” styles for footer presents
  • December 2, 2016
    • React.js + Axios.js initial code structure
    • Color palette
    • CSS → Sass
  • December 1, 2016
    • Let it snow
    • Typography choices
    • CSS presents (first design)
    • Design notes menu

Coding an Advent Calendar: Day 2

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable.

Day 2

WP REST API with React.js (structure)
There’s been a lot of excitement recently about the WP REST API’s inclusion of content endpoints in WordPress 4.7 lately, so I’ve been wanting to learn about that and create something useful that utilizes it. I have built both a simple WordPress REST plugin and a WordPress REST theme in October this year, by following these Lynda.com courses:

  1. WordPress REST API (WP-API): First Look by Morten Rand-Hendriksen
  2. AngularJS and WordPress: Building a Single-Page Application by Roy Sivan

After building these projects, I wanted to do some more with the WP-API. Then, after Brian Krogsgard created a Codepen which utilizes React.js and the WP REST API (and one with Vue.js), I thought it would be a good thing to fork and learn from.

Color Palette
Initially, I set the colors for the CSS present to green and maroon but was quite unsatisfied with that combination. Eventually, after checking some other color palettes on ColourLovers.com and Dribbble.com, I settled on the following (similar to this Codepen):

  • Dark Red: #9D1313
  • Light Red: #F17259
  • Dark Green: #0B8972
  • Light Green: #65C0A5
  • Dark Blue: #2A6FB0
  • Light Blue: #CAE4F2

Along with various other alpha shades, tones, and tints of these colors as well as  Black  and White.

Sass CSS
Since the color palette I chose would need to be used and reused in the various elements I created on the page, I decided the best way to keep track of those (and easily call them up later) would be to switch my CSS stylesheet to Sass. I stored the color (and other) variables at the top of the stylesheet and was able to easily use them at will throughout the page.

I may yet do something else with Sass mixins or functions (like a @for loop), and I intend to rewrite the stylesheet using Sass nested selectors later.

Work Completed (to date)

  • December 2, 2016
    • React.js + Axios.js initial code structure
    • Color palette
    • CSS → Sass
  • December 1, 2016
    • Let it snow
    • Typography choices
    • CSS presents (first design)
    • Design notes menu

Coding an Advent Calendar: Day 1

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable (for the next year, and the next year, and the next year, etc).

Day One

The goal here is to add a little bit (1-2 hours of coding) to this each day of December leading up to Christmas (at which point it should be a completed project). I may then add some bells and whistles in the week after Christmas as well to make it more fun for New Year’s too.

The following are some initial notes (and inspirational links) I made to help guide my design decisions as I started creating this site.

Design Decisions

JavaScript plugins
I searched through a number of Codepens and sites that were using a (surprisingly wide) variety of jQuery plugins to “Let it snow” on websites. I settled on a plugin from MadeByMagnitude.com that showed snowflakes at different sizes and fell lightly over my page. Here are others:

  1. jQuery Snowfall 1.5: Small, pixel-sized snowflakes that collect on top of objects
  2. Snowstorm: Round snowflakes that “blow in the wind” as your mouse moves
  3. Round snowflakes that disburse when moused over
  4. 3D snowing effect with Three.js
Typography
The first font I selected was for the headings of the site. I wanted something that would have good thick, stylized numerals that I could use for the dates I marked on the packages. Then, I wanted looked for a body font to complement it. I thought something with rounded edges would look nice, but I found a very nice old and rounded serif font that fit the Christmas theme very nicely as well.

advent-calendar

  1. Headings: Sonsie One
  2. Body – 1st try: Varela Round
  3. Body – 2nd try: Averia Serif Libre
  4. Body – 3rd try: Quicksand
  5. Body – 4th try: Nunito

And, actually, it’s because of my time spent choosing typefaces that I decided to use this Advent Calendar design to highlight some of my favorite all-time typefaces. In a separate blog series, I’ll post One typeface per day that I’ve really enjoyed using in other designs.

CSS Shapes
I’ve recently been working with SVGs and SVG animation, but I haven’t done a whole lot with CSS shapes (i.e. using a bunch of <div> elements and strange border-radius settings to draw something interesting). Therefore, I decided to create the Christmas presents (and ribbons) in pure CSS and HTML.
day1-present

Work Completed (to date)

  • December 1, 2016
    • Let it snow (jQuery plugin)
    • Typography choices
    • CSS presents (first design)
    • Design notes menu

WP Migrate DB Manually : Multisites & Single Sites

Recently, I needed to migrate a WordPress site from a Multisite installation to a Single Site .com.

I usually use the WP Migrate DB plugin because it works well for my basic needs, but going through the Multisite -> Single Site transition very manually, sure made me see the value in the Pro version of their plugin.

For a full video tutorial walkthrough of the transfer process, I highly recommend Morten Rand-Hendricksen’s Lynda.com course on the subject. Below are a few step-by-step notes detailing the process.

Setting things up

  1. Setup your <TARGET> site first
    1. Install WordPress with default options
  2. Migrate plugins, themes, and uploads
    1. Move them from the <ORIGIN> site -> the <TARGET> site *
    2. Using FTP, I download what I want to keep to my Desktop
    3. Then, upload them back to the NEW site (watch a video, it’ll take a while)
  3. Install WP Migrate DB on both sites and open it

migrate_db

Single Site -> Single Site

  1. From the <TARGET> site:
    1. Copy the URL -> <ORIGIN> site’s “New URL”
    2. Copy the file path -> <ORIGIN> site’s “New file path”
  2. On the <ORIGIN> site:
    1. Export the SQL file
  3. Prepare <TARGET> site’s wp-config.php file **
    1. Open <ORIGIN> site’s wp-config.php file
    2. Find $table_prefix down in the file and copy that table prefix String
    3. Replace $table_prefix String in the <TARGET> site’s wp-config.php with the <ORIGIN> site’s String
    4. Save the modified <TARGET> site’s wp-config.php
  4. Open phpadmin on the <TARGET> site
    1. Drop all <TARGET> site’s default wp_ tables
    2. Import <ORIGIN> site’s SQL file (from WP Migrate DB)

Multisite -> Single Site

I did all the previous steps for the Multisite configuration (to test it), but ended up with the default site and not any of the Posts or content I needed in my subsite. Luckily, DeliciousBrains has written up a tutorial detailing this kind of migration as well:

Extracting a Subsite from Multisite to Create a New Single Site Install

These are the steps I followed (and some notes about mistakes I made):

Notes:

* Originally, when you want to move your uploads folder from Multisite to a single site, you’ll notice another folder in the uploads folder:

  • /uploads/sites/4/2016/
    • The sites folder contains all the uploads for each subsite
    • The 4 (or other numbered folder) is the site ID (you can find the site ID by going to that particular site’s admin Page)
      • http://sitename.com/wp-admin/network -> Sites -> Subsite name
      • http://sitename.com/wp-admin/network/site-info.php?id=4
  • So, you move the content from the site ID’s folder to your <TARGET> site’s uploads folder
    • /uploads/sites/4/2016/ -> /uploads/2016/

** This also means that your $table_prefix String in wp-config.php will include this site ID between the wp_ and the rest of the String:

  • Ex: $table_prefix = 'wp_ex54gTv'; will be 'wp_4_ex54gTv' in the SQL database for your particular subsite

1. Prepare the SQL Export

  1. Migrate plugins, themes, and uploads
    1. Move them from the <ORIGIN> site -> the <TARGET> site *
  2. Replace URL and file path from the <TARGET> site:
    1. Copy the URL -> <ORIGIN> site’s “New URL”
    2. Copy the file path -> <ORIGIN> site’s “New file path”
    3. Click “Add Row” to add subsite details
    4. //subsite.sitename.com -> //newsite.com
    5. Click “Add Row” to replace your uploads folder Strings
    6. /uploads/sites/4/ -> /uploads/

migrate_db_subsite

Now, you’re ready to Export the file.

DeliciousBrains says:

  1. Expand the “tables” section and select the “Migrate only selected tables below” option.
  2. Select all the relevant subsite tables as well as the “users” and “usermeta” tables.

However, that wasn’t an option for me while using the free version of the plugin. Therefore, ALL the next steps were very manual. But, I think the image from their website is helpful to know which tables to keep and which to get rid of in your SQL file:

Source: DeliciousBrains.com
Source: DeliciousBrains.com

Basically, you will want to KEEP all the WordPress data for your subsite (everything with the site ID between underscores _4_ and DELETE all the WordPress data for the main site.

Notes:

* This was one of my problems going through. I didn’t DELETE all the main site data from the SQL file, so it would import the subsite data, then overwrite it with the main site data.

2. Prepare the SQL upload

  1. After preparing everything as described previously, Export the SQL file
    1. I turned OFF Gzip so I could immediately modify the file after download
  2. Modify the .sql file in any code or text editor
    1. Go ahead and go through and DELETE all the SQL tables that we didn’t need to select (everything that ISN’T blue in the image above).
    2. These will be listed in the alphabetical order shown in the image, so should be easy to find. DELETE everything from wp_blog_versions to wp_terms (because you’ll notice you still have wp_4_terms and the like that contains your subsite data
    3. Find and Replace any instances of wp_4_ with just wp_
    4. Save and close the file
  3. Open phpadmin on the <TARGET> site
    1. Drop all <TARGET> site’s default wp_ tables
    2. Import the NEW SQL file (you just modified)
  4. Run cleanup
    1. DeliciousBrains has some SQL queries you can run to remove duplicate usermeta rows as well – these didn’t work for me as the syntax in my phpadmin was wrong, so I manually deleted old users, etc.
    2. Alternatively, it looks like this SQL script will do the job as well

Problems?

  1. Whitescreen of Death? Your theme may be missing from the target site – /wp-admin will still work – choose a different theme, or be sure to upload the one you want
  2. Manual DB import fails? Don’t use GZIP and export it again (larger file size)
  3. WP Migrate DB ate my posts? This is a migration, not merge – use WP Migrate DB Pro’s push/pull if you just want “updates”
  4. Media files not working? Be sure everything is uploaded (and for Multisite, be sure you changed the upload folder during your SQL export – from /uploads/sites/4/ to /uploads/
  5. Migration failed? Be sure the $table_prefix Strings in your <TARGET> site wp-config.php match those in the <ORIGIN> site’s wp_config.php

Was this helpful?

I hope this write-up was helpful. Let me know in the Comments. I plan to use these notes for my next Migration as well.

Side note: WP Migrate DB Pro can do all of this FOR you automagically. It can also UPDATE your site if there is newer content on one side or the other using their push/pull function. It would be a great option if you do lots of migrations or just want to save yourself the headache of doing it all manually.

Become a Better Presenter by Becoming a Better Teacher

Think about it. As a Teacher, you are literally a professional, paid, public speaker. Are you good at it? Could you be better? In my experience, there are a number of things each one of us can do to increase our public speaking skills, both in the classroom and out. And what you learn, do, and apply in the classroom can have a great impact on how you speak at professional venues. Come learn the THREE core skills that you can use to take your presentations from blah to bravo.

What I’m going to talk about today is primarily sourced from a book we teach at Jeonju University: Speaking of Speech. I’ve personally found this book to be quite helpful in enhancing my own presentation skills, so I want to share some of the insights I’ve gained over the years.

And while the outline of this talk may follow the same topics covered in the book, I hope to be able to add enough additional material and tips to make it really worth your time.

Speaking of Speech

  1. Story Message = Content is (still) KING
  2. Physical Message = YOU are the presentation
  3. Visual Message = PPT is only a TOOL (not a crutch)

Story Message

If you dress up a dog like a princess, what do you have? It’s still a dog. Likewise, even the most well-designed and beautiful presentation will fall flat if there is not good CONTENT behind it.

Content is (still) KING – particularly in presentations (and teaching).

  1. Introduction = like the top bun of a hamburger – whets your appetite
    1. This is what you WILL say – provide an outline
  2. Body = the meat, cheese, and toppings – all the stuff that makes it good
    1. Say it!
  3. Conclusion = the bottom bun – pulls it all together, or else you’ll have a giant mess
    1. Remind them what you just said – don’t leave them to pull all the pieces back together themselves
INTRODUCTION
  1. WHAT is the topic about? (Title slide)
  2. WHY are you talking about it? (Give them a good reason to listen. “What’s in it for me?”)
  3. Provide an OVERVIEW (Outline) of the whole talk
BODY
  1. Introduce = the spoon in an ice cream cup – let’s them know what this is about
  2. Explain = the ice cream in the cup – all the yummy stats, numbers, and figures
  3. Emphasize = the cherry on top – makes the whole thing better
    1. Tasty Transitions – and don’t forget to close each section and begin another in a clear, interesting way
CONCLUSION

Wrap it up by taking them back to the beginning. Remind the audience:

  1. WHAT you talked about
  2. WHY it is important
  3. HOW they can do something about it

Physical Message

Never forget: YOU are the presentation. The slides behind you are only a Visual Aid (“aid” = “helper” not “do-it-for-you-er”). Don’t rely on those as a crutch. In a pinch, you don’t even NEED the PPT. Rely on yourself to BE the presentation and use all the tools at your disposal.

  1. Posture
  2. Eye Contact
  3. Gestures
  4. Voice
POSTURE TIPS

Do you find you have bad posture? Or difficulty having good posture?

  1. Settle in first – don’t start speaking on your way up – settle in, feel the area, control the space, THEN start
  2. Play a mental movie – visualize in your head how the presentation SHOULD go – this mental priming will help you better be able to judge if things are going as they should be or not
  3. Strengthen your core and shoulders – some of the worst posture often comes from hunched shoulders or a bent back. Exercise! Strengthen those muscles when you DON’T need them so they’ll treat you right when you do need them
EYE CONTACT TIPS

Do you have trouble making eye contact with the audience?

  1. Look (slightly) PAST the audience – look at their hair, or slightly over their heads, or at their noses – sometimes eye contact can be intimidating, but if you look at noses, you won’t feel intimidated by straight on eye contact
  2. Find a handful of people to connect with – you don’t need to look at EVERYONE, just find a few who are really engaged with what you’re saying and return your gaze to their eyes in sequence
  3. Direct your vision in sequence – start at the left side of the room, then the back, the right, and back to the left – decide on your preferred sequence and stick with it – it’ll take the guess-work out
GESTURE TIPS

Most Western speakers don’t seem to have much trouble with gestures, but here are three tips in any case:

  1. Don’t overdo it – gestures are best used to express the following:
    1. Numbers & Sequences (first, second, …)
    2. Emphasis & Focus (the key point…)
    3. Illustration & Location (to the left of…)
    4. Comparison & Contrast (on the other hand…)
  2. Body Language – remember you can also express yourself with the following:
    1. Body movements
    2. Facial expressions
  3. Consider yourself a performer – when you’re giving a speech, you’re out of your Comfort Zone. You need to express enthusiasm even if you don’t feel it, so act it. You are an actor on stage in front of an audience
VOICE TIPS

Do you have trouble controlling your voice? Speaking too fast? Too quietly?

  1. Control your voice through rehearsal – the more you practice speaking through the same content, the more comfortable you become with it. You will also learn the jokes and stories that work best and those that don’t work so well
    1. Example 1: Chris Rock prepares by hitting up tons of small comedy clubs in a neighborhood before a big TV special, taking notes while performing
    2. Example 2: My Friday classes run much smoother than my Monday classes with the same book
  2. Slow down by avoiding coffee – this is a tip from a Keynote speaker at a Tech conference I saw recently. The combination of adrenaline (nerves) and caffeine will automatically speed up your speech
  3. Express greater enthusiasm through exercise – Do you find you have little energy on stage? Is it hard to be enthusiastic about something? Then push yourself physically (with exercise) off the stage so that you can have and produce more energy ON the stage

Visual Message

The Visual Message is LAST because it is NOT what makes a great presentation. PPTs are merely AIDS to help you. Don’t rely on them like a crutch. YOU are what really matters in a presentation.

The Visual Message ultimately boils down to 1) design, and 2) the tools you a) have and b) know how to use.

A tool is only as good as the person using it.

The best tool is the one you USE.

Let’s talk about Complexity and Design.

COMPLEXITY
  1. Show only ONE idea per slide
    1. Less is more, bigger is better
    2. Using bullet points? 5×5 (7×7) – show at most 5 points with at most 5 words each
    3. Yes, this means you may need to increase the number of slides in your PPT, but it also will give you the opportunity to show transitions, animations, and highlighting in more interesting ways (with motion as you flip through the slides)
  2. Simplify
    1. Use high contrasting colors
    2. Use simple backgrounds
    3. Use transparency, contrast, brightness, shapes, and image cropping to your advantage
DESIGN
  1. Colors – Use a limited color palette
    1. Remember the 60-30-10 rule (like a man in a suit)
      1. 60% main color
      2. 30% secondary color
      3. 10% accent color
  2. Fonts – Understand the types and proper uses of fonts – use fonts to show Hierarchy
    1. Sans-serifs = Modern style, good for Titles in print, body copy on screen
    2. Serifs = Classic style, good for body copy in print, Titles on screen
    3. Scripts = Handwriting style – best used in limited quantities (if at all)
  3. Images –
    1. Learn which types of images are appropriate to use legally and where to find them
      1. Creative Commons – or even better CC0 Images

Life as a teacher begins the day you realize that you are always a learner.

Great leaders (teachers) work to sharpen [their tools].

Simon Sinek

Review

Resources

  1. Templates:Google Slides Templates @ SlidesCarnival.com
  2. Images: CC0 Images (29 Sites)
  3. Fonts: Google Fonts (available in Google Slides, or to Download for FREE)
  4. Color: Canva Color Theory 101
  5. Color Palettes: ColourLovers.com
  6. Book: How to Avoid Death by Powerpoint (David JP Phillips)
  7. Website: ThePresentationSkills.com (David JP Phillips)
TEDX TALK

How to Avoid Death by PowerPoint by David JP Phillips:

HELPFUL PRESENTATIONS


Death by PowerPoint from Alexei Kapterev

HTML Aside: Finding and Using Internet Images

There are TWO primary concerns when searching for images on the Internet to use on a webpage:

  1. WHERE will I find good images?
  2. What about image COPYRIGHT?

This article covers the basics of both topics – but let’s begin with COPYRIGHT.

Copyright

There are TWO basic forms of copyright to be aware of:

  1. Implicit / inherent (unspecified) copyright
  2. Explicit (specified) copyright

Implicit (default) copyright

Generally speaking, EVERY image you find online was shot or created by someone besides yourself – which means it automatically, inherently possesses a copyright by the original creator. You are not (legally) permitted to simply “search and use” any image you find on Google.

Explicit copyright

Many content creators explicitly assign different forms of copyright to their creative works.

SIX copyright terms you may have heard:

  1. “All rights reserved” (exclusive rights)
    • Copyright DEFAULT – nothing may be done with a copyrighted work without permission
  2. Royalty free
    • Buy the license once, use the image multiple times without paying additional royalties for each use
  3. Stock photos
    • Images licensed for specific uses (or a specific number of uses) – often lower priced
  4. Fair use
    • Copying a copyrighted image in a “limited and transformative” way
    • Fair uses in the US: commentary, search engines, criticism, parody, news, research, scholarship
    • This is often the most misunderstood and misused defense when using a copyrighted work – and people have been sued for it
    • Better to avoid the trouble altogether, or have a good Fair Use Checklist (and lawyer)
  5. Creative Commons
    • Copyright holders specify which rights they reserve and which they waive – often providing images for free use within limits (primarily attribution)
    • CC0 Images (Creative Commons 0 license) are dedicated to “public domain” use
  6. Public Domain
    • Images (and books, music, or other copyrighted material) that may have once been copyrighted, but are now considered “owned by the public” due to the expiration or forfeiture of exclusive rights
    • The Unlicense is also a “Public Domain Dedication” license

Tips:

  1. Do you want FREE images?
    1. Use images in the public domain or with CC0 or Unlicense licenses
    2. Use images with Creative Commons licenses and credit the author (or whatever else the specific type of CC license requires)
    3. Take / create your own images
  2. Do you have $$$ and want to use a single image all over the place?
    1. Purchase a royalty free image
  3. Do you have $$$ and just need an image for a specific use?
    1. Purchase a stock photo

Where to Find Good Images

The following is a brief list of some of my personal favorite Image finding websites. The complete list of Image finding websites will live on at justkeeplearning.xyz/find-images.

  1. CC0 Sites (FREE use – but check anyway)
    1. Finda.photo
    2. Pexels.com
    3. Pixabay.com
    4. Gratisography.com
  2. Creative Commons (check the license, terms, usage allowance)
    1. Wikimedia Commons
    2. Google Image Search (Tools = Reuse allowed)
    3. Flickr.com (Advanced Search = All Creative Commons)
    4. Stock Xhange
  3. Stock Photo Sites (buy a license, understand terms)
    1. Shutterstock.com
    2. Getty Images
    3. DepositPhotos.com
    4. 123rf.com

HOW to Select Excellent Images

Now that you know WHERE to look, it’s equally important to know how to choose high quality images. The following is a (mental) checklist I use:

  • I: Information – Does this image add information and/or enhance the content?
  • M: Mood – Does this image convey the right mood? Does it fix the context?
  • A: Authentic – Does it look fake, posed, or unnatural? Avoid it. Find something authentic.
  • G: Great shot – Is it visually striking, crisp, well-lit, well-cropped, and high quality?
  • E: Engaging – Does this image engage your audience? Does it grab attention?
  • S: Smart Style – Does this image fit with your website/brand’s style and color scheme?

For more information on selecting Excellent Images, check the following two links:

  1. 4 Tips for Choosing the Right Stock Photography
  2. Choosing Images for Your Website – The Minimalist Guide

HTML Learning Course

  1. Introduction to HTML
    1. Aside: Creating HTML Files
  2. Webpage Structure
  3. Text Elements
    1. Aside: Character Codes
  4. Lists
  5. Links
  6. Images
    1. Aside: Finding and Using Internet Images
  7. Tables
  8. Forms
  9. Additional HTML tags

A Roadmap for WordPress as LMS

This talk attempts to give real, practical tips – and a roadmap – for developing a Learning Management System for your classroom with WordPress.

This talk was presented at the KOTESOL National Conference in Seoul on May 30, 2015. With this presentation, I tried to reduce the amount of theory (from my last LMS talk) and increase the amount of practical application steps that teachers could use to begin creating their own LMS websites with WordPress.

This slideshow is accompanied by my own “WordPress as LMS Roadmap” paper that gives step-by-step advice and instructions for building a (basic) WordPress LMS.

Although in the talk, I highlighted the major selling points for using WordPress as an LMS, I’ll refer you to my previous LMS talk titled “WordPress as LMS (Learning Management System)” for more information on WHY you might choose WordPress over the other available options. For the remainder of this post, however, I’ll focus on the practical steps involved in building your own class website in WordPress.

The Roadmap

Review: The 6 Things an LMS Needs to Do

6-aspects

  1. Communicate Objects (Courses, Lessons, Modules)
  2. Show Learning Timelines (Syllabus)
  3. Deliver Content (Dripped content = content that is only accessible at specified times)
  4. Assess & Track Student Progress (Quizzes, Tests, Attendance, Participation, Gradebook)
  5. Communicate with Students (Comments, Forums, Wikis, Chat)
  6. Provide Ongoing Resources (in some sort of library or collection)

Step 0: Get a website

You basically have 2 options: FREE or PAID and both have their upsides and downsides:

  1. FREE Advantages and Disadvantages
    1. (+) It’s FREE
    2. (-) Themes, plugins, and design options are limited. Plus, your URL will be either yourclass.wordpress.com or yourclass.edublogs.org – you won’t own your own .com
  2. PAID Advantages and Disadvantages
    1. (+) You can choose what to pay for and how much you’re willing to spend. You can buy your own yourclass.com URL, and can basically make any theme, plugin, and design choices you want
    2. (-) You pay for it. Some highly specialized themes, plugins, or features are sold separately

If you want a completely FREE site, you can still build a very functional classroom website in WordPress. I used a totally FREE installation of WordPress for the first 2 years of my LMS.

The remainder of this post will focus on creating a FREE WordPress LMS, although I will highlight some of the paid options you may wish to consider.

FREE Hosting Options

  1. Go to http://www.wordpress.com and sign up for a FREE account (you can upgrade later)
  2. Go to http://www.edublogs.org and sign up for a FREE account (you can upgrade later)

PAID Hosting Options

I’ve used Dreamhost.com since 2009 and have hosted dozens of personal and client websites there. You can manage every aspect of web hosting from there including:

  1. Setup Step 1: Buying your URL Domain name
  2. Setup Step 2: Installing WordPress with a One-Click Installer
  3. Setup Step 3: Setting up email inboxes @yourclass.com
  4. Support: Dreamhost also has a large Wiki for support for its services and
  5. Support: They have a very helpful support staff and are active on Twitter

If you want to go with Dreamhost, I can offer 2 months of FREE hosting on a year plan if you sign up with this link AND enter the code WPMUJJ as a discount code when you sign up.

Step 1: Communicate Objects (Posts)

After getting setup with a WordPress website and logging into the backend, you have the option to customize your Theme (design), add Plugins (extra functionality), or play with any of your other Settings. It’s probably a good idea to at least familiarize yourself with the WordPress backend menu.

Additionally, you should get to know “The First FIVE Components of WordPress to Understand When You’re Just Starting Out” (click link to view the full description of each). In brief, they are:

5-key-concepts

  1. Pages
  2. Posts
  3. Categories
  4. Tags
  5. Media

In your LMS class site, you can use each like this:

  1. Pages = semester-long use (static) – use for Class homepages, Syllabus pages, About pages, Resource pages
  2. Posts = daily use (chronological) – use for Class lessons, Homework assignments, or Reviews
  3. Categories = folders – assign each Class a separate folder to store all Class materials within it
  4. Tags = keywords – tag Posts with grammar points, topics, or subject content to allow easy searching and linking of related Posts later
  5. Media = upload your PPTs, PDFs, DOCs, Images, Videos, or other content here – and don’t forget that WordPress also does a GREAT job of supporting native embeds from sites like Twitter and YouTube. Click this link for a complete list of all the filetypes and embeds WordPress supports

Step-by-Step

  1. Gather your teaching materials and content
  2. Create a NEW Post for every Lesson
  3. Type (or copy-paste) your Lesson into the Editor and give it a Title
  4. Upload class materials and media
  5. Assign a Category using the Name of the Class (Freshmen Conversation 1B, for example)
  6. Add Tags based on the subject matter (be verb, introductions, conjugation rules, etc)
  7. Schedule the Post (if you want it to be available later, not immediately)
  8. Publish the Post

Plugins that may be helpful

1-commobjs

  1. Easy Classes
  2. WP Teacher
  3. WP Course Manager (like a course catalog)
  4. EduHack (creates a course catalog showing relationships between courses and prerequisites)
  5. Educator (LMS)
  6. CoursePress (LMS)

Step 2: Learning Timelines (Pages)

After publishing a handful of Posts/Lessons (or possibly before), you may want to create a Class PAGE specifically for containing the Syllabus, Lesson Plans, and Links to those Lessons. The best way to do this is to create a WordPress Page.

Pages are unique in WordPress in that they DO NOT have Categories nor Tags. However, they are hierarchical, so you could create a Freshmen Conversation Page that has multiple “children” like the list below indicates:

  1. Freshmen Conversation
    1. Freshmen Conversation 1A
    2. Freshmen Conversation 1B
    3. Freshmen Tues/Thurs
    4. Freshmen Student Center Class

If you use “Pretty Permalinks” (go to Settings -> Permalinks in the WordPress sidebar menu) URLs of each Page will follow after their “parent” Page like so:

  1. myclass.com/freshmen-conversation/
    1. myclass.com/freshmen-conversation/freshmen-conversation-1a/
    2. myclass.com/freshmen-conversation/freshmen-conversation-1b/
    3. myclass.com/freshmen-conversation/freshmen-tues-thurs/
    4. myclass.com/freshmen-conversation/freshmen-student-center-class/

Therefore, you could simplify your Class Page names under the “parent” Page to only include the section number, date, or location of the class if you want (of course, you could also modify the URL by changing the “slug” under the Title of any Page as well).

Step-by-Step

  1. Create a Page for each Class
  2. Optionally create one “Category” main Page and Sub-Pages for each Class under that
  3. Copy-paste in your syllabus OR type it up in an unordered list OR table (using a plugin)
  4. Link each Post/Lesson from your Class Category to its syllabus item
  5. OR simply link the entire Class Category to the top of the Page (when students click the main link, it’ll take them to the Category Page which will show a chronological listing of each Post in their Class from most recent to latest)

Plugins that may be helpful

2-timelines

  1. Easy Table (can be used directly in the Post/Page Editor with the syntax required)
  2. TablePress (has its own interface, slightly more complicated and versatile)
  3. Websimon Tables (similar to TablePress with its own interface)
  4. The Events Calendar
  5. Weekly Class Schedule
  6. My Calendar
  7. Booking Calendar (allow students to schedule a meeting with you through your site)
  8. Online Lesson Booking (schedule a 1:1 lesson or meeting)

Step 3: Deliver Content (Scheduled Posts)

“Drip Content” is a term that means “sequential delivery of content.” This basically means that students don’t (or should not) have access to later Lessons before they complete (or are taught) previous Lessons.

This is very useful in fully automated online Learning Management Systems where a course creator simply sets up the system that unlocks later Lessons as users progress through and complete the Lessons in order. There are a number of good plugins to help you accomplish this.

However, for a simpler system – and one in which the teacher is a more active participant as the course progresses, the simplest method for “dripped content” is simply creating and Scheduling each Lesson/Post for the date that Lesson is to be taught or made accessible (this is akin to simply writing a new Lesson and Publishing it every Monday, for example).

Step-by-Step

  1. Write a Post (Lesson) for you Class
  2. Assign it a Category (Class folder) and add Tags (topics / keywords)
  3. Change the “Publish On” date in the Publish Meta Box
  4. “Schedule” your Post

Plugins that may be helpful

3-delivery

  1. Show/Hide Content at Set Time
  2. Timed Content
  3. Table of Contents Plus
  4. Simple Course Creator
  5. Simple Course Creator – Updates (shows updated course content in a timeline)
  6. WP-Members
  7. Search the Plugin Directory for “Drip Content” or “Show Hide Content”

Step 4: Assess & Track Students (Comments / Authors)

There are numerous ways you can track and assess student work in WordPress. Two of the easiest you can set up with no additional plugins are:

  1. WordPress Comments on Class Posts
  2. Giving students a username and login as an “Author” on your Class site where they can write their own Posts (as essays) which you then edit and approve before they go “Live” on the site

Step-by-Step

Add Authors

  1. Register new Users on your site by going to the Users -> Add New menu item
  2. Assign student roles as “Author” and register them
    1. In recent versions of WordPress, self-registration seems to be disabled, although there are some plugins available that will allow students to register themselves (see below)
  3. Allow students to login and write essays (Posts) in their Class Category – under a Sub-Category of your choice
  4. Edit their work and Publish it – you can write comments in the Post itself or in a Comment below it
    1. Optionally, don’t Edit the Post yourself, but just leave Comments and assign the student the work of coming back in and fixing their mistakes

Take Comments

  1. Go in to the Settings -> Discussion menu to adjust Comment settings appropriately
    1. “Allow people to post comments on new articles”
    2. “Comment author must fill out name and email”
    3. “Comment author must have a previously approved comment”
  2.  Assign students the homework of reading a Class Post and Commenting on it
    1. Additionally, when I was in grad school, I was assigned not only my original Comment about the article, but 3 “Reply” Comments to other students in the class. This is a good way to get a Discussion going.

Grading Student Work

Personally, without installing any additional plugins into WordPress, I have previously just kept records of student work in Excel spreadsheets or Google Sheets (they’re better for calculating numbers on the fly). However, there are a number of plugins available for grading, quizzes, and other things that you may want to try (see below).

Plugins that may be helpful

4-assessntrack

  1. Add Multiple Users
  2. AN_Gradebook
  3. Grading System Daxxip (VERY simple – just assign a grade and make it visible on a Post)
  4. Watu Quiz Tool
  5. Quiz Tool Lite
  6. Easy Quiz Player
  7. Exam Matrix
  8. BadgeOS (Give badges for achievements)

Step 5: Communicate with Students (Comments / Plugins)

One thing that WordPress makes exceptionally easy is communication between people. Whether this is using a Commenting system (as discussed above) or Plugins that add extra Social Networking style features, WordPress is has many powerful tools available to customize communication.

Step-by-Step

  1. Enable Comments on your site (discussed above)
  2. Add Plugins that enhance both your Comments and other forms of communication
    1. Enhance your Comments
    2. Add a Contact form
    3. Add Polls or Surveys
    4. Add Forums, Wikis, or Chats
    5. Add a Social Network plugin

Plugins that may be helpful

5-commwstds

  1. Akismet (the #1 spam comment blocking plugin in the world)
  2. Disqus (enhanced Comments)
  3. Contact Form 7 (one of the most popular contact form plugins in the world)
  4. PollDaddy (available on WordPress.com already)
  5. Polls by OpinionStage
  6. WP Survey and Quiz Tool
  7. Survey by POWr
  8. Wiki by WPMU Dev
  9. Chat by WPMU Dev
  10. Pure Chat – Free Live Chat Plugin
  11. iFlyChat – WordPress Chat (allow users to discuss in public and private chat rooms)
  12. bbPress (Official WordPress forum plugin)
  13. BuddyPress (Official WordPress Social Network building plugin)
  14. BuddyPress Docs (add collaborative work spaces to BuddyPress)
  15. BadgeOS Community Add-on (add badges to bbPress and BuddyPress)
  16. BadgeOS Invite Codes Add-on (allow users on BuddyPress to join specified groups with an Invite code)

Step 6: Ongoing Resources

Finally, it is important to keep an organized space for resources and references for your classes. The easiest way to do this is to create a dedicated Resources Page that you continually update as new resources are found or added.

Your WordPress Media Library houses everything you upload to your site (in chronological order) so it can get rather messy after a while. However, there are a few ways you can help yourself keep things organized in the Media Library:

  1. Be sure to NAME your resources appropriately so that they are easy to Search for in the Search box
  2. Install a plugin to help with organization (see below)

Another option for creating a list of Resources that are simply links to various other locations online is to create a Blogroll (list of other blogs) on a page or in a Sidebar Widget.

Step-by-Step

  1. Appropriately name/label every file you upload
  2. Create a Page called “Class Resources”
    1. You might also create Sub-Pages for each Class like “Freshman 1A Resources”
    2. OR if there will be much overlap, simply divide your Main Page with different Headings for each class
  3. Update your “Class Resources” Page as you find/upload new material
  4. Create a Custom Menu called “Blogroll” or “External Resources” or something
    1. Add links to external sites in this Menu
    2. Add the Menu to a Sidebar Widget (or possibly a Page – you might need a plugin)
  5. Add a Plugin to help you manage everything

Plugins that may be helpful

6-resources

  1. Enhanced Media Library (allows you to Tag your Media Library files and categorize them)
  2. Media Library Assistant
  3. Eazy Enable Blogroll (brings back the original WordPress default Blogroll)
  4. Open Link (outputs Blogroll links to a Page or Post using a shortcode)
  5. Encyclopedia / Glossary / Wiki
  6. Wiki by WPMU Dev
  7. Xili-Dictionary (Multilingual dictionary)
  8. Google Drive WP Media
  9. Google Drive Embedder
  10. BackWPup Free – WordPress Backup Plugin (backups are important)

Full Fledged Learning Management Systems

lms-options

  1. LePress (lacking documentation and screenshots)
  2. Educator
  3. Namaste! LMS
  4. CoursePress | PRO Version
  5. LearnDash (Premium)
  6. WooSensei (Premium)
  7. WP Courseware (Premium)
  8. LifterLMS (Premium)

Your Turn

  • Have you ever built a WordPress LMS site? How was your experience? Any more recommendations?
  • For first users, was my walkthrough helpful? Anything unclear?

Leave me a Comment below.

GPA HS Career Day – Computer Science

The International High School I work at recently had their first ever Career Day and they asked me to present on my field: Computer Science. This presentation seeks to introduce high schoolers to the CS field, and give them an overview of what they can do/learn in the field, future career choices they might consider, and a little bit of advice about what/how to study.

The International High School I work at recently had their first ever Career Day and they asked me to present on my field: Computer Science. This presentation seeks to:

  1. Introduce high schoolers to the CS field
  2. Give them an overview of what they can do/learn in the field
  3. Give them an idea of future career choices in the field
  4. Give them a little bit of advice about what/how to study

Intro

What is Computer Science?

A simple definition in the “Simple Wikipedia” says that Computer Science is “the study of how to…

  1. Manipulate
  2. Manage
  3. Transform
  4. Encode

…data.” A good example of this kind of thing would be a Computer Graphics program that allows you to do all of these things at once:

Source: https://www.youtube.com/watch?v=rnBQAwjsfj8
Source: https://www.youtube.com/watch?v=rnBQAwjsfj8

Computer Science requires a basic knowledge of…

  1. Math
  2. Science
  3. Logic

A good example of this is a simple flowchart because this is basically how computers and algorithms work. They go through a series of simple steps, asking very simple questions, and performing very simple commands to produce some kind of result.

flowchart

Computers are (at their very most basic level) the stupidest metal boxes on earth. They only really understand TWO things: ON and OFF (1 and 0). All computer language, at its core, is just a combination of 1’s and 0’s. But it is the combination of thousands and millions of small, simple steps of 1’s and 0’s added together that creates the massive complexity of today’s computer programs.

Computer Science will push your…

  1. Creativity
  2. Problem Solving Skills
  3. Need for Lifelong Learning

… to the limit. In fact, much of the technology we enjoy today was dreamed up in Science Fiction or other flights of fancy long before it became a reality. Here are a few good examples:

Credit Cards

The first mention of a card that could be processed as money was in 1887 in a book titled “Looking Backward: 2000-1887” by Edward Bellamy. Yet it wasn’t until 1946 that the first actual bank card was invented, and a true “credit” card didn’t become available until 1951.

iPod

I recently read an article in which billionaire CEO Richard Branson reminisced about the time (1986) he jokingly declared (in an article to be published on April Fool’s Day) that his company Virgin was inventing a “Music Box” that could store all the music in the world on it. Steve Jobs later admitted to Branson that he’d been intrigued by the concept when he read about it, and Branson admits that his “joke” may have inspired Jobs and Apple to launch iTunes and the iPod.

Multi-Touch

The movie Minority Report (starring Tom Cruise) came out in 2002 and featured some amazing computer technology that included Cruise being able to use special three-fingered gloves to move, resize, zoom, and rotate images on his computer screen. This is a good example of multi-touch technology that started becoming widespread in 2007 with the release of the iPhone. I can’t help but imagine that the movie may have partially inspired the development of this kind of technology.

Flying Cars

For years, in Science Fiction, flying cars have been a mainstay, and just this year I saw a video of a prototype flying car that may be ready for production and sale by as early as 2017.

As a quote that boldly posted on the high school walls states:

The best way to predict the future is to create it.
-Abraham Lincoln/Peter Drucker

This has never been truer than where technology is concerned. Computer Science (and Engineering) are on the bleeding edge of the future. In fact, nearly every program, application, programming language, and technology that I know today wasn’t even invented when I went through school.

Technology Year invented My age Most recent update
Internet 1982 1 y.o. 2011 (IPv4)
HTML 1992 11 y.o. 2014
CSS 1996 15 y.o. 2012
JavaScript 1995 14 y.o. 2011
jQuery 2006 25 y.o. 2014
WordPress 2003 22 y.o. Today
iPhone 2007 26 y.o. 2014

In fact, if you’re interested in going into the Computer Science field, there’s a HIGH likelihood that what you’ll be working on and building in your career hasn’t even been invented yet! This field leads the way into the future.

Computer Science has Impacted Every Industry

  1. Medicine
  2. Security
  3. Business
  4. Education
  5. Agriculture
  6. Automobiles (even flying cars)
  7. Everything!~

One distinction I thought I might have to make was the difference between an engineer and a computer scientist. Basically,

  1. Engineers: MAKE cool stuff (work with hardware, wiring, chips, machines, and so on)
  2. Computer Scientists: make it DO cool stuff (work with software, program the machines, and so on)

What Can I Learn in Computer Science?

Computer Science can be broken down into two major “branches”:

  1. Theoretical CS
  2. Applied CS

These branches can be further broken down into four “categories”:

  1. Theory (similar to research, mathematical theory, etc)
  2. Algorithms & Data Structures (like what you would learn in school – CS fundamentals)
  3. Computer Architecture (more along the lines of engineering)
  4. Programming Languages (writing code)

The following is a look at some of the most popular coding languages of 2015:

codeeval2015.001

And within these CS categories, there are multiple “avenues” to pursue including:

  1. Numeric & Symbolic Computation
  2. Software Engineering
  3. Artificial Intelligence
  4. Networking & Telecom
  5. Database Systems
  6. Computer Graphics
  7. Operating Systems
  8. Distributed Computation
  9. Parallel Computation
  10. Human and Computer Interaction (User Experience – UX Design)
  11. Security & Cryptography
  12. Modeling & Simulating Real-World Problems
  13. Ethical & Social Issues
  14. Robotics
  15. Game Design
  16. Web Design

And within my current discipline (web design), there are even more specialties:

  1. Front-end development (dealing with what the website looks like and how it performs – using HTML, CSS, JavaScript, and jQuery)
  2. Back-end development (dealing with the function of the site and management of date – using PHP, MySQL, Python, Ruby, and Java)
  3. Full-stack development (combining the two former disciplines)

Why Choose Computer Science?

For me personally, Computer Science is a perfect blend of my skills in math & science with my skills in art and creativity. But beyond that, CS is a field of study that teaches you how to think – and I like to think.

Everybody in this country should learn how to program a computer because it teaches you how to think. – Steve Jobs

It would be wonderful if every kid wrote computer programs and understood how computers work. It would certainly make you a better thinker. – Bill Gates

In fifteen years we’ll be teaching programming just like reading and writing. We’ll be looking back and wondering why we didn’t do it sooner. – Mark Zuckerberg

Knowledge of computer programming is as important as knowledge of anatomy when it comes to medical research or clinical care. – Larry Corey, Fred Hutchinson Cancer Research Center

In fact, learning Computer Science isn’t all about tech companies: 67% of all software jobs are outside the tech industry – in banking, retail, government, entertainment, and so on. And indeed, in the modern economy, there is a growing need for problem-solving skills across ALL jobs.

What’s Wrong with this Picture? (Source: Code.org)

Show Me the Money!~

So, what kind of money can you expect to make as a computer scientist? Here are some examples I found on the web:

  1. Starting Salary: $40-60,000 (ESL in the US = $28,000)
  2. Median Salary: $90,000 (ESL in the US = $40,000)
  3. Top Salary: $150,000 (ESL in the US = $73,000)

(My current career is ESL in South Korea. I make between $33-40,000 USD including full-time + part-time work after nearly a decade doing it – needless to say, I’m looking to transition back into programming whenever I can~)

In fact, according to Geekwire.com, numerous computer science jobs pay better than lawyer and pharmacist jobs.

Career Day - Computer Science (7)
Numerous 0ther well-paid computer science job options in the US are listed here at Business Insider.

Big Opportunities

From what I can see after following the computer industry for a while is that in the present time and near future, there are/will be big opportunities available in:

  1. Big Data (big companies want this)
  2. Internet programming (the Internet is everywhere)
  3. Mobile programming (the industry is booming)
  4. Ruby (current developers can charge up to $100/hr for work in Ruby – compared to the going rate of $50/hr for WordPress developers)

How Do I Start?

I asked some advice from a number of my friends and contacts about how to get into the computer science industry. Their collective experience includes jobs in:

  1. Google
  2. YouTube
  3. Microsoft
  4. Microsoft Security
  5. IBM
  6. Lenovo
  7. MOZ
  8. Airbnb

One of the things about working in tech is that it’s possible to get into it nearly no matter what age or background you are.

Indeed, there are some 90-year-olds who are just getting into designing technology professionally, and some 11-year-olds who are developing mobile apps for the iTunes App Store.

A lot of the stuff we do hasn’t been done before. By the time things are released to the public, we are already started on the next “thing”. There is tons of problem solving and thinking outside the box involved. Half the hardware we use here we are using in a way it wasn’t designed for. But it’s easier to take an existing thing and rethink it to do what you want… The “What you know” isn’t as important as the “How are you going to figure it out?” – James Hickok (my cousin @ Microsoft)

Start a … blog. Write tutorials. Share things that you learn. Learn things by writing about them. That’s how I got to know people in the community. It’s also how I was able to successfully launch Theme Hybrid… And, always reply to comments on your blog. You’ve got to interact with your readers. At a certain point, that gets tough, but keep the conversation going. – Justin Tadlock (WordPress developer I asked some questions to @ WPChat.com)

I would recommend that you learn on your own… You will find that a major in Computer Science doesn’t teach you everything you need to know to be successful on a team. The University tends to focus on teaching the fundamentals of programming languages and only slightly touches on other important aspects of software development… One aspect that is frequently overlooked in people looking for software development opportunities is the need to have great social skills along with technical skills. – Jared Siirila (former classmate and next door neighbor in the dorms)

My classmate Jared also prepared a video to describe his experiences in the software industry over the past 9 years. Check it out:

What you can do to get started:

  1. Build a portfolio of work – show how you learned/taught yourself X, Y, or Z
  2. Do a “Hackathon” where you join other programmers to build something cool in a limited amount of time
  3. Network – in school and out – make as many friends as you can because you never know when your contacts may hear about opportunities that could help you out
  4. Get an internship – this is something I wish had been pushed harder on me when I was younger. If you want a good job, you need some experience – get experience by doing an internship
  5. Build your personal website to share what you’re doing and learning
  6. Join Twitter to keep up with the latest trends in your industry
  7. Get a “self-education” – most of the specifics of you need to know won’t be taught in university
  8. Work on your “people skills” – you’ll need them when you start collaborating on projects

Conclusion

As a quick reminder for all that this post covers, here are the FIVE best things you’ll be doing if you choose to pursue a career in Computer Science:
Career Day - Computer Science

Be Awesome

Resources

  1. Code.org Stats
  2. CS Ed Week Stats
  3. What is Computer Science & Careers?
  4. Exploring Computer Science Statistics

The First FIVE Components of WordPress to Understand When You’re Just Starting Out

The following article is an excerpt from a presentation I gave on WordPress as LMS that I felt deserved its own Post. Enjoy!~

In WordPress, you only need to understand (a minimum of) 5 KEY CONCEPTS to be able to effectively use the software. They are:

  1. Pages
  2. Posts
  3. Categories
  4. Tags
  5. Media

1. Pages

pages

Pages are hierarchical, “stand alone” articles on your site. Though they have publication dates (and can be scheduled for automatic future publication), they do not “flow” as a blog would. Pages are not inherently “related” to each other and they ARE NOT categorized by Categories nor Tags (more later).

If you want a Page to have some kind of relation to another Page, you must assign it a “Parent” in the Page Attributes widget in the Page editor (red box).

Pages will therefore act like individual menu items (they will be automatically added to your main menu if you don’t create one manually) – and “Parent” Pages will act as the top-level dropdown menu containing any “Child” Pages beneath them.

Pages may also utilize “templates”. These will give your Pages a different output on the front of the website and may look like any of the following:

  1. Home page
  2. Landing page
  3. Contact page
  4. Clients page
  5. About page
  6. Full-Width page
  7. And so on

2. Posts

posts

Posts are chronological (non-hierarchical) articles that “flow” along the Blog page, Home page, or Archive pages as they are written and published.

Posts are grouped together by Categories (that act like “buckets” or Folders), and Tags (keywords that are used to Search the site).

Posts may also utilize “Formats” that style certain Post types differently. For example, you may have different styles for:

  1. Regular (Standard) Posts
  2. Aside Posts (without a title visible on the Blog archive Page)
  3. Image Posts
  4. Video Posts
  5. Quotation Posts
  6. Link Posts
  7. Gallery Posts
  8. Status Update Posts
  9. Audio Posts
  10. Chat Posts

3. Categories

categories

On the front-end of a site, Categories may be visible as Folder names for Month or Topic, or in the Breadcrumbs (the “You Are Here” collection of links at the top of a Post), or as individual Menu items.

(On the front-end, you won’t really be able to SEE the difference between Categories and Pages as they appear in the menu unless you click on the link. If it’s a Category, there will be a long list of Posts; if it’s a Page, there will be only ONE Page.)

With Categories, I usually assign each of my Classes at school (or topics) to a separate Category. That way, when the students click on the Category name, they are taken directly to an ongoing blog list of ONLY Posts for their class.

4. Tags

tags

On the front-end of a site, Tags may be visible in a “Tag Cloud” (a collection of frequently used keywords throughout the site), or in the footer meta (a collection of data at the bottom) of a Post. You can also Search for Tags as these are WordPress’s “keywords.”

With Tags, I usually add the keywords for a lesson subject – such as a grammar point we’re studying or the key concepts to understand.

5. Media

WordPress Media is unique in TWO primary ways:

  1. You can Drag-&-Drop media from your Desktop directly into the Post editor window to upload files.
    media-dragdrop
  2. You can Copy-Paste URLs from popular websites like YouTube and Twitter to get immediate, automatic embeds of those videos and tweets (among other things). No more copying over embed codes!
    media-embeds

The WordPress editor also provides you with a view of what your Post will ACTUALLY look like on the front-end even as you type it and before publishing it.

This list of FIVE basic components of WordPress does not even begin to scratch the surface of what is possible, but it should give you a clearer understanding of how WordPress works and what kinds of things you can publish with it.

In upcoming Posts, I’ll delve deeper into both the “PRETTY” and the “POWER” of WordPress with topics on:

  1. Theme Choice
  2. Theme Customizer (pretty)
  3. Top WordPress plugins (power)

Any questions about any of these? Let me know in the Comments below.

WordPress as LMS (Learning Management System)

We are living in the middle of an age of educational and technological revolution. Will you get swept away, left behind, or ride the riptide of edtech into the future? Join me as I look at various successful models of online schools and classrooms, the major components that make up a successful online Learning Management System, and how to create one for yourself using WordPress.

This is a talk I presented at the Jeonju-Jeonbuk KOTESOL Chapter meeting for March 2015.

*Audience Note

I may have addressed this talk (and presented it) to a slightly wrong audience at the time. The meeting was small and contained people who are primarily ESL teachers – who may be familiar with certain web technologies.

However, I designed this talk for an audience who already understand the basic concepts of an LMS (Learning Management System) and want to implement it themselves in their classrooms.

Therefore, this talk is primarily an argument for WHY WordPress is the BEST solution for an LMS – as opposed to other possible solutions (including Moodle) – and introduces some basic concepts about how to put WordPress to work for you as an LMS.

WordPress as LMS

define:LMS/
Learning Management System: A digital learning environment to manage all aspects of the learning process.

In this talk, I will present THREE basic ideas about WordPress as LMS:

  1. WHY? (2 parts)
    1. Why an LMS?
    2. Why WordPress?
  2. HOW? (2 parts)
    1. How does an LMS work and how can we use it?
    2. How can we use WordPress to create an LMS?
  3. WHAT?
    1. What are the specific steps we can take to create an LMS in WordPress?

Step 1A: Why an LMS?

Recall again that an LMS is “a digital learning environment to manage all aspects of the learning process.” The following is a list of 6 basic aspects in the learning process:

6-aspects

  1. Communicate objects (syllabus, course objectives, handouts, etc)
  2. Learning timelines (class schedule)
  3. Delivery of materials (drip content)
  4. Assessment & Tracking of student data
  5. Communication with students
  6. Ongoing Resources

Traditional classrooms usually involve a great deal of printed paperwork and in-class interaction with the teacher.

On the other hand, LMS-assisted classrooms may help reduce (or entirely eliminate) papers and increase student-to-student interaction both in and out of class.

Another reason LMS-assisted classrooms are beneficial for teachers:

No more lost USBs.

I personally haven’t carried a USB in 3-4 years because I store all my lessons, PPTs, documents, and resources on my classroom website (or in Google Docs which can be used in collaboration with my website). Besides that, simply by relying on a USB stick, you are risking spreading viruses between unprotected PCs or even absentmindedly leaving it behind after class.

Are you smarter than a College Freshman?

And another reason to start looking into setting up an LMS is because high-schoolers these days are learning this kind of technology themselves as graduation requirements.

In a document (created in 2006) I downloaded from the San Diego Unified School District that outlines High School Technology Compentencies, the following are the THREE level of Web Authoring competencies they seek for their students:

  1. Basic: Understand web authoring terminology, how to use templates, and district policies on copyright, ethics, privacy, and security
  2. Intermediate: Identify, prepare, create, and upload materials to a web publishing platform
  3. Advanced: Understand and be able to use CSS code, Flash video, downloads, forms, and databases

EdTech is transforming K-12 learning with an intensity and at a pace that is disruptive, creative, and unpredictable.

Students are no longer content to be passive recipients of information. Few kids can sit behind a desk when they have smart phones or iPads in their possession.

The higher education business model is threatened by the need for cheaper delivery of services, content, and learning.

Pricing, Access, Connectivity, Competition – It’s all about Economics.

“EdTech – Revolution in Education” from the Alliance for Science & Technology Research in America

Actually, what we’re talking about here is the FUTURE of education. Every other industry in the world has seen a radical technological reformation and evolution. Education is now also beginning a radical change in the way school and learning happens, but where will our place be in this period of transition and change?

I think the main reason that more people don’t get more involved with EdTech is FEAR. They are afraid of the unknown, afraid of learning (difficult) new things, or afraid of being left behind.

But, I want to alleviate your fears a bit and argue that WordPress is a (comparatively) easy solution for beginning to get more of your own classes online.

Step 1B: Why WordPress?

define:WordPress/
The #1 web publishing CMS (Content Management System) in the world – powering 23% of all the world’s websites.
FREE. unlimited. awesomeness.

But what about some of the other LMS’s you may already be familiar with?

  1. Moodle
  2. Edmodo
  3. Blackboard
  4. Desire2Learn (D2L)
  5. Canvas
  6. Schoology

I think there are at least 6 primary considerations to keep in mind when choosing a suitable LMS. Each of the above is excellent in some of these aspects, but only WordPress rocks all of them:

  1. Price
  2. Power
  3. Flexibility
  4. Simplicity
  5. Support
  6. Reliability

1: Price

WordPress is “forever FREE” due to the GNU GPL2 license.

2: Power

There are over:

  1. 3,000 FREE Themes
  2. 4,000 Premium Themes
  3. 35,000 FREE Plugins

available for WordPress. How much more power do you need?

3: Flexibility

Thanks to WordPress Multisite (a nifty optional feature in the WordPress core), the software is infinitely scalable. A couple of good examples of this are:

  1. WordPress.com that serves up over 500 million sites using only ONE code base
  2. Best Buy which uses ONE base installation to power their 1000s of store sites
  3. The New York Times, Forbes, and Reuters blogs which are all Multisite installations

4: Simplicity

WordPress is not “easy” as in “post-on-Facebook-easy” but compared to the many other options out there, it is surprisingly easy. I’ve even transferred clients to WordPress from Joomla and Moodle after spending significant time with them in the backend trying to fix things how they wanted.

The WordPress Post editor closely resembles a Microsoft Word document editor and is just as easy to publish with.

If you can Word, then you can WordPress.

In fact, in a 2014 survey of WordPress users around the world, the company found out that 91% of WordPress sites took less than 4-5 weeks to make. This is comparatively easy! And I have experience putting together basic sites with all the elements in only ONE week or less.

5: Support

WordPress already powers 1 in 5 sites you visit on the web, and it’s still growing.

  1. 2014 was the first year that non-English downloads surpassed English downloads
  2. There are 17 posts published EVERY SECOND on WordPress.com
  3. Many of the major corporate, political, and tech brands use WordPress
  4. The WordPress Community is enormous, friendly, and helpful. There are:
    1. WordPress Support forums
    2. WordPress Meetups to provide training and assistance (like our Jeonju Meetup)
    3. WordCamps for networking and education
    4. WordPress.tv that contains filmed WordCamp presentations

6. Reliability

WordPress.com gets roughly the same number of monthly unique visitors that Facebook.com gets so up-time and security are big deals. The WordPress.com development team pushes updated code to the core between 60-80 times PER DAY, so both of those facts should give you a feel for just how reliable this service and software are.

If you choose to go self-hosted, however, all that depends primarily on your web host. But the following is a list of some of the top hosts in the world:

  1. Dreamhost (*affiliate) – get 2 months FREE hosting with the code: WPMUJJ
  2. Bluehost
  3. Host Gator
  4. GoDaddy
  5. WPEngine

Step 2A: How does an LMS work and how can we use it?

define:Blended Learning/
Education that integrates online and in-person delivery with some element of student control over the time and place in which they access the course content.

Face-to-face interaction + Computer-mediated activities

Consider the following types of classrooms:

  1. Traditional
  2. Flipped (Blended) classrooom
  3. MOOC

What’s an MOOC?

define:MOOC/
Massive Online Open Courses: an online course aimed at unlimited participation and open access via the web.

Examples of MOOCs include:

  1. edX
  2. Khan Academy
  3. Udacity
  4. Udemy
  5. Coursera

I’m NOT an advocate for a strictly MOOC-style LMS. These systems conduct courses primarily online with minimal teacher-student interaction except via the forums. Granted, some teachers are very participatory in the forums, but not all are – and online forums still leave something to be desired compared to the traditional model of in-class, face-to-face, teacher-student and student-student interaction.

Besides that, MOOCs are COMPLICATED to implement, especially without a dedicated team behind them.

I feel that, at least as far as online course websites are concerned:

Simplicity is the Ultimate Sophistication.

Leonardo da Vinci

Therefore, when considering the following options for course website preparation, I’d recommend:

  1. Level of Instruction: prepare a SINGLE course (at least a first)
  2. Time (Schedule): allow a modified time schedule for students to access the site
  3. Role of Online Components: enhanced
  4. Teacher role: Teacher supports
  5. Student role: Teacher-guided learning
  6. Student support: School mentoring
  7. Student to Teacher ratio: 2-3x Traditional

But, for simplicity’s sake, here are the TWO MOST PRACTICAL ways you can implement an LMS website in your classroom:

  1. Go paperless
  2. Make homework include online interaction

Step 2B: How can we use WordPress to create an LMS?

There are TWO options for using WordPress to create an LMS:

  1. WordPress.com
  2. WordPress.org
WORDPRESS.COM
  1. Is a hosting SERVICE where you can get a FREE site and username at their domain (http://yourname.wordpress.com)
  2. Is limited in freedoms, but provides paid upgrades and is still a viable option for class websites
WORDPRESS.ORG
  1. Hosts the (downloadable) SOFTWARE and all documentation, but you are required to find your own self-hosting solution (http://www.yourname.com)
  2. Is virtually unlimited in customization options

If you go self-hosted, many of the top hosting providers offer a “One-Click Install” from the CPanel (Control Panel) of their site. It’s a simple matter of point-click-wait-5-minutes and you’ll have the FULL WordPress software up and running on your domain.

Here’s a list of recommended hosting providers again:

  1. Dreamhost (*affiliate) – get 2 months FREE hosting with the code: WPMUJJ
  2. Bluehost
  3. Host Gator
  4. GoDaddy
  5. WPEngine

Step 3: What are the specific steps we can take to create an LMS in WordPress?

Consider the 6 aspects of the learning process again:

  1. Communicate objects (syllabus, course objectives, handouts, etc)
  2. Learning timelines (class schedule)
  3. Delivery of materials (drip content)
  4. Assessment & Tracking of student data
  5. Communication with students
  6. Ongoing Resources

In WordPress, you will only need to understand (a minimum of) 5 key concepts to be able to effectively communicate the above 6 aspects to your students. They are:

5-key-concepts

  1. Pages
  2. Posts
  3. Categories
  4. Tags
  5. Media

1. Pages

pages

Pages are hierarchical, “stand alone” articles on your site. Though they have publication dates (and can be scheduled for automatic future publication), they do not “flow” as a blog would. Pages are not inherently “related” to each other and they ARE NOT categorized by Categories nor Tags (more later).

If you want a Page to have some kind of relation to another Page, you must assign it a “Parent” in the Page Attributes widget in the Page editor.

Pages will therefore act like individual menu items (they will be automatically added to your main menu if you don’t create one manually) – and “Parent” Pages will act as the top-level dropdown menu containing any “Child” Pages beneath them.

Pages may also utilize “templates”. These will give your Pages a different output on the front of the website and may look like any of the following:

  1. Home page
  2. Landing page
  3. Contact page
  4. Clients page
  5. About page
  6. Full-Width page
  7. And so on

2. Posts

posts

Posts are chronological (non-hierarchical) articles that “flow” along the Blog page, Home page, or Archive pages as they are written and published.

Posts are grouped together by Categories (that act like “buckets” or Folders), and Tags (keywords that are used to Search the site).

Posts may also utilize “Formats” that style certain Post types differently. For example, you may have different styles for:

  1. Regular (Standard) Posts
  2. Aside Posts (without a title visible on the Blog archive Page)
  3. Image Posts
  4. Video Posts
  5. Quotation Posts
  6. Link Posts
  7. Gallery Posts
  8. Status Update Posts
  9. Audio Posts
  10. Chat Posts

3. Categories

categories

On the front-end of a site, Categories may be visible as Folder names for Month or Topic, or in the Breadcrumbs (the “You Are Here” collection of links at the top of a Post), or as individual Menu items.

(On the front-end, you won’t really be able to SEE the difference between Categories and Pages as they appear in the menu unless you click on the link. If it’s a Category, there will be a long list of Posts; if it’s a Page, there will be only ONE Page.)

With Categories, I usually assign each of my Classes to a separate Category. That way, when the students click on the Category name, they are taken directly to an ongoing blog list of ONLY Posts for their class.

4. Tags

tags

On the front-end of a site, Tags may be visible in a “Tag Cloud” (a collection of frequently used keywords throughout the site), or in the footer meta (a collection of data at the bottom) of a Post. You can also Search for Tags as these are WordPress’s “keywords.”

With Tags, I usually add the keywords for the lesson subject – such as a grammar point we’re studying or the key concepts to understand.

5. Media

WordPress Media is unique in TWO primary ways:

  1. You can Drag-&-Drop media from your Desktop directly into the Post editor window to upload files.
    media-dragdrop
  2. You can Copy-Paste URLs from popular websites like YouTube and Twitter to get immediate, automatic embeds of those videos and tweets (among other things). No more copying over embed codes!
    media-embeds

The WordPress editor also provides you with a view of what your Post will ACTUALLY look like on the front-end even as you type it and before publishing it.

Step 3B: Plugins add Power

0-plugins

The above 5 functions are available both on WordPress.com and with the WordPress.org software. However, if you REALLY want to power-up your LMS, going self-hosted and installing your own plugins is the best way to go.

The following lists provide (at least) FOUR plugin options for EACH of the 6 aspects of learning previously discussed:

1. Communicate Objects

1-commobjs

  1. WPMU CoursePress
  2. WP Teacher
  3. Educator
  4. Easy Classes

2. Learning Timelines

2-timelines

  1. The Events Calendar
  2. Weekly Class Schedule
  3. My Calendar
  4. Booking Calendar

3. Delivery (Drip Content)

3-delivery

  1. WP-Members
  2. Simple Course Creator
  3. Table of Contents Plus
  4. Show/Hide Content at Set Time

4. Assess & Track

4-assessntrack

  1. AN_Gradebook
  2. Quiz Tool Lite
  3. Easy Quiz Player
  4. BadgeOS LearnDash Add-on

5. Communicate with Students

5-commwstds

  1. Disqus Comment System
  2. Akismet Spam Comment Blocker
  3. bbPress Forums
  4. BuddyPress Social Network

6. Ongoing Resources

6-resources

  1. Enhanced Media Library
  2. BackWPup
  3. Google Drive WP Media
  4. Google Drive Embedder

Full-fledged LMS systems for WordPress

  1. LearnDash
  2. Woo Sensei
  3. WP Courseware
  4. Lifter LMS
  5. Namaste! LMS (Free)

So, how will YOU use WordPress in your classroom? (or business)?