Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beyond HTML Internet Briefing

1,139 views

Published on

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.2012

Published in: Technology
  • Be the first to comment

Beyond HTML Internet Briefing

  1. 1. Beyond HTML Scriptsprachen, Frameworks, Templatesprachen und vieles mehr 4. Dezember 2012 Jens-Christian Fischer @jcfischerFreitag, 7. Dezember 12
  2. 2. Beyond HTML ze u g rk Scriptsprachen, Frameworks, Templatesprachen und e vieles mehr W 4. Dezember 2012 Jens-Christian Fischer @jcfischerFreitag, 7. Dezember 12
  3. 3. Freitag, 7. Dezember 12
  4. 4. Freitag, 7. Dezember 12
  5. 5. 1992Freitag, 7. Dezember 12
  6. 6. Freitag, 7. Dezember 12
  7. 7. 1998Freitag, 7. Dezember 12
  8. 8. Freitag, 7. Dezember 12
  9. 9. 2001Freitag, 7. Dezember 12
  10. 10. Freitag, 7. Dezember 12
  11. 11. Freitag, 7. Dezember 12
  12. 12. 2012Freitag, 7. Dezember 12
  13. 13. Freitag, 7. Dezember 12
  14. 14. Freitag, 7. Dezember 12
  15. 15. Freitag, 7. Dezember 12
  16. 16. Freitag, 7. Dezember 12
  17. 17. http://flickr.com/photos/glennharper/49536169/Freitag, 7. Dezember 12
  18. 18. Freitag, 7. Dezember 12
  19. 19. 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 ShoFreitag, 7. Dezember 12
  20. 20. Software ToolsFreitag, 7. Dezember 12
  21. 21. Freitag, 7. Dezember 12
  22. 22. Freitag, 7. Dezember 12
  23. 23. Freitag, 7. Dezember 12
  24. 24. http://ivanzuzak.info/2012/11/18/the-web-engineers-online- toolbox.htmlFreitag, 7. Dezember 12
  25. 25. Freitag, 7. Dezember 12
  26. 26. Freitag, 7. Dezember 12
  27. 27. HTML CSS JavaScriptFreitag, 7. Dezember 12
  28. 28. Freitag, 7. Dezember 12
  29. 29. Offline <!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/offline.htmlFreitag, 7. Dezember 12
  30. 30. Storage if (Modernizr.localstorage) { var foo = localStorage.getItem("key"); // ... localStorage.setItem("key", foo); } else { alert(No storage capabilities); } http://diveintohtml5.info/storage.htmlFreitag, 7. Dezember 12
  31. 31. 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); } } );Freitag, 7. Dezember 12
  32. 32. 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 elements 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(); // dont allow selection to be dragged } } </script http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dragevent-and-datatransfer-interfacesFreitag, 7. Dezember 12
  33. 33. Semantisch http://slides.html5rocks.com/#new-form-typesFreitag, 7. Dezember 12
  34. 34. 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
  35. 35. 3D Graphik http://slides.html5rocks.com/#canvas-3dFreitag, 7. Dezember 12
  36. 36. Präsentation (CSS 3)Freitag, 7. Dezember 12
  37. 37. Präsentation (CSS 3) Typographie (Webfonts)Freitag, 7. Dezember 12
  38. 38. Präsentation (CSS 3) Typographie (Webfonts) Rotation (2D / 3D)Freitag, 7. Dezember 12
  39. 39. Responsive DesignFreitag, 7. Dezember 12
  40. 40. HTML Tools http://www.flickr.com/photos/lynnfriedman/5570720402/Freitag, 7. Dezember 12
  41. 41. 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>Freitag, 7. Dezember 12
  42. 42. HTML profile left column h4 Willkommen p address = current_user.address right column ul li email = current_user.email li bio = current_user.bioFreitag, 7. Dezember 12
  43. 43. HAML profile left column h4 p address= current_user.address right column ul li email= current_user.email li bio= current_user.bioFreitag, 7. Dezember 12
  44. 44. 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_userFreitag, 7. Dezember 12
  45. 45. http://haml-lang.com/ Python, Lua, ASP.NET, .NET, PHP, PHP5, JavaScript, Perl, Scala, JavaFreitag, 7. Dezember 12
  46. 46. 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_userFreitag, 7. Dezember 12
  47. 47. Jade profile left column h4 Willkommen p address= current_user.address right column ul li email= current_user.email li bio= current_user.bio http://jade-lang.com/Freitag, 7. Dezember 12
  48. 48. Jade #profile profile .left.column left column h4 Willkommen p address= current_user.address p#address= .right.column right column ul li email= current_user.email li#email= li bio= current_user li#bio= current_user.bio http://jade-lang.com/Freitag, 7. Dezember 12
  49. 49. Templates http://www.flickr.com/photos/jima/460348206/Freitag, 7. Dezember 12
  50. 50. Freitag, 7. Dezember 12
  51. 51. Freitag, 7. Dezember 12
  52. 52. Freitag, 7. Dezember 12
  53. 53. Mustache {{ }} http://mustache.github.com/Freitag, 7. Dezember 12
  54. 54. Mustache Template <h1>{{header}}</h1> {{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}} {{/itemsFreitag, 7. Dezember 12
  55. 55. 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
  56. 56. Resultat <h1>Colors</h1> <li><strong>red</strong></li> <li><a href="#Green">green</a></li> <li><a href="#Blue">blue</a></liFreitag, 7. Dezember 12
  57. 57. CSS Tools http://www.flickr.com/photos/the-meir/2201434695/Freitag, 7. Dezember 12
  58. 58. <font face="Arial Black">&nbsp;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 &quot;how to purchase&quot; INFO page,please <a target="_blank" href="a000-PURCHASE-info.htm">click HERE !</a>&nbsp;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
  59. 59. Inhalt Form VerhaltenFreitag, 7. Dezember 12
  60. 60. Inhalt Form VerhaltenFreitag, 7. Dezember 12
  61. 61. html css javascriptFreitag, 7. Dezember 12
  62. 62. Freitag, 7. Dezember 12
  63. 63. Freitag, 7. Dezember 12
  64. 64. 2744 ZeilenFreitag, 7. Dezember 12
  65. 65. „Besseres“ CSSFreitag, 7. Dezember 12
  66. 66. „Besseres“ CSS SCSS http://sass-lang.com/Freitag, 7. Dezember 12
  67. 67. „Besseres“ CSS SCSS http://sass-lang.com/ http://lesscss.org/Freitag, 7. Dezember 12
  68. 68. Vorteile • Modular - includes • Variablen • Berechnungen • MixinsFreitag, 7. Dezember 12
  69. 69. 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
  70. 70. SCSS #navbar { $navbar-width: 800px; Variablen $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
  71. 71. SCSS #navbar { $navbar-width: 800px; Variablen $items: 5; $navbar-color: #ce4dd6; width: $navbar-width; border-bottom: 2px solid $navbar-color; Berechnungen 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
  72. 72. SCSS #navbar { $navbar-width: 800px; Variablen $items: 5; $navbar-color: #ce4dd6; width: $navbar-width; border-bottom: 2px solid $navbar-color; Berechnungen li { float: left; width: $navbar-width/$items - 10px; background-color: Funktionsaufruf lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } } }Freitag, 7. Dezember 12
  73. 73. 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
  74. 74. Browser Prefixe Präfix Browser -moz- Firefox -webkit- Safari, Chrome -o- Opera -ms-, -mso- Internet ExplorerFreitag, 7. Dezember 12
  75. 75. .my-class, #my-id { border-radius: 1em; transition: all 1s ease; box-shadow: #123456 0 0 10px; }Freitag, 7. Dezember 12
  76. 76. .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
  77. 77. 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); }Freitag, 7. Dezember 12
  78. 78. SCSS Mixin @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); }Freitag, 7. Dezember 12
  79. 79. SCSS Mixin Variable @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); }Freitag, 7. Dezember 12
  80. 80. 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; }Freitag, 7. Dezember 12
  81. 81. ModularFreitag, 7. Dezember 12
  82. 82. WebKitFreitag, 7. Dezember 12
  83. 83. WebKit E 6 e I n e u d e r istFreitag, 7. Dezember 12
  84. 84. JavaScript ToolsFreitag, 7. Dezember 12
  85. 85. JS DOM FrameworksFreitag, 7. Dezember 12
  86. 86. Application FrameworksFreitag, 7. Dezember 12
  87. 87. Freitag, 7. Dezember 12
  88. 88. Tools SocketstreamFreitag, 7. Dezember 12
  89. 89. TestingFreitag, 7. Dezember 12
  90. 90. 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/Freitag, 7. Dezember 12
  91. 91. http://visionmedia.github.com/mocha/Freitag, 7. Dezember 12
  92. 92. Freitag, 7. Dezember 12
  93. 93. ServerFreitag, 7. Dezember 12
  94. 94. 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/);Freitag, 7. Dezember 12
  95. 95. 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)Freitag, 7. Dezember 12
  96. 96. 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/Freitag, 7. Dezember 12
  97. 97. Freitag, 7. Dezember 12
  98. 98. http://www.flickr.com/photos/gruts/4612133889/Freitag, 7. Dezember 12
  99. 99. Jens-Christian Fischer jcf@mobino.com @jcfischerFreitag, 7. Dezember 12
  100. 100. 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

×