Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr

Beyond HTML
Scriptsprachen, Frameworks, Templatesprachen und
vieles mehr

9. Mai 2012
Jens-Christian Fischer
@jcﬁscher

Best of Swiss Web 2012
ausser einer Seite

Ofﬂine
<!DOCTYPE HTML> CACHE MANIFEST
<html manifest="/cache.manifest"> FALLBACK:
<body> / /offline.html
... NETWORK:
</body> /tracking.cgi
</html> CACHE:
/clock.css
/clock.js
/clock-face.jpg

http://diveintohtml5.org/ofﬂine.html

Storage
if (Modernizr.localstorage) {
var foo = localStorage.getItem("key");
// ...
localStorage.setItem("key", foo);
} else {
alert('No storage capabilities');
}
http://diveintohtml5.org/storage.html

Websockets
var sockets = new webSockets("ws://foo.example.com:8181/socket");

sockets.bind("open", function (msg) {
debug(Verbindung steht!");
});
sockets.bind("close", function (msg) {
debug("Verbindung verloren!");
});
sockets.bind("doStuff", function (msg) {
var data = msg.data;
if (data) {
doSomething(data);
}
}
);

Datei Zugriff
<ol ondragstart="dragStartHandler(event)">
<li draggable="true" data-value="fruit-apple">Apples</li>
<li draggable="true" data-value="fruit-orange">Oranges</li>
<li draggable="true" data-value="fruit-pear">Pears</li>
</ol>
<script>
var internalDNDType = 'text/x-example';
function dragStartHandler(event) {
if (event.target instanceof HTMLLIElement) {
// use the element's data-value="" attribute as the value to be moving:
event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
event.dataTransfer.effectAllowed = 'move'; // only allow moves
} else {
event.preventDefault(); // don't allow selection to be dragged
}
}
</script

http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dragevent-and-datatransfer-interfaces

Semantisch

http://slides.html5rocks.com/#new-form-types

Multimedia

<audio id="audio" src="sound.mp3" controls></audio>
<video id="video" src="movie.webm" autoplay controls></video>

<script>
document.getElementById("audio").muted = false;
document.getElementById("video").play();
</script>

3D Graphik

http://slides.html5rocks.com/#canvas-3d

Präsentation (CSS 3)
Typographie (Webfonts)

Präsentation (CSS 3)
Typographie (Webfonts)

Rotation (2D / 3D)

http://ﬂickr.com/photos/glennharper/49536169/

Werkzeuge

The Way of the carpenter is to
become proﬁcient in the use of
his tools, ﬁrst to lay his plans with
a true measure and then perform
his work according to plan.

– Go Rin No Sho

HTML Tools

http://www.ﬂickr.com/photos/lynnfriedman/5570720402/

HTML
<div id="profile">
profile
<div class="left column">
left column
<h4>Willkommen</h4>
h4 Willkommen
<p id="address"><%= current_user.address %></p>
p address =
</div>
<div class="right column">
right column
<ul>
ul
<li id="email"><%= current_user.email %></li>
li email =
<li id="bio"><%= current_user.bio %></li>
li bio =
</ul>
</div>
</div>

HTML
profile
left column
h4 Willkommen
p address = current_user.address

right column
ul
li email = current_user.email
li bio = current_user.bio

HAML

profile
left column
h4
p address= current_user.address
right column
ul
li email= current_user.email
li bio= current_user.bio

HAML

#profile
profile
.left.column
left column
%h4 Willkommen
h4
%p#address= current_user.address
p address=
.right.column
right column
%ul
ul
%li#email= current_user.email
li email=
%li#bio= current_user.bio
li bio= current_user

http://haml-lang.com/

Python, Lua, ASP.NET, .NET, PHP,
PHP5, JavaScript, Perl, Scala, Java

Jade

profile
left column
h4 Willkommen
right column
ul
li bio= current_user.bio

http://jade-lang.com/

Jade

#profile
profile
.left.column
left column
h4 Willkommen
p#address=
.right.column
right column
ul
li#email=
li bio= current_user
li#bio= current_user.bio

http://jade-lang.com/

Templates

http://www.ﬂickr.com/photos/jima/460348206/

Mustache

{{ }}
http://mustache.github.com/

Mustache Template
<h1>{{header}}</h1>

{{#items}}
{{#first}}
<li><strong>{{name}}</strong></li>
{{/first}}
{{#link}}
<li><a href="{{url}}">{{name}}</a></li>
{{/link}}
{{/items

JSON Daten

{
"header": "Colors",
"items": [
{"name": "red", "first": true, "url": "#Red"},
{"name": "green", "link": true, "url": "#Green"},
{"name": "blue", "link": true, "url": "#Blue"}
],
}

Resultat

<h1>Colors</h1>
<li><strong>red</strong></li>
<li><a href="#Green">green</a></li>
<li><a href="#Blue">blue</a></li

CSS Tools

http://www.ﬂickr.com/photos/the-meir/2201434695/

<font face="Arial Black"> Google search, a <font color="#0000ff">new</font>
service from</font><big><font face="Arial Black"><big><strong><font size="4">
<a href="http://www.leicatime.com"><img src="favicon.gif" border="0" width="16" height="16"></a></font></strong></big></
font></big><strong><br>
</strong>
<b><font face="Arial Black">ATTENTION: for my "how to purchase" INFO page,
please <a target="_blank" href="a000-PURCHASE-info.htm">click HERE !</a> 
Partita IVA: IT 06822200587<br>
--------------------------------------</font></b><br>
<font size="4"><strong><font color="#ff0000">
<img alt="globeTurns.gif (7996 byte)" src="http://www.leicatime.com/globeTurns.gif" width="30" height="30"></font></
strong></font><font size="5"><img border="0" src="http://www.leicatime.com/EuropeanUnionWte2.gif" width="75"
height="50"></font><font size="5"><b><font size="1"><a href="http://www.leicatime.com/a000-CASES-line.htm"
target="_blank"><img border="0" src="http://www.leicatime.com/LeicatimeBannerOK.jpg" width="141" height="75"></a></
font></b><img src="http://www.leicatime.com/GianniFototesseraSmart.jpg" width="75" height="89"><font size="3">
</font><font color="#800080" size="5" face="Arial Black">

http://leicatime.com/

Inhalt Form

Verhalten

html css

javascript

„Besseres“ CSS

SCSS
http://sass-lang.com/

„Besseres“ CSS

SCSS
http://sass-lang.com/ http://lesscss.org/

Vorteile

• Modular - includes
• Variablen
• Berechnungen
• Mixins

SCSS
#navbar {
$navbar-width: 800px;
$items: 5;
$navbar-color: #ce4dd6;

width: $navbar-width;
border-bottom: 2px solid $navbar-color;

li {
float: left;
width: $navbar-width/$items - 10px;

background-color:
lighten($navbar-color, 20%);
&:hover {
background-color:
}
}
}

SCSS
#navbar {
Variablen
$items: 5;


li {
float: left;

background-color:
&:hover {
background-color:
}
}
}

SCSS
#navbar {
Variablen
$items: 5;

Berechnungen
li {
float: left;

background-color:
&:hover {
background-color:
}
}
}

SCSS
#navbar {
Variablen
$items: 5;

Berechnungen
li {
float: left;

background-color: Funktionsaufruf
&:hover {
background-color:
}
}
}

CSS

#navbar {
width: 800px;
border-bottom: 2px solid #ce4dd6; }
#navbar li {
float: left;
width: 150px;
background-color: #e5a0e9; }
#navbar li:hover {
background-color: #d976e0; }

Browser Preﬁxe
Präﬁx Browser

-moz- Firefox

-webkit- Safari, Chrome

-o- Opera

-ms-, -mso- Internet Explorer

.my-class, #my-id {
border-radius: 1em;
transition: all 1s ease;
box-shadow: #123456 0 0 10px;
}

.my-class, #my-id {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
-ms-border-radius: 1em;
border-radius: 1em;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-moz-box-shadow: #123456 0 0 10px;
-webkit-box-shadow: #123456 0 0 10px;
-ms-box-shadow: #123456 0 0 10px;
box-shadow: #123456 0 0 10px;
}

http://www.sitepoint.com/opera-css3-webkit-preﬁx/#fbid=OROafxTvqrv

WebKit

E 6
e I
n e u
d e r
ist

SCSS

@mixin rounded($side, $radius: 10px) {
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}

#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }

SCSS
Mixin

}


SCSS
Mixin Variable

}


CSS
#navbar li {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px; }

#footer {
border-top-radius: 5px;
-moz-border-radius-top: 5px;
-webkit-border-top-radius: 5px; }

#sidebar {
border-left-radius: 8px;
-moz-border-radius-left: 8px;
-webkit-border-left-radius: 8px; }

Jasmine
describe("CreditCard", function() {
it("cleans number by removing spaces and dashes", function() {
expect(CreditCard.cleanNumber("123 4-5")).toEqual("12345");
});

it("validates based on mod 10", function() {
expect(CreditCard.validNumber("4111 1111-11111111")).toBeTruthy();
expect(CreditCard.validNumber("4111111111111121")).toBeFalsy();
});

it("validates when text field loses focus", function() {
loadFixtures("order_form.html");
$("#card_number").validateCreditCardNumber();
$("#card_number").val("123");
$("#card_number").blur();
expect($("#card_number_error")).toHaveText("Invalid credit card number.");
$("#card_number").val("4111 1111-11111111");
$("#card_number").blur();
expect($("#card_number_error")).toHaveText("");
});
});

http://pivotal.github.com/jasmine/

http://visionmedia.github.com/mocha/

node.js

var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

CoffeeScript
number = 42
opposite = true

number = -42 if opposite

square = (x) -> x * x

list = [1, 2, 3, 4, 5]

math =
root: Math.sqrt
square: square
cube: (x) -> x * square x

race = (winner, runners...) ->
print winner, runners

alert "I knew it!" if elvis?

cubes = (math.cube num for num in list)

var cubes, list, math, num, number, race = function() {
opposite, race, square, var runners, winner;
__slice = [].slice; winner = arguments[0], runners = 2 <=
arguments.length ? __slice.call(arguments, 1) : [];
number = 42; return print(winner, runners);
};
opposite = true;
if (typeof elvis !== "undefined" && elvis !== null) {
if (opposite) { alert("I knew it!");
number = -42; }
}
cubes = (function() {
square = function(x) { var _i, _len, _results;
return x * x; _results = [];
}; for (_i = 0, _len = list.length; _i < _len; _i++) {
num = list[_i];
list = [1, 2, 3, 4, 5]; _results.push(math.cube(num));
}
math = { return _results;
root: Math.sqrt, })();
square: square,
cube: function(x) {
return x * square(x);
}
};

http://coffeescript.org/

http://www.ﬂickr.com/photos/gruts/4612133889/

Jens-Christian Fischer
jens-christian.fischer@simplificator.com
@jcfischer

Beyond HTML Präsentation an ONE Konferenz 2012 von Jens-Christian Fischer steht unter einer
Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Schweiz Lizenz.

Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr

More Related Content

What's hot

Similar to Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr

More from Jens-Christian Fischer

Recently uploaded

Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr

Editor's Notes