You May Wobble, But You Won't Fall Down

In this post I want to walk you through the basic process of using the site where I'm asking you to create your final projects: Weebly.

Some of you may already be familiar with Weebly.  Many instructors use it for class projects--as well as for creating their own sites--for one major reason: Weebly is really easy to use.  While D2L does have a web site creation tool, D2L is not very user-friendly, and even relatively experienced web-page creators can find it frustrating.  Among my students, past and present, who have used Weebly, virtually all find it simple, user-friendly, and an excellent tool for those who are both experienced in creating web sites, and those who have never done that before.

You can find Weebly at http://www.weebly.com

Below I've put together a series of screen shots, as well as a couple of short videos (the videos are flash files), in which I try to walk you through the basic functionality of Weebly.  I don't cover everything; Weebly has its own tutorials, which are perfectly fine for guiding you through its various functions.  What I offer is more of an introduction.

So without further ado, let me introduce you to Weebly.

First, you'll need to create an account.  That will be free.  You can upgrade to a paid account, but for this project that will not be necessary.  Once you've created an account you'll then be prompted to create your site.

















Here let me add one of the short videos I made, in which I show you the drag-and-drop functions of Weebly.  I also talk about those functions in subsequent screenshots, but you may also benefit by actually seeing how it works.

 Basic Drag-and-Drop in Weebly













Here is another short video.  In this one I show you the process of moving content around to create columns, side-by-side images, side-by-side text, etc.  I've also provided screenshots of the process.

Moving Content in Weebly

























The following image describes an important task I want you to do when you create your sites.  Before you do anything else, I want you to create a Blog page for your site.

Creating a Little Elbow Room

Oh, give me land, lots of land
Under starry skies above. 
Don't fence me in.
                --Cole Porter

Depending upon the images you use for your final project, you may run into a problem that won't affect your content, but can affect the appearance and readability of your site.

Shark and Remora Buddy.

