Lecture Sheets: comparison tizenporta/index.html

-:4e78a8bb74d4
+:95bc49c3863a
 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
-<meta name="viewport" content="width=1024" />
+<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" />
 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;
 /* 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;
 }
 #title {
 background-size: 100% 100%;
 background-image: url(masterhinterbay.png);
-background-repeat: no-repeat;
+border: none;
-background-attachment: fixed;
+/*background-repeat: no-repeat;*/
-background-position: top;
+/*background-attachment: fixed;*/
+/*background-position: top;*/
 }
 #title h1 {
 padding-left: 42px;
 font-size: 76px;
 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;
 -ms-transform:     translateZ(50px);
 -o-transform:      translateZ(50px);
 transform:         translateZ(50px);
 }
-#topnative:not(.active) {
-opacity: 0;
-}
-#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;
 -moz-transform:    translateZ(50px);
 -ms-transform:     translateZ(50px);
 -o-transform:      translateZ(50px);
 transform:         translateZ(50px);
 }
-#svgrich1:not(.active) {
-opacity: 0;
-}
-#svgrich1:is(.active) {
-opacity: 1;
-}
-/*#svgtizenarch1:not(.active) {
-opacity: 0;
-}
-#svgtizenarch1:is(.active) {
-opacity: 1;
-}*/
 #svgtizenarch1, #svgtizenarch2 {
 width: 820px;
 padding-top: 48px;
 margin-left: auto;
 margin-right: auto;
 }
-#svgrich2:not(.active) {
-opacity: 0;
-}
-#svgrich2:is(.active) {
-opacity: 1;
-}
-#svgrich3:not(.active) {
-opacity: 0;
-}
-#svgrich3:is(.active) {
-opacity: 1;
-}
-#kitplethora:not(.active) {
-opacity: 0;
-}
-#kitplethora:is(.active) {
-opacity: 1;
-}
-#svgappflow:not(.active) {
-opacity: 0;
-}
-#svgappflow:is(.active) {
-opacity: 1;
-}
 #specases .smalltext {
 font-size: 92px;
 line-height: 116px;
 position: absolute;
 top: 1.25em;
 -ms-transform:     translateZ(50px);
 -o-transform:      translateZ(50px);
 transform:         translateZ(50px);
 }
-#topchoose2:not(.active) {
-opacity: 0;
-}
-#topchoose2:is(.active) {
-opacity: 1;
-}
 #topchoose2 a {
 font-size: 64px;
 position: relative;
 top: 2em;
 left: 1.4em;
 blockquote {
 text-align: justify;
 font-weight: 300;
 font-style: italic;
 line-height: 1.2;
-margin-left: 72px;
+margin-left: 32px;
-margin-right: 72px;
+margin-right: 32px;
 position: relative;
-top: 3.5em;
+top: 3em;
 }
 blockquote .author {
 display: block;
 text-align: right;
 }
 #conclusion {
 background-size: 100% 100%;
 background-image: url(schlusshintergrund.png);
-background-repeat: no-repeat;
+border: none;
-background-attachment: fixed;
+/*background-repeat: no-repeat;*/
-background-position: top;
+/*background-attachment: fixed;*/
+/*background-position: top;*/
 color: white;
 text-shadow: 8px 6px 12px black;
 }
 #conclusion img {
 float: left;
 }
-/* overview step */
+#overview { /* overview step */
-#overview {
 z-index: -1;
 padding: 0;
 }
 /* on overview step everything is visible */
 .impress-on-overview .step {
 opacity: 1;
 cursor: pointer;
 }
 width: 1200px;
 height: 600px;
 padding: 40px 60px;
-border-radius: 10px;
+border-radius: 20px;
 background-color: white;
 box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
 border: 1px solid rgba(0, 0, 0, .3);
 display: none;
 width: 780px;
 padding: 10px 10px 0;
 margin: 20px auto;
-border-radius: 10px;
+border-radius: 20px;
 border: 1px solid #E4C652;
 background: #EEDC94;
 }
 .fallback-message p {
 <img src="mastervorderbay.png" width="65%" style="padding-left: 350px;" />
 <h1>Tizen Application Portability</h1>
 <h2>Michael Schloh von Bennewitz</h2>
 </div>
-<div id="contents" class="step slide" data-x="1300" data-y="-1920">
+<!--
+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 Architecture</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>Typical Workflows</li>
 <li>Demonstration</li>-->
 </ul>
 </div>
-<div id="topcat" class="step" data-x="800" data-y="-400" data-z="1000" data-scale="3">
+<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" data-x="1052" data-y="-240" data-z="-1000" data-scale="0.125">
+<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" data-x="200" data-y="-570" data-z="-1000" data-scale="0.3">
+<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="svgrich2" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
+<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" data-x="-1400" data-y="-1024" data-z="-1000" data-scale="0.4">
+<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="picnative" class="step" data-x="-1800" data-y="-1100" data-z="-1000" data-scale="0.2">
+<div id="svgrich3" class="step dark" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
-<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>
 <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>Web App Frameworks</b></q>
+<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-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">
-<!-- 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>
+<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%" />
 <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="-4200" data-scale="12">
+<div id="overview" class="step" data-x="2500" data-y="-4000" data-scale="12" />
-</div>
 <!--<div id="midlabel" class="step" data-x="3700" data-y="-3000" data-scale="6">
 <h1>Tizen</h1>
 </div>-->
 </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>

Lecture Sheets / file comparison

comparison: tizenporta/index.html

tizenporta/index.html