The Quantity of Information
You may have used the phrase “the file size is too big”, or “the webpage is slow”, but information can be quantified precisely.
- How many bits would be needed to distinguish blood types?
- How many trials would be needed to find out one’s blood type with yes/no questions?(for example:”Is the letter ‘A’ included in your blood-type? (yes/no)”-see the HTML below. Draw an if statements diagram to answer this question.I would be more likely using the structure in the diagram for “Complex Comparisons” in the last chapter
ex08-1.js, and write a function that shows a message “Your blood-type is ～” triggered by a click of the button.XHTML1234567891011121314<!DOCTYPE html><html><head><meta charset="utf-8"><title>Exercise 08-1</title><script src="ex08-1.js"></script></head><body><h1>Finding the blood-type</h1><p>Is the letter 'A' included in your blood-type? (yes/no) <input type="text" id="a"></p><p>Is the letter 'B' included in your blood-type? (yes/no) <input type="text" id="b"></p><p><input type="button" value="Guess!" onclick="bloodtype();"></p></body></html>
- Add a function that check the input and then display an alert window “Enter yes or no”, when a word besides “yes” or “no” has been entered.
The Information Quantity in an Image
Information quantity in a bitmap image.. Revisit Exercise 04-0
- A bitmap image consists of pixels.
- A pixel in black-and-white photos, as it is either black or white, holds one bit information (remember a bit can have a value of “1” or “0”). On the other hand, a pixel in colored photos requires the right amount of bits according to its color/information.
- The information quantity of the entire image can be calculated by multiplying the number of bits in one pixel and the number of pixels.
- How many kilo-bytes is a black-and-white photo with a resolution of 640×480?
- How many kilo-bytes is a 16-colored photo with a resolution of 640×480?
Text Encoding (Character code)
The process to convert readable letters into data, that can be processed by computers, is called text encoding.
<meta charset="utf-8"> ,that you have seen in the example HTML files throughout the exercises, specifies the text encoding for the HTML document. (FYI the opposite process is called “decoding”).
Open a Japanese webpage (for example http://www.yahoo.co.jp/) with Chrome and change the text encoding from View→Encoding. Change to for example Arabic and observe the outcome. (the video below is for japanese version of Firefox, not Chrome, but it does demonstrate the outcome).Remember the
charset="utf-8" that you always have in your html? Having this in your HMTL means you tell the browser/Chrome which encoding you want Chrome to use. Now when you use the text Editor (Atom), you can also specify (when editing the file) which encoding you wish to use (by default it would be utf-8). The exercise below will demonstrate that there are 2 separate things that happens:
- Encoding process when the text was created and saved by Atom
- Decoding process that is done by Chrome, which will follow the directive written in html (the charset above)
encodingtest.htmlwith “Atom”. It should display ありがとう using heading1 tag. For the keyboard to switch from alphabet to Japanese (Hiragana in this case) Hold the Command key while pressing the spacebar until “Hiragana is selected”. Don’t forget to include
charset="utf-8"as usual. Save it under
your public_html/exercise as usual. Access it using your Chrome. Do the following things
charset="euc-jp",save the file and reload the page.What do you see? Change it back to “utf-8” and reload the page.
- On Atom, change the character encoding to Arabic(ISO 8859-6) (Edit-Select Encoding), save the file and view the file with Chrome.What do you see?
charset="utf-8",save the file and reload the browser.What do you see? does the broswer display the same arabic charcter as displayed in Atom now?
harset,so the Exercise above will always show the proper contents.
Raw data may have statistical redundancy that can be reduced. In such a case, data compression algorithm can be performed in order to save memory by shrinking the data size.
- Decode the following bit stream that has been compressed using Run-length encoding.
- The length of each run (successive 0’s or 1’s) is 3 bits.
- Start with the length of 0’s.
- 000 represents that the same number is repeated many times. For example, when 0 is repeated nine times, because 9 can’t be written with 3 bits, we must think of it as seven 0’s, zero 1’s, and two 0’s(111 000 010).
- Make a grid of 9×9, fill in white for bits with 0 and black for bits with 1. What shape came up?
In this exercise, the original data and compressed data are the same size. Depending on the case, there may be times when the compressed data is larger than the original.
Look at the Reference below and compress the following data with Huffman coding.
Image files have several formats that differ in number of colors, compression, etc. The following formats are usually used on webpages.
- Lossless compression. 8bit coloring(256colors). Can be used for animation, by using multiple images.
- Lossless compression. 48bit coloring(281,474,976,710,656 colors)
- Lossy compression.The compression rate can be changed. 24bit coloring(16,777,216colors).
Photographs have different colors on every pixel and is difficult to compress it into a smaller size when using a lossless compression – which is the main reason of why JPEG is commonly used. In contrast, lossless compression is used for illustrations and logos, as the same color is used for a certain area repetitively with a vivid outline.
- Open your photo from your self introduction page using Preview.
- Click File→Save as…
- Select the lowest quality for JPEG and write it out as a different file.
- Open the preview of both, high and low, quality files. Can you see the difference?
- Compare the file size difference using Finder.
Size of Images
The size of an image sometimes means the file size, but usually the number of pixels. Actual size of the image (how many centimeters) cannot be determined because it depends on display devices.
As we learned above, the information quantity gets smaller as the number of pixels decrease. If the compressed image file is still large, you can reduce the number of pixels (using coarse sampling) to get a smaller file.
When making a webpage with many image files, thumbnails are often used instead of original files, and the original is displayed when the thumbnail is clicked(to make the process faster).
- Make a copy of your photo, and open the preview.
- Choose Tools→Adjust Size…
- Change the width and height, and confirm the file size.
- Edit the photo so the size is appropriate for a thumbnail.
- Edit Exercise 06-9 (save it as 08-7) so that it display the thumbnail image first but when the thumbnail image is clicked it will display the original photo.Tips: you can add an “onclick” event/attribute to an image tag so that the image become clickable. This onclick event would call a function that display the original image
Specifying the image size
img element, the size of the photo can be specified by manipulating
- The unit is in pixel.
- If only one of the
heightattributes is specified, the other will be adjusted automatically to keep the ratio.
setAttribute() can be used to change the size by scale.
- Select the attribute with
- The arguments are the attribute name and the value you want to change.
- Make a copy of your photo and name it
ex08-8.htmland fill in the following.
XHTML123456789101112<html><head><meta charset="utf-8"><title>Exercise 08-8</title></head><body><img src="picture.jpg" id="pic" alt="" width="600"></body></html>
width="400"and reload the browser.
ex08-8.jsand fill in the following.
- Create a button and call the function
Create a textbox, and add a function which changes the width of the image according to the number entered in the textbox.
- What is a bit?
- How do we calculate the file size of a bitmap image.
- What is a character encoding?
- What is the difference between lossless and lossy compressions?
- What kind of image is suitable for PNG and JPEG?