(watch this video in a new tab or window)

Interactive web design takes building web pages and web sites beyond just coding. It moves it to functionality and usability. It focus' on meeting the needs of the customer or user. Let's look at Miami's vacation reporting site in Banner. I can report my vacation and sick time so it's functional but entering time is more cumbersome than it needs to be. See how the next and previous button move. Why can't I see the whole month at once? Why isn't there a dropdown option to select the time allowed? Whenever you have to use words like “make sure do it this way”, you know that you have failed on a usability standpoint.

(watch this video in a new tab or window)

Progressive disclosure is an interaction design technique often used in human computer interaction to help maintain the focus of a user's attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand.

An example of the use of progressive disclosure is our Week website. Menu options are in place to allow students to find what they're looking for. Everything could all be on one page but that would be too much. There's also the option to “Show the entire syllabus” or view one Week at a time, allowing the student to see the information the way they want to see it.

(watch this video in a new tab or window)

There are several different types of architecture, like Linear, Hierarchy, Web, and Matrix. I don't get heavy into terminology and pedagogy so I just want to address this with the statement that information should be organized and arranged in a way that should be understood. You can look at our Week web site to see that the information is lumped together by several categories which happen to be presented as menu options. If you look at my work web page you'll see that it's organized in a very different way. That's because there's a different target audience. In the Week site, students are the primary users so things are organized in a way that a student would expect to see the information. Grading is pretty important to a student, so it get's it's own category. My work web page, in contrast is one big page with no menu. That's because I'm the primary user and I use it mainly as bookmarks to get to my favorite sites. Neither way is right or wrong, other than they should meet the needs of the target audience.

(watch this video in a new tab or window)

The home page is the main landing page for your site. The identity and styles of home pages change over time but in general I feel that they should not include too much information. I'm personally a bit of a minimalist anyway so I prefer very little content on a home page, and use it as a spring board to get to other information. http://www.harrisonlegacy.com/ is a site that I manage. It's a church web site. The primary target of the site is to introduce the church to potential attendees. It's also used by current members which is why the “GIVE ONLINE” link is on the site. I removed it at one point thinking it was a bit rude to a prospective attendee and heard “where did the link go” from many current members. They used it weekly for their offering. So I added it back, but tried to make it inconspicuous.

Apple is a forerunner in design. They're not perfect, but you can generally gage what's popular in current design based on what they're doing. Let's take a peak at their site. Can you tell what Apple feels is most important? It's hard not to, right?

With Google around, users may not go to your home page first. That's why a good menu system is important. Looking at the church site again, you see that you can get to all of the topics that you might be interested in using the menu system from any page.

(watch this video in a new tab or window)

Signals basically concern whether or not something makes sense. It could be something as simple as a label or a picture. On cars that take gasoline, there's usually an indicator on the dashboard that shows which side of the car you use to put the gas in; and it's usually a triangle. Now is that enough? The answer lies in the hands of the person filling up the car. If you've pulled in to the gas station on 'the wrong side', I would say it's not enough.

Computers use something called 'icons'. They're little pictures that signal something. On my Mac, I have a dock that I have configured to show small icons, magnify on hover-over, and automatically hide (among other things). The icons were designed by the company that made the program. Apple went the next step and also displays the name of the program when you hover-over it. That's a good way to bridge the gap between a graphical only solution versus a text only solution.

(watch this video in a new tab or window)

Anticipation simply means that you should anticipate how the solution that you're providing will be used. The easiest way to do this is to use it. Does it work like you think it should? Second, have someone else try it. Can they figure it out without you there explaining things? To me, the biggest indicator or a failure in anticipation is the need for 'training'. If the user can't figure out how to use your solution on their own, then the solution does not meet their needs.

(watch this video in a new tab or window)

Consistency is at the top of my list of important things when it comes to web design. Are you adding on to an existing site? Then follow the style and design previously set. Are you building a site from scratch? Then create your style and follow it throughout the site. If you're a list-person, meaning you like making lists, make the list and be consistent. If you use complete sentences in your list, ALWAYS use complete sentences. If you don't capitalize a certain word like “howdy”, and you have a good reason to do it (like if it's a catch-phrase used throughout the site), then never capitalize it. Just be consistent.

(watch this video in a new tab or window)

You may be the smartest person in the world, but if you use bad spelling or have bad grammar, you won't look smart. Your website is a reflection of you. Having typos is just bad. Have a friend check your page/site. Use a tool like Typosaur.us to check your spelling. Whatever you do, don't have typos.

(watch this video in a new tab or window)

I'm using a Mac with OS X 10.11 (El Capitan). Most of the shortcuts that I'm going to show you have been around for many years. On a Mac use the 'command' key to use a shortcut. Similar shortcuts are available on other operating systems as well. On a Windows machine, use the 'alt' key where I reference the 'command' key. Here are my favorites:

• command s to save a document
• command r to reload the page
• command f to find text on a page
• command x to cut text
• command c to copy text
• command v to paste text
• command a to select all
• command + to zoom in (sometimes)
• command - to zoom out (sometimes)
• command q to quit the application
• command w to close the window
• command z to undo the last action
• command n to create a new document, tab, or new Finder window
• command t to create a new tab
• command tab to flip through programs
• command ~ to flip through windows in a web browser
• command option u to see the source code

(watch this video in a new tab or window)

You can personalize your Mac so that you can get things done faster. Here are some steps that I follow everytime I setup a new Mac (use 'System Preferences' to make these changes):
Trackpad - turn on everything, then turn off natural scrolling, and turn off swipe between pages
Desktop & Screen Saver - set these and hot corners
Security & Privacy - Require password 5 seconds
Security & Privacy - Unlock and set to 'Mac App Store and identified developers' if you want
Dock - Smaller, Magnification, Double Click a Window's Title Bar to Minimize

Remove icons that I don't use from the dock
Right-click on the icon...options...Remove from Dock
Add Applications Folder to the dock
Click on the background to go to Finder...command N (to open a new folder)...Drag the Applications icon to the dock

Mac Mail - turn off drafts
Mail…Preferences…Accounts…Mailbox Behaviors…(uncheck) Drafts (for each account)

(watch this video in a new tab or window)

Since we're using WebDAV, editing and reviewing changes is very fast and easy and since we're using HTML5, CSS3, and PHP in this class, you don't have to wait on compiling anything. I can't believe that people still compile programs. To view changes to a web page, you just reload it. Let's walk through an example:

First, I'll open a web browser, then I'm going to use 'command tab' to switch to the Finder. Then I'll use 'command k' to connect to my web space. Next I'll navigate to the folder and web page that I want to edit. Double-click it to open it, I have PHP files set to open with TextWrangler. Change and save it, 'command tab' to the web browser, 'command r' to reload it. Continue using this method to make changes. Once you practice, you'll be a pro and editing code will be quick and easy.

(watch this video in a new tab or window)

Want to open HTML or HTM files with your favorite text editor? On a Mac, navigate to a file of this type in Finder...right-click...Get Info...Open with...(select your favorite text editor)...Change All. That's it.

(watch this video in a new tab or window)

Editing code on your local machine is a bad idea for a couple big reasons.
1) It gets confusing. You make changes on your local machine but test the changes for the page on the server but it looks like nothing changed. That's because nothing on the server changed.
2) Reviewing PHP on your local machine isn't that easy. We will be using PHP in the future.
So edit your code on the server. Trust me, you'll be glad you did.

