1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/tizenporta/index.html Wed May 02 20:50:26 2012 +0200
1.3 @@ -0,0 +1,1193 @@
1.4 +<!doctype html>
1.5 +<html lang="en">
1.6 +<head>
1.7 + <meta charset="utf-8" />
1.8 + <meta name="viewport" content="width=1024" />
1.9 + <meta name="apple-mobile-web-app-capable" content="yes" />
1.10 + <title>Tizen Application Portability</title>
1.11 +
1.12 + <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.)" />
1.13 + <meta name="author" content="Michael Schloh von Bennewitz" />
1.14 +
1.15 + <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" />
1.16 +
1.17 + <link rel="shortcut icon" href="favicon.png" />
1.18 + <link rel="apple-touch-icon" href="apple-touch-icon.png" />
1.19 +
1.20 + <style type="text/css">
1.21 + html, body, div, span, applet, object, iframe,
1.22 + h1, h2, h3, h4, h5, h6, p, blockquote, pre,
1.23 + a, abbr, acronym, address, big, cite, code,
1.24 + del, dfn, em, img, ins, kbd, q, s, samp,
1.25 + small, strike, strong, sub, sup, tt, var,
1.26 + b, u, i, center,
1.27 + dl, dt, dd, ol, ul, li,
1.28 + fieldset, form, label, legend,
1.29 + table, caption, tbody, tfoot, thead, tr, th, td,
1.30 + article, aside, canvas, details, embed,
1.31 + figure, figcaption, footer, header, hgroup,
1.32 + menu, nav, output, ruby, section, summary,
1.33 + time, mark, audio, video {
1.34 + margin: 0;
1.35 + padding: 0;
1.36 + border: 0;
1.37 + font-size: 100%;
1.38 + font: inherit;
1.39 + vertical-align: baseline;
1.40 + }
1.41 +
1.42 + /* HTML5 display-role reset for older browsers */
1.43 + article, aside, details, figcaption, figure,
1.44 + footer, header, hgroup, menu, nav, section {
1.45 + display: block;
1.46 + }
1.47 + body {
1.48 + line-height: 1;
1.49 + }
1.50 + ol, ul {
1.51 + list-style: none;
1.52 + }
1.53 + blockquote, q {
1.54 + quotes: none;
1.55 + }
1.56 + blockquote:before, blockquote:after,
1.57 + q:before, q:after {
1.58 + content: '';
1.59 + content: none;
1.60 + }
1.61 +
1.62 + table {
1.63 + border-collapse: collapse;
1.64 + border-spacing: 0;
1.65 + }
1.66 +
1.67 +
1.68 + body {
1.69 + font-family: 'PT Sans', sans-serif;
1.70 +
1.71 + min-height: 740px;
1.72 +
1.73 + background: rgb(215, 215, 215);
1.74 + background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(250, 250, 250)), to(rgb(160, 160, 160)));
1.75 + background: -webkit-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
1.76 + background: -moz-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
1.77 + background: -o-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
1.78 + background: radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
1.79 +
1.80 + -webkit-font-smoothing: antialiased;
1.81 + }
1.82 +
1.83 + b, strong { font-weight: bold }
1.84 + i, em { font-style: italic}
1.85 +
1.86 + a {
1.87 + color: inherit;
1.88 + text-decoration: none;
1.89 + padding: 0 0.1em;
1.90 + background: rgba(255,255,255,0.5);
1.91 + text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
1.92 + border-radius: 0.2em;
1.93 +
1.94 + -webkit-transition: 0.5s;
1.95 + -moz-transition: 0.5s;
1.96 + -ms-transition: 0.5s;
1.97 + -o-transition: 0.5s;
1.98 + transition: 0.5s;
1.99 + }
1.100 +
1.101 + a:hover {
1.102 + background: rgba(255,255,255,1);
1.103 + text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
1.104 + }
1.105 +
1.106 + /* enable clicking on elements 'hiding' behind body in 3D */
1.107 + body { pointer-events: none; }
1.108 +#impress { pointer-events: auto; }
1.109 +
1.110 + /* COMMON STEP STYLES */
1.111 +
1.112 + .step {
1.113 + width: 1080px;
1.114 + padding: 40px;
1.115 +
1.116 + -webkit-box-sizing: border-box;
1.117 + -moz-box-sizing: border-box;
1.118 + -ms-box-sizing: border-box;
1.119 + -o-box-sizing: border-box;
1.120 + box-sizing: border-box;
1.121 +
1.122 + font-family: 'PT Serif', georgia, serif;
1.123 +
1.124 + font-size: 48px;
1.125 + line-height: 1.5;
1.126 + }
1.127 +
1.128 + .step {
1.129 + -webkit-transition: opacity 1s;
1.130 + -moz-transition: opacity 1s;
1.131 + -ms-transition: opacity 1s;
1.132 + -o-transition: opacity 1s;
1.133 + transition: opacity 1s;
1.134 + }
1.135 +
1.136 + /* fade out inactive slides */
1.137 + .step:not(.active) {
1.138 + opacity: 0.3;
1.139 + }
1.140 +
1.141 + /* STEP SPECIFIC STYLES */
1.142 +
1.143 + /* hint on the first slide */
1.144 +
1.145 + .hint {
1.146 + position: fixed;
1.147 + left: 0;
1.148 + right: 0;
1.149 + bottom: 200px;
1.150 +
1.151 + background: rgba(0,0,0,0.5);
1.152 + color: #EEE;
1.153 + text-align: center;
1.154 +
1.155 + font-size: 50px;
1.156 + padding: 20px;
1.157 +
1.158 + z-index: 100;
1.159 +
1.160 + opacity: 0;
1.161 +
1.162 + -webkit-transform: translateY(400px);
1.163 + -moz-transform: translateY(400px);
1.164 + -ms-transform: translateY(400px);
1.165 + -o-transform: translateY(400px);
1.166 + transform: translateY(400px);
1.167 +
1.168 + -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
1.169 + -moz-transition: opacity 1s, -moz-transform 0.5s 1s;
1.170 + -ms-transition: opacity 1s, -ms-transform 0.5s 1s;
1.171 + -o-transition: opacity 1s, -o-transform 0.5s 1s;
1.172 + transition: opacity 1s, transform 0.5s 1s;
1.173 + }
1.174 +
1.175 + .impress-on-license .hint {
1.176 + opacity: 1;
1.177 +
1.178 + -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s;
1.179 + -moz-transition: opacity 1s 5s, -moz-transform 0.5s;
1.180 + -ms-transition: opacity 1s 5s, -ms-transform 0.5s;
1.181 + -o-transition: opacity 1s 5s, -o-transform 0.5s;
1.182 + transition: opacity 1s 5s, transform 0.5s;
1.183 +
1.184 + -webkit-transform: translateY(0px);
1.185 + -moz-transform: translateY(0px);
1.186 + -ms-transform: translateY(0px);
1.187 + -o-transform: translateY(0px);
1.188 + transform: translateY(0px);
1.189 + }
1.190 +
1.191 +#midlabel {
1.192 + font-size: 200px;
1.193 + font-weight: 900;
1.194 + font-family: 'Open Sans', Arial, sans-serif;
1.195 + text-shadow: 8px 6px 12px black;
1.196 + color: #F08020;
1.197 +}
1.198 +
1.199 +#title {
1.200 + background-size: 100% 100%;
1.201 + background-image: url(masterhinterbay.png);
1.202 + background-repeat: no-repeat;
1.203 + background-attachment: fixed;
1.204 + background-position: top;
1.205 +}
1.206 +
1.207 +#title h1 {
1.208 + padding-left: 42px;
1.209 + font-size: 76px;
1.210 + font-weight: bold;
1.211 + font-family: 'Open Sans', Arial, sans-serif;
1.212 + position: relative;
1.213 + bottom: -160px;
1.214 +
1.215 + color: white;
1.216 + text-shadow: 4px 3px 8px black;
1.217 + }
1.218 +
1.219 +#title h2 {
1.220 + padding-top: 48px;
1.221 + padding-left: 42px;
1.222 + font-size: 64px;
1.223 + font-weight: bold;
1.224 + letter-spacing: 2px;
1.225 + font-family: 'Open Sans', Arial, sans-serif;
1.226 + position: relative;
1.227 + bottom: -160px;
1.228 +
1.229 + color: white;
1.230 + text-shadow: 4px 3px 8px black;
1.231 + }
1.232 +
1.233 +#contents {
1.234 + background-image: url('meefrauhand.svg');
1.235 + background-position: 90% 80%;
1.236 + background-repeat: no-repeat;
1.237 + color: #202020;
1.238 + }
1.239 +
1.240 +#contents h1 {
1.241 + padding-top: 32px;
1.242 + padding-bottom: 48px;
1.243 + font-size: 96px;
1.244 + font-weight: bold;
1.245 + font-family: 'Open Sans', Arial, sans-serif;
1.246 + }
1.247 +
1.248 +#contents ul {
1.249 + font-size: 48px;
1.250 + line-height: 64px;
1.251 + padding-left: 96px;
1.252 + }
1.253 +
1.254 +#topcat .smalltext, #tophybrid .smalltext {
1.255 + font-size: 80px;
1.256 + position: absolute;
1.257 + top: -0.2em;
1.258 + left: 1.7em;
1.259 +
1.260 + -webkit-transform: translateZ(20px);
1.261 + -moz-transform: translateZ(20px);
1.262 + -ms-transform: translateZ(20px);
1.263 + -o-transform: translateZ(20px);
1.264 + transform: translateZ(20px);
1.265 + }
1.266 +
1.267 +#topcat h1 {
1.268 + font-size: 180px;
1.269 + line-height: 200px;
1.270 + padding-top: 64px;
1.271 + text-align: center;
1.272 +
1.273 + -webkit-transform: translateZ(50px);
1.274 + -moz-transform: translateZ(50px);
1.275 + -ms-transform: translateZ(50px);
1.276 + -o-transform: translateZ(50px);
1.277 + transform: translateZ(50px);
1.278 + }
1.279 +
1.280 +#tophybrid h1 {
1.281 + font-size: 180px;
1.282 + line-height: 200px;
1.283 + padding-top: 64px;
1.284 +
1.285 + -webkit-transform: translateZ(50px);
1.286 + -moz-transform: translateZ(50px);
1.287 + -ms-transform: translateZ(50px);
1.288 + -o-transform: translateZ(50px);
1.289 + transform: translateZ(50px);
1.290 + }
1.291 +
1.292 +#topnative .smalltext {
1.293 + font-size: 120px;
1.294 + position: absolute;
1.295 + top: 1.75em;
1.296 + left: 0.6em;
1.297 +
1.298 + -webkit-transform: translateZ(20px);
1.299 + -moz-transform: translateZ(20px);
1.300 + -ms-transform: translateZ(20px);
1.301 + -o-transform: translateZ(20px);
1.302 + transform: translateZ(20px);
1.303 + }
1.304 +
1.305 +#topnative h1 {
1.306 + font-size: 200px;
1.307 + position: relative;
1.308 + top: -0.25em;
1.309 +
1.310 + -webkit-transform: translateZ(50px);
1.311 + -moz-transform: translateZ(50px);
1.312 + -ms-transform: translateZ(50px);
1.313 + -o-transform: translateZ(50px);
1.314 + transform: translateZ(50px);
1.315 + }
1.316 +
1.317 +#topnative:not(.active) {
1.318 + opacity: 0;
1.319 +}
1.320 +
1.321 +#topnative:is(.active) {
1.322 + opacity: 1;
1.323 +}
1.324 +
1.325 +#topweb .smalltext {
1.326 + font-size: 104px;
1.327 + position: absolute;
1.328 + top: 2em;
1.329 + left: 1.4em;
1.330 +
1.331 + -webkit-transform: translateZ(20px);
1.332 + -moz-transform: translateZ(20px);
1.333 + -ms-transform: translateZ(20px);
1.334 + -o-transform: translateZ(20px);
1.335 + transform: translateZ(20px);
1.336 + }
1.337 +
1.338 +#topweb h1 {
1.339 + font-size: 200px;
1.340 + position: relative;
1.341 + top: -0.25em;
1.342 + text-align: center;
1.343 +
1.344 + -webkit-transform: translateZ(50px);
1.345 + -moz-transform: translateZ(50px);
1.346 + -ms-transform: translateZ(50px);
1.347 + -o-transform: translateZ(50px);
1.348 + transform: translateZ(50px);
1.349 + }
1.350 +
1.351 +#svgrich1:not(.active) {
1.352 + opacity: 0;
1.353 +}
1.354 +
1.355 +#svgrich1:is(.active) {
1.356 + opacity: 1;
1.357 +}
1.358 +
1.359 +/*#svgtizenarch1:not(.active) {
1.360 + opacity: 0;
1.361 +}
1.362 +
1.363 +#svgtizenarch1:is(.active) {
1.364 + opacity: 1;
1.365 +}*/
1.366 +
1.367 +#svgtizenarch1, #svgtizenarch2 {
1.368 + width: 820px;
1.369 + padding-top: 48px;
1.370 + margin-left: auto;
1.371 + margin-right: auto;
1.372 +}
1.373 +
1.374 +#svgrich2:not(.active) {
1.375 + opacity: 0;
1.376 +}
1.377 +
1.378 +#svgrich2:is(.active) {
1.379 + opacity: 1;
1.380 +}
1.381 +
1.382 +#svgrich3:not(.active) {
1.383 + opacity: 0;
1.384 +}
1.385 +
1.386 +#svgrich3:is(.active) {
1.387 + opacity: 1;
1.388 +}
1.389 +
1.390 +#kitplethora:not(.active) {
1.391 + opacity: 0;
1.392 +}
1.393 +
1.394 +#kitplethora:is(.active) {
1.395 + opacity: 1;
1.396 +}
1.397 +
1.398 +#svgappflow:not(.active) {
1.399 + opacity: 0;
1.400 +}
1.401 +
1.402 +#svgappflow:is(.active) {
1.403 + opacity: 1;
1.404 +}
1.405 +
1.406 +#topchoose1 .smalltext {
1.407 + font-size: 130px;
1.408 + position: absolute;
1.409 + top: 1.5em;
1.410 + left: 1em;
1.411 +
1.412 + -webkit-transform: translateZ(20px);
1.413 + -moz-transform: translateZ(20px);
1.414 + -ms-transform: translateZ(20px);
1.415 + -o-transform: translateZ(20px);
1.416 + transform: translateZ(20px);
1.417 + }
1.418 +
1.419 +#topchoose1 h1 {
1.420 + font-size: 200px;
1.421 + position: relative;
1.422 + top: -0.25em;
1.423 + text-align: center;
1.424 +
1.425 + -webkit-transform: translateZ(50px);
1.426 + -moz-transform: translateZ(50px);
1.427 + -ms-transform: translateZ(50px);
1.428 + -o-transform: translateZ(50px);
1.429 + transform: translateZ(50px);
1.430 + }
1.431 +
1.432 +#topchoose2:not(.active) {
1.433 + opacity: 0;
1.434 +}
1.435 +
1.436 +#topchoose2:is(.active) {
1.437 + opacity: 1;
1.438 +}
1.439 +
1.440 +#topchoose2 a {
1.441 + font-size: 64px;
1.442 + position: relative;
1.443 + top: 2em;
1.444 + left: 1.4em;
1.445 + }
1.446 +
1.447 +#topwhy h1 {
1.448 + font-size: 160px;
1.449 + line-height: 150px;
1.450 + position: relative;
1.451 + top: -1em;
1.452 + text-align: center;
1.453 +
1.454 + -webkit-transform: translateZ(50px);
1.455 + -moz-transform: translateZ(50px);
1.456 + -ms-transform: translateZ(50px);
1.457 + -o-transform: translateZ(50px);
1.458 + transform: translateZ(50px);
1.459 + }
1.460 +
1.461 +blockquote {
1.462 + text-align: justify;
1.463 + font-weight: 300;
1.464 + font-style: italic;
1.465 + line-height: 1.2;
1.466 + margin-left: 72px;
1.467 + margin-right: 72px;
1.468 + position: relative;
1.469 + top: 3.5em;
1.470 +}
1.471 +
1.472 +blockquote .author {
1.473 + display: block;
1.474 + text-align: right;
1.475 + padding: 0 40px;
1.476 + font-weight: 600;
1.477 + font-size: 36px;
1.478 +}
1.479 +
1.480 +#sdkstart h1, #sdkprovide h1, #sdkinteg h1, #sdkdemo h1 {
1.481 + /*font-family: 'Open Sans', sans-serif;*/
1.482 + /*font-weight: 900;*/
1.483 + font-size: 200px;
1.484 +
1.485 + -webkit-transform: translateZ(50px);
1.486 + -moz-transform: translateZ(50px);
1.487 + -ms-transform: translateZ(50px);
1.488 + -o-transform: translateZ(50px);
1.489 + transform: translateZ(50px);
1.490 + }
1.491 +
1.492 +#resources {
1.493 + background-image: url('meegarbeit.svg');
1.494 + background-position: 90% 80%;
1.495 + background-repeat: no-repeat;
1.496 + }
1.497 +
1.498 +#resources h1 {
1.499 + padding-top: 32px;
1.500 + padding-bottom: 48px;
1.501 + font-size: 96px;
1.502 + font-weight: bold;
1.503 + font-family: 'Open Sans', Arial, sans-serif;
1.504 + }
1.505 +
1.506 +#resources ul {
1.507 + font-size: 36px;
1.508 + line-height: 52px;
1.509 + padding-left: 64px;
1.510 + }
1.511 +
1.512 +#resources .ecrivain {
1.513 + text-decoration: underline;
1.514 +}
1.515 +
1.516 +#conclusion {
1.517 + background-image: url('qrtizportdev.png');
1.518 + background-size: 300px 300px;
1.519 + background-position: 10% 95%;
1.520 + background-repeat: no-repeat;
1.521 + }
1.522 +
1.523 +#conclusion h1 {
1.524 + padding-top: 64px;
1.525 + text-align: center;
1.526 + padding-bottom: 96px;
1.527 + font-size: 200px;
1.528 + font-weight: bold;
1.529 + font-family: 'Open Sans', Arial, sans-serif;
1.530 + }
1.531 +
1.532 +#conclusion h2 {
1.533 + text-align: center;
1.534 + font-size: 72px;
1.535 + font-weight: bold;
1.536 + font-family: 'Open Sans', Arial, sans-serif;
1.537 + }
1.538 +
1.539 + /* overview step */
1.540 +
1.541 +#overview {
1.542 + z-index: -1;
1.543 + padding: 0;
1.544 + }
1.545 +
1.546 + /* on overview step everything is visible */
1.547 +
1.548 + .impress-on-overview .step {
1.549 + opacity: 1;
1.550 + cursor: pointer;
1.551 + }
1.552 +
1.553 + /*
1.554 + * SLIDE STEP STYLES
1.555 + *
1.556 + * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
1.557 + *
1.558 + * ;)
1.559 + */
1.560 +
1.561 + .slide {
1.562 + display: block;
1.563 +
1.564 + width: 1200px;
1.565 + height: 600px;
1.566 +
1.567 + padding: 40px 60px;
1.568 +
1.569 + border-radius: 10px;
1.570 +
1.571 + background-color: white;
1.572 +
1.573 + box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
1.574 + border: 1px solid rgba(0, 0, 0, .3);
1.575 +
1.576 + font-family: 'Open Sans', Arial, sans-serif;
1.577 +
1.578 + color: rgb(102, 102, 102);
1.579 + text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
1.580 +
1.581 + font-size: 30px;
1.582 + line-height: 36px;
1.583 +
1.584 + letter-spacing: -1px;
1.585 + }
1.586 +
1.587 + .slide q {
1.588 + display: block;
1.589 + font-size: 50px;
1.590 + line-height: 72px;
1.591 +
1.592 + margin-top: 100px;
1.593 + }
1.594 +
1.595 + .slide q strong {
1.596 + white-space: nowrap;
1.597 + }
1.598 +
1.599 +
1.600 + /* IMPRESS NOT SUPPORTED STYLES */
1.601 +
1.602 + .fallback-message {
1.603 + font-family: sans-serif;
1.604 + line-height: 1.3;
1.605 +
1.606 + display: none;
1.607 + width: 780px;
1.608 + padding: 10px 10px 0;
1.609 + margin: 20px auto;
1.610 +
1.611 + border-radius: 10px;
1.612 + border: 1px solid #E4C652;
1.613 + background: #EEDC94;
1.614 + }
1.615 +
1.616 + .fallback-message p {
1.617 + margin-bottom: 10px;
1.618 + }
1.619 +
1.620 + .impress-disabled .step,
1.621 + .impress-not-supported .step {
1.622 + position: relative;
1.623 + opacity: 1;
1.624 + margin: 20px auto;
1.625 + }
1.626 +
1.627 + .impress-not-supported .fallback-message {
1.628 + display: block;
1.629 + }
1.630 +
1.631 + #kitplethora {
1.632 + padding-top: 100px;
1.633 + text-align: center;
1.634 + }
1.635 + #kitplethora .webfmwork { }
1.636 + #kitplethora .webfmwork .item {
1.637 + display: block;
1.638 + font-size: .8em;
1.639 + opacity: .7;
1.640 + position: absolute;
1.641 + text-align: center;
1.642 + width: 25%;
1.643 + }
1.644 + #kitplethora .webfmwork .fmwork-1 {
1.645 + bottom: 240px;
1.646 + left: 0px;
1.647 + -moz-animation: item1 4s 0.5s infinite normal ease;
1.648 + -webkit-animation: item1 4s 0.5s infinite normal ease;
1.649 + -ms-animation: item1 4s 0.5s infinite normal ease;
1.650 + }
1.651 + @-moz-keyframes item1 {
1.652 + 0% { -moz-transform: rotate(10deg); left: 0px; }
1.653 + 50% { -moz-transform: rotate(-10deg); left: 10px; }
1.654 + 100% { -moz-transform: rotate(10deg); left: 0px; }
1.655 + }
1.656 + @-webkit-keyframes item1 {
1.657 + 0% { -webkit-transform: rotate(10deg); left: 0px; }
1.658 + 50% { -webkit-transform: rotate(-10deg); left: 10px; }
1.659 + 100% { -webkit-transform: rotate(10deg); left: 0px; }
1.660 + }
1.661 + @-ms-keyframes item1 {
1.662 + 0% { -ms-transform: rotate(10deg); left: 0px; }
1.663 + 50% { -ms-transform: rotate(-10deg); left: 10px; }
1.664 + 100% { -ms-transform: rotate(10deg); left: 0px; }
1.665 + }
1.666 + #kitplethora .webfmwork .fmwork-2 {
1.667 + bottom: 290px;
1.668 + left: 280px;
1.669 + -moz-animation: item2 4s 0s infinite normal ease;
1.670 + -webkit-animation: item2 4s 0s infinite normal ease;
1.671 + -ms-animation: item2 4s 0s infinite normal ease;
1.672 + }
1.673 + @-moz-keyframes item2 {
1.674 + 0% { -moz-transform: rotate(-10deg); left: 280px; }
1.675 + 50% { -moz-transform: rotate(10deg); left: 260px; }
1.676 + 100% { -moz-transform: rotate(-10deg); left: 280px; }
1.677 + }
1.678 + @-webkit-keyframes item2 {
1.679 + 0% { -webkit-transform: rotate(-10deg); left: 280px; }
1.680 + 50% { -webkit-transform: rotate(10deg); left: 260px; }
1.681 + 100% { -webkit-transform: rotate(-10deg); left: 280px; }
1.682 + }
1.683 + @-ms-keyframes item2 {
1.684 + 0% { -ms-transform: rotate(-10deg); left: 280px; }
1.685 + 50% { -ms-transform: rotate(10deg); left: 260px; }
1.686 + 100% { -ms-transform: rotate(-10deg); left: 280px; }
1.687 + }
1.688 + #kitplethora .webfmwork .fmwork-3 {
1.689 + bottom: 250px;
1.690 + right: 350px;
1.691 + -moz-animation: item3 4s 0.3s infinite normal ease;
1.692 + -webkit-animation: item3 4s 0.3s infinite normal ease;
1.693 + -ms-animation: item3 4s 0.3s infinite normal ease;
1.694 + }
1.695 + @-moz-keyframes item3 {
1.696 + 0% { -moz-transform: rotate(10deg); right: 350px; }
1.697 + 50% { -moz-transform: rotate(-10deg); right: 340px; }
1.698 + 100% { -moz-transform: rotate(10deg); right: 350px; }
1.699 + }
1.700 + @-webkit-keyframes item3 {
1.701 + 0% { -webkit-transform: rotate(10deg); right: 350px; }
1.702 + 50% { -webkit-transform: rotate(-10deg); right: 340px; }
1.703 + 100% { -webkit-transform: rotate(10deg); right: 350px; }
1.704 + }
1.705 + @-ms-keyframes item3 {
1.706 + 0% { -ms-transform: rotate(10deg); right: 350px; }
1.707 + 50% { -ms-transform: rotate(-10deg); right: 340px; }
1.708 + 100% { -ms-transform: rotate(10deg); right: 350px; }
1.709 + }
1.710 + #kitplethora .webfmwork .fmwork-4 {
1.711 + bottom: 280px;
1.712 + right: -10px;
1.713 + -moz-animation: item4 4s 0.1s infinite normal ease;
1.714 + -webkit-animation: item4 4s 0.1s infinite normal ease;
1.715 + -ms-animation: item4 4s 0.1s infinite normal ease;
1.716 + }
1.717 + @-moz-keyframes item4 {
1.718 + 0% { -moz-transform: rotate(-10deg); right: -10px; }
1.719 + 50% { -moz-transform: rotate(10deg); right: 10px; }
1.720 + 100% { -moz-transform: rotate(-10deg); right: -10px; }
1.721 + }
1.722 + @-webkit-keyframes item4 {
1.723 + 0% { -webkit-transform: rotate(-10deg); right: -10px; }
1.724 + 50% { -webkit-transform: rotate(10deg); right: 10px; }
1.725 + 100% { -webkit-transform: rotate(-10deg); right: -10px; }
1.726 + }
1.727 + @-ms-keyframes item4 {
1.728 + 0% { -ms-transform: rotate(-10deg); right: -10px; }
1.729 + 50% { -ms-transform: rotate(10deg); right: 10px; }
1.730 + 100% { -ms-transform: rotate(-10deg); right: -10px; }
1.731 + }
1.732 + #kitplethora .webfmwork .fmwork-5 {
1.733 + bottom: 140px;
1.734 + left: 0px;
1.735 + -moz-animation: item5 4s 2.1s infinite normal ease;
1.736 + -webkit-animation: item5 4s 2.1s infinite normal ease;
1.737 + -ms-animation: item5 4s 2.1s infinite normal ease;
1.738 + }
1.739 + @-moz-keyframes item5 {
1.740 + 0% { -moz-transform: rotate(10deg); left: 0px; }
1.741 + 50% { -moz-transform: rotate(-10deg); left: 10px; }
1.742 + 100% { -moz-transform: rotate(10deg); left: 0px; }
1.743 + }
1.744 + @-webkit-keyframes item5 {
1.745 + 0% { -webkit-transform: rotate(10deg); left: 0px; }
1.746 + 50% { -webkit-transform: rotate(-10deg); left: 10px; }
1.747 + 100% { -webkit-transform: rotate(10deg); left: 0px; }
1.748 + }
1.749 + @-ms-keyframes item5 {
1.750 + 0% { -ms-transform: rotate(10deg); left: 0px; }
1.751 + 50% { -ms-transform: rotate(-10deg); left: 10px; }
1.752 + 100% { -ms-transform: rotate(10deg); left: 0px; }
1.753 + }
1.754 + #kitplethora .webfmwork .fmwork-6 {
1.755 + bottom: 190px;
1.756 + left: 280px;
1.757 + -moz-animation: item6 4s 0.6s infinite normal ease;
1.758 + -webkit-animation: item6 4s 0.6s infinite normal ease;
1.759 + -ms-animation: item6 4s 0.6s infinite normal ease;
1.760 + }
1.761 + @-moz-keyframes item6 {
1.762 + 0% { -moz-transform: rotate(-10deg); left: 280px; }
1.763 + 50% { -moz-transform: rotate(10deg); left: 260px; }
1.764 + 100% { -moz-transform: rotate(-10deg); left: 280px; }
1.765 + }
1.766 + @-webkit-keyframes item6 {
1.767 + 0% { -webkit-transform: rotate(-10deg); left: 280px; }
1.768 + 50% { -webkit-transform: rotate(10deg); left: 260px; }
1.769 + 100% { -webkit-transform: rotate(-10deg); left: 280px; }
1.770 + }
1.771 + @-ms-keyframes item6 {
1.772 + 0% { -ms-transform: rotate(-10deg); left: 280px; }
1.773 + 50% { -ms-transform: rotate(10deg); left: 260px; }
1.774 + 100% { -ms-transform: rotate(-10deg); left: 280px; }
1.775 + }
1.776 + #kitplethora .webfmwork .fmwork-7 {
1.777 + bottom: 150px;
1.778 + right: 250px;
1.779 + -moz-animation: item7 5s 0.4s infinite normal ease;
1.780 + -webkit-animation: item7 5s 0.4s infinite normal ease;
1.781 + -ms-animation: item7 5s 0.4s infinite normal ease;
1.782 + }
1.783 + @-moz-keyframes item7 {
1.784 + 0% { -moz-transform: rotate(10deg); right: 250px; }
1.785 + 50% { -moz-transform: rotate(-10deg); right: 240px; }
1.786 + 100% { -moz-transform: rotate(10deg); right: 250px; }
1.787 + }
1.788 + @-webkit-keyframes item7 {
1.789 + 0% { -webkit-transform: rotate(10deg); right: 250px; }
1.790 + 50% { -webkit-transform: rotate(-10deg); right: 240px; }
1.791 + 100% { -webkit-transform: rotate(10deg); right: 250px; }
1.792 + }
1.793 + @-ms-keyframes item7 {
1.794 + 0% { -ms-transform: rotate(10deg); right: 250px; }
1.795 + 50% { -ms-transform: rotate(-10deg); right: 240px; }
1.796 + 100% { -ms-transform: rotate(10deg); right: 250px; }
1.797 + }
1.798 + #kitplethora .webfmwork .fmwork-8 {
1.799 + bottom: 180px;
1.800 + right: -10px;
1.801 + -moz-animation: item8 4s 0.8s infinite normal ease;
1.802 + -webkit-animation: item8 4s 0.8s infinite normal ease;
1.803 + -ms-animation: item8 4s 0.8s infinite normal ease;
1.804 + }
1.805 + @-moz-keyframes item8 {
1.806 + 0% { -moz-transform: rotate(-10deg); right: -10px; }
1.807 + 50% { -moz-transform: rotate(10deg); right: 10px; }
1.808 + 100% { -moz-transform: rotate(-10deg); right: -10px; }
1.809 + }
1.810 + @-webkit-keyframes item8 {
1.811 + 0% { -webkit-transform: rotate(-10deg); right: -10px; }
1.812 + 50% { -webkit-transform: rotate(10deg); right: 10px; }
1.813 + 100% { -webkit-transform: rotate(-10deg); right: -10px; }
1.814 + }
1.815 + @-ms-keyframes item8 {
1.816 + 0% { -ms-transform: rotate(-10deg); right: -10px; }
1.817 + 50% { -ms-transform: rotate(10deg); right: 10px; }
1.818 + 100% { -ms-transform: rotate(-10deg); right: -10px; }
1.819 + }
1.820 + #kitplethora .webfmwork .fmwork-9 {
1.821 + bottom: -40px;
1.822 + left: -60px;
1.823 + -moz-animation: item9 3.5s 0.2s infinite normal ease;
1.824 + -webkit-animation: item9 3.5s 0.2s infinite normal ease;
1.825 + -ms-animation: item9 3.5s 0.2s infinite normal ease;
1.826 + }
1.827 + @-moz-keyframes item9 {
1.828 + 0% { -moz-transform: rotate(10deg); left: 0px; }
1.829 + 50% { -moz-transform: rotate(-10deg); left: 10px; }
1.830 + 100% { -moz-transform: rotate(10deg); left: 0px; }
1.831 + }
1.832 + @-webkit-keyframes item9 {
1.833 + 0% { -webkit-transform: rotate(10deg); left: -60px; }
1.834 + 50% { -webkit-transform: rotate(-10deg); left: -50px; }
1.835 + 100% { -webkit-transform: rotate(10deg); left: -60px; }
1.836 + }
1.837 + @-ms-keyframes item9 {
1.838 + 0% { -ms-transform: rotate(10deg); left: 0px; }
1.839 + 50% { -ms-transform: rotate(-10deg); left: 10px; }
1.840 + 100% { -ms-transform: rotate(10deg); left: 0px; }
1.841 + }
1.842 + #kitplethora .webfmwork .fmwork-10 {
1.843 + bottom: -90px;
1.844 + left: 400px;
1.845 + -moz-animation: item10 5s 0.4s infinite normal ease;
1.846 + -webkit-animation: item10 5s 0.4s infinite normal ease;
1.847 + -ms-animation: item10 5s 0.4s infinite normal ease;
1.848 + }
1.849 + @-moz-keyframes item10 {
1.850 + 0% { -moz-transform: rotate(-10deg); left: 400px; }
1.851 + 50% { -moz-transform: rotate(10deg); left: 380px; }
1.852 + 100% { -moz-transform: rotate(-10deg); left: 400px; }
1.853 + }
1.854 + @-webkit-keyframes item10 {
1.855 + 0% { -webkit-transform: rotate(-10deg); left: 400px; }
1.856 + 50% { -webkit-transform: rotate(10deg); left: 380px; }
1.857 + 100% { -webkit-transform: rotate(-10deg); left: 400px; }
1.858 + }
1.859 + @-ms-keyframes item10 {
1.860 + 0% { -ms-transform: rotate(-10deg); left: 400px; }
1.861 + 50% { -ms-transform: rotate(10deg); left: 380px; }
1.862 + 100% { -ms-transform: rotate(-10deg); left: 400px; }
1.863 + }
1.864 + #kitplethora .webfmwork .fmwork-11 {
1.865 + bottom: -50px;
1.866 + right: 250px;
1.867 + -moz-animation: item11 4s 0.3s infinite normal ease;
1.868 + -webkit-animation: item11 4s 0.3s infinite normal ease;
1.869 + -ms-animation: item11 4s 0.3s infinite normal ease;
1.870 + }
1.871 + @-moz-keyframes item11 {
1.872 + 0% { -moz-transform: rotate(10deg); right: 250px; }
1.873 + 50% { -moz-transform: rotate(-10deg); right: 240px; }
1.874 + 100% { -moz-transform: rotate(10deg); right: 250px; }
1.875 + }
1.876 + @-webkit-keyframes item11 {
1.877 + 0% { -webkit-transform: rotate(10deg); right: 250px; }
1.878 + 50% { -webkit-transform: rotate(-10deg); right: 240px; }
1.879 + 100% { -webkit-transform: rotate(10deg); right: 250px; }
1.880 + }
1.881 + @-ms-keyframes item11 {
1.882 + 0% { -ms-transform: rotate(10deg); right: 250px; }
1.883 + 50% { -ms-transform: rotate(-10deg); right: 240px; }
1.884 + 100% { -ms-transform: rotate(10deg); right: 250px; }
1.885 + }
1.886 + #kitplethora .webfmwork .fmwork-12 {
1.887 + bottom: -80px;
1.888 + right: -10px;
1.889 + -moz-animation: item12 4s 0 infinite normal ease;
1.890 + -webkit-animation: item12 4s 0 infinite normal ease;
1.891 + -ms-animation: item12 4s 0 infinite normal ease;
1.892 + }
1.893 + @-moz-keyframes item12 {
1.894 + 0% { -moz-transform: rotate(-10deg); right: -10px; }
1.895 + 50% { -moz-transform: rotate(10deg); right: 10px; }
1.896 + 100% { -moz-transform: rotate(-10deg); right: -10px; }
1.897 + }
1.898 + @-webkit-keyframes item12 {
1.899 + 0% { -webkit-transform: rotate(-10deg); right: -10px; }
1.900 + 50% { -webkit-transform: rotate(10deg); right: 10px; }
1.901 + 100% { -webkit-transform: rotate(-10deg); right: -10px; }
1.902 + }
1.903 + @-ms-keyframes item12 {
1.904 + 0% { -ms-transform: rotate(-10deg); right: -10px; }
1.905 + 50% { -ms-transform: rotate(10deg); right: 10px; }
1.906 + 100% { -ms-transform: rotate(-10deg); right: -10px; }
1.907 + }
1.908 + #kitplethora .webfmwork .fmwork-13 {
1.909 + bottom: -140px;
1.910 + left: 0px;
1.911 + -moz-animation: item13 4s 0.5s infinite normal ease;
1.912 + -webkit-animation: item13 4s 0.5s infinite normal ease;
1.913 + -ms-animation: item13 4s 0.5s infinite normal ease;
1.914 + }
1.915 + @-moz-keyframes item13 {
1.916 + 0% { -moz-transform: rotate(10deg); left: 0px; }
1.917 + 50% { -moz-transform: rotate(-10deg); left: 10px; }
1.918 + 100% { -moz-transform: rotate(10deg); left: 0px; }
1.919 + }
1.920 + @-webkit-keyframes item13 {
1.921 + 0% { -webkit-transform: rotate(10deg); left: 0px; }
1.922 + 50% { -webkit-transform: rotate(-10deg); left: 10px; }
1.923 + 100% { -webkit-transform: rotate(10deg); left: 0px; }
1.924 + }
1.925 + @-ms-keyframes item13 {
1.926 + 0% { -ms-transform: rotate(10deg); left: 0px; }
1.927 + 50% { -ms-transform: rotate(-10deg); left: 10px; }
1.928 + 100% { -ms-transform: rotate(10deg); left: 0px; }
1.929 + }
1.930 + #kitplethora .webfmwork .fmwork-14 {
1.931 + bottom: -190px;
1.932 + left: 280px;
1.933 + -moz-animation: item14 4s 0s infinite normal ease;
1.934 + -webkit-animation: item14 4s 0s infinite normal ease;
1.935 + -ms-animation: item14 4s 0s infinite normal ease;
1.936 + }
1.937 + @-moz-keyframes item14 {
1.938 + 0% { -moz-transform: rotate(-10deg); left: 280px; }
1.939 + 50% { -moz-transform: rotate(10deg); left: 260px; }
1.940 + 100% { -moz-transform: rotate(-10deg); left: 280px; }
1.941 + }
1.942 + @-webkit-keyframes item14 {
1.943 + 0% { -webkit-transform: rotate(-10deg); left: 280px; }
1.944 + 50% { -webkit-transform: rotate(10deg); left: 260px; }
1.945 + 100% { -webkit-transform: rotate(-10deg); left: 280px; }
1.946 + }
1.947 + @-ms-keyframes item14 {
1.948 + 0% { -ms-transform: rotate(-10deg); left: 280px; }
1.949 + 50% { -ms-transform: rotate(10deg); left: 260px; }
1.950 + 100% { -ms-transform: rotate(-10deg); left: 280px; }
1.951 + }
1.952 + #kitplethora .webfmwork .fmwork-15 {
1.953 + bottom: -150px;
1.954 + right: 320px;
1.955 + -moz-animation: item15 3.5s 0.2s infinite normal ease;
1.956 + -webkit-animation: item15 3.5s 0.2s infinite normal ease;
1.957 + -ms-animation: item15 3.5s 0.2s infinite normal ease;
1.958 + }
1.959 + @-moz-keyframes item15 {
1.960 + 0% { -moz-transform: rotate(10deg); right: 320px; }
1.961 + 50% { -moz-transform: rotate(-10deg); right: 310px; }
1.962 + 100% { -moz-transform: rotate(10deg); right: 320px; }
1.963 + }
1.964 + @-webkit-keyframes item15 {
1.965 + 0% { -webkit-transform: rotate(10deg); right: 320px; }
1.966 + 50% { -webkit-transform: rotate(-10deg); right: 310px; }
1.967 + 100% { -webkit-transform: rotate(10deg); right: 320px; }
1.968 + }
1.969 + @-ms-keyframes item15 {
1.970 + 0% { -ms-transform: rotate(10deg); right: 320px; }
1.971 + 50% { -ms-transform: rotate(-10deg); right: 310px; }
1.972 + 100% { -ms-transform: rotate(10deg); right: 320px; }
1.973 + }
1.974 + #kitplethora .webfmwork .fmwork-16 {
1.975 + bottom: -180px;
1.976 + right: -10px;
1.977 + -moz-animation: item16 5s 0.4s infinite normal ease;
1.978 + -webkit-animation: item16 5s 0.4s infinite normal ease;
1.979 + -ms-animation: item16 5s 0.4s infinite normal ease;
1.980 + }
1.981 + @-moz-keyframes item16 {
1.982 + 0% { -moz-transform: rotate(-10deg); right: -10px; }
1.983 + 50% { -moz-transform: rotate(10deg); right: 10px; }
1.984 + 100% { -moz-transform: rotate(-10deg); right: -10px; }
1.985 + }
1.986 + @-webkit-keyframes item16 {
1.987 + 0% { -webkit-transform: rotate(-10deg); right: -10px; }
1.988 + 50% { -webkit-transform: rotate(10deg); right: 10px; }
1.989 + 100% { -webkit-transform: rotate(-10deg); right: -10px; }
1.990 + }
1.991 + @-ms-keyframes item16 {
1.992 + 0% { -ms-transform: rotate(-10deg); right: -10px; }
1.993 + 50% { -ms-transform: rotate(10deg); right: 10px; }
1.994 + 100% { -ms-transform: rotate(-10deg); right: -10px; }
1.995 + }
1.996 + </style>
1.997 +</head>
1.998 +
1.999 +<!-- class is renamed once javascript detects browser support -->
1.1000 +<body class="impress-not-supported">
1.1001 +
1.1002 +<div class="fallback-message">
1.1003 + <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>
1.1004 + <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
1.1005 +</div>
1.1006 +
1.1007 +<div id="impress">
1.1008 +
1.1009 + <div id="license" class="step slide" data-x="-1300" data-y="-1920">
1.1010 + <p style="font-size: 48px; line-height: 56px;">Copyright © 2012
1.1011 + Michael Schloh von Bennewitz <michael@schloh.com> Permission is
1.1012 + granted to copy, distribute and/or modify this document under
1.1013 + the terms of the GNU Free Documentation License, Version 1.3
1.1014 + or any later version published by the Free Software Foundation;
1.1015 + with no Invariant Sections, no Front-Cover Texts, and no
1.1016 + Back-Cover Texts. A copy of the license is included in the
1.1017 + document entitled “fdl-1.3.txt”</p>
1.1018 + </div>
1.1019 +
1.1020 + <div id="title" class="step slide" data-x="0" data-y="-1920">
1.1021 + <img src="mastervorderbay.png" width="65%" style="padding-left: 350px;" />
1.1022 + <h1>Tizen Application Portability</h1>
1.1023 + <h2>Michael Schloh von Bennewitz</h2>
1.1024 + </div>
1.1025 +
1.1026 + <div id="contents" class="step slide" data-x="1300" data-y="-1920">
1.1027 + <h1>Contents</h1>
1.1028 + <ul>
1.1029 + <li>Mobile App <b>Categories</b></li>
1.1030 + <li><b>Web</b> App Frameworks</li>
1.1031 + <li><b>Native</b> App Frameworks</li>
1.1032 + <li><b>Hybrid</b> App Frameworks</li>
1.1033 + <li>Tizen SDK <b>Provision</b></li>
1.1034 + <li>Tizen SDK <b>Integration</b></li>
1.1035 + <!--<li>Web App Frameworks</li>
1.1036 + <li>Hybrid Frameworks</li>
1.1037 + <li>License Compatibility </li>
1.1038 + <li>Tools and SDK Integration</li>
1.1039 + <li>Portability Strategies</li>
1.1040 + <li>Typical Workflows</li>
1.1041 + <li>Demonstration</li>-->
1.1042 + </ul>
1.1043 + </div>
1.1044 +
1.1045 + <div id="topcat" class="step" data-x="800" data-y="-400" data-z="1000" data-scale="3">
1.1046 + <span class="smalltext">Mobile Application</span>
1.1047 + <h1>Categories</h1>
1.1048 + </div>
1.1049 +
1.1050 + <div id="svgrich1" class="step" data-x="1050" data-y="-240" data-z="-1000" data-scale="0.1">
1.1051 + <img src="richreach.svg" width="100%" />
1.1052 + </div>
1.1053 +
1.1054 + <div id="topnative" class="step" data-x="200" data-y="-560" data-z="-1000" data-scale="0.3">
1.1055 + <span class="smalltext">Development</span>
1.1056 + <h1>Native App</h1>
1.1057 + </div>
1.1058 +
1.1059 + <div id="svgrich2" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
1.1060 + <img src="appsnative.svg" width="100%" />
1.1061 + </div>
1.1062 +
1.1063 + <div id="svgtizenarch1" class="step" data-x="-1400" data-y="-1024" data-z="-1000" data-scale="0.4">
1.1064 + <img src="tizenarch.svg" width="100%" height="720px" />
1.1065 + </div>
1.1066 +
1.1067 + <div id="svgrich3" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
1.1068 + <img src="appsweb.svg" width="100%" />
1.1069 + </div>
1.1070 +
1.1071 + <div id="topweb" class="step" data-x="-2800" data-y="-2200" data-z="0" data-rotate="90" data-scale="2">
1.1072 + <span class="smalltext">Frameworks</span>
1.1073 + <h1>Web App</h1>
1.1074 + </div>
1.1075 +
1.1076 + <div id="kitplethora" class="step" data-x="-2755" data-y="-2320" data-z="-1000" data-rotate="90" data-scale="0.05">
1.1077 + <q><b>Web App Frameworks</b></q>
1.1078 + <ul class="webfmwork">
1.1079 + <li class="item fmwork-1" style="width: 120px; line-height: 40px;">jQuery Mobile</li>
1.1080 + <li class="item fmwork-2" style="width: 120px; line-height: 40px;">Sencha Touch</li>
1.1081 + <li class="item fmwork-3">DojoX</li>
1.1082 + <li class="item fmwork-4">jQTouch</li>
1.1083 + <li class="item fmwork-5">Glovebox</li>
1.1084 + <li class="item fmwork-6">Lungo</li>
1.1085 + <li class="item fmwork-7">Appmobi</li>
1.1086 + <li class="item fmwork-8">Xooxdoo</li>
1.1087 + <li class="item fmwork-9">Appcraft</li>
1.1088 + <li class="item fmwork-10">Wink</li>
1.1089 + <li class="item fmwork-11">Xui</li>
1.1090 + <li class="item fmwork-12">Joframe</li>
1.1091 + <li class="item fmwork-13">Zepto</li>
1.1092 + <li class="item fmwork-14">Monocross</li>
1.1093 + <li class="item fmwork-15">Uranium</li>
1.1094 + <li class="item fmwork-16">Sproutcore</li>
1.1095 +<!-- <li class="item fmwork-17">Unify</li>
1.1096 + <li class="item fmwork-18">Ripple</li>
1.1097 + <li class="item fmwork-19">Ipfaces</li>
1.1098 + <li class="item fmwork-20">Qtmobil</li>
1.1099 + <li class="item fmwork-21">Phonegap</li>
1.1100 + <li class="item fmwork-22">Titanium</li>
1.1101 + <li class="item fmwork-23">Rhomobile</li>-->
1.1102 + </ul>
1.1103 + </div>
1.1104 +
1.1105 + <div id="topchoose1" class="step" data-x="-2755" data-y="-3850" data-z="-1000" data-rotate="180" data-scale="2">
1.1106 + <span class="smalltext">a framework</span>
1.1107 + <h1>Choosing</h1>
1.1108 + </div>
1.1109 +
1.1110 + <div id="svgappflow" class="step" data-x="-2740" data-y="-3800" data-z="-1000" data-rotate="180" data-scale="0.1">
1.1111 + <img src="newappflow.svg" width="100%" />
1.1112 + </div>
1.1113 +
1.1114 + <div id="topchoose2" class="step" data-x="-2755" data-y="-4050" data-z="-1000" data-rotate="180" data-scale="2">
1.1115 + <a target="_blank" href="http://www.markus-falk.com/mobile-frameworks-comparison-chart/">with Markus FALK's chart</a>
1.1116 + </div>
1.1117 +
1.1118 + <div id="topwhy" class="step" data-x="-2755" data-y="-5450" data-z="-1000" data-rotate="180" data-scale="2">
1.1119 + <h1>Why a Web Framework?</h1>
1.1120 + </div>
1.1121 +
1.1122 + <div id="rasterwhy" class="step" data-x="-2755" data-y="-5450" data-z="-500" data-rotate="180" data-scale="2">
1.1123 + <blockquote>“2012 will come to be known as the year of the web
1.1124 + runtimes. Officially there is no native development. Tizen
1.1125 + is an html5 affair only.”
1.1126 + <span class="author">- Raster Man</span></blockquote>
1.1127 + </div>
1.1128 +
1.1129 + <div id="tophybrid" class="step" data-x="1000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4">
1.1130 + <span class="smalltext">Leveraging</span>
1.1131 + <h1>Hybrid Frameworks</h1>
1.1132 + </div>
1.1133 +
1.1134 + <div id="svgrich4" class="step" data-x="-800" data-y="-7500" data-z="0" data-rotate="270" data-scale="2">
1.1135 + <img src="appshybrid.svg" width="100%" />
1.1136 + </div>
1.1137 +
1.1138 + <div id="svgtizenarch2" class="step" data-x="2000" data-y="-7500" data-z="0" data-rotate="360" data-scale="1">
1.1139 + <img src="tizenarch.svg" width="100%" height="720px" />
1.1140 + </div>
1.1141 +
1.1142 + <div id="sdkstart" class="step" data-x="6000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4">
1.1143 + <h1>Tizen SDK</h1>
1.1144 + </div>
1.1145 +
1.1146 + <div id="sdkprovide" class="step" data-x="6000" data-y="-4300" data-z="0" data-rotate="360" data-scale="4">
1.1147 + <h1>Provision</h1>
1.1148 + </div>
1.1149 +
1.1150 + <div id="sdkinteg" class="step" data-x="6000" data-y="-3600" data-z="0" data-rotate="360" data-scale="4">
1.1151 + <h1>Integration</h1>
1.1152 + </div>
1.1153 +
1.1154 + <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;">
1.1155 + <h1>Demo</h1>
1.1156 + </div>
1.1157 +
1.1158 + <div id="resources" class="step slide" data-x="0" data-y="-2600" data-rotate="0">
1.1159 + <h1>Resources</h1>
1.1160 + <ul>
1.1161 + <li>jQuery Mobile: Up and Running, <span class="ecrivain">Maximiliano FIRTMAN</span>
1.1162 + <li>Beginning Phonegap, <span class="ecrivain">Thomas MYER</span>
1.1163 + <li><a href="http://docs.phonegap.com/">http://docs.phonegap.com/</a></li>
1.1164 + <li><a href="http://www.modernizr.com/">http://www.modernizr.com/</a></li>
1.1165 + <li><a href="http://www.dojotoolkit.org/">http://www.dojotoolkit.org/</a></li>
1.1166 + <li><a href="http://www.jquerymobile.com/">http://www.jquerymobile.com/</a></li>
1.1167 + <li><a href="http://www.sencha.com/products/touch/">http://www.sencha.com/products/touch/</a></li>
1.1168 + </ul>
1.1169 + </div>
1.1170 +
1.1171 + <div id="conclusion" class="step slide" data-x="-1300" data-y="-2600" data-rotate="0">
1.1172 + <h1>Thank You</h1>
1.1173 + <h2>Tizen Application Portability</h2>
1.1174 + </div>
1.1175 +
1.1176 + <div id="overview" class="step" data-x="2500" data-y="-4200" data-scale="12">
1.1177 + </div>
1.1178 +
1.1179 + <!--<div id="midlabel" class="step" data-x="3700" data-y="-3000" data-scale="6">
1.1180 + <h1>Tizen</h1>
1.1181 + </div>-->
1.1182 +
1.1183 +<div class="hint">
1.1184 + <p>Use a spacebar or arrow keys to navigate</p>
1.1185 +</div>
1.1186 +<script>
1.1187 +if ("ontouchstart" in document.documentElement) {
1.1188 + document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
1.1189 +}
1.1190 +</script>
1.1191 +
1.1192 +<script src="impress.js"></script>
1.1193 +<script>impress().init();</script>
1.1194 +
1.1195 +</body>
1.1196 +</html>
