201910 IMS222
| Grade | % |
|---|---|
| A+ | 100 |
| A | 95-99.99 |
| A- | 90-94.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 |
Projects and assignments have a grading rubric.
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.
I'll add comments in Canvas to the grade when applicable.
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".
Download the zipped/compressed MyInterest site template
(watch this video in a new tab or window)
We're going to jump right in. Once you get to the class website you can download the zipped or compressed MyInterest site.
Unzip the file (it is probably in your downloads folder).
Copy the unzipped files into your IMS folder on the web.
Let's review the project files.
Change the folder name to MyInterest.
The template has an index.htm file already. There are 6 pages provided, add more if needed.
Let's edit the index.htm file. I am going to list the structure of my site which will be on a GoPro5 vs a GoPro6. Then rename Page##.htm to match the structure determined. Make sure to match the case (upper lower). Delete Page##.htm's that are not needed.
I'll edit my photos.htm page. It has video stuff in it, we'll use that later. Now I'll start to add an image. I'll cut the video html out and paste it in the videos.htm page. I'll also add the h1 on each page to match the html page name. You can change the YouTube code with your own if you're embedding a YouTube video.
Let's edit the H1 text and page text on the summary.htm page.
Back on the photos.htm page, I'll finish the image tag by copying an image to my webspace and reference it properly.
Next I'll go to the site for a quick review. It looks like I need to edit my navigation menu.
The .htaccess file may or may not be hidden; it allows us to use a tiny bit of php. The php.ini file allows us to pre-append (put a file before a page) and append (put a file after a page) so we can create a site header and site footer once and use it across the whole site.
The source code for the index.htm page shows that I have a complete web page because the wwwsiteheader.htm and wwwsitefooter.htm are being included automatically.
With a little bit of reformatting by adding a line feed/carriage return to the wwwsiteheader.htm and wwwsitefooter.htm pages, we can make the source code look better.
I'll also edit the wwwsiteheader.htm to change the navigation menu. Save it.
Reloading the source code window on your browser will show you the new code.
Reviewing the source code on other pages will confirm that the wwwsiteheader.htm and wwwsitefooter.htm are included automatically.
Now let's rename the stylesheet to match what the site is, update the wwwsiteheader.htm to find the file with the new name, and then reload the page to see our changes.
Let's change the font to better match what you might associate with a GoPro. I'm using a font that I found previously, and downloaded it. Next I'll copy the fonts to the MyInterest/fonts folder on the web.
Next I want to copy the existing font and rename it to the new font name. Then add references on the stylesheet. Save and reload to see if it worked, and it did!
The template provided has comments like change or remove this. Any time you see one of those you should change or remove it to make the site fit your own style. You can change other things too, just make sure you change these specifically. Also remove the comment after you've changed it.
After making changes, check your site.
The template has responsive design built into it.
The template that I provided is mostly set to style standard html tags, there is a limited amount of classes and/or id's.
Change the navigation styling to 'make the site yours'.
I put background colors in the responsive portion to help you find the sections. You do not need to have different background colors, but you can have them if you want them.
I did some responsive design stuff for articles with columns and will use the Getty'sburg Address for my content.
Reload the page and resize the width of the page to see the number of columns in the article change.
I want more space around articles. I'll do that by adding a general section called article and giving it some padding. Retest the change.
The Style Sample page shows lots of styling options. Remove that page when you're done with it.
Your site should like similar to mine (folder/file structure-wise. Remove pages that you don't need. Name files appropriately to match your site.
Hopefully that helps you get started with your project. I look forward to seeing your work.
Remember, it should be different than your final project which is a Hire Me site. I look forward to seeing what you come up with.
Thanks. Bye.
Download the zipped/compressed HireMe site template
(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.
This course is an opportunity to investigate interactive design as it relates to a variety media types. Using industry standard tools, you will learn to design, implement and refine interactive media for specific audiences. For the purpose of this class, interactive media includes websites, menu systems, and the 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.
| Time | Amount of Time | Task |
|---|---|---|
| 2:30pm-2:50pm | 20 minutes | Pre-class help (added during the semester) |
| 2:50pm-3:00pm | 10 minutes | Finish assignment |
| 3:00pm-4:00pm | 50 minutes | Full class discussion |
| 4:00pm-4:10pm | 10 minutes | Quiz and/or Individual attention |
| 4:10pm-4:30pm | 20 minutes | Post-class help (added during the semester) |