tizenporta/index.html@9e64c293a6c9
tizenporta/index.html
Tue, 08 May 2012 02:33:30 +0200
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Tue, 08 May 2012 02:33:30 +0200
- changeset 20
- 9e64c293a6c9
- parent 18
- c22bd8c37745
- child 21
- 04502f207b8f
- permissions
- -rw-r--r--
Improve appearance, opacity, position, and order of cartoon meme.
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(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 /* 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 #contents a {
252 color: inherit;
253 text-decoration: none;
254 padding: 0 0.1em;
255 border-radius: 0.2em;
256 background: rgba(220,220,220,0.5);
257 text-shadow: 0 0 0;
258 }
260 #topcat .smalltext, #tophybrid .smalltext {
261 font-size: 80px;
262 position: absolute;
263 top: -0.2em;
264 left: 1.7em;
266 -webkit-transform: translateZ(20px);
267 -moz-transform: translateZ(20px);
268 -ms-transform: translateZ(20px);
269 -o-transform: translateZ(20px);
270 transform: translateZ(20px);
271 }
273 #topcat h1 {
274 font-size: 180px;
275 line-height: 200px;
276 padding-top: 64px;
277 text-align: center;
279 -webkit-transform: translateZ(50px);
280 -moz-transform: translateZ(50px);
281 -ms-transform: translateZ(50px);
282 -o-transform: translateZ(50px);
283 transform: translateZ(50px);
284 }
286 #tophybrid .extratext {
287 width: 200px;
288 color: #808080;
289 font-size: 68px;
290 position: absolute;
291 top: 1.5em;
292 left: 10em;
293 text-align: right;
294 line-height: 64px;
295 }
297 #tophybrid h1 {
298 font-size: 180px;
299 line-height: 200px;
300 padding-top: 64px;
302 -webkit-transform: translateZ(50px);
303 -moz-transform: translateZ(50px);
304 -ms-transform: translateZ(50px);
305 -o-transform: translateZ(50px);
306 transform: translateZ(50px);
307 }
309 #topnative .smalltext {
310 font-size: 120px;
311 position: absolute;
312 top: 1.75em;
313 left: 0.6em;
315 -webkit-transform: translateZ(20px);
316 -moz-transform: translateZ(20px);
317 -ms-transform: translateZ(20px);
318 -o-transform: translateZ(20px);
319 transform: translateZ(20px);
320 }
322 #topnative h1 {
323 font-size: 200px;
324 position: relative;
325 top: -0.25em;
327 -webkit-transform: translateZ(50px);
328 -moz-transform: translateZ(50px);
329 -ms-transform: translateZ(50px);
330 -o-transform: translateZ(50px);
331 transform: translateZ(50px);
332 }
334 #topnative:not(.active) {
335 opacity: 0;
336 }
338 #topnative:is(.active) {
339 opacity: 1;
340 }
342 #picnative:not(.active) {
343 opacity: 0;
344 }
346 #picnative:is(.active) {
347 opacity: 1;
348 }
350 #topweb .smalltext {
351 font-size: 104px;
352 position: absolute;
353 top: 2em;
354 left: 1.4em;
356 -webkit-transform: translateZ(20px);
357 -moz-transform: translateZ(20px);
358 -ms-transform: translateZ(20px);
359 -o-transform: translateZ(20px);
360 transform: translateZ(20px);
361 }
363 #topweb h1 {
364 font-size: 200px;
365 position: relative;
366 top: -0.25em;
367 text-align: center;
369 -webkit-transform: translateZ(50px);
370 -moz-transform: translateZ(50px);
371 -ms-transform: translateZ(50px);
372 -o-transform: translateZ(50px);
373 transform: translateZ(50px);
374 }
376 #svgrich1:not(.active) {
377 opacity: 0;
378 }
380 #svgrich1:is(.active) {
381 opacity: 1;
382 }
384 /*#svgtizenarch1:not(.active) {
385 opacity: 0;
386 }
388 #svgtizenarch1:is(.active) {
389 opacity: 1;
390 }*/
392 #svgtizenarch1, #svgtizenarch2 {
393 width: 820px;
394 padding-top: 48px;
395 margin-left: auto;
396 margin-right: auto;
397 }
399 #svgrich2:not(.active) {
400 opacity: 0;
401 }
403 #svgrich2:is(.active) {
404 opacity: 1;
405 }
407 #svgrich3:not(.active) {
408 opacity: 0;
409 }
411 #svgrich3:is(.active) {
412 opacity: 1;
413 }
415 #kitplethora:not(.active) {
416 opacity: 0;
417 }
419 #kitplethora:is(.active) {
420 opacity: 1;
421 }
423 #svgappflow:not(.active) {
424 opacity: 0;
425 }
427 #svgappflow:is(.active) {
428 opacity: 1;
429 }
431 #specases .smalltext {
432 font-size: 92px;
433 line-height: 116px;
434 position: absolute;
435 top: 1.25em;
436 left: 2.5em;
438 -webkit-transform: translateZ(20px);
439 -moz-transform: translateZ(20px);
440 -ms-transform: translateZ(20px);
441 -o-transform: translateZ(20px);
442 transform: translateZ(20px);
443 }
445 #specases h1 {
446 font-size: 160px;
447 position: relative;
448 top: -.8em;
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 #topchoose1 .smalltext {
459 font-size: 130px;
460 position: absolute;
461 top: 1.5em;
462 left: 1em;
464 -webkit-transform: translateZ(20px);
465 -moz-transform: translateZ(20px);
466 -ms-transform: translateZ(20px);
467 -o-transform: translateZ(20px);
468 transform: translateZ(20px);
469 }
471 #topchoose1 h1 {
472 font-size: 200px;
473 position: relative;
474 top: -0.25em;
475 text-align: center;
477 -webkit-transform: translateZ(50px);
478 -moz-transform: translateZ(50px);
479 -ms-transform: translateZ(50px);
480 -o-transform: translateZ(50px);
481 transform: translateZ(50px);
482 }
484 #topchoose2:not(.active) {
485 opacity: 0;
486 }
488 #topchoose2:is(.active) {
489 opacity: 1;
490 }
492 #topchoose2 a {
493 font-size: 64px;
494 position: relative;
495 top: 2em;
496 left: 1.4em;
497 }
499 #topwhy h1 {
500 font-size: 160px;
501 line-height: 150px;
502 position: relative;
503 top: -1em;
504 text-align: center;
506 -webkit-transform: translateZ(50px);
507 -moz-transform: translateZ(50px);
508 -ms-transform: translateZ(50px);
509 -o-transform: translateZ(50px);
510 transform: translateZ(50px);
511 }
513 blockquote {
514 text-align: justify;
515 font-weight: 300;
516 font-style: italic;
517 line-height: 1.2;
518 margin-left: 72px;
519 margin-right: 72px;
520 position: relative;
521 top: 3.5em;
522 }
524 blockquote .author {
525 display: block;
526 text-align: right;
527 padding: 0 40px;
528 font-weight: 600;
529 font-size: 36px;
530 }
532 #sdkstart h1, #sdkprovide h1, #sdkinteg h1, #sdkdemo h1 {
533 /*font-family: 'Open Sans', sans-serif;*/
534 /*font-weight: 900;*/
535 font-size: 200px;
537 -webkit-transform: translateZ(50px);
538 -moz-transform: translateZ(50px);
539 -ms-transform: translateZ(50px);
540 -o-transform: translateZ(50px);
541 transform: translateZ(50px);
542 }
544 #resources {
545 background-image: url('meegarbeit.svg');
546 background-position: 90% 70%;
547 background-repeat: no-repeat;
548 color: #202020;
549 }
551 #resources h1 {
552 padding-top: 32px;
553 padding-bottom: 48px;
554 font-size: 96px;
555 font-weight: bold;
556 font-family: 'Open Sans', Arial, sans-serif;
557 }
559 #resources ul {
560 font-size: 36px;
561 line-height: 44px;
562 padding-left: 64px;
563 }
565 #resources .buchtit {
566 text-decoration: underline;
567 }
569 #conclusion {
570 background-size: 100% 100%;
571 background-image: url(schlusshintergrund.png);
572 background-repeat: no-repeat;
573 background-attachment: fixed;
574 background-position: top;
576 color: white;
577 text-shadow: 8px 6px 12px black;
578 }
580 #conclusion h1 {
581 padding-top: 64px;
582 padding-bottom: 96px;
583 font-size: 200px;
584 font-weight: bold;
585 font-family: 'Open Sans', Arial, sans-serif;
586 }
588 #conclusion h2 {
589 width: 600px;
590 padding-left: 360px;
591 font-size: 96px;
592 font-weight: bold;
593 font-family: 'Open Sans', Arial, sans-serif;
594 line-height: 100px;
595 }
597 #conclusion img {
598 float: left;
599 }
601 /* overview step */
603 #overview {
604 z-index: -1;
605 padding: 0;
606 }
608 /* on overview step everything is visible */
610 .impress-on-overview .step {
611 opacity: 1;
612 cursor: pointer;
613 }
615 /*
616 * SLIDE STEP STYLES
617 *
618 * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
619 *
620 * ;)
621 */
623 .slide {
624 display: block;
626 width: 1200px;
627 height: 600px;
629 padding: 40px 60px;
631 border-radius: 10px;
633 background-color: white;
635 box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
636 border: 1px solid rgba(0, 0, 0, .3);
638 font-family: 'Open Sans', Arial, sans-serif;
640 color: rgb(102, 102, 102);
641 text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
643 font-size: 30px;
644 line-height: 36px;
646 letter-spacing: -1px;
647 }
649 .slide q {
650 display: block;
651 font-size: 50px;
652 line-height: 72px;
654 margin-top: 100px;
655 }
657 .slide q strong {
658 white-space: nowrap;
659 }
662 /* IMPRESS NOT SUPPORTED STYLES */
664 .fallback-message {
665 font-family: sans-serif;
666 line-height: 1.3;
668 display: none;
669 width: 780px;
670 padding: 10px 10px 0;
671 margin: 20px auto;
673 border-radius: 10px;
674 border: 1px solid #E4C652;
675 background: #EEDC94;
676 }
678 .fallback-message p {
679 margin-bottom: 10px;
680 }
682 .impress-disabled .step,
683 .impress-not-supported .step {
684 position: relative;
685 opacity: 1;
686 margin: 20px auto;
687 }
689 .impress-not-supported .fallback-message {
690 display: block;
691 }
693 #kitplethora {
694 padding-top: 100px;
695 text-align: center;
696 }
697 #kitplethora .webfmwork { }
698 #kitplethora .webfmwork .item {
699 display: block;
700 font-size: .8em;
701 opacity: .7;
702 position: absolute;
703 text-align: center;
704 width: 25%;
705 }
706 #kitplethora .webfmwork .fmwork-1 {
707 bottom: 240px;
708 left: 0px;
709 -moz-animation: item1 4s 0.5s infinite normal ease;
710 -webkit-animation: item1 4s 0.5s infinite normal ease;
711 -ms-animation: item1 4s 0.5s infinite normal ease;
712 }
713 @-moz-keyframes item1 {
714 0% { -moz-transform: rotate(10deg); left: 0px; }
715 50% { -moz-transform: rotate(-10deg); left: 10px; }
716 100% { -moz-transform: rotate(10deg); left: 0px; }
717 }
718 @-webkit-keyframes item1 {
719 0% { -webkit-transform: rotate(10deg); left: 0px; }
720 50% { -webkit-transform: rotate(-10deg); left: 10px; }
721 100% { -webkit-transform: rotate(10deg); left: 0px; }
722 }
723 @-ms-keyframes item1 {
724 0% { -ms-transform: rotate(10deg); left: 0px; }
725 50% { -ms-transform: rotate(-10deg); left: 10px; }
726 100% { -ms-transform: rotate(10deg); left: 0px; }
727 }
728 #kitplethora .webfmwork .fmwork-2 {
729 bottom: 290px;
730 left: 280px;
731 -moz-animation: item2 4s 0s infinite normal ease;
732 -webkit-animation: item2 4s 0s infinite normal ease;
733 -ms-animation: item2 4s 0s infinite normal ease;
734 }
735 @-moz-keyframes item2 {
736 0% { -moz-transform: rotate(-10deg); left: 280px; }
737 50% { -moz-transform: rotate(10deg); left: 260px; }
738 100% { -moz-transform: rotate(-10deg); left: 280px; }
739 }
740 @-webkit-keyframes item2 {
741 0% { -webkit-transform: rotate(-10deg); left: 280px; }
742 50% { -webkit-transform: rotate(10deg); left: 260px; }
743 100% { -webkit-transform: rotate(-10deg); left: 280px; }
744 }
745 @-ms-keyframes item2 {
746 0% { -ms-transform: rotate(-10deg); left: 280px; }
747 50% { -ms-transform: rotate(10deg); left: 260px; }
748 100% { -ms-transform: rotate(-10deg); left: 280px; }
749 }
750 #kitplethora .webfmwork .fmwork-3 {
751 bottom: 250px;
752 right: 350px;
753 -moz-animation: item3 4s 0.3s infinite normal ease;
754 -webkit-animation: item3 4s 0.3s infinite normal ease;
755 -ms-animation: item3 4s 0.3s infinite normal ease;
756 }
757 @-moz-keyframes item3 {
758 0% { -moz-transform: rotate(10deg); right: 350px; }
759 50% { -moz-transform: rotate(-10deg); right: 340px; }
760 100% { -moz-transform: rotate(10deg); right: 350px; }
761 }
762 @-webkit-keyframes item3 {
763 0% { -webkit-transform: rotate(10deg); right: 350px; }
764 50% { -webkit-transform: rotate(-10deg); right: 340px; }
765 100% { -webkit-transform: rotate(10deg); right: 350px; }
766 }
767 @-ms-keyframes item3 {
768 0% { -ms-transform: rotate(10deg); right: 350px; }
769 50% { -ms-transform: rotate(-10deg); right: 340px; }
770 100% { -ms-transform: rotate(10deg); right: 350px; }
771 }
772 #kitplethora .webfmwork .fmwork-4 {
773 bottom: 280px;
774 right: -10px;
775 -moz-animation: item4 4s 0.1s infinite normal ease;
776 -webkit-animation: item4 4s 0.1s infinite normal ease;
777 -ms-animation: item4 4s 0.1s infinite normal ease;
778 }
779 @-moz-keyframes item4 {
780 0% { -moz-transform: rotate(-10deg); right: -10px; }
781 50% { -moz-transform: rotate(10deg); right: 10px; }
782 100% { -moz-transform: rotate(-10deg); right: -10px; }
783 }
784 @-webkit-keyframes item4 {
785 0% { -webkit-transform: rotate(-10deg); right: -10px; }
786 50% { -webkit-transform: rotate(10deg); right: 10px; }
787 100% { -webkit-transform: rotate(-10deg); right: -10px; }
788 }
789 @-ms-keyframes item4 {
790 0% { -ms-transform: rotate(-10deg); right: -10px; }
791 50% { -ms-transform: rotate(10deg); right: 10px; }
792 100% { -ms-transform: rotate(-10deg); right: -10px; }
793 }
794 #kitplethora .webfmwork .fmwork-5 {
795 bottom: 140px;
796 left: 0px;
797 -moz-animation: item5 4s 2.1s infinite normal ease;
798 -webkit-animation: item5 4s 2.1s infinite normal ease;
799 -ms-animation: item5 4s 2.1s infinite normal ease;
800 }
801 @-moz-keyframes item5 {
802 0% { -moz-transform: rotate(10deg); left: 0px; }
803 50% { -moz-transform: rotate(-10deg); left: 10px; }
804 100% { -moz-transform: rotate(10deg); left: 0px; }
805 }
806 @-webkit-keyframes item5 {
807 0% { -webkit-transform: rotate(10deg); left: 0px; }
808 50% { -webkit-transform: rotate(-10deg); left: 10px; }
809 100% { -webkit-transform: rotate(10deg); left: 0px; }
810 }
811 @-ms-keyframes item5 {
812 0% { -ms-transform: rotate(10deg); left: 0px; }
813 50% { -ms-transform: rotate(-10deg); left: 10px; }
814 100% { -ms-transform: rotate(10deg); left: 0px; }
815 }
816 #kitplethora .webfmwork .fmwork-6 {
817 bottom: 190px;
818 left: 280px;
819 -moz-animation: item6 4s 0.6s infinite normal ease;
820 -webkit-animation: item6 4s 0.6s infinite normal ease;
821 -ms-animation: item6 4s 0.6s infinite normal ease;
822 }
823 @-moz-keyframes item6 {
824 0% { -moz-transform: rotate(-10deg); left: 280px; }
825 50% { -moz-transform: rotate(10deg); left: 260px; }
826 100% { -moz-transform: rotate(-10deg); left: 280px; }
827 }
828 @-webkit-keyframes item6 {
829 0% { -webkit-transform: rotate(-10deg); left: 280px; }
830 50% { -webkit-transform: rotate(10deg); left: 260px; }
831 100% { -webkit-transform: rotate(-10deg); left: 280px; }
832 }
833 @-ms-keyframes item6 {
834 0% { -ms-transform: rotate(-10deg); left: 280px; }
835 50% { -ms-transform: rotate(10deg); left: 260px; }
836 100% { -ms-transform: rotate(-10deg); left: 280px; }
837 }
838 #kitplethora .webfmwork .fmwork-7 {
839 bottom: 150px;
840 right: 250px;
841 -moz-animation: item7 5s 0.4s infinite normal ease;
842 -webkit-animation: item7 5s 0.4s infinite normal ease;
843 -ms-animation: item7 5s 0.4s infinite normal ease;
844 }
845 @-moz-keyframes item7 {
846 0% { -moz-transform: rotate(10deg); right: 250px; }
847 50% { -moz-transform: rotate(-10deg); right: 240px; }
848 100% { -moz-transform: rotate(10deg); right: 250px; }
849 }
850 @-webkit-keyframes item7 {
851 0% { -webkit-transform: rotate(10deg); right: 250px; }
852 50% { -webkit-transform: rotate(-10deg); right: 240px; }
853 100% { -webkit-transform: rotate(10deg); right: 250px; }
854 }
855 @-ms-keyframes item7 {
856 0% { -ms-transform: rotate(10deg); right: 250px; }
857 50% { -ms-transform: rotate(-10deg); right: 240px; }
858 100% { -ms-transform: rotate(10deg); right: 250px; }
859 }
860 #kitplethora .webfmwork .fmwork-8 {
861 bottom: 180px;
862 right: -10px;
863 -moz-animation: item8 4s 0.8s infinite normal ease;
864 -webkit-animation: item8 4s 0.8s infinite normal ease;
865 -ms-animation: item8 4s 0.8s infinite normal ease;
866 }
867 @-moz-keyframes item8 {
868 0% { -moz-transform: rotate(-10deg); right: -10px; }
869 50% { -moz-transform: rotate(10deg); right: 10px; }
870 100% { -moz-transform: rotate(-10deg); right: -10px; }
871 }
872 @-webkit-keyframes item8 {
873 0% { -webkit-transform: rotate(-10deg); right: -10px; }
874 50% { -webkit-transform: rotate(10deg); right: 10px; }
875 100% { -webkit-transform: rotate(-10deg); right: -10px; }
876 }
877 @-ms-keyframes item8 {
878 0% { -ms-transform: rotate(-10deg); right: -10px; }
879 50% { -ms-transform: rotate(10deg); right: 10px; }
880 100% { -ms-transform: rotate(-10deg); right: -10px; }
881 }
882 #kitplethora .webfmwork .fmwork-9 {
883 bottom: -40px;
884 left: -60px;
885 -moz-animation: item9 3.5s 0.2s infinite normal ease;
886 -webkit-animation: item9 3.5s 0.2s infinite normal ease;
887 -ms-animation: item9 3.5s 0.2s infinite normal ease;
888 }
889 @-moz-keyframes item9 {
890 0% { -moz-transform: rotate(10deg); left: 0px; }
891 50% { -moz-transform: rotate(-10deg); left: 10px; }
892 100% { -moz-transform: rotate(10deg); left: 0px; }
893 }
894 @-webkit-keyframes item9 {
895 0% { -webkit-transform: rotate(10deg); left: -60px; }
896 50% { -webkit-transform: rotate(-10deg); left: -50px; }
897 100% { -webkit-transform: rotate(10deg); left: -60px; }
898 }
899 @-ms-keyframes item9 {
900 0% { -ms-transform: rotate(10deg); left: 0px; }
901 50% { -ms-transform: rotate(-10deg); left: 10px; }
902 100% { -ms-transform: rotate(10deg); left: 0px; }
903 }
904 #kitplethora .webfmwork .fmwork-10 {
905 bottom: -90px;
906 left: 400px;
907 -moz-animation: item10 5s 0.4s infinite normal ease;
908 -webkit-animation: item10 5s 0.4s infinite normal ease;
909 -ms-animation: item10 5s 0.4s infinite normal ease;
910 }
911 @-moz-keyframes item10 {
912 0% { -moz-transform: rotate(-10deg); left: 400px; }
913 50% { -moz-transform: rotate(10deg); left: 380px; }
914 100% { -moz-transform: rotate(-10deg); left: 400px; }
915 }
916 @-webkit-keyframes item10 {
917 0% { -webkit-transform: rotate(-10deg); left: 400px; }
918 50% { -webkit-transform: rotate(10deg); left: 380px; }
919 100% { -webkit-transform: rotate(-10deg); left: 400px; }
920 }
921 @-ms-keyframes item10 {
922 0% { -ms-transform: rotate(-10deg); left: 400px; }
923 50% { -ms-transform: rotate(10deg); left: 380px; }
924 100% { -ms-transform: rotate(-10deg); left: 400px; }
925 }
926 #kitplethora .webfmwork .fmwork-11 {
927 bottom: -50px;
928 right: 250px;
929 -moz-animation: item11 4s 0.3s infinite normal ease;
930 -webkit-animation: item11 4s 0.3s infinite normal ease;
931 -ms-animation: item11 4s 0.3s infinite normal ease;
932 }
933 @-moz-keyframes item11 {
934 0% { -moz-transform: rotate(10deg); right: 250px; }
935 50% { -moz-transform: rotate(-10deg); right: 240px; }
936 100% { -moz-transform: rotate(10deg); right: 250px; }
937 }
938 @-webkit-keyframes item11 {
939 0% { -webkit-transform: rotate(10deg); right: 250px; }
940 50% { -webkit-transform: rotate(-10deg); right: 240px; }
941 100% { -webkit-transform: rotate(10deg); right: 250px; }
942 }
943 @-ms-keyframes item11 {
944 0% { -ms-transform: rotate(10deg); right: 250px; }
945 50% { -ms-transform: rotate(-10deg); right: 240px; }
946 100% { -ms-transform: rotate(10deg); right: 250px; }
947 }
948 #kitplethora .webfmwork .fmwork-12 {
949 bottom: -80px;
950 right: -10px;
951 -moz-animation: item12 4s 0 infinite normal ease;
952 -webkit-animation: item12 4s 0 infinite normal ease;
953 -ms-animation: item12 4s 0 infinite normal ease;
954 }
955 @-moz-keyframes item12 {
956 0% { -moz-transform: rotate(-10deg); right: -10px; }
957 50% { -moz-transform: rotate(10deg); right: 10px; }
958 100% { -moz-transform: rotate(-10deg); right: -10px; }
959 }
960 @-webkit-keyframes item12 {
961 0% { -webkit-transform: rotate(-10deg); right: -10px; }
962 50% { -webkit-transform: rotate(10deg); right: 10px; }
963 100% { -webkit-transform: rotate(-10deg); right: -10px; }
964 }
965 @-ms-keyframes item12 {
966 0% { -ms-transform: rotate(-10deg); right: -10px; }
967 50% { -ms-transform: rotate(10deg); right: 10px; }
968 100% { -ms-transform: rotate(-10deg); right: -10px; }
969 }
970 #kitplethora .webfmwork .fmwork-13 {
971 bottom: -140px;
972 left: 0px;
973 -moz-animation: item13 4s 0.5s infinite normal ease;
974 -webkit-animation: item13 4s 0.5s infinite normal ease;
975 -ms-animation: item13 4s 0.5s infinite normal ease;
976 }
977 @-moz-keyframes item13 {
978 0% { -moz-transform: rotate(10deg); left: 0px; }
979 50% { -moz-transform: rotate(-10deg); left: 10px; }
980 100% { -moz-transform: rotate(10deg); left: 0px; }
981 }
982 @-webkit-keyframes item13 {
983 0% { -webkit-transform: rotate(10deg); left: 0px; }
984 50% { -webkit-transform: rotate(-10deg); left: 10px; }
985 100% { -webkit-transform: rotate(10deg); left: 0px; }
986 }
987 @-ms-keyframes item13 {
988 0% { -ms-transform: rotate(10deg); left: 0px; }
989 50% { -ms-transform: rotate(-10deg); left: 10px; }
990 100% { -ms-transform: rotate(10deg); left: 0px; }
991 }
992 #kitplethora .webfmwork .fmwork-14 {
993 bottom: -190px;
994 left: 280px;
995 -moz-animation: item14 4s 0s infinite normal ease;
996 -webkit-animation: item14 4s 0s infinite normal ease;
997 -ms-animation: item14 4s 0s infinite normal ease;
998 }
999 @-moz-keyframes item14 {
1000 0% { -moz-transform: rotate(-10deg); left: 280px; }
1001 50% { -moz-transform: rotate(10deg); left: 260px; }
1002 100% { -moz-transform: rotate(-10deg); left: 280px; }
1003 }
1004 @-webkit-keyframes item14 {
1005 0% { -webkit-transform: rotate(-10deg); left: 280px; }
1006 50% { -webkit-transform: rotate(10deg); left: 260px; }
1007 100% { -webkit-transform: rotate(-10deg); left: 280px; }
1008 }
1009 @-ms-keyframes item14 {
1010 0% { -ms-transform: rotate(-10deg); left: 280px; }
1011 50% { -ms-transform: rotate(10deg); left: 260px; }
1012 100% { -ms-transform: rotate(-10deg); left: 280px; }
1013 }
1014 #kitplethora .webfmwork .fmwork-15 {
1015 bottom: -150px;
1016 right: 320px;
1017 -moz-animation: item15 3.5s 0.2s infinite normal ease;
1018 -webkit-animation: item15 3.5s 0.2s infinite normal ease;
1019 -ms-animation: item15 3.5s 0.2s infinite normal ease;
1020 }
1021 @-moz-keyframes item15 {
1022 0% { -moz-transform: rotate(10deg); right: 320px; }
1023 50% { -moz-transform: rotate(-10deg); right: 310px; }
1024 100% { -moz-transform: rotate(10deg); right: 320px; }
1025 }
1026 @-webkit-keyframes item15 {
1027 0% { -webkit-transform: rotate(10deg); right: 320px; }
1028 50% { -webkit-transform: rotate(-10deg); right: 310px; }
1029 100% { -webkit-transform: rotate(10deg); right: 320px; }
1030 }
1031 @-ms-keyframes item15 {
1032 0% { -ms-transform: rotate(10deg); right: 320px; }
1033 50% { -ms-transform: rotate(-10deg); right: 310px; }
1034 100% { -ms-transform: rotate(10deg); right: 320px; }
1035 }
1036 #kitplethora .webfmwork .fmwork-16 {
1037 bottom: -180px;
1038 right: -10px;
1039 -moz-animation: item16 5s 0.4s infinite normal ease;
1040 -webkit-animation: item16 5s 0.4s infinite normal ease;
1041 -ms-animation: item16 5s 0.4s infinite normal ease;
1042 }
1043 @-moz-keyframes item16 {
1044 0% { -moz-transform: rotate(-10deg); right: -10px; }
1045 50% { -moz-transform: rotate(10deg); right: 10px; }
1046 100% { -moz-transform: rotate(-10deg); right: -10px; }
1047 }
1048 @-webkit-keyframes item16 {
1049 0% { -webkit-transform: rotate(-10deg); right: -10px; }
1050 50% { -webkit-transform: rotate(10deg); right: 10px; }
1051 100% { -webkit-transform: rotate(-10deg); right: -10px; }
1052 }
1053 @-ms-keyframes item16 {
1054 0% { -ms-transform: rotate(-10deg); right: -10px; }
1055 50% { -ms-transform: rotate(10deg); right: 10px; }
1056 100% { -ms-transform: rotate(-10deg); right: -10px; }
1057 }
1058 </style>
1059 </head>
1061 <!-- class is renamed once javascript detects browser support -->
1062 <body class="impress-not-supported">
1064 <div class="fallback-message">
1065 <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>
1066 <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
1067 </div>
1069 <div id="impress">
1071 <div id="license" class="step slide" data-x="-1300" data-y="-1920">
1072 <p style="font-size: 48px; line-height: 56px;">Copyright © 2012
1073 Michael Schloh von Bennewitz <michael@schloh.com> Permission is
1074 granted to copy, distribute and/or modify this document under
1075 the terms of the GNU Free Documentation License, Version 1.3
1076 or any later version published by the Free Software Foundation;
1077 with no Invariant Sections, no Front-Cover Texts, and no
1078 Back-Cover Texts. A copy of the license is included in the
1079 document entitled “fdl-1.3.txt”</p>
1080 </div>
1082 <div id="title" class="step slide" data-x="0" data-y="-1920">
1083 <img src="mastervorderbay.png" width="65%" style="padding-left: 350px;" />
1084 <h1>Tizen Application Portability</h1>
1085 <h2>Michael Schloh von Bennewitz</h2>
1086 </div>
1088 <div id="contents" class="step slide" data-x="1300" data-y="-1920">
1089 <h1>Contents</h1>
1090 <ul>
1091 <li><a href="index.html#/topcat">Mobile App <b>Categories</b></a></li>
1092 <li><a href="index.html#/topnative"><b>Native</b> App Frameworks</a></li>
1093 <li><a href="index.html#/topweb"><b>Web</b> App Frameworks</a></li>
1094 <li><a href="index.html#/tophybrid"><b>Hybrid</b> App Frameworks</a></li>
1095 <li><a href="index.html#/sdkprovide">Tizen SDK <b>Provision</b></a></li>
1096 <li><a href="index.html#/sdkinteg">Tizen SDK <b>Integration</b></a></li>
1097 <!--<li>Web App Frameworks</li>
1098 <li>Hybrid Frameworks</li>
1099 <li>License Compatibility </li>
1100 <li>Tools and SDK Integration</li>
1101 <li>Portability Strategies</li>
1102 <li>Typical Workflows</li>
1103 <li>Demonstration</li>-->
1104 </ul>
1105 </div>
1107 <div id="topcat" class="step" data-x="800" data-y="-400" data-z="1000" data-scale="3">
1108 <span class="smalltext">Mobile Application</span>
1109 <h1>Categories</h1>
1110 </div>
1112 <div id="svgrich1" class="step" data-x="1052" data-y="-240" data-z="-1000" data-scale="0.125">
1113 <img src="richreach.svg" width="100%" />
1114 </div>
1116 <div id="topnative" class="step" data-x="200" data-y="-570" data-z="-1000" data-scale="0.3">
1117 <span class="smalltext">Development</span>
1118 <h1>Native App</h1>
1119 </div>
1121 <div id="svgrich2" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
1122 <img src="appsnative.svg" width="100%" />
1123 </div>
1125 <div id="svgtizenarch1" class="step" data-x="-1400" data-y="-1024" data-z="-1000" data-scale="0.4">
1126 <img src="tizenarch.svg" width="100%" height="720px" />
1127 </div>
1129 <div id="picnative" class="step" data-x="-1800" data-y="-1100" data-z="-1000" data-scale="0.2">
1130 <img src="quickmeme.png" width="100%" />
1131 </div>
1133 <div id="svgrich3" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5">
1134 <img src="appsweb.svg" width="100%" />
1135 </div>
1137 <div id="topweb" class="step" data-x="-2800" data-y="-2200" data-z="0" data-rotate="90" data-scale="2">
1138 <span class="smalltext">Frameworks</span>
1139 <h1>Web App</h1>
1140 </div>
1142 <div id="kitplethora" class="step" data-x="-2755" data-y="-2320" data-z="-1000" data-rotate="90" data-scale="0.05">
1143 <q><b>Web App Frameworks</b></q>
1144 <ul class="webfmwork">
1145 <li class="item fmwork-1" style="width: 120px; line-height: 40px;">jQuery Mobile</li>
1146 <li class="item fmwork-2" style="width: 120px; line-height: 40px;">Sencha Touch</li>
1147 <li class="item fmwork-3">DojoX</li>
1148 <li class="item fmwork-4">jQTouch</li>
1149 <li class="item fmwork-5">Glovebox</li>
1150 <li class="item fmwork-6">Lungo</li>
1151 <li class="item fmwork-7">Appmobi</li>
1152 <li class="item fmwork-8">Enyo</li>
1153 <li class="item fmwork-9">Appcraft</li>
1154 <li class="item fmwork-10">Wink</li>
1155 <li class="item fmwork-11">Xui</li>
1156 <li class="item fmwork-12">Joframe</li>
1157 <li class="item fmwork-13">Zepto</li>
1158 <li class="item fmwork-14">Monocross</li>
1159 <li class="item fmwork-15">Uranium</li>
1160 <li class="item fmwork-16">Sproutcore</li>
1161 <!-- <li class="item fmwork-17">Unify</li>
1162 <li class="item fmwork-18">Ripple</li>
1163 <li class="item fmwork-19">Ipfaces</li>
1164 <li class="item fmwork-20">Qtmobil</li>
1165 <li class="item fmwork-21">Phonegap</li>
1166 <li class="item fmwork-22">Titanium</li>
1167 <li class="item fmwork-23">Rhomobile</li>-->
1168 </ul>
1169 </div>
1171 <div id="specases" class="step" data-x="-2755" data-y="-3700" data-z="-1000" data-rotate="180" data-scale=".5">
1172 <span class="smalltext">HTML5Boilerplate Modernizr</span>
1173 <h1>Special Cases</h1>
1174 </div>
1176 <div id="topchoose1" class="step" data-x="-2755" data-y="-4550" data-z="-1000" data-rotate="180" data-scale="2">
1177 <span class="smalltext">a framework</span>
1178 <h1>Choosing</h1>
1179 </div>
1181 <div id="svgappflow" class="step" data-x="-2740" data-y="-4500" data-z="-1000" data-rotate="180" data-scale="0.1">
1182 <img src="newappflow.svg" width="100%" />
1183 </div>
1185 <div id="topchoose2" class="step" data-x="-2755" data-y="-4850" data-z="-1000" data-rotate="180" data-scale="2">
1186 <a target="_blank" href="http://www.markus-falk.com/mobile-frameworks-comparison-chart/">with Markus FALK's chart</a>
1187 </div>
1189 <div id="topwhy" class="step" data-x="-2755" data-y="-6250" data-z="-1000" data-rotate="180" data-scale="2">
1190 <h1>Why a Web Framework?</h1>
1191 </div>
1193 <div id="rasterwhy" class="step" data-x="-2755" data-y="-6250" data-z="-500" data-rotate="180" data-scale="2">
1194 <blockquote>“2012 will come to be known as the year of the web
1195 runtimes. Officially there is no native development. Tizen
1196 is an html5 affair only.”
1197 <span class="author">- Raster Man</span></blockquote>
1198 </div>
1200 <div id="tophybrid" class="step" data-x="1000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4">
1201 <span class="smalltext">Leveraging</span>
1202 <span class="extratext">Cordova Titanium Rhomobile</span>
1203 <h1>Hybrid Frameworks</h1>
1204 </div>
1206 <div id="svgrich4" class="step" data-x="-800" data-y="-7500" data-z="0" data-rotate="270" data-scale="2">
1207 <img src="appshybrid.svg" width="100%" />
1208 </div>
1210 <div id="svgtizenarch2" class="step" data-x="2000" data-y="-7500" data-z="0" data-rotate="360" data-scale="1">
1211 <img src="tizenarch.svg" width="100%" height="720px" />
1212 </div>
1214 <div id="sdkstart" class="step" data-x="6000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4">
1215 <h1>Tizen SDK</h1>
1216 </div>
1218 <div id="sdkprovide" class="step" data-x="6000" data-y="-4300" data-z="0" data-rotate="360" data-scale="4">
1219 <h1>Provision</h1>
1220 </div>
1222 <div id="sdkinteg" class="step" data-x="6000" data-y="-3600" data-z="0" data-rotate="360" data-scale="4">
1223 <h1>Integration</h1>
1224 </div>
1226 <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;">
1227 <h1>Demo</h1>
1228 </div>
1230 <div id="resources" class="step slide" data-x="0" data-y="-2600" data-rotate="0">
1231 <h1>Resources</h1>
1232 <ul>
1233 <li><span class="buchtit">jQuery Mobile: Up and Running</span>, Maximiliano FIRTMAN</li>
1234 <li><span class="buchtit">Mobile Design Pattern Gallery</span>, Theresa NEIL</li>
1235 <li><span class="buchtit">Beginning Phonegap</span>, Thomas MYER</li>
1236 <li><a href="http://docs.phonegap.com/">http://docs.phonegap.com/</a></li>
1237 <li><a href="http://www.modernizr.com/">http://www.modernizr.com/</a></li>
1238 <li><a href="http://www.dojotoolkit.org/">http://www.dojotoolkit.org/</a></li>
1239 <li><a href="http://www.jquerymobile.com/">http://www.jquerymobile.com/</a></li>
1240 <li><a href="http://www.sencha.com/products/touch/">http://www.sencha.com/products/touch/</a></li>
1241 <li><a href="http://ftp.europalab.com/pub/doc/lect/tizenportdev/">http://ftp.europalab.com/pub/doc/lect/tizenportdev/</a></li>
1242 </ul>
1243 </div>
1245 <div id="conclusion" class="step slide" data-x="-1300" data-y="-2600" data-rotate="0">
1246 <h1>Thank You!</h1>
1247 <img src="qrtizportdev.png" width="300px" />
1248 <h2><span style="color: aqua;">Tizen</span> <span style="color: orange;">Application</span> <span style="color: red;">Portability</span></h2>
1249 </div>
1251 <div id="overview" class="step" data-x="2500" data-y="-4200" data-scale="12">
1252 </div>
1254 <!--<div id="midlabel" class="step" data-x="3700" data-y="-3000" data-scale="6">
1255 <h1>Tizen</h1>
1256 </div>-->
1258 <div class="hint">
1259 <p>Use a spacebar or arrow keys to navigate</p>
1260 </div>
1261 <script>
1262 if ("ontouchstart" in document.documentElement) {
1263 document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
1264 }
1265 </script>
1267 <script src="impress.js"></script>
1268 <script>impress().init();</script>
1270 </body>
1271 </html>
