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

Ähnliche diashows

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Empfohlen für Sie

Weitere ähnliche Inhalte

Empfohlen

Empfohlen (20)

Beyond HTML Internet Briefing