Landing : Athabascau University

Unit 2 - HTML Learning Diary

  • Public
By Mats Phillips in the group COMP 266 November 22, 2016 - 5:06pm

Link to SCIS website: http://student.athabascau.ca/~matsph/

Zipped Unit 2 files (including website): Mats Phillips Unit 2

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:
  • &lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt 

There is no xmlns attribute in thetag; I added this:

On line 23 there was:

  • &ltul&gt&ltli&gtlists are useful&ltli&gt for many things&ltli&gt and can be unordered, &ltul&ltli&gtindented&ltol&gt&ltli&gtnumbered&ltli&gtlike this&lt/li&gt&lt/ol&gt&lt/ul&gt&ltli&gt and more&lt/li&gt&lt/ul&gt
  • The first 5 &ltli&gts have no closing tag
  • The second '&ltul' needs an ending '&gt'
  • I made the above 2 changes

Most of the '&lttd&gt' tags had no closing tags; I added them.The '&ltimg' tag does not end with '/&gt'; I added the ‘/’ before the ‘&gt’ 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 '&lta href=http://www.athabascau.ca&gt' 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 '&ltp&gt' and '&ltP&gt' tags had no closing tags; I added them.
The '&ltP&gt' tags need to be lower case; I made them so.
Styling with '&lti&gt' is not allowed, so I replaced '&lti&gt' the tag with the '&ltem&gt' tag.
Styling tables with ‘border’ and ‘colspan’ is not allowed, as styling should be left to CSS. I removed the attributes.
The '&ltH2&gt', '&ltH3&gt', and 2 '&lth3&gt' headings had no closing tags after the title, I added them.
The '&ltH1&gt', '&ltH2&gt', and '&ltH3&gt' 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]-->Mats Phillips Unit 2<!--[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:
  • &lt!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:

On line 23 there was:

  • &ltul&rt&ltli&rtlists are useful&ltli&rt for many things&ltli&rt and can be unordered, &ltul&ltli&rtindented&ltol&rt&ltli&rtnumbered&ltli&rtlike this&lt/li&rt&lt/ol&rt&lt/ul&rt&ltli&rt and more&lt/li&rt&lt/ul&rt
  • The first 5 &ltli&rts have no closing tag
  • The second '&ltul' needs an ending '&rt'
  • I made the above 2 changes

Most of the '&lttd&rt' tags had no closing tags; I added them.The '&ltimg' 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 '&lta 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 '&ltp&rt' and '&ltP&rt' tags had no closing tags; I added them.
The '&ltP&rt' tags need to be lower case; I made them so.
Styling with '&lti&rt' is not allowed, so I replaced '&lti&rt' the tag with the '&ltem&rt' tag.
Styling tables with ‘border’ and ‘colspan’ is not allowed, as styling should be left to CSS. I removed the attributes.
The '&ltH2&rt', '&ltH3&rt', and 2 '&lth3&rt' headings had no closing tags after the title, I added them.
The '&ltH1&rt', '&ltH2&rt', and '&ltH3&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.

 

Comments

These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.

(Required)

(Required)


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 postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc