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:

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

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:

WordPress REST API (WP-API): First Look by Morten Rand-Hendriksen
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

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.

Let it snow (jQuery snow plugin)
Choose color palette
Cool title hover effect?
Tilted Angled lines?
Cool Landing Page design
Make vector background
Or, draw CSS Christmas shapes (presents)
Scroll right or pop out like PPT or do something with scrollfix 5px error
When click present, it slides to the center and opens, click away, slides back in place and closes
Make each section open a blog post
Use WP API to load Posts
Create Christmas icons and morph them

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:

jQuery Snowfall 1.5: Small, pixel-sized snowflakes that collect on top of objects
Snowstorm: Round snowflakes that “blow in the wind” as your mouse moves
Round snowflakes that disburse when moused over
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.

Headings: Sonsie One
Body – 1st try: Varela Round
Body – 2nd try: Averia Serif Libre
Body – 3rd try: Quicksand
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.

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

Setup your <TARGET> site first
1. Install WordPress with default options
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)
Install WP Migrate DB on both sites and open it

Single Site -> Single Site

From the <TARGET> site:
1. Copy the URL -> <ORIGIN> site’s “New URL”
2. Copy the file path -> <ORIGIN> site’s “New file path”
On the <ORIGIN> site:
1. Export the SQL file
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
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

Migrate plugins, themes, and uploads
1. Move them from the <ORIGIN> site -> the <TARGET> site *
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/

Now, you’re ready to Export the file.

DeliciousBrains says:

Expand the “tables” section and select the “Migrate only selected tables below” option.

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:

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

After preparing everything as described previously, Export the SQL file
1. I turned OFF Gzip so I could immediately modify the file after download
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
Open phpadmin on the <TARGET> site
1. Drop all <TARGET> site’s default wp_ tables
2. Import the NEW SQL file (you just modified)
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?

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
Manual DB import fails? Don’t use GZIP and export it again (larger file size)
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”
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/
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

Story Message = Content is (still) KING
Physical Message = YOU are the presentation
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).

Introduction = like the top bun of a hamburger – whets your appetite
1. This is what you WILL say – provide an outline
Body = the meat, cheese, and toppings – all the stuff that makes it good
1. Say it!
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

WHAT is the topic about? (Title slide)
WHY are you talking about it? (Give them a good reason to listen. “What’s in it for me?”)
Provide an OVERVIEW (Outline) of the whole talk

BODY

Introduce = the spoon in an ice cream cup – let’s them know what this is about
Explain = the ice cream in the cup – all the yummy stats, numbers, and figures
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:

WHAT you talked about
WHY it is important
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.

Posture
Eye Contact
Gestures
Voice

POSTURE TIPS

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

Settle in first – don’t start speaking on your way up – settle in, feel the area, control the space, THEN start
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
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?

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
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
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:

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…)
Body Language – remember you can also express yourself with the following:
1. Body movements
2. Facial expressions
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?

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
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
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

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)
Simplify
1. Use high contrasting colors
2. Use simple backgrounds
3. Use transparency, contrast, brightness, shapes, and image cropping to your advantage

DESIGN

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
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)
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

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

TEDX TALK

How to Avoid Death by PowerPoint by David JP Phillips:

HELPFUL PRESENTATIONS

Fix Your Really Bad PowerPoint by @slidecomet : based on an ebook by @ThisIsSethsBlog from HighSpark | Visual Storytelling Agency

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:

WHERE will I find good images?
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:

Implicit / inherent (unspecified) copyright
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:

“All rights reserved” (exclusive rights)
- Copyright DEFAULT – nothing may be done with a copyrighted work without permission
Royalty free
- Buy the license once, use the image multiple times without paying additional royalties for each use
Stock photos
- Images licensed for specific uses (or a specific number of uses) – often lower priced
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)
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
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:

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
Do you have $$$ and want to use a single image all over the place?
1. Purchase a royalty free image
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.

CC0 Sites (FREE use – but check anyway)
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
Stock Photo Sites (buy a license, understand terms)

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:

HTML Learning Course

~~Introduction to HTML~~
1. ~~Aside: Creating HTML Files~~
~~Webpage Structure~~
~~Text Elements~~
1. ~~Aside: Character Codes~~
~~Lists~~
~~Links~~
~~Images~~
1. ~~Aside: Finding and Using Internet Images~~
Tables
Forms
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.

