Scripting
lecture site: https://ils.unc.edu/courses/2024_fall/inls161_001/06b.01.practice.html#gsc.tab=0
Video:Scripting Recitation Recording
Client Side Script (JavaScript)
I will demonstrate how you can implement some of these javascript samples shown here:
https://www.w3schools.com/js/js_examples.asp
We do not expect you to learn how to program in javascript in a part of one lecture and lab. We just want you to be able to grab some code and make it work for you.
If you are interested in actually understanding some javascript, then you may want to invest 12 minutes here: https://www.youtube.com/watch?v=Ukg_U3CnJWI
Certainly one of the javascript examples from w3schools demos will to the job for your project. You should not just copy and paste it as is; you should make it work to suit your situation.
Below is the sample code of how I did this for my one page site:
Notice that the above code does not need to be enclosed in a script element. This is because the javascript is coded into the onclick attribute. The onclick attribute is the only place where javascript is to be found. All other parts of the code example are all basic HTML.
That is the real learning objective: figure out how to do a little JavaScript and hack it to make it work for you.
For example, if you choose this sample, don’t just use the same image; use your own images. Students have figured this out over and over again, so you can do it too. I have had to sit down and help some students that got stuck, so let me know if you need some extra help.
My one page theme, based on the bootstrap framework, also has magnific popup javascript plugin. If you use the portfolio example with your own photos, then you can get credit if you make the photos pop up from the portfolio. If you don't use the portfolio, you can also use the magnific popup to get credit if you can make your single photo pop up. Check out the help info at magnific site documentation for help if you want to try this.
A more simple Popup Example for EZ Template; not magnific popup
Server Side Script
PHP Example
I have been a web developer for many years and and I am quite familiar with PHP programming. So, in the video for this session, I have created a simple PHP sample which you can follow and post to OPAL. If you follow this example in the video, and get it posted to OPAL, this will satisfiy your server side script requirement and you will not need to include a server side script in your Task 02c site. However, I may not see this when I am grading your project, so make sure you let me know in a comment that you have done the separate PHP coding option.
(Google Font example)
Google fonts are implemented a bit differently now. Discovered that many students in Summer School had issues. I will get the instructions fixed before this session date starts.
The javascript example above is hosted at my account at https://jsfiddle.net, so it is showing up on this page via a serverside script. If you have a youtube account or a twitter account you can find instructions on how you can embed a youTube video or a Twitter feed on an html page in your site. Basically any thing that is hosted on another server and can be displayed on your site will count as a server side script.
Google fonts are hosted on Google servers and can be displayed on your pages. Here is a link that describes how to integrate Google fonts into your site:
There are other Server side scripts you can implement, but the Google fonts option is used by a lot of students to meet the server side script. If you use this option you should be careful to only use legible typefaces for your body text. You may use more decorative typefaces for your headers.
Google Form
You can also use a Google Form to meet this objective. Here is a video