Monday, February 25, 2013

Understanding File Formats: Format Evaluation Exercise

Hello Students,
In this exercise you will practice using the "save for web & devices" feature in Photoshop, a media industry standard when creating compressed images. Creating images that have visual clarity and small file size is extremely important in optimizing a website for viewing online.

File Format Exercise
  • Download and 0pen the image of trees posted below in Adobe Photoshop
  • Go to File / Save for Web & Devices
  • Photoshop has 12 presets, save 1 example of each. Use self-descriptive file names and save them in your portfolio folder inside a new folder labeled "images"
  • Create a new document in Photoshop that is 200X200 pixels, fill the image with a gradient, create a circular selection and create a new layer and fill the circular selection with another gradient, the colors can be your choice. Red is the hardest color to compress, it will show the most artifacts from compression.
  • Go to File / Save for Web & Devices
  • Photoshop has 12 presets, save 1 example of each. Use self-descriptive file names and save them in your portfolio folder inside a new folder labeled "images"
  • Compare the results
  • Create a new HTML file in your portfolio directory. Your HTML file must be UTF-8 and be properly formatted for validation, it can use the same CSS file that your portfolio page does. 
  • Choose the images that have the smallest file size, the best image quality and the best balance of file size and image quality. Embed these images on your file format HTML page.
  • Create a link to your new file format HTML page in your Portfolio Page.
Images that have large flat areas of color such as
blue sky can show compression artifacts
Your gradient test image should look like this

Friday, February 22, 2013

Photoshop Text Effects for your Portfolio Page


Hello Students,

Your newest assignment is to create a Banner Graphic to customize your portfolio page with one of the text effects below. Choose one of the tutorials below to work through. Create a new photoshop document and create one of the text effects for your own portfolio page banner.







- Mr.W

Wednesday, February 20, 2013

Web Design Portfolio

Hello Students,
Your new assignment is to create a new website for yourself that will link to the exercises, writing assignments and projects that you will complete in this class. This project upon completion can serve as a portfolio of your work and will be turned in for part of your final grade. Follow the instructions carefully and read the steps thoroughly.

Web Design Portfolio Page Project: 
1) Make a new folder for this project. Create an HTML document. This page will become your home page. This file must be saved as text in UTF-8 format, with no byte order mark (BOM). Save this file as a text-only file, and when you save the file name it "index.html". Make sure you name it exactly as it says: the words "index" and "html" with a period between them, with no spaces and no capitals.

2) This page must display a headline (in an <h1> tag) that states your full name. This should be the very first line in the<body> section. It should say something like "Seth Wilson's Home Page".

3) Following this headline will be a sub-headline (in an <h2> tag) that says "My Web Design Experience".

4) Following this sub-head will be one or more paragraphs (literally coded as paragraphs, using <p> and </p> tags) that indicate your writing assignment from last week.

5) Following this paragraph will be another sub-headline (in an <h2> tag) that says "What I Have Learned in ROP Web Design".

6) Following this sub-head will be one or more paragraphs (literally coded as paragraphs, using <p> and </p> tags) of the second part of your writing assignment from last week.

7) Following this paragraph will be a simple paragraph (literally coded as a paragraph, using <p> and </p> tags) of one sentence that indicates the name of the text editor that you used to create this page.

8) This page's <title> must indicate that this is your home page for your class work, so it should say something like "Seth Wilson's Home Page". Remember that the <title> always must be in the <head> section.

9) Add the HTML 5 DocType that will enable you to use an HTML validator. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). First, at the very beginning of your document, before the <html> tag, place this line of code:

<!DOCTYPE html>

10) Add the character encoding meta tag. Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the <head> section. So right after the <head> tag, place this line of code:

<meta charset="utf-8">

11) In summary, this page must correctly demonstrate the use of the following tags:
  • DescriptionTag
  • document type declaration (DTD) (see step 9 above)
  • character encoding meta tag (see step 10 above)
  • HTML document <html>
  • head section <head>
  • title <title>
  • body section <body>
  • heading 1 <h1>
  • heading 2 <h2>
  • paragraph <p>
12) Create an HTML document. This page will become your CSS Script. This file must be saved as text in UTF-8 format, with no byte order mark (BOM). Save this file as a text-only file and name it to "main.css" with no spaces and no capitals.

13) Create a CSS script that modifies each of the tags used in your HTML document, each HTML Tag used must be modified.

14) Your CSS must modify the:
  • Text Sizes
  • Fonts
  • Text Color
  • Background Color (or image, make sure the text is readable with whatever background you use)
  • Paragraph Background Color
  • Paragraph Background Margin

Tuesday, February 19, 2013

Getting Closer to Validation: Metadata and Character Encoding

Character Encoding for WebPages: HTTP file headers

Hypertext Transfer Protocol (HTTP) is the language used by a Web server and a Web browser to communicate with each other.

Every time a Web server serves a page to the browser, it adds an invisible "HTTP response header" to the file. This file header (not to be confused with the <head> section of a document) is metadata, which means it contains information about the file that it is serving to the browser. Many servers include character encoding (the character set used in the document) in this header. In other words, the server tells the browser how the document is encoded. (But, what the server says about the encoding may not be how the documents it serves are actually encoded; this is determined by your text editor when it saves a file.)

Most servers will say the files it serves are either ISO-8859-1 (Western European Latin characters) or the newer Unicode standard, UTF-8. In documents written in English there is little difference between these two standards; most noticeable differences will be in special punctuation. But if you wish to have your Web page display more than Western European languages (perhaps a page that mixes English with Chinese, for example), you cannot use ISO-8859-1; UTF-8 would be the way to go. At any rate, UTF-8 is the current standard for Web pages.

Browsers (also called "user agents") use an "HTTP request header" when requesting a file from the server. In this request header the browser identifies itself with a "user agent string." By keeping track of these user agent strings, Web traffic analysis software can create logs showing information on what percentage of users come to a site with Firefox, Safari, or Internet Explorer, for example.
Thecharacterencodingmeta tag

Many servers, but not all, indicate the character encoding in the HTTP response header. But whether or not your pages are on a server that indicates the encoding, you should do so in the document itself, by adding the appropriate character encoding meta tag to the head section. Assuming the document was encoded in UTF-8, and is using HTML 5, you simply need to add this to the <head> section:

<meta charset="utf-8">

Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the<head> section.

The HTML validator needs to know which character set the document is encoded in so it can properly evaluate it. So if your pages are on a server that does not indicate the encoding, it is necessary to add the character encoding meta tag to your HTML or the validator may not be able to properly evaluate the page. Additionally, if your pages are not being served by a Web server (they are being viewed locally, or perhaps they are to be burned onto a CD) the browser will need the character encoding meta tag in your HTML to properly display the page.

In the case where the server indicates the encoding, and you also indicate the encoding with the character encoding meta tag, there is no problem if your tag and the file header from the server indicate the same encoding. But if the server says the encoding is, for example, ISO-8859-1, and your meta tag says UTF-8, the validator will give you a "character encoding mismatch" error. In such a situation the validator assumes the server's encoding is the one to use. In other words, in the event of a conflict between your tag and the server, the server overrides your character encoding meta tag.
How to seeaserver’scharacterencodingsetting

To see what your server says about the pages it is serving, you need a way to see its invisible file response header. A tool such as Rex Swain's HTTP Viewer will allow you to see this, including the character encoding, if any is indicated. Go there and enter a URL for a server that you wish to check then look at the "Receiving header."

If you see something like:
Content-Type:·text/html;·charset=UTF-8
then you know the server says the documents it is serving are encoded as UTF-8.

If you see something like:
Content-Type:·text/html;·charset=iso-8859-1
then you know the server says the documents it is serving are encoded as ISO-8859-1.

If you see something like:
Content-Type:·text/html
then your server is not indicating the character encoding.

Remember that if your server does not indicate the character encoding, it is even more important that your pages contain the character encoding meta tag. This will give the browser the information it needs to properly render your page (otherwise it will have to guess at the encoding, and it may guess wrong), and it will give the HTML validator the information it needs to properly evaluate your page.
Keepeverythingin synch

To make sure the browser renders your page as you intend (so that special characters such as curly quotes, apostrophes, accented characters, dashes, etc. display properly), and to enable the HTML validator to work, it is important that the server’s character encoding setting, your page’s character encoding meta tag, and the actual character encoding of the document all match.

It is recommneded that Web pages use the UTF-8 encoding. To ensure that your pages are actually encoded as UTF-8, your text editor must be configured to save your pages as UTF-8

Setting Komodo Preferences for UTF-8 / No BOM:

Launch Komodo and go to File/Preferences/Internationalization.
Uncheck the top option box to find the UTF-8 option in the pulldown menu
Change this second language-specific default encoding option to UTF-8.
Leave Signature BOM unchecked.


Wednesday, February 13, 2013

CSS Mini Page + Writing Assignment

Hello Students,
Read the details of this project thoroughly before beginning, it consists of 2 parts. Part 1 is a writing assignment that must be created as a simple HTML page. The second assignment is to create a CSS script to enhance the look of the HTML page. Due on Tuesday.

Part 1:
Writing Assignment - A Summary of our studies in ROP Web Design

  1. Create a new blank HTML file
  2. Format the HTML file with the proper HTML tags and Doctype declaration
  3. Write a title for your page. Format it with the h1 tag
  4. Write a subtitle for your page that includes your name and grade and what city you where born in. Format it with the h2 tag
  5. In your own words write a paragraph that summarizes your experience with computers and programming before this class began. Format it with the paragraph tag
  6. In your own words, write a second paragraph that summarizes what you have learned so far in this ROP Web Design class.Format it with the paragraph tag
  7. Save your document in a new project folder
Part2:
CSS Assignment - Format Your Content
  1. Create a new blank CSS file
  2. Create a set of CSS Rules to format your h1, h2 and p tags
  3. Use CSS to modify the color of your text, the font and the text size
  4. Use CSS to modify your p tag to indent your text and create a colored background for the paragraph
  5. Explore CSS properties to enhance your page, use CSS creatively
  6. Save your CSS document in the same folder as your HTML file
  7. Create a link in the head of your HTML document to link to your CSS file


