Pre-class assignment - On Your Own - Due by Friday 09-01-2017 at 4:05pm

Goal Assignment Grading Rubric
Video/Transcript: IMS222 00 – About Tutorials

(watch this video in a new tab or window)

Hi, I'm Kirk Hopkins and I wanted to let you know that I created most of the video tutorials used for this Week after a recent accident where I fell off a barn roof. I'm feeling much better now but I did have a concussion from the accident and as I edited the lessons I noticed that I looked a little confused and I had a little scratch on my nose but all the lessons are good and I'm feeling much better now, and I hope that you enjoy this Week. Thanks. Bye.

Video/Transcript: IMS222 01 - Intro to IMS222

(watch this video in a new tab or window)

Hi, I'm Kirk Hopkins. Welcome to IMS222. In this Week you'll learn how to make great looking, highly useable, web pages and web sites from scratch using a text editor. We'll cover HTML5, CSS3, and PHP. You're not expected to know any of this prior to the Week. We'll also cover some computer basics so that you can edit code quickly.

The Week will be done in a flipped Weekroom style, where content is provided primarily in video format for you to cover on your own. In Week we'll practice the learned content by creating a web page highlighting the new concept. We'll also discuss content from the videos as well as work on projects, projects, and help each other.

There are no quizzes or tests in my Week. As long as you do your work, come to Week, and participate, you should be fine. There is a lot of content to cover in a short amount of time so be ready to devote time to this Week.

I'm looking forward to seeing you in Week.

Video/Transcript: IMS222 Teach you to fish

(watch this video in a new tab or window)

In this class we'll learn great web design together.

I'll get you started on concepts but will not spoonfeed you every html tag or css element known to man.

We'll learn how to find code, because you just can't memorize everything.

And when things change in the future, you'll be able to figure things out on your own.

Why not start now?

I won't leave you hanging though.

My most important rule in computing is, "don't freak out"

The world won't end if you mess up your page. With good coding practice, by making one little change at a time, you won't have that problem anyway.

The 2nd most important rule is, "don't keep banging your head on a wall"

If you get stuck on something, take 5 or 10 minutes to try to figure it out, if you're still stuck, ask someone for help.

My 3rd favorite rule is, 'manage your time'.

Don't wait until the last minute to do your work. Do it early, so there won't be an emergency.

Video/Transcript: IMS222 02 - Setting up your web space using NetDisk (MyFiles)

(watch this video in a new tab or window)

Every student has web space at Miami. This tutorial will walk you through how to set up your web space.

