(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 class 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 Material” or view one class 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 class 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 class 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:
(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 class 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 (unnumberred) 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.