- Gain exposure to libraries of ready-made scripts for your use.
- See and test a few such widgets/scripts.
- Understand what elements need to be included in your HTML document, and in your uploaded support materials.
TIPS FOR SUCCESS
Please plan on spending one hour each day (at a minimum) to complete this module. You should be able to do the work in approximately 12 hours. Break it up; plan accordingly.
Reading, Watching, Testing
- Read jQuery basics, watch jQuery intro, explore jQuery UI Accordion and Tabs. Watch Khan Academy video. Read this full page including lecture notes.
- https://jqueryui.com/demos/ — Spend a minimum of 20 minutes on this page. Try out the different widgets!
- https://jqueryui.com/demos/accordion/ , https://jqueryui.com/button/, andhttps://jqueryui.com/demos/tabs/ — Test out and view the source; you may use this for the assignment.
- https://jqueryui.com/themeroller — One of your assignments requires you to use this product.
- For more information on jQuery see a wonderful (Currently Free) site with videos and sample challenges: https://try.jquery.com/
- NOT REQUIRED: https://docs.jquery.com/Tutorials:How_jQuery_Works — ** This is a lot to ponder, especially if you’ve never programmed, but you ARE learning some code. Try to read your way through the first full page. Take notes, they help.
How far are we through the course?
430/500 points possible
You’re working with libraries of information. You do not need to recreate the wheel or write code from scratch, but you need to know how to (and where to) include code.
- XPLORE hundreds (thousands?) of free scripts
Introducing jQuery & Libraries
- There is no need to recreate the wheel, especially when others have already made excellent resources.
- Look for materials that have a large user base and a considerable amount of help available
- I tend to do a bit of searching on the product site and then go look on YouTube for what types of videos people are publishing on how to use that product
- A library is a premade product that you either link out to at another source, or download and then upload to your own server–linking to it on your server.
The user interface or user experience is often the most important element of your web design AFTER the content.
- By installing jQuery you gain access to functions that perform common or simplify complicated tasks.
- jQuery is one of many libraries that organize and simplify web page (or application) development.
Once you understand more about jQuery, how to import the library and call functions, you may be inspired to learn about other libraries.
HELPFUL VIDEOS & WEBSITES
Khan Academy: Meet John Resig, the developer that invented jQuery and now works as an engineer at Khan Academy.
Here are a few resources, but understand that you will be trying it (and just might have to toss it out). You are not limited to the follow two items. They are only suggestions.
- https://www.jacklmoore.com/colorbox/guide/ (a beginner’s guide to using Colorbox)
I in no way expect you to become a programmer. I do want you to have some exposure to the amazing things being done with code in web pages. Of course, you know — you’ve been using a lot of it. But what does it look like? So, consider this exposure. It is not for developing expertise.
jQuery UI, stands for user interface, is a powerful collection of functions. They build upon the jQuery library, in other words, jQuery is much larger than what we are studying. You will see materials all over the web that are built by using jQuery. You are just beginning to touch the surface. That being said, the jQuery UI covers a lot of what the first time ‘script-kiddie’ would like to impact: color, layout, design, usability, functionality.
By using a library like jQuery UI, you shorten your development time, you are using existing code instead of trying to write it all yourself. You are using code that has been tested by thousands of people. You are using code that has great support resources in the way of how-tos and videos.
We are primarily focusing on widgets. A few widgets are: accordion (see more below), autocomplete, button, datepicker, dialog, progressbar, slider, and tabs.
One of the first things you need to do if your work doesn’t look the way you anticipate is check how you have linked in the library. Then check that the .js files you downloaded from jQuery’s website were all uploaded to your site. After that I would recommend printing out your code and comparing it to the code provided. The most notorious problems are missing semi-colons! Use a highlighter or a pencil and find them all! Save your work in a new document (keep your old work.) Begin again. At some point you may need, tea, coffee, a soda, a walk around your apartment building… it’s okay, your code will wait.
What is min (mini or minify or minified) — when you are pulling the jQuery library you may see .min (https://whatis.techtarget.com/definition/code-minification-minify)
Try using jQuery accordion, buttons or tabs but you may want to do something else that is just as “spiffy’ and clean — such as install a gallery of images.
You need to determine what you’d like to use, and then carefully read up on the steps to download the most recent jQuery library. You will then upload that library to your webspace and link to it there.
- Want a sample to work from? Send me email and quote this line from this week’s page and I’ll send you a sample to get you started. Please email before 5p on Friday.
- More? View a quick tutorial about jQuery ?
on the same page demonstrate your ability to use web safe fonts. Google fonts were covered earlier, you can learn more about web-safe fonts at https://www.webdesigndev.com/16-gorgeous-web-safe-fonts-to-use-with-css/ among MANY other places! Do you think ALL Google fonts are web safe? Read this: https://sixrevisions.com/web-standards/why-we-still-need-web-safe-fonts/
For this assignment, if you are unable to get everything working by loading jQuery’s files into your web space, feel free to point at the Google Hosted version https://developers.google.com/speed/libraries/