Web design lecture
Download
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