Your SlideShare is downloading. ×
0
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Game jump: frontend introduction #1

1,058

Published on

Prezentacja z warsztatów http://gamejump.pl/games/workshop1-catchMole/ - dość ostry i szybki wstęp do frontendu. Czyli jakie nazwy powinniście kojarzyć ;-) …

Prezentacja z warsztatów http://gamejump.pl/games/workshop1-catchMole/ - dość ostry i szybki wstęp do frontendu. Czyli jakie nazwy powinniście kojarzyć ;-)

Wersja na google docs: https://docs.google.com/presentation/d/1ZKAkxlQfu0qEg5MctcqaYMyoe3SSLqljq1p3VeGPJGw/edit?usp=sharing

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,058
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
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. Frontend introduction #1 gameJUMP
  • 2. Introduction ● HTML ● Web Style Sheets ○ CSS ○ SASS ● JavaScript ○ jquery ○ requirejs ● First game
  • 3. HTML5
  • 4. HTML
  • 5. Head
  • 6. Body #html tags
  • 7. Body #own tags Create own tag & attribute: <mytagname attributeName=”attributeValue” /> Examples: jQuery Mobile AngularJS
  • 8. Web Style Sheets
  • 9. CSS #What is CSS? “Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents” by W3C
  • 10. CSS #selectors *{...} E{...} E F{...} E > F{...} E:first-child{...} E#id{...} E.class{...} a:visited{...} E + F{...} E[foo="warning"]{...} E[foo~="warning"]{...} E[lang|="en"]{...}
  • 11. CSS #combining selectors div.car.destroyed .wheel, span.motor.destroyed . wheel {...} #id ul li:first-child, #id ul li:nth-child(3n) {...}
  • 12. CSS #properties display: block; float: left; background-color: red; width: 300px; color: black; font-weight: bold; font: 1em Helvetica, sansserif; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
  • 13. SASS
  • 14. SASS #What is SASS? “Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.” http://sass-lang.com/
  • 15. SASS #variables $m-margin: 33px; $color: #333; #menu{ margin:$m-margin+10px; } ul li{ color:$color; a{ lighten($color, 50%); } }
  • 16. SASS #nesting nav { background: red; nav { background: red; } ul{ background: black; } } nav ul{ background: black; }
  • 17. SASS @import @import 'path/to/file';
  • 18. SASS @mixin @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
  • 19. JavaScript
  • 20. js #What is it?!?! “JavaScript is a programming language used to make web pages interactive.” “Java is to JavaScript as ham is to hamster”
  • 21. js #script <script src="myscripts.js"></script> <script type="text/javascript"> alert(“gamejump.pl”); </script>
  • 22. js #vars zm = 22; var arr = [“a1”,”a2”]; var obj = { “key”:”value”, number: 22, string:”text” }; //mean window.zm = 22
  • 23. js #function function globalFn(){ return “global”; } var localFn = function(){ return “function is a object”; }
  • 24. js #closure var makeCounter = function() { var privateCounter = 0; return { increment: function() { return privateCounter ++; } } };
  • 25. jQuery
  • 26. jQuery #What is it?!?! “jQuery is a JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.” jquery.com
  • 27. jQuery #ready $(document) .ready(function() { // Your code here. }); $(function() { // Your code here. });
  • 28. jQuery #selectors //show elements $(“#menu :hide”).show(); //hide elements $(“#menu :visible”).hide(); //find var $set = $(“#menu”); $set.find(“:visible”).hide();
  • 29. jQuery #css $(selector).addClass(name); $(selector).css(name,val); $(selector) .removeClass(name); $(selector).css({ “background”:”red”, “color”:”blue” });
  • 30. jQuery #events $(“.button”).on(“click”, function(){ alert(“clicked”); }); $(“.button”).on(“click”, function(event){ event.preventDefault(); alert(“clicked”); });
  • 31. jQuery #val <form method=”post” id=”f”> <input id=”in” /> </form> $(“#f”).on("submit" , function(){ var v = $(“#in”).val(); alert(v); return false; });
  • 32. jQuery #ajax $.get("url",function(data){ alert(data); }); $.post("url", {k1:1,k2:2}, function(data){ alert(data); }); $.ajax({ type: "POST", url: "some.php" }).done(function( msg ) { alert(msg); });
  • 33. requirejs
  • 34. requirejs #What is it?!?! “RequireJS is a JavaScript file and module loader… Using a modular script loader like RequireJS will improve the speed and quality of your code.” http://requirejs.org/
  • 35. requirejs #start <html> <head> <script data-main="js/app" src="js/require.js"> </script> </head> <!-- … - -> </html>
  • 36. requirejs #config require.config({ paths: { backbone: "libs/backbone.js/backbone", jquery: "http://ajax.googleapis.com/.../jquery.min", underscore: "libs/underscore.js/underscore" } });
  • 37. requirejs #app require(["jquery"], function() { $(function(){ alert(“loaded”); }); });
  • 38. requirejs #module define([], function() { alert(“module”); });
  • 39. Questions??
  • 40. We can start create a first game now :) Download a game template from github
  • 41. Thank you for your attention sebastian@pozoga.eu

×