(watch this video in a new tab or window)

It's important to know that the rest of the world doesn't necessarily edit web pages with a text editor. Here are some sites that I work on that have different WYSIWYG editors. WYSIWYG stands for 'What You See Is What You Get', an old term that came about as the computer world moved from a text only based world to a graphical based world.

Here's a site that uses a proprietary interface by a company called Elexio. I'll make a simple change and reload the page to review the change.

Here's a site that uses Google. I'll make a simple change and reload the page to review the change.

Here's a Facebook page. I'll make a simple change and reload the page to review the change.

You have a lot more power and control when you're not using someone else's interface, but for people who don't know how to write code, these types of solutions make creating and maintaining a web site something attainable.

(watch this video in a new tab or window)

HTML is the content. CSS is the styling. Javascript is an action. The lines are getting more blurred as CSS progresses and becomes more action-oriented. In our Week we'll focus on HTML and CSS. We'll also use PHP later in the semester to dynamically build web pages. PHP is very powerful and very cool. Get the HTML and CSS stuff figured out first so you can have fun with PHP when the time comes.

(watch this video in a new tab or window)

HTML elements are written with opening and closing tags outside of content in HTML documents. A tag is part of an HTML element.

An opening tag starts with a less than symbol, then has some type of identifier, then ends with a greater than symbol. The closing tag will be very similar, but has a slash after the less than symbol.

If you want something to be bold, use a bold element: This is in bold.

Most elements have an opening and closing tag but there are some that don't like breaks. Some have optional closing tags like list items.

I will be referring to HTML elements as 'tags' throughout this course because that's how I learned them.

Here are some very popular tags:   
bold <b>   
breaks <br>   
paragraphs <p>   
unordered lists <ul> and <li> with a closing </ul>   
ordered lists <ol> and <li> with a closing </ol>   
tables <table> <tr> is the table row, and <td> table data which is the column   
images <img src='FolderName/ImageName.jpg' alt='Image Description'>   
Don't use spaces in file names on the web, that's just a hint that's going to save you a lot of time and effort.   

(watch this video in a new tab or window)

We're going to look at the anatomy of a web page.

First I need to connect to my VPN because I'm off campus.

So I'm going to use the Cisco Any Connect VPN client.

Then I click on the background to select the Finder, command N for a new window.

Command K to connect to my (web) disk space.

We're waiting for it to connect.

There we go.

I'm going to go to my IMS222 folder, and I'll click on SamplePage.htm, and open it up with TextWrangler.

This is the web page that we're going to work on today.

The first line has doctype html.

It can be uppercase or lowercase, it doesn't matter.

We'll leave the "html" there.

Line 2 has html language equals en which stands for english.

Lines 3 through 13 contain the head.

Line 4 has a favicon, which is just a picture that's made to show at the top of a tab.

Let's open up a web browser; I'll open a new window, I have an "H" on my university homepage.

You can see that I don't have a favicon on KirkHopkins.com, but I do have one on gzuslivz (a capitol G).

Let's close that window.

If you don't have a favicon, you don't need a favicon line in your html.

If you do have a favicon, you would want to leave it.

Lines 5 through 10 all talk about cache and screen size, most of it is for cache.

Cache stores html information so you don't have to keep reloading.

So this code tells the web browser not to save stuff.

If I reload the page, it will reload all html (but not css).

This makes testing a new page a lot easier.

Line 11 has my title.

I'll add some z's to the title
hit command s to save it
command tab to switch to my browser
command r to reload the page
now the page shows "Kirk's Sample Page zzz"

Let's change it again
command tab
remove the z's and add A's
save it
tab
reload

It changed to "AAA", this is how we want to edit our web pages.

I don't really want "AAA" so I'll delete it.
save it
tab
reload
Now it says "Kirk's Sample Page"

Line 12 talks about an external stylesheet

That name can be whatever you want it to be, I'll change it to "zz"
save it
tab
reload
It all changed because that document doesn't exist.

