Jquery presentatie
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,950
On Slideshare
1,950
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
25
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery
    Inspiration for webdesigners.
  • 2. jQuery
    Inspiration for webdesigners.
    jQuery Code
    jQuery UI
    jQuery voorbeelden
  • 3. jQuery
    Inspiration for webdesigners.
    jQuery code
    • Geen javascript code meer in de html (Unobtrusive javascript)
    • 4. Write less, do more!
    • 5. Selectors: de manier waarop je een element aanroept
    • 6. Events: de reden om iets met een element te doen
    • 7. Manipulation: wat je met het element gaat doen
    • 8. eenvoudige html/css aanpassingen
    • 9. effecten en animaties
  • jQuery
    Inspiration for webdesigners.
    jQuery code: unobtrusive
    Vroegere manier van javascript in html:
    Content
    Behavior
    Presentation
    index.html
    functies.js
    style.css
    inline javascript
    Nadelen:
    • veel werk om te implementeren en aan te passen
    • 10. meer code die minder doet
    • 11. conflicten en fouten in verschillende browsers
  • jQuery
    Inspiration for webdesigners.
    jQuery code: unobtrusive
    Vroegere manier van javascript in html:
    <html><head> <script >
    // javascript code die bepaalt wat de functies doen
    </script></head><body onload=’javascriptFunctie1();’ > <img src=’image.jpg’ onclick=’javascript:javascriptFunctie2();‘ /> <script>javascriptFunctie3(); </script></body>
  • 12. jQuery
    Inspiration for webdesigners.
    jQuery code: unobtrusive
    Unobtrusive DOM manier van javascript in html met jQuery:
    Content
    Behavior
    Presentation
  • 13. jQuery
    Inspiration for webdesigners.
    jQuery code: unobtrusive
    Unobtrusive DOM manier van javascript in html met jQuery:
    Content
    Behavior
    Presentation
    index.html
    library.js
    style.css
    custom.js
  • 14. jQuery
    Inspiration for webdesigners.
    jQuery code: unobtrusive
    Unobtrusive DOM manier van javascript in html met jQuery:
    <html><head>
    <script src=’pad/naar/jQuery.js’ />
    <script src=’pad/naar/custom.js’ /> </head><body> <img src=’image.jpg’/></body>
  • 15. jQuery
    Inspiration for webdesigners.
    jQuery code: unobtrusive
    Unobtrusive DOM manier van javascript in html met jQuery:
    $(document).ready(function(){javascriptFunctie1();javascriptFunctie3();$(‘img’).click(javascriptFunctie2());})
  • 16. jQuery
    Inspiration for webdesigners.
    jQuery code slider code
  • 17. jQuery
    Inspiration for webdesigners.
    jQuery UI
    • Schaalbare extensie van jQuery
    • 18. Low-level interacties & high-level skinable widgets.
    • 19. Browseronafhankelijk
  • jQuery
    Inspiration for webdesigners.
    jQuery UI onderdelen
  • jQuery
    Inspiration for webdesigners.
    jQuery UI core
    * css-regels die worden geanimeerd
    ** deze zijn vergelijkbaar met de easing die wordt gebruikt bij flash animaties
  • 28. jQuery
    Inspiration for webdesigners.
    jQuery UI effecten
  • jQuery
    Inspiration for webdesigners.
    jQuery UI interacties
  • jQuery
    Inspiration for webdesigners.
    jQuery UI skinable widgets
  • jQuery
    Inspiration for webdesigners.
    jQuery GetGlue.com
  • jQuery
    Inspiration for webdesigners.
    Prototype Wax.be
  • jQuery
    Inspiration for webdesigners.
    Prototype Pioneer.eu
  • jQuery
    Inspiration for webdesigners.
    jQuery Twootball.com
  • jQuery
    Inspiration for webdesigners.
    jQuery wp.desingisdead.be
    • Lightbox
    • 61. CSS tweaking
  • jQuery
    Inspiration for webdesigners.
    jQuery Zemanta.com
  • jQuery
    Inspiration for webdesigners.
    jQuery Bornliving.com
    • Sliding
    • 64. CSS checking
  • jQuery
    Inspiration for webdesigners.
    jQuery suiepaparude.ro
  • jQuery
    Inspiration for webdesigners.
    jQuery Cesserdigital.net
    • full interface manipulation