SlideShare a Scribd company logo
1 of 33
Download to read offline
jQuery for designers
      4 februari 2010
HTML
CSS
Javascript?
WTF?
Doel van deze presentatie:


Van WTF? naar Aha!
  *ping* *genius*
1
The Setup
TextMate Syntax support

                     GetBundles
$ cd ~/Library/Application Support/TextMate/Bundles
$ svn co http://svn.textmate.org/trunk/Review/Bundles/
GetBundles.tmbundle/



                  Reload bundles:
Download jQuery syntax:
Maak een testproject aan
met een HTML file, jQuery
 included, en een scripts
   file om in te werken
2
Showdown
Something cool:

$(document).ready(function() {

      var test = '<div class="test"></div>'

      function appendTo() {
          $('#container').append(test);
      }

      for (i = 0; i <= 767; i++) {
          appendTo();
      }

      $('.test').hover(function() {
          $(this).animate({ opacity: 0.1, }, 250, function() {
              // Animation compete
              $(this).animate({ opacity: 0.75, }, 250, function() {

                        $(this).css('background', '#FFFF00');
                  });
            });
      });

});
jQuery for designers
jQuery for designers
jQuery for designers
jQuery for designers
3
Your turn
Document ready
     Haal default slice van
        project server
$(document).ready(function() {
    // Code here
});
alert(); and prompt();

$(document).ready(function() {
    alert('hello!');
});


$(document).ready(function()
{
    prompt();
});
css(‘property’, ‘value’);



$(document).ready(function() {
    $('body').css('background', 'red');
});
Real world
                                   example!
      select(); onclick event


$(document).ready(function() {

      $('#email').click(function() {
          $(this).select();
      });

});
events: hover event

$(document).ready(function() {

      $('body').hover(function() {
          // Stuff to do when the mouse enters the element;
          $(this).css('background', 'red');
      }, function() {
          // Stuff to do when the mouse leaves the element;
          $(this).css('background', 'blue');
      });

});
Real world
                                                    example!

                 addClass();
         :last-child support for IE6/IE7/IE8




$(document).ready(function() {
    $('#categories ul li:last-child').addClass('lastChild');
});
Real world
                                           example!
events: hover event
  :hover on any element in IE6


$(document).ready(function() {

      $('ul li').hover(function() {
          $(this).addClass('hover');
      }, function() {
          $(this).removeClass('hover');
      });

});
Real world
                                               example!
 focus event + addClass();
          Add :focus support for IE6


$(document).ready(function() {

      $('input').bind({
          focus: function(event) {
              $(this).addClass('focus');
          },
          blur: function(event) {
              $(this).removeClass('focus');
          }
      });

});
4
JS in the wild
AB: tooltip
Tagger.fm: tagbox
Vorst Nationaal: websites in settings
+
Supertip
jQuery for designers
?
Vragen
Thx!

More Related Content

What's hot

jQuery sans jQuery
jQuery sans jQueryjQuery sans jQuery
jQuery sans jQuerygoldoraf
 
Symfony2でMongoDBと仲良くする方法
Symfony2でMongoDBと仲良くする方法Symfony2でMongoDBと仲良くする方法
Symfony2でMongoDBと仲良くする方法Koji Iwazaki
 
Progressive Mobile Web Apps
Progressive Mobile Web AppsProgressive Mobile Web Apps
Progressive Mobile Web Appsdynamis
 
Java Script - Object-Oriented Programming
Java Script - Object-Oriented ProgrammingJava Script - Object-Oriented Programming
Java Script - Object-Oriented Programmingintive
 
Simular un next del recordset en php de forma rudimentaria
Simular un next del recordset en php de forma rudimentariaSimular un next del recordset en php de forma rudimentaria
Simular un next del recordset en php de forma rudimentariajbersosa
 
Як досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворкЯк досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворкShtrih Sruleg
 
modern javascript, unobtrusive javascript, jquery
modern javascript, unobtrusive javascript, jquerymodern javascript, unobtrusive javascript, jquery
modern javascript, unobtrusive javascript, jqueryAdam Zygadlewicz
 
Func
FuncFunc
FuncHvqr
 
JS programowanie obiektowe
JS  programowanie obiektoweJS  programowanie obiektowe
JS programowanie obiektowePiotr Czajkowski
 
Formulario
FormularioFormulario
Formulariotukisele
 
Drupal 8. Movement towards. Susikov Sergey
Drupal 8. Movement towards. Susikov SergeyDrupal 8. Movement towards. Susikov Sergey
Drupal 8. Movement towards. Susikov SergeyADCI Solutions
 

What's hot (20)

Sumahex
SumahexSumahex
Sumahex
 
jQuery sans jQuery
jQuery sans jQueryjQuery sans jQuery
jQuery sans jQuery
 
Symfony2でMongoDBと仲良くする方法
Symfony2でMongoDBと仲良くする方法Symfony2でMongoDBと仲良くする方法
Symfony2でMongoDBと仲良くする方法
 
Custom agario skins
Custom agario skinsCustom agario skins
Custom agario skins
 
Progressive Mobile Web Apps
Progressive Mobile Web AppsProgressive Mobile Web Apps
Progressive Mobile Web Apps
 
Java Script - Object-Oriented Programming
Java Script - Object-Oriented ProgrammingJava Script - Object-Oriented Programming
Java Script - Object-Oriented Programming
 