Many images don't have margins around them.  Consequently, if you insert the image into your text that does not have a margin, and have the text wrap around the image, what you'll see is that your text will cling to the edge of that image like a remora clinging to a shark (see example below).  D2L does not automatically place a buffer between the image and the text (as Blogger does, as you can see to your left).  Now, you may not run into this issue if your images already have margins.  (You'll be able to tell if an image has a margin if you see some space between the edge of the image and the text.)  And as I mentioned before, this is not necessarily going to affect your content, but it is visually jarring. 




There is, however, a way to rectify the situation.  Below you'll see a series of screenshots I composed that show you step-by-step how to create spacing between your images and your text.

 

I Chunk, You Chunk, We All Chunk, Part 2

Let's Recap

In Part 1 of this post, I had explained that reading text online is a different experience from reading text in conventional print format, such as we might see in a book, magazine or traditional term paper.  Online, readers typically scan text rather than read it, and their eyes move in an F-pattern rather than the more familiar Z- or Zigzag-Pattern.   

Z-Pattern

This leads us to two key points for anyone (in this case, you) about composing online:

F-Pattern

• Presenting readers with large, plain blocks of text is a good way to make sure that readers won't read what you write.
• In order to better the chance (not guarantee) that readers will read what you write online, you need to compose text that accommodates the way people read online.

Don't Choke On It 

Let me begin with an analogy.  If someone were to give you a doughnut, you likely won't cram the whole thing into your mouth all at once.  You likely would break or bite off a piece, chew it, then break or bite off another piece, etc.  Similarly, if someone were to place a 3-pound pot roast on the dinner table in front of you, I expect that you would not stab the roast with a fork and shove the entire thing into your mouth.  You would likely slice it into smaller pieces, place a few pieces on your plate, and slice them into even smaller pieces.  (Some of you may remember the Seinfeld episode in which the character George Costanza uses a knife and fork to slice a Snickers Bar--same principle as the two examples I mention above.)

We can use another term to describe what you've done with your food: Chunking.

George Chunking His Snickers Bar

Chunking Explained

In online composition, "chunking" refers to the act of breaking large blocks of text into smaller pieces of text--"chunks."  The amount of text isn't reduced;  the text is simply presented to the reader in multiple, smaller units, rather than a few very large units.  

Chunking is a technique for accommodating the way readers read when they read online text.  By presenting text in smaller units, one "tricks" the eye and brain into thinking that there isn't a whole lot to read, and so betters the chances that readers will, in fact, read all of the words.  (As I mentioned in Part 1, readers will read complete text online--if that text is presented in a way that is not visually overwhelming.)  Chunking also helps readers retain what they read online better.  Ideally a "chunk" is a sharply focused unit of information--one chunk equals one idea.

Chunking Is a Visual Act

Chunking does not alter the basics of good writing.  What you have learned over the years about what constitutes good writing, what has been true about good writing for centuries--logical progression of ideas, clear and detailed explanations, analysis that goes below the surface, a main focus, accounting for readership, solid research, good grammar, punctuation and syntax--still holds true in online composition.  So you do not need to re-learn how to write when writing online and chunking information.

What you do have to think about , however, is how to visually present that information online.  Actually, like the concept of chunking itself, this is pretty simple:

• Use short paragraphs.  Online, even one-sentence paragraphs can be acceptable.
• Use line-skips between paragraphs.  The white space between paragraphs helps emphasize the idea that there isn't an overwhelming amount of text to read.
• Use section headings (and when appropriate, subheadings) to label sections of your text.  Good headings help readers know what to expect in a section, and that encourages them to read.  Headings also provide breaks in text.  Headings also help readers who scan find the information they need, and encourages them to return and read sections they may initially skip.
• Use visuals to provide visual relief.  Visuals should be relevant to the content, and when used well will help enhance the content.  But they also can provide visual relief to the reader, and again help emphasize the idea that there isn't an overwhelming amount of text to read.   Use captions for your visuals when appropriate.
• Use hyperlinks to help readers navigate to external sites.  Don't just provide the URL; make sure the URL is live.
• Use hyperlinks to help readers navigate internally--through your site or even through a page.  For example, if you are at the bottom of your page, instead of making readers scroll back to the top (readers typically don't like to scroll) add a "Back to Top" internal hyperlink.

Everyday Chunking Just as you commonly use visuals to represent text, so too are you familiar with chunking in your daily life.  For example, what’s the difference between: 123947762 and 123-94-7762 They represent a social security number (not a real number), except that one is rendered as a single block of numerals, while the other is chunked into three smaller units.  Similarly, what’s the difference between: 8145557762 and (814) 555-7762 Again, they both represent the same phone number, except one is a single block of numerals, while the other is chunked into three smaller units. This chunking is not accidental.  Chunking helps our brains better retain information.  We likely know our social security numbers, perhaps dozens of phone numbers, bank account numbers, credit card numbers, etc.  How in the world can we remember all of those numbers, especially since the numbers are widely varied and often pretty random?  Chunking the numbers is what helps us to remember. There is even a sonic pattern to chunking.  If someone asks you for your phone number, for example, think about how you say the number.  Likely you don't just recite seven numbers without pause; likely you break the numbers into sound bites: pum-pum-pum ... pum-pum ... pum-pum.

Chunking in Action

You may have noticed that in this post and in Part 1 I made a conscious effort to chunk information.  The actions I describe in the bullet points above are actions I tried to incorporate here.

However, below you'll find illustrations of student-created sites that display the principles of chunking.  The first two images are from examples of research into early American documentary photographs (a slightly different assignment from the one I'm asking you to do).  In these examples the writers were researching a photographer/writer named Jacob Riis.

Image 1

Riis Chunked

Image 2

Riis Chunked Again

_______________________________________________


Next is a student-created page that uses more visuals, and chunks the text.  The page is not perfect, but overall it's a good page in both content and how it chunks information.  Also note that the following example was created using Weebly.

A Chunked Narrative History

Call

Send SMS

Add to Skype

You'll need Skype CreditFree via Skype

I Chunk, You Chunk, We All Chunk, Part 1

People read differently online.  They jump around and read short amounts....  We needed to label and organize information into logical groupings....
                                                                      --Annika Tamura, Design Director, Boston.com

(WARNING!  This post contains material that may seem to have no practical purpose, and perhaps indicates that the writer needs a vacation.  While all that may be true, the purpose of this post is to provide a foundation for the next post, which will contain material more practical for your final project.)

What You Get Is What You See

In recent years teachers and colleges (including this one) have been placing more and more emphasis on something we call Visual Literacy.  In a nutshell, what we mean by Visual Literacy is the ability to process traditional textual information (i.e., words and numbers) into visual form.  It's like a more complex version of the "If you could be any animal in the world, what animal would you be" icebreaker: instead of using words to describe abstract personal qualities, you use a visual (the animal) to represent those qualities.

Many instructors have scrapped the traditional term paper in favor of having students produce what's called an Infographic as the final project.  The students still do research, and quite rigorous research; however, they present their findings in a visual/textual form, rather than strictly textual.

As an example, a fairly common topic for college research writing these days is childhood obesity.  In the olden days (5 years ago or so) the student would have researched the topic, written a standard double-spaced essay, turned it in and more likely than not, completely forgot everything he/she researched.  But what happens if the student, instead of simply rehashing what someone else has said, has to actively and critically think about how to present that information?  Well, you can see the result below--a research project on childhood obesity that was submitted, not as yet another mind-numbing essay, but as an Infographic; that is, information presented in graphic form:

 Infographic on Childhood Obesity

Note that in this infographic text doesn't go away.  However, text does have to share space with visuals, and both have to learn to play well together.

Think you could never do a visual representation of text?  You probably already do.  The next time you end a sentence with :) or :[, or at the end of a message to a loved one type @)---,  take a second and realize that what you have just texted is a visual representation of a phrase or word.

