Landing : Athabascau University

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 : MiscPodcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 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: Learning Diary & Submission

  • Public
By John Borg in the group COMP 266 July 21, 2019 - 3:58pm

Hello all,

 

For unit two, I began by covering all of the material on Moodle, including the resource links that were provided. From there, I started my own research on the topic of HTML in order to understand the basics. I learned more the tagging system and how to add content to a web page. Many of the techniques utilized in my pages were learned from watching online tutorials. In the upcomming paragraphs, we will first discuss the correction exercise with the provided HTML documents. From there, I will dive into the web page that I created and map these efforts to the desired outcomes.

Excercise:

Sample1:


The first thing that I noticed was that the tag was missing from the sample1 html file. Thus, I added this so that the browser knows that it is reading an html file. I didn't bother changing anything regarding the encoding character, more specifically, I didn't make ASCII the default. There were some other minor errors in this file. One being that there were 'open & close' tags without any content in between, an example of this was in the title tags. Further, there were also cases where the closing tags were forgotten. This can be seen on line 16 of the original code, as there is no closing tag for a header. This results in multiple lines of text having the wrong font size. This same issue occurs once again with another header tag.

In order to make the file far easier to read, I worked quite hard to correct the indenting within the code. This ultimately helps segment different portions of the web page, making them easier to troubleshoot later. 

 

Additionally, the link to the second HTML page does not work because the files are not initially downloaded to the same directory. This is fixed in my submission, as I organized the way the files are accessed within a folder (Moving sample2 into the same directory. This logic can also be used to explain the embedded photo that doesn't work. Since the photo is not saved in the same directory, it cannot access or display the image. This can easily be resolved by downloading the image and storing it in the folder with the HTML file. 

Lastly, the list that was provided as an example in the Sample1 file had numerous mistakes regarding indenting. There were tags with missing closing brackets as well. Besides the missing brackets, the improvement just mentioned is beneficial in case anyone want's to analyze it in the future.  

Sample2:


The only error with regards to this page is how it was referenced by the index html file. However, asside from that, this page is exceedingly simple and doesn't carry any other mistakes. 

Learning Diary for Site Design:


After correcting the two provided html pages, I continued to create two more for use of my own website. All together, I currently have a home page, contact page, fishing page and forestry page. As I continue to develop the website, I intend to add more depth to each subset by including additional pages for each topic. 

Describe the rationale for what you have done, relating work back to personas and scenarios developed in Unit 1:


All of the pages on my site are geared directly to the personas I identified in Unit 1. For instance, I dedicated an entire page to the idea of becoming a "forest detective." I identified previously that a good chunk of my target audience is interested in learning more about how forests work. Because not all viewers are expected to be experts in the field, I made it extremely easy to navigate the information. I included various facts within a chart in hopes of making more digestable to the readers that are trying to learn more about trees. I also identified previously that some of my possible viewers are simply looking for good adventure suggestions. For this reason I made it exceedingly simple to see my most recent explorations. On the home page, I have included an unordered list containing links to YouTube videos of my most recent trips. Because these users are not looking for too much information, I chose to leave links to videos rather than including more text. Another niche that I wanted my website to fill (based on the invented personas & scenarios) is that of helping average people with tree planting tips. With the way that the forestry page currently is, there is quite a bit of information for people that are looking for planting advice. However, to add depth and clarity for all of my possible audience, I plan on adding a table containing all common tree species with a photo of the bark in the next column. 

Explain how each learning outcome was met this unit:


The primary goal with unit two is to be able to write well-structured, easily maintained, standards-compliant & accessible HTML code. This outcome has been met through the completion and correction of sample html files 1 & 2. These corrections display compliance with HTML5 standards and are listed at the top of this post. Further, for creating my additional pages I read tutorials and watched plenty of videos in order to learn the 'etiquette' of programming in HTML. More specifically, I wanted my HTML file to be easy to read for both future writers and viewers. With that being said, the code is well-structured in that it contains closing tags and proper indenting for easy segmenting. One way that I managed to make the page more accessible for different people using different browsers is through the use of attributes. These are implemented to give a written description of the image in case the photo could not be displayed. One measure which I took in order to ensure that my web page is easy to maintain was the way the html and image files are structured. Specifically, I have all of my local images in one folder that is within the folder containing the HTML pages. In addition, I was trying to make my code as semantic as possible, making the code easier to understand for visitors and screen readers. These semantic elements (ex. table tag) can be used to clearly define content. 

Explain and analyze what worked and what didn't:


There were a few hurdles in this unit that I found to be quite frustrating. Firstly, I was really unsure with what was required of the two sample HTML files. I didn't know if we were supposed to simply correct and submit them and submit, or use them as the starting point for our own pages. Additionally, I spent a lot of time trying to complete a functioning mail form for my website. At first, I was puzzled on how to achieve this. However, with persistance and plenty of research I found that a form submission can not be routed directly to an email address. Ultimately, there is no HTML feature that can send form submissions directly to an email. With that being said, I learned that mailto can be utilized in an action field to invoke an email client to send the form submission to another address. 

Asside from that, learning the basics of HTML I actually felt were quite easy and enjoyable despite being very different than working with C++ or Java. Something that worked very well for me while working on this was constantly ignoring what the pages looked like. Throughout the process, I never analyzed the "looks" of my page. This allowed me to really focus on the content that I was choosing to include, rather than getting caught up in things that don't matter at this stage. Also, prior to organizing my files in WinSCP I watched several videos covering the best ways of sorting html files and images. This helped me avoid confusion when it came to uploading the final product. 

 

Describe what you would do differently if you had to do it again?


If I had to complete this unit again, I most likely would have spent less time on the theory of HTML. Programming with this tool is a skill that can only be learned through doing, thus, I think that I learned fastest when I just jumped in and started creating. 

Website Link:

Unit 2 Submission Files