201920 IMS222
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.
Review Miami's attendance policy. I will take attendance in this class. Bring your Miami ID to class.
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".
If you have needs for disability services, contact student disability services.
If you have personal issues, seek help.
Our class meets Friday's from 2:50pm-4:10pm in 201 Laws Hall.
| Time | Amount of Time | Task |
|---|---|---|
| 2:30pm-2:50pm | 20 minutes | Pre-class help |
| 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 |
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 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, content, etc).
Kirk is working on an automated email notification which will look for assignments and email issues like if the assignment is found or not, as well as a grade on the "Mechanics" of the page. 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.
(watch this video in a new tab or window)
Now I'm going to walk you through the fix this site projectDownload the zipped/compressed MyInterest site template
(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
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.
| 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 |
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.
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.
Welcome
Hello,
My name is Kirk Hopkins. I look forward to teaching you great web design in our class.
The web site that we’ll use for our 201920 IMS222 class is: http://kirkhopkins.com/201920_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/201920_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/201920_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 befor our first class:
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.
You can reach me via the contact page on our website or by emailing me.
I look forward to meeting you soon. See you at our first class on Friday.
...Kirk.