tizenporta/index.html@03660c8f542a
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.
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=1080" />
6 <meta name="apple-mobile-web-app-capable" content="yes" />
7 <title>Tizen Application Portability</title>
9 <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.)" />
10 <meta name="author" content="Michael Schloh von Bennewitz" />
12 <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" />
14 <link rel="shortcut icon" href="favicon.png" />
15 <link rel="apple-touch-icon" href="apple-touch-icon.png" />
17 <style type="text/css">
18 html, body, div, span, applet, object, iframe,
19 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
20 a, abbr, acronym, address, big, cite, code,
21 del, dfn, em, img, ins, kbd, q, s, samp,
22 small, strike, strong, sub, sup, tt, var,
23 b, u, i, center,
24 dl, dt, dd, ol, ul, li,
25 fieldset, form, label, legend,
26 table, caption, tbody, tfoot, thead, tr, th, td,
27 article, aside, canvas, details, embed,
28 figure, figcaption, footer, header, hgroup,
29 menu, nav, output, ruby, section, summary,
30 time, mark, audio, video {
31 margin: 0;
32 padding: 0;
33 border: 0;
34 font-size: 100%;
35 font: inherit;
36 vertical-align: baseline;
37 }
39 /* HTML5 display-role reset for older browsers */
40 article, aside, details, figcaption, figure,
41 footer, header, hgroup, menu, nav, section {
42 display: block;
43 }
44 body {
45 line-height: 1;
46 }
47 ol, ul {
48 list-style: none;
49 }
50 blockquote, q {
51 quotes: none;
52 }
53 blockquote:before, blockquote:after,
54 q:before, q:after {
55 content: '';
56 content: none;
57 }
59 table {
60 border-collapse: collapse;
61 border-spacing: 0;
62 }
65 body {
66 font-family: 'PT Sans', sans-serif;
68 min-height: 740px;
70 background: rgb(215, 215, 215);
71 background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(255, 255, 255)), to(rgb(160, 140, 80)));
72 background: -webkit-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
73 background: -moz-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
74 background: -o-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
75 background: radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80));
77 -webkit-font-smoothing: antialiased;
78 }
80 b, strong { font-weight: bold }
81 i, em { font-style: italic}
83 a {
84 color: inherit;
85 text-decoration: none;
86 padding: 0 0.1em;
87 background: rgba(255,255,255,0.5);
88 text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
89 border-radius: 0.2em;
91 -webkit-transition: 0.5s;
92 -moz-transition: 0.5s;
93 -ms-transition: 0.5s;
94 -o-transition: 0.5s;
95 transition: 0.5s;
96 }
98 a:hover {
99 background: rgba(255,255,255,1);
100 text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
101 }
103 /* enable clicking on elements 'hiding' behind body in 3D */
104 body { pointer-events: none; }
105 #impress { pointer-events: auto; }
107 /* COMMON STEP STYLES */
109 .step {
110 width: 1080px;
111 padding: 40px;
113 -webkit-box-sizing: border-box;
114 -moz-box-sizing: border-box;
115 -ms-box-sizing: border-box;
116 -o-box-sizing: border-box;
117 box-sizing: border-box;
119 font-family: 'PT Serif', georgia, serif;
121 font-size: 48px;
122 line-height: 1.5;
123 }
125 .step {
126 -webkit-transition: opacity 1s;
127 -moz-transition: opacity 1s;
128 -ms-transition: opacity 1s;
129 -o-transition: opacity 1s;
130 transition: opacity 1s;
131 }
133 /* fade out inactive slides */
134 .step:not(.active) {
135 opacity: 0.3;
136 }
138 /* completely fade to dark */
139 .dark:not(.active) {
140 opacity: 0;
141 }
143 /* STEP SPECIFIC STYLES */
145 /* hint on the first slide */
146 .hint {
147 position: fixed;
148 left: 0;
149 right: 0;
150 bottom: 200px;
152 background: rgba(0,0,0,0.5);
153 color: #EEE;
154 text-align: center;
156 font-size: 50px;
157 padding: 20px;
159 z-index: 100;
161 opacity: 0;
163 -webkit-transform: translateY(400px);
164 -moz-transform: translateY(400px);
165 -ms-transform: translateY(400px);
166 -o-transform: translateY(400px);
167 transform: translateY(400px);
169 -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
170 -moz-transition: opacity 1s, -moz-transform 0.5s 1s;
171 -ms-transition: opacity 1s, -ms-transform 0.5s 1s;
172 -o-transition: opacity 1s, -o-transform 0.5s 1s;
173 transition: opacity 1s, transform 0.5s 1s;
174 }
176 .impress-on-license .hint {
177 opacity: 1;
179 -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s;
180 -moz-transition: opacity 1s 5s, -moz-transform 0.5s;
181 -ms-transition: opacity 1s 5s, -ms-transform 0.5s;
182 -o-transition: opacity 1s 5s, -o-transform 0.5s;
183 transition: opacity 1s 5s, transform 0.5s;
185 -webkit-transform: translateY(0px);
186 -moz-transform: translateY(0px);
187 -ms-transform: translateY(0px);
188 -o-transform: translateY(0px);
189 transform: translateY(0px);
190 }
192 #midlabel {
193 font-size: 200px;
194 font-weight: 900;
195 font-family: 'Open Sans', Arial, sans-serif;
196 text-shadow: 8px 6px 12px black;
197 color: #F08020;
198 }
200 #title {
201 background-size: 100% 100%;
202 background-image: url(masterhinterbay.png);
203 border: none;
204 /*background-repeat: no-repeat;*/
205 /*background-attachment: fixed;*/
206 /*background-position: top;*/
207 }
209 #title h1 {
210 padding-left: 42px;
211 font-size: 76px;
212 font-weight: bold;
213 font-family: 'Open Sans', Arial, sans-serif;
214 position: relative;
215 bottom: -160px;
217 color: white;
218 text-shadow: 4px 3px 8px black;
219 }
221 #title h2 {
222 padding-top: 48px;
223 padding-left: 42px;
224 font-size: 64px;
225 font-weight: bold;
226 letter-spacing: 2px;
227 font-family: 'Open Sans', Arial, sans-serif;
228 position: relative;
229 bottom: -160px;
231 color: white;
232 text-shadow: 4px 3px 8px black;
233 }
235 #vidsrc {
236 width: 100%;
237 height: 100%;
238 }
240 #contents {
241 background-image: url('meefrauhand.svg');
242 background-position: 90% 80%;
243 background-repeat: no-repeat;
244 color: #202020;
245 }
247 #contents h1 {
248 padding-top: 32px;
249 padding-bottom: 48px;
250 font-size: 96px;
251 font-weight: bold;
252 font-family: 'Open Sans', Arial, sans-serif;
253 }
255 #contents ul {
256 font-size: 48px;
257 line-height: 64px;
258 padding-left: 96px;
259 }
261 #contents a {
262 color: inherit;
263 text-decoration: none;
264 padding: 0 0.1em;
265 border-radius: 0.2em;
266 background: rgba(220,220,220,0.5);
267 text-shadow: 0 0 0;
268 }
270 #topcat .smalltext, #tophybrid .smalltext {
271 font-size: 80px;
272 position: absolute;
273 top: -0.2em;
274 left: 1.7em;
276 -webkit-transform: translateZ(20px);
277 -moz-transform: translateZ(20px);
278 -ms-transform: translateZ(20px);
279 -o-transform: translateZ(20px);
280 transform: translateZ(20px);
281 }
283 #topcat h1 {
284 font-size: 180px;
285 line-height: 200px;
286 padding-top: 64px;
287 text-align: center;
289 -webkit-transform: translateZ(50px);
290 -moz-transform: translateZ(50px);
291 -ms-transform: translateZ(50px);
292 -o-transform: translateZ(50px);
293 transform: translateZ(50px);
294 }
296 #tophybrid .extratext {
297 width: 200px;
298 color: #808080;
299 font-size: 68px;
300 position: absolute;
301 top: 1.5em;
302 left: 10em;
303 text-align: right;
304 line-height: 64px;
305 }
307 #tophybrid h1 {
308 font-size: 180px;
309 line-height: 200px;
310 padding-top: 64px;
312 -webkit-transform: translateZ(50px);
313 -moz-transform: translateZ(50px);
314 -ms-transform: translateZ(50px);
315 -o-transform: translateZ(50px);
316 transform: translateZ(50px);
317 }
319 #topnative .smalltext {
320 font-size: 120px;
321 position: absolute;
322 top: 1.75em;
323 left: 0.6em;
325 -webkit-transform: translateZ(20px);
326 -moz-transform: translateZ(20px);
327 -ms-transform: translateZ(20px);
328 -o-transform: translateZ(20px);
329 transform: translateZ(20px);
330 }
332 #topnative h1 {
333 font-size: 200px;
334 position: relative;
335 top: -0.25em;
337 -webkit-transform: translateZ(50px);
338 -moz-transform: translateZ(50px);
339 -ms-transform: translateZ(50px);
340 -o-transform: translateZ(50px);
341 transform: translateZ(50px);
342 }
344 #topweb .smalltext {
345 font-size: 104px;
346 position: absolute;
347 top: 2em;
348 left: 1.4em;
350 -webkit-transform: translateZ(20px);
351 -moz-transform: translateZ(20px);
352 -ms-transform: translateZ(20px);
353 -o-transform: translateZ(20px);
354 transform: translateZ(20px);
355 }
357 #topweb h1 {
358 font-size: 200px;
359 position: relative;
360 top: -0.25em;
361 text-align: center;
363 -webkit-transform: translateZ(50px);
364 -moz-transform: translateZ(50px);
365 -ms-transform: translateZ(50px);
366 -o-transform: translateZ(50px);
367 transform: translateZ(50px);
368 }
370 #svgtizenarch1, #svgtizenarch2 {
371 width: 820px;
372 padding-top: 48px;
373 margin-left: auto;
374 margin-right: auto;
375 }
377 #specases .smalltext {
378 font-size: 92px;
379 line-height: 116px;
380 position: absolute;
381 top: 1.25em;
382 left: 2.5em;
384 -webkit-transform: translateZ(20px);
385 -moz-transform: translateZ(20px);
386 -ms-transform: translateZ(20px);
387 -o-transform: translateZ(20px);
388 transform: translateZ(20px);
389 }
391 #specases h1 {
392 font-size: 160px;
393 position: relative;
394 top: -.8em;
395 text-align: center;
397 -webkit-transform: translateZ(50px);
398 -moz-transform: translateZ(50px);
399 -ms-transform: translateZ(50px);
400 -o-transform: translateZ(50px);
401 transform: translateZ(50px);
402 }
404 #topchoose1 .smalltext {
405 font-size: 130px;
406 position: absolute;
407 top: 1.5em;
408 left: 1em;
410 -webkit-transform: translateZ(20px);
411 -moz-transform: translateZ(20px);
412 -ms-transform: translateZ(20px);
413 -o-transform: translateZ(20px);
414 transform: translateZ(20px);
415 }
417 #topchoose1 h1 {
418 font-size: 200px;
419 position: relative;
420 top: -0.25em;
421 text-align: center;
423 -webkit-transform: translateZ(50px);
424 -moz-transform: translateZ(50px);
425 -ms-transform: translateZ(50px);
426 -o-transform: translateZ(50px);
427 transform: translateZ(50px);
428 }
430 #topchoose2 a {
431 font-size: 64px;
432 position: relative;
433 top: 2em;
434 left: 1.4em;
435 }
437 #topwhy h1 {
438 font-size: 160px;
439 line-height: 150px;
440 position: relative;
441 top: -1em;
442 text-align: center;
444 -webkit-transform: translateZ(50px);
445 -moz-transform: translateZ(50px);
446 -ms-transform: translateZ(50px);
447 -o-transform: translateZ(50px);
448 transform: translateZ(50px);
449 }
451 blockquote {
452 text-align: justify;
453 font-weight: 300;
454 font-style: italic;
455 line-height: 1.2;
456 margin-left: 32px;
457 margin-right: 32px;
458 position: relative;
459 top: 3em;
460 }
462 blockquote .author {
463 display: block;
464 text-align: right;
465 padding: 0 40px;
466 font-weight: 600;
467 font-size: 36px;
468 }
470 #sdkstart h1, #sdkprovide h1, #sdkinteg h1, #sdkdemo h1 {
471 /*font-family: 'Open Sans', sans-serif;*/
472 /*font-weight: 900;*/
473 font-size: 200px;
475 -webkit-transform: translateZ(50px);
476 -moz-transform: translateZ(50px);
477 -ms-transform: translateZ(50px);
478 -o-transform: translateZ(50px);
479 transform: translateZ(50px);
480 }
482 #resources {
483 background-image: url('meegarbeit.svg');
484 background-position: 90% 70%;
485 background-repeat: no-repeat;
486 color: #202020;
487 }
489 #resources h1 {
490 padding-top: 32px;
491 padding-bottom: 48px;
492 font-size: 96px;
493 font-weight: bold;
494 font-family: 'Open Sans', Arial, sans-serif;
495 }
497 #resources ul {
498 font-size: 36px;
499 line-height: 44px;
500 padding-left: 64px;
501 }
503 #resources .buchtit {
504 text-decoration: underline;
505 }
507 #conclusion {
508 background-size: 100% 100%;
509 background-image: url(schlusshintergrund.png);
510 border: none;
511 /*background-repeat: no-repeat;*/
512 /*background-attachment: fixed;*/
513 /*background-position: top;*/
515 color: white;
516 text-shadow: 8px 6px 12px black;
517 }
519 #conclusion h1 {
520 padding-top: 64px;
521 padding-bottom: 96px;
522 font-size: 200px;
523 font-weight: bold;
524 font-family: 'Open Sans', Arial, sans-serif;
525 }
527 #conclusion h2 {
528 width: 600px;
529 padding-left: 360px;
530 font-size: 96px;
531 font-weight: bold;
532 font-family: 'Open Sans', Arial, sans-serif;
533 line-height: 100px;
534 }
536 #conclusion img {
537 float: left;
538 }
540 #overview { /* overview step */
541 z-index: -1;
542 padding: 0;
543 }
545 /* on overview step everything is visible */
546 .impress-on-overview .step {
547 opacity: 1;
548 cursor: pointer;
549 }
551 /*
552 * SLIDE STEP STYLES
553 *
554 * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
555 *
556 * ;)
557 */
559 .slide {
560 display: block;
562 width: 1200px;
563 height: 600px;
565 padding: 40px 60px;
567 border-radius: 20px;
569 background-color: white;
571 box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
572 border: 1px solid rgba(0, 0, 0, .3);
574 font-family: 'Open Sans', Arial, sans-serif;
576 color: rgb(102, 102, 102);
577 text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
579 font-size: 30px;
580 line-height: 36px;
582 letter-spacing: -1px;
583 }
585 .slide q {
586 display: block;
587 font-size: 50px;
588 line-height: 72px;
590 margin-top: 100px;
591 }
593 .slide q strong {
594 white-space: nowrap;
595 }
598 /* IMPRESS NOT SUPPORTED STYLES */
600 .fallback-message {
601 font-family: sans-serif;
602 line-height: 1.3;
604 display: none;
605 width: 780px;
606 padding: 10px 10px 0;
607 margin: 20px auto;
609 border-radius: 20px;
610 border: 1px solid #E4C652;
611 background: #EEDC94;
612 }
614 .fallback-message p {
615 margin-bottom: 10px;
616 }
618 .impress-disabled .step,
619 .impress-not-supported .step {
620 position: relative;
621 opacity: 1;
622 margin: 20px auto;
623 }
625 .impress-not-supported .fallback-message {
626 display: block;
627 }
629 #kitplethora {
630 padding-top: 100px;
631 text-align: center;
632 }
633 #kitplethora .webfmwork { }
634 #kitplethora .webfmwork .item {
635 display: block;
636 font-size: .8em;
637 opacity: .7;
638 position: absolute;
639 text-align: center;
640 width: 25%;
641 }
642 #kitplethora .webfmwork .fmwork-1 {
643 bottom: 240px;
644 left: 0px;
645 -moz-animation: item1 4s 0.5s infinite normal ease;
646 -webkit-animation: item1 4s 0.5s infinite normal ease;
647 -ms-animation: item1 4s 0.5s infinite normal ease;
648 }
649 @-moz-keyframes item1 {
650 0% { -moz-transform: rotate(10deg); left: 0px; }
651 50% { -moz-transform: rotate(-10deg); left: 10px; }
652 100% { -moz-transform: rotate(10deg); left: 0px; }
653 }
654 @-webkit-keyframes item1 {
655 0% { -webkit-transform: rotate(10deg); left: 0px; }
656 50% { -webkit-transform: rotate(-10deg); left: 10px; }
657 100% { -webkit-transform: rotate(10deg); left: 0px; }
658 }
659 @-ms-keyframes item1 {
660 0% { -ms-transform: rotate(10deg); left: 0px; }
661 50% { -ms-transform: rotate(-10deg); left: 10px; }
662 100% { -ms-transform: rotate(10deg); left: 0px; }
663 }
664 #kitplethora .webfmwork .fmwork-2 {
665 bottom: 290px;
666 left: 280px;
667 -moz-animation: item2 4s 0s infinite normal ease;
668 -webkit-animation: item2 4s 0s infinite normal ease;
669 -ms-animation: item2 4s 0s infinite normal ease;
670 }
671 @-moz-keyframes item2 {
672 0% { -moz-transform: rotate(-10deg); left: 280px; }
673 50% { -moz-transform: rotate(10deg); left: 260px; }
674 100% { -moz-transform: rotate(-10deg); left: 280px; }
675 }
676 @-webkit-keyframes item2 {
677 0% { -webkit-transform: rotate(-10deg); left: 280px; }
678 50% { -webkit-transform: rotate(10deg); left: 260px; }
679 100% { -webkit-transform: rotate(-10deg); left: 280px; }
680 }
681 @-ms-keyframes item2 {
682 0% { -ms-transform: rotate(-10deg); left: 280px; }
683 50% { -ms-transform: rotate(10deg); left: 260px; }
684 100% { -ms-transform: rotate(-10deg); left: 280px; }
685 }
686 #kitplethora .webfmwork .fmwork-3 {
687 bottom: 250px;
688 right: 350px;
689 -moz-animation: item3 4s 0.3s infinite normal ease;
690 -webkit-animation: item3 4s 0.3s infinite normal ease;
691 -ms-animation: item3 4s 0.3s infinite normal ease;
692 }
693 @-moz-keyframes item3 {
694 0% { -moz-transform: rotate(10deg); right: 350px; }
695 50% { -moz-transform: rotate(-10deg); right: 340px; }
696 100% { -moz-transform: rotate(10deg); right: 350px; }
697 }
698 @-webkit-keyframes item3 {
699 0% { -webkit-transform: rotate(10deg); right: 350px; }
700 50% { -webkit-transform: rotate(-10deg); right: 340px; }
701 100% { -webkit-transform: rotate(10deg); right: 350px; }
702 }
703 @-ms-keyframes item3 {
704 0% { -ms-transform: rotate(10deg); right: 350px; }
705 50% { -ms-transform: rotate(-10deg); right: 340px; }
706 100% { -ms-transform: rotate(10deg); right: 350px; }
707 }
708 #kitplethora .webfmwork .fmwork-4 {
709 bottom: 280px;
710 right: -10px;
711 -moz-animation: item4 4s 0.1s infinite normal ease;
712 -webkit-animation: item4 4s 0.1s infinite normal ease;
713 -ms-animation: item4 4s 0.1s infinite normal ease;
714 }
715 @-moz-keyframes item4 {
716 0% { -moz-transform: rotate(-10deg); right: -10px; }
717 50% { -moz-transform: rotate(10deg); right: 10px; }
718 100% { -moz-transform: rotate(-10deg); right: -10px; }
719 }
720 @-webkit-keyframes item4 {
721 0% { -webkit-transform: rotate(-10deg); right: -10px; }
722 50% { -webkit-transform: rotate(10deg); right: 10px; }
723 100% { -webkit-transform: rotate(-10deg); right: -10px; }
724 }
725 @-ms-keyframes item4 {
726 0% { -ms-transform: rotate(-10deg); right: -10px; }
727 50% { -ms-transform: rotate(10deg); right: 10px; }
728 100% { -ms-transform: rotate(-10deg); right: -10px; }
729 }
730 #kitplethora .webfmwork .fmwork-5 {
731 bottom: 140px;
732 left: 0px;
733 -moz-animation: item5 4s 2.1s infinite normal ease;
734 -webkit-animation: item5 4s 2.1s infinite normal ease;
735 -ms-animation: item5 4s 2.1s infinite normal ease;
736 }
737 @-moz-keyframes item5 {
738 0% { -moz-transform: rotate(10deg); left: 0px; }
739 50% { -moz-transform: rotate(-10deg); left: 10px; }
740 100% { -moz-transform: rotate(10deg); left: 0px; }
741 }
742 @-webkit-keyframes item5 {
743 0% { -webkit-transform: rotate(10deg); left: 0px; }
744 50% { -webkit-transform: rotate(-10deg); left: 10px; }
745 100% { -webkit-transform: rotate(10deg); left: 0px; }
746 }
747 @-ms-keyframes item5 {
748 0% { -ms-transform: rotate(10deg); left: 0px; }
749 50% { -ms-transform: rotate(-10deg); left: 10px; }
750 100% { -ms-transform: rotate(10deg); left: 0px; }
751 }
752 #kitplethora .webfmwork .fmwork-6 {
753 bottom: 190px;
754 left: 280px;
755 -moz-animation: item6 4s 0.6s infinite normal ease;
756 -webkit-animation: item6 4s 0.6s infinite normal ease;
757 -ms-animation: item6 4s 0.6s infinite normal ease;
758 }
759 @-moz-keyframes item6 {
760 0% { -moz-transform: rotate(-10deg); left: 280px; }
761 50% { -moz-transform: rotate(10deg); left: 260px; }
762 100% { -moz-transform: rotate(-10deg); left: 280px; }
763 }
764 @-webkit-keyframes item6 {
765 0% { -webkit-transform: rotate(-10deg); left: 280px; }
766 50% { -webkit-transform: rotate(10deg); left: 260px; }
767 100% { -webkit-transform: rotate(-10deg); left: 280px; }
768 }
769 @-ms-keyframes item6 {
770 0% { -ms-transform: rotate(-10deg); left: 280px; }
771 50% { -ms-transform: rotate(10deg); left: 260px; }
772 100% { -ms-transform: rotate(-10deg); left: 280px; }
773 }
774 #kitplethora .webfmwork .fmwork-7 {
775 bottom: 150px;
776 right: 250px;
777 -moz-animation: item7 5s 0.4s infinite normal ease;
778 -webkit-animation: item7 5s 0.4s infinite normal ease;
779 -ms-animation: item7 5s 0.4s infinite normal ease;
780 }
781 @-moz-keyframes item7 {
782 0% { -moz-transform: rotate(10deg); right: 250px; }
783 50% { -moz-transform: rotate(-10deg); right: 240px; }
784 100% { -moz-transform: rotate(10deg); right: 250px; }
785 }
786 @-webkit-keyframes item7 {
787 0% { -webkit-transform: rotate(10deg); right: 250px; }
788 50% { -webkit-transform: rotate(-10deg); right: 240px; }
789 100% { -webkit-transform: rotate(10deg); right: 250px; }
790 }
791 @-ms-keyframes item7 {
792 0% { -ms-transform: rotate(10deg); right: 250px; }
793 50% { -ms-transform: rotate(-10deg); right: 240px; }
794 100% { -ms-transform: rotate(10deg); right: 250px; }
795 }
796 #kitplethora .webfmwork .fmwork-8 {
797 bottom: 180px;
798 right: -10px;
799 -moz-animation: item8 4s 0.8s infinite normal ease;
800 -webkit-animation: item8 4s 0.8s infinite normal ease;
801 -ms-animation: item8 4s 0.8s infinite normal ease;
802 }
803 @-moz-keyframes item8 {
804 0% { -moz-transform: rotate(-10deg); right: -10px; }
805 50% { -moz-transform: rotate(10deg); right: 10px; }
806 100% { -moz-transform: rotate(-10deg); right: -10px; }
807 }
808 @-webkit-keyframes item8 {
809 0% { -webkit-transform: rotate(-10deg); right: -10px; }
810 50% { -webkit-transform: rotate(10deg); right: 10px; }
811 100% { -webkit-transform: rotate(-10deg); right: -10px; }
812 }
813 @-ms-keyframes item8 {
814 0% { -ms-transform: rotate(-10deg); right: -10px; }
815 50% { -ms-transform: rotate(10deg); right: 10px; }
816 100% { -ms-transform: rotate(-10deg); right: -10px; }
817 }
818 #kitplethora .webfmwork .fmwork-9 {
819 bottom: -40px;
820 left: -60px;
821 -moz-animation: item9 3.5s 0.2s infinite normal ease;
822 -webkit-animation: item9 3.5s 0.2s infinite normal ease;
823 -ms-animation: item9 3.5s 0.2s infinite normal ease;
824 }
825 @-moz-keyframes item9 {
826 0% { -moz-transform: rotate(10deg); left: 0px; }
827 50% { -moz-transform: rotate(-10deg); left: 10px; }
828 100% { -moz-transform: rotate(10deg); left: 0px; }
829 }
830 @-webkit-keyframes item9 {
831 0% { -webkit-transform: rotate(10deg); left: -60px; }
832 50% { -webkit-transform: rotate(-10deg); left: -50px; }
833 100% { -webkit-transform: rotate(10deg); left: -60px; }
834 }
835 @-ms-keyframes item9 {
836 0% { -ms-transform: rotate(10deg); left: 0px; }
837 50% { -ms-transform: rotate(-10deg); left: 10px; }
838 100% { -ms-transform: rotate(10deg); left: 0px; }
839 }
840 #kitplethora .webfmwork .fmwork-10 {
841 bottom: -90px;
842 left: 400px;
843 -moz-animation: item10 5s 0.4s infinite normal ease;
844 -webkit-animation: item10 5s 0.4s infinite normal ease;
845 -ms-animation: item10 5s 0.4s infinite normal ease;
846 }
847 @-moz-keyframes item10 {
848 0% { -moz-transform: rotate(-10deg); left: 400px; }
849 50% { -moz-transform: rotate(10deg); left: 380px; }
850 100% { -moz-transform: rotate(-10deg); left: 400px; }
851 }
852 @-webkit-keyframes item10 {
853 0% { -webkit-transform: rotate(-10deg); left: 400px; }
854 50% { -webkit-transform: rotate(10deg); left: 380px; }
855 100% { -webkit-transform: rotate(-10deg); left: 400px; }
856 }
857 @-ms-keyframes item10 {
858 0% { -ms-transform: rotate(-10deg); left: 400px; }
859 50% { -ms-transform: rotate(10deg); left: 380px; }
860 100% { -ms-transform: rotate(-10deg); left: 400px; }
861 }
862 #kitplethora .webfmwork .fmwork-11 {
863 bottom: -50px;
864 right: 250px;
865 -moz-animation: item11 4s 0.3s infinite normal ease;
866 -webkit-animation: item11 4s 0.3s infinite normal ease;
867 -ms-animation: item11 4s 0.3s infinite normal ease;
868 }
869 @-moz-keyframes item11 {
870 0% { -moz-transform: rotate(10deg); right: 250px; }
871 50% { -moz-transform: rotate(-10deg); right: 240px; }
872 100% { -moz-transform: rotate(10deg); right: 250px; }
873 }
874 @-webkit-keyframes item11 {
875 0% { -webkit-transform: rotate(10deg); right: 250px; }
876 50% { -webkit-transform: rotate(-10deg); right: 240px; }
877 100% { -webkit-transform: rotate(10deg); right: 250px; }
878 }
879 @-ms-keyframes item11 {
880 0% { -ms-transform: rotate(10deg); right: 250px; }
881 50% { -ms-transform: rotate(-10deg); right: 240px; }
882 100% { -ms-transform: rotate(10deg); right: 250px; }
883 }
884 #kitplethora .webfmwork .fmwork-12 {
885 bottom: -80px;
886 right: -10px;
887 -moz-animation: item12 4s 0 infinite normal ease;
888 -webkit-animation: item12 4s 0 infinite normal ease;
889 -ms-animation: item12 4s 0 infinite normal ease;
890 }
891 @-moz-keyframes item12 {
892 0% { -moz-transform: rotate(-10deg); right: -10px; }
893 50% { -moz-transform: rotate(10deg); right: 10px; }
894 100% { -moz-transform: rotate(-10deg); right: -10px; }
895 }
896 @-webkit-keyframes item12 {
897 0% { -webkit-transform: rotate(-10deg); right: -10px; }
898 50% { -webkit-transform: rotate(10deg); right: 10px; }
899 100% { -webkit-transform: rotate(-10deg); right: -10px; }
900 }
901 @-ms-keyframes item12 {
902 0% { -ms-transform: rotate(-10deg); right: -10px; }
903 50% { -ms-transform: rotate(10deg); right: 10px; }
904 100% { -ms-transform: rotate(-10deg); right: -10px; }
905 }
906 #kitplethora .webfmwork .fmwork-13 {
907 bottom: -140px;
908 left: 0px;
909 -moz-animation: item13 4s 0.5s infinite normal ease;
910 -webkit-animation: item13 4s 0.5s infinite normal ease;
911 -ms-animation: item13 4s 0.5s infinite normal ease;
912 }
913 @-moz-keyframes item13 {
914 0% { -moz-transform: rotate(10deg); left: 0px; }
915 50% { -moz-transform: rotate(-10deg); left: 10px; }
916 100% { -moz-transform: rotate(10deg); left: 0px; }
917 }
918 @-webkit-keyframes item13 {
919 0% { -webkit-transform: rotate(10deg); left: 0px; }
920 50% { -webkit-transform: rotate(-10deg); left: 10px; }
921 100% { -webkit-transform: rotate(10deg); left: 0px; }
922 }
923 @-ms-keyframes item13 {
924 0% { -ms-transform: rotate(10deg); left: 0px; }
925 50% { -ms-transform: rotate(-10deg); left: 10px; }
926 100% { -ms-transform: rotate(10deg); left: 0px; }
927 }
928 #kitplethora .webfmwork .fmwork-14 {
929 bottom: -190px;
930 left: 280px;
931 -moz-animation: item14 4s 0s infinite normal ease;
932 -webkit-animation: item14 4s 0s infinite normal ease;
933 -ms-animation: item14 4s 0s infinite normal ease;
934 }
935 @-moz-keyframes item14 {
936 0% { -moz-transform: rotate(-10deg); left: 280px; }
937 50% { -moz-transform: rotate(10deg); left: 260px; }
938 100% { -moz-transform: rotate(-10deg); left: 280px; }
939 }
940 @-webkit-keyframes item14 {
941 0% { -webkit-transform: rotate(-10deg); left: 280px; }
942 50% { -webkit-transform: rotate(10deg); left: 260px; }
943 100% { -webkit-transform: rotate(-10deg); left: 280px; }
944 }
945 @-ms-keyframes item14 {
946 0% { -ms-transform: rotate(-10deg); left: 280px; }
947 50% { -ms-transform: rotate(10deg); left: 260px; }
948 100% { -ms-transform: rotate(-10deg); left: 280px; }
949 }
950 #kitplethora .webfmwork .fmwork-15 {
951 bottom: -150px;
952 right: 320px;
953 -moz-animation: item15 3.5s 0.2s infinite normal ease;
954 -webkit-animation: item15 3.5s 0.2s infinite normal ease;
955 -ms-animation: item15 3.5s 0.2s infinite normal ease;
956 }
957 @-moz-keyframes item15 {
958 0% { -moz-transform: rotate(10deg); right: 320px; }
959 50% { -moz-transform: rotate(-10deg); right: 310px; }
960 100% { -moz-transform: rotate(10deg); right: 320px; }
961 }
962 @-webkit-keyframes item15 {
963 0% { -webkit-transform: rotate(10deg); right: 320px; }
964 50% { -webkit-transform: rotate(-10deg); right: 310px; }
965 100% { -webkit-transform: rotate(10deg); right: 320px; }
966 }
967 @-ms-keyframes item15 {
968 0% { -ms-transform: rotate(10deg); right: 320px; }
969 50% { -ms-transform: rotate(-10deg); right: 310px; }
970 100% { -ms-transform: rotate(10deg); right: 320px; }
971 }
972 #kitplethora .webfmwork .fmwork-16 {
973 bottom: -180px;
974 right: -10px;
975 -moz-animation: item16 5s 0.4s infinite normal ease;
976 -webkit-animation: item16 5s 0.4s infinite normal ease;
977 -ms-animation: item16 5s 0.4s infinite normal ease;
978 }
979 @-moz-keyframes item16 {
980 0% { -moz-transform: rotate(-10deg); right: -10px; }
981 50% { -moz-transform: rotate(10deg); right: 10px; }
982 100% { -moz-transform: rotate(-10deg); right: -10px; }
983 }
984 @-webkit-keyframes item16 {
985 0% { -webkit-transform: rotate(-10deg); right: -10px; }
986 50% { -webkit-transform: rotate(10deg); right: 10px; }
987 100% { -webkit-transform: rotate(-10deg); right: -10px; }
988 }
989 @-ms-keyframes item16 {
990 0% { -ms-transform: rotate(-10deg); right: -10px; }
991 50% { -ms-transform: rotate(10deg); right: 10px; }
992 100% { -ms-transform: rotate(-10deg); right: -10px; }
993 }
994 </style>
995 </head>
997 <!-- class is renamed once javascript detects browser support -->
998 <body class="impress-not-supported">
1000 <div class="fallback-message">
1001 <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>
1002 <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
1003 </div>
1005 <div id="impress">
1007 <div id="license" class="step slide" data-x="-1300" data-y="-1920">
1008 <p style="font-size: 48px; line-height: 56px;">Copyright © 2012
1009 Michael Schloh von Bennewitz <michael@schloh.com> Permission is
1010 granted to copy, distribute and/or modify this document under
1011 the terms of the GNU Free Documentation License, Version 1.3
1012 or any later version published by the Free Software Foundation;
1013 with no Invariant Sections, no Front-Cover Texts, and no
1014 Back-Cover Texts. A copy of the license is included in the
1015 document entitled “fdl-1.3.txt”</p>
1016 </div>
1018 <div id="title" class="step slide" data-x="0" data-y="-1920">
1019 <img src="mastervorderbay.png" width="65%" style="padding-left: 350px;" />
1020 <h1>Tizen Application Portability</h1>
1021 <h2>Michael Schloh von Bennewitz</h2>
1022 </div>
1024 <!--
1025 avconv -i <inputfile> -b:v 1200k -vcodec libx264 -pre slow -pre baseline -s hd480 -acodec libvo_aacenc -ab 128000 -g 30 <outputfile.mp4>
1026 avconv -i <inputfile> -b:v 1200k -vcodec libvpx -pre 360p -s hd480 -acodec libvorbis -ab 128000 -f webm -g 30 <outputfile.webm>
1027 ffmpeg -i <inputfile> -b:v 1200k -vcodec libtheora -s hd480 -acodec libvorbis -ab 128000 -g 30 <outputfile.ogv>
1028 -->
1029 <div id="vidful" class="step" data-x="1300" data-y="-1920">
1030 <!--<video id="vidsrc" src="tizportdev-768p.ogv" type='video/ogg; codecs="theora, vorbis"' autoplay loop controls />-->
1031 <video id="vidsrc" autoplay loop controls>
1032 <source src="tizportdev-768p.webm" type='video/webm; codecs="vp8, vorbis"' />
1033 <source src="tizportdev-768p.ogv" type='video/ogg; codecs="theora, vorbis"' />
1034 <source src="tizportdev-768p.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
1035 Video tag not supported. Download the video <a href="shouldlook.webm">here</a>.
1036 </video>
1037 <p>Example of correct display of this presentation</p>
1038 </div>
1040 <div id="contents" class="step slide" data-x="1300" data-y="-2600">
1041 <h1>Contents</h1>
1042 <ul>
1043 <li><a href="index.html#/topcat">Mobile App <b>Categories</b></a></li>
1044 <li><a href="index.html#/topnative"><b>Native</b> App Frameworks</a></li>
1045 <li><a href="index.html#/topweb"><b>Web</b> App Frameworks</a></li>
1046 <li><a href="index.html#/tophybrid"><b>Hybrid</b> App Frameworks</a></li>
1047 <li><a href="index.html#/sdkprovide">Tizen SDK <b>Provision</b></a></li>
1048 <li><a href="index.html#/sdkinteg">Tizen SDK <b>Integration</b></a></li>
1049 <!--<li>Web App Frameworks</li>
1050 <li>Hybrid Frameworks</li>
1051 <li>License Compatibility </li>
1052 <li>Tools and SDK Integration</li>
1053 <li>Portability Strategies</li>
1054 <li>Typical Workflows</li>
1055 <li>Demonstration</li>-->
1056 </ul>
1057 </div>
1059 <div id="topcat" class="step dark" data-x="800" data-y="-400" data-z="1000" data-scale="3">
1060 <span class="smalltext">Mobile Application</span>
1061 <h1>Categories</h1>
1062 </div>
1064 <div id="svgrich1" class="step dark" data-x="1200" data-y="-120" data-z="-1000" data-scale="0.125">
1065 <img src="richreach.svg" width="100%" />
1066 </div>
1068 <div id="topnative" class="step dark" data-x="200" data-y="-570" data-z="-1000" data-scale="0.3">
1069 <span class="smalltext">Development</span>
1070 <h1>Native App</h1>
1071 </div>
1073 <div id="picnative" class="step dark" data-x="800" data-y="-540" data-z="-1000" data-scale="0.2">
1074 <img src="quickmeme.png" width="100%" />
1075 </div>
1077 <div id="svgrich2" class="step dark" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
1078 <img src="appsnative.svg" width="100%" />
1079 </div>
1081 <div id="svgtizenarch1" class="step dark" data-x="-1400" data-y="-1024" data-z="-1000" data-scale="0.4">
1082 <img src="tizenarch.svg" width="100%" height="720px" />
1083 </div>
1085 <div id="svgrich3" class="step dark" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
1086 <img src="appsweb.svg" width="100%" />
1087 </div>
1089 <div id="topweb" class="step" data-x="-2800" data-y="-2200" data-z="0" data-rotate="90" data-scale="2">
1090 <span class="smalltext">Frameworks</span>
1091 <h1>Web App</h1>
1092 </div>
1094 <div id="kitplethora" class="step" data-x="-2755" data-y="-2320" data-z="-1000" data-rotate="90" data-scale="0.05">
1095 <q><b>JavaScript Libraries</b></q>
1096 <ul class="webfmwork">
1097 <li class="item fmwork-1" style="width: 120px; line-height: 40px;">jQuery Mobile</li>
1098 <li class="item fmwork-2" style="width: 120px; line-height: 40px;">Sencha Touch</li>
1099 <li class="item fmwork-3">DojoX</li>
1100 <li class="item fmwork-4">jQTouch</li>
1101 <li class="item fmwork-5">Glovebox</li>
1102 <li class="item fmwork-6">Lungo</li>
1103 <li class="item fmwork-7">Appmobi</li>
1104 <li class="item fmwork-8">Enyo</li>
1105 <li class="item fmwork-9">Appcraft</li>
1106 <li class="item fmwork-10">Wink</li>
1107 <li class="item fmwork-11">Xui</li>
1108 <li class="item fmwork-12">Joframe</li>
1109 <li class="item fmwork-13">Zepto</li>
1110 <li class="item fmwork-14">Monocross</li>
1111 <li class="item fmwork-15">Uranium</li>
1112 <li class="item fmwork-16">Sproutcore</li>
1113 <!-- <li class="item fmwork-17">Unify</li>
1114 <li class="item fmwork-18">Ripple</li>
1115 <li class="item fmwork-19">Ipfaces</li>
1116 <li class="item fmwork-20">Qtmobil</li>
1117 <li class="item fmwork-21">Phonegap</li>
1118 <li class="item fmwork-22">Titanium</li>
1119 <li class="item fmwork-23">Rhomobile</li>-->
1120 </ul>
1121 </div>
1123 <div id="specases" class="step" data-x="-2755" data-y="-3700" data-z="-1000" data-rotate="180" data-scale=".5">
1124 <span class="smalltext">HTML5Boilerplate Modernizr</span>
1125 <h1>Special Cases</h1>
1126 </div>
1128 <div id="topchoose1" class="step" data-x="-2755" data-y="-4550" data-z="-1000" data-rotate="180" data-scale="2">
1129 <span class="smalltext">from JS libs</span>
1130 <h1>Choosing</h1>
1131 </div>
1133 <div id="svgappflow" class="step" data-x="-2740" data-y="-4500" data-z="-1000" data-rotate="180" data-scale="0.1">
1134 <img src="newappflow.svg" width="100%" />
1135 </div>
1137 <div id="topchoose2" class="step" data-x="-2755" data-y="-4850" data-z="-1000" data-rotate="180" data-scale="2">
1138 <a target="_blank" href="http://www.markus-falk.com/mobile-frameworks-comparison-chart/">with Markus FALK's chart</a>
1139 </div>
1141 <div id="topwhy" class="step" data-x="-2755" data-y="-6250" data-z="-1000" data-rotate="180" data-scale="2">
1142 <h1>Why a Web Framework?</h1>
1143 </div>
1145 <div id="rasterwhy" class="step" data-x="-2755" data-y="-6250" data-z="-500" data-rotate="180" data-scale="2">
1146 <blockquote>“2012 will come to be known as the year of the web
1147 runtimes. Officially there is no native development. Tizen
1148 is an html5 affair only.”
1149 <span class="author">- Raster Man</span></blockquote>
1150 </div>
1152 <div id="tophybrid" class="step" data-x="1000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4">
1153 <span class="smalltext">Leveraging</span>
1154 <span class="extratext">Cordova Titanium Rhomobile</span>
1155 <h1>Hybrid Frameworks</h1>
1156 </div>
1158 <div id="svgrich4" class="step" data-x="-800" data-y="-7500" data-z="0" data-rotate="270" data-scale="2">
1159 <img src="appshybrid.svg" width="100%" />
1160 </div>
1162 <div id="svgtizenarch2" class="step" data-x="2000" data-y="-7500" data-z="0" data-rotate="360" data-scale="1">
1163 <img src="tizenarch.svg" width="100%" height="720px" />
1164 </div>
1166 <div id="sdkstart" class="step" data-x="6000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4">
1167 <h1>Tizen SDK</h1>
1168 </div>
1170 <div id="sdkprovide" class="step" data-x="6000" data-y="-4300" data-z="0" data-rotate="360" data-scale="4">
1171 <h1>Provision</h1>
1172 </div>
1174 <div id="sdkinteg" class="step" data-x="6000" data-y="-3600" data-z="0" data-rotate="360" data-scale="4">
1175 <h1>Integration</h1>
1176 </div>
1178 <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;">
1179 <h1>Demo</h1>
1180 </div>
1182 <div id="resources" class="step slide" data-x="0" data-y="-2600" data-rotate="0">
1183 <h1>Resources</h1>
1184 <ul>
1185 <li><span class="buchtit">jQuery Mobile: Up and Running</span>, Maximiliano FIRTMAN</li>
1186 <li><span class="buchtit">Mobile Design Pattern Gallery</span>, Theresa NEIL</li>
1187 <li><span class="buchtit">Beginning Phonegap</span>, Thomas MYER</li>
1188 <li><a href="http://docs.phonegap.com/">http://docs.phonegap.com/</a></li>
1189 <li><a href="http://www.modernizr.com/">http://www.modernizr.com/</a></li>
1190 <li><a href="http://www.dojotoolkit.org/">http://www.dojotoolkit.org/</a></li>
1191 <li><a href="http://www.jquerymobile.com/">http://www.jquerymobile.com/</a></li>
1192 <li><a href="http://www.sencha.com/products/touch/">http://www.sencha.com/products/touch/</a></li>
1193 <li><a href="ftp://ftp.europalab.com/pub/doc/lect/tizportdev/">ftp://ftp.europalab.com/pub/doc/lect/tizportdev/</a></li>
1194 </ul>
1195 </div>
1197 <div id="conclusion" class="step slide" data-x="-1300" data-y="-2600" data-rotate="0">
1198 <h1>Thank You!</h1>
1199 <img src="qrtizportdev.png" width="300px" />
1200 <h2><span style="color: aqua;">Tizen</span> <span style="color: orange;">Application</span> <span style="color: red;">Portability</span></h2>
1201 </div>
1203 <div id="overview" class="step" data-x="2500" data-y="-4000" data-scale="12" />
1205 <!--<div id="midlabel" class="step" data-x="3700" data-y="-3000" data-scale="6">
1206 <h1>Tizen</h1>
1207 </div>-->
1209 <div class="hint">
1210 <p>Use a spacebar or arrow keys to navigate</p>
1211 </div>
1212 <script>
1213 if ("ontouchstart" in document.documentElement) {
1214 document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
1215 }
1217 var videostep = document.getElementById("vidful");
1218 var videofile = document.getElementById("vidsrc");
1219 videostep.addEventListener("impress:stepenter", function() {
1220 videofile.play();
1221 }, false);
1222 videostep.addEventListener("impress:stepleave", function() {
1223 videofile.pause();
1224 }, false);
1225 </script>
1227 <script src="impress.js"></script>
1228 <script>impress().init();</script>
1230 </body>
1231 </html>