I'll rename it to "Kirks Great External Stylesheet"
save it
tab
reload
We see that it still doesn't work because KirksGreatExternalStylesheet.css doesn't exist.

If I rename it to KirksGreatExternalStylesheet.css
save it
tab
reload
Now the page is styled again.

There's a little secret that I learned about css.

Add question mark then something every time you change css and the css will be reloaded.

I'll show you how to do that automatically using PHP in a later lesson.

Line 13 closes the head.

Lines 14 through 18 us for internal styling.

I have a class called whatever_I_want which is referenced on line 28.

A class can be named just about anything, there is no special name that you have to use.

I'll change the class name and the reference to "anything".

A web page reload shows that it still works.

If I change the name to "anything_oops" but not the reference, the styling goes away.

When the reference is also changed, the styling works again.

Let's change the color to green.

To find a color we like, open a new browser and search for "web color picker".

We'll use the w3schools link, copy the value.

The first 2 characters are for red, the next 2 are for green, and the last 2 are for blue.

They go from 0 (no light) to 9, then A to F (full light).

Save the web page, tab, reload, and now it's green.

Let's change the text to reflect the new color, save it, tab, reload, there's the change.

Using TextWrangler, I'll highlight "anything_oops", command f for find, paste, type the new value, replace all.

Save, tab, reload

Line 19 through 21 is my header. This is where you will put navigation for a web site in the future.

Lines 22 through 44 contains the body, and line 45 has the html closing tag (it was opened at the beginning).

You could move the footer outside of the body but I like it in the body.

Let's look at some html tags/elements.

Line 23 has an h1 for heading 1, change the words, save, tab, reload, the words changed.

Why is it in blue? Let's look at the external stylesheet, and there it is, let's change it to red.

Save, tab, reload

It didn't change because the css was cached, let's change the data after the question mark.

Save, tab, reload, it changed!

Let's change the text again, save, tab, reload, tab back to the code

Line 24 begins a paragraph and Line 40 ends it.

Line 25 begins a bold tag with the word "Bold" to be displayed on the web page, followed by the closing tag.

Line 26 has a break tag. I change the text.

You can do a break like
but I like
.

Line 27 has a center tag.

Reload, it shows "wow".

Line 28 is a div, which is short for division, and is using internal styling.

Line 29 is a div with inline styling.

I can change the style (color) and the text.

I'll change it to blue with a really big margin.

You can do em's, percentage, pixels. I just try em, I don't memorize all of that.

Lines 30 through 34 have an unnumbered list.

Closing list items (li's) is optional, I prefer not to close them.

Lines 35 through 39 have an ordered (numbered) list.

You can see it takes me a while to figure out why I don't have numbers, darn css.

Lines 41 through 43 have the footer.

Line 44 closes the body and line 45 closes the html.

(watch this video in a new tab or window)

Here are some standard tags
nav is for menu navigation
h1 is for the first heading
h2 is for the second heading, and so on
For semantic reasons you should never have an h2 without an h1 first
section is for a section
article is for an article within a section

(watch this video in a new tab or window)

Using proper indenting while writing code is very important. It's easy to figure where you're at and what's going on with small pages but start throwing some PHP and Javascript in there and crank up the number of lines in the thousands and you'll understand what I mean.

I like to use two spaces for indenting. Some people use tabs and that's OK too. Whatever you choose, be consistent.

(watch this video in a new tab or window)

To view your HTML or the HTML on someone else's page use the inspect HTML option. With Safari you have to turn it on first. Safari...Preferences...Advanced...CHECK in 'Show Develop menu in menu bar'.

I also use Google Chrome. Right-click...inspect.

One of my favorite ways to view code is in a new window. With Google Chrome, option/command/u (all at the same time).

Firefox and Opera also have options to inspect code. I suppose IE may have it too, but I'm not an IE fan.

(watch this video in a new tab or window)

After you upload your video to YouTube, Vimeo, or some other video streaming service, you can usually embed it into your web page. YouTube actually gives you the code to embed it. When you do this, your video is still stored on YouTube's servers (their cloud) and streams to the user's computer from their site, even though they're on your site. Pretty cool, eh? I usually warn against including info from other sites but I definitely make the exception when it comes to videos. Having previously managed a video player on my own site, I can tell you it's something that I don't miss at all.

I created a wrapper around the videos used in our Week using CSS. You're welcome to steal my code, but you'll need to figure out how on your own.

(watch this video in a new tab or window)

The problem with including someone else's library or code in your web page is that you're relying on their service to be up and running and for there site to never go away. You can download other people's information as well. Unfortunately, it's often very bloated (large files) and you end up slowing down your user's experience with a bunch of code that you're not even using.

(watch this video in a new tab or window)

My pet peeves? I'm not going to say much more than read my pet peeves. If I had to highlight my top four for the Weekes that I teach it would be spelling, consistency, broken images, and untested responsive design (we'll get to it later in the Week). My last really big pet peeve doesn't really relate directly to our Week as much, it's maintainability. There's not much worse than going to a web site and seeing 'upcoming' information for something that weeks, months, or even years old. It removes all validity to the web site. Before you start something, make sure you can finish it; with a website, that means maintaining it.

(watch this video in a new tab or window)

I can't teach you everything there is to know about anything when it comes to the land of computing. The web didn't even exist when I went to college. I know, I'm old. You'll be old some day too and your kids will say, you used to do what? Fill in the blank.

Anyway, there are certain things that you'll do over and over, like using the bold tag or a paragraph tag. There are many things that you'll only do once in a while. That's OK. That's where Google searching comes in. Knowing some key words and learning how to spot what you're looking for quickly is the trick. It's a great skill to have. For example, if you want to make your font a different color, try a search for 'css font color'. If you want to build a table, try 'html table'. Stack Overflow is a great resource for answers. I'm sure other's will pop up too as time goes on.