Life Was So Much Easier in Black and White

So is all this happening because teachers have finally discovered the Insert Image tool in Microsoft Word?  No.  There are a number of reasons why, most of which really don't concern us.  One major reason, however, is simple: we have become a visual culture (or at least a more visual culture).  Whether we approve of that or not is irrelevant.  The fact is, the ability to communicate successfully with visuals has become an essential college skill, and more importantly, an essential workplace skill.

Again let me point out what I mention above: text isn't going away, nor will it go away.  People will not gradually stop knowing how to read, nor will people gradually stop knowing how to write.  This is not about visuals replacing text; this is about visuals and text complementing and supporting each other to create, ideally, a more dynamic learning experience.

A Good Reason Why Maybe Paper Should Go Away

The Three Mantras for Your Final Projects

While I'd like to say that repeating these mantras will make your task absurdly easy, it won't.  I can say, however, that they can help you stay focused on the fact that your final project is both textual and visual.

1. You're creating a web page.  "Web page," of course, can sound intimidating, because building them historically (if I can use that term to refer to a process that hasn't been around that long) required a High Techno-Geek Factor.  It also doesn't help that likely all of us spend a significant amount of time navigating to professionally-developed web sites with a lot of Wow to them. 
2. Web sites are highly visual.  That is, while they do contain content and text as we typically understand them, they also contain a heck of a lot of pictures and graphics and boxes and animation.  It's probably virtually impossible now to find a web site that does not have high visual content.  Some sites, such as Pinterest, present you with pretty much nothing but visuals at first, and you have to access the content through the visuals.  Think of the sites you visit frequently--how many do not have visuals?  My bet would be on none.
3. When you compose online, you need to think about both the information that you present and how you're going to present it.  While the content of a page (including yours) is the most important factor, no matter how good the content is, it's useless if no one actually reads it.  And in order to get someone to read an online document, one needs to think about how to incorporate visuals into the text, and how to arrange and present the text in a visually-attractive manner.  (What we call reader-friendly.)  

The good news is this: creating a web page that is visually attractive and reader-friendly is simple, and requires little to no technical skills beyond what you already have.  

But before I get into the practical stuff, let's first understand how people read when they read online.  That, I think, will make it easier to understand the rationale of what I will talk about in the next post.

© Despair.com

In An Online World, Most of Us Get Fs

My guess would be that few, if any, have ever thought about how different the online reading experience is (and consequently, how different the online writing experience is, beyond the technical stuff).