Simular un next del recordset en php de forma rudimentaria
Simular un next del recordset en php de forma rudimentariaSimular un next del recordset en php de forma rudimentaria
Simular un next del recordset en php de forma rudimentaria
 
Як досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворкЯк досвід компанії перетворився на фреймворк
Як досвід компанії перетворився на фреймворк
 
Index2
Index2Index2
Index2
 
modern javascript, unobtrusive javascript, jquery
modern javascript, unobtrusive javascript, jquerymodern javascript, unobtrusive javascript, jquery
modern javascript, unobtrusive javascript, jquery
 
Func
FuncFunc
Func
 
jQuery PLUGIN
jQuery PLUGINjQuery PLUGIN
jQuery PLUGIN
 
JS programowanie obiektowe
JS  programowanie obiektoweJS  programowanie obiektowe
JS programowanie obiektowe
 
es6.concurrency()
es6.concurrency()es6.concurrency()
es6.concurrency()
 
Formulario
FormularioFormulario
Formulario
 
Drupal 8. Movement towards. Susikov Sergey
Drupal 8. Movement towards. Susikov SergeyDrupal 8. Movement towards. Susikov Sergey
Drupal 8. Movement towards. Susikov Sergey
 
Load2
Load2Load2
Load2
 
Dart und JavaScript
Dart und JavaScriptDart und JavaScript
Dart und JavaScript
 
Jquery Framework
Jquery FrameworkJquery Framework
Jquery Framework
 
Jquery ui, ajax
Jquery ui, ajaxJquery ui, ajax
Jquery ui, ajax
 

More from Johan Ronsse

iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case studyJohan Ronsse
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfacesJohan Ronsse
 
Design for developers
Design for developersDesign for developers
Design for developersJohan Ronsse
 
The jump to freelance
The jump to freelanceThe jump to freelance
The jump to freelanceJohan Ronsse
 
Wolf fronteers 2010
Wolf fronteers 2010Wolf fronteers 2010
Wolf fronteers 2010Johan Ronsse
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/SassJohan Ronsse
 
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Johan Ronsse
 
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenWebdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenJohan Ronsse
 

More from Johan Ronsse (11)

What is Bedrock?
What is Bedrock?What is Bedrock?
What is Bedrock?
 
iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case study
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfaces
 
Design for developers
Design for developersDesign for developers
Design for developers
 
The jump to freelance
The jump to freelanceThe jump to freelance
The jump to freelance
 
Wolf fronteers 2010
Wolf fronteers 2010Wolf fronteers 2010
Wolf fronteers 2010
 
CSS3 now
CSS3 nowCSS3 now
CSS3 now
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/Sass
 
Workflow
WorkflowWorkflow
Workflow
 
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
 
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenWebdesign De Middelmaat Overstijgen
Webdesign De Middelmaat Overstijgen
 

jQuery for designers

Editor's Notes

  1. jQuery for designers / first version 2010-02-02
  2. Jullie weten heel goed wat HTML is.
  3. Jullie weten heel goed wat CSS is.
  4. Maar Javascript is een beetje een mysterieus beestje. Wat is deze code?
  5. Bij het zien van deze code bekruipt je waarschijnlijk een groot WTF-gevoel.
  6. Het doel van deze presentatie is dat jullie de rol van Javascript en de mogelijkheden begrijpen. En dat jullie kleine dingen zelf kunnen.
  7. Dit wordt een praktische presentatie [neem laptops]; we beginnen met een werkomgeving op te zetten waar je vlot in kan werken.
  8. Om jQuery specifieke syntax support in TextMate te voorzien haal je best de jQuery bundle op. Er bestaat een pakket voor TextMate genaamd GetBundles om gemakkelijk nieuwe bundles op te halen. Indien je dit niet heb, installeer het zo [code]
  9. Als je GetBundles opent en zoekt naar jQuery kan je gemakkelijk de jQuery bundle installeren. Deze voorziet de juiste syntax coloring en enkele handige shortcuts.
  10. We gaan werken in een tesproject, met de laatste versie van jQuery. Dit is op moment van schrijven 1.4.1
  11. Eerst tonen wat er allemaal mogelijk is met relatief eenvoudige &amp;#x2018;designer&amp;#x2019; javascript.
  12. Deze code resulteert in:
  13. Dit is iets simpels dat ik geschreven heb voor deze presentatie...
  14. De eerste stap naar een applicatie zoals fontstruct.
  15. Javascript opent de weg naar goed interactiedesign... van rich text editors
  16. Tot online video.
  17. Maar goed; dat terzijde. We gaan de basis leren van Javascript, met specifieke aandacht voor designer taken.
  18. [uitleg wat document ready is] jQuery object: $ document: selector ready(): functie function() anonieme functie
  19. Twee functies: alert(); om boodschappen te tonen, prompt(); om te vragen voor user input.
  20. css() functie om CSS te manipuleren
  21. [uitleg]
  22. [uitleg]
  23. [uitleg]
  24. [uitleg]
  25. [uitleg]
  26. Javascript op Netlash websites
  27. Het boek waar ik javascript door geleerd heb is DOM scripting De grote boeken van O&amp;#x2019;Reilley: niet aan beginnen, deze zijn al lang pass&amp;#xE9; en niet praktisch genoeg.
  28. Bedankt!