changeset
Considerably clean, correct, improve, and add video for demonstration.
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
Considerably clean, correct, improve, and add video for demonstration.
1.1 --- a/tizenporta/index.html Mon Mar 18 19:21:40 2013 +0100 1.2 +++ b/tizenporta/index.html Mon Mar 18 20:12:22 2013 +0100 1.3 @@ -2,7 +2,7 @@ 1.4 <html lang="en"> 1.5 <head> 1.6 <meta charset="utf-8" /> 1.7 - <meta name="viewport" content="width=1024" /> 1.8 + <meta name="viewport" content="width=1080" /> 1.9 <meta name="apple-mobile-web-app-capable" content="yes" /> 1.10 <title>Tizen Application Portability</title> 1.11 1.12 @@ -102,7 +102,7 @@ 1.13 1.14 /* enable clicking on elements 'hiding' behind body in 3D */ 1.15 body { pointer-events: none; } 1.16 -#impress { pointer-events: auto; } 1.17 + #impress { pointer-events: auto; } 1.18 1.19 /* COMMON STEP STYLES */ 1.20 1.21 @@ -135,10 +135,14 @@ 1.22 opacity: 0.3; 1.23 } 1.24 1.25 + /* completely fade to dark */ 1.26 + .dark:not(.active) { 1.27 + opacity: 0; 1.28 + } 1.29 + 1.30 /* STEP SPECIFIC STYLES */ 1.31 1.32 /* hint on the first slide */ 1.33 - 1.34 .hint { 1.35 position: fixed; 1.36 left: 0; 1.37 @@ -196,9 +200,10 @@ 1.38 #title { 1.39 background-size: 100% 100%; 1.40 background-image: url(masterhinterbay.png); 1.41 - background-repeat: no-repeat; 1.42 - background-attachment: fixed; 1.43 - background-position: top; 1.44 + border: none; 1.45 + /*background-repeat: no-repeat;*/ 1.46 + /*background-attachment: fixed;*/ 1.47 + /*background-position: top;*/ 1.48 } 1.49 1.50 #title h1 { 1.51 @@ -227,6 +232,11 @@ 1.52 text-shadow: 4px 3px 8px black; 1.53 } 1.54 1.55 +#vidsrc { 1.56 + width: 100%; 1.57 + height: 100%; 1.58 + } 1.59 + 1.60 #contents { 1.61 background-image: url('meefrauhand.svg'); 1.62 background-position: 90% 80%; 1.63 @@ -331,22 +341,6 @@ 1.64 transform: translateZ(50px); 1.65 } 1.66 1.67 -#topnative:not(.active) { 1.68 - opacity: 0; 1.69 -} 1.70 - 1.71 -#topnative:is(.active) { 1.72 - opacity: 1; 1.73 -} 1.74 - 1.75 -#picnative:not(.active) { 1.76 - opacity: 0; 1.77 -} 1.78 - 1.79 -#picnative:is(.active) { 1.80 - opacity: 1; 1.81 -} 1.82 - 1.83 #topweb .smalltext { 1.84 font-size: 104px; 1.85 position: absolute; 1.86 @@ -373,22 +367,6 @@ 1.87 transform: translateZ(50px); 1.88 } 1.89 1.90 -#svgrich1:not(.active) { 1.91 - opacity: 0; 1.92 -} 1.93 - 1.94 -#svgrich1:is(.active) { 1.95 - opacity: 1; 1.96 -} 1.97 - 1.98 -/*#svgtizenarch1:not(.active) { 1.99 - opacity: 0; 1.100 -} 1.101 - 1.102 -#svgtizenarch1:is(.active) { 1.103 - opacity: 1; 1.104 -}*/ 1.105 - 1.106 #svgtizenarch1, #svgtizenarch2 { 1.107 width: 820px; 1.108 padding-top: 48px; 1.109 @@ -396,38 +374,6 @@ 1.110 margin-right: auto; 1.111 } 1.112 1.113 -#svgrich2:not(.active) { 1.114 - opacity: 0; 1.115 -} 1.116 - 1.117 -#svgrich2:is(.active) { 1.118 - opacity: 1; 1.119 -} 1.120 - 1.121 -#svgrich3:not(.active) { 1.122 - opacity: 0; 1.123 -} 1.124 - 1.125 -#svgrich3:is(.active) { 1.126 - opacity: 1; 1.127 -} 1.128 - 1.129 -#kitplethora:not(.active) { 1.130 - opacity: 0; 1.131 -} 1.132 - 1.133 -#kitplethora:is(.active) { 1.134 - opacity: 1; 1.135 -} 1.136 - 1.137 -#svgappflow:not(.active) { 1.138 - opacity: 0; 1.139 -} 1.140 - 1.141 -#svgappflow:is(.active) { 1.142 - opacity: 1; 1.143 -} 1.144 - 1.145 #specases .smalltext { 1.146 font-size: 92px; 1.147 line-height: 116px; 1.148 @@ -481,14 +427,6 @@ 1.149 transform: translateZ(50px); 1.150 } 1.151 1.152 -#topchoose2:not(.active) { 1.153 - opacity: 0; 1.154 -} 1.155 - 1.156 -#topchoose2:is(.active) { 1.157 - opacity: 1; 1.158 -} 1.159 - 1.160 #topchoose2 a { 1.161 font-size: 64px; 1.162 position: relative; 1.163 @@ -515,10 +453,10 @@ 1.164 font-weight: 300; 1.165 font-style: italic; 1.166 line-height: 1.2; 1.167 - margin-left: 72px; 1.168 - margin-right: 72px; 1.169 + margin-left: 32px; 1.170 + margin-right: 32px; 1.171 position: relative; 1.172 - top: 3.5em; 1.173 + top: 3em; 1.174 } 1.175 1.176 blockquote .author { 1.177 @@ -569,9 +507,10 @@ 1.178 #conclusion { 1.179 background-size: 100% 100%; 1.180 background-image: url(schlusshintergrund.png); 1.181 - background-repeat: no-repeat; 1.182 - background-attachment: fixed; 1.183 - background-position: top; 1.184 + border: none; 1.185 + /*background-repeat: no-repeat;*/ 1.186 + /*background-attachment: fixed;*/ 1.187 + /*background-position: top;*/ 1.188 1.189 color: white; 1.190 text-shadow: 8px 6px 12px black; 1.191 @@ -598,15 +537,12 @@ 1.192 float: left; 1.193 } 1.194 1.195 - /* overview step */ 1.196 - 1.197 -#overview { 1.198 +#overview { /* overview step */ 1.199 z-index: -1; 1.200 padding: 0; 1.201 } 1.202 1.203 /* on overview step everything is visible */ 1.204 - 1.205 .impress-on-overview .step { 1.206 opacity: 1; 1.207 cursor: pointer; 1.208 @@ -628,7 +564,7 @@ 1.209 1.210 padding: 40px 60px; 1.211 1.212 - border-radius: 10px; 1.213 + border-radius: 20px; 1.214 1.215 background-color: white; 1.216 1.217 @@ -670,7 +606,7 @@ 1.218 padding: 10px 10px 0; 1.219 margin: 20px auto; 1.220 1.221 - border-radius: 10px; 1.222 + border-radius: 20px; 1.223 border: 1px solid #E4C652; 1.224 background: #EEDC94; 1.225 } 1.226 @@ -1085,11 +1021,27 @@ 1.227 <h2>Michael Schloh von Bennewitz</h2> 1.228 </div> 1.229 1.230 - <div id="contents" class="step slide" data-x="1300" data-y="-1920"> 1.231 + <!-- 1.232 + avconv -i <inputfile> -b:v 1200k -vcodec libx264 -pre slow -pre baseline -s hd480 -acodec libvo_aacenc -ab 128000 -g 30 <outputfile.mp4> 1.233 + avconv -i <inputfile> -b:v 1200k -vcodec libvpx -pre 360p -s hd480 -acodec libvorbis -ab 128000 -f webm -g 30 <outputfile.webm> 1.234 + ffmpeg -i <inputfile> -b:v 1200k -vcodec libtheora -s hd480 -acodec libvorbis -ab 128000 -g 30 <outputfile.ogv> 1.235 + --> 1.236 + <div id="vidful" class="step" data-x="1300" data-y="-1920"> 1.237 + <!--<video id="vidsrc" src="tizportdev-768p.ogv" type='video/ogg; codecs="theora, vorbis"' autoplay loop controls />--> 1.238 + <video id="vidsrc" autoplay loop controls> 1.239 + <source src="tizportdev-768p.webm" type='video/webm; codecs="vp8, vorbis"' /> 1.240 + <source src="tizportdev-768p.ogv" type='video/ogg; codecs="theora, vorbis"' /> 1.241 + <source src="tizportdev-768p.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 1.242 + Video tag not supported. Download the video <a href="shouldlook.webm">here</a>. 1.243 + </video> 1.244 + <p>Example of correct display of this presentation</p> 1.245 + </div> 1.246 + 1.247 + <div id="contents" class="step slide" data-x="1300" data-y="-2600"> 1.248 <h1>Contents</h1> 1.249 <ul> 1.250 <li><a href="index.html#/topcat">Mobile App <b>Categories</b></a></li> 1.251 - <li><a href="index.html#/topnative"><b>Native</b> App Architecture</a></li> 1.252 + <li><a href="index.html#/topnative"><b>Native</b> App Frameworks</a></li> 1.253 <li><a href="index.html#/topweb"><b>Web</b> App Frameworks</a></li> 1.254 <li><a href="index.html#/tophybrid"><b>Hybrid</b> App Frameworks</a></li> 1.255 <li><a href="index.html#/sdkprovide">Tizen SDK <b>Provision</b></a></li> 1.256 @@ -1104,33 +1056,33 @@ 1.257 </ul> 1.258 </div> 1.259 1.260 - <div id="topcat" class="step" data-x="800" data-y="-400" data-z="1000" data-scale="3"> 1.261 + <div id="topcat" class="step dark" data-x="800" data-y="-400" data-z="1000" data-scale="3"> 1.262 <span class="smalltext">Mobile Application</span> 1.263 <h1>Categories</h1> 1.264 </div> 1.265 1.266 - <div id="svgrich1" class="step" data-x="1052" data-y="-240" data-z="-1000" data-scale="0.125"> 1.267 + <div id="svgrich1" class="step dark" data-x="1200" data-y="-120" data-z="-1000" data-scale="0.125"> 1.268 <img src="richreach.svg" width="100%" /> 1.269 </div> 1.270 1.271 - <div id="topnative" class="step" data-x="200" data-y="-570" data-z="-1000" data-scale="0.3"> 1.272 + <div id="topnative" class="step dark" data-x="200" data-y="-570" data-z="-1000" data-scale="0.3"> 1.273 <span class="smalltext">Development</span> 1.274 <h1>Native App</h1> 1.275 </div> 1.276 1.277 - <div id="svgrich2" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5"> 1.278 + <div id="picnative" class="step dark" data-x="800" data-y="-540" data-z="-1000" data-scale="0.2"> 1.279 + <img src="quickmeme.png" width="100%" /> 1.280 + </div> 1.281 + 1.282 + <div id="svgrich2" class="step dark" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5"> 1.283 <img src="appsnative.svg" width="100%" /> 1.284 </div> 1.285 1.286 - <div id="svgtizenarch1" class="step" data-x="-1400" data-y="-1024" data-z="-1000" data-scale="0.4"> 1.287 + <div id="svgtizenarch1" class="step dark" data-x="-1400" data-y="-1024" data-z="-1000" data-scale="0.4"> 1.288 <img src="tizenarch.svg" width="100%" height="720px" /> 1.289 </div> 1.290 1.291 - <div id="picnative" class="step" data-x="-1800" data-y="-1100" data-z="-1000" data-scale="0.2"> 1.292 - <img src="quickmeme.png" width="100%" /> 1.293 - </div> 1.294 - 1.295 - <div id="svgrich3" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5"> 1.296 + <div id="svgrich3" class="step dark" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5"> 1.297 <img src="appsweb.svg" width="100%" /> 1.298 </div> 1.299 1.300 @@ -1140,7 +1092,7 @@ 1.301 </div> 1.302 1.303 <div id="kitplethora" class="step" data-x="-2755" data-y="-2320" data-z="-1000" data-rotate="90" data-scale="0.05"> 1.304 - <q><b>Web App Frameworks</b></q> 1.305 + <q><b>JavaScript Libraries</b></q> 1.306 <ul class="webfmwork"> 1.307 <li class="item fmwork-1" style="width: 120px; line-height: 40px;">jQuery Mobile</li> 1.308 <li class="item fmwork-2" style="width: 120px; line-height: 40px;">Sencha Touch</li> 1.309 @@ -1169,14 +1121,12 @@ 1.310 </div> 1.311 1.312 <div id="specases" class="step" data-x="-2755" data-y="-3700" data-z="-1000" data-rotate="180" data-scale=".5"> 1.313 - <!-- Paul IRISH with best practices --> 1.314 - <!-- Principle of progressive enhancement --> 1.315 <span class="smalltext">HTML5Boilerplate Modernizr</span> 1.316 <h1>Special Cases</h1> 1.317 </div> 1.318 1.319 <div id="topchoose1" class="step" data-x="-2755" data-y="-4550" data-z="-1000" data-rotate="180" data-scale="2"> 1.320 - <span class="smalltext">a framework</span> 1.321 + <span class="smalltext">from JS libs</span> 1.322 <h1>Choosing</h1> 1.323 </div> 1.324 1.325 @@ -1250,8 +1200,7 @@ 1.326 <h2><span style="color: aqua;">Tizen</span> <span style="color: orange;">Application</span> <span style="color: red;">Portability</span></h2> 1.327 </div> 1.328 1.329 - <div id="overview" class="step" data-x="2500" data-y="-4200" data-scale="12"> 1.330 - </div> 1.331 + <div id="overview" class="step" data-x="2500" data-y="-4000" data-scale="12" /> 1.332 1.333 <!--<div id="midlabel" class="step" data-x="3700" data-y="-3000" data-scale="6"> 1.334 <h1>Tizen</h1> 1.335 @@ -1264,6 +1213,15 @@ 1.336 if ("ontouchstart" in document.documentElement) { 1.337 document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>"; 1.338 } 1.339 + 1.340 +var videostep = document.getElementById("vidful"); 1.341 +var videofile = document.getElementById("vidsrc"); 1.342 +videostep.addEventListener("impress:stepenter", function() { 1.343 + videofile.play(); 1.344 +}, false); 1.345 +videostep.addEventListener("impress:stepleave", function() { 1.346 + videofile.pause(); 1.347 +}, false); 1.348 </script> 1.349 1.350 <script src="impress.js"></script>
2.1 Binary file tizenporta/masterhinterbay.png has changed
3.1 --- a/tizenporta/newappflow.svg Mon Mar 18 19:21:40 2013 +0100 3.2 +++ b/tizenporta/newappflow.svg Mon Mar 18 20:12:22 2013 +0100 3.3 @@ -518,7 +518,7 @@ 3.4 font-family="Helvetica" 3.5 font-size="18" 3.6 font-weight="500" 3.7 - x="25.233398" 3.8 + x="29.25" 3.9 y="84" 3.10 textLength="86.04492" 3.11 id="tspan162"> Samsung </tspan> 3.12 @@ -662,7 +662,7 @@ 3.13 font-family="Helvetica" 3.14 font-size="18" 3.15 font-weight="500" 3.16 - x="25.233398" 3.17 + x="29.25" 3.18 y="172" 3.19 textLength="114.01172" 3.20 id="tspan198"> BlackBerry W</tspan> 3.21 @@ -694,7 +694,7 @@ 3.22 font-family="Helvetica" 3.23 font-size="18" 3.24 font-weight="500" 3.25 - x="25.233398" 3.26 + x="29.25" 3.27 y="194" 3.28 textLength="99.043945" 3.29 id="tspan206"> Nokia Store</tspan> 3.30 @@ -718,7 +718,7 @@ 3.31 font-family="Helvetica" 3.32 font-size="18" 3.33 font-weight="500" 3.34 - x="25.233398" 3.35 + x="29.25" 3.36 y="216" 3.37 textLength="103.060547" 3.38 id="tspan212"> Google Play</tspan> 3.39 @@ -742,7 +742,7 @@ 3.40 font-family="Helvetica" 3.41 font-size="18" 3.42 font-weight="500" 3.43 - x="25.233398" 3.44 + x="29.25" 3.45 y="238" 3.46 textLength="16" 3.47 id="tspan218"> W</tspan>
4.1 Binary file tizenporta/schlusshintergrund.png has changed
