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 6: JQuery Proposal Ideas

  • Public
By John Borg in the group COMP 266 October 17, 2019 - 9:34am

Below are a list of ideas that I would like to implement to my website using JQuery. Several of the following ideas are re-implementations of features that currently exist on my site. I believe that by utilizing JQuery I will be able to build a website that is easier to maintain, more efficient, and has improved "look & feel." 

1 - Firstly, I would like to re-implement the image slider on the 'Home' page of my site. My initial design of this feature was built in JavaScript and CSS. The current transitions were created myself in CSS and JavaScript was used to toggle between them. This original implementation had several visual bugs, particularly, the transitions were never quite seamless. Thus, I plan to re-integrate this to my webspace using JQuery to toggle between images with an effect. This will most likely be done using slideToggle() to display or hide appropriate elements with a sliding motion. This will help my website appear more professional. I also believe that this photo carrousel on the home page of my website helps to “set the stage” for new visitors accessing it. 

2 - The second idea I had that required the use of JQuery was further development of my form validation implementation. In my original attempt at this idea, the browser would display an alert message once an error in the input fields was detected. This alert was relatively easy for visitors to ignore since it didn’t seem as though the alert correlated to information on the page. The alert looked more like a pop-up that users would likely exit without reading. Thus, I would like to implement a JQuery program to give a bigger visual queue to visitors using the page. Particularly, I would like to utilize JQuery for the event detection of the submission. I would also like to use it to incorporate some form of bold red notification that appears upon an error. This will make the contact form more intuitive to use for the non-computer savvy visitors that I have previously identified. 

3 - Another interesting idea that I began learning about while researching for this unit was a user-ended font size changer. This will be meant to increase accessibility to my webpages for individuals who struggle with vision issues. Ultimately, I would like this implementation to let users choose the size of the text for the page they’re reading. Not all of my identified users have the same quality of vision. With this being said, I believe that an intuitive, easy to identify, text size slider bar will help visitors adjust font sizes accordingly. 

4 - This next idea that I would like to integrate to my websites ‘Home’ page doesn’t necessarily benefit any one of my identified personas specifically. However, I do believe that it will help the “look & feel” of my site as well as make it appear more professional. This idea is a dynamic title for the landing page of my site. I believe that a “clean” looking animation for the title will help my website appear updated, modern, and also help appeal to my younger, targeted visitors. 

5 - The last idea that I would like to integrate to my site is the use of JQuery to toggle and transition my drop-down navigation menu. With the current JavaScript implementation, there are several bugs in the functionality of this program. Specifically, when the page is shrunk to a width below the drop-down’s threshold, the menu would quickly flash where it would normally appear. It would not be until the “burger” icon is clicked again that it appears. I plan to fix these issues by using JQuery to transition the menu upon an event detection and also toggle the “burger” animation. 

Ultimately, I greatly look forward to designing and implementing these ideas.