|
|
|
|
|
Your vision portfolio is to be constructed in the form of a web document. This has a couple of advantages, images can be presented easily (and in colour if needed) and at the end of the course you will have a document that I hope you will be proud of and be something that you can show to potential employers (and mum and dad!).
Some of you will be proficient web authors. This document is intended for those who have not worked with HTML before. Basic HTML is easy to learn and is a useful skill for you to have.
Normally web pages reside in your WWW directory and would
be publicly accessible. However, until the assessment has been
completed you should construct and keep your portfolio web pages
within a private directory (say called Portfolio) within your
working area.
To access your portfolio pages you can use the
[File, Open Page..., Choose File...] menu sequence in your browser.
HyperText Markup Language (HTML) is the markup language in which World Wide Web hypertext documents are written.
It should be noted that HTML is designed to specify the logical organization of a text document - not the visual appearance. It also provides important extensions for hypertext links and user interaction. HTML was specifically designed not to be the language of a WYSIWYG (What You See Is What You Get) word processor.
Instead HTML requires that you construct your document in terms of logical units, such as headings, sections, paragraphs, lists and so on. The interpretation, and method of display, of these logical elements is left up to the browser that views the document.
This approach offers great flexibility -
we do not need to know what the reader of HTML document will have available to them for viewing the document, what size their browser window will be, the fonts they are using, or indeed whether they are using a plain text terminal or a graphics terminal.
An HTML document is simply a text file (constructed using any text editor, say wordpad or notepad under Windows, or emacs or vi under Unix, or even MATLAB's text editor) that is organized into logical components using markup tags. These tags are the instructions to the browser that indicate what each part of the document means.
For example the tag that is used to indicate the start of a paragraph is a 'p' enclosed in angled brackets, like this <p>. The end of the paragraph is indicated by the same tag but with a forward slash prepended to the tag, like this </p>
Here is an example of an HTML file, and directly below it is its raw HTML code. The main HTML file in your folder/directory would typically be called index.html as this is the file a browser will try to open by default within a folder/directory.
This is a paragraph that is not very exciting.
This is another paragraph.
Now we will have an unordered list.
You can draw horizontal lines.
This text is displayed exactly
as
formatted in the source document using a constant width font
- this is the best way to display source code.
Click here to go to the CSSE home page
Mona Lisa centred
Now for a table of Mona Lisas
|
|
|
|
|
|
|
|
Here is the raw HTML that produced the web page above.
<html> <!-- indicates that this is an HTML document -->
<head> <!-- The head contains information about the document.
Here we only provide title information -->
<title> This is the title of the document </title>
</head> <!-- End of HEAD block -->
<body bgcolor="#ffffff" vlink="#ff0000"> <!-- Now the body of the document, here we have
included specification of the background
colour and the colour of visited links -->
<h1> A Sample of HTML </h1> <!-- a level one heading -->
<p> This is a paragraph that is not very exciting. </p>
<p> This is another paragraph. </p>
<h3> This is a level 3 heading, you can go down to level 6 </h3>
<p> Now we will have an unordered list. </p>
<ul>
<li> Item one in the list. </li>
<li> Item two </li> <li> Note that the format of
the
source document
is irrelevant, the browser is only concerned with the tag information. </li>
<li> Though you can force<br>
line<br> breaks<br> manually. </li>
</ul>
<ol> <!-- The start of an ordered list -->
<li> The first and </li>
<li> second items in this ordered list </li>
</ol>
<hr> <!-- A horizontal line -->
<p> You can draw horizontal lines. </p>
<pre>
This text is displayed exactly
as
formatted in the source document using a constant width font
- this is the best way to display source code.
</pre>
<a href="http://www.csse.uwa.edu.au">Click here to go to the CSSE home page </a>
<br>
<a href="test.html">Click here to go to an HTML document called "test.html"
in the same directory as this document</a>
<p>
<img src = "Mona_Lisa.gif"> <!-- This is how you insert an image -->
</p>
<center>
<img src = "Mona_Lisa.gif"> <!-- This is how you centre something -->
<p> Mona Lisa centred </p>
</center>
<p> Now for a table of Mona Lisas
<table>
<tr> <!-- start of table row -->
<td> <ing src = "Mona_Lisa.gif"> </td> <!-- 1st element of the row -->
<td> <ing src = "Mona_Lisa.gif"> </td> <!-- 2nd element of the row -->
<td> <ing src = "Mona_Lisa.gif"> </td> <!-- 3rd element of the row -->
</tr> <!-- end of table row -->
<tr> <!-- start of next table row -->
<td> <ing src = "Mona_Lisa.gif"> </td>
<td> <ing src = "Mona_Lisa.gif"> </td>
<td> <ing src = "Mona_Lisa.gif"> </td>
</tr>
</table> <!-- End of the table -->
</p> <!-- End of paragraph containing the table -->
</body> <!-- End of the body of the document -->
</html> <!-- End of HTML -->
Note that the newer HTML and XML standards require that all items have opening and closing tags. For example all paragraphs and list items must be closed with corresponding </p> and </li> tags. (In the past these logical units were implicitly closed by any subsequent tag that indicates the start of another block of text.)
Note that images can be in gif, png or jpeg format.
Read this or lose marks...
It is very important that links to images and MATLAB source files within your web page are defined using relative addresses. You will eventually have to copy your web portfolio into a marking directory and it is essential that your links will remain valid. For example if you wish to link to a file 'moments.m' within a 'Lab2' subdirectory of your Portfolio directory you should use
<a href="Lab1/moments.m">A link to moments.m</a>A link specified this way will still be valid after your portfolio directory has been copied into a marking directory.
Do not use absolute addresses, say, something like
<a href="/home/year3/smith01/IT412/Portfolio/Lab1/moments.m">A link to moments.m</a>This link will not work if you move your portfolio dirctory because the link will still point to the original location of 'moments.m' and I will not have direct access to this location.
Be very careful if you use a web page editor:
Some web page editors (especially Microsoft Products) are prone to
creating links in terms of absolute addresses, and use \ to delimit
directory names rather than / as specified in the HTML
standard. Windows file names are not case sensitive and the links may
be all upper case. In particular they can create completely useless
links such as
<a href="C:\MY DOCUMENTS\VISION\PORTFOLIO\LAB1\MOMENTS.m">A link to moments.m</a>I will not have access to your C drive! The case of the file names may be incorrect and a link specified this way is not W3C compliant.
If you submit a web portfolio with defective links that make it impossible for me to see your work you will be penalised heavily. You cannot get any marks for work that I cannot see.
imwrite(im,'filename.tif'); % The image format is inferred from the ending imwrite(im,'filename.jpg'); % This saves an image as a jpegWarning: If your image data consists of floating point values (doubles) it should be rescaled to the range 0-1 before writing. I have written for you a function imwritesc.m that does image rescaling to 0-1 before writing.
A plot or composite figure can be saved as an image or as a postscript file. Assuming the plot you want to save is in 'Figure 2' you can do the following:
figure(2); % Set the current figure to 'Figure 2' print -dtiff filename.tif % Saves current figure as a tiff image print -dps filename.ps % Saves current figure as a postscript fileThe images that result from the print command can be very large. If you use the -r0 flag the figure will be saved to an image at screen resolution, eg
print -dtiff -r0 filename.tif % Saves current figure at screen resolution
Do a 'help' on imwrite and print for more details
Resizing Images
In constructing your portfolio you may want to reduce the size of some images. A problem with using xv to do this is that it does not interpolate data from the source image when resizing - it simply uses a subset of the pixels in the original image. This can result in lines being 'lost'.
The ImageMagick utility convert does interpolate data from the source image when resizing - every pixel in the source image is represented in some way in the final image. To reduce an image to 30% of its original size and convert it from tiff to jpg use the following command:
% convert -geometry 30% bigimage.tif smallimage.jpgdo a 'man' on convert to see all the things it can do (you will be impressed)
Alternatively you can use MATLAB's imresize function (use 'bilinear' or 'bicubic' interpolation)
One learns HTML by example. Simply look for a document that contains a layout that you like and choose [View, Page Source] from the browser's menu bar to see the source of document. The quality of the new HTML editors (eg Netscape Composer) means that increasingly one can avoid working directly in HTML. However, it is often important for you to understand the principles behind HTML in order to use these editors really effectively.
You can access the files that make up this web page at
/cslinux/examples/it412/WWW/Portfolio
There is plenty of on-line documentation about HTML, look at
http://www.csse.uwa.edu.au/WWWinfo/html_overview.html
Have Fun!
Finally, you would need to archive all the Matlab source files, image files, html files, etc., into a single file that retains the subdirectory structure for final submission. To do so, you could use the Unix/Linux tar command. For more detail about tar, see some examples given under the An introduction to Linux page. For those students who are more inclined to use the Windows applications, the zip program might work also. However, you should check that all the files recursively down to the subdirectories are all archived correctly. If you do use the zip program then ensure that the archive file extension is .zip.