Section 4: Develop

Develop

Unit 3, Section 4, Overview

Next Up…
Before moving on to the rest of the content head over to the Unit 3, Section 4, Discussion page to ponder a few questions.


Video Transcript
Hi I’m Dr. Anthony Chow, and welcome to Unit 3, Section 4: Develop. In this module, we’re going to use our tested design and develop it using WordPress. If you’re more comfortable using another web editor or platform, feel free to do that. But the steps we’re going to outline are using WordPress. I also wanted to give a big thank you to my usability research assistant, Joanna Cox, who helped me put together this module and did an excellent job. Are you ready? Let’s begin.

Let’s do a few things before beginning. First, let’s go to WordPress.com. You need to log in or register for a new account. First, let’s go to the WordPress homepage at WordPress.com and choose “Get Started.” I’m going to assume you do not already have an account. If you already do, go ahead and skip forward to the site creation part.

Before we begin, I just wanted to note that WordPress is both very user friendly and also does not spam you or really send you any emails or tries [sic] to contact you in any way. So by creating an account, you can rest assured that WordPress will not be hassling you in any way. They are also in no way associated with Varmuk. They are just a very easy-to-use and professional means for generating nice looking websites. WordPress is really designed as a blogging software, but many large organizations use it as a website creation tool, and the difference between a website and a blog is quickly becoming a nonissue. It’s highly functioning websites that allow for user feedback in areas for posting comments.

Now let’s go ahead and complete the account creation information. Fill in your email, username, password, and website address, which can be changed later, etc. One note about web addresses is to make it as memorable or related to the main topic or the purpose of your site as possible.

Now go ahead and choose “Create Blog” under “Free.” Now that you have created an account, please choose “Visit Your Dashboard.” Now, let’s choose “Appearance” and then “Themes.” Go ahead and choose the “Expound Theme” and choose “Activate.”

Note:  If this is no longer available, choose a similar theme for what we demonstrate to you in the next few minutes. Choose “Pages” and then add “New.” Fill in the title and body. To add an image, choose “Add Media.” For the sake of our exercise, we are adding an image, which you can choose to or not. Choose “Select File” under “Upload Files.”

Now let’s select an image from our computer and choose “Open.” The image you just uploaded will appear in Media Library. Choose “Insert Into Post.” The image is now inserted into the textbox. Choose “Text” in the top right of the toolbar.

Now, we need you to add the following HTML table codes to organize our quick links as well as our navigation. To emulate our site example, just copy and paste this code by going to the text space script below, copy it, and then paste it into your WordPress site. Insert the following HTML table and then choose “Update.” This is how the post appears on the website right now.

Now let’s create the actual pages that coincide with the navigation. Choose “Pages” and then add “New.” Give the page a title, in this case, “About Us.” And then fill in page as appropriate. To insert a hyperlink, just highlight text and select a link button from the toolbar like shown here. Copy and paste the appropriate URL and title information and choose “Add link.” Now, you have an active hyperlink which is viewable from the edit page screen. This is how your page appears on the website.

To create additional subpages, select “Pages” and add “New.” Again, fill in the subpage title and body and choose a parent page from the dropdown menu under “Parent.” This is how the subpage link appears in the navigation bar on the website.

Now, let’s organize our menu options. Choose “Appearance” and “Menus.” Title your navigation menu. Now select “View All” from the Pages tab and select “All” and “Add to Menu.” Check the box next to “Primary Menu.” Drag the boxes around your navigation elements to put them in the desired order. Move boxes left and right to create sub-navigation. Choose “Save Menu.”

Congrats, you now have a functional website. Please keep in mind that the content of a website is actually more time consuming than any other aspect of the website once you implement initial design. In our example, we’re now ready to share this with other people for their input.

Okay, now it’s time to post your new site for other’s comments and feedback. For this section, we do not have any review questions. Please remember to post your link into the discussion area, and do the hands-on activity, which is a quick review of someone else’s site. If you had trouble with this section, you could also just choose a generic template, create pages and navigation, given the theme you choose so that you have something ready to test in the next few modules.

Thanks for joining me, and I look forward to seeing you again soon. Cheers.



HTML Code to Create a Table

<table style="background-color: #ffffff;" width="100%" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr valign="top">
<td><strong>Quick Links<strong></strong></strong></td>
<td><strong>Current News</strong></td>
<td><strong>Calendar</strong></td>
</tr>
<tr>
<td valign="top">
<ul>
<li><a href="http://#">Admissions</a></li>
<li><a href="http://#">FAQ</a></li>
<li><a href="http://#">Courses</a></li>
<li><a href="http://#">Faculty Profiles</a></li>
<li><a href="http://#">Academic Calendar</a></li>
<li><a href="http://#">Registration</a></li>
<li><a href="http://#">Job Placement</a></li>
</ul>
</td>
<td valign="top">
<ul>
<li><a href="http://#">Faculty Member recipient of NSF Grant</a></li>
<li><a href="http://#">Alumnus wins ALA election</a></li>
<li><a href="http://#">Alumnus wins national award</a></li>
<li><a href="http://#">Faculty Member publishes journal article</a></li>
<li><a href="http://#">Students study abroad</a></li>
<li><a href="http://#">More News →</a></li>
</ul>
</td>
<td valign="top">
<ul>
<li><a href="http://#">Spring Registration Opens on October 5th</a></li>
<li><a href="http://#">Fall graduation on December 9 @ 10 a.m.</a></li>
<li><a href="http://#">Faculty Meeting</a></li>
<li><a href="http://#">iDEALs Summit</a></li>
<li><a href="http://#">ALISE 2014</a></li>
<li><a href="http://#">More Events →</a></li>
</ul>
</td>
</tr>
</tbody>
</table>