Beyond HTML Internet Briefing

Beyond HTML
Scriptsprachen, Frameworks, Templatesprachen und
vieles mehr

4. Dezember 2012
Jens-Christian Fischer
@jcﬁscher

Freitag, 7. Dezember 12

Beyond HTML
ze u g
rk
Scriptsprachen, Frameworks, Templatesprachen und

e
vieles mehr

W 4. Dezember 2012
@jcﬁscher


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


Software Tools


http://ivanzuzak.info/2012/11/18/the-web-engineers-online-
toolbox.html

HTML
CSS
JavaScript

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.info/ofﬂine.html


Storage
if (Modernizr.localstorage) {
var foo = localStorage.getItem("key");
// ...
localStorage.setItem("key", foo);
} else {
alert('No storage capabilities');
}
http://diveintohtml5.info/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)


Typographie (Webfonts)

Rotation (2D / 3D)


Responsive Design


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


Inhalt Form

Verhalten


html css

javascript


2744 Zeilen


„Besseres“ CSS


„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;
}


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; }


Modular


WebKit


WebKit

E 6
e I
n e u
d e r
ist


JavaScript Tools


JS DOM Frameworks


Application
Frameworks


Tools

Socketstream


Testing


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/

Server


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/



jcf@mobino.com

@jcﬁscher


Beyond HTML Präsentation am Internet Brieﬁng von Jens-Christian Fischer steht unter einer Creative
Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Schweiz Lizenz.


Beyond HTML Internet Briefing

Weitere ähnliche Inhalte

Empfohlen

Beyond HTML Internet Briefing