The simplest way to explain how people read online is to say that online readers don't read--they scan.  They look for bits of information that interest them or are relevant to their needs, and ignore that which isn't.  A study done in 2008 showed that up to 80% of those who read online scan rather than read, and spend between 25 - 80 seconds on a page (Jakob Nielsen's Alertbox, "How Little Do Users Read?")

Neuroscientists using eye-tracking devices have tracked how our eyes move when we read a standard print text as compared to reading text on a web page, and found a significant difference.  When we read a book, magazine or newspaper sitting in our laps, we (at least in Western cultures) read in a classic Z or Zigzag pattern, like so:

 

Zigzag Reading Pattern

We start left, move across the line to the right margin, snap back to the left, move across the line to the right margin, rinse, repeat.

Those who read online, however, follow a very different pattern.  (Note that this pattern refers to reading text online, and not to looking at images).  Eye-tracking devices indicate that when we read online, we follow an F pattern, like so:

 

 F-Reading Pattern

We again start left, move across the line to the right margin, snap back to the left ... then read only a portion of the line.  We snap back to the left ... then read an even smaller portion of the line, and so on and so forth until we're pretty much doing no reading as we get towards the bottom of the page.  We don't even necessarily read all the lines.  In other words, we're scanning rather than reading.

How Does This Matter When Composing a Web Page?

First, we know that when reading online, readers have little patience for conventional linear reading (the Z-pattern).  So the larger the block of text a reader confronts online, the more likely the reader will simply ignore most of the text.  Readers will read a longer document online--but not if the document is presented to them in large, visually-daunting blocks.

Second, online readers are scanning, which means they are looking for places for their eyes to settle.  Online writers need to use visual cues to tell readers "stop here and read this."  Again, readers will read long documents online--as long as writers provide cues for readers to stop.

That's enough for this post.  In the next post, I'll take these ideas and give them a practical purpose, specifically for your projects.  I will also show you a page that adopts these ideas for a project just like the one you're doing.  You'll see a page that you can use as a template for both the content of your own projects and the design of your own projects.

Stay tuned.  Stay chunky.

Moving Your Online Skills Up the Ladder

Composing a basic blog site is not much different from composing a paper using a word processing program.  What distinguishes a site from a paper are three fundamental abilities:

1. The ability to work collaboratively on a single document
2. The ability to create a more dynamic text by adding images, hyperlinks, video and audio
3. The ability to create a more visually interesting text 

In future posts I'll talk about an important way of thinking about composing a document online, as well as point you to examples of the kind of work I'm asking you to do for your final assignment.  For today, however, I just want to be practical.

In this post I want to focus on using the tools on your D2L blog sites to upload images, video and audio to your pages.  The process is actually pretty simple, though if you haven't used the tools on D2L it may not seem so.  I also want to give you a couple of tips to make your sites look more professional, or at least more polished.  Remember--you have readers, and a site that looks amateurish can cut into your credibility and discourage someone from reading.  Don't fret, though--creating a site that looks polished is also pretty simple.

I've put together a series of screen shots so you can see the process of uploading images, video and audio.  Also note that at the end of this post I will present you with a Short Writing Assignment, though in this case "writing" is a stretch.  It's a series of simple (I hope) exercises in using the D2L wiki.  Those of you that have already created wikis using D2L, or using another site (such as Wikispaces) likely won't find these exercises particularly challenging--and that's just fine.  The exercises, quite frankly, are geared towards those who have not done this sort of thing before and might be feeling a little techno-anxiety.

Uploading an Image

First, click on the Insert/Edit Image icon in your blog site page's editing tools:

 That will open the box you see below.

Uploading a Video

To upload a video, click on the Insert/Edit Embedded Media icon in the tools menu.  That will open up the box you see below:

Now to insert a video.  For our purposes, I'm using a YouTube video about the construction of the Empire State Building from 1930.

 Uploading an Audio File

Short Writing Task #5

Time to practice.  Below you'll find a series of tasks that I am asking you to do to gain a little experience with using the D2L wiki.

The following series of exercises are simply intended to give you a little experience working in a wiki environment. 

Go into the Content area of D2L and navigate to your blog site.  Open your site, and add a new page.  Once you’ve done that, you can then proceed to do the following tasks.

Using Images

1.       Insert three copies of the specific image you chose for Assignment #4 into your blog site page.  (Don't worry--you can always delete all of these images later.)

2.       Make the first copy smaller than the second, and the third copy larger than the second

3.       Use the internet to find three more images related to the image/work you chose for Assignment #4.  Insert all of those images into your site, and make them all roughly about the same size.  Make sure the aspect-ratio of the images are correct.

Inserting Video

Find and upload a video clip relevant to your photograph.  It can be a clip about the photographer (if known), or about the photograph, or about the context relevant to the photo.  Don't obsess over finding a "correct" video too much, since the primary goal here is make sure you understand the process.

       Please complete these tasks by Friday, April 18.  If you have problems with the task, you can simply post your questions or problems in the Discussion area for this post in Piazza.

Piazza