It can be pretty difficult trouble-shooting your own code problems. Think that's hard? Try trouble-shooting someone else's. There are many ways to do things, even many right ways. So if you're having trouble with your code and your peer or even your professor don't know the answer right away, don't be surprised. The best thing to do is to work in baby steps. Change one thing at a time and test it. That way it's much easier to trouble-shoot the problem.

Another thing to keep in mind is not to bang your head against a wall for a long period of time with a problem. I usually give myself a 5 minute internet search if I don't know how to do something. If I still don't have the answer, I look to my peers for help. It's amazing how quickly you'll find the answer if you just give yourself different options.

(watch this video in a new tab or window)

  Let's dive into some cascading style sheets.  These are examples from an external style sheet.  Add something like this to your HTML to include an external style sheet:   
  
<!doctype html>   
  
<html lang='en'>   
  
<head>   
  
<link rel='icon' type='image/png' href='favicon.png'>   
  
<link href='minimal_style.css' media='screen' rel='stylesheet' type='text/css'/>   
  
<title>201810 IMS222</title>   
  
</head>   
  
The minimal_style.css has the css in it.  The first code that we'll look at is a ul which is an unnumbered list.  Codes here need squiggly brackets around them, then the styling is inside the squiggly brackets.  Each style type is listed on the left followed by a color and the style is on the right followed by a semi colon.   
  
Here we're setting the ul which is an unnumbered list to display.   
  
ul {   
        list-style: display;   
}   
  
Here we're setting the li which is a list item to have a left margin of 2 em.   
  
li {   
        margin-left: 2em;   
}   
  
Here we're setting the nav which is navigation or menu system to be 100% wide, go to the left, have a shadow, a background color, some padding, and align the text.  Look at some additional CSS just to get a feel for what it looks like.   
  
nav {   
        width: 100%;   
        float: left;   
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);   
        background-color: #212121;   
        padding-left:2em;   
        padding-right:2em;   
        text-align: center;   
}   
nav ul {   
        list-style-type: none;   
}   
nav li {   
        width: 20%;   
        text-align: center;   
        float: left;   
        margin-left: 0px;   
}   
nav a {   
        background-color: #212121;   
        padding: 14px 32px;   
        display: block;   
        text-decoration: none;   
        text-align: center;   
        color: #eee;   
}   
nav a:hover {   
        background-color: #192A75;   
}   
  
b {   
        font-family: source_sans_probold;   
        color: #676767;   
}   
h1, h2, h3, h4, h5 {   
        font-family: source_sans_probold;   
        color: #192A75;   
}   
h1 {   
        font-size: 2em;   
        line-height: 1.15em;   
        margin: 60px 0px 2px 0px;   
}   
h2 {   
        font-size: 1.25em;   
        line-height: 1.15em;   
        margin: 10px 0px 2px 0px;   
}   
h3 {   
        font-size: 1.01em;   
        line-height: 1.01em;   
        margin: 5px 0px 2px 0px;   
}   
h4, h5 {   
        font-size: 1.00em;   
        line-height: 1.00em;   
        margin: 5px 0px 2px 0px;   
}   
p {   
        line-height: 1.45em;   
        margin-bottom: 20px;   
}   
section {   
        margin: 80px auto 40px;   
        max-width: 1070px;   
        position: relative;   
        padding: 20px   
}  

(watch this video in a new tab or window)

 Cascading Style Sheets got their name because they cascade like water.  The style furthest away can get changed by one that's closer.  There are 3 different ways of styling.  External, Internal, and Inline styling.  An external style sheet is a separate document with just CSS in it.  You call it whatever you want, and then reference it in your HTML.  In the example here, I call it: Kirks_External_Style_Sheet.css   
  
<link href='Kirks_External_Style_Sheet.css' media='screen' rel='stylesheet' type='text/css'/>   
  
An internal style sheet is at the top of a web page.  It's inside style tags like this:   
  
<style>   
summary::-webkit-details-marker {   
  color: #80C16F;   
  font-size: 125%;   
  margin-right: 2px;   
}   
</style>   
  
Inline styling looks like this:   
  
<p style='margin:3em;'>Blah, blah, blah</p>   
  
The order is external to internal to inline.  So if you have styling for a paragraph <p> in all 3 documents, the internal styling will win.  It's important to note that the cascading piece only over-writes things that are the same.  If you set a color in the external style sheet and don't change the color but set other things in the internal or inline style sheet, the color will still be what you set it as in the external style sheet.  

(watch this video in a new tab or window)

The important thing to know about fonts on the web, is that they are a little different than fonts on your computer. If you set a font up on the web, and I don't have that font, the site is not going to look the way you want it to look for me. The two most popular ways to do fonts on the web are Google fonts and TypeKit. Google fonts can be found at https://fonts.google.com/. You embed the font by using something like:



TypeKit is an Adobe option and since I'm not a huge Adobe fan, I'll leave you to figure that one out yourself.

I'm also not a huge fan of embedding fonts because you're relying on someone else's server being up and running for your site to work. That just adds a layer of complexity to your code that may be unnecessary. Try not to go crazy with fonts. 1 or 2 on a web page is plenty.

(watch this video in a new tab or window)

