Lecture Sheets: comparison tizenporta/index.html

-:1d46cfbabff2
+:f81c30e94365
 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(250, 250, 250)), to(rgb(160, 160, 160)));
+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(250, 250, 250), rgb(160, 160, 160));
+background: -webkit-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
-background:    -moz-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
+background:    -moz-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
-background:      -o-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
+background:      -o-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
-background:         radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
+background:         radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
 -webkit-font-smoothing: antialiased;
 }
 b, strong { font-weight: bold }
 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;
 -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;
 #topnative:is(.active) {
 opacity: 1;
 }
+#picnative:not(.active) {
+opacity: 0;
+}
+#picnative:is(.active) {
+opacity: 1;
+}
 #topweb .smalltext {
 font-size: 104px;
 position: absolute;
 top: 2em;
 left: 1.4em;
 }
 #svgappflow:is(.active) {
 opacity: 1;
 }
+#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;
 transform:         translateZ(50px);
 }
 #resources {
 background-image: url('meegarbeit.svg');
-background-position: 90% 80%;
+background-position: 90% 70%;
 background-repeat: no-repeat;
+color: #202020;
 }
 #resources h1 {
 padding-top: 32px;
 padding-bottom: 48px;
 font-family: 'Open Sans', Arial, sans-serif;
 }
 #resources ul {
 font-size: 36px;
-line-height: 52px;
+line-height: 44px;
 padding-left: 64px;
 }
-#resources .ecrivain {
+#resources .buchtit {
 text-decoration: underline;
 }
 #conclusion {
-background-image: url('qrtizportdev.png');
+background-size: 100% 100%;
-background-size: 300px 300px;
+background-image: url(schlusshintergrund.png);
-background-position: 10% 95%;
 background-repeat: no-repeat;
+background-attachment: fixed;
+background-position: top;
+color: white;
+text-shadow: 8px 6px 12px black;
 }
 #conclusion h1 {
 padding-top: 64px;
-text-align: center;
 padding-bottom: 96px;
 font-size: 200px;
 font-weight: bold;
 font-family: 'Open Sans', Arial, sans-serif;
 }
 #conclusion h2 {
-text-align: center;
+width: 600px;
-font-size: 72px;
+padding-left: 360px;
+font-size: 96px;
 font-weight: bold;
 font-family: 'Open Sans', Arial, sans-serif;
+line-height: 100px;
+}
+#conclusion img {
+float: left;
 }
 /* overview step */
 #overview {
 </div>
 <div id="contents" class="step slide" data-x="1300" data-y="-1920">
 <h1>Contents</h1>
 <ul>
-<li>Mobile App <b>Categories</b></li>
+<li><a href="index.html#/topcat">Mobile App <b>Categories</b></a></li>
-<li><b>Web</b> App Frameworks</li>
+<li><a href="index.html#/topnative"><b>Native</b> App Architecture</a></li>
-<li><b>Native</b> App Frameworks</li>
+<li><a href="index.html#/topweb"><b>Web</b> App Frameworks</a></li>
-<li><b>Hybrid</b> App Frameworks</li>
+<li><a href="index.html#/tophybrid"><b>Hybrid</b> App Frameworks</a></li>
-<li>Tizen SDK <b>Provision</b></li>
+<li><a href="index.html#/sdkprovide">Tizen SDK <b>Provision</b></a></li>
-<li>Tizen SDK <b>Integration</b></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>
 <div id="topcat" class="step" 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" data-x="1050" data-y="-240" data-z="-1000" data-scale="0.1">
+<div id="svgrich1" class="step" data-x="1052" data-y="-240" data-z="-1000" data-scale="0.125">
 <img src="richreach.svg" width="100%" />
 </div>
-<div id="topnative" class="step" data-x="200" data-y="-560" data-z="-1000" data-scale="0.3">
+<div id="topnative" class="step" 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="svgrich2" class="step" 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" data-x="-1400" data-y="-1024" data-z="-1000" data-scale="0.4">
 <img src="tizenarch.svg" width="100%" height="720px" />
+</div>
+<div id="picnative" class="step" data-x="-1800" data-y="-1100" data-z="-1000" data-scale="0.2">
+<img src="quickmeme.png" width="100%" />
 </div>
 <div id="svgrich3" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
 <img src="appsweb.svg" width="100%" />
 </div>
 <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">Xooxdoo</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-22">Titanium</li>
 <li class="item fmwork-23">Rhomobile</li>-->
 </ul>
 </div>
-<div id="topchoose1" class="step" data-x="-2755" data-y="-3850" data-z="-1000" data-rotate="180" data-scale="2">
+<div id="specases" class="step" data-x="-2755" data-y="-3700" data-z="-1000" data-rotate="180" data-scale=".5">
+<!-- Paul IRISH with best practices -->
+<!-- Principle of progressive enhancement -->
+<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">a framework</span>
 <h1>Choosing</h1>
 </div>
-<div id="svgappflow" class="step" data-x="-2740" data-y="-3800" data-z="-1000" data-rotate="180" data-scale="0.1">
+<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="-4050" data-z="-1000" data-rotate="180" data-scale="2">
+<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="-5450" data-z="-1000" data-rotate="180" data-scale="2">
+<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="-5450" data-z="-500" data-rotate="180" data-scale="2">
+<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="resources" class="step slide" data-x="0" data-y="-2600" data-rotate="0">
 <h1>Resources</h1>
 <ul>
-<li>jQuery Mobile: Up and Running, <span class="ecrivain">Maximiliano FIRTMAN</span>
+<li><span class="buchtit">jQuery Mobile: Up and Running</span>, Maximiliano FIRTMAN</li>
-<li>Beginning Phonegap, <span class="ecrivain">Thomas MYER</span>
+<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>
+<h1>Thank You!</h1>
-<h2>Tizen Application Portability</h2>
+<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="-4200" data-scale="12">
 </div>

Lecture Sheets / file comparison

comparison: tizenporta/index.html

tizenporta/index.html