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

Storage

http://diveintohtml5.info/storage.html

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

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

3D Graphik

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

Präsentation (CSS 3)

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>

profileleft column

address = current_user.address

right column

email = current_user.emailbio = current_user.bio

h4 Willkommenp

profileleft column

address = current_user.address

right column

email = current_user.emailbio = current_user.bio

h4 Willkommenp

profileleft column

address= current_user.addressright column

email= current_user.emailbio= current_user.bio

ullili

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

profileleft column

ullili

http://haml-lang.com/

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

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

profileleft column

ullili

Willkommen

profileleft column

ullili

http://jade-lang.com/

Willkommen

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

profileleft column

ullili

http://jade-lang.com/

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

SCSShttp://sass-lang.com/

„Besseres“ CSS

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

Variablen

Berechnungen

Variablen

Berechnungen

Funktionsaufruf

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

Mixin Variable

#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

ist der neue IE 6

JavaScript Tools

JS DOM Frameworks

Application Frameworks

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

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

jcf@mobino.com

@jcfischer

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.

Beyond HTML Internet Briefing

Technology

design4usability.dedesign4usability.de/wp-content/uploads/Briefing-Web-De… · Web viewEs handelt sich um Standard-HTML-Elemente. Für folgende Inhaltsformen unbedingt Design mitplanen:

INVESTING BEYOND CAPITAL MARKETS

SugarCRM Management Briefing Oktober 2011

BYND - Beyond the surface

„Das ABS-Briefing die standardisierte Patientenübergabe“ · -- ABS-Briefing kann als einfaches, schnell schulbares und kostengünstiges Instrument zur Erhöhung der Patienten-

Briefing Mediaplanung SoSe2018 - oszhandel.de · Mediaplanung Sommersemester 2018 Briefing Fertigdessert ... verteilt auf Printwerbung (Leitmedium), Out of Home, Online, weitere Optionen

BOOK BRIEFING - Assumption University Briefing-Starbucks Experi… · starbucks experience: ความสําเร็จธรรมดาที่ี่ไม ธรรมดา

Beyond Map and Reduce

Internet Briefing 2011: NoSQL with MySQL

Beyond Cloud

Web-Design-Briefing Fragebogendesign4usability.de/wp-content/uploads/Briefing-Web-Design.pdf · Mediendesign & Programmierung - Ingo Förster Dipl.-Des.(FH) - AN / Agentur = Auftragnehmer,

Steuerung von Internetagenturen internet-briefing

CAUSA Executive Briefing Industrie 4.0

Beyond b1 Sb

BONE, BIOMATERIALS & BEYOND ACADEMY

Beyond Lean Hospital

Beyond Ausgabe #4 – Leseprobe

kostenlose HTML-CSS Kurzreferenz - HTML Seminar

Der J&Beyond e.V

Beyond 08/2009