From myMiami, access NetDisk (or go to https://www.netdisk.miamioh.edu) and log in with your Miami UniqueID and password.

From the Jump to drop-down box, choose MyFiles.

In the navigation pane on the left, choose Create Directory.

For the new directory name, type: public.www
(This directory name must be entered exactly as shown or published pages will not function.)

Click Create Directory. A public.www folder will be created and will appear on your Directory Listing.

Click the Share link located next to the newly created public.www folder.

In the UserId field type: udsweb

If you are in Basic view, select the checkboxes Read & Execute, List Folder Contents, and Read.

If you are in Advanced view, select Transverse/Execute File, List Folder/Read Data, Read Attributes, Read Extended Attributes, and Read Permissions. Under the Applies To drop-down menu, select This folder, subfolders, and files.

Click Apply.

Your MyFiles space is now ready to be used for publishing web pages on the Internet and can be accessed by visiting http://www.users.miamioh.edu/UniqueID. (Replace the italicized portion with your own UniqueID; for example, http://www.users.miamioh.edu/publicjq.)

Important Note: Some users have noticed that when following these instructions, they see only the Advanced permissions view, and not the Basic view. This is the normal function for NetDisk/MyFiles and should not be cause for concern. Permissions are set in the same way.

If you're off campus and you want to work with your Universal Disk Space (UDS) (also called "MyFiles") you will need to use a VPN client. You do not need to do this from on campus. You only need to watch this next video (and setup a VPN client) if you plan to work from off campus.

Video/Transcript: IMS222 - VPN for Off Campus Connections

(watch this video in a new tab or window)

So, VPN, what in the world is going on?

If you're connecting to Miami's servers from off campus you need a VPN client.

Miami has an Internet firewall that restricts the funtions that can be performed by computers that are NOT directly connected to Miami's network. VPN allows a computer connecting from off campus to behave as if it is on campus.

Pretty cool? Maybe. It's another step to go through. If you want to be able to access server stuff from off campus this is what you have to do.

It tells you in a knowledge base case on Ithelp that you have to navigate to https://muvpn.miamioh.edu and login with your Miami username and password. I already had VPN installed but I removed it so I could show you how to do it. We'll see if we can get it installed now.

Now, through the magic of video editing, we've downloaded it and installed it.

I'm going to go to my applications folder and click on Cisco AnyConnect. It needs to say muvpn.miamioh.edu, then enter in your username and password. (No peeking at my password) I am connected. That's it.

Video/Transcript: IMS222 03 - Editing code

(watch this video in a new tab or window)

The 2 most popular ways to edit code is to FTP the server or use WebDAV. With FTP, you keep the files on your local machine and copy them up to the server. This is a mostly archaic way of doing things in my opinion. With the FTP option, it can also get confusing as to what your editing vs what web page your viewing. Editing and testing PHP code is also a very slow process when using the FTP method.

We're going to use WebDAV in this Week. WebDAV stands for Web Distributed Authoring and Versioning. With WebDAV, you'll mount the server on your local machine. Accessing the folders and files will look just like other folders and files on your machine.

Not every web service offers the ability to use WebDAV, but I can tell you that if they don't offer it, I'm not going to use their service. BlueHost, one of the most popular web hosting companies (and one that I use) offers WebDAV.

Mounting your UDS on a Mac: click on the desktop (to bring Finder to the foreground)...Go...Connect to Server, then enter smb://it.muohio.edu/files/MyFiles/U/UNIQUEID where U is the first letter of your last name, and then your UniqueID. Mine is: smb://it.muohio.edu/files/MyFiles/H/HOPKINKS. Now you can use Finder to open and edit your web pages. Also note that while using muohio.edu still works, the university prefers that you use miamioh.edu now. Here's a tutorial on how do this for those of you who are more of a visual learner.

Video/Transcript: IMSS - Mounting UDS on your Mac

(watch this video in a new tab or window)

So it's time to edit web pages on the Miami server. I am off campus right now. I've connected using the Cisco VPN AnyConnect client. If you're on campus, you didn't have to do that, but if you're off campus, you do.

Now I want to mount the storage space on my Mac. Finder...Go...Connect to Server (command K). The server address is smb://it.muohio.edu/files/MyFiles/H/hopkinks/Public.www

H is the first letter of my last name and hopkinks is my UniqueID. Obviously you should use your information there, not mine. I have connection settings going to my Public.www folder; you should have already set your up using NetDisk.

Connect, wait for a moment, then you'll see everything in your public disk space on the Miami server.

I'm going to change a file so you can see that I'm doing it for real. I'm going to change my home page. I'll do a search for “easy” and will add a line above it with “test 123”. Save it, reload the page, and there it is. Now I'm going to undo it, save, reload, and it changed back.

That's the way I like to edit web pages on the Miami campus. You just mount the drive. If you need to copy stuff, open up the folder and drag the files right in. Cool. I hope you like it.

Install a color-coding text editor if you don't have one; suggestions...

All in all, what you want in this software is something that works for you and colors the code so you know if you're running astray. If any of you have done some of this stuff and want to share your favorite software with the Week.

NOTE: DO NOT USE DREAMWEAVER. Never use Dreamweaver until you know what you're doing; and by then you won't want to use it. It's garbage software that mucks up the code and will cause loads of problems for you later. Sure, you can probably use it and I won't notice, but trust me, it's nothing but trouble.

Video/Transcript: IMS222 04 - Create your first web page

(watch this video in a new tab or window)

Open your text editor, I'm using TextWrangler. Type “Hello World”. We'll save it to the desktop. File...Save As...(name it) “WebPage00.htm” (you may have to get rid of '.txt')...Save (to the desktop).

Connect to your Miami disk space.

Create an “IMS222” folder.

Copy the file over to the folder you just created.

Verify that you copied it correctly by viewing the page with a web browser.

It's also good to verify that your permissions are correct by having someone else (not logged in as you) go to the same webpage.

They should now be able to see your page.

  • Create https://www.users.miamioh.edu/UniqueID/IMS222/WebPage00.htm
  • Contact Kirk

    513.529.6700 | email | Email Form

    105 Harris Hall, Oxford, OH 45056

    My office (105 Harris Hall) is on the right side of the building as you walk in to Harris dining hall. I'm on the right as soon as you walk in the building.

    Find my office via Google maps

    Office Hours by appointment