Like fonts? Be original. Make your own font. MyScriptFont (at http://www.myscriptfont.com/) is a web site that allows you create a font from your handwriting. Then to convert the font to a web font use the Generator in FontSquirrel (at https://www.fontsquirrel.com/). Give it a shot, it's fun.

(watch this video in a new tab or window)

This is what I like to call, life lessons with Kirk. Don't try to be all things to all people. Find what you do well and build on those strengths. This is true for you personally and to your site. Also look for the quick wins, also known as the low hanging fruit. If you can quickly and easily make a change to your website that makes a big difference, go for it. If it's something that's highly involved, put it on the back burner. This is a good lesson for this Week, your future jobs, and your future, period. Time management is something we all practice and hopefully improve on. Just remember, every time you say yes to something, that means you're saying no to everything else.

(watch this video in a new tab or window)

A persona is basically a made up person that represents the problem that you're trying to solve. Sometimes they're called user stories. I usually just put myself in the shoes of my users and use the product like they would, and think about how I would like it to work. Some places like to do benchmarking (against competitors) but I'm not really a fan of that. Aren't you trying to make something better? Then why would you copy them?

If you're called to do a persona, you'll usually want to come up with a person (name and short background), their problem (as it relates to what you're trying to solve) and their goals (i.e. a solution that you can provide). If you're doing it for a company in the future, you may also include a photo of the person that you're trying to create a persona for.

(watch this video in a new tab or window)

3 popular concepts in design are Wireframes, Mockups, and Prototypes. Wireframes can be pencil drawings or line art for how you want your design to look. Mockups are images that move beyond wireframes that give you a better sense of the final design. Prototypes are almost functioning solutions. You may have a database that will be built later; the prototype would be functioning code without the database. Personally I like to dive right in on the code but if you're having trouble seeing the final product, I encourage you to try any or all of these concepts.

(watch this video in a new tab or window)

On a Mac, to take a screen shot, use Applications...Utilities...Grab...Capture...Selection. I also use a tool called Skitch which allows for annotations as well. You may use screenshots for a wide variety of reasons. Anytime you use a photo, I recommend keeping it small. 1024 pixels wide is generally acceptable. A jpg is also generally the preferred format. Try to keep photos under ½ MB. There can be reasons to go bigger than that like a photo sharing website, but even then I wouldn't force someone to have to download large photos while just perusing the site.

Name images without spaces. Spaces and the web are not good friends.

All images need to have alt text that describe the image too. Make the photo the size that you want it to be, let the user shrink it down but forcing them to zoom in on a picture will make the picture pixelated. Finally, putting "width='100%'" will keep your photo looking great at all sizes.

(watch this video in a new tab or window)

When you evaluate sites you can use the information you've already acquired from this course. Bruce Tognazzini also came up with what he calls the 'First Principles'. You can check it out at http://asktog.com/atc/principles-of-interaction-design/. Bruce has some great ideas. One thing I would like to add is, be nice, especially when you're evaluating your peer's website. People put a lot of time and effort into their work, give them constructive criticism on things that they can do to improve their site.

We've already covered some of my top pet peeve's (spelling, grammar, consistency, file size). I'd like to address content now. If you're site is about art, it should have a lot of art on it. If it's about being an editor for a newspaper, it should have a lot of writing on it. Having the appropriate amount of quantity on a site is just as important as the quality of the content. There's no specific formula for how much you should have. That's where you need to do what makes sense and that's why it's always good to have another pair of eyes look at your work. For all future projects in this Week, you should have someone evaluate your work. It can only help you get better.

(watch this video in a new tab or window)

Single web pages are OK but it's more fun to create an entire site. There are a number of ways to do that. The silly way is to recreate the menu system on every single page. Let's not do it the crazy way. You can also use an htaccess file to pre-pend and post-pend your web pages with a header and a footer. A third way is to use PHP to 'include' or 'require' another page. We'll try both of these methods in this Week. We'll cover the how-to later, I just want you to start thinking about your web pages on a larger scale, as a web site.

(watch this video in a new tab or window)

Every web designer needs to understand photos and the web.

The file size for photos need to be relatively small and need to fit on the page.

This is a photo taken on a Nikon D5500 at 6000 x 4000 which means it's 6000 pixels wide by 4000 pixels high; which is way too big for the web.

The RAW version is over 30MB and the JPG version is over 13MB.

A good general rule is to keep web photos below .5MB.

To do that, we'll keep the width of our images no more than 1024px wide.

Before manipulating the image, I'm going to duplicate (or copy) it and rename it.

I'm using a basic image editor called Preview that comes with a Mac, to change the size of the web version of the image.

Tools...Adjust size

If I change the size to 1024, you can see that it will be 114KB or .1MB.

If you uncheck the 'scale proportionally' option, you could stretch the image.

Please, please, please, don't use stretched images.

Let's put the image on a web page, by connecting to the server, copying the image,
and adding html to a web page to display it.

Just for fun now let's create a photo that's 1024 x 200.

First I'll open up the image with Preview, command c to copy it.

I'm going to use a program called Pixelmator to do the sizing.

File...New...enter in 1024 and 200...paste...zoom out...drag the corners to resize it
Some programs stretch images when you do this, Pixelmator does not.

...zoom in, and move it to where you want it

...ok...File...Export

I like jpg's for photos, this one is less than 58KB, tiny.

Let's put it on a web page, and voila, there you go.

(watch this video in a new tab or window)

 Responsive Design is a design approach allowing for one web page/site to be viewed easily and equally among many different devices and sizes.  It's essentially the way you make your site mobile friendly.  There was a trend not too many years ago to create a separate mobile (or m.) site specifically for smartphone users.  What a silly idea.  People have a very hard time maintaining one site, what made them think they could maintain two sites?  The other thing is that many things were missing on the mobile site.  Whenever I see a mobile site now, I just shake my head and close the window.   
  
With only a few lines of code you can make your site responsive.  Let's learn about it now.  Put this code on a web page and see how the background (and a few other things) change as you change the page size:   
  
/*Responsive Design Style differences for multiple sizes*/   
@media screen and (max-width:320px){   
  body {   
    background:#000;   
    color: #FFF;   
  }   
  A:hover {   
    color: #CCC;   
  }   
}   
@media screen and (min-width:321px) and (max-width:480px){   
  body {   
    background:#CCC;   
  }   
  A:hover {   
   color: #FFF;   
  }   
}   
@media screen and (min-width:481px) and (max-width:600px){   
  body {   
    background:#FAD2D9;   
  }   
}   
@media screen and (min-width:601px) and (max-width:768px){   
  body {   
    background:#D5FAD2;   
  }   
}   
@media screen and (min-width:769px) and (max-width:1024px){   
  body {   
    background:#77BE94;   
  }   
}   
@media screen and (min-width:1025){   
  body {   
    background:#D2DAFA;   
  }   
}  

(watch this video in a new tab or window)

Hey. Today I am going to make the My Interest site and I thought for my interest, I would make it about this drum set. I purchased it not too long ago. It's a Gretsch 7 piece drum kit. That's the content that I'll use.

I'm off campus so I need to use the VPN client to connect. Once connected, I'll go to my Finder window (command K) and connect to my disk space. Then I'll go to my IMS222 folder and since I've already done this project, I'll create a new folder called oldMyInterest and will put my old project in there. I have more files in my folder than you probably do, that's OK. 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 drag it over to copy it to my IMS222 folder.

Let's use a web browser to look at the copied site ( https://kirkhopkins.com/IMS/IMS222/MyInterest/ ). You can see that I have the shell of a website. You can use the Project Viewer to get to yours.

I'll use my text editor to edit the site. We've talked abut wireframes, mock-ups, and prototypes. Today I'm going to design a website in plain text. I'll have a Home page, a Purchase Log page, Photo Gallery, Video Gallery, and that's all for my site. If I compare that to the template with Home, This, That, The other, and Sample page. I will rename them to Purchase Log page, Photo Gallery, Video Gallery, and I will remove Sample page.

Let's look at the index.php page with my text editor. The include virtual wwwsiteheader pulls in the wwwsiteheader page just like it was part of this page. When we look at the wwwsiteheader page we see all of the code in it. Instead of having the wwwsiteheader code on every page, you can have it in a separate file. I'll undo the copy and edit the wwwsiteheader page by changing the menu.

I'll leave Home as index.htm. I'll change This to Purchase Log and this.htm to PurchaseLog.htm (with or without an underscore is OK), I still like camel case. I'll do underscores on this site. Next I'll move on to renaming the other menu items. Next I'll delete the Sample Page line (I'll still need to delete the actual page). If you need more menu items, just copy/paste a line or lines) and rename it. Since I'm done with renaming the menu, I can delete my notes about the menu names.

