Setting up a domain and hosting

We use Reclaim Hosting for domain registration and hosting in this class. To get started, head on over to ReclaimHosting.com.

Reclaim Hosting home screen

Click the blue “Sign Up” button to head to this page:

Reclaim Hosting plan selection page

Here, click select the $30/year “Students & Individuals” plan. On the next screen, enter your preferred domain name.

Reclaim Hosting domain name selection page

On the following screen, be sure to check the box to enable ID Protect:

Reclaim Hosting ID Protect screen

On the checkout screen, try discount code sniderclass to save 10%:

Reclaim Hosting checkout screen

After completing checkout, you’ll receive several emails from Reclaim Hosting. One of the emails will include a verification link. Be sure to click it to confirm your email address and activate your account. Another will look like this and includes your cPanel & SFTP Login Credentials

Reclaim Hosting welcome email with credentials

You’ll need these for our next steps, so keep them handy.

After clicking the verification link, head to your cPanel. To get there, head back to ReclaimHosting.com and click “Client Area Login” in the top-right corner, or just click here.

If prompted, enter the email address and password you used when signing up with Reclaim Hosting 1 to get to this screen:

 

This page is where you manage information about your Reclaim Hosting account (like billing details, etc.) and where you access other tools. In the navbar on this page, click the third link labeled “cPanel”:

Reclaim Hosting Client Area

You’ll then arrive at your cPanel, which looks like this:

Reclaim Hosting cPanel

Click on the icon that looks like a truck labeled “FTP Accounts” to arrive at this page:

FTP Accounts page

Scroll down to the section labeled “Special FTP Accounts” and click the blue “Configure FTP Client” link next to the account without the _logs suffix to see this view:

Configure FTP Client options

Now’s a good moment to remind you to configure Chrome to download files directly to your desktop 2. To do so, either click “Chrome > Preferences” in the menu bar or hit ⌘ + , to get to this screen:

Chrome preferences screen

Scroll down to the very bottom and click advanced to reveal more options. Scroll until you see the Downloads section:

Chrome preferences download section

and click the “Change” button in the “Location” section and select your desktop. Now that that’s done, let’s return here:

Configure FTP Client options

And click the gray “SFTP Configuration File” underneath Cyberduck. That’ll download a file delightfully suffixed “.duck” to your desktop:

Double-click that file to launch Cyberduck. If a panel pops up asking if you want to make Cyberduck your default FTP client, select “Make Default.” If you’re prompted to download a new version, close that prompt for now. You’ll then be presented with a prompt that looks like this:

Unknown fingerprint dialog

Check the box for “Always” and then click Allow. You’ll then be prompted for your password on a screen that looks like this:

Cyberduck password prompt

Enter the cPanel / SFTP password you received via email from Reclaim Hosting here (copying and pasting is likely best) and be sure that “Add to Keychain” is checked before clicking Login. After successfully completing this process, you’ll be taken to this screen:

Cyberduck browser

Double-click on the “public_html” folder and then click on the Bookmark icon (second from the left in the icons in the top left corner underneath “Open Connection”) to see a screen like this:

Cyberduck bookmarks screen

Click the “+” icon in the bottom-left corner to open another window like this:

Cyberduck bookmark details screen

In the new window, the only thing you’ll likely want to change is the Nickname—just choose something clear and descriptive, like your URL or your name. Then, close the window where you updated your nickname to be left with a screen like this:

Cyberduck bookmarks screen with bookmark added

Now, to access your site via FTP, you’ll just need to double-click that bookmark! Be sure to repeat this process on your personal laptop as well so that you can access your server outside of the NMI lab.

 


  1. Not your cPanel / SFTP information from the email

  2. Why? Because 1) Your desktop is super-easy to access 2) It’s visible so you should at least be mildly incentivized to keep it clean unlike… 3) Your downloads folder, which inevitably becomes a hot mess of random files because it’s mostly out of sight

Setting up your Mac

Even if you’ve been using a Mac for a while, chances are you can learn to use it more effectively and efficiently1.

