In class on Friday (Week 05)

On Your Own - Due by Thursday 02-25-2021 at 11:59pm

Goal Assignment Grading Rubric
Video/Transcript: WebPage05 and fotor.com

(watch this video in a new tab or window)

For Web Page 05 I duplicated Web Page 04 and changed the code to say Web Page 05 at the top. I also put in some internal styling and I evaluated Alex's page for the assignment. I thought I would spend the rest of this time showing you how you could edit images with fotor.com.

I have an image in my downloads folder called curious cat. I went to fotor.com on my web browser and clicked on 'Edit a Photo'. Then I dragged my image over. Then I resized the image to 1000 pixels wide. Next I cropped the image to 300 pixels tall and adjusted the section of the photo to keep. Then I saved it to my downloads folder with a new name.

Now I need to add that to my web site by dragging it to the image folder on the web that I am using for Web Page 05. I'll rename the image once it's there. Then I change my HTML to reference (or call) the image and set appropriate alt text. Reload the page. There's my new image.

New material to learn before class on Friday

Video/Transcript: Creating a multiple page HTM site

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

Video/Transcript: IMS222 - FixThisSite step by step

(watch this video in a new tab or window)

Now I'm going to walk you through the fix this site project

Our first class project with multiple pages

Let's go to the assignment viewer and grab the goal, assignment, and the grading rubric

I'm going to view page source

And I'm going grab all the information about the assignment

Now I need to login to my webspace

Now that I connected to my webspace I need to go to my IMS222 folder which is either in public_HTML or www

And here's IMS222

And let's just duplicate webpage 4

And this is going to be called FixThisSite

I right-clicked and selected Get Info and set "open with" to BBedit

You may want to do that

That way you can double click on .htm files and it will open with your editor instead of opening with a web browser

So let's start from the top by renaming the title to Kirk's FixThisSite

I'll leave the external style sheet reference in for now

I have some internal styling

I will replace the content of the body, down to the footer

I will copy the project source code, to paste into my project

I'm doing this because I like to make sure I do everything for the project that's required

So I'm just going to quickly save that and make sure that I can get to the assignment

Reload the Assignment Viewer to ensure that the project is named correctly

Search for your UniqueID to jump to the assignment on page, and look, there it is

Because I don't want to have to reload the page every time I'm just going jump straight to my page

The goal of the assignment is to demonstrate design concepts learned and to demonstrate understanding of the use of images and basic HTML

The content should include:

-List the web address for a site that you think needs to be fixed (should be a site that you have not used yet; should be linked with a target to a new window)

-It cannot be craigslist (Kirk did that one)

-List at least 3 problems with the site

-Show a screenshot of the site that you think needs to be fixed

-Create a Prototype (Web Page) that addresses (fixes) the problems identified

You can begin from my template, you need to modify the CSS and content to make it uniquely of course

I picked the site craigslist so let's go to craigslist

I need a screen shot of the site so I'm going to do command space for a quick way to find the screenshot app

I'm going to go ahead and grab a big chunk of this site, capture, then close that window

The screenshot was saved on my desktop

Open the screenshot with an image editor, I used Preview

The image is going be way too big

Let's just make it 1000 pixels wide because the class requirement is 1024 pixels wide or smaller

It needs to be a JPEG (jpg)

Export the modified image and I will call it SiteToBeFixed

You can name it whatever you want

Notice that it's 457 kilobytes (KB)

When it's changed to a JPEG it becomes a lot smaller

That's under half MB for 500 KB limit

I'll save it on my desktop for the moment and now I have my screenshot

I can close the Preview (image editor) and I'm going over to my webspace

I already have my FixThisSite folder

Create a new images folder, it could be called whatever you want

I'm going to call mine FixThisSiteImages

Drag that new image into the new images folder



So let's go ahead and just tweak this little bit

Edit the FixThisSite.htm page now

I removed the Due date information

I changed the H1 to Kirk's Fix This Site Project

I don't need to the display what the goal was

I can show the create this so I created the FixThisSite

I don't really need the "Create text" anymore

I will create a new unnumbered list

I will create a list item with "List the web address for the site that you think needs to be fixed"

I will make a link called "Craigslist has following the issues" outside of the unnumbered list to the web page to be fixed

Copy the URL and paste it in the href link code and because this is a link that should open a new window because it's taking you off of my site I'm going to do target = _blank

I decided to change my unnumbered list to an ordered list (to see numbers)

I am adding an H2 with problems identified

List problems

Add the screenshot of the site that needs to be fixed

I'll do another H2 titling what I am going to show next

Begin to insert the image (screenshot) with meaningful alt text

Reference the folder name with cases matching

Use a slash "/" to designate a folder

Add the image name with cases matching

Reload the page on the web browser to review your work

I am going to remove the external style sheet now

Reload the page on the web browser to review your work

Let's do another H2 to title the prototype of the site that needs fixed

Create a link to a webpage that opens in a new tab or window with target = _blank, I will duplicate an existing page and name it FixedSite.htm

I'm demonstrating how to use a full path for a link with "https://kirkhopkins.com/IMS222/FixedSite.htm"

Edit the FixedSite.htm page

Let's start fixing the site

I'm going have H1 Craigslist and fix the problems identified

I'm going to use QuickTime to copy an image from a movie

Create a new Preview document (which pastes the picture in)

Change the width to 1000

Export it as a JPEG

I'll name it without spaces and save it in my FixThisSiteImages folder on the web

Add the HTML to the web page to be able to see it when we reload the page with the browser

I have a broken image because I did not reference the folder (FixThisSiteImages)

I'm demonstrating how to use a relative path for an image with "FixThisSiteImages/FeatureOfTheDay.jpg"

Computers are not smart, they only do what you tell them to do

By adding the folder name and a slash before the image name, I am displaying the image on the page properly

Voila, no problem

Let's make the image response with inline styling of 50%

It's good practice to add a semi-colon after each style attribute

Now the image is responsive

I'll switch the image from inline styling to internal styling to apply to all images on the page

I switched it to 45% to see the change

Next, I'll fix the next 2 problems identified

I'll add an H2 to name the photo

Now I'll create an unnumbered list to address the problem

Be consistent

Keep in mind that my problems and solutions will be different than yours so you may not have an unnumbered list

BBedit offers a sort option under Text...Sort Lines to alphabetize my list

Reload your page as you make changes

Make sure you have enough content to demonstrate how your fixed site addresses the problems

I like to use W3Schools (via Google search) to find answers to HTML and CSS questions

Stay consistent with your page with the source code as well as with what is presented on the page

On Your Own - Project: FixThisSite.htm - Due by Thursday 03-04-2021 at 11:59pm