(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.