Course Information

• Subject: IMS
• Number: 222
• Title: Intro to Interaction Design
• Section: D
• CRN: 84098
• Campus: Oxford
• Credit Hours: 3
• Enrollment/Capacity: 20/21
• Delivery: Hybrid
• Meeting Schedule: F 2:50pm-4:10pm LWS 205 01/27 - 05/16
  
• Instructor: Hopkins, Kirk
• Grade Mode: Standard Letter Cross-list Sections: None
• Est. Fees: None
• Business Surcharge: None
• Attributes: Hybrid (Partially Online) (HYB); FND - MTH, Reasoning (V)
• Course Description: 222 Introduction to Interaction Design and Development (3) MPF This course is an opportunity to investigate interactive design and front-end development as it relates to a variety media types. Using industry standard tools, students will learn to design, implement, and refine interactive media for specific audiences. For the purpose of this class, interactive media includes a variety of software and hardware solutions that intersect the domain of human-computer interaction. Effective interactive design is often achieved by the creative application of sometimes disparate disciplines. Students should expect to incorporate their understanding of art theory, psychology, commercial business practice, and creative problem solving. V.
• Additional Notes: 60% online
• Prerequisites: None
• Restrictions: This section is ONLY open for the following major(s):
  -Games + Simulation, Games + Simulation, Interactive Media Studies, Software Engineering, Interactive Media Studies, Professional Writing, Interactive Media Studies, Digital Games Studies, Interactive Media Studies, Interactive Media Studies, Interactive Media Studies, Interactive Media Studies
• Miami's Course List

Contact Information

Contact Kirk via
• email form
• email
• Please indicate what part of the course material (i.e. what video) is unclear when asking questions
• Regular office hours, Friday 1:30pm-2:40pm in Laws 213D
• Other office hours by appointment in Laws 213D or in the IMS area of Laws

Materials Needed

• No book is required
• Laptop with internet connectivity
• Web space
  • BlueHost.com ($5.00 per month or less)
  • BlueHost is suggested but not required
• Text editor to edit your web pages
  • BBedit (Mac) - recommended
  • Notepad++ (Win) - recommended
  • TextMate (Mac)
  • Coda (Mac)
  • Diet Coda (iOS)
• Photo editor
  • Mac: I use Pixelmator ($30 in the Mac App store) and Affinity Photo ($50 in the Mac App store)
  • Mac/Win web-based photo editing: Fotor
• Smartphone or a digital camera to create your original pictures

Student Learning Outcomes for the Course

Objective - Learn Great Web Design & Market Yourself

By the end of the course you will have a website (that you created) to market yourself for future internships and jobs. We will primarily cover building web pages/sites using HTML5 and CSS3. You will also have the opportunity to learn a little javascript and PHP.

Course Policies

