Home

5. Picture this… – Images

It is great to see experimentation with layouts, colors and overall design. Consider usability as you work. Some of the coding is fine but the user experience isn’t great yet. Does the heading text standout on the background? Is the font size appropriate for the page? Is navigation information placed where it is easy for the user to find? Have you considered accessibility by people with disabilities?

Provide some indication on page view that you have included the assignment elements. For example, say which images represent the different file types .gif, .jpg, .png

Resizing images – Use an image editor to make an image the appropriate size for page display. If you include a huge high resolution file and make the browser resize it with height and width tags, it takes a long time to load. This is considered “amateurish” and should be avoided.

Image map – Normally define more than one area or just use image in the link. The idea is to be able to provide information or links about multiple areas in the image. Good examples include identifying each person in a picture of many people, or using a map to select detailed information (more compact than a list).

Are you including tags just to satisfy the coding assignment requirements? For example – float: none – you are not learning anything from this because you can’t tell what it does. Try a range of different values so you can actually see what is happening when you change the values.

Some page submissions have so much stuff in them that these can’t be graded. There is no way to tell if you randomly included code or if you understand the requirements for the assignment and can apply the tags appropriately. Make a simple page for the assignment. You can copy and paste into your final project if applicable.

In general, there is no problem if you copy code from someplace else if YOU understand what is going on in all the code. If the code includes errors, these are now errors in your code, so fix them.

Just because the browser displays your code, it can still have errors. For example <Image> is incorrect, but browser accepts it anyway. The actual tag is <img>. Firefox Web Developer Page Source viewer tool highlights the incorrect code. Watch spacing – there should be a space between the attributes within an element tag. Some obvious typos – “-” instead of “=”. This is why you need to check that your code is correct and it does something that you can see in the page view. I have pointed these out in most cases.

Multiple .css files – If you are using preformed .css files, please include an additional .css file or style element with the formatting for the coding assignment.

By now, you should automatically include comments in your code.  It takes a lot of time to review all the discussions and the coding assignments. Please use comments in your code – for you and for me. Including the list of assignment tags is a start. It helps a lot when you point out where you have used the assignment tags within the code. Shows you know what you are doing.

As far as other web basics
* replace the default Thimble page title with your own words.
* Use style sheets for formatting – either internal or external are ok.
* All images links should include an alt tag for accessibility

Great progress. Many wonderful images and lots of cute cats and puppies.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s