Lecture Sheets: tizenporta/index.html@03660c8f542a (annotated)

tizenporta/index.html@03660c8f542a (annotated)

tizenporta/index.html

Mon, 18 Mar 2013 20:12:22 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Mon, 18 Mar 2013 20:12:22 +0100
changeset 26: 03660c8f542a
parent 25: aa352b378181
permissions: -rw-r--r--

Considerably clean, correct, improve, and add video for demonstration.

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=1080" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <title>Tizen Application Portability</title>
     <meta name="description" content="Tizen Application Portability is a breakout presentation given at the Tizen Developer Conference in San Francisco on 9 May 2012. It explains portable development strategies relying on web frameworks like jQuery Mobile, Sencha Touch, DojoX, and perhaps one day Cordova (Phonegap.)" />
     <meta name="author" content="Michael Schloh von Bennewitz" />
     <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
     <link rel="shortcut icon" href="favicon.png" />
     <link rel="apple-touch-icon" href="apple-touch-icon.png" />
     <style type="text/css">
         html, body, div, span, applet, object, iframe,
         h1, h2, h3, h4, h5, h6, p, blockquote, pre,
         a, abbr, acronym, address, big, cite, code,
         del, dfn, em, img, ins, kbd, q, s, samp,
         small, strike, strong, sub, sup, tt, var,
         b, u, i, center,
         dl, dt, dd, ol, ul, li,
         fieldset, form, label, legend,
         table, caption, tbody, tfoot, thead, tr, th, td,
         article, aside, canvas, details, embed,
         figure, figcaption, footer, header, hgroup,
         menu, nav, output, ruby, section, summary,
         time, mark, audio, video {
             margin: 0;
             padding: 0;
             border: 0;
             font-size: 100%;
             font: inherit;
             vertical-align: baseline;
         }
         /* HTML5 display-role reset for older browsers */
         article, aside, details, figcaption, figure,
         footer, header, hgroup, menu, nav, section {
             display: block;
         }
         body {
             line-height: 1;
         }
         ol, ul {
             list-style: none;
         }
         blockquote, q {
             quotes: none;
         }
         blockquote:before, blockquote:after,
         q:before, q:after {
             content: '';
             content: none;
         }
         table {
             border-collapse: collapse;
             border-spacing: 0;
         }
         body {
             font-family: 'PT Sans', sans-serif;
             min-height: 740px;
             background: rgb(215, 215, 215);
             background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(255, 255, 255)), to(rgb(160, 140, 80)));
             background: -webkit-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
             background:    -moz-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
             background:      -o-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
             background:         radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
             -webkit-font-smoothing: antialiased;
         }
         b, strong { font-weight: bold }
         i, em { font-style: italic}
         a {
             color: inherit;
             text-decoration: none;
             padding: 0 0.1em;
             background: rgba(255,255,255,0.5);
             text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
             border-radius: 0.2em;
             -webkit-transition: 0.5s;
             -moz-transition:    0.5s;
             -ms-transition:     0.5s;
             -o-transition:      0.5s;
             transition:         0.5s;
         }
         a:hover {
             background: rgba(255,255,255,1);
             text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
         }
         /* enable clicking on elements 'hiding' behind body in 3D */
         body     { pointer-events: none; }
         #impress { pointer-events: auto; }
         /* COMMON STEP STYLES */
         .step {
             width: 1080px;
             padding: 40px;
             -webkit-box-sizing: border-box;
             -moz-box-sizing:    border-box;
             -ms-box-sizing:     border-box;
             -o-box-sizing:      border-box;
             box-sizing:         border-box;
             font-family: 'PT Serif', georgia, serif;
             font-size: 48px;
             line-height: 1.5;
         }
         .step {
             -webkit-transition: opacity 1s;
             -moz-transition:    opacity 1s;
             -ms-transition:     opacity 1s;
             -o-transition:      opacity 1s;
             transition:         opacity 1s;
         }
         /* fade out inactive slides */
         .step:not(.active) {
             opacity: 0.3;
         }
         /* completely fade to dark */
         .dark:not(.active) {
             opacity: 0;
         }
         /* STEP SPECIFIC STYLES */
         /* hint on the first slide */
         .hint {
             position: fixed;
             left: 0;
             right: 0;
             bottom: 200px;
             background: rgba(0,0,0,0.5);
             color: #EEE;
             text-align: center;
             font-size: 50px;
             padding: 20px;
             z-index: 100;
             opacity: 0;
             -webkit-transform: translateY(400px);
             -moz-transform:    translateY(400px);
             -ms-transform:     translateY(400px);
             -o-transform:      translateY(400px);
             transform:         translateY(400px);
             -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
             -moz-transition:    opacity 1s,    -moz-transform 0.5s 1s;
             -ms-transition:     opacity 1s,     -ms-transform 0.5s 1s;
             -o-transition:      opacity 1s,      -o-transform 0.5s 1s;
             transition:         opacity 1s,         transform 0.5s 1s;
         }
         .impress-on-license .hint {
             opacity: 1;
             -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s;
             -moz-transition:    opacity 1s 5s,    -moz-transform 0.5s;
             -ms-transition:     opacity 1s 5s,     -ms-transform 0.5s;
             -o-transition:      opacity 1s 5s,      -o-transform 0.5s;
             transition:         opacity 1s 5s,         transform 0.5s;
             -webkit-transform: translateY(0px);
             -moz-transform:    translateY(0px);
             -ms-transform:     translateY(0px);
             -o-transform:      translateY(0px);
             transform:         translateY(0px);
         }
 #midlabel {
     font-size: 200px;
     font-weight: 900;
     font-family: 'Open Sans', Arial, sans-serif;
     text-shadow: 8px 6px 12px black;
     color: #F08020;
 }
 #title {
     background-size: 100% 100%;
     background-image: url(masterhinterbay.png);
     border: none;
     /*background-repeat: no-repeat;*/
     /*background-attachment: fixed;*/
     /*background-position: top;*/
 }
 #title h1 {
     padding-left: 42px;
     font-size: 76px;
     font-weight: bold;
     font-family: 'Open Sans', Arial, sans-serif;
     position: relative;
     bottom: -160px;
     color: white;
     text-shadow: 4px 3px 8px black;
     }
 #title h2 {
     padding-top: 48px;
     padding-left: 42px;
     font-size: 64px;
     font-weight: bold;
     letter-spacing: 2px;
     font-family: 'Open Sans', Arial, sans-serif;
     position: relative;
     bottom: -160px;
     color: white;
     text-shadow: 4px 3px 8px black;
     }
 #vidsrc {
     width: 100%;
     height: 100%;
     }
 #contents {
     background-image: url('meefrauhand.svg');
     background-position: 90% 80%;
     background-repeat: no-repeat;
     color: #202020;
     }
 #contents h1 {
     padding-top: 32px;
     padding-bottom: 48px;
     font-size: 96px;
     font-weight: bold;
     font-family: 'Open Sans', Arial, sans-serif;
     }
 #contents ul {
     font-size: 48px;
     line-height: 64px;
     padding-left: 96px;
     }
 #contents a {
     color: inherit;
     text-decoration: none;
     padding: 0 0.1em;
     border-radius: 0.2em;
     background: rgba(220,220,220,0.5);
     text-shadow: 0 0 0;
     }
 #topcat .smalltext, #tophybrid .smalltext {
             font-size: 80px;
             position: absolute;
             top: -0.2em;
             left: 1.7em;
             -webkit-transform: translateZ(20px);
             -moz-transform:    translateZ(20px);
             -ms-transform:     translateZ(20px);
             -o-transform:      translateZ(20px);
             transform:         translateZ(20px);
         }
 #topcat h1 {
             font-size: 180px;
             line-height: 200px;
             padding-top: 64px;
             text-align: center;
             -webkit-transform: translateZ(50px);
             -moz-transform:    translateZ(50px);
             -ms-transform:     translateZ(50px);
             -o-transform:      translateZ(50px);
             transform:         translateZ(50px);
         }
 #tophybrid .extratext {
             width: 200px;
             color: #808080;
             font-size: 68px;
             position: absolute;
             top: 1.5em;
             left: 10em;
             text-align: right;
             line-height: 64px;
         }
 #tophybrid h1 {
             font-size: 180px;
             line-height: 200px;
             padding-top: 64px;
             -webkit-transform: translateZ(50px);
             -moz-transform:    translateZ(50px);
             -ms-transform:     translateZ(50px);
             -o-transform:      translateZ(50px);
             transform:         translateZ(50px);
         }
 #topnative .smalltext {
             font-size: 120px;
             position: absolute;
             top: 1.75em;
             left: 0.6em;
             -webkit-transform: translateZ(20px);
             -moz-transform:    translateZ(20px);
             -ms-transform:     translateZ(20px);
             -o-transform:      translateZ(20px);
             transform:         translateZ(20px);
         }
 #topnative h1 {
             font-size: 200px;
             position: relative;
             top: -0.25em;
             -webkit-transform: translateZ(50px);
             -moz-transform:    translateZ(50px);
             -ms-transform:     translateZ(50px);
             -o-transform:      translateZ(50px);
             transform:         translateZ(50px);
         }
 #topweb .smalltext {
             font-size: 104px;
             position: absolute;
             top: 2em;
             left: 1.4em;
             -webkit-transform: translateZ(20px);
             -moz-transform:    translateZ(20px);
             -ms-transform:     translateZ(20px);
             -o-transform:      translateZ(20px);
             transform:         translateZ(20px);
         }
 #topweb h1 {
             font-size: 200px;
             position: relative;
             top: -0.25em;
             text-align: center;
             -webkit-transform: translateZ(50px);
             -moz-transform:    translateZ(50px);
             -ms-transform:     translateZ(50px);
             -o-transform:      translateZ(50px);
             transform:         translateZ(50px);
         }
 #svgtizenarch1, #svgtizenarch2 {
     width: 820px;
     padding-top: 48px;
     margin-left: auto;
     margin-right: auto;
 }
 #specases .smalltext {
             font-size: 92px;
             line-height: 116px;
             position: absolute;
             top: 1.25em;
             left: 2.5em;
             -webkit-transform: translateZ(20px);
             -moz-transform:    translateZ(20px);
             -ms-transform:     translateZ(20px);
             -o-transform:      translateZ(20px);
             transform:         translateZ(20px);
         }
 #specases h1 {
             font-size: 160px;
             position: relative;
             top: -.8em;
             text-align: center;
             -webkit-transform: translateZ(50px);
             -moz-transform:    translateZ(50px);
             -ms-transform:     translateZ(50px);
             -o-transform:      translateZ(50px);
             transform:         translateZ(50px);
         }
 #topchoose1 .smalltext {
             font-size: 130px;
             position: absolute;
             top: 1.5em;
             left: 1em;
             -webkit-transform: translateZ(20px);
             -moz-transform:    translateZ(20px);
             -ms-transform:     translateZ(20px);
             -o-transform:      translateZ(20px);
             transform:         translateZ(20px);
         }
 #topchoose1 h1 {
             font-size: 200px;
             position: relative;
             top: -0.25em;
             text-align: center;
             -webkit-transform: translateZ(50px);
             -moz-transform:    translateZ(50px);
             -ms-transform:     translateZ(50px);
             -o-transform:      translateZ(50px);
             transform:         translateZ(50px);
         }
 #topchoose2 a {
             font-size: 64px;
             position: relative;
             top: 2em;
             left: 1.4em;
         }
 #topwhy h1 {
             font-size: 160px;
             line-height: 150px;
             position: relative;
             top: -1em;
             text-align: center;
             -webkit-transform: translateZ(50px);
             -moz-transform:    translateZ(50px);
             -ms-transform:     translateZ(50px);
             -o-transform:      translateZ(50px);
             transform:         translateZ(50px);
         }
 blockquote {
     text-align: justify;
     font-weight: 300;
     font-style: italic;
     line-height: 1.2;
     margin-left: 32px;
     margin-right: 32px;
     position: relative;
     top: 3em;
 }
 blockquote .author {
     display: block;
     text-align: right;
     padding: 0 40px;
     font-weight: 600;
     font-size: 36px;
 }
 #sdkstart h1, #sdkprovide h1, #sdkinteg h1, #sdkdemo h1 {
             /*font-family: 'Open Sans', sans-serif;*/
             /*font-weight: 900;*/
             font-size: 200px;
             -webkit-transform: translateZ(50px);
             -moz-transform:    translateZ(50px);
             -ms-transform:     translateZ(50px);
             -o-transform:      translateZ(50px);
             transform:         translateZ(50px);
         }
 #resources {
     background-image: url('meegarbeit.svg');
     background-position: 90% 70%;
     background-repeat: no-repeat;
     color: #202020;
     }
 #resources h1 {
     padding-top: 32px;
     padding-bottom: 48px;
     font-size: 96px;
     font-weight: bold;
     font-family: 'Open Sans', Arial, sans-serif;
     }
 #resources ul {
     font-size: 36px;
     line-height: 44px;
     padding-left: 64px;
     }
 #resources .buchtit {
     text-decoration: underline;
 }
 #conclusion {
     background-size: 100% 100%;
     background-image: url(schlusshintergrund.png);
     border: none;
     /*background-repeat: no-repeat;*/
     /*background-attachment: fixed;*/
     /*background-position: top;*/
     color: white;
     text-shadow: 8px 6px 12px black;
     }
 #conclusion h1 {
     padding-top: 64px;
     padding-bottom: 96px;
     font-size: 200px;
     font-weight: bold;
     font-family: 'Open Sans', Arial, sans-serif;
     }
 #conclusion h2 {
     width: 600px;
     padding-left: 360px;
     font-size: 96px;
     font-weight: bold;
     font-family: 'Open Sans', Arial, sans-serif;
     line-height: 100px;
     }
 #conclusion img {
     float: left;
     }
 #overview { /* overview step */
             z-index: -1;
             padding: 0;
         }
         /* on overview step everything is visible */
         .impress-on-overview .step {
             opacity: 1;
             cursor: pointer;
         }
         /*
          * SLIDE STEP STYLES
          *
          * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
          *
          * ;)
          */
         .slide {
             display: block;
             width: 1200px;
             height: 600px;
             padding: 40px 60px;
             border-radius: 20px;
             background-color: white;
             box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
             border: 1px solid rgba(0, 0, 0, .3);
             font-family: 'Open Sans', Arial, sans-serif;
             color: rgb(102, 102, 102);
             text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
             font-size: 30px;
             line-height: 36px;
             letter-spacing: -1px;
         }
         .slide q {
             display: block;
             font-size: 50px;
             line-height: 72px;
             margin-top: 100px;
         }
         .slide q strong {
             white-space: nowrap;
         }
         /* IMPRESS NOT SUPPORTED STYLES */
         .fallback-message {
             font-family: sans-serif;
             line-height: 1.3;
             display: none;
             width: 780px;
             padding: 10px 10px 0;
             margin: 20px auto;
             border-radius: 20px;
             border: 1px solid #E4C652;
             background: #EEDC94;
         }
         .fallback-message p {
             margin-bottom: 10px;
         }
         .impress-disabled .step,
         .impress-not-supported .step {
             position: relative;
             opacity: 1;
             margin: 20px auto;
         }
         .impress-not-supported .fallback-message {
             display: block;
         }
         #kitplethora {
             padding-top: 100px;
             text-align: center;
         }
         #kitplethora .webfmwork { }
         #kitplethora .webfmwork .item {
             display: block;
             font-size: .8em;
             opacity: .7;
             position: absolute;
             text-align: center;
             width: 25%;
         }
         #kitplethora .webfmwork .fmwork-1 {
             bottom: 240px;
             left: 0px;
             -moz-animation: item1 4s 0.5s infinite normal ease;
             -webkit-animation: item1 4s 0.5s infinite normal ease;
             -ms-animation: item1 4s 0.5s infinite normal ease;
         }
         @-moz-keyframes item1 {
 %   { -moz-transform: rotate(10deg); left: 0px; }
 %  { -moz-transform: rotate(-10deg); left: 10px; }
 % { -moz-transform: rotate(10deg); left: 0px; }
         }
         @-webkit-keyframes item1 {
 %   { -webkit-transform: rotate(10deg); left: 0px; }
 %  { -webkit-transform: rotate(-10deg); left: 10px; }
 % { -webkit-transform: rotate(10deg); left: 0px; }
         }
         @-ms-keyframes item1 {
 %   { -ms-transform: rotate(10deg); left: 0px; }
 %  { -ms-transform: rotate(-10deg); left: 10px; }
 % { -ms-transform: rotate(10deg); left: 0px; }
         }
         #kitplethora .webfmwork .fmwork-2 {
             bottom: 290px;
             left: 280px;
             -moz-animation: item2 4s 0s infinite normal ease;
             -webkit-animation: item2 4s 0s infinite normal ease;
             -ms-animation: item2 4s 0s infinite normal ease;
         }
         @-moz-keyframes item2 {
 %   { -moz-transform: rotate(-10deg); left: 280px; }
 %  { -moz-transform: rotate(10deg); left: 260px; }
 % { -moz-transform: rotate(-10deg); left: 280px; }
         }
         @-webkit-keyframes item2 {
 %   { -webkit-transform: rotate(-10deg); left: 280px; }
 %  { -webkit-transform: rotate(10deg); left: 260px; }
 % { -webkit-transform: rotate(-10deg); left: 280px; }
         }
         @-ms-keyframes item2 {
 %   { -ms-transform: rotate(-10deg); left: 280px; }
 %  { -ms-transform: rotate(10deg); left: 260px; }
 % { -ms-transform: rotate(-10deg); left: 280px; }
         }
         #kitplethora .webfmwork .fmwork-3 {
             bottom: 250px;
             right: 350px;
             -moz-animation: item3 4s 0.3s infinite normal ease;
             -webkit-animation: item3 4s 0.3s infinite normal ease;
             -ms-animation: item3 4s 0.3s infinite normal ease;
         }
         @-moz-keyframes item3 {
 %   { -moz-transform: rotate(10deg); right: 350px; }
 %  { -moz-transform: rotate(-10deg); right: 340px; }
 % { -moz-transform: rotate(10deg); right: 350px; }
         }
         @-webkit-keyframes item3 {
 %   { -webkit-transform: rotate(10deg); right: 350px; }
 %  { -webkit-transform: rotate(-10deg); right: 340px; }
 % { -webkit-transform: rotate(10deg); right: 350px; }
         }
         @-ms-keyframes item3 {
 %   { -ms-transform: rotate(10deg); right: 350px; }
 %  { -ms-transform: rotate(-10deg); right: 340px; }
 % { -ms-transform: rotate(10deg); right: 350px; }
         }
         #kitplethora .webfmwork .fmwork-4 {
             bottom: 280px;
             right: -10px;
             -moz-animation: item4 4s 0.1s infinite normal ease;
             -webkit-animation: item4 4s 0.1s infinite normal ease;
             -ms-animation: item4 4s 0.1s infinite normal ease;
         }
         @-moz-keyframes item4 {
 %   { -moz-transform: rotate(-10deg); right: -10px; }
 %  { -moz-transform: rotate(10deg); right: 10px; }
 % { -moz-transform: rotate(-10deg); right: -10px; }
         }
         @-webkit-keyframes item4 {
 %   { -webkit-transform: rotate(-10deg); right: -10px; }
 %  { -webkit-transform: rotate(10deg); right: 10px; }
 % { -webkit-transform: rotate(-10deg); right: -10px; }
         }
         @-ms-keyframes item4 {
 %   { -ms-transform: rotate(-10deg); right: -10px; }
 %  { -ms-transform: rotate(10deg); right: 10px; }
 % { -ms-transform: rotate(-10deg); right: -10px; }
         }
         #kitplethora .webfmwork .fmwork-5 {
             bottom: 140px;
             left: 0px;
             -moz-animation: item5 4s 2.1s infinite normal ease;
             -webkit-animation: item5 4s 2.1s infinite normal ease;
             -ms-animation: item5 4s 2.1s infinite normal ease;
         }
         @-moz-keyframes item5 {
 %   { -moz-transform: rotate(10deg); left: 0px; }
 %  { -moz-transform: rotate(-10deg); left: 10px; }
 % { -moz-transform: rotate(10deg); left: 0px; }
         }
         @-webkit-keyframes item5 {
 %   { -webkit-transform: rotate(10deg); left: 0px; }
 %  { -webkit-transform: rotate(-10deg); left: 10px; }
 % { -webkit-transform: rotate(10deg); left: 0px; }
         }
         @-ms-keyframes item5 {
 %   { -ms-transform: rotate(10deg); left: 0px; }
 %  { -ms-transform: rotate(-10deg); left: 10px; }
 % { -ms-transform: rotate(10deg); left: 0px; }
         }
         #kitplethora .webfmwork .fmwork-6 {
             bottom: 190px;
             left: 280px;
             -moz-animation: item6 4s 0.6s infinite normal ease;
             -webkit-animation: item6 4s 0.6s infinite normal ease;
             -ms-animation: item6 4s 0.6s infinite normal ease;
         }
         @-moz-keyframes item6 {
 %   { -moz-transform: rotate(-10deg); left: 280px; }
 %  { -moz-transform: rotate(10deg); left: 260px; }
 % { -moz-transform: rotate(-10deg); left: 280px; }
         }
         @-webkit-keyframes item6 {
 %   { -webkit-transform: rotate(-10deg); left: 280px; }
 %  { -webkit-transform: rotate(10deg); left: 260px; }
 % { -webkit-transform: rotate(-10deg); left: 280px; }
         }
         @-ms-keyframes item6 {
 %   { -ms-transform: rotate(-10deg); left: 280px; }
 %  { -ms-transform: rotate(10deg); left: 260px; }
 % { -ms-transform: rotate(-10deg); left: 280px; }
         }
         #kitplethora .webfmwork .fmwork-7 {
             bottom: 150px;
             right: 250px;
             -moz-animation: item7 5s 0.4s infinite normal ease;
             -webkit-animation: item7 5s 0.4s infinite normal ease;
             -ms-animation: item7 5s 0.4s infinite normal ease;
         }
         @-moz-keyframes item7 {
 %   { -moz-transform: rotate(10deg); right: 250px; }
 %  { -moz-transform: rotate(-10deg); right: 240px; }
 % { -moz-transform: rotate(10deg); right: 250px; }
         }
         @-webkit-keyframes item7 {
 %   { -webkit-transform: rotate(10deg); right: 250px; }
 %  { -webkit-transform: rotate(-10deg); right: 240px; }
 % { -webkit-transform: rotate(10deg); right: 250px; }
         }
         @-ms-keyframes item7 {
 %   { -ms-transform: rotate(10deg); right: 250px; }
 %  { -ms-transform: rotate(-10deg); right: 240px; }
 % { -ms-transform: rotate(10deg); right: 250px; }
         }
         #kitplethora .webfmwork .fmwork-8 {
             bottom: 180px;
             right: -10px;
             -moz-animation: item8 4s 0.8s infinite normal ease;
             -webkit-animation: item8 4s 0.8s infinite normal ease;
             -ms-animation: item8 4s 0.8s infinite normal ease;
         }
         @-moz-keyframes item8 {
 %   { -moz-transform: rotate(-10deg); right: -10px; }
 %  { -moz-transform: rotate(10deg); right: 10px; }
 % { -moz-transform: rotate(-10deg); right: -10px; }
         }
         @-webkit-keyframes item8 {
 %   { -webkit-transform: rotate(-10deg); right: -10px; }
 %  { -webkit-transform: rotate(10deg); right: 10px; }
 % { -webkit-transform: rotate(-10deg); right: -10px; }
         }
         @-ms-keyframes item8 {
 %   { -ms-transform: rotate(-10deg); right: -10px; }
 %  { -ms-transform: rotate(10deg); right: 10px; }
 % { -ms-transform: rotate(-10deg); right: -10px; }
         }
         #kitplethora .webfmwork .fmwork-9 {
             bottom: -40px;
             left: -60px;
             -moz-animation: item9 3.5s 0.2s infinite normal ease;
             -webkit-animation: item9 3.5s 0.2s infinite normal ease;
             -ms-animation: item9 3.5s 0.2s infinite normal ease;
         }
         @-moz-keyframes item9 {
 %   { -moz-transform: rotate(10deg); left: 0px; }
 %  { -moz-transform: rotate(-10deg); left: 10px; }
 % { -moz-transform: rotate(10deg); left: 0px; }
         }
         @-webkit-keyframes item9 {
 %   { -webkit-transform: rotate(10deg); left: -60px; }
 %  { -webkit-transform: rotate(-10deg); left: -50px; }
 % { -webkit-transform: rotate(10deg); left: -60px; }
         }
         @-ms-keyframes item9 {
 %   { -ms-transform: rotate(10deg); left: 0px; }
 %  { -ms-transform: rotate(-10deg); left: 10px; }
 % { -ms-transform: rotate(10deg); left: 0px; }
         }
         #kitplethora .webfmwork .fmwork-10 {
             bottom: -90px;
             left: 400px;
             -moz-animation: item10 5s 0.4s infinite normal ease;
             -webkit-animation: item10 5s 0.4s infinite normal ease;
             -ms-animation: item10 5s 0.4s infinite normal ease;
         }
         @-moz-keyframes item10 {
 %   { -moz-transform: rotate(-10deg); left: 400px; }
 %  { -moz-transform: rotate(10deg); left: 380px; }
 % { -moz-transform: rotate(-10deg); left: 400px; }
         }
         @-webkit-keyframes item10 {
 %   { -webkit-transform: rotate(-10deg); left: 400px; }
 %  { -webkit-transform: rotate(10deg); left: 380px; }
 % { -webkit-transform: rotate(-10deg); left: 400px; }
         }
         @-ms-keyframes item10 {
 %   { -ms-transform: rotate(-10deg); left: 400px; }
 %  { -ms-transform: rotate(10deg); left: 380px; }
 % { -ms-transform: rotate(-10deg); left: 400px; }
         }
         #kitplethora .webfmwork .fmwork-11 {
             bottom: -50px;
             right: 250px;
             -moz-animation: item11 4s 0.3s infinite normal ease;
             -webkit-animation: item11 4s 0.3s infinite normal ease;
             -ms-animation: item11 4s 0.3s infinite normal ease;
         }
         @-moz-keyframes item11 {
 %   { -moz-transform: rotate(10deg); right: 250px; }
 %  { -moz-transform: rotate(-10deg); right: 240px; }
 % { -moz-transform: rotate(10deg); right: 250px; }
         }
         @-webkit-keyframes item11 {
 %   { -webkit-transform: rotate(10deg); right: 250px; }
 %  { -webkit-transform: rotate(-10deg); right: 240px; }
 % { -webkit-transform: rotate(10deg); right: 250px; }
         }
         @-ms-keyframes item11 {
 %   { -ms-transform: rotate(10deg); right: 250px; }
 %  { -ms-transform: rotate(-10deg); right: 240px; }
 % { -ms-transform: rotate(10deg); right: 250px; }
         }
         #kitplethora .webfmwork .fmwork-12 {
             bottom: -80px;
             right: -10px;
             -moz-animation: item12 4s 0 infinite normal ease;
             -webkit-animation: item12 4s 0 infinite normal ease;
             -ms-animation: item12 4s 0 infinite normal ease;
         }
         @-moz-keyframes item12 {
 %   { -moz-transform: rotate(-10deg); right: -10px; }
 %  { -moz-transform: rotate(10deg); right: 10px; }
 % { -moz-transform: rotate(-10deg); right: -10px; }
         }
         @-webkit-keyframes item12 {
 %   { -webkit-transform: rotate(-10deg); right: -10px; }
 %  { -webkit-transform: rotate(10deg); right: 10px; }
 % { -webkit-transform: rotate(-10deg); right: -10px; }
         }
         @-ms-keyframes item12 {
 %   { -ms-transform: rotate(-10deg); right: -10px; }
 %  { -ms-transform: rotate(10deg); right: 10px; }
 % { -ms-transform: rotate(-10deg); right: -10px; }
         }
         #kitplethora .webfmwork .fmwork-13 {
             bottom: -140px;
             left: 0px;
             -moz-animation: item13 4s 0.5s infinite normal ease;
             -webkit-animation: item13 4s 0.5s infinite normal ease;
             -ms-animation: item13 4s 0.5s infinite normal ease;
         }
         @-moz-keyframes item13 {
 %   { -moz-transform: rotate(10deg); left: 0px; }
 %  { -moz-transform: rotate(-10deg); left: 10px; }
 % { -moz-transform: rotate(10deg); left: 0px; }
         }
         @-webkit-keyframes item13 {
 %   { -webkit-transform: rotate(10deg); left: 0px; }
 %  { -webkit-transform: rotate(-10deg); left: 10px; }
 % { -webkit-transform: rotate(10deg); left: 0px; }
         }
         @-ms-keyframes item13 {
 %   { -ms-transform: rotate(10deg); left: 0px; }
 %  { -ms-transform: rotate(-10deg); left: 10px; }
 % { -ms-transform: rotate(10deg); left: 0px; }
         }
         #kitplethora .webfmwork .fmwork-14 {
             bottom: -190px;
             left: 280px;
             -moz-animation: item14 4s 0s infinite normal ease;
             -webkit-animation: item14 4s 0s infinite normal ease;
             -ms-animation: item14 4s 0s infinite normal ease;
         }
         @-moz-keyframes item14 {
 %   { -moz-transform: rotate(-10deg); left: 280px; }
 %  { -moz-transform: rotate(10deg); left: 260px; }
 % { -moz-transform: rotate(-10deg); left: 280px; }
         }
         @-webkit-keyframes item14 {
 %   { -webkit-transform: rotate(-10deg); left: 280px; }
 %  { -webkit-transform: rotate(10deg); left: 260px; }
 % { -webkit-transform: rotate(-10deg); left: 280px; }
         }
         @-ms-keyframes item14 {
 %   { -ms-transform: rotate(-10deg); left: 280px; }
 %  { -ms-transform: rotate(10deg); left: 260px; }
 % { -ms-transform: rotate(-10deg); left: 280px; }
         }
         #kitplethora .webfmwork .fmwork-15 {
             bottom: -150px;
             right: 320px;
             -moz-animation: item15 3.5s 0.2s infinite normal ease;
             -webkit-animation: item15 3.5s 0.2s infinite normal ease;
             -ms-animation: item15 3.5s 0.2s infinite normal ease;
         }
         @-moz-keyframes item15 {
 %   { -moz-transform: rotate(10deg); right: 320px; }
 %  { -moz-transform: rotate(-10deg); right: 310px; }
 % { -moz-transform: rotate(10deg); right: 320px; }
         }
         @-webkit-keyframes item15 {
 %   { -webkit-transform: rotate(10deg); right: 320px; }
 %  { -webkit-transform: rotate(-10deg); right: 310px; }
 % { -webkit-transform: rotate(10deg); right: 320px; }
         }
         @-ms-keyframes item15 {
 %   { -ms-transform: rotate(10deg); right: 320px; }
 %  { -ms-transform: rotate(-10deg); right: 310px; }
 % { -ms-transform: rotate(10deg); right: 320px; }
         }
         #kitplethora .webfmwork .fmwork-16 {
             bottom: -180px;
             right: -10px;
             -moz-animation: item16 5s 0.4s infinite normal ease;
             -webkit-animation: item16 5s 0.4s infinite normal ease;
             -ms-animation: item16 5s 0.4s infinite normal ease;
         }
         @-moz-keyframes item16 {
 %   { -moz-transform: rotate(-10deg); right: -10px; }
 %  { -moz-transform: rotate(10deg); right: 10px; }
 % { -moz-transform: rotate(-10deg); right: -10px; }
         }
         @-webkit-keyframes item16 {
 %   { -webkit-transform: rotate(-10deg); right: -10px; }
 %  { -webkit-transform: rotate(10deg); right: 10px; }
 % { -webkit-transform: rotate(-10deg); right: -10px; }
         }
         @-ms-keyframes item16 {
 %   { -ms-transform: rotate(-10deg); right: -10px; }
 %  { -ms-transform: rotate(10deg); right: 10px; }
 % { -ms-transform: rotate(-10deg); right: -10px; }
         }
     </style>
 </head>
 <!-- class is renamed once javascript detects browser support -->
 <body class="impress-not-supported">
 <div class="fallback-message">
     <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
     <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
 </div>
 <div id="impress">
     <div id="license" class="step slide" data-x="-1300" data-y="-1920">
         <p style="font-size: 48px; line-height: 56px;">Copyright © 2012
         Michael Schloh von Bennewitz <michael@schloh.com> Permission is
         granted to copy, distribute and/or modify this document under
         the terms of the GNU Free Documentation License, Version 1.3
         or any later version published by the Free Software Foundation;
         with no Invariant Sections, no Front-Cover Texts, and no
         Back-Cover Texts. A copy of the license is included in the
         document entitled &ldquo;fdl-1.3.txt&rdquo;</p>
     </div>
     <div id="title" class="step slide" data-x="0" data-y="-1920">
         <img src="mastervorderbay.png" width="65%" style="padding-left: 350px;" />
         <h1>Tizen Application Portability</h1>
         <h2>Michael Schloh von Bennewitz</h2>
     </div>
     <!--
     avconv -i <inputfile> -b:v 1200k -vcodec libx264 -pre slow -pre baseline -s hd480 -acodec libvo_aacenc -ab 128000 -g 30 <outputfile.mp4>
     avconv -i <inputfile>  -b:v 1200k -vcodec libvpx -pre 360p -s hd480 -acodec libvorbis -ab 128000 -f webm -g 30 <outputfile.webm>
     ffmpeg -i <inputfile> -b:v 1200k -vcodec libtheora -s hd480 -acodec libvorbis -ab 128000 -g 30 <outputfile.ogv>
     -->
     <div id="vidful" class="step" data-x="1300" data-y="-1920">
         <!--<video id="vidsrc" src="tizportdev-768p.ogv" type='video/ogg; codecs="theora, vorbis"' autoplay loop controls />-->
         <video id="vidsrc" autoplay loop controls>
             <source src="tizportdev-768p.webm" type='video/webm; codecs="vp8, vorbis"' />
             <source src="tizportdev-768p.ogv" type='video/ogg; codecs="theora, vorbis"' />
             <source src="tizportdev-768p.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
             Video tag not supported. Download the video <a href="shouldlook.webm">here</a>.
         </video>
         <p>Example of correct display of this presentation</p>
     </div>
     <div id="contents" class="step slide" data-x="1300" data-y="-2600">
         <h1>Contents</h1>
         <ul>
             <li><a href="index.html#/topcat">Mobile App <b>Categories</b></a></li>
             <li><a href="index.html#/topnative"><b>Native</b> App Frameworks</a></li>
             <li><a href="index.html#/topweb"><b>Web</b> App Frameworks</a></li>
             <li><a href="index.html#/tophybrid"><b>Hybrid</b> App Frameworks</a></li>
             <li><a href="index.html#/sdkprovide">Tizen SDK <b>Provision</b></a></li>
             <li><a href="index.html#/sdkinteg">Tizen SDK <b>Integration</b></a></li>
             <!--<li>Web App Frameworks</li>
             <li>Hybrid Frameworks</li>
             <li>License Compatibility </li>
             <li>Tools and SDK Integration</li>
             <li>Portability Strategies</li>
             <li>Typical Workflows</li>
             <li>Demonstration</li>-->
         </ul>
     </div>
     <div id="topcat" class="step dark" data-x="800" data-y="-400" data-z="1000" data-scale="3">
         <span class="smalltext">Mobile Application</span>
         <h1>Categories</h1>
     </div>
     <div id="svgrich1" class="step dark" data-x="1200" data-y="-120" data-z="-1000" data-scale="0.125">
         <img src="richreach.svg" width="100%" />
     </div>
     <div id="topnative" class="step dark" data-x="200" data-y="-570" data-z="-1000" data-scale="0.3">
         <span class="smalltext">Development</span>
         <h1>Native App</h1>
     </div>
     <div id="picnative" class="step dark" data-x="800" data-y="-540" data-z="-1000" data-scale="0.2">
         <img src="quickmeme.png" width="100%" />
     </div>
     <div id="svgrich2" class="step dark" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
         <img src="appsnative.svg" width="100%" />
     </div>
     <div id="svgtizenarch1" class="step dark" data-x="-1400" data-y="-1024" data-z="-1000" data-scale="0.4">
         <img src="tizenarch.svg" width="100%" height="720px" />
     </div>
     <div id="svgrich3" class="step dark" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
         <img src="appsweb.svg" width="100%" />
     </div>
     <div id="topweb" class="step" data-x="-2800" data-y="-2200" data-z="0" data-rotate="90" data-scale="2">
         <span class="smalltext">Frameworks</span>
         <h1>Web App</h1>
     </div>
     <div id="kitplethora" class="step" data-x="-2755" data-y="-2320" data-z="-1000" data-rotate="90" data-scale="0.05">
         <q><b>JavaScript Libraries</b></q>
         <ul class="webfmwork">
             <li class="item fmwork-1" style="width: 120px; line-height: 40px;">jQuery Mobile</li>
             <li class="item fmwork-2" style="width: 120px; line-height: 40px;">Sencha Touch</li>
             <li class="item fmwork-3">DojoX</li>
             <li class="item fmwork-4">jQTouch</li>
             <li class="item fmwork-5">Glovebox</li>
             <li class="item fmwork-6">Lungo</li>
             <li class="item fmwork-7">Appmobi</li>
             <li class="item fmwork-8">Enyo</li>
             <li class="item fmwork-9">Appcraft</li>
             <li class="item fmwork-10">Wink</li>
             <li class="item fmwork-11">Xui</li>
             <li class="item fmwork-12">Joframe</li>
             <li class="item fmwork-13">Zepto</li>
             <li class="item fmwork-14">Monocross</li>
             <li class="item fmwork-15">Uranium</li>
             <li class="item fmwork-16">Sproutcore</li>
 <!--            <li class="item fmwork-17">Unify</li>
             <li class="item fmwork-18">Ripple</li>
             <li class="item fmwork-19">Ipfaces</li>
             <li class="item fmwork-20">Qtmobil</li>
             <li class="item fmwork-21">Phonegap</li>
             <li class="item fmwork-22">Titanium</li>
             <li class="item fmwork-23">Rhomobile</li>-->
         </ul>
     </div>
     <div id="specases" class="step" data-x="-2755" data-y="-3700" data-z="-1000" data-rotate="180" data-scale=".5">
         <span class="smalltext">HTML5Boilerplate Modernizr</span>
         <h1>Special Cases</h1>
     </div>
     <div id="topchoose1" class="step" data-x="-2755" data-y="-4550" data-z="-1000" data-rotate="180" data-scale="2">
         <span class="smalltext">from JS libs</span>
         <h1>Choosing</h1>
     </div>
     <div id="svgappflow" class="step" data-x="-2740" data-y="-4500" data-z="-1000" data-rotate="180" data-scale="0.1">
         <img src="newappflow.svg" width="100%" />
     </div>
     <div id="topchoose2" class="step" data-x="-2755" data-y="-4850" data-z="-1000" data-rotate="180" data-scale="2">
         <a target="_blank" href="http://www.markus-falk.com/mobile-frameworks-comparison-chart/">with Markus FALK's chart</a>
     </div>
     <div id="topwhy" class="step" data-x="-2755" data-y="-6250" data-z="-1000" data-rotate="180" data-scale="2">
         <h1>Why&nbsp;&nbsp;a&nbsp;&nbsp;Web Framework?</h1>
     </div>
     <div id="rasterwhy" class="step" data-x="-2755" data-y="-6250" data-z="-500" data-rotate="180" data-scale="2">
         <blockquote>“2012 will come to be known as the year of the web
             runtimes. Officially there is no native development. Tizen
             is an html5 affair only.”
         <span class="author">- Raster Man</span></blockquote>
     </div>
     <div id="tophybrid" class="step" data-x="1000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4">
         <span class="smalltext">Leveraging</span>
         <span class="extratext">Cordova Titanium Rhomobile</span>
         <h1>Hybrid Frameworks</h1>
     </div>
     <div id="svgrich4" class="step" data-x="-800" data-y="-7500" data-z="0" data-rotate="270" data-scale="2">
         <img src="appshybrid.svg" width="100%" />
     </div>
     <div id="svgtizenarch2" class="step" data-x="2000" data-y="-7500" data-z="0" data-rotate="360" data-scale="1">
         <img src="tizenarch.svg" width="100%" height="720px" />
     </div>
     <div id="sdkstart" class="step" data-x="6000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4">
         <h1>Tizen SDK</h1>
     </div>
     <div id="sdkprovide" class="step" data-x="6000" data-y="-4300" data-z="0" data-rotate="360" data-scale="4">
         <h1>Provision</h1>
     </div>
     <div id="sdkinteg" class="step" data-x="6000" data-y="-3600" data-z="0" data-rotate="360" data-scale="4">
         <h1>Integration</h1>
     </div>
     <div id="sdkdemo" class="step" data-x="6000" data-y="-2600" data-z="0" data-rotate="360" data-scale="4" style="background-image: url('meedemo.svg'); background-position: 95% 60%; background-repeat: no-repeat;">
         <h1>Demo</h1>
     </div>
     <div id="resources" class="step slide" data-x="0" data-y="-2600" data-rotate="0">
         <h1>Resources</h1>
         <ul>
             <li><span class="buchtit">jQuery Mobile: Up and Running</span>, Maximiliano FIRTMAN</li>
             <li><span class="buchtit">Mobile Design Pattern Gallery</span>, Theresa NEIL</li>
             <li><span class="buchtit">Beginning Phonegap</span>, Thomas MYER</li>
             <li><a href="http://docs.phonegap.com/">http://docs.phonegap.com/</a></li>
             <li><a href="http://www.modernizr.com/">http://www.modernizr.com/</a></li>
             <li><a href="http://www.dojotoolkit.org/">http://www.dojotoolkit.org/</a></li>
             <li><a href="http://www.jquerymobile.com/">http://www.jquerymobile.com/</a></li>
             <li><a href="http://www.sencha.com/products/touch/">http://www.sencha.com/products/touch/</a></li>
             <li><a href="ftp://ftp.europalab.com/pub/doc/lect/tizportdev/">ftp://ftp.europalab.com/pub/doc/lect/tizportdev/</a></li>
         </ul>
     </div>
     <div id="conclusion" class="step slide" data-x="-1300" data-y="-2600" data-rotate="0">
         <h1>Thank You!</h1>
         <img src="qrtizportdev.png" width="300px" />
         <h2><span style="color: aqua;">Tizen</span> <span style="color: orange;">Application</span> <span style="color: red;">Portability</span></h2>
     </div>
     <div id="overview" class="step" data-x="2500" data-y="-4000" data-scale="12" />
     <!--<div id="midlabel" class="step" data-x="3700" data-y="-3000" data-scale="6">
         <h1>Tizen</h1>
     </div>-->
 <div class="hint">
     <p>Use a spacebar or arrow keys to navigate</p>
 </div>
 <script>
 if ("ontouchstart" in document.documentElement) {
     document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
 }
 var videostep = document.getElementById("vidful");
 var videofile = document.getElementById("vidsrc");
 videostep.addEventListener("impress:stepenter", function() {
     videofile.play();
 }, false);
 videostep.addEventListener("impress:stepleave", function() {
     videofile.pause();
 }, false);
 </script>
 <script src="impress.js"></script>
 <script>impress().init();</script>
 </body>
 </html>

Lecture Sheets / annotate

tizenporta/index.html@03660c8f542a (annotated)

tizenporta/index.html