Let's change the title to reflect what the site is. I'm also going to rename the css respectively. Then I'll change the file names for each of these items to match the html. Since I removed the link to Sample Page, now I'll delete the sample page html file. I'll do a little more cleanup by removing other files that aren't being used.

Save the page and view it with the web browser. I made a lot of changes without testing the changes. That's a little scary, but it made sense to me to do it this way for now. Refresh the page and you'll see the new menu item names. For more testing, I'll change the content to I recently purchased a Gretsch Catalina Satin Deep Cherry Burst 7 piece kit. This site will tell you about that purchase on index.html and refresh it to see the changes.

Now let's add a picture because the page looks pretty boring. I'll find an image and copy it, then make a new folder called ForTheWeb, and paste the image into that folder and will rename the image to FrontPageImage.jpg. I'll resize it using a photo editor (I'm using Preview) to 1024 pixels wide, keeping the aspect ratio the same. You see that it's under our classes half of a megabyte limit. Save it and close it. Drag the resized image to the web folder that I want to use. I'll copy the file name so I don't have to re-type it, and paste that into the web page to display the image. Don't forget to include alt text. I like the casing to match, so I'll make the actual image JPG file extension lower case to match what I typed for the html. Save the html page, reload the web page, and we should see the image now, but it didn't work, so sad. Why didn't it work? It didn't work because I didn't reference the folder that the image is in. Once I add the folder name to the html, save, and reload, we'll see that it works now. Yay!

I already have CSS in the template provided that does styling for responsive design for images. Very cool.

Let's work on the Purchase_Log page. I don't have a section on this page but I had one on the index page, that's interesting. Let's look at the index page again. I think I have overkill going on with the open and close section on the index page. I'll remove them and save it (I should have reloaded the page). Now back on the Purchase_Log page, I removed the sample text. The header and footer are included. We'll open up the footer page to see what it says. You can steal my code, but make it your own. Here's the end of section, so we really didn't need it in the index page too. I'll change the text on the footer page.

Save (on your editor, then switch to your browser) and reload to see the changes. Every page that includes the header and the footer will have that respective content. Way cool.

I had started changing the content on the Purchase_Log page but did not save those changes yet. Let's add some content now. I'll add a paragraph like we did on the index page (to be consistent). I'll put in more content later. Save and reload to see the changes.

Now we'll work on the Photo_Gallery page. I don't really want an article, so we'll replace all of the content with new stuff. I'll steal the code for the image from the index page. Note that I have a bug in the code. I didn't close the paragraph, shame on me.

Find a few pictures and copy them into a temporary folder to be renamed and resized, then copy it over to the web. Hold the command key down to select more than one file at a time. I'll resize all 3 images down to 1000 pixels wide this time.

I'm going to make them more artsy with a photo editor called Pixelmator. I'll make a new image 1000 pixels wide by 300 pixels high. You could do a similar thing with Preview. I'll paste the image in, zoom out, and move the image to where I want it. When I'm happy, I'll export the image as a jpg and put it in the folder on the web. We'll do the same thing with the other 2 images. Close the window.