• Disrespect will not be tolerated. Treat each other well.
• Learning is fun, even when it’s hard. So is helping others, so help others.
• Do your work on time.
• Attend, participate, and be engaged in the class.
• Verify that assignments/projects are found/visible with the assignment viewer. If they are not, you will get a 0 on that assignment/project with no opportunity to improve the grade.
• Don't wait until the end of the semester to address grades, learning (and grading) occurs all semester; your final grade should not be a surprise.
• Don't ask for a higher grade at the end of the semester.
• Don't ask to make up assignments/projects, take a quiz, or exam after the due date has passed.
• Don't submit a re-grade request if you didn't do the assignment/project on time (i.e. you got a 0 on the assignment/project).
• Be in class for exams unless specified otherwise. My preference is to take exams during class time but, if needed, the exam date(s) could be changed, and the exam(s) could be taken online using Proctorio. This will be communicated to the class during the semester if needed.
• Don't wait until the last minute to work on assignments or projects.
• Don't contact me right before something is due with questions.
• It is the student’s responsibility to seek out help if help is needed. Tutoring is available through the IMS department in Laws.
• You are not expected to know any HTML or CSS prior to this class. I'll teach you everything from the basics of getting around on your computer to even some coding with PHP. We will move very fast because we have a lot to cover in a short time. This is a 3 credit hour class which typically means 3 hours of class time per week and 6 hours of 'homework' time. Since this is a hybrid course, we will only meet for an hour and 20 minutes. You should spend the other hour and 40 minutes with the videos and working on assignments. I designed all of the videos to take the place of lectures. Most of the videos are short. You can watch them and re-watch them at your own pace. You are expected to watch all of the videos (or read the transcriptions if you prefer) before class. Class time will be spent reinforcing the concepts. Class attendance and participation are an important part of this class.
• Trouble with your computer, network connection, or similar things is not an excuse for not doing your work on time. Contact ITservices at 529-7900 with desktop support needs (i.e. operating system and network issues if you are having trouble on campus). Contact your hosting site with hosting problems.
• Coding requires attention to detail. Typo's in your early days of editing pages can lead to long trouble-shooting periods later in the class (with PHP, because PHP mistakes are less forgiving than HTML mistakes). Do your work with a purpose. Check your work. Double-check your work. Have a peer check your work on their computer and/or phone. Don't make silly mistakes.
• Enjoy your work.
• I do not offer taking a grade of 'Incomplete' in this class.
• Students can drop the class if desired, within the university time frame offered.
• Grades will be given in less than a week after the due date (usually a few days).
• Re-grade request grades for assignments, projects, and extra credit will be given in less than a week after the due date for re-grade requests (usually a few days).
• Quizzes and Exams are done through Canvas and are auto-graded.
• Assignments and Projects are auto-graded using a utility that I wrote, as well as with a manual look at the design and content by Kirk.
• Response time to answer questions is less than one week from the question (usually a few days).
• Students are expected to periodically check email. Information about the class, changes, grades, notifications, etc, will be communicated using email since the class only meets once a week.

Attendance

Review Miami's attendance policy. I take attendance in this class. Bring your Miami ID to class. Poor attendance can result in a lower grade. Contact me if you have to miss class. Contacting me does not excuse the absence but does help to keep me informed as to why you are missing. We only meet once a week; missing one class means that you are missing almost 10% of the classes for the semester. Historically, people that have good attendance in my class have done better with their learning and grades.

Academic Integrity Policy

