Unit 4 Learning Diary:

Link to files on student server: http://student.athabascau.ca/~kimberlyli13/comp266/Unit4/

At the beginning of this unit, I wanted to find code for a slideshow that would be short and concise. I knew I needed to understand how javascript worked first to augment it so I went about searching for basic code I could attempt to understand without going too in-depth.

This youtube video is awesome because it is really easy to understand the process but it still covers things like arrays and loops, which make the process altogether simpler, but understanding it is more complex.

https://www.youtube.com/watch?v=4YQ4svkETS0&ab_channel=TraversyMedia

I decided to use this as the base for my code, I found it easy to understand, such as the variable declarations, setting the array, the if/else loop etc. I didn’t understand syntax enough to really recreate this code intelligently yet, so I decided to spend a decent amount of time on javascript basics tutorials.

https://www.w3schools.com/js/default.asp

I used the w3 schools tutorial and read up to (incl) the booleans section to cover all of the concepts used in the source example chosen this took me about 10 hours with notes and exercises, I think this allowed me to better make sense of the syntax and how to write javascript myself. I wanted to get a leg up on Unit 5 as well, this was a really good introduction. I tried to keep the concepts simple and introductory because if you try to learn it all first without actually applying it, it gets overwhelming. I decided to practice the basics after finishing the tutorial with some exercises I found online.I shared this link on the landing, as it really helped me with the actual application of the code.  

https://edabit.com/challenges/javascript

After doing some exercises and practicing functions and arrays, I decided to grab the source code from the original youtube video and play around with it, and try to replicate it myself.

https://jsfiddle.net/bradtraversy/74owmd01/

Things I struggled to remember and make sense of the first time around were a lot clearer conceptually, but I sort of struggled with the nested boolean inside the function - I understood it, but conceptually I think a lot of this code is advanced, so it took me a while to separate all the moving pieces in my head. I did find that I struggled with the output as well, in the w3 tutorial it shows output along with functions but doesn’t really discuss that you can use the document method with other functions, such as in this example. I figured out that you can use different output methods with many functions, and that helped me understand this function particularly.

I needed photos for my slide show so I found some on google, I saved all the photos to use as relative links because I find that cleaner and more organized:

https://graphicburger.com/modest-psd-landing-page/ [1]

https://htmltemplates.co/free-html5-templates/material-landing-free-responsive-html5-bootstrap-landing-page-template [2]

https://graphicdesignjunction.com/2017/01/html5-website-templates-psd-html/ [3]

Once I had my images named slide1.jpg/slide2.jpg/slide3.jpg respectively, I moved them to my images folder for my website source files, I then created an external javascript document called slideshow.js and inserted my sample script. I also added an img tag into the html on Marketing3.html page, and a script tag right above it to call the external script. I edited the obvious parts in the JavaScript, such as the photo relative links and the size of the slide show, which was tricky since I had tried to set it in the html, but that was overridden by the CSS. I changed the CSS and made some updates to my comments with dates on them. I made a duplicate styles.css sheet and renamed is styles3.css as this was needed to format the slideshow properly and have the marketing page appear the same.

I managed to get it to work the first try and honestly it was SO COOL! I am really excited to tweak this code and used it more in the future. 

Critique of Code used:

The code is formatted well, each section ie) variable declarations, array items, function, nested loop, is discernable easily just from a quick glance. The syntax is used properly, this is demonstrated with the use of curly brackets particularly in the function body where a nested if/else loop is used, but is also demonstrated throughout the rest of the code through the proper use of operators, square brackets for arrays, semicolons to close statements, parentheses at the end of function names etc. The code is also commented on very well and explains what is happening at each step. It is easily read, and could be maintained without any issues. It is also a simple bit of code that seems less brute force/excessive than some of the other examples I looked at, but simultaneously utilizes a wide range of code examples such as variable declarations, functions, selection methods, booleans, and various data types, Another thing that I find awesome about this code is that I actually understood it before I knew the JavaScript basics because it was explained so well. 

Linking code used to personas/scenarios:

Persona 1: Jane Baldwin

Jane is looking for fresh and eyecatching details, I feel like a slideshow meets this need in two ways, by displaying Structure Design's previous “work” inside the slideshow, and by the slideshow just existing, showcasing the company's ability to make websites dynamic and fun.

Persona 2: Dirk Dudley

Dirk is out of his element online and needs the full package from start to finish - the slideshow features photos of fully realized landing page designs, in different styles, with different purposes - I feel this meets Dirks needs by showing him Structure Design's ability to offer the full package, and how the can lay it out on his webpage, this coupled with the services list fully answers his needs.

Persona 3:Jackie Collins

Jackie lacks the design skills to make her social media pop - in Structure Designs slideshow the landing page images show a clear design presence within the business - this coupled with the offerings listed on the marketing page fully meets Jackies need for help designing social media campaigns. 

Persona 4: Darlene Kyle

Darlene needs a website overhaul and a big part of this concerns Structure Design's abilities to make it look professional and dynamic. While the slideshow can’t meet her back-end needs, it does showcase the previous “work” of the company and this serves as a sort of portfolio, coupled with the testimonials gives the sense that you can trust the company and their experience, which would be very important to someone as professional as Darlene.

Grading:

A

I feel I have successfully and intelligently identified examples within the script I have chosen, I have also edited the script slightly, which demonstrates an understanding of it. My critique of the code is was quite in-depth and the code chosen is quite rich, including variable declarations for various data types, an array, functions, an if/else loop, and page manipulation elements. My critique also talks about the use of syntax, and how the code is written in a nice and simple way and is commented well, making it easily maintainable and easy to understand. I have successfully used this code and it works exactly as intended. It has been integrated seamlessly onto the Design page of the website, and works well. The code is all external aside the HTML I edited slightly to call the code. The Code is well structured, commented on well, and the source in stated clearly in this Journal entry. The code is justified completely in the “link personas and scenarios” section of this Journal entry listed above. The code chosen was both rich, and was modified, particularly to display the slideshow height differently. 

Files Embedded: