Your SlideShare is downloading. ×
Beyond HTML Internet Briefing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Beyond HTML Internet Briefing

876
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, …

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
876
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Beyond HTML Scriptsprachen, Frameworks, Templatesprachen und vieles mehr 4. Dezember 2012 Jens-Christian Fischer @jcfischerFreitag, 7. Dezember 12
  • 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. Freitag, 7. Dezember 12
  • 4. Freitag, 7. Dezember 12
  • 5. 1992Freitag, 7. Dezember 12
  • 6. Freitag, 7. Dezember 12
  • 7. 1998Freitag, 7. Dezember 12
  • 8. Freitag, 7. Dezember 12
  • 9. 2001Freitag, 7. Dezember 12
  • 10. Freitag, 7. Dezember 12
  • 11. Freitag, 7. Dezember 12
  • 12. 2012Freitag, 7. Dezember 12
  • 13. Freitag, 7. Dezember 12
  • 14. Freitag, 7. Dezember 12
  • 15. Freitag, 7. Dezember 12
  • 16. Freitag, 7. Dezember 12
  • 17. http://flickr.com/photos/glennharper/49536169/Freitag, 7. Dezember 12
  • 18. Freitag, 7. Dezember 12
  • 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. Software ToolsFreitag, 7. Dezember 12
  • 21. Freitag, 7. Dezember 12
  • 22. Freitag, 7. Dezember 12
  • 23. Freitag, 7. Dezember 12
  • 24. http://ivanzuzak.info/2012/11/18/the-web-engineers-online- toolbox.htmlFreitag, 7. Dezember 12
  • 25. Freitag, 7. Dezember 12
  • 26. Freitag, 7. Dezember 12
  • 27. HTML CSS JavaScriptFreitag, 7. Dezember 12
  • 28. Freitag, 7. Dezember 12
  • 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. 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. 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. 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. Semantisch http://slides.html5rocks.com/#new-form-typesFreitag, 7. Dezember 12
  • 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. 3D Graphik http://slides.html5rocks.com/#canvas-3dFreitag, 7. Dezember 12
  • 36. Präsentation (CSS 3)Freitag, 7. Dezember 12
  • 37. Präsentation (CSS 3) Typographie (Webfonts)Freitag, 7. Dezember 12
  • 38. Präsentation (CSS 3) Typographie (Webfonts) Rotation (2D / 3D)Freitag, 7. Dezember 12
  • 39. Responsive DesignFreitag, 7. Dezember 12
  • 40. HTML Tools http://www.flickr.com/photos/lynnfriedman/5570720402/Freitag, 7. Dezember 12
  • 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. 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. 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. 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. http://haml-lang.com/ Python, Lua, ASP.NET, .NET, PHP, PHP5, JavaScript, Perl, Scala, JavaFreitag, 7. Dezember 12
  • 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. 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. 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. Templates http://www.flickr.com/photos/jima/460348206/Freitag, 7. Dezember 12
  • 50. Freitag, 7. Dezember 12
  • 51. Freitag, 7. Dezember 12
  • 52. Freitag, 7. Dezember 12
  • 53. Mustache {{ }} http://mustache.github.com/Freitag, 7. Dezember 12
  • 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. 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. 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. CSS Tools http://www.flickr.com/photos/the-meir/2201434695/Freitag, 7. Dezember 12
  • 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. Inhalt Form VerhaltenFreitag, 7. Dezember 12
  • 60. Inhalt Form VerhaltenFreitag, 7. Dezember 12
  • 61. html css javascriptFreitag, 7. Dezember 12
  • 62. Freitag, 7. Dezember 12
  • 63. Freitag, 7. Dezember 12
  • 64. 2744 ZeilenFreitag, 7. Dezember 12
  • 65. „Besseres“ CSSFreitag, 7. Dezember 12
  • 66. „Besseres“ CSS SCSS http://sass-lang.com/Freitag, 7. Dezember 12
  • 67. „Besseres“ CSS SCSS http://sass-lang.com/ http://lesscss.org/Freitag, 7. Dezember 12
  • 68. Vorteile • Modular - includes • Variablen • Berechnungen • MixinsFreitag, 7. Dezember 12
  • 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. 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. 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. 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. 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. Browser Prefixe Präfix Browser -moz- Firefox -webkit- Safari, Chrome -o- Opera -ms-, -mso- Internet ExplorerFreitag, 7. Dezember 12
  • 75. .my-class, #my-id { border-radius: 1em; transition: all 1s ease; box-shadow: #123456 0 0 10px; }Freitag, 7. Dezember 12
  • 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. 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. 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. 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. 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. ModularFreitag, 7. Dezember 12
  • 82. WebKitFreitag, 7. Dezember 12
  • 83. WebKit E 6 e I n e u d e r istFreitag, 7. Dezember 12
  • 84. JavaScript ToolsFreitag, 7. Dezember 12
  • 85. JS DOM FrameworksFreitag, 7. Dezember 12
  • 86. Application FrameworksFreitag, 7. Dezember 12
  • 87. Freitag, 7. Dezember 12
  • 88. Tools SocketstreamFreitag, 7. Dezember 12
  • 89. TestingFreitag, 7. Dezember 12
  • 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. http://visionmedia.github.com/mocha/Freitag, 7. Dezember 12
  • 92. Freitag, 7. Dezember 12
  • 93. ServerFreitag, 7. Dezember 12
  • 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. 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. 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. Freitag, 7. Dezember 12
  • 98. http://www.flickr.com/photos/gruts/4612133889/Freitag, 7. Dezember 12
  • 99. Jens-Christian Fischer jcf@mobino.com @jcfischerFreitag, 7. Dezember 12
  • 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