Review Miami's academic integrity policy. On web sites it's pretty common to "steal code". In this class, I don't mind if you start from someone else's design, but you cannot start from a class-mates work. You can begin from my (Kirk's) code, but you need to make it your own. That means you need to create/use your own graphics, color schemes, and content. By being able to start with something and tweak it, that tells me that you understand how to build web pages (which is a big part of the goal of this class). Simply using someone else's design or content, however, is not acceptable. You must "make it your own".

Disability Services Information

If you have needs for disability services, contact student disability services.

Mental Health Services Information

If you have personal issues, seek help.

Course Calendar or Schedule

University Dates

Please note the updated add/drop deadlines to full-term courses:

• The university's academic calendar is located at: https://miamioh.edu/events/academic-calendar/
• The university's academic calendar for this academic year is located at: https://miamioh.edu/events/academic-calendar/2019-2020/index.html
• For questions regarding the revised deadlines please contact the Office of the University Registrar as follows: registrar@MiamiOH.edu, 513-529-8703.

Class Location

Our class meets Friday's from 2:50pm-4:10pm in 201 Laws Hall.

Class Structure

This course is being taught in a Hybrid style. All course materials are online via this/our class site and were created by Kirk. Class time will be spent with corporate and individual learning time. We will typically start off each class doing "Peer Assignment Review". We will then address any questions/concerns with the material as a group. Finally, individual time will be offered, where students can work directly with me (Kirk) and/or help each other and work on projects. A typical class/week may be spent as follows:

A typical week

Week01
• Monday
  • Learn material
  • Do assignment Week01.htm on your own
• Wednesday
  • Begin receiving daily email notifications for upcoming incomplete assignments
• Thursday
  • Assignment Week01.htm due by 11:59pm
• Friday (pre-class, in class, & post-class)

  • Time	Amount of Time	Task
    1:30pm-2:45pm	75 minutes	Regular Office Hours (Laws 213D)
    2:50pm-3:00pm	10 minutes	Peer Assignment Review (5 minutes each)
    3:00pm-3:10pm	10 minutes	Tell Me
    3:10pm-4:00pm	50 minutes	Full class discussion
    4:00pm-4:10pm	10 minutes	Quiz and/or continued discussion
    4:10pm-5:00pm	50 minutes	Post-class help

Readings

No book is required for this course. Material for the course was developed by Kirk Hopkins and is available on this site. Content (i.e. material) for the course is in video format with transcriptions. Some compressed (zip) files are also available for download on the Material section of the site. Students are expected to watch all of the videos or read all of the transcripts.

Grading Policy

Grading rubrics are listed for every assignment. Kirks Pet Peeves also apply to grades. A regrade request is offered on all assignments and projects. Students are encouraged to take advantage of the re-grade request opportunities. Re-grade requests are available if the assignment or project is completed on time, and will be available after the work has been graded, up to a week after the assignment was due. Grades will not be changed after these opportunities are exhausted.

Grades for Assignments and Projects include automatically graded "Mechanics" (i.e. HTML and CSS) as well manually graded "Design" (i.e. responsive design, color schemes, spell checking, grammar checking, etc) and "Content".

Kirk sends out automated email notifications for assignments not found. This is for information purposes only. Students are still expected to use the Assignment Viewer to ensure that their assignments can be graded. The purpose of the automated email notification is to act as a reminder to do an assignment if it hasn't been started or alert the student to a potential folder and/or file naming problem.

A sample quiz and sample exam are in Canvas and can be taken any time and as many times as students like.

Grading Policy Continued

• Work not completed by the due date and time will receive a 0 with no opportunity for improvement
• Copying one page to another does not count as doing the assignment, and in doing so, you will still receive a 0 with no opportunity for improvement (for that grade)
• Assignments and projects must be visible on the assignment viewer which means they need to be appropriately named (case-sensisitive) and in correct folders

Do assignments on time if you don't want a 0

A big part of your grade is simply based on doing your work on time.

Class Grading Overview: % of Final Grade

• Assignments (10 assignments worth 1% each, all with re-grade request opportunities) - 10%
• Quizzes (5 quizzes worth 2% each) - 10%
• Project One (FixThisSite.htm, with a re-grade request opportunity) - 10%
• Project Two (MyInterest/index.htm, with a re-grade request opportunity) - 10%
• Project Three (HireMe/index.php, with a re-grade request opportunity) - 25%
• Exam One (in class) - 15%
• Exam Two (in class) - 20%
• Extra Credit (5 PHP assignments worth 1% each, all with re-grade request opportunities) - up to 5%
• BigExtraCredit (1 PHP assignment worth up to 5%, with a re-grade request opportunity)

Project Grading Overview: % of Final Grade

• Project - FixThisSite.htm Thursday 03-05-2020 at 11:59pm: 10%
• Project - MyInterest/index.htm Thursday 04-02-2020 at 11:59pm: 10%
• Project - HireMe/index.php Thursday 04-30-2020 at 11:59pm: 25%

Project Step by Step Instructions (also on the Material page)

• Project - FixThisSite.htm

  Video/Transcript: IMS222 - FixThisSite step by step

  (watch this video in a new tab or window)

  Now I'm going to walk you through the fix this site project
  
  Our first class project with multiple pages
  
  Let's go to the assignment viewer and grab the goal, assignment, and the grading rubric
  
  I'm going to view page source
  
  And I'm going grab all the information about the assignment
  
  Now I need to login to my webspace
  
  Now that I connected to my webspace I need to go to my IMS222 folder which is either in public_HTML or www
  
  And here's IMS222
  
  And let's just duplicate webpage 4
  
  And this is going to be called FixThisSite
  
  I right-clicked and selected Get Info and set "open with" to BBedit
  
  You may want to do that
  
  That way you can double click on .htm files and it will open with your editor instead of opening with a web browser
  
  So let's start from the top by renaming the title to Kirk's FixThisSite
  
  I'll leave the external style sheet reference in for now
  
  I have some internal styling
  
  I will replace the content of the body, down to the footer
  
  I will copy the project source code, to paste into my project
  
  I'm doing this because I like to make sure I do everything for the project that's required
  
  So I'm just going to quickly save that and make sure that I can get to the assignment
  
  Reload the Assignment Viewer to ensure that the project is named correctly
  
  Search for your UniqueID to jump to the assignment on page, and look, there it is
  
  Because I don't want to have to reload the page every time I'm just going jump straight to my page
  
  The goal of the assignment is to demonstrate design concepts learned and to demonstrate understanding of the use of images and basic HTML
  
  The content should include:
  
  -List the web address for a site that you think needs to be fixed (should be a site that you have not used yet; should be linked with a target to a new window)
  
  -It cannot be craigslist (Kirk did that one)
  
  -List at least 3 problems with the site
  
  -Show a screenshot of the site that you think needs to be fixed
  
  -Create a Prototype (Web Page) that addresses (fixes) the problems identified
  
  You can begin from my template, you need to modify the CSS and content to make it uniquely of course
  
  I picked the site craigslist so let's go to craigslist
  
  I need a screen shot of the site so I'm going to do command space for a quick way to find the screenshot app
  
  I'm going to go ahead and grab a big chunk of this site, capture, then close that window
  
  The screenshot was saved on my desktop
  
  Open the screenshot with an image editor, I used Preview
  
  The image is going be way too big
  
  Let's just make it 1000 pixels wide because the class requirement is 1024 pixels wide or smaller
  
  It needs to be a JPEG (jpg)
  
  Export the modified image and I will call it SiteToBeFixed
  
  You can name it whatever you want
  
  Notice that it's 457 kilobytes (KB)
  
  When it's changed to a JPEG it becomes a lot smaller
  
  That's under half MB for 500 KB limit
  
  I'll save it on my desktop for the moment and now I have my screenshot
  
  I can close the Preview (image editor) and I'm going over to my webspace
  
  I already have my FixThisSite folder
  
  Create a new images folder, it could be called whatever you want
  
  I'm going to call mine FixThisSiteImages
  
  Drag that new image into the new images folder
  
  
  
  So let's go ahead and just tweak this little bit
  
  Edit the FixThisSite.htm page now
  
  I removed the Due date information
  
  I changed the H1 to Kirk's Fix This Site Project
  
  I don't need to the display what the goal was
  
  I can show the create this so I created the FixThisSite
  
  I don't really need the "Create text" anymore
  
  I will create a new unnumbered list
  
  I will create a list item with "List the web address for the site that you think needs to be fixed"
  
  I will make a link called "Craigslist has following the issues" outside of the unnumbered list to the web page to be fixed
  
  Copy the URL and paste it in the href link code and because this is a link that should open a new window because it's taking you off of my site I'm going to do target = _blank
  
  I decided to change my unnumbered list to an ordered list (to see numbers)
  
  I am adding an H2 with problems identified
  
  List problems
  
  Add the screenshot of the site that needs to be fixed
  
  I'll do another H2 titling what I am going to show next
  
  Begin to insert the image (screenshot) with meaningful alt text
  
  Reference the folder name with cases matching
  
  Use a slash "/" to designate a folder
  
  Add the image name with cases matching
  
  Reload the page on the web browser to review your work
  
  I am going to remove the external style sheet now
  
  Reload the page on the web browser to review your work
  
  Let's do another H2 to title the prototype of the site that needs fixed
  
  Create a link to a webpage that opens in a new tab or window with target = _blank, I will duplicate an existing page and name it FixedSite.htm
  
  I'm demonstrating how to use a full path for a link with "https://kirkhopkins.com/IMS222/FixedSite.htm"
  
  Edit the FixedSite.htm page
  
  Let's start fixing the site
  
  I'm going have H1 Craigslist and fix the problems identified
  
  I'm going to use QuickTime to copy an image from a movie
  
  Create a new Preview document (which pastes the picture in)
  
  Change the width to 1000
  
  Export it as a JPEG
  
  I'll name it without spaces and save it in my FixThisSiteImages folder on the web
  
  Add the HTML to the web page to be able to see it when we reload the page with the browser
  
  I have a broken image because I did not reference the folder (FixThisSiteImages)
  
  I'm demonstrating how to use a relative path for an image with "FixThisSiteImages/FeatureOfTheDay.jpg"
  
  Computers are not smart, they only do what you tell them to do
  
  By adding the folder name and a slash before the image name, I am displaying the image on the page properly
  
  Voila, no problem
  
  Let's make the image response with inline styling of 50%
  
  It's good practice to add a semi-colon after each style attribute
  
  Now the image is responsive
  
  I'll switch the image from inline styling to internal styling to apply to all images on the page
  
  I switched it to 45% to see the change
  
  Next, I'll fix the next 2 problems identified
  
  I'll add an H2 to name the photo
  
  Now I'll create an unnumbered list to address the problem
  
  Be consistent
  
  Keep in mind that my problems and solutions will be different than yours so you may not have an unnumbered list
  
  BBedit offers a sort option under Text...Sort Lines to alphabetize my list
  
  Reload your page as you make changes
  
  Make sure you have enough content to demonstrate how your fixed site addresses the problems
  
  I like to use W3Schools (via Google search) to find answers to HTML and CSS questions
  
  Stay consistent with your page with the source code as well as with what is presented on the page
• Project - MyInterest/index.htm

  Download the zipped/compressed MyInterest site template

  Video/Transcript: IMS222 MyInterest/index.htm - Step by step instructions with no PHP

  (watch this video in a new tab or window)

  How to do Project 02, MyInterest/index.htm
  
  You can start off by downloading the zipped/compressed MyInterest site
  
  It ended up in my downloads folder
  
  Connect to your webspace
  
  I like to open it in a new window
  
  Then go to your IMS222 folder
  
  Drag Project02Template into your IMS222 folder
  
  Rename the folder to MyInterest
  
  I have a folder structure with fonts and images, an index page which will be the home page
  
  Use the Assignment Viewer to make sure that your project is found
  
  Open up your page in the browser
  
  Now let's start editing the site
  
  Open the index.htm page with your text editor
  
  Rename the title to what your interest is about and change it to your name
  
  Rename the css link and document to match your interest
  
  Change Page01.htm through Page06.htm to reflect your interest, deleting or adding pages as needed
  
  Kirk's interest is music so I'm changing the names that I might use like band, drums, etc
  
  I alphabetized my list
  
  Rename the link to the page name, and rename the document (file) to match the new name
  
  Save it and refresh your home page to verify the changes
  
  I found a font that I like called FoferFont that I downloaded
  
  Copy the font to your web space (in the fonts folder)
  
  Add the new font to your css like the font1942 font
  
  Add the new font to the rest of your css
  
  Remove 'change or remove this' comments
  
  Refresh the web page to see the new font
  
  Working on the band page, I moved the video code to a videos page
  
  So far I have only changed the navigation menu on the home page, so I will need to change the other pages later
  
  Make sure your code and your documents match (including upper/lower case)
  
  I lost connection to the server for a moment but the computer recovered automatically
  
  Copy the title (which you may want to change later), navigation menu, and css lines to every page
  
  On the final project, I will show you how to do header and footer info once and include it on each page using PHP
  
  Change the responsive design to your own look
  
  You will want some padding around the page content
  
  The @media screen section of the css is where you will want to change the navigation menu and potentially other things for smart phones vs devices with larger screens
  
  Change all colors in the css to your own style
  
  You can use Lorem ipsum text while working on your pages but make sure you have real text by the time that it is due
  
  Make sure that your content matches the page name and make sure you have enough content
  
  Make sure your images meet our class image criteria (1024px wider or less, .5MB file size or less)
  
  Name your images so they make sense and give them alt text that also makes sense
  
  I lost my connection to the server, so I reconnected, if that doesn't work, try rebooting your machine and then connecting again
  
  I had to quit my browser and re-open to go back to the web page
  
  Remember to make little changes and reload your page checking the changes as you go
  
  Test your responsive design as you go
  
  I have my css set to change the number of columns for an article using column-count:3; to create 3 columns
  
  Like the header, change the footer on one page, check it, and when you're happy, copy it to all of the other pages
  
  When we use PHP, you will only need to make one footer
  
  In this project, we are making a lot of individual web pages with the same look and feel so it looks like a whole site
  
  When we use PHP, you will see how it really is a whole site
  
  Let's look at the h1 css and change the colors
  
  Now I'll remove the apostrophe from the navigation menu on all pages manually
  
  On the drums page, I'll stay consistent with the h1 being the title of the page and put placeholder text for future content
  
  Next I'll do the same type of thing for the itunes page; it's ok to use an itunes (and other company) logo/graphic but other graphics should be original
  
  How much content do I need, it is based on your topic, think of things that you would expect to see if they land on your site; you should have enough information to keep a user's attention for 5 or 10 minutes
  
  Remember, links off of your site should open in a new tab or window
  
  Make sure you have good css, my demo site is not done yet
  
  I'll change the hover color in the css under the mouse over link section
  
  That should be enough to get you started on your second project, the MyInterest site
  
  You should have all new original content, and the content should be different than what you will use for your final project (HireMe site); I recommend picking a topic of interest like frogs or puppies, not a general 'these are the things I like' type site
  
  I look forward to seeing what you have
• Project - HireMe/index.php

  Project 03 - HireMe

  You may want to download the zipped/compressed HireMe site, unzip it on your local machine, manually add folders and web pages on your site, then copy/paste my code to your manually created pages to start on your HireMe site if you have not done so already

  Video/Transcript: IMS222 HireMe/index.php - Step by step instructions

  (watch this video in a new tab or window)

  
  Hi. Your Hire Me site. A culmination of all of the work you've done all semester. This is going to be a PHP website with all of the things that you might want to show for someone to hire you. I have a few examples of some things you might want to talk about so let's look at those.
  
  Let's say you were looking for a photography job. You might want to talk about pricing and samples, testimonials, awards, contact info, things like that.
  
  If you're looking to be a web designer, you may want to include languages, programs you've written with screen shots or things to buy; demo things on the site. You may want to look at plans for your future, and you may want to have your resume on it (no PDFs).
  
  If you want to be a game developer, you may want to include game design, concepts and theory, your favorite games and why, list competitions you've participated in.
  
  Take a look at other people's sites and see what they have. See if they have things that you want to include or exclude.
  
  The hire me site is supposed to tell a potential future employer things about you, the things you're interested in, and the type of work that you're looking to do.
  
  Let's dive in to the hire me site. I have my VPN client open and I'm going to connect. Once connected, I'll go to my Finder window and connect to my disk space. Then I'll go to my IMS222 folder and since I've already done this project, I'll rename the old version. Then I'll download the zip (or compressed) site from our class website, find the file in my downloads, double-click it to uncompress it, and copy it to my IMS222 folder.
  
  While it's copying let's look at the site ( https://www.users.miamioh.edu/hopkinks/IMS222/HireMe/ ). The warnings were because the files had not all been copied. Refreshing the page after it's done takes care of that issue.
  
  Looking at the code starting with the index page. You see that it includes the wwwsiteheader.php file which is similar to what we did on the MyInterest site, but done a different way. All of the wwwsiteheader.php code is included in the index page and can be included in other pages so you don't have to type it into multiple pages over and over. Similarly, each page includes the site footer. Lines 9 through 21 is part of an echo which dumps html to the browser. You should already understand that.
  
  On line 7 I also include Kirk's Picture Grabber. When I reload the page, you can see it randomly grab a new image. It's slow in the video because I'm on VPN. Sadly, VPN slows down your network connection. Let's see how big the image is. It's 443K, which isn't super huge. All images in that folder are below a half of a megabyte, so that's OK. So it was just the VPN slowing me down.
  
  Just because I included the picture grabber doesn't mean you should include the picture grabber. Include it if it makes sense. If there's no good reason to have it on your site, don't include it. The same is true for displaying the date. If there's no good reason to say what the date is, remove that code.
  
  You also don't want to have a page called this, that, the other, and sample page. When I choose this, it takes me to this.php. You should not have a page with the name of this.php. Let's say you're into photography, you probably want to have a home page, and you might want to rename your this.php page to PhotographyGallery.php. Maybe you would have a bids page or a contact me, or samples of your work. Whatever reason you think someone would want to hire you, that's what you should put on your website.
  
  You may be asking yourself how much or how little should I put on my website. The answer is, whatever you think you need. If you think you need a lot of data, put a lot of data/content. If you think only a little bit of information can get it across, just have a little bit, and that's fine too. There's no right or wrong answer. The question is, why would someone want to go to this site to hire you? If they're looking for a photographer and you have no samples of your photos then why would they hire you? They probably wouldn't. If you're a web designer and you have no samples of web design, why would they want to hire you?
  
  I've included the KirksPictureGrabber.php program, a resume (that you may or may not want to have). Please don't put a PDF on your site. Double check the CSS to see if it has everything that you want. It's not super long. You will want to remove Kirks brown M&M ( KirksUnusedCSS_RemoveThisIfYouAreStealingMyCSS ).
  
  I created separate directories for my home page images and my images for that page. If you're not using those, then you should remove them. If you want to put all of your images in one folder (like the img folder), that's fine. If you want to separate them out by page, that's fine too. Just be consistent in whatever you do.
  
  Let's look at the footer for a moment. It's pretty short. I have some inline styling which you may or may not want to do.
  
  Hopefully that is enough to get you started. I look forward to seeing your Hire Me sites.

Assignment Grading Overview: % of Final Grade

• Assignment - WebPage00.htm: 1%
• Assignment - WebPage01.htm: 1%
• Assignment - WebPage02.htm: 1%
• Assignment - WebPage03.htm: 1%
• Assignment - WebPage04.htm: 1%
• Assignment - WebPage05.htm: 1%
• Assignment - WebPage06.htm: 1%
• Assignment - WebPage07.htm: 1%
• Assignment - WebPage08.htm: 1%
• Assignment - WebPage09.htm: 1%
• Assignment - WebPage10.php: extra credit up to 1%
• Assignment - WebPage11.php: extra credit up to 1%
• Assignment - WebPage12.php: extra credit up to 1%
• Assignment - WebPage13.php: extra credit up to 1%
• Assignment - WebPage14.php: extra credit up to 1%
• Assignment - BigExtraCredit.php: extra credit up to 5%

Letter Grade Overview

• A Superior execution; maximum originality; highly imaginative, original, and experimental; fantastic level of craft and attention to detail.
• B Strong execution and originality; imaginative and experimental; consistent in work ethic; above average level of craft and attention to detail.
• C Average execution; some imagination and originality; lacks some consistency in level of craft and attention to detail.
• D Poor execution; limited originality; poor level of craft and attention to detail.
• F Fails to execute to minimum standards

Grade Scale

Grade	%
A+	97-100
A	93-96.99
A-	90-92.99
B+	87-89.99
B	83-86.99
B-	80-82.99
C+	77-79.99
C	73-76.99
C-	70-72.99
D+	67-69.99
D	63-66.99
D-	60-62.99
F	0-59.99

Re-grade Requests are Encouraged

If you are not happy with your grade on an assignment or project, and you completed it on time, you can modify the web page and use the assignment viewer to submit a regrade request (one request is allowed (and encouraged) for assignments and projects). The assignment viewer shows you how long you have to submit a regrade request.

Your grade will not go down if you requested a re-grade. If you got a 0, that means the project was not where it was supposed to be (or it was named incorrectly). If you got a very low grade because you barely had anything to grade, don't expect to get an A on a re-grade request. Saying you were sick and didn't get it done on time is not a good excuse. The due dates for all of the projects are plainly visible. You can request to have your work regraded one time up to 1 week after the due date. It obviously takes time to do the grading, so you may only have a few days from when I enter the grades to make changes and submit a re-grade request. I will try to have things graded as quickly as possible. Your grade can only go up 2 letter grades if there is a severe problem with content for an project (i.e. there wasn't much attempt made). This will allow students not to worry as about missing something during the learning process. If it appears that you made a solid attempt, I will allow up to full credit on a re-grade request.

Are you wondering why you got the grade that you got? Review your work and compare it to the scoring list below. Still not sure? Ask some of your peers what they think. Being a webmaster (that's what you are) means being able to use the critical eye that we used in our first class to review your own site. I want you to be proud of your work. All of your work in this class can be used in the final project so making it all top-notch is highly recommended.

Comments will be added in Canvas to the grade when applicable.

Academic Support

Tutoring Schedule (walk-ins only, no appointments) (updated 02-05-2020)

Course Evaluations

One of the mid-semester assignments is creating a web page as sort of a mid-semester evaluation. Kirk will use the information to determine if changes need to be made to the course during the semester. Contact Kirk at any point in the semester if you think changes could be made to the course to help you learn better.

At the end of the course you will be asked a series of questions to evaluate me (Kirk). I will strive to ensure that you learn cool stuff in this course (at least I think it's cool). I hope that you are able to grade me with high marks. We're all learning and I have found that one of the best ways to learn is to get feedback as you go. With this in mind, read the questions that you will evaluate me on, and as we go through the course let me know if I'm missing the mark anywhere. I'm more concerned about you learning than I am with getting a bad evaluation; I would prefer to address your concerns during the class instead of finding out after the fact, so that you are able to learn more effectively.

• The objectives, expectations, requirements and content of this course were clearly stated.
• The professor was interested in and enthusiastic about the subject.
• This professor used class time in an effective manner.
• The grading system was clearly explained and consistent with the objectives of the course.
• The professor was available outside of class during scheduled times.
• Students in the course were free to comment, ask questions, and express ideas.
• The professor provided an inclusive and respectful learning environment.
• This course has challenged me to think.
• Overall, the professor effectively facilitated learning.
• Overall, I would rate my own effort in this course as superior.
• My instructor welcomed students' questions.
• My instructor offered opportunities for active assignment to understand course content.
• My instructor demonstrated concern for student learning.
• In this course I learned to analyze complex problems or think about complex issues.
• My appreciation for this topic has increased as a result of this course.
• I have gained an understanding of this material.

Welcome

Hello,

My name is Kirk Hopkins. I look forward to teaching you great web design in our IMS222 class.

The web site that we’ll use for our 202020 IMS222 class is: http://kirkhopkins.com/IMS/202020_IMS222/index.php. On the site, you'll see everything you need to know for the course including all of the assignments and due dates, the syllabus (including course content), the assignment viewer, ways to contact fellow classmates, and contact information for me.

As you know, our class meets Friday's from 2:50pm-4:10pm in 205 Laws Hall. We will evaluate how we use our class time as we go through the semester. The important thing to me is that you learn the content. Time is valuable so I want to make sure that we’re using it in the most advantageous way possible. No book is required for the class. I have developed all content that we’ll use for the course in a video-based format (with transcription for those who prefer text).

Our class will operate in a hybrid, or flipped, format. You’ll learn content on your own before class. We’ll use class time to re-enforce learned concepts and discuss new content.

In this class, we are all going to learn together (me included). You'll be able to see each other’s published work (on the website) because it will be on the web; for that matter, you’ll be able to share your work with anyone in the world with web access. Pretty cool, eh?

I look forward to diving in to building some web pages with you soon. If you have a laptop, bring it to class so you can have all your tools at hand.

Your first assignment is due by class on Friday. You read that correctly, you need to do the first assignment before we meet. Directions can be found at: http://kirkhopkins.com/IMS/202020_IMS222/Material.php?ShowThis=Week00. Week 00 gives you an overview of the course and tells you how to setup your web space (which is required by our first class). You will also want to cover the content for http://kirkhopkins.com/IMS/202020_IMS222/Syllabus.php?ShowThis=Week01 before our first class. Many classes at Miami require self motivation and this class is no exception. I've found that students who put the effort into the class from the beginning, do the assignments on time, and attend class, do well (grade-wise) in my class.

So to re-iterate, here's your Getting Started Module, due before our first class:

• http://kirkhopkins.com/IMS/202020_IMS222/Material.php?ShowThis=Week00
• http://kirkhopkins.com/IMS/202020_IMS222/Material.php?ShowThis=Week01

You don’t have to use Bluehost for your web space; that’s just what I use. All the code that we’ll do in our class will be done with a text editor. DO NOT INSTALL WORD PRESS. It will be tempting (and easy to do), please don’t. You’ll save yourself a lot of grief by not installing it. If you use Bluehost, portions of WordPress will automatically get installed, but not as much as if you use the install option.

I've found that many of my students in the past have needed a little help getting started setting up Bluehost. This semester I'm offering office hours at the following times for this week only, in addition to my normal office hours, to help you get started if you're stumped. If this is you, and you need more help than the videos telling you how to get started, contact me (see below) letting me know when you would like to meet. I'll provide location information for these special office hours after I hear from you. Please make any web space purchases needed before we meet.

Special office hours the first week of classes by appointment only

• Tuesday 8am-11:45am
• Wednesday 8am-11:45am & 1:30pm-4pm
• Thursday 8am-11:45am & 1:30pm-4pm
• Friday 8am-11:45am & 1:30pm-2:45pm

You can reach me via the contact page (http://kirkhopkins.com/IMS/202020_IMS222/EmailForm.php?subject=general%20info&uniqueid=) on our website or by emailing me.

I look forward to meeting you soon. I'll take pictures of each of you at our first class, so come ready to smile. See you at our first class on Friday.

...Kirk.