tizenporta/index.html@ee91ce4e01a7
tizenporta/index.html
Wed, 02 May 2012 20:50:26 +0200
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 02 May 2012 20:50:26 +0200
- changeset 13
- ee91ce4e01a7
- child 14
- 5691915dae1d
- child 22
- 545df6643bcd
- permissions
- -rw-r--r--
Import slide deck and supporting materials for Tizen Portability lecture.
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=1024" />
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(250, 250, 250)), to(rgb(160, 160, 160)));
72 background: -webkit-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
73 background: -moz-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
74 background: -o-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
75 background: radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160));
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 /* STEP SPECIFIC STYLES */
140 /* hint on the first slide */
142 .hint {
143 position: fixed;
144 left: 0;
145 right: 0;
146 bottom: 200px;
148 background: rgba(0,0,0,0.5);
149 color: #EEE;
150 text-align: center;
152 font-size: 50px;
153 padding: 20px;
155 z-index: 100;
157 opacity: 0;
159 -webkit-transform: translateY(400px);
160 -moz-transform: translateY(400px);
161 -ms-transform: translateY(400px);
162 -o-transform: translateY(400px);
163 transform: translateY(400px);
165 -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
166 -moz-transition: opacity 1s, -moz-transform 0.5s 1s;
167 -ms-transition: opacity 1s, -ms-transform 0.5s 1s;
168 -o-transition: opacity 1s, -o-transform 0.5s 1s;
169 transition: opacity 1s, transform 0.5s 1s;
170 }
172 .impress-on-license .hint {
173 opacity: 1;
175 -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s;
176 -moz-transition: opacity 1s 5s, -moz-transform 0.5s;
177 -ms-transition: opacity 1s 5s, -ms-transform 0.5s;
178 -o-transition: opacity 1s 5s, -o-transform 0.5s;
179 transition: opacity 1s 5s, transform 0.5s;
181 -webkit-transform: translateY(0px);
182 -moz-transform: translateY(0px);
183 -ms-transform: translateY(0px);
184 -o-transform: translateY(0px);
185 transform: translateY(0px);
186 }
188 #midlabel {
189 font-size: 200px;
190 font-weight: 900;
191 font-family: 'Open Sans', Arial, sans-serif;
192 text-shadow: 8px 6px 12px black;
193 color: #F08020;
194 }
196 #title {
197 background-size: 100% 100%;
198 background-image: url(masterhinterbay.png);
199 background-repeat: no-repeat;
200 background-attachment: fixed;
201 background-position: top;
202 }
204 #title h1 {
205 padding-left: 42px;
206 font-size: 76px;
207 font-weight: bold;
208 font-family: 'Open Sans', Arial, sans-serif;
209 position: relative;
210 bottom: -160px;
212 color: white;
213 text-shadow: 4px 3px 8px black;
214 }
216 #title h2 {
217 padding-top: 48px;
218 padding-left: 42px;
219 font-size: 64px;
220 font-weight: bold;
221 letter-spacing: 2px;
222 font-family: 'Open Sans', Arial, sans-serif;
223 position: relative;
224 bottom: -160px;
226 color: white;
227 text-shadow: 4px 3px 8px black;
228 }
230 #contents {
231 background-image: url('meefrauhand.svg');
232 background-position: 90% 80%;
233 background-repeat: no-repeat;
234 color: #202020;
235 }
237 #contents h1 {
238 padding-top: 32px;
239 padding-bottom: 48px;
240 font-size: 96px;
241 font-weight: bold;
242 font-family: 'Open Sans', Arial, sans-serif;
243 }
245 #contents ul {
246 font-size: 48px;
247 line-height: 64px;
248 padding-left: 96px;
249 }
251 #topcat .smalltext, #tophybrid .smalltext {
252 font-size: 80px;
253 position: absolute;
254 top: -0.2em;
255 left: 1.7em;
257 -webkit-transform: translateZ(20px);
258 -moz-transform: translateZ(20px);
259 -ms-transform: translateZ(20px);
260 -o-transform: translateZ(20px);
261 transform: translateZ(20px);
262 }
264 #topcat h1 {
265 font-size: 180px;
266 line-height: 200px;
267 padding-top: 64px;
268 text-align: center;
270 -webkit-transform: translateZ(50px);
271 -moz-transform: translateZ(50px);
272 -ms-transform: translateZ(50px);
273 -o-transform: translateZ(50px);
274 transform: translateZ(50px);
275 }
277 #tophybrid h1 {
278 font-size: 180px;
279 line-height: 200px;
280 padding-top: 64px;
282 -webkit-transform: translateZ(50px);
283 -moz-transform: translateZ(50px);
284 -ms-transform: translateZ(50px);
285 -o-transform: translateZ(50px);
286 transform: translateZ(50px);
287 }
289 #topnative .smalltext {
290 font-size: 120px;
291 position: absolute;
292 top: 1.75em;
293 left: 0.6em;
295 -webkit-transform: translateZ(20px);
296 -moz-transform: translateZ(20px);
297 -ms-transform: translateZ(20px);
298 -o-transform: translateZ(20px);
299 transform: translateZ(20px);
300 }
302 #topnative h1 {
303 font-size: 200px;
304 position: relative;
305 top: -0.25em;
307 -webkit-transform: translateZ(50px);
308 -moz-transform: translateZ(50px);
309 -ms-transform: translateZ(50px);
310 -o-transform: translateZ(50px);
311 transform: translateZ(50px);
312 }
314 #topnative:not(.active) {
315 opacity: 0;
316 }
318 #topnative:is(.active) {
319 opacity: 1;
320 }
322 #topweb .smalltext {
323 font-size: 104px;
324 position: absolute;
325 top: 2em;
326 left: 1.4em;
328 -webkit-transform: translateZ(20px);
329 -moz-transform: translateZ(20px);
330 -ms-transform: translateZ(20px);
331 -o-transform: translateZ(20px);
332 transform: translateZ(20px);
333 }
335 #topweb h1 {
336 font-size: 200px;
337 position: relative;
338 top: -0.25em;
339 text-align: center;
341 -webkit-transform: translateZ(50px);
342 -moz-transform: translateZ(50px);
343 -ms-transform: translateZ(50px);
344 -o-transform: translateZ(50px);
345 transform: translateZ(50px);
346 }
348 #svgrich1:not(.active) {
349 opacity: 0;
350 }
352 #svgrich1:is(.active) {
353 opacity: 1;
354 }
356 /*#svgtizenarch1:not(.active) {
357 opacity: 0;
358 }
360 #svgtizenarch1:is(.active) {
361 opacity: 1;
362 }*/
364 #svgtizenarch1, #svgtizenarch2 {
365 width: 820px;
366 padding-top: 48px;
367 margin-left: auto;
368 margin-right: auto;
369 }
371 #svgrich2:not(.active) {
372 opacity: 0;
373 }
375 #svgrich2:is(.active) {
376 opacity: 1;
377 }
379 #svgrich3:not(.active) {
380 opacity: 0;
381 }
383 #svgrich3:is(.active) {
384 opacity: 1;
385 }
387 #kitplethora:not(.active) {
388 opacity: 0;
389 }
391 #kitplethora:is(.active) {
392 opacity: 1;
393 }
395 #svgappflow:not(.active) {
396 opacity: 0;
397 }
399 #svgappflow:is(.active) {
400 opacity: 1;
401 }
403 #topchoose1 .smalltext {
404 font-size: 130px;
405 position: absolute;
406 top: 1.5em;
407 left: 1em;
409 -webkit-transform: translateZ(20px);
410 -moz-transform: translateZ(20px);
411 -ms-transform: translateZ(20px);
412 -o-transform: translateZ(20px);
413 transform: translateZ(20px);
414 }
416 #topchoose1 h1 {
417 font-size: 200px;
418 position: relative;
419 top: -0.25em;
420 text-align: center;
422 -webkit-transform: translateZ(50px);
423 -moz-transform: translateZ(50px);
424 -ms-transform: translateZ(50px);
425 -o-transform: translateZ(50px);
426 transform: translateZ(50px);
427 }
429 #topchoose2:not(.active) {
430 opacity: 0;
431 }
433 #topchoose2:is(.active) {
434 opacity: 1;
435 }
437 #topchoose2 a {
438 font-size: 64px;
439 position: relative;
440 top: 2em;
441 left: 1.4em;
442 }
444 #topwhy h1 {
445 font-size: 160px;
446 line-height: 150px;
447 position: relative;
448 top: -1em;
449 text-align: center;
451 -webkit-transform: translateZ(50px);
452 -moz-transform: translateZ(50px);
453 -ms-transform: translateZ(50px);
454 -o-transform: translateZ(50px);
455 transform: translateZ(50px);
456 }
458 blockquote {
459 text-align: justify;
460 font-weight: 300;
461 font-style: italic;
462 line-height: 1.2;
463 margin-left: 72px;
464 margin-right: 72px;
465 position: relative;
466 top: 3.5em;
467 }
469 blockquote .author {
470 display: block;
471 text-align: right;
472 padding: 0 40px;
473 font-weight: 600;
474 font-size: 36px;
475 }
477 #sdkstart h1, #sdkprovide h1, #sdkinteg h1, #sdkdemo h1 {
478 /*font-family: 'Open Sans', sans-serif;*/
479 /*font-weight: 900;*/
480 font-size: 200px;
482 -webkit-transform: translateZ(50px);
483 -moz-transform: translateZ(50px);
484 -ms-transform: translateZ(50px);
485 -o-transform: translateZ(50px);
486 transform: translateZ(50px);
487 }
489 #resources {
490 background-image: url('meegarbeit.svg');
491 background-position: 90% 80%;
492 background-repeat: no-repeat;
493 }
495 #resources h1 {
496 padding-top: 32px;
497 padding-bottom: 48px;
498 font-size: 96px;
499 font-weight: bold;
500 font-family: 'Open Sans', Arial, sans-serif;
501 }
503 #resources ul {
504 font-size: 36px;
505 line-height: 52px;
506 padding-left: 64px;
507 }
509 #resources .ecrivain {
510 text-decoration: underline;
511 }
513 #conclusion {
514 background-image: url('qrtizportdev.png');
515 background-size: 300px 300px;
516 background-position: 10% 95%;
517 background-repeat: no-repeat;
518 }
520 #conclusion h1 {
521 padding-top: 64px;
522 text-align: center;
523 padding-bottom: 96px;
524 font-size: 200px;
525 font-weight: bold;
526 font-family: 'Open Sans', Arial, sans-serif;
527 }
529 #conclusion h2 {
530 text-align: center;
531 font-size: 72px;
532 font-weight: bold;
533 font-family: 'Open Sans', Arial, sans-serif;
534 }
536 /* overview step */
538 #overview {
539 z-index: -1;
540 padding: 0;
541 }
543 /* on overview step everything is visible */
545 .impress-on-overview .step {
546 opacity: 1;
547 cursor: pointer;
548 }
550 /*
551 * SLIDE STEP STYLES
552 *
553 * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
554 *
555 * ;)
556 */
558 .slide {
559 display: block;
561 width: 1200px;
562 height: 600px;
564 padding: 40px 60px;
566 border-radius: 10px;
568 background-color: white;
570 box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
571 border: 1px solid rgba(0, 0, 0, .3);
573 font-family: 'Open Sans', Arial, sans-serif;
575 color: rgb(102, 102, 102);
576 text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
578 font-size: 30px;
579 line-height: 36px;
581 letter-spacing: -1px;
582 }
584 .slide q {
585 display: block;
586 font-size: 50px;
587 line-height: 72px;
589 margin-top: 100px;
590 }
592 .slide q strong {
593 white-space: nowrap;
594 }
597 /* IMPRESS NOT SUPPORTED STYLES */
599 .fallback-message {
600 font-family: sans-serif;
601 line-height: 1.3;
603 display: none;
604 width: 780px;
605 padding: 10px 10px 0;
606 margin: 20px auto;
608 border-radius: 10px;
609 border: 1px solid #E4C652;
610 background: #EEDC94;
611 }
613 .fallback-message p {
614 margin-bottom: 10px;
615 }
617 .impress-disabled .step,
618 .impress-not-supported .step {
619 position: relative;
620 opacity: 1;
621 margin: 20px auto;
622 }
624 .impress-not-supported .fallback-message {
625 display: block;
626 }
628 #kitplethora {
629 padding-top: 100px;
630 text-align: center;
631 }
632 #kitplethora .webfmwork { }
633 #kitplethora .webfmwork .item {
634 display: block;
635 font-size: .8em;
636 opacity: .7;
637 position: absolute;
638 text-align: center;
639 width: 25%;
640 }
641 #kitplethora .webfmwork .fmwork-1 {
642 bottom: 240px;
643 left: 0px;
644 -moz-animation: item1 4s 0.5s infinite normal ease;
645 -webkit-animation: item1 4s 0.5s infinite normal ease;
646 -ms-animation: item1 4s 0.5s infinite normal ease;
647 }
648 @-moz-keyframes item1 {
649 0% { -moz-transform: rotate(10deg); left: 0px; }
650 50% { -moz-transform: rotate(-10deg); left: 10px; }
651 100% { -moz-transform: rotate(10deg); left: 0px; }
652 }
653 @-webkit-keyframes item1 {
654 0% { -webkit-transform: rotate(10deg); left: 0px; }
655 50% { -webkit-transform: rotate(-10deg); left: 10px; }
656 100% { -webkit-transform: rotate(10deg); left: 0px; }
657 }
658 @-ms-keyframes item1 {
659 0% { -ms-transform: rotate(10deg); left: 0px; }
660 50% { -ms-transform: rotate(-10deg); left: 10px; }
661 100% { -ms-transform: rotate(10deg); left: 0px; }
662 }
663 #kitplethora .webfmwork .fmwork-2 {
664 bottom: 290px;
665 left: 280px;
666 -moz-animation: item2 4s 0s infinite normal ease;
667 -webkit-animation: item2 4s 0s infinite normal ease;
668 -ms-animation: item2 4s 0s infinite normal ease;
669 }
670 @-moz-keyframes item2 {
671 0% { -moz-transform: rotate(-10deg); left: 280px; }
672 50% { -moz-transform: rotate(10deg); left: 260px; }
673 100% { -moz-transform: rotate(-10deg); left: 280px; }
674 }
675 @-webkit-keyframes item2 {
676 0% { -webkit-transform: rotate(-10deg); left: 280px; }
677 50% { -webkit-transform: rotate(10deg); left: 260px; }
678 100% { -webkit-transform: rotate(-10deg); left: 280px; }
679 }
680 @-ms-keyframes item2 {
681 0% { -ms-transform: rotate(-10deg); left: 280px; }
682 50% { -ms-transform: rotate(10deg); left: 260px; }
683 100% { -ms-transform: rotate(-10deg); left: 280px; }
684 }
685 #kitplethora .webfmwork .fmwork-3 {
686 bottom: 250px;
687 right: 350px;
688 -moz-animation: item3 4s 0.3s infinite normal ease;
689 -webkit-animation: item3 4s 0.3s infinite normal ease;
690 -ms-animation: item3 4s 0.3s infinite normal ease;
691 }
692 @-moz-keyframes item3 {
693 0% { -moz-transform: rotate(10deg); right: 350px; }
694 50% { -moz-transform: rotate(-10deg); right: 340px; }
695 100% { -moz-transform: rotate(10deg); right: 350px; }
696 }
697 @-webkit-keyframes item3 {
698 0% { -webkit-transform: rotate(10deg); right: 350px; }
699 50% { -webkit-transform: rotate(-10deg); right: 340px; }
700 100% { -webkit-transform: rotate(10deg); right: 350px; }
701 }
702 @-ms-keyframes item3 {
703 0% { -ms-transform: rotate(10deg); right: 350px; }
704 50% { -ms-transform: rotate(-10deg); right: 340px; }
705 100% { -ms-transform: rotate(10deg); right: 350px; }
706 }
707 #kitplethora .webfmwork .fmwork-4 {
708 bottom: 280px;
709 right: -10px;
710 -moz-animation: item4 4s 0.1s infinite normal ease;
711 -webkit-animation: item4 4s 0.1s infinite normal ease;
712 -ms-animation: item4 4s 0.1s infinite normal ease;
713 }
714 @-moz-keyframes item4 {
715 0% { -moz-transform: rotate(-10deg); right: -10px; }
716 50% { -moz-transform: rotate(10deg); right: 10px; }
717 100% { -moz-transform: rotate(-10deg); right: -10px; }
718 }
719 @-webkit-keyframes item4 {
720 0% { -webkit-transform: rotate(-10deg); right: -10px; }
721 50% { -webkit-transform: rotate(10deg); right: 10px; }
722 100% { -webkit-transform: rotate(-10deg); right: -10px; }
723 }
724 @-ms-keyframes item4 {
725 0% { -ms-transform: rotate(-10deg); right: -10px; }
726 50% { -ms-transform: rotate(10deg); right: 10px; }
727 100% { -ms-transform: rotate(-10deg); right: -10px; }
728 }
729 #kitplethora .webfmwork .fmwork-5 {
730 bottom: 140px;
731 left: 0px;
732 -moz-animation: item5 4s 2.1s infinite normal ease;
733 -webkit-animation: item5 4s 2.1s infinite normal ease;
734 -ms-animation: item5 4s 2.1s infinite normal ease;
735 }
736 @-moz-keyframes item5 {
737 0% { -moz-transform: rotate(10deg); left: 0px; }
738 50% { -moz-transform: rotate(-10deg); left: 10px; }
739 100% { -moz-transform: rotate(10deg); left: 0px; }
740 }
741 @-webkit-keyframes item5 {
742 0% { -webkit-transform: rotate(10deg); left: 0px; }
743 50% { -webkit-transform: rotate(-10deg); left: 10px; }
744 100% { -webkit-transform: rotate(10deg); left: 0px; }
745 }
746 @-ms-keyframes item5 {
747 0% { -ms-transform: rotate(10deg); left: 0px; }
748 50% { -ms-transform: rotate(-10deg); left: 10px; }
749 100% { -ms-transform: rotate(10deg); left: 0px; }
750 }
751 #kitplethora .webfmwork .fmwork-6 {
752 bottom: 190px;
753 left: 280px;
754 -moz-animation: item6 4s 0.6s infinite normal ease;
755 -webkit-animation: item6 4s 0.6s infinite normal ease;
756 -ms-animation: item6 4s 0.6s infinite normal ease;
757 }
758 @-moz-keyframes item6 {
759 0% { -moz-transform: rotate(-10deg); left: 280px; }
760 50% { -moz-transform: rotate(10deg); left: 260px; }
761 100% { -moz-transform: rotate(-10deg); left: 280px; }
762 }
763 @-webkit-keyframes item6 {
764 0% { -webkit-transform: rotate(-10deg); left: 280px; }
765 50% { -webkit-transform: rotate(10deg); left: 260px; }
766 100% { -webkit-transform: rotate(-10deg); left: 280px; }
767 }
768 @-ms-keyframes item6 {
769 0% { -ms-transform: rotate(-10deg); left: 280px; }
770 50% { -ms-transform: rotate(10deg); left: 260px; }
771 100% { -ms-transform: rotate(-10deg); left: 280px; }
772 }
773 #kitplethora .webfmwork .fmwork-7 {
774 bottom: 150px;
775 right: 250px;
776 -moz-animation: item7 5s 0.4s infinite normal ease;
777 -webkit-animation: item7 5s 0.4s infinite normal ease;
778 -ms-animation: item7 5s 0.4s infinite normal ease;
779 }
780 @-moz-keyframes item7 {
781 0% { -moz-transform: rotate(10deg); right: 250px; }
782 50% { -moz-transform: rotate(-10deg); right: 240px; }
783 100% { -moz-transform: rotate(10deg); right: 250px; }
784 }
785 @-webkit-keyframes item7 {
786 0% { -webkit-transform: rotate(10deg); right: 250px; }
787 50% { -webkit-transform: rotate(-10deg); right: 240px; }
788 100% { -webkit-transform: rotate(10deg); right: 250px; }
789 }
790 @-ms-keyframes item7 {
791 0% { -ms-transform: rotate(10deg); right: 250px; }
792 50% { -ms-transform: rotate(-10deg); right: 240px; }
793 100% { -ms-transform: rotate(10deg); right: 250px; }
794 }
795 #kitplethora .webfmwork .fmwork-8 {
796 bottom: 180px;
797 right: -10px;
798 -moz-animation: item8 4s 0.8s infinite normal ease;
799 -webkit-animation: item8 4s 0.8s infinite normal ease;
800 -ms-animation: item8 4s 0.8s infinite normal ease;
801 }
802 @-moz-keyframes item8 {
803 0% { -moz-transform: rotate(-10deg); right: -10px; }
804 50% { -moz-transform: rotate(10deg); right: 10px; }
805 100% { -moz-transform: rotate(-10deg); right: -10px; }
806 }
807 @-webkit-keyframes item8 {
808 0% { -webkit-transform: rotate(-10deg); right: -10px; }
809 50% { -webkit-transform: rotate(10deg); right: 10px; }
810 100% { -webkit-transform: rotate(-10deg); right: -10px; }
811 }
812 @-ms-keyframes item8 {
813 0% { -ms-transform: rotate(-10deg); right: -10px; }
814 50% { -ms-transform: rotate(10deg); right: 10px; }
815 100% { -ms-transform: rotate(-10deg); right: -10px; }
816 }
817 #kitplethora .webfmwork .fmwork-9 {
818 bottom: -40px;
819 left: -60px;
820 -moz-animation: item9 3.5s 0.2s infinite normal ease;
821 -webkit-animation: item9 3.5s 0.2s infinite normal ease;
822 -ms-animation: item9 3.5s 0.2s infinite normal ease;
823 }
824 @-moz-keyframes item9 {
825 0% { -moz-transform: rotate(10deg); left: 0px; }
826 50% { -moz-transform: rotate(-10deg); left: 10px; }
827 100% { -moz-transform: rotate(10deg); left: 0px; }
828 }
829 @-webkit-keyframes item9 {
830 0% { -webkit-transform: rotate(10deg); left: -60px; }
831 50% { -webkit-transform: rotate(-10deg); left: -50px; }
832 100% { -webkit-transform: rotate(10deg); left: -60px; }
833 }
834 @-ms-keyframes item9 {
835 0% { -ms-transform: rotate(10deg); left: 0px; }
836 50% { -ms-transform: rotate(-10deg); left: 10px; }
837 100% { -ms-transform: rotate(10deg); left: 0px; }
838 }
839 #kitplethora .webfmwork .fmwork-10 {
840 bottom: -90px;
841 left: 400px;
842 -moz-animation: item10 5s 0.4s infinite normal ease;
843 -webkit-animation: item10 5s 0.4s infinite normal ease;
844 -ms-animation: item10 5s 0.4s infinite normal ease;
845 }
846 @-moz-keyframes item10 {
847 0% { -moz-transform: rotate(-10deg); left: 400px; }
848 50% { -moz-transform: rotate(10deg); left: 380px; }
849 100% { -moz-transform: rotate(-10deg); left: 400px; }
850 }
851 @-webkit-keyframes item10 {
852 0% { -webkit-transform: rotate(-10deg); left: 400px; }
853 50% { -webkit-transform: rotate(10deg); left: 380px; }
854 100% { -webkit-transform: rotate(-10deg); left: 400px; }
855 }
856 @-ms-keyframes item10 {
857 0% { -ms-transform: rotate(-10deg); left: 400px; }
858 50% { -ms-transform: rotate(10deg); left: 380px; }
859 100% { -ms-transform: rotate(-10deg); left: 400px; }
860 }
861 #kitplethora .webfmwork .fmwork-11 {
862 bottom: -50px;
863 right: 250px;
864 -moz-animation: item11 4s 0.3s infinite normal ease;
865 -webkit-animation: item11 4s 0.3s infinite normal ease;
866 -ms-animation: item11 4s 0.3s infinite normal ease;
867 }
868 @-moz-keyframes item11 {
869 0% { -moz-transform: rotate(10deg); right: 250px; }
870 50% { -moz-transform: rotate(-10deg); right: 240px; }
871 100% { -moz-transform: rotate(10deg); right: 250px; }
872 }
873 @-webkit-keyframes item11 {
874 0% { -webkit-transform: rotate(10deg); right: 250px; }
875 50% { -webkit-transform: rotate(-10deg); right: 240px; }
876 100% { -webkit-transform: rotate(10deg); right: 250px; }
877 }
878 @-ms-keyframes item11 {
879 0% { -ms-transform: rotate(10deg); right: 250px; }
880 50% { -ms-transform: rotate(-10deg); right: 240px; }
881 100% { -ms-transform: rotate(10deg); right: 250px; }
882 }
883 #kitplethora .webfmwork .fmwork-12 {
884 bottom: -80px;
885 right: -10px;
886 -moz-animation: item12 4s 0 infinite normal ease;
887 -webkit-animation: item12 4s 0 infinite normal ease;
888 -ms-animation: item12 4s 0 infinite normal ease;
889 }
890 @-moz-keyframes item12 {
891 0% { -moz-transform: rotate(-10deg); right: -10px; }
892 50% { -moz-transform: rotate(10deg); right: 10px; }
893 100% { -moz-transform: rotate(-10deg); right: -10px; }
894 }
895 @-webkit-keyframes item12 {
896 0% { -webkit-transform: rotate(-10deg); right: -10px; }
897 50% { -webkit-transform: rotate(10deg); right: 10px; }
898 100% { -webkit-transform: rotate(-10deg); right: -10px; }
899 }
900 @-ms-keyframes item12 {
901 0% { -ms-transform: rotate(-10deg); right: -10px; }
902 50% { -ms-transform: rotate(10deg); right: 10px; }
903 100% { -ms-transform: rotate(-10deg); right: -10px; }
904 }
905 #kitplethora .webfmwork .fmwork-13 {
906 bottom: -140px;
907 left: 0px;
908 -moz-animation: item13 4s 0.5s infinite normal ease;
909 -webkit-animation: item13 4s 0.5s infinite normal ease;
910 -ms-animation: item13 4s 0.5s infinite normal ease;
911 }
912 @-moz-keyframes item13 {
913 0% { -moz-transform: rotate(10deg); left: 0px; }
914 50% { -moz-transform: rotate(-10deg); left: 10px; }
915 100% { -moz-transform: rotate(10deg); left: 0px; }
916 }
917 @-webkit-keyframes item13 {
918 0% { -webkit-transform: rotate(10deg); left: 0px; }
919 50% { -webkit-transform: rotate(-10deg); left: 10px; }
920 100% { -webkit-transform: rotate(10deg); left: 0px; }
921 }
922 @-ms-keyframes item13 {
923 0% { -ms-transform: rotate(10deg); left: 0px; }
924 50% { -ms-transform: rotate(-10deg); left: 10px; }
925 100% { -ms-transform: rotate(10deg); left: 0px; }
926 }
927 #kitplethora .webfmwork .fmwork-14 {
928 bottom: -190px;
929 left: 280px;
930 -moz-animation: item14 4s 0s infinite normal ease;
931 -webkit-animation: item14 4s 0s infinite normal ease;
932 -ms-animation: item14 4s 0s infinite normal ease;
933 }
934 @-moz-keyframes item14 {
935 0% { -moz-transform: rotate(-10deg); left: 280px; }
936 50% { -moz-transform: rotate(10deg); left: 260px; }
937 100% { -moz-transform: rotate(-10deg); left: 280px; }
938 }
939 @-webkit-keyframes item14 {
940 0% { -webkit-transform: rotate(-10deg); left: 280px; }
941 50% { -webkit-transform: rotate(10deg); left: 260px; }
942 100% { -webkit-transform: rotate(-10deg); left: 280px; }
943 }
944 @-ms-keyframes item14 {
945 0% { -ms-transform: rotate(-10deg); left: 280px; }
946 50% { -ms-transform: rotate(10deg); left: 260px; }
947 100% { -ms-transform: rotate(-10deg); left: 280px; }
948 }
949 #kitplethora .webfmwork .fmwork-15 {
950 bottom: -150px;
951 right: 320px;
952 -moz-animation: item15 3.5s 0.2s infinite normal ease;
953 -webkit-animation: item15 3.5s 0.2s infinite normal ease;
954 -ms-animation: item15 3.5s 0.2s infinite normal ease;
955 }
956 @-moz-keyframes item15 {
957 0% { -moz-transform: rotate(10deg); right: 320px; }
958 50% { -moz-transform: rotate(-10deg); right: 310px; }
959 100% { -moz-transform: rotate(10deg); right: 320px; }
960 }
961 @-webkit-keyframes item15 {
962 0% { -webkit-transform: rotate(10deg); right: 320px; }
963 50% { -webkit-transform: rotate(-10deg); right: 310px; }
964 100% { -webkit-transform: rotate(10deg); right: 320px; }
965 }
966 @-ms-keyframes item15 {
967 0% { -ms-transform: rotate(10deg); right: 320px; }
968 50% { -ms-transform: rotate(-10deg); right: 310px; }
969 100% { -ms-transform: rotate(10deg); right: 320px; }
970 }
971 #kitplethora .webfmwork .fmwork-16 {
972 bottom: -180px;
973 right: -10px;
974 -moz-animation: item16 5s 0.4s infinite normal ease;
975 -webkit-animation: item16 5s 0.4s infinite normal ease;
976 -ms-animation: item16 5s 0.4s infinite normal ease;
977 }
978 @-moz-keyframes item16 {
979 0% { -moz-transform: rotate(-10deg); right: -10px; }
980 50% { -moz-transform: rotate(10deg); right: 10px; }
981 100% { -moz-transform: rotate(-10deg); right: -10px; }
982 }
983 @-webkit-keyframes item16 {
984 0% { -webkit-transform: rotate(-10deg); right: -10px; }
985 50% { -webkit-transform: rotate(10deg); right: 10px; }
986 100% { -webkit-transform: rotate(-10deg); right: -10px; }
987 }
988 @-ms-keyframes item16 {
989 0% { -ms-transform: rotate(-10deg); right: -10px; }
990 50% { -ms-transform: rotate(10deg); right: 10px; }
991 100% { -ms-transform: rotate(-10deg); right: -10px; }
992 }
993 </style>
994 </head>
996 <!-- class is renamed once javascript detects browser support -->
997 <body class="impress-not-supported">
999 <div class="fallback-message">
1000 <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>
1001 <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
1002 </div>
1004 <div id="impress">
1006 <div id="license" class="step slide" data-x="-1300" data-y="-1920">
1007 <p style="font-size: 48px; line-height: 56px;">Copyright © 2012
1008 Michael Schloh von Bennewitz <michael@schloh.com> Permission is
1009 granted to copy, distribute and/or modify this document under
1010 the terms of the GNU Free Documentation License, Version 1.3
1011 or any later version published by the Free Software Foundation;
1012 with no Invariant Sections, no Front-Cover Texts, and no
1013 Back-Cover Texts. A copy of the license is included in the
1014 document entitled “fdl-1.3.txt”</p>
1015 </div>
1017 <div id="title" class="step slide" data-x="0" data-y="-1920">
1018 <img src="mastervorderbay.png" width="65%" style="padding-left: 350px;" />
1019 <h1>Tizen Application Portability</h1>
1020 <h2>Michael Schloh von Bennewitz</h2>
1021 </div>
1023 <div id="contents" class="step slide" data-x="1300" data-y="-1920">
1024 <h1>Contents</h1>
1025 <ul>
1026 <li>Mobile App <b>Categories</b></li>
1027 <li><b>Web</b> App Frameworks</li>
1028 <li><b>Native</b> App Frameworks</li>
1029 <li><b>Hybrid</b> App Frameworks</li>
1030 <li>Tizen SDK <b>Provision</b></li>
1031 <li>Tizen SDK <b>Integration</b></li>
1032 <!--<li>Web App Frameworks</li>
1033 <li>Hybrid Frameworks</li>
1034 <li>License Compatibility </li>
1035 <li>Tools and SDK Integration</li>
1036 <li>Portability Strategies</li>
1037 <li>Typical Workflows</li>
1038 <li>Demonstration</li>-->
1039 </ul>
1040 </div>
1042 <div id="topcat" class="step" data-x="800" data-y="-400" data-z="1000" data-scale="3">
1043 <span class="smalltext">Mobile Application</span>
1044 <h1>Categories</h1>
1045 </div>
1047 <div id="svgrich1" class="step" data-x="1050" data-y="-240" data-z="-1000" data-scale="0.1">
1048 <img src="richreach.svg" width="100%" />
1049 </div>
1051 <div id="topnative" class="step" data-x="200" data-y="-560" data-z="-1000" data-scale="0.3">
1052 <span class="smalltext">Development</span>
1053 <h1>Native App</h1>
1054 </div>
1056 <div id="svgrich2" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
1057 <img src="appsnative.svg" width="100%" />
1058 </div>
1060 <div id="svgtizenarch1" class="step" data-x="-1400" data-y="-1024" data-z="-1000" data-scale="0.4">
1061 <img src="tizenarch.svg" width="100%" height="720px" />
1062 </div>
1064 <div id="svgrich3" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
1065 <img src="appsweb.svg" width="100%" />
1066 </div>
1068 <div id="topweb" class="step" data-x="-2800" data-y="-2200" data-z="0" data-rotate="90" data-scale="2">
1069 <span class="smalltext">Frameworks</span>
1070 <h1>Web App</h1>
1071 </div>
1073 <div id="kitplethora" class="step" data-x="-2755" data-y="-2320" data-z="-1000" data-rotate="90" data-scale="0.05">
1074 <q><b>Web App Frameworks</b></q>
1075 <ul class="webfmwork">
1076 <li class="item fmwork-1" style="width: 120px; line-height: 40px;">jQuery Mobile</li>
1077 <li class="item fmwork-2" style="width: 120px; line-height: 40px;">Sencha Touch</li>
1078 <li class="item fmwork-3">DojoX</li>
1079 <li class="item fmwork-4">jQTouch</li>
1080 <li class="item fmwork-5">Glovebox</li>
1081 <li class="item fmwork-6">Lungo</li>
1082 <li class="item fmwork-7">Appmobi</li>
1083 <li class="item fmwork-8">Xooxdoo</li>
1084 <li class="item fmwork-9">Appcraft</li>
1085 <li class="item fmwork-10">Wink</li>
1086 <li class="item fmwork-11">Xui</li>
1087 <li class="item fmwork-12">Joframe</li>
1088 <li class="item fmwork-13">Zepto</li>
1089 <li class="item fmwork-14">Monocross</li>
1090 <li class="item fmwork-15">Uranium</li>
1091 <li class="item fmwork-16">Sproutcore</li>
1092 <!-- <li class="item fmwork-17">Unify</li>
1093 <li class="item fmwork-18">Ripple</li>
1094 <li class="item fmwork-19">Ipfaces</li>
1095 <li class="item fmwork-20">Qtmobil</li>
1096 <li class="item fmwork-21">Phonegap</li>
1097 <li class="item fmwork-22">Titanium</li>
1098 <li class="item fmwork-23">Rhomobile</li>-->
1099 </ul>
1100 </div>
1102 <div id="topchoose1" class="step" data-x="-2755" data-y="-3850" data-z="-1000" data-rotate="180" data-scale="2">
1103 <span class="smalltext">a framework</span>
1104 <h1>Choosing</h1>
1105 </div>
1107 <div id="svgappflow" class="step" data-x="-2740" data-y="-3800" data-z="-1000" data-rotate="180" data-scale="0.1">
1108 <img src="newappflow.svg" width="100%" />
1109 </div>
1111 <div id="topchoose2" class="step" data-x="-2755" data-y="-4050" data-z="-1000" data-rotate="180" data-scale="2">
1112 <a target="_blank" href="http://www.markus-falk.com/mobile-frameworks-comparison-chart/">with Markus FALK's chart</a>
1113 </div>
1115 <div id="topwhy" class="step" data-x="-2755" data-y="-5450" data-z="-1000" data-rotate="180" data-scale="2">
1116 <h1>Why a Web Framework?</h1>
1117 </div>
1119 <div id="rasterwhy" class="step" data-x="-2755" data-y="-5450" data-z="-500" data-rotate="180" data-scale="2">
1120 <blockquote>“2012 will come to be known as the year of the web
1121 runtimes. Officially there is no native development. Tizen
1122 is an html5 affair only.”
1123 <span class="author">- Raster Man</span></blockquote>
1124 </div>
1126 <div id="tophybrid" class="step" data-x="1000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4">
1127 <span class="smalltext">Leveraging</span>
1128 <h1>Hybrid Frameworks</h1>
1129 </div>
1131 <div id="svgrich4" class="step" data-x="-800" data-y="-7500" data-z="0" data-rotate="270" data-scale="2">
1132 <img src="appshybrid.svg" width="100%" />
1133 </div>
1135 <div id="svgtizenarch2" class="step" data-x="2000" data-y="-7500" data-z="0" data-rotate="360" data-scale="1">
1136 <img src="tizenarch.svg" width="100%" height="720px" />
1137 </div>
1139 <div id="sdkstart" class="step" data-x="6000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4">
1140 <h1>Tizen SDK</h1>
1141 </div>
1143 <div id="sdkprovide" class="step" data-x="6000" data-y="-4300" data-z="0" data-rotate="360" data-scale="4">
1144 <h1>Provision</h1>
1145 </div>
1147 <div id="sdkinteg" class="step" data-x="6000" data-y="-3600" data-z="0" data-rotate="360" data-scale="4">
1148 <h1>Integration</h1>
1149 </div>
1151 <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;">
1152 <h1>Demo</h1>
1153 </div>
1155 <div id="resources" class="step slide" data-x="0" data-y="-2600" data-rotate="0">
1156 <h1>Resources</h1>
1157 <ul>
1158 <li>jQuery Mobile: Up and Running, <span class="ecrivain">Maximiliano FIRTMAN</span>
1159 <li>Beginning Phonegap, <span class="ecrivain">Thomas MYER</span>
1160 <li><a href="http://docs.phonegap.com/">http://docs.phonegap.com/</a></li>
1161 <li><a href="http://www.modernizr.com/">http://www.modernizr.com/</a></li>
1162 <li><a href="http://www.dojotoolkit.org/">http://www.dojotoolkit.org/</a></li>
1163 <li><a href="http://www.jquerymobile.com/">http://www.jquerymobile.com/</a></li>
1164 <li><a href="http://www.sencha.com/products/touch/">http://www.sencha.com/products/touch/</a></li>
1165 </ul>
1166 </div>
1168 <div id="conclusion" class="step slide" data-x="-1300" data-y="-2600" data-rotate="0">
1169 <h1>Thank You</h1>
1170 <h2>Tizen Application Portability</h2>
1171 </div>
1173 <div id="overview" class="step" data-x="2500" data-y="-4200" data-scale="12">
1174 </div>
1176 <!--<div id="midlabel" class="step" data-x="3700" data-y="-3000" data-scale="6">
1177 <h1>Tizen</h1>
1178 </div>-->
1180 <div class="hint">
1181 <p>Use a spacebar or arrow keys to navigate</p>
1182 </div>
1183 <script>
1184 if ("ontouchstart" in document.documentElement) {
1185 document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
1186 }
1187 </script>
1189 <script src="impress.js"></script>
1190 <script>impress().init();</script>
1192 </body>
1193 </html>