Download The LMS Roadmap PDF (1 page)

The Roadmap

Review: The 6 Things an LMS Needs to Do

Communicate Objects (Courses, Lessons, Modules)
Show Learning Timelines (Syllabus)
Deliver Content (Dripped content = content that is only accessible at specified times)
Assess & Track Student Progress (Quizzes, Tests, Attendance, Participation, Gradebook)
Communicate with Students (Comments, Forums, Wikis, Chat)
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:

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
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

Go to http://www.wordpress.com and sign up for a FREE account (you can upgrade later)
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:

Setup Step 1: Buying your URL Domain name
Setup Step 2: Installing WordPress with a One-Click Installer
Setup Step 3: Setting up email inboxes @yourclass.com
Support: Dreamhost also has a large Wiki for support for its services and
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:

Pages
Posts
Categories
Tags
Media

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

Pages = semester-long use (static) – use for Class homepages, Syllabus pages, About pages, Resource pages
Posts = daily use (chronological) – use for Class lessons, Homework assignments, or Reviews
Categories = folders – assign each Class a separate folder to store all Class materials within it
Tags = keywords – tag Posts with grammar points, topics, or subject content to allow easy searching and linking of related Posts later
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

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

Plugins that may be helpful

Easy Classes
WP Teacher
WP Course Manager (like a course catalog)
EduHack (creates a course catalog showing relationships between courses and prerequisites)
Educator (LMS)
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:

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:

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

Create a Page for each Class
Optionally create one “Category” main Page and Sub-Pages for each Class under that
Copy-paste in your syllabus OR type it up in an unordered list OR table (using a plugin)
Link each Post/Lesson from your Class Category to its syllabus item
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

Easy Table (can be used directly in the Post/Page Editor with the syntax required)
TablePress (has its own interface, slightly more complicated and versatile)
Websimon Tables (similar to TablePress with its own interface)
The Events Calendar
Weekly Class Schedule
My Calendar
Booking Calendar (allow students to schedule a meeting with you through your site)
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

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

Plugins that may be helpful

Show/Hide Content at Set Time
Timed Content
Table of Contents Plus
Simple Course Creator
Simple Course Creator – Updates (shows updated course content in a timeline)
WP-Members
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:

WordPress Comments on Class Posts
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

Register new Users on your site by going to the Users -> Add New menu item
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)
Allow students to login and write essays (Posts) in their Class Category – under a Sub-Category of your choice
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

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”
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

Add Multiple Users
AN_Gradebook
Grading System Daxxip (VERY simple – just assign a grade and make it visible on a Post)
Watu Quiz Tool
Quiz Tool Lite
Easy Quiz Player
Exam Matrix
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

Enable Comments on your site (discussed above)
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

Akismet (the #1 spam comment blocking plugin in the world)
Disqus (enhanced Comments)
Contact Form 7 (one of the most popular contact form plugins in the world)
PollDaddy (available on WordPress.com already)
Polls by OpinionStage
WP Survey and Quiz Tool
Survey by POWr
Wiki by WPMU Dev
Chat by WPMU Dev
Pure Chat – Free Live Chat Plugin
iFlyChat – WordPress Chat (allow users to discuss in public and private chat rooms)
bbPress (Official WordPress forum plugin)
BuddyPress (Official WordPress Social Network building plugin)
BuddyPress Docs (add collaborative work spaces to BuddyPress)
BadgeOS Community Add-on (add badges to bbPress and BuddyPress)
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:

Be sure to NAME your resources appropriately so that they are easy to Search for in the Search box
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

Appropriately name/label every file you upload
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
Update your “Class Resources” Page as you find/upload new material
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)
Add a Plugin to help you manage everything

Plugins that may be helpful

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

Full Fledged Learning Management Systems

LePress (lacking documentation and screenshots)
Educator
Namaste! LMS
CoursePress | PRO Version
LearnDash (Premium)
WooSensei (Premium)
WP Courseware (Premium)
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:

Introduce high schoolers to the CS field
Give them an overview of what they can do/learn in the field
Give them an idea of future career choices in the field
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…

Manipulate
Manage
Transform
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

Computer Science requires a basic knowledge of…

Math
Science
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.

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…

Creativity
Problem Solving Skills
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

Medicine
Security
Business
Education
Agriculture
Automobiles (even flying cars)
Everything!~

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