While I was doing that, I already changed my mind. Instead of using a Photo_Gallery folder or subfolder, I'm going to preface the image name with Photo_Gallery_ for organization and sorting purposes. With a few images it doesn't matter, but with hundreds or thousands of them, you'll want some organization method.

I'll copy the image name and paste it into my html. I added the closing paragraph and will test the code. It worked! Let's add a title to the image and a break. I'll use the title text as my alt text too. Test it. Then copy/paste it a few times, change names to the other images in the same folder and now I have a page with multiple images in a consistent format.

Uh-oh, I changed the name of my front page image and now it's broken. Rename it back to the original and we're good to go again.

We'll switch the break to a div with some inline styling and close the div and test it. I like it. I'll use that on the other images too. It looks like I forgot to change one alt text.

It takes a while to load the page when you're on VPN because VPN slows the network down.

Now we'll work on the Video_Gallery. I stole some code from our class site for formatting for a video and will change it for this video. I already have CSS to display a video (isn't that nice). I just need the URL for the video that's already on YouTube (wasn't that convenient). I have a similar site with videos. I'll use it to get the URL. You can grab a YouTube URL right from YouTube (vimeo too). Right click and select copy video url, paste it into your html document temporarily. All you need is the tail end of the URL (after the last slash). Delete the other temporary stuff, save, and reload. Voila!

I'll copy that and add a couple more videos the same way. I couldn't find my video of me setting up my drum kit so I'll remove the third video for now and may add it back later.

Let's add a paragraph, a div, and some text. I should also change my alt text. We can play one of the videos but you can't hear it because I have my sound turned down all the way.

The shell of the site is done. I have some content, a menu system that works. I should change the styling from the original template. The logo/graphic for the site also doesn't need to be called “My Interest” (viewable on the page). Let's look for the image that says My Interest. It's referened in the header. If you double-click it, it can open in Safari; let's open it with a text editor.

In the header, I'll search for the text My Interest. I didn't find it. When I right-click on the area of the web page I get a save image as option which tells me it's an image. I think it's site_logo.jpg; test my theory by looking in the folder and voila, there it is. I'll make a new site_logo by getting the dimensions first. It's a png with transparency. Now I'll look for other pictures. Once I find one, I'll grab part of the picture and make it fit the dimensions with a photo editor; export it as new_site_logo, edit the page, then reload the page. I'll get it to work before deleting the old image. It didn't work the first time because the image name of new_site_logo.png is wrong. It should be new_site_logo.jpg.

Since it doesn't fit very well, I need to do something to make it fit. I'll do it the easy way (this time) and reduce the size of the image. A page reload with the newly save image doesn't appear to work. We have a problem with cache. I'll rename the image so it's not cached and now it's just blurry. Bummer. Let's look at the css for logo. Find the dimensions (if you already forgot it like I did) and change the dimensions in the css. It's still not right. Double bummer. Now we're having a css cache problem so I'll use a little trick to reload cache on my css by adding a question mark to the css page call along with something (anything) new. Now it works.

If you make css changes, you can change the 1 to a 2 (in my case) and it will force a reload of the css.

The white background on my logo is a problem design-wise that I'll need to fix. I should also change the colors of the site to make them my own (and match the content).

I'll use the eye dropper tool to find a color to use for the site. I want to replace purple (actually it's green) with the new color. After looking for a minute, I decide to add a comment with the new color and start researching the page to find the color that I want to replace.

I'll use a program on the Mac called Grab to get a screen shot, to use Pixelmator to get the color. Unfortunately that exact value does not exist in my css. So I'll start changing some values to bright red (FF0000) and reload the page to find what I want to change. Luckily, I found it on the first try. Now that I found it, I'll replace the old color (123123) with the new color (753c23). I'll do the same thing for the darker site color of the footer. The menu should probably also match. I'll undo the footer change and do a global find and replace on the whole document to replace the old color with the new color. I don't think anything else changed, so now I have to find it manually again. It was just a little different. I'll do the same thing for the hover background color and everything listed as (123123). Change the css call from the header to force a reload of css. I think it changed.

Back in the 1980's there was a rock and roll group called Van Halen, the lead singer for the group was David Lee Roth. He had a no brown m & m's rule. Venues that they played at were supposed to remove all of the brown m & m's. If the band arrived, and there were brown m & m's, they knew no one read the setup details and there would likely be issues at that location.

I left a brown m & m in the template, at the bottom of the css. You will need to remove the KirksUnusedCSS... class. I left it there to make sure you went through the whole template and understand all of the css and html. If you're not using my template and you're using someone else's, you should do the same thing. If you're stealing a template from wix or somewhere else, a lot of them come with tons and tons of code that you're not going to use. Make sure you remove unused css.

That's it. I look forward to seeing your projects and what your interests are, and see what you come up with. Thanks.

(watch this video in a new tab or window)

 There are many times on a website that you want to collect data from your users.  To do that, you usually need a form.  Here is a sample form that meets WCAG 2.0 Level AAA standards that covers types of items you would find on a form:   
  
<section>   
<h1>Forms</h1>   
<h2>This is a place holder for a web page that has a completely accessible web form</h2>   
<form name='formMyHDGLocationManager' action='' METHOD='post' ENCTYPE='application/x-www-form-urlencoded'>   
  
<label for='a_text_field_01'>Text field</label>   
<input type='text' name='a_text_field_01' id='a_text_field_01' value=''>   
<label for='a_text_field_02'>Another Text field</label>   
<input type='text' name='a_text_field_02' id='a_text_field_02' value=''>   
  
<fieldset>   
<legendphp>Radio Buttons</legendphp>   
<br><input type='radio' name='gender' id='1st choice' value='1st choice'><label for='1st choice' Week='radio'>1st choice</label>   
<br><input type='radio' name='gender' id='2nd choice' value='2nd choice'><label for='2nd choice' Week='radio'>2nd choice</label>   
<br><input type='radio' name='gender' id='3rd choice' value='3rd choice'><label for='3rd choice' Week='radio'>3rd choice</label>   
</fieldset>   
  
<fieldset>   
<legendphp>Checkboxes</legendphp>   
<br><input type='checkbox' name='1st one' id='1st one' value='1st one'><label for='1st one' Week='checkbox'>1st one</label>   
<br><input type='checkbox' name='2nd one' id='2nd one' value='2nd one'><label for='2nd one' Week='checkbox'>2nd one</label>   
<br><input type='checkbox' name='3rd one' id='3rd one' value='3rd one'><label for='3rd one' Week='checkbox'>3rd one</label>   
<br><input type='checkbox' name='4th one' id='4th one' value='4th one'><label for='4th one' Week='checkbox'>4th one</label>   
</fieldset>   
  
<label for='a_dropdown_list'>Dropdown list</label>   
<br><select name='a_dropdown_list' id='a_dropdown_list'>   
<option value='Option 1'>Option 1</option>   
<option value='Option 2'>Option 2</option>   
<option value='Option 3'>Option 3</option>   
<option value='Option 4'>Option 4</option>   
</select>   
  
<p><label for='a_textarea'>Textarea   
<br><textarea name='a_textarea' id='a_textarea' rows='5' cols='55'></textarea></label></p>   
  
<input type='submit' value='Submit'>   
</form>  

(watch this video in a new tab or window)

Accessibility is a hot topic these days and I will say, when it comes to design, it does limit your options. Color schemes need to have a lot of contrast. It's a good thing though, because there are tools to check your pages to make sure they're accessible by everyone, which is really the goal. The main tool that I use is the WAVE extension for Google Chrome (http://wave.webaim.org/extension/). With this tool installed, you can even check pages that require you to login first, because the tool runs from your local machine. Install this tool and check some of your web pages.

(watch this video in a new tab or window)

Copy KirksSampleSite.zip to your web space and tweak it to make it your own. Change the color scheme and the menu and, of course, the content to your own interest. This is a sample site to show you how to create a whole site, and not just a page. You need to fill it up with something that is of interest to you. Make it yours. Have a peer evaluate it. Have your parents or friends use it and tell you what they think. Are there any typo's? Does it look different enough from the original to know that it's yours? Do you have an appropriate amount of content? Good luck and have fun.

(watch this video in a new tab or window)

 PHP is a popular general-purpose scripting language that is especially suited to web development.  It is very powerful and is widely used.  Up to now, all of our content has been static, which means you typed something, saved it, and viewed it on the web.  With PHP, you will begin to use dynamically created content.  You can type something like:   
  
<?php   
echo date('Ymd');   
?>   
  
on your web page and when you view it you'll see today's date in year month day format.  

(watch this video in a new tab or window)

 PHP needs to be installed on your website.  At Miami, it's already been installed.  To create a new PHP document, you can just copy an existing document and change the extension to php.  You can begin and end PHP multiple times in the document if you want to, or you can wrap the whole thing in PHP.  To begin PHP type '<?php' and to end PHP type '?>'.  When you're in PHP, you can still create HTML by using 'echo'.  The following will say 'Hello World':   
  
<?php   
echo 'Hello World';   
?>   
  
Now let's put that in bold:   
  
<?php   
echo '<b>Hello World</b>';   
?>   
  
Now let's make it a header:   
  
<?php   
echo '<h1>Hello World</h1>';   
?>   
  
Now let's make a list:   
  
<?php   
echo '<ul><li>John<li>Bob<li>Bill<li>Rick<li>Steve</ul>';   
?>   
  
Here's the same list a few different ways, all with different code formatting but with the same HTML formatting:   
  
<?php   
  echo '<ul>   
        <li>John   
        <li>Bob   
        <li>Bill   
        <li>Rick   
        <li>Steve   
        </ul>   
       ';   
?>   
  
  
or   
  
  
<?php   
  echo '<ul>   
          <li>John</li>   
          <li>Bob</li>   
          <li>Bill</li>   
          <li>Rick</li>   
          <li>Steve</li>   
        </ul>   
       ';   
?>   
  
  
or   
  
  
<?php   
  echo '<ul>';   
  echo '  <li>John</li>';   
  echo '  <li>Bob</li>';   
  echo '  <li>Bill</li>';   
  echo '  <li>Rick</li>';   
  echo '  <li>Steve</li>';   
  echo '</ul>';   
?>   
  
  
or   
  
  
<?php   
  echo '<ul>';   
  echo '  <li>John</li>';   
  echo '  <li>Bob</li>';   
  echo '  <li>Bill</li>';   
  echo '  <li>Rick</li>';   
  echo '  <li>Steve</li>';   
  echo '</ul>';   
?>   
  
Here's a loop to show you some of the power of PHP.   
  
$ThisManyRounds=3;   
for($round=1;$round<=$ThisManyRounds;$round++){   
  if($round==1){$Topic='American Literature';}   
  if($round==2){$Topic='Mathematics';}   
  if($round==3){$Topic='World History';}   
  echo $round.') '.$Topic.'<br>';   
}   
  
See if you can change the loop to show the dates of the last 180 days in the following format:   
Day of the Week, Month-Day-Year   
Good luck.   
  
Here's code to get you started:   
$ShowThisManyDays=30;   
for($day=-10;$day<=$ShowThisManyDays;$day++){   
  $TheDay=date('F m-d-Y, l',   
               mktime(0,   
                      0,   
                      0,   
                      date('m'),   
                      (date('d')+$day),   
                      date('Y')   
                     )   
              );   
  echo $TheDay.'<br>';   
}  

(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://kirkhopkins.com/IMS/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.