Resources:


    Monday, February 4, 2013

    Mini Website Project

    Basic HTML Assignment: Mini Website
    Your Basic HTML Assignment is to create a simple 4 page website that is about anything you like. You will create a menu for navigation on a home page, and 3 other pages. These can be About, Contact and Sites of Interest. You could also have pages titles Pictures or whatever your subject matter is about. Each page should have a menu for navigation plus content. Each page should have an image or photo and text, links, lists etc. A full page is not necessary, the focus here is creating navigation, links and using color and embedding images.

    Subject Matter: You can make your website about anything you like. You can make it about yourself, a favorite band, tv show, movie, food, car, place etc. The idea is to introduce me, the reader, to your interests. If you have an idea for your site ask me and we can think about how to structure your website.

    For help: Google it or ask your neighbor before asking your instructor. Below are notes about the tags we discussed in class as well as extra's. Or check out the barebones HTML guide on the link list on the side of this blog.

    REQUIREMENTS:
    • You must code this project in HTML from scratch.
    • You must insert the proper HTML tags, Use appropriate headings to structure each of  your pages.
    • Each page must contain a simple menu at the top for navigation, and a signature at the bottom to end the page such as your name, a quote or something else unique.
    • Must have a total of  4 pages, more is allowed for extra credit. Page titles can be "Home, About, Contact, Favorite Websites, etc.."
    • Include 1 image or photo on each page.
    • Include at least 2 lists (ordered or unordered)
    • Include at least 3 links to external websites (for instance the class blog etc...).
    • You must include your email address either on your contact page or in your menu.
    • Each page must have a background image or color
    • Your home page must be titled "index.html" and be organized in a folder with all other html files and images.
    • Make sure all pages have the .htm or .html extension and all images or photos are formatted for web correctly (jpg, gif, png) and reside in the same folder as the html files.


    HTML NOTES:

    Tags are used to format your text, text can be a link, a list, a paragraph, big, small, red, blue etc. In html tags are made like this:
    <></>

    You must always begin and end your tag, tags effect everything in between them. If you forget to end a tag it will effect everything after it. So to make some text look bold I would write my HTML like this:
    Here is some <b>bold</b> text

    And it would be rendered like this:
    Here is some bold text


    Remember that your document must be formatted, it has an html tag, plus a head and a body. Most of the content your site goes in the body. It basically looks like this:
    <html>
          <head>
          </head>
                 <body>
                 </body>
    </html>

    You can also make the title of your document show up in the window. The title tag is:
    <title>this is my website isn't it cool</title>

    Other tags change the way text looks, like bold or italic. Try some of these others:
    <i></i> makes text italic
    <tt></tt> makes text teletype
    <h1></h1> makes text into a header, 1 is the largest, 6 is the smallest
    <hr></hr> puts a horizontal line on your page
    <center></center> makes text align center
    <blockquote></blockquote> makes the text indented

    You can also format large pieces of text like a paragraph with the p tag:
    <p></p>

    If you want that paragraph oriented, you can add the align command:
    align="center"
    align="right"
    align="left"

    So if you want a paragraph that is left oriented, then your tag looks like this:
    <p align="left"></p>

    To make text into a link you can use the a tag. To link to a local document you can
    write your html like this:
    <a href="aboutme.html">About Me"</a>

    If your link goes to an external site then you must include the entire URL like this:
    <a href="http://www.myblogwebsite.com">My Blog"</a>

    You can set the color of several different things in HTML. In the <body> tag, the bgcolortextlinkvlink, and alink attributes define the colors for the page background, text, unvisited links, visited links, and active links (i.e. the moment the link is being clicked on).

    To change text color for part of a page, use the <font> container tag with a color attribute.

    Color attribute values take one of the following forms:
    "#RRGGBB", where RRGG, and BB are the red, green, and blue components of the color, in hex, ranging from 00 to FF.

    One of sixteen "widely understood color names": aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhite (white), or yellow (yellow)

    Hex code color chart from w3schools.com

    HTML COLOR AND BACKGROUND TAGS
    Adding color to your html files is easy. You can also use images for backgrounds as well.

    Adding a background color is easy, add the bgcolor tag to your body tag. Pick a color from the chart above and type in the 6 digit hexadecimal code.
    <body bgcolor="669933">

    Adding a background image is easy too. Use the background tag to repeat an image across your background.
    <body background="yourfilenamehere.jpg">

    Check out these tags below to add color to text. Remember just wrap these tags around the text you want to modify.
    <font size="3" color="red">This is some text!</font>
    <font size="2" color="blue">This is some text!</font>
    <font face="verdana" color="green">This is some text!</font>

    Embedding images is easy too, but I will let you figure that one out on your own!  ;-)

    Check out this website called HTML MADE EASY:


    - Mr.Wilson



    Ok have fun!