Engineers: MAKE cool stuff (work with hardware, wiring, chips, machines, and so on)
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”:

Theoretical CS
Applied CS

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

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

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

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

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

Front-end development (dealing with what the website looks like and how it performs – using HTML, CSS, JavaScript, and jQuery)
Back-end development (dealing with the function of the site and management of date – using PHP, MySQL, Python, Ruby, and Java)
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:

Starting Salary: $40-60,000 (ESL in the US = $28,000)
Median Salary: $90,000 (ESL in the US = $40,000)
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.

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:

Big Data (big companies want this)
Internet programming (the Internet is everywhere)
Mobile programming (the industry is booming)
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:

Google
YouTube
Microsoft
Microsoft Security
IBM
Lenovo
MOZ
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:

Build a portfolio of work – show how you learned/taught yourself X, Y, or Z
Do a “Hackathon” where you join other programmers to build something cool in a limited amount of time
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
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
Build your personal website to share what you’re doing and learning
Join Twitter to keep up with the latest trends in your industry
Get a “self-education” – most of the specifics of you need to know won’t be taught in university
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:

Be Awesome

Resources

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:

Pages
Posts
Categories
Tags
Media

1. 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:

Home page
Landing page
Contact page
Clients page
About page
Full-Width page
And so on

2. 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:

Regular (Standard) Posts
Aside Posts (without a title visible on the Blog archive Page)
Image Posts
Video Posts
Quotation Posts
Link Posts
Gallery Posts
Status Update Posts
Audio Posts
Chat Posts

3. 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

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:

You can Drag-&-Drop media from your Desktop directly into the Post editor window to upload files.
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!

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:

Theme Choice
Theme Customizer (pretty)
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:

WHY? (2 parts)
1. Why an LMS?
2. Why WordPress?
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?
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:

Communicate objects (syllabus, course objectives, handouts, etc)
Learning timelines (class schedule)
Delivery of materials (drip content)
Assessment & Tracking of student data
Communication with students
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:

Basic: Understand web authoring terminology, how to use templates, and district policies on copyright, ethics, privacy, and security
Intermediate: Identify, prepare, create, and upload materials to a web publishing platform
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?

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:

Price
Power
Flexibility
Simplicity
Support
Reliability

1: Price

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

2: Power

There are over:

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:

WordPress.com that serves up over 500 million sites using only ONE code base
Best Buy which uses ONE base installation to power their 1000s of store sites
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.

2014 was the first year that non-English downloads surpassed English downloads
There are 17 posts published EVERY SECOND on WordPress.com
Many of the major corporate, political, and tech brands use WordPress
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:

Dreamhost (*affiliate) – get 2 months FREE hosting with the code: WPMUJJ
Bluehost
Host Gator
GoDaddy
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:

Traditional
Flipped (Blended) classrooom
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:

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:

Level of Instruction: prepare a SINGLE course (at least a first)
Time (Schedule): allow a modified time schedule for students to access the site
Role of Online Components: enhanced
Teacher role: Teacher supports
Student role: Teacher-guided learning
Student support: School mentoring
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:

Go paperless
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:

WORDPRESS.COM

Is a hosting SERVICE where you can get a FREE site and username at their domain (http://yourname.wordpress.com)
Is limited in freedoms, but provides paid upgrades and is still a viable option for class websites

WORDPRESS.ORG

Hosts the (downloadable) SOFTWARE and all documentation, but you are required to find your own self-hosting solution (http://www.yourname.com)
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:

Dreamhost (*affiliate) – get 2 months FREE hosting with the code: WPMUJJ
Bluehost
Host Gator
GoDaddy
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:

Communicate objects (syllabus, course objectives, handouts, etc)
Learning timelines (class schedule)
Delivery of materials (drip content)
Assessment & Tracking of student data
Communication with students
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:

Pages
Posts
Categories
Tags
Media

1. Pages

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:

Home page
Landing page
Contact page
Clients page
About page
Full-Width page
And so on

2. 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:

Regular (Standard) Posts
Aside Posts (without a title visible on the Blog archive Page)
Image Posts
Video Posts
Quotation Posts
Link Posts
Gallery Posts
Status Update Posts
Audio Posts
Chat Posts

3. Categories

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

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:

You can Drag-&-Drop media from your Desktop directly into the Post editor window to upload files.
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!

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

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: