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

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