SlideShare ist ein Scribd-Unternehmen logo
1 von 100
Downloaden Sie, um offline zu lesen
Beyond HTML
                          Scriptsprachen, Frameworks, Templatesprachen und
                                              vieles mehr


                                         4. Dezember 2012
                                       Jens-Christian Fischer
                                             @jcfischer




Freitag, 7. Dezember 12
Beyond HTML
                                                     ze u g
                       rk
                          Scriptsprachen, Frameworks, Templatesprachen und


                     e
                                              vieles mehr


                    W                    4. Dezember 2012
                                       Jens-Christian Fischer
                                             @jcfischer




Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
1992
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
1998
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
2001
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
2012
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
http://flickr.com/photos/glennharper/49536169/
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
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
Software Tools


Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
http://ivanzuzak.info/2012/11/18/the-web-engineers-online-
                          toolbox.html
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
HTML
                             CSS
                          JavaScript
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
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.html

Freitag, 7. Dezember 12
Storage
       if (Modernizr.localstorage) {
         var foo = localStorage.getItem("key");
         // ...
         localStorage.setItem("key", foo);
       } else {
         alert('No storage capabilities');
       }
                          http://diveintohtml5.info/storage.html




Freitag, 7. Dezember 12
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
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
Semantisch




                          http://slides.html5rocks.com/#new-form-types



Freitag, 7. Dezember 12
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
3D Graphik




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

Freitag, 7. Dezember 12
Präsentation (CSS 3)




Freitag, 7. Dezember 12
Präsentation (CSS 3)
                                     Typographie (Webfonts)




Freitag, 7. Dezember 12
Präsentation (CSS 3)
                                     Typographie (Webfonts)




             Rotation (2D / 3D)

Freitag, 7. Dezember 12
Responsive Design




Freitag, 7. Dezember 12
HTML Tools


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

Freitag, 7. Dezember 12
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
HTML
                       profile
                            left column
                   h4 Willkommen
                   p     address    = current_user.address

                               right column
                   ul
                          li   email     = current_user.email
                          li   bio     = current_user.bio




Freitag, 7. Dezember 12
HAML

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




Freitag, 7. Dezember 12
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_user




Freitag, 7. Dezember 12
http://haml-lang.com/


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

Freitag, 7. Dezember 12
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_user




Freitag, 7. Dezember 12
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
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
Templates



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

Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Mustache


                          {{ }}
                          http://mustache.github.com/


Freitag, 7. Dezember 12
Mustache Template
                          <h1>{{header}}</h1>

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




Freitag, 7. Dezember 12
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
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
CSS Tools


                          http://www.flickr.com/photos/the-meir/2201434695/

Freitag, 7. Dezember 12
<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
Inhalt
                            Form
                          Verhalten




Freitag, 7. Dezember 12
Inhalt               Form

                                   Verhalten



Freitag, 7. Dezember 12
html                css

                                 javascript



Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
2744 Zeilen




Freitag, 7. Dezember 12
„Besseres“ CSS




Freitag, 7. Dezember 12
„Besseres“ CSS




                           SCSS
                      http://sass-lang.com/

Freitag, 7. Dezember 12
„Besseres“ CSS




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

Freitag, 7. Dezember 12
Vorteile

                     • Modular - includes
                     • Variablen
                     • Berechnungen
                     • Mixins

Freitag, 7. Dezember 12
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
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
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
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
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
Browser Prefixe
                           Präfix           Browser

                            -moz-            Firefox

                           -webkit-      Safari, Chrome

                              -o-            Opera

                          -ms-, -mso-   Internet Explorer



Freitag, 7. Dezember 12
.my-class, #my-id {
                              border-radius: 1em;
                              transition: all 1s ease;
                              box-shadow: #123456 0 0 10px;
                          }




Freitag, 7. Dezember 12
.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
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
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
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
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
Modular




Freitag, 7. Dezember 12
WebKit




Freitag, 7. Dezember 12
WebKit

                                                   E 6
                                                e I
                                        n e u
                                d e r
                          ist

Freitag, 7. Dezember 12
JavaScript Tools


Freitag, 7. Dezember 12
JS DOM Frameworks




Freitag, 7. Dezember 12
Application
                          Frameworks




Freitag, 7. Dezember 12
Freitag, 7. Dezember 12
Tools


                           Socketstream




Freitag, 7. Dezember 12
Testing




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




Freitag, 7. Dezember 12
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
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
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
Freitag, 7. Dezember 12
http://www.flickr.com/photos/gruts/4612133889/

Freitag, 7. Dezember 12
Jens-Christian Fischer

                            jcf@mobino.com

                               @jcfischer


Freitag, 7. Dezember 12
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

Weitere ähnliche Inhalte

Beyond HTML Internet Briefing

  • 1. Beyond HTML Scriptsprachen, Frameworks, Templatesprachen und vieles mehr 4. Dezember 2012 Jens-Christian Fischer @jcfischer Freitag, 7. Dezember 12
  • 2. Beyond HTML ze u g rk Scriptsprachen, Frameworks, Templatesprachen und e vieles mehr W 4. Dezember 2012 Jens-Christian Fischer @jcfischer 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 Sho Freitag, 7. Dezember 12
  • 24. http://ivanzuzak.info/2012/11/18/the-web-engineers-online- toolbox.html Freitag, 7. Dezember 12
  • 27. HTML CSS JavaScript 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.html Freitag, 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.html Freitag, 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 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
  • 33. Semantisch http://slides.html5rocks.com/#new-form-types Freitag, 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-3d 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
  • 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.bio Freitag, 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.bio Freitag, 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_user Freitag, 7. Dezember 12
  • 45. http://haml-lang.com/ Python, Lua, ASP.NET, .NET, PHP, PHP5, JavaScript, Perl, Scala, Java Freitag, 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_user Freitag, 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
  • 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}} {{/items Freitag, 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></li Freitag, 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 Verhalten Freitag, 7. Dezember 12
  • 60. Inhalt Form Verhalten Freitag, 7. Dezember 12
  • 61. html css javascript Freitag, 7. Dezember 12
  • 64. 2744 Zeilen Freitag, 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 • Mixins Freitag, 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 Explorer Freitag, 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
  • 83. WebKit E 6 e I n e u d e r ist Freitag, 7. Dezember 12
  • 85. JS DOM Frameworks Freitag, 7. Dezember 12
  • 86. Application Frameworks Freitag, 7. Dezember 12
  • 88. Tools Socketstream Freitag, 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
  • 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
  • 99. Jens-Christian Fischer jcf@mobino.com @jcfischer Freitag, 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