web design lecture
Download
Skip this Video
Download Presentation
Web Design Lecture

Loading in 2 Seconds...

play fullscreen
1 / 16

Web Design Lecture - PowerPoint PPT Presentation


  • 131 Views
  • Uploaded on

Web Design Lecture. Using jQuery to Design Dynamic Webpages. About the Meetup Groups. 2 Groups East Toronto Web Design Toronto Database Pros Started late 2006 Meet monthly at Cafe Mirage Find us online at Meetup.com. About Me – Peter Meth. Degree in Computer Science

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Web Design Lecture' - dale-tillman


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
web design lecture

Web Design Lecture

Using jQuery to Design Dynamic Webpages

about the meetup groups
About the Meetup Groups
  • 2 Groups
    • East Toronto Web Design
    • Toronto Database Pros
  • Started late 2006
  • Meet monthly at Cafe Mirage
  • Find us online at Meetup.com
about me peter meth
About Me – Peter Meth
  • Degree in Computer Science
  • Full time web developer
  • Side business doing websites, hosting, consulting
  • PHP, MySQL, HTML, CSS, Javascript
  • More of a programmer than a designer
about this lecture
About this Lecture
  • I wanted to do it from the start
  • Until now, not enough people
  • Already scouting out new locations
  • Janis suggested lectures, so I thought it was a good time to try this out
  • I recently had to use JQuery and I liked it
  • If successful, we will do more lectures
presentation overview
Presentation Overview
  • What is jQuery?
  • Why would I want to use it?
  • Foundations & Concepts
  • jQuery Tutorial
  • Real World Examples & Cool Stuff
  • Other Libraries and Resources
  • Questions & Answers
what is jquery
What is jQuery
  • It is Javascript, but simpified
  • Called a Framework or Library
  • Been around since 2006
  • Motto is: Write Less, Do More
  • Website: http://www.jquery.com
why use jquery
Why Use jQuery
  • Easily insert, copy, move, remove elements
  • Small amount of code for most tasks
  • Add animations like slides, fades, resize, move, bounce
  • Add widgets to pages (date pickers, dialogs, data grids, sliders, etc)
  • Easy integration of Ajax
  • Cross-browser compatibility
  • Huge community, lots of plugins
foundations object oriented
Foundations – Object Oriented
  • Objects or Elements
    • like real world things: apple, door, person
  • Properties or Attributes
    • define the object, have descriptive names
  • Methods or Actions
    • different for different object types
  • Events
    • can have actions associated to them
object oriented concepts
Object Oriented Concepts
  • Types or Classes
    • also have subtypes
  • Instance Names or Handles
    • myapple is different from yourapple
  • Dot notation
    • mycup.contents
  • Chaining
    • cup.contents.drink()
html and css
HTML and CSS
  • DOM (Document Object Model)
    • defines html structure and rules (legal tags)
  • Important elements should have ID and/or Class
    • <h1 id=“maintitle” class=“bigtext”>Big title</h1>
  • CSS can refer to Objects in different ways
    • tag, .class, #id, :even, :odd
  • CSS Chaining
    • h1.bigtext (only h1’s with class bigtext)
jquery
jQuery
  • Include jQuery library in HTML head

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

  • Magic starts with $
  • Find something, do something with it
    • $(“h1”).hide(); - hide all h1’s
  • We can chain together actions
    • $(“#magicitem”).show().slideUp();
  • Use callback functions
    • $(“#mytext”).change(function(){ alert(“hi”); });
jquery1
jQuery
  • Try some of these things out
    • http://www.w3schools.com/jquery/jquery_examples.asp
    • http://training.learningjquery.com/
  • More reference
    • http://jquery.com
    • http://visualjquery.com
    • http://www.w3schools.com/jquery
plugins
Plugins
  • Find plugins that you like
    • http://jqueryplugins.com
  • Include plugin file in the head after jquery

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script type="text/javascript" src="js/myplugin.js"></script>

  • Follow the Plugin documentation
  • Enjoy the new functionality
examples cool stuff
Examples & Cool Stuff
  • http://tomorrowsdrivers.comhttp://tomorrowsdrivers.com/index2.php
  • http://urbanfitt.com
  • http://agincourttennisclub.ca
  • http://softersoftware.com/jquerydemo/application/
  • http://www.arcinspirations.com/kobe/
  • http://spritely.net/
  • http://gamequery.onaluf.org/
  • http://www.willjessup.com/sandbox/jquery/solar_system/rotator.html
other libraries
Other Libraries
  • http://raphaeljs.com/
  • http://www.dojotoolkit.org/
  • http://developer.yahoo.com/yui
  • http://mootools.net
  • http://script.aculo.us
ad