Initial Set-up

  • Enable right-click– You’ll work somuch more quickly with this enabled. Go to: System Preferences > Mouse / Trackpad > Secondary Click.
  • Set up Hot Corners– This is one of the biggies for taking advantage of all the drag and drop niceties the Mac offers. Go to: System Preferences > Mission Control > Hot Corners. I set the bottom-left corner to Mission Control and the bottom-right corner to Desktop.
  • Just for fun, while you’re still in System Preferences, go to Accessibility, then choose “Zoom” and check the box next to “Use scroll gesture with modifier keys to zoom.” Once checked, you can hold down Control and then scroll your mouse wheel / swipe on your trackpad to zoom in and out on the screen. In addition to being kind of fun 2, this ends up being more useful than you might expect.
  • Set up DropBox– If you already have an account, add it to your classroom computer. If not, create an account here.
  • Set up Finder as God intended– Your Finder window should look like this:Screenshot of properly configured finderYou should also, for this class, click ⌘ + ,and set “New Finder windows show…” to Dropbox.
  • Set you Dock to the left by placing your cursor over the thin black divider bar between your app icons and the trash can, right clicking, and choosing “Position on screen > Left”. Then, shrink your dock down a bit by keeping your cursor over that thin black divider bar, clicking, and dragging.
  • Next, remove (either by right-clicking or, more satisfyingly, by clicking and dragging toward the middle of your screen until a dust cloud appears) any applications you won’t be using every day.
  • Finally, open Brackets and Cyberduck. Once each application is open, right-click on its icon in the Dock and choose “Options > Keep in Dock.”
  • One last thing in Cyberduck: open Preferences, select Editor, click where it says “TextEdit”, choose “Other” and select Brackets. Then, make sure you check the box next to “Always use this application.”

Keyboard Shortcuts

You must must must must must learn to use keyboard shortcuts to use a computer at all efficiently. You’ll have to force yourself to do this at first, but once you learn these, you’ll wonder how you lived without them.

