AR0051 – JQuerytoi.bk.tudelft.nl/downloads/ar0051/ar0051q34-6.pdf · AR0051 – JQuery Nord-Jan...

1Challenge the future

AR0051: Digital Presentation Portfolio

AR0051 – JQuery Nord-Jan VermeerHenry Kiksen



Topics

•When to use javascript/JQuery•Why JQuery•Loading JQuery•One JQuery program explained •Effects/Events•Selector•Demos



When to use Javascript/Jquery

•Use •Improves interaction•Enhance user experience•Create content/styling on the fly

•CSS does not do it....

•Do Not Use•User can disable javascript.

•Not uniform for each browser.

•CSS can do it.



Why JQuery

•Javascript is hard•Not uniform for each browser•Full programming language•Uses kind of a template •CSS like - selector



Loading JQuery<!DOCTYPE html> <html> <head> <script type="application/x-javascript" src=”jquery-1.11.2.min.js”></script> <title>Sample document</title> </head> <body> </body> </html>

•Download the Jquery library from http://jquery.com/•Place it in your web directory•Link the JQuery library with the statement in the green

box.



Demo

•Paragraph hide



The whole script

•Check if document is ready•Check if a p-element is clicked

• Then hide all p-elements

$(document).ready(function(){ $("p").click( function(){ $("p").hide(); } ); });



Check if document is ready



$(document).ready( function(){ $("p").click( function(){ $("p").hide(); } ); } );



Check if a p-element is clicked






Hide all p-elements

•Wait until document is ready•Wait until a p-element is clicked





A JQuery statement – effect

$("p").hide();

●Selector – point to the elements.●Do stuff

●Event●Effect


●Event●Effect



JQuery statement - event$(document).ready(function(){

$("p") . click( function(){ $(“p”).hide(); } ); });


●Event: hover, click, dblclick, focus etc. ●Effect



JQuery – Selector

$("p").hide();

●Selector – ●CSS-like way to select the right elements



Grouping effects together

• Do stuff• Append elements to other

elements• Apply CSS to elements• Add class to elements• Hide/show elements• Remove Elements• Alter behavior

$(document).ready( function(){ $("p").click( function(){ $("p").hide(); /* do stuff*/ /* more stuff */ } ); });



Demo 2

•More with the paragraphs



Demo 2

•$(this).hide();•preventDefault()•$(”p”).not(this).hide();



How to create your own•Start by creating a simple HTML-file which:

• Hold the data in a structured manner (ul a)• Minimum on styling

•Create a mockup of a stage in your program• To show the change in html• To show the change in style

•Go back to the simple HTML-file• Create the extra HTML in Jquery• Apply the extra style in Jquery

•Collect the data needed.• Which items change, and what do they change into • Which items are used

• Apply, Beautify



Demo

•Change the image



Demo

•Change the image•Getting an attribute•Using the same script multiple times

• Using a class• Generalize• Setting your own attribute• Getting your own attribute



Tips

• Non obtrusive coding•Do not mix code with HTML •Provide fallback when javascript is unavailable.

•Always apply ; to the end of a javascript statement.•Open code block “{“ before the end of line.



More Information

•http://jquery.com•http://learn.jquery.com•http://www.w3schools.com•http://www.codecademy.com



Questions

•???•

1 Challenge the future

AR0051 – exercise 3.5 Nord-Jan Vermeer Henry Kiksen


February 11, 2013

jQuery basics

1.  Selector (what element) 2.  Event (when) 3.  Effect (what will happen) $(“h1”).click( function() { // what to do when an element has been clicked $(this).addClass(“red”); } );


February 11, 2013

jQuery selectors

http://www.codylindley.com/jqueryselectors/ jQuery documentation: http://api.jquery.com/


February 11, 2013

Smooth scrolling

https://css-tricks.com/snippets/jquery/smooth-scrolling/


February 11, 2013

Hoover ideas

http://tympanus.net/Development/HoverEffectIdeas/ http://tympanus.net/Tutorials/OriginalHoverEffects/ Remember to explain the function of the effect!


February 11, 2013

Exercise week 3.5: for whom? in HTML and CSS

Goal: present one ‘theme’ in your intended portfolio and experiment with content and style

•  this theme might be: photographic or design skills, or urbanism or 3D models (or cakes)

•  think about the essence of your message •  make one page for this theme •  upload your results (deadline: coming Sunday!)


February 11, 2013

Exercise week 3.6: use HTML, CSS and jQuery

What to do: •  incorporate all lectures •  show some content of your own work, which might

represent you (or not) •  find and show reference websites, both likes and

dislikes •  submit the first draft of your Plan of Approach

Goal: experiment with HTML, CSS and jQuery and browse through your work(s)


Plan of Approach

“Checklist” •  Is the goal formulated? •  Is this done in depth? •  Is the target-group described specific enough? •  Are the wishes/expectations of the target researched and described? •  Is a selection of own work described as content? •  Is there a description of the extension of presentation of self? •  Is there a balance between image(s) and text? •  Is there a mix between uniqueness and functionality? •  Are there scenarios for navigation and ‘user interface’? •  Has the concept taken ‘fluid’ en ‘responsive’ into account?

Demands on the Plan of Approach


February 11, 2013

Working in the scheduled workgroups Look at schedule for location! Demand: continue with a “running document” with your thoughts and ideas to work towards a plan of approach!!

Next week, next meeting


February 11, 2013


Thank you and

good day

AR0051 – JQuerytoi.bk.tudelft.nl/downloads/ar0051/ar0051q34-6.pdf · AR0051 – JQuery Nord-Jan...

Documents

Transcript of AR0051 – JQuerytoi.bk.tudelft.nl/downloads/ar0051/ar0051q34-6.pdf · AR0051 – JQuery Nord-Jan...