Hey All! Here is my Learning Diary for Unit 2.

Work I Have Done For The Unit:

I put extensive effort into Unit 2, and the result of my work can be seen in the .zip embedded in this post. Additionally, I have provided links to my website on SCIS, as well as links to a version-controlled mirror hosted on Github Pages. Overall, throughout the course of Unit 2, I have written accessible, well-structured and HTML5 compliant code while developing a personal portfolio website, that will help promote Jamal Habash (me) in the job market and to academia.

The website I have developed closely match my designs in Unit 1, and does an excellent job of meeting the needs of the personas and scenarios I have identified in Unit 1. The “home” page of the website, index.html, contains a short bio, and links connecting to pages that describe the important work and projects Jamal has been involved in throughout his time at University. From index.html, a user can easily access any part of the website, from blog posts to works.

For example, Dr. Whittmer, a persona developed in Unit 1 was interested in learning about the details of Jamal’s work experience and projects. He can access the website from his iPad, and scroll down the “home” page to find a number of projects listed, with links to their dedicated project pages. Other personas such as Matthew Black and Sanjay Lee can access the website from any device, and get a good understanding of Jamal’s interests by navigating around index.html using the menu at the top of the web-page. For example, if Sanjay Lee is interested in reading Jamal’s blog, he can click the menu link labelled “blog” and be taken to the section of index.html that links to individual blog pages.

While developing and designing the website, my goal was to make all pages and information easily accessible from the home page (index.html). This goal was accomplished, as regardless of what a user is looking for, they can find and connect to information quickly and easily from the home page. The index.html serves as a great summary of who Jamal is and what his skills are. If someone would like more detailed information about a particular project or experience, they can easily access that information by clicking on the relevant links from index.html. Additionally, the index.html provides users with the ability to contact Jamal and also discover other places Jamal is active on the internet (i.e. LinkedIn).

Learning Outcomes & Requirements:

A minimum of three HTML pages complying with at least XHTML 1.0 standards or (better):

I have written 4 HTML pages complying with HTML5. The pages are index.html, SampleBlogWorksPost.html, StopSignDetection.html and VehicleDetection.htm

At least one image: 

I have included 7 images. 6 images can be found in VehicleDetection.html, and 1 image can be found in SampleBlogWorksPost.html

At least one hyperlink to an external website:

I have included 4 hyperlinks to external websites. These links can be found in index.html. 1 of the links is currently visible, the other three are not visible and will be formatted later using css. 

Sufficient text to require the use of at least two heading style:

I used 5 different heading styles. All 5 heading styles can be found in index.html and throughout the rest of the webpages.

At least one list (ordered or unordered):

Two unordered lists can be found in index.html.

At least one div tag (preferably more), with a specified name, to identify a section of a page:

Numerous div tags with specific ids can be found throughout each html page. These will be used to format the website using CSS in the future.

At least one span tag (preferably more), with a specified name:

Multiple span tags can be found used in index.html

A table:

A table can be found in SampleBlogWorksPost.html

A form, the contents of which are mailed to the author (you):

A form can be found in index.html.

The learning outcome for this unit was “be able to write well-structured, easily maintained, standards-compliant accessible HTML code.” I believe I have met and far exceeded these learning outcomes. My HTML code is fully compliant with the HTML5 standard. This is supported by X(HTML5) validators, in addition to my own knowledge of writing HTML5 code.

See the following link to view the validation of my code by a popular internet HTML5 validation service:

https://html5.validator.nu/?doc=http%3A%2F%2Fstudent.athabascau.ca%2F~jamalha2%2F&showsource=yes

In regards to being well-structured and easily maintained, my code is well commented and my use of both divs and spans will enable me to easily update and expand both the look and content of my website in the future.

Critique of Templates:

The following is my corrected and critiqued sample 1. I have placed comments within the HTML document explaining the changes I made. 

http://student.athabascau.ca/~jamalha2/unit2/sample1.html

The following is my corrected and critiqued sample 2. I have placed comments within the HTML document explaining the changes I made. 

http://student.athabascau.ca/~jamalha2/unit2/sample2.html

What Went Well:

In my opinion, Unit 2 went very well. With my strong designs from Unit 1, I felt comfortable writing the HTML5 compliant code that fit the needs of my personas and scenarios. I did an excellent job planning ahead for the future, and my use of div's and spans will make it easy to write CSS styling code for the website in Unit 3. 

Submission: 

SCIS Web Space (working-copy): http://student.athabascau.ca/~jamalha2/

Permanent Location for Unit 2 HTML Files on SCIS: http://student.athabascau.ca/~jamalha2/unit2/

.Zip File:  

Github Pages: http://jamalhabash.ca/comp266/