beyond html internet briefing
DESCRIPTION
Früher war alles besser - sowieso! Konnte man vor 20 Jahren alleine mit HTML einen Webauftritt gestalten, hat sich die Anzahl der Technologien, die eine Webentwicklerin beherrschen muss, ... Vortrag am Internet Briefing in Zürich, 4.12.2012TRANSCRIPT
![Page 1: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/1.jpg)
Beyond HTMLScriptsprachen, Frameworks, Templatesprachen und
vieles mehr
4. Dezember 2012Jens-Christian Fischer
@jcfischer
Freitag, 7. Dezember 12
![Page 2: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/2.jpg)
Beyond HTMLScriptsprachen, Frameworks, Templatesprachen und
vieles mehr
4. Dezember 2012Jens-Christian Fischer
@jcfischer
Werkzeug
Freitag, 7. Dezember 12
![Page 3: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/3.jpg)
Freitag, 7. Dezember 12
![Page 4: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/4.jpg)
Freitag, 7. Dezember 12
![Page 5: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/5.jpg)
1992Freitag, 7. Dezember 12
![Page 6: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/6.jpg)
Freitag, 7. Dezember 12
![Page 7: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/7.jpg)
1998Freitag, 7. Dezember 12
![Page 8: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/8.jpg)
Freitag, 7. Dezember 12
![Page 9: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/9.jpg)
2001Freitag, 7. Dezember 12
![Page 10: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/10.jpg)
Freitag, 7. Dezember 12
![Page 11: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/11.jpg)
Freitag, 7. Dezember 12
![Page 12: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/12.jpg)
2012Freitag, 7. Dezember 12
![Page 13: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/13.jpg)
Freitag, 7. Dezember 12
![Page 14: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/14.jpg)
Freitag, 7. Dezember 12
![Page 15: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/15.jpg)
Freitag, 7. Dezember 12
![Page 16: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/16.jpg)
Freitag, 7. Dezember 12
![Page 17: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/17.jpg)
http://flickr.com/photos/glennharper/49536169/
Freitag, 7. Dezember 12
![Page 18: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/18.jpg)
Freitag, 7. Dezember 12
![Page 19: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/19.jpg)
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
Freitag, 7. Dezember 12
![Page 20: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/20.jpg)
Software Tools
Freitag, 7. Dezember 12
![Page 21: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/21.jpg)
Freitag, 7. Dezember 12
![Page 22: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/22.jpg)
Freitag, 7. Dezember 12
![Page 23: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/23.jpg)
Freitag, 7. Dezember 12
![Page 24: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/24.jpg)
http://ivanzuzak.info/2012/11/18/the-web-engineers-online-toolbox.html
Freitag, 7. Dezember 12
![Page 25: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/25.jpg)
Freitag, 7. Dezember 12
![Page 26: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/26.jpg)
Freitag, 7. Dezember 12
![Page 27: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/27.jpg)
HTMLCSS
JavaScript
Freitag, 7. Dezember 12
![Page 28: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/28.jpg)
Freitag, 7. Dezember 12
![Page 29: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/29.jpg)
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
Freitag, 7. Dezember 12
![Page 30: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/30.jpg)
Storage
http://diveintohtml5.info/storage.html
if (Modernizr.localstorage) { var foo = localStorage.getItem("key"); // ... localStorage.setItem("key", foo);} else { alert('No storage capabilities');}
Freitag, 7. Dezember 12
![Page 31: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/31.jpg)
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); }});
Freitag, 7. Dezember 12
![Page 32: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/32.jpg)
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
Freitag, 7. Dezember 12
![Page 33: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/33.jpg)
Semantisch
http://slides.html5rocks.com/#new-form-types
Freitag, 7. Dezember 12
![Page 34: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/34.jpg)
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>
Freitag, 7. Dezember 12
![Page 35: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/35.jpg)
3D Graphik
http://slides.html5rocks.com/#canvas-3d
Freitag, 7. Dezember 12
![Page 36: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/36.jpg)
Präsentation (CSS 3)
Freitag, 7. Dezember 12
![Page 37: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/37.jpg)
Präsentation (CSS 3)Typographie (Webfonts)
Freitag, 7. Dezember 12
![Page 38: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/38.jpg)
Präsentation (CSS 3)Typographie (Webfonts)
Rotation (2D / 3D)
Freitag, 7. Dezember 12
![Page 39: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/39.jpg)
Responsive Design
Freitag, 7. Dezember 12
![Page 40: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/40.jpg)
HTML Tools
http://www.flickr.com/photos/lynnfriedman/5570720402/
Freitag, 7. Dezember 12
![Page 41: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/41.jpg)
<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
Freitag, 7. Dezember 12
![Page 42: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/42.jpg)
HTML
profileleft column
address = current_user.address
right column
email = current_user.emailbio = current_user.bio
h4 Willkommenp
ul
lili
Freitag, 7. Dezember 12
![Page 43: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/43.jpg)
HAML
profileleft column
address= current_user.addressright column
email= current_user.emailbio= current_user.bio
h4p
ullili
Freitag, 7. Dezember 12
![Page 44: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/44.jpg)
#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
address= current_user.addressright column
email= current_user.emailbio= current_user.bio
h4p
ullili
Freitag, 7. Dezember 12
![Page 45: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/45.jpg)
http://haml-lang.com/
Python, Lua, ASP.NET, .NET, PHP, PHP5, JavaScript, Perl, Scala, Java
Freitag, 7. Dezember 12
![Page 46: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/46.jpg)
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
address= current_user.addressright column
email= current_user.emailbio= current_user.bio
h4p
ullili
Willkommen
Freitag, 7. Dezember 12
![Page 47: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/47.jpg)
Jade
profileleft column
address= current_user.addressright column
email= current_user.emailbio= current_user.bio
h4p
ullili
http://jade-lang.com/
Willkommen
Freitag, 7. Dezember 12
![Page 48: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/48.jpg)
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
address= current_user.addressright column
email= current_user.emailbio= current_user.bio
h4p
ullili
http://jade-lang.com/
Willkommen
Freitag, 7. Dezember 12
![Page 49: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/49.jpg)
Templates
http://www.flickr.com/photos/jima/460348206/
Freitag, 7. Dezember 12
![Page 50: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/50.jpg)
Freitag, 7. Dezember 12
![Page 51: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/51.jpg)
Freitag, 7. Dezember 12
![Page 52: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/52.jpg)
Freitag, 7. Dezember 12
![Page 53: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/53.jpg)
{{ }}Mustache
http://mustache.github.com/
Freitag, 7. Dezember 12
![Page 54: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/54.jpg)
<h1>{{header}}</h1>
{{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}}{{/items
Mustache Template
Freitag, 7. Dezember 12
![Page 55: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/55.jpg)
JSON Daten
{ "header": "Colors", "items": [ {"name": "red", "first": true, "url": "#Red"}, {"name": "green", "link": true, "url": "#Green"}, {"name": "blue", "link": true, "url": "#Blue"} ],}
Freitag, 7. Dezember 12
![Page 56: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/56.jpg)
Resultat
<h1>Colors</h1><li><strong>red</strong></li><li><a href="#Green">green</a></li><li><a href="#Blue">blue</a></li
Freitag, 7. Dezember 12
![Page 57: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/57.jpg)
CSS Tools
http://www.flickr.com/photos/the-meir/2201434695/
Freitag, 7. Dezember 12
![Page 58: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/58.jpg)
<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/
Freitag, 7. Dezember 12
![Page 59: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/59.jpg)
InhaltFormVerhalten
Freitag, 7. Dezember 12
![Page 60: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/60.jpg)
Inhalt Form
Verhalten
Freitag, 7. Dezember 12
![Page 61: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/61.jpg)
html css
javascript
Freitag, 7. Dezember 12
![Page 62: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/62.jpg)
Freitag, 7. Dezember 12
![Page 63: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/63.jpg)
Freitag, 7. Dezember 12
![Page 64: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/64.jpg)
2744 Zeilen
Freitag, 7. Dezember 12
![Page 65: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/65.jpg)
„Besseres“ CSS
Freitag, 7. Dezember 12
![Page 66: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/66.jpg)
„Besseres“ CSS
SCSShttp://sass-lang.com/
Freitag, 7. Dezember 12
![Page 67: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/67.jpg)
„Besseres“ CSS
SCSShttp://sass-lang.com/ http://lesscss.org/
Freitag, 7. Dezember 12
![Page 68: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/68.jpg)
Vorteile
• Modular - includes
• Variablen
• Berechnungen
• Mixins
Freitag, 7. Dezember 12
![Page 69: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/69.jpg)
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%); } }}
Freitag, 7. Dezember 12
![Page 70: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/70.jpg)
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
Freitag, 7. Dezember 12
![Page 71: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/71.jpg)
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
Freitag, 7. Dezember 12
![Page 72: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/72.jpg)
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
Funktionsaufruf
Freitag, 7. Dezember 12
![Page 73: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/73.jpg)
CSS
#navbar { width: 800px; border-bottom: 2px solid #ce4dd6; } #navbar li { float: left; width: 150px; background-color: #e5a0e9; } #navbar li:hover { background-color: #d976e0; }
Freitag, 7. Dezember 12
![Page 74: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/74.jpg)
Browser Prefixe
Präfix Browser
-moz- Firefox
-webkit- Safari, Chrome
-o- Opera
-ms-, -mso- Internet Explorer
Freitag, 7. Dezember 12
![Page 75: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/75.jpg)
.my-class, #my-id { border-radius: 1em; transition: all 1s ease; box-shadow: #123456 0 0 10px;}
Freitag, 7. Dezember 12
![Page 76: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/76.jpg)
.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; }
Freitag, 7. Dezember 12
![Page 77: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/77.jpg)
@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
Freitag, 7. Dezember 12
![Page 78: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/78.jpg)
@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
SCSS
Freitag, 7. Dezember 12
![Page 79: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/79.jpg)
@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
SCSS
Freitag, 7. Dezember 12
![Page 80: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/80.jpg)
#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
Freitag, 7. Dezember 12
![Page 81: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/81.jpg)
Modular
Freitag, 7. Dezember 12
![Page 82: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/82.jpg)
WebKit
Freitag, 7. Dezember 12
![Page 83: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/83.jpg)
WebKit
ist der neue IE 6
Freitag, 7. Dezember 12
![Page 84: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/84.jpg)
JavaScript Tools
Freitag, 7. Dezember 12
![Page 85: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/85.jpg)
JS DOM Frameworks
Freitag, 7. Dezember 12
![Page 86: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/86.jpg)
Application Frameworks
Freitag, 7. Dezember 12
![Page 87: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/87.jpg)
Freitag, 7. Dezember 12
![Page 88: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/88.jpg)
Tools
Socketstream
Freitag, 7. Dezember 12
![Page 89: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/89.jpg)
Testing
Freitag, 7. Dezember 12
![Page 90: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/90.jpg)
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(""); });});
Freitag, 7. Dezember 12
![Page 91: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/91.jpg)
http://visionmedia.github.com/mocha/Freitag, 7. Dezember 12
![Page 92: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/92.jpg)
Freitag, 7. Dezember 12
![Page 93: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/93.jpg)
Server
Freitag, 7. Dezember 12
![Page 94: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/94.jpg)
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/');
Freitag, 7. Dezember 12
![Page 95: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/95.jpg)
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)
Freitag, 7. Dezember 12
![Page 96: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/96.jpg)
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/
Freitag, 7. Dezember 12
![Page 97: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/97.jpg)
Freitag, 7. Dezember 12
![Page 98: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/98.jpg)
http://www.flickr.com/photos/gruts/4612133889/
Freitag, 7. Dezember 12
![Page 99: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/99.jpg)
Jens-Christian Fischer
@jcfischer
Freitag, 7. Dezember 12
![Page 100: Beyond HTML Internet Briefing](https://reader033.vdocuments.net/reader033/viewer/2022042713/547ba415b379593a2b8b4dd0/html5/thumbnails/100.jpg)
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.
Freitag, 7. Dezember 12