• Ê
  • Â

fJerel has 2 post(s)

S Lecture: CSS3

CSS3

  • CSS continues to evolve but development and adoption of new standards is uneven. Essentially this is the plan per W3C (modules over monolithic spec).
  • Uneven evolution means vendor prefixes and a bit more homework surrounding support of new properties e.g. Can I use? as well as suggesting we adopt greater tolerance of differences between browsers.
  • Vendor prefixes (e.g. -moz- for Firefox, -webkit- for Safari and Chrome, -ms- for Internet Explorer, -o- for Opera allow us to use CSS3 properties as the standards evolve.
  • Just remember to also include, preferably end, with the W3C standard declaration (i.e. the non prefixed version of the declaration).
  • There is debate about this approach, but here we are. Some myths, busted.

Demos

All of the above in .zip archive

Links

b Add comment    

Leave a Reply

S Lecture: JavaScript through jQuery

JQuery

  • What is JQuery? JQuery is a JavaScript library intended to make it easier to add and use JavaScript on your website. It is tailor made for selecting HTML elements and performing some action on the element(s) It is the shorter, faster, lighter and, hopefully, simpler way to add functionality with JavaScript.
  • JQuery is free, open-source, software with an active community. Many developers write plug-ins for the library. A plug-in is basically a bit of code that extends JQuery in some specific and usable way e.g. a slideshow plugin. Plug-ins rely on JQuery to do much of the heavy lifting.
  • This lesson won’t teach you how to program with JavaScript, a subject for another course, it aims to show you some of the common ways to add it to your site. The most common is through plugins.
  • Some plugins will have scripts in the head, some will have them just before the close of the body.
  • Some plugins will require you adopt their folder structure.
  • Some plugins will have additional CSS you’ll need to include (and possibly contend with: be supermindful of the cascade especially as it pertains to the order in which you reference your styles).
  • If you can, shop around for the look and feel but don’t trade on simplicity and ease of installation of the plugin.
  • Things can get weird quickly when mixing and matching multiple plugins. Always try to streamline as much as possible.

The process

  1. Download the plugin,
  2. get the demo working with the demo code on your local machine (once that’s up and running, move to the next step)
  3. adapt the demo code to your site / pages by adding the necessary .js, .css and other references in similar locations in your page.
  4. Customize!

Learn more

Demos

All of the demos above in one big .zip file.

Additional slideshow examples shown in lesson

A couple more examples from previous years

  1. Photo gallery slideshow with JQuery
  2. Lightbox tool that Jacki’s using

Helpful Javascript/JQuery Links

HTML5 Links

b Add comment    

Leave a Reply