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

Unit6- Using Libraries: Learning Diary

  • Public
By John Spence in the group COMP 266 October 1, 2019 - 9:26am

For this unit I implemented jquery into my website. The first thing I did was use selectors to change the font and font color for every time I used a title h1-h5 and any paragraph text. This selector was easy to implement across all of my pages. Although this may not have been the best use of a selector, it did make my code more efficeient and using it helped me learn how they worked, so it was valuable experience. Next I tried to implement a fade effect between photos on my rotating banner. The fade in and fade out was not difficult to add onto my interval I previously set up, but the timing was extremely difficult. Trying to set up the timers together in these functions made the photo fade in and out at incorrect times, aswell as fade out and never come back. After lots of debugging I finally achieved my goal of the fade in and out banner which greatly improved the look of the banner. This will be a great addition for all visitors as it makes the page look more professional to a potential sponsor, and more visually stimulating to the casual visitor. Next I implemented a plugin from fotorama.io in order to improve my gallery. This meant that you could click through the photos. This was a great addition to the gallery as it used a premade jquery code to make a professional looking gallery. Sadly, this meant my modal I implemented in the previous unit wasn’t going to be useable. I tried to make an onclick function that didn’t trigger changing the page while still zooming out, but the modal didn’t add anything to the page once I got it working, so I removed it. The modal is now implemented on my sponsorship page which I think a potential sponsor would enjoy. I may use the modal function again in the next unit if I decide to make another page called “Blog”. I found throughout this Unit that there were a lot of bad plugins provided by websites that were either out of date or not functional. Finding a trusted website can be difficult sometimes and can be frustrating and is a downside of not coding it yourself. Although, when I found fotorama.io it was easy to implement and easy to use so I am happy that I used it. Using a jquery plugin can be huge advantage since it is set up with many features and can save a lot of time coding. I did not receieve any feedback from the tutor within two weeks so I proceeded to complete this unit. If anyone has any feedback i would appreciate it and would take it into account for future edits on my website.

Thanks!

Craig Spence