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

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.