Beyond HTML Internet Briefing

Beyond HTMLScriptsprachen, Frameworks, Templatesprachen und

vieles mehr

4. Dezember 2012Jens-Christian Fischer

@jcfischer

Freitag, 7. Dezember 12

Beyond HTMLScriptsprachen, Frameworks, Templatesprachen und

vieles mehr

4. Dezember 2012Jens-Christian Fischer

@jcfischer

Werkzeug




1992Freitag, 7. Dezember 12












http://flickr.com/photos/glennharper/49536169/





Werkzeuge

The Way of the carpenter is to become proficient in the use of his tools, first 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








HTMLCSS

JavaScript



Offline

<!DOCTYPE HTML><html manifest="/cache.manifest"><body>...</body></html>

CACHE MANIFESTFALLBACK:/ /offline.htmlNETWORK:/tracking.cgiCACHE:/clock.css/clock.js/clock-face.jpg

http://diveintohtml5.info/offline.html


http://diveintohtml5.org/offline.html

http://diveintohtml5.org/offline.html

Storage

http://diveintohtml5.info/storage.html

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


http://diveintohtml5.org/storage.html

http://diveintohtml5.org/storage.html

Websocketsvar 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)


Präsentation (CSS 3)Typographie (Webfonts)


Präsentation (CSS 3)Typographie (Webfonts)

Rotation (2D / 3D)


Responsive Design


HTML Tools

http://www.flickr.com/photos/lynnfriedman/5570720402/




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

HTML

profileleft column

address = current_user.address

right column

email = current_user.emailbio = current_user.bio

h4 Willkommenp

ul

lili


HTML

profileleft column

address = current_user.address

right column

email = current_user.emailbio = current_user.bio

h4 Willkommenp

ul

lili


HAML

profileleft column

address= current_user.addressright column

email= current_user.emailbio= current_user.bio

h4p

ullili


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

HAML

profileleft column



h4p

ullili


http://haml-lang.com/

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




HAML

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

profileleft column



h4p

ullili

Willkommen


Jade

profileleft column



h4p

ullili

http://jade-lang.com/

Willkommen




Jade

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

profileleft column



h4p

ullili


Willkommen




Templates

http://www.flickr.com/photos/jima/460348206/







{{ }}Mustache

http://mustache.github.com/




<h1>{{header}}</h1>

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

Mustache Template


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.flickr.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/




InhaltFormVerhalten


Inhalt Form

Verhalten


html css

javascript




2744 Zeilen


„Besseres“ CSS


„Besseres“ CSS

SCSShttp://sass-lang.com/


http://sass-lang.com/


„Besseres“ CSS

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




http://lesscss.org/

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: lighten($navbar-color, 10%); } }}






Variablen






Variablen

Berechnungen






Variablen

Berechnungen

Funktionsaufruf


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 Prefixe

Präfix 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; }


@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

SCSS


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

CSS


Modular


WebKit


WebKit

ist der neue IE 6


JavaScript Tools


JS DOM Frameworks


Application Frameworks



Tools

Socketstream


Testing


Jasmine

http://pivotal.github.com/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://visionmedia.github.com/mocha/Freitag, 7. Dezember 12

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

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 World\n');}).listen(1337, '127.0.0.1');console.log('Server running at http://127.0.0.1:1337/');


CoffeeScriptnumber = 42opposite = 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, opposite, race, square, __slice = [].slice;

number = 42;

opposite = true;

if (opposite) { number = -42;}

square = function(x) { return x * x;};

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

math = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); }};

race = function() { var runners, winner; winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : []; return print(winner, runners);};

if (typeof elvis !== "undefined" && elvis !== null) { alert("I knew it!");}

cubes = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = list.length; _i < _len; _i++) { num = list[_i]; _results.push(math.cube(num)); } return _results;})();

http://coffeescript.org/





http://www.flickr.com/photos/gruts/4612133889/




Jens-Christian Fischer

[email protected]

@jcfischer


mailto:[email protected]

mailto:[email protected]

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


http://creativecommons.org/licenses/by-sa/3.0/ch/




Technology

Beyond HTML Internet Briefing