Athabasca University | AU Student/Staff Login | Invited Guest Login
Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.
QUICK COURSE LINKS: Add blog post - Read latest group posts - FAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc : Podcasts for each unit
Updated resource pages: Unit 1 - Unit 2 - Unit 3 - Units 4 & 5 - Unit 6 - Unit 7
mportant notice: the student web server is unavailable. Until this is fixed, we do not require you to upload your site to the student server. See Running a web server on your local machine for details of how to meet the requirements for the final unit
Unit 2 - HTML Learning Diary
Link to SCIS website: http://student.athabascau.ca/~matsph/
Zipped Unit 2 files (including website): 
Work for this Unit:
Activities:
Read the Unit 2 FAQ
Made a comment on the Landing group post about the XHTML 1.0 strict cheat sheet: https://landing.athabascau.ca/bookmarks/view/220646/w3c-xhtml-10-strict-cheat-sheet
Learned about XHTML from: http://www.w3schools.com/html/html_xhtml.asp
Made a notes file to record important facts
Found a markup validator: http://validator.w3.org/
Saved a link to the XHTML 1.0 strict cheat sheet: https://www.w3.org/2010/04/xhtml10-strict.html
Reviewed the WCAG 2.0: https://www.w3.org/TR/WCAG20/ and kept notes on it
Made a critique of the sample templates using my notes, and looking at other people’s ciritiques, and edited the code to fix the mistakes.
Made 11 html pages of the website.
How I have met the Learning Outcomes:
· Be able to write well-structured, easily maintained, standards-compliant, accessible HTML code.
I made notes on the XHTML standards, and the WCAG 2.0 standards, so I can reference the standards in order to make standards-compliant HTML. The improved templates and the 11 pages I made all follow the standards, and are well-structured, easily maintainable (except for the menu bar in each file, which should be referenced in a single separate file), and accessible by people with mobile devices, and hearing/seeing difficulties.
Other Requirements
Provide (in your learning diary) a critique of the templates you have been given, explaining why they were poorly written and how you have improved them.
Sample 1:
- There is no DOCTYPE tag at the top of the file, I added this:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
There is no xmlns attribute in thetag; I added this:
- xmlns=”http://www.w3.org/1999/xhtml”
On line 23 there was:
- <ul><li>lists are useful<li> for many things<li> and can be unordered, <ul<li>indented<ol><li>numbered<li>like this</li></ol></ul><li> and more</li></ul>
- The first 5 <li>s have no closing tag
- The second '<ul' needs an ending '>'
- I made the above 2 changes
Most of the '<td>' tags had no closing tags; I added them.The '<img' tag does not end with '/>'; I added the ‘/’ before the ‘>’ on it.
The language of the page was not specified; I added ‘lang=”en”’ and ‘xml:lang=”en”’ in the html tag.
The img tag does not have an ‘alt’ attribute; I added ‘alt=”AU logo”’ in the img tag.
The src attribute value in the img tag is not surrounded by quotes; I added quotes.
The '<a href=http://www.athabascau.ca>' attribute value was not surrounded by quotes; I added quotes.
The “border” and “colspan” attribute values were not surrounded by quotes; I added quotes.
The title does not contain any text; I added “Sample 1”
Many of the lines went over 80 characters; I separated them onto separate lines whenever they did.
The '<p>' and '<P>' tags had no closing tags; I added them.
The '<P>' tags need to be lower case; I made them so.
Styling with '<i>' is not allowed, so I replaced '<i>' the tag with the '<em>' tag.
Styling tables with ‘border’ and ‘colspan’ is not allowed, as styling should be left to CSS. I removed the attributes.
The '<H2>', '<H3>', and 2 '<h3>' headings had no closing tags after the title, I added them.
The '<H1>', '<H2>', and '<H3>' heading tags need to be lower case; I made them so.
The tags and content were poorly structured, badly indented, and unorderly; I restructured, indented, and ordered almost all of the code.
Sample 2:
- The DOCTYPE does not match the other page’s DOCTYPE, and the line is over 80 characters long. I copied the DOCTYPE from the first page to replace it.
- In strict XHTML, the lang attributes are required. I added ‘lang=”en”’ and ‘xml:lang=”en”’ in the html tag.
Provide an explanation of how your pages fit with the needs of the personas and scenarios you identified in Unit 1.
Persona 1: Saun Simmerling
Scenario 2: Interesting Facts about the Rubik's Cube
Saun is able to read the front page, browse 3 of the main pages, and watch 3 videos linked to on the front page.
Scenario 3: How to solve the Rubik's Cube
Saun is able to browse the beginner solving methods on the beginner solving method page, and is able to watch a beginner solving method video available in the video tutorials list.
Persona 2: Janice Miranda
Scenario 1: Finding Special Rubik's Cube patterns
Janice is able to go to the special patterns page, and memorize algorithms for 3 different patterns (more patterns can be added later).
Scenario 5: The 5*5*5
Janice can click on Other Puzzles, click on the 5x5x5 picture, see where it can be bought, how to solve it, its records, and its special patterns.
Scenario 7: Solving away from home
Janice can go to the special patterns page and find the cube-in-a-cube-in-a-cube pattern she found before using her phone, as all the links she need to use are tappable text.
Persona 3: Saun Simmerling
Scenario 4: Fastest solving methods
Robert can go to the “Advanced Methods” page, and look at the methods that were used to solve the Rubik’s Cube in under 5 seconds.
Scenario 6: Buying a new puzzle
Robert can go to the Other Puzzles section, look at the puzzles on the page, and go to the page for the 4x4x6 Fisher puzzle to find out where to buy it.
Notes:
Went well:
Writing the code for the website went well, and was really easy, as all the tags and structure of HTML are very simple and straight forward.
Didn’t go well:
Finding, learning, and making sure the code and webpages met the XHTML 1.0 strict and WCAG 2.0 standards. These standards were so long, and so hard to find, that it took me 2 days before I had all the standards written down.
What was most difficult and why:
Finding and learning the standards and rules the HTML had to comply with. It was the most difficult because there was no clear list of what standards applied, or where the standards could be found.
If done again, would it be done differently and why:
I would be quicker in finding data and links to webpages to add to my site, as I often spent too long looking into extra details that weren’t really needed on my site.
How did previous experience help/hinder completing the tasks:
Writing HTML before definitely helped, as I didn’t need to watch any tutorials on how to write HTML.
Most surprising thing learned:
Writing down data found from other sites takes up much more time than I imagined, and there are many more online stores and websites about the Rubik’s cube and other puzzles than I thought there were.
Most useful thing learned:
Researching and finding data takes up most of the time.
Link to SCIS website: http://student.athabascau.ca/~matsph/
Zipped Unit 2 files (including website): <!--[if gte vml 1]>
<![endif]--><!--[if !vml]-->
<!--[endif]-->
Work for this Unit:
Activities:
Read the Unit 2 FAQ
Made a comment on the Landing group post about the XHTML 1.0 strict cheat sheet: https://landing.athabascau.ca/bookmarks/view/220646/w3c-xhtml-10-strict-cheat-sheet
Learned about XHTML from: http://www.w3schools.com/html/html_xhtml.asp
Made a notes file to record important facts
Found a markup validator: http://validator.w3.org/
Saved a link to the XHTML 1.0 strict cheat sheet: https://www.w3.org/2010/04/xhtml10-strict.html
Reviewed the WCAG 2.0: https://www.w3.org/TR/WCAG20/ and kept notes on it
Made a critique of the sample templates using my notes, and looking at other people’s ciritiques, and edited the code to fix the mistakes.
Made 11 html pages of the website.
How I have met the Learning Outcomes:
· Be able to write well-structured, easily maintained, standards-compliant, accessible HTML code.
I made notes on the XHTML standards, and the WCAG 2.0 standards, so I can reference the standards in order to make standards-compliant HTML. The improved templates and the 11 pages I made all follow the standards, and are well-structured, easily maintainable (except for the menu bar in each file, which should be referenced in a single separate file), and accessible by people with mobile devices, and hearing/seeing difficulties.
Other Requirements
Provide (in your learning diary) a critique of the templates you have been given, explaining why they were poorly written and how you have improved them.
Sample 1:
- There is no DOCTYPE tag at the top of the file, I added this:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&rt
There is no xmlns attribute in thetag; I added this:
- xmlns=”http://www.w3.org/1999/xhtml”
On line 23 there was:
- <ul&rt<li&rtlists are useful<li&rt for many things<li&rt and can be unordered, <ul<li&rtindented<ol&rt<li&rtnumbered<li&rtlike this</li&rt</ol&rt</ul&rt<li&rt and more</li&rt</ul&rt
- The first 5 <li&rts have no closing tag
- The second '<ul' needs an ending '&rt'
- I made the above 2 changes
Most of the '<td&rt' tags had no closing tags; I added them.The '<img' tag does not end with '/&rt'; I added the ‘/’ before the ‘&rt’ on it.
The language of the page was not specified; I added ‘lang=”en”’ and ‘xml:lang=”en”’ in the html tag.
The img tag does not have an ‘alt’ attribute; I added ‘alt=”AU logo”’ in the img tag.
The src attribute value in the img tag is not surrounded by quotes; I added quotes.
The '<a href=http://www.athabascau.ca&rt' attribute value was not surrounded by quotes; I added quotes.
The “border” and “colspan” attribute values were not surrounded by quotes; I added quotes.
The title does not contain any text; I added “Sample 1”
Many of the lines went over 80 characters; I separated them onto separate lines whenever they did.
The '<p&rt' and '<P&rt' tags had no closing tags; I added them.
The '<P&rt' tags need to be lower case; I made them so.
Styling with '<i&rt' is not allowed, so I replaced '<i&rt' the tag with the '<em&rt' tag.
Styling tables with ‘border’ and ‘colspan’ is not allowed, as styling should be left to CSS. I removed the attributes.
The '<H2&rt', '<H3&rt', and 2 '<h3&rt' headings had no closing tags after the title, I added them.
The '<H1&rt', '<H2&rt', and '<H3&rt' heading tags need to be lower case; I made them so.
The tags and content were poorly structured, badly indented, and unorderly; I restructured, indented, and ordered almost all of the code.
Sample 2:
- The DOCTYPE does not match the other page’s DOCTYPE, and the line is over 80 characters long. I copied the DOCTYPE from the first page to replace it.
- In strict XHTML, the lang attributes are required. I added ‘lang=”en”’ and ‘xml:lang=”en”’ in the html tag.
Provide an explanation of how your pages fit with the needs of the personas and scenarios you identified in Unit 1.
Persona 1: Saun Simmerling
Scenario 2: Interesting Facts about the Rubik's Cube
Saun is able to read the front page, browse 3 of the main pages, and watch 3 videos linked to on the front page.
Scenario 3: How to solve the Rubik's Cube
Saun is able to browse the beginner solving methods on the beginner solving method page, and is able to watch a beginner solving method video available in the video tutorials list.
Persona 2: Janice Miranda
Scenario 1: Finding Special Rubik's Cube patterns
Janice is able to go to the special patterns page, and memorize algorithms for 3 different patterns (more patterns can be added later).
Scenario 5: The 5*5*5
Janice can click on Other Puzzles, click on the 5x5x5 picture, see where it can be bought, how to solve it, its records, and its special patterns.
Scenario 7: Solving away from home
Janice can go to the special patterns page and find the cube-in-a-cube-in-a-cube pattern she found before using her phone, as all the links she need to use are tappable text.
Persona 3: Saun Simmerling
Scenario 4: Fastest solving methods
Robert can go to the “Advanced Methods” page, and look at the methods that were used to solve the Rubik’s Cube in under 5 seconds.
Scenario 6: Buying a new puzzle
Robert can go to the Other Puzzles section, look at the puzzles on the page, and go to the page for the 4x4x6 Fisher puzzle to find out where to buy it.
Notes:
Went well:
Writing the code for the website went well, and was really easy, as all the tags and structure of HTML are very simple and straight forward.
Didn’t go well:
Finding, learning, and making sure the code and webpages met the XHTML 1.0 strict and WCAG 2.0 standards. These standards were so long, and so hard to find, that it took me 2 days before I had all the standards written down.
What was most difficult and why:
Finding and learning the standards and rules the HTML had to comply with. It was the most difficult because there was no clear list of what standards applied, or where the standards could be found.
If done again, would it be done differently and why:
I would be quicker in finding data and links to webpages to add to my site, as I often spent too long looking into extra details that weren’t really needed on my site.
How did previous experience help/hinder completing the tasks:
Writing HTML before definitely helped, as I didn’t need to watch any tutorials on how to write HTML.
Most surprising thing learned:
Writing down data found from other sites takes up much more time than I imagined, and there are many more online stores and websites about the Rubik’s cube and other puzzles than I thought there were.
Most useful thing learned:
Researching and finding data takes up most of the time.
- Unit 2 - HTML Site Building
August 24, 2022 - 3:01pm
Hassan Jasim - MorseCodeHappyBirthday
June 23, 2022 - 12:25pm
Adam Kroeker - MorseCodeSimonSays
June 23, 2022 - 9:22pm
Adam Kroeker - Unit 2 and Learning Diary
October 28, 2022 - 12:01pm
Andrew Jackson
COMP 266
