Jquery presentatie

  • 1,189 views
Uploaded on

 

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

Views

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

Actions

Shares
Downloads
11
Comments
0
Likes
1

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