System-level

  • ⌘ + C– Copy
  • ⌘ + V– Paste
  • ⌘ + X– Cut
  • ⌘ + S – Save
  • ⌘ + Q– Quit the current application
  • Shift (Hold down) + Arrow– Select text
  • ⌘ + Shift (Hold down both) + Arrow – Select text until end of line
  • ⌘ + Tab– Alternate between current and previous applications
  • ⌘ (Hold down) + Tab– Select among open all applications
  • ⌘ + ` (To the left of the 1 key)– Switch among open windows within an application
  • ⌘ + Space– Open Spotlight (Quickly find and open applications and files)
  • ⌘ + Option + Escape– Force Quit (Brings up a dialog that lets you force a frozen application to quit / restart)

Google Chrome

  • ⌘ + T– Create a new tab
  • ⌘ + R– Refresh the current tab
  • ⌘ + Shift + T– Reopen closed tabs
  • ⌘ + 1, ⌘ + 2, etc.– Switch to the

Keychain Access

Using Spotlight (⌘ + Space), open Keychain Access to securely view any passwords you’ve stored on your computer. Click the checkbox to “Show password” and then enter your user password (the one you use to log on to the computer) to display the password.


  1. Heck, even I can still learn to use a Mac more effectively and efficiently

  2. Enhance!

Course software

We’ll use the following tools, all of them free and cross-platform, in this course. Be sure they’re installed on your personal computer in addition to the class

Browser

  • Google Chrome– I actually prefer Safari for my day-to-day browser, but for web development, Chrome is tops. Make sure it’s your default, at least on your lab computer.

Text Editor

  • Brackets– A great open source text editor from Adobe (weird, I know). Most relevantly for this class, includes syntax highlighting and good preview tools, but a lot of other nice stuff, too.

FTP

  • Cyberduck– Weirdly, you pay for this tool in the Mac App Store, but you can still download it for free straight from their website.

File Sync

  • Dropbox – There are other file syncing services out there, and if you’re comfortable / already invested in one of them, go for it. Otherwise, Dropbox really is pretty great.

Getting started with Free Code Camp

  • Create an account on FreeCodeCamp.org
  • Create an account at GitHub.com (the free plan is perfect)
  • Back at FreeCodeCamp.org, click on your profile (top right corner) and
    • Link your GitHub profile to FreeCodeCamp by pasting in the URL of your GitHub profile page
    • On the Settings page, make the following public:
      • Profile
      • My points
      • My heat map
      • My certifications
      • My timeline

Syllabus

Stack of papers
Photo by John-Mark Kuznietsov.

Quick links

NMIX 4110: New Media Production
Spring 2019

Instructor: John Weatherford

Class times: MWF 9:05-9:55am; 10:10-11:00am; 12:20-1:10pm

Location: Journalism 401

Contact: 403G Journalism / johnweatherford@uga.edu

Office Hours: MWF 11am-12pm, TR 2-3:30pm, and by appointment

Instructor:  Jennifer Malson

Class time: MWF 11:15am-12:05pm

Location: Journalism 401

Contact: 410 Journalism / jennifer.malson@uga.edu

Office Hours: MW 1:30-2:30pm and by appointment

Prerequisites

Students must either have completed or be concurrently enrolled in NMIX 2020. Students must also have applied to the New Media Institute. Class is offered by POD only.

Objectives

The goal of this course is to provide a solid foundation of technical skills that you can build upon for the rest of your career. Students in this class learn how to design and develop web sites that function effectively with multiple platforms (desktop, mobile, etc.) and are introduced to coding with JavaScript. Assignments support the development of a portfolio to showcase the skills acquired in this class to future colleagues and employers.

Instructor philosophy

More than being here to help you learn the subject material, I’m here to help you learn how to learn. I think the things we’re talking about in class are incredibly cool, exciting, and worthy of your time, thought, and energy. Hopefully, when you finish the class, you’ll have developed a really solid working knowledge of the field and know where and how to further your own knowledge and expertise. We’re going to have a lot of fun, but I also expect you to work hard. Work hard at the assignments, sure, but more than that, work hard at understanding the stuff we’re talking about, why it matters, and what you can do with it—that’s what really matters.

Texts and tools

All required course materials are available at newmediaproduction.mynmi.net.

You’ll also need $30 to purchase a domain name and hosting at Reclaim Hosting.

Finally, you’ll need to create an account at Free Code Camp and GitHub.

(eLC will be used as minimally as possible, only to report grades for assignments.)

Attendance and participation

As you will with much in life, you will get out of this class what you put into it. You’re expected to come to class regularly. Life, however, is full, and conflicts, illnesses, and extraordinary opportunities may arise. Therefore, you may miss up to five classes without any direct penalty; I make no distinction between excused and unexcused absences.

Because missing class affects your ability to be an effective member of our learning community, if you miss more than five classes before the midpoint, you will be dropped from the class. If you accrue more than five absences after the midpoint, your final grade will be reduced by two points for each day of class you miss past the fifth absence.

Make-up work

You are expected to complete and turn in your work by the due date, and late work is accepted only at the discretion of the instructor. If late work is accepted, the minimumpenalty for the first assignment you turn in late is 10% of its total value per day late (ex: 10-point exam turned in two days late will be penalized a minimum of 2 points). After your first late assignment, each subsequent late assignment will be penalized a minimumof 20% of its total value per day (ex: 10-point exam turned in two days late will be penalized a minimum of 4 points).

NMI social media policies

All NMI students are strongly encouraged to follow our social media policies. You must complete the steps required by these policies during the first week of class:

If you have any concerns or hesitations about any of these social media assignments, please contact me—alternative arrangements can be made. (Also, for your reference: here are the privacy policies for eLCTwitterFacebook, and LinkedIn, and here are the accessibility policies for eLCTwitter, Facebook, and LinkedIn.)

Student success resources

Student services

Students at the University of Georgia have access to a wide variety of services to help them succeed. Click here to view a description of services along with links and contact information if you wish to learn more about these topics.

Access policy

If you have a disability and require accommodations, please see me after class or make an appointment during office hours. If you plan to request accommodations for a disability, visit the Disability Resource Center website or call 706-542-8719.

Emergency preparedness

Verify that your emergency contact information is correct at ugaalert.uga.edu and add 706-542-0111 as “UGAAlert” in your contacts. We will discuss emergency exit routes the first day of class.

  • If the fire alarm sounds, we will evacuate the building and reassemble outside of the Journalism building on Sanford Drive to make sure that everyone exited safely. Quickly move away from the entrances so as not to hinder first responders.
  • If there is a tornado warning, we will move to the first floor and account for everyone.
  • In the event of a medical emergency, I will ask one of you to meet EMS responders and bring them to our classroom.

If you have concerns about other emergencies or if you have special circumstances that I need to know about in case of an emergency, please speak to us after class.

Counseling and psychiatric services (CAPS)

College can. be stressful. Life has difficult stretches. If you need help, get it. CAPS provides short-term individual counseling, group counseling, couples counseling, crisis intervention, psychiatric evaluation and medication monitoring, psychological testing, and makes referrals to campus and community resources when appropriate.

Service animals in class

Students who train or use service animals should be aware of UGA policy.  More info is available here.

Non-discrimination policy

I do not engage in or tolerate discrimination or harassment on the basis of race/ethnicity, religion, national origin, sex/gender, sexual orientation, age, physical or mental disability, or veteran status. In addition, I do not discriminate on the basis of class, income, or political views. If there is something I can do to make the class more hospitable, please let me know.

Office Hours

In addition to the times posted at the top of the syllabus, I’ll frequently (though not always!) be in my office during regular business hours. You’re welcome to come by and see me with any questions, concerns, or just to say hi. I work with my door closed, but you’re always welcome to come in! The best way to meet with me is to make an appointment via email.

Email

Please save all but the most urgent of questions for class. I do check email fairly regularly, so there’s a chance (but not a guarantee) that I might respond to emails in the evening during the week or during the weekend. Please write all emails up to professional standards (we’ll discuss this in class). Try to solve all problems on your own (Googling, asking classmates, etc.) before contacting me.

Academic Honesty

As a University of Georgia Student, you have agreed to abide by the University’s academic honesty policy, “A Culture of Honesty”, and the Student Honor Code.  All academic work must meet the standards described in “A Culture of Honesty” found at  honesty.uga.edu. Lack of knowledge of the academic honesty policy is not a reasonable explanation for a violation.

Read the entire policy online, but the short story is: don’t cheat—the punishments for violations of the Academic Honesty Policy are severe. You are expected to do your own work and to report individuals who do not do their own work. Because this is an online class, you may find the temptation to cheat (cheating includes unauthorized sharing of class materials, using unauthorized sources during assessments, and more—seriously, read thisnow to get a full sense of what all constitutes academic dishonesty) even greater than usual. Resist that temptation. Questions related to course assignments and the academic honesty policy should be directed to the instructor.

Changes to Course Syllabus

The course syllabus is a general plan; deviations announced to the class by the instructor may be necessary.

Topical Outline

Hello world

  • Creating accounts at Free Code Camp and GitHub
  • Configuring your lab Mac, your personal computer, and online services
  • Registering for hosting with Reclaim Hosting

HTML & CSS

  • What is new media?
  • How we got to now, Part I: Communication and early media
  • How we got to now, Part II: Telecommunication and mass media

Bootstrap

  • Details coming soon!

WordPress

  • Details coming soon!

JavaScript

  • Details coming soon!

Assignments (100 points total)

Free Code Camp (FCC) assignments (25 points)

Completed throughout the semester, these assignments form the foundation of our technical learning. (Assignment page)

Project One: Artisanal hand-crafted small-batch locally-sourced bespoke website (10 points)

You’ll lovingly craft your first site by hand using the HTML & CSS skills you’ve learned so far. (Project page)

Project Two: Bootstrap triptych (10 points)

You’ll take three separate passes at the same page to gain a deeper understanding of how to leverage Bootstrap to create beautiful responsive websites. (Project page)

Project Three: WordPress variety pack (10 points)

Create four separate installs of WordPress to explore the wide variety of sites you can make with the powerful, popular CMS. (Project page)

Project Four: JavaScript algorithm challenges (10 points)

Test your newly-acquired programming skills by tackling these challenging algorithm assignments. (Project page)

NMI portfolio (10 points)

Create your NMI portfolio and build its first page—the one for this class! (Assignment page)

Final project (25 points)

Choose from a menu of ambitious projects—or propose your own!—to show off all the skills you’ve gained in this class. (Project page)

Summary

Free Code Camp assignments 25
Project One: Artisanal hand-crafted small-batch locally-sourced bespoke website 10
Project Two: Bootstrap triptych 10
Project Three: WordPress variety pack 10
Project Four: JavaScript algorithm challenges 10
NMI portfolio 10
Final project 25
Total 100

Grading scale

95-100 A
90-94.99 A-
87-89.99 B+
83-86.99 B
80-82.99 B-
77-79.99 C+
73-76.99 C
70-72.99 C-
60-69.99 D
59.99 and below F

Schedule

Date Topic Major Assignments + Dates Homework
1/9 Wed. Syllabus overview; getting to know you First day of class Create Free Code Camp (FCC) account; bring charged laptop to class; remember interview partner’s info
1.11 Fri. Getting to know you wrap-up; computer and account set-up   On your laptop, install the course software and set up your Mac 1; FCC-1
1/14 Mon. HTML day one Drop / add deadline Think about the domain name you’d like to register; FCC-2
1/16 Wed. HTML day two   Configure Cyberduck on your laptop; FCC-3
1/18 Fri. CSS day one   Begin work on Project One; FCC-4
1/23 Wed. CSS day two   Complete form in class; FCC-5
1/25 Fri. CSS day three   FCC-6
1/28 Mon. Applied visual design day one   FCC-7
1/30 Wed. Applied visual design day two   FCC-8
2/1 Fri. Applied visual design day three   FCC-9
2/4 Mon. Applied accessibility day one   FCC-10
2/6 Wed. Applied accessibility day two   FCC-11
2/8 Fri. Responsive web design principles   FCC-12
2/11 Mon. CSS Flexbox day one Project One due FCC-13
2/13 Wed. CSS Flexbox day two   FCC-14
2/15 Fri. Bootstrap day one   FCC-15
2/18 Mon. Bootstrap day two   FCC-16
2/20 Wed. Bootstrap day three    
2/22 Fri. Work day    
2/25 Mon. Work day    
2/27 Wed. WordPress day one   Project Two – Panel One deadline
3/1 Fri. WordPress day two Midpoint of semester Project Two – Panel Two deadline
3/4 Mon. WordPress day three    
3/6 Wed. Work day    
3/8 Fri. Work day Project Two due Project Two – Panel Three deadline
3/18 Mon. Work day    
3/20 Wed. Work day Project Three due FCC-17
3/22 Fri. JavaScript day one Withdrawal deadline FCC-18
3/25 Mon. JavaScript day two   FCC-19
3/27 Wed. JavaScript day three   FCC-20
3/29 Fri. JavaScript day four   FCC-21
4/1 Mon. JavaScript day five   FCC-22
4/3 Wed. JavaScript day six    
4/5 Fri. Work day    
4/8 Mon. Work day    
4/10 Wed. Final project proposal presentations Final Project Proposal due  
4/12 Fri. Work day    
4/15 Mon. Work day Project Four due  
4/17 Wed. Work day    
4/19 Fri. Work day    
4/22 Mon. Portfolio rough draft presentations Portfolio rough draft due  
4/24 Wed. Work day    
4/26 Fri. Work day    
4/29 Mon. Work day    
       
 
  • 9:05: Wed. 5/8, 8-11am
  • 10:10: Fri. 5/3, 8-11am
  • 11:15: Mon. 5/6, 12-3pm
  • 12:20: Wed. 5/8, 12-3pm
   


  1. If you have one 😊

Welcome

Welcome to NMIX 4110: New Media Production!

This course will provide a solid foundation of technical skills that you can build upon for the rest of your career. Students in this class learn how to design and develop web sites that function effectively with multiple platforms (desktop, mobile, etc.) and are introduced to coding with JavaScript.

Get started by checking out the syllabus!