Lecture Sheets / file comparison
comparison: tizenporta/index.html
tizenporta/index.html
- changeset 13
- ee91ce4e01a7
- child 14
- 5691915dae1d
- child 22
- 545df6643bcd
equal
deleted
inserted
replaced
| -1:000000000000 | 0:1d46cfbabff2 |
|---|---|
| 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> | |
| 8 | |
| 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" /> | |
| 11 | |
| 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" /> | |
| 13 | |
| 14 <link rel="shortcut icon" href="favicon.png" /> | |
| 15 <link rel="apple-touch-icon" href="apple-touch-icon.png" /> | |
| 16 | |
| 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 } | |
| 38 | |
| 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 } | |
| 58 | |
| 59 table { | |
| 60 border-collapse: collapse; | |
| 61 border-spacing: 0; | |
| 62 } | |
| 63 | |
| 64 | |
| 65 body { | |
| 66 font-family: 'PT Sans', sans-serif; | |
| 67 | |
| 68 min-height: 740px; | |
| 69 | |
| 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)); | |
| 76 | |
| 77 -webkit-font-smoothing: antialiased; | |
| 78 } | |
| 79 | |
| 80 b, strong { font-weight: bold } | |
| 81 i, em { font-style: italic} | |
| 82 | |
| 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; | |
| 90 | |
| 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 } | |
| 97 | |
| 98 a:hover { | |
| 99 background: rgba(255,255,255,1); | |
| 100 text-shadow: -1px -1px 2px rgba(100,100,100,0.5); | |
| 101 } | |
| 102 | |
| 103 /* enable clicking on elements 'hiding' behind body in 3D */ | |
| 104 body { pointer-events: none; } | |
| 105 #impress { pointer-events: auto; } | |
| 106 | |
| 107 /* COMMON STEP STYLES */ | |
| 108 | |
| 109 .step { | |
| 110 width: 1080px; | |
| 111 padding: 40px; | |
| 112 | |
| 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; | |
| 118 | |
| 119 font-family: 'PT Serif', georgia, serif; | |
| 120 | |
| 121 font-size: 48px; | |
| 122 line-height: 1.5; | |
| 123 } | |
| 124 | |
| 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 } | |
| 132 | |
| 133 /* fade out inactive slides */ | |
| 134 .step:not(.active) { | |
| 135 opacity: 0.3; | |
| 136 } | |
| 137 | |
| 138 /* STEP SPECIFIC STYLES */ | |
| 139 | |
| 140 /* hint on the first slide */ | |
| 141 | |
| 142 .hint { | |
| 143 position: fixed; | |
| 144 left: 0; | |
| 145 right: 0; | |
| 146 bottom: 200px; | |
| 147 | |
| 148 background: rgba(0,0,0,0.5); | |
| 149 color: #EEE; | |
| 150 text-align: center; | |
| 151 | |
| 152 font-size: 50px; | |
| 153 padding: 20px; | |
| 154 | |
| 155 z-index: 100; | |
| 156 | |
| 157 opacity: 0; | |
| 158 | |
| 159 -webkit-transform: translateY(400px); | |
| 160 -moz-transform: translateY(400px); | |
| 161 -ms-transform: translateY(400px); | |
| 162 -o-transform: translateY(400px); | |
| 163 transform: translateY(400px); | |
| 164 | |
| 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 } | |
| 171 | |
| 172 .impress-on-license .hint { | |
| 173 opacity: 1; | |
| 174 | |
| 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; | |
| 180 | |
| 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 } | |
| 187 | |
| 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 } | |
| 195 | |
| 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 } | |
| 203 | |
| 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; | |
| 211 | |
| 212 color: white; | |
| 213 text-shadow: 4px 3px 8px black; | |
| 214 } | |
| 215 | |
| 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; | |
| 225 | |
| 226 color: white; | |
| 227 text-shadow: 4px 3px 8px black; | |
| 228 } | |
| 229 | |
| 230 #contents { | |
| 231 background-image: url('meefrauhand.svg'); | |
| 232 background-position: 90% 80%; | |
| 233 background-repeat: no-repeat; | |
| 234 color: #202020; | |
| 235 } | |
| 236 | |
| 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 } | |
| 244 | |
| 245 #contents ul { | |
| 246 font-size: 48px; | |
| 247 line-height: 64px; | |
| 248 padding-left: 96px; | |
| 249 } | |
| 250 | |
| 251 #topcat .smalltext, #tophybrid .smalltext { | |
| 252 font-size: 80px; | |
| 253 position: absolute; | |
| 254 top: -0.2em; | |
| 255 left: 1.7em; | |
| 256 | |
| 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 } | |
| 263 | |
| 264 #topcat h1 { | |
| 265 font-size: 180px; | |
| 266 line-height: 200px; | |
| 267 padding-top: 64px; | |
| 268 text-align: center; | |
| 269 | |
| 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 } | |
| 276 | |
| 277 #tophybrid h1 { | |
| 278 font-size: 180px; | |
| 279 line-height: 200px; | |
| 280 padding-top: 64px; | |
| 281 | |
| 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 } | |
| 288 | |
| 289 #topnative .smalltext { | |
| 290 font-size: 120px; | |
| 291 position: absolute; | |
| 292 top: 1.75em; | |
| 293 left: 0.6em; | |
| 294 | |
| 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 } | |
| 301 | |
| 302 #topnative h1 { | |
| 303 font-size: 200px; | |
| 304 position: relative; | |
| 305 top: -0.25em; | |
| 306 | |
| 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 } | |
| 313 | |
| 314 #topnative:not(.active) { | |
| 315 opacity: 0; | |
| 316 } | |
| 317 | |
| 318 #topnative:is(.active) { | |
| 319 opacity: 1; | |
| 320 } | |
| 321 | |
| 322 #topweb .smalltext { | |
| 323 font-size: 104px; | |
| 324 position: absolute; | |
| 325 top: 2em; | |
| 326 left: 1.4em; | |
| 327 | |
| 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 } | |
| 334 | |
| 335 #topweb h1 { | |
| 336 font-size: 200px; | |
| 337 position: relative; | |
| 338 top: -0.25em; | |
| 339 text-align: center; | |
| 340 | |
| 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 } | |
| 347 | |
| 348 #svgrich1:not(.active) { | |
| 349 opacity: 0; | |
| 350 } | |
| 351 | |
| 352 #svgrich1:is(.active) { | |
| 353 opacity: 1; | |
| 354 } | |
| 355 | |
| 356 /*#svgtizenarch1:not(.active) { | |
| 357 opacity: 0; | |
| 358 } | |
| 359 | |
| 360 #svgtizenarch1:is(.active) { | |
| 361 opacity: 1; | |
| 362 }*/ | |
| 363 | |
| 364 #svgtizenarch1, #svgtizenarch2 { | |
| 365 width: 820px; | |
| 366 padding-top: 48px; | |
| 367 margin-left: auto; | |
| 368 margin-right: auto; | |
| 369 } | |
| 370 | |
| 371 #svgrich2:not(.active) { | |
| 372 opacity: 0; | |
| 373 } | |
| 374 | |
| 375 #svgrich2:is(.active) { | |
| 376 opacity: 1; | |
| 377 } | |
| 378 | |
| 379 #svgrich3:not(.active) { | |
| 380 opacity: 0; | |
| 381 } | |
| 382 | |
| 383 #svgrich3:is(.active) { | |
| 384 opacity: 1; | |
| 385 } | |
| 386 | |
| 387 #kitplethora:not(.active) { | |
| 388 opacity: 0; | |
| 389 } | |
| 390 | |
| 391 #kitplethora:is(.active) { | |
| 392 opacity: 1; | |
| 393 } | |
| 394 | |
| 395 #svgappflow:not(.active) { | |
| 396 opacity: 0; | |
| 397 } | |
| 398 | |
| 399 #svgappflow:is(.active) { | |
| 400 opacity: 1; | |
| 401 } | |
| 402 | |
| 403 #topchoose1 .smalltext { | |
| 404 font-size: 130px; | |
| 405 position: absolute; | |
| 406 top: 1.5em; | |
| 407 left: 1em; | |
| 408 | |
| 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 } | |
| 415 | |
| 416 #topchoose1 h1 { | |
| 417 font-size: 200px; | |
| 418 position: relative; | |
| 419 top: -0.25em; | |
| 420 text-align: center; | |
| 421 | |
| 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 } | |
| 428 | |
| 429 #topchoose2:not(.active) { | |
| 430 opacity: 0; | |
| 431 } | |
| 432 | |
| 433 #topchoose2:is(.active) { | |
| 434 opacity: 1; | |
| 435 } | |
| 436 | |
| 437 #topchoose2 a { | |
| 438 font-size: 64px; | |
| 439 position: relative; | |
| 440 top: 2em; | |
| 441 left: 1.4em; | |
| 442 } | |
| 443 | |
| 444 #topwhy h1 { | |
| 445 font-size: 160px; | |
| 446 line-height: 150px; | |
| 447 position: relative; | |
| 448 top: -1em; | |
| 449 text-align: center; | |
| 450 | |
| 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 } | |
| 457 | |
| 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 } | |
| 468 | |
| 469 blockquote .author { | |
| 470 display: block; | |
| 471 text-align: right; | |
| 472 padding: 0 40px; | |
| 473 font-weight: 600; | |
| 474 font-size: 36px; | |
| 475 } | |
| 476 | |
| 477 #sdkstart h1, #sdkprovide h1, #sdkinteg h1, #sdkdemo h1 { | |
| 478 /*font-family: 'Open Sans', sans-serif;*/ | |
| 479 /*font-weight: 900;*/ | |
| 480 font-size: 200px; | |
| 481 | |
| 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 } | |
| 488 | |
| 489 #resources { | |
| 490 background-image: url('meegarbeit.svg'); | |
| 491 background-position: 90% 80%; | |
| 492 background-repeat: no-repeat; | |
| 493 } | |
| 494 | |
| 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 } | |
| 502 | |
| 503 #resources ul { | |
| 504 font-size: 36px; | |
| 505 line-height: 52px; | |
| 506 padding-left: 64px; | |
| 507 } | |
| 508 | |
| 509 #resources .ecrivain { | |
| 510 text-decoration: underline; | |
| 511 } | |
| 512 | |
| 513 #conclusion { | |
| 514 background-image: url('qrtizportdev.png'); | |
| 515 background-size: 300px 300px; | |
| 516 background-position: 10% 95%; | |
| 517 background-repeat: no-repeat; | |
| 518 } | |
| 519 | |
| 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 } | |
| 528 | |
| 529 #conclusion h2 { | |
| 530 text-align: center; | |
| 531 font-size: 72px; | |
| 532 font-weight: bold; | |
| 533 font-family: 'Open Sans', Arial, sans-serif; | |
| 534 } | |
| 535 | |
| 536 /* overview step */ | |
| 537 | |
| 538 #overview { | |
| 539 z-index: -1; | |
| 540 padding: 0; | |
| 541 } | |
| 542 | |
| 543 /* on overview step everything is visible */ | |
| 544 | |
| 545 .impress-on-overview .step { | |
| 546 opacity: 1; | |
| 547 cursor: pointer; | |
| 548 } | |
| 549 | |
| 550 /* | |
| 551 * SLIDE STEP STYLES | |
| 552 * | |
| 553 * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css | |
| 554 * | |
| 555 * ;) | |
| 556 */ | |
| 557 | |
| 558 .slide { | |
| 559 display: block; | |
| 560 | |
| 561 width: 1200px; | |
| 562 height: 600px; | |
| 563 | |
| 564 padding: 40px 60px; | |
| 565 | |
| 566 border-radius: 10px; | |
| 567 | |
| 568 background-color: white; | |
| 569 | |
| 570 box-shadow: 0 2px 6px rgba(0, 0, 0, .1); | |
| 571 border: 1px solid rgba(0, 0, 0, .3); | |
| 572 | |
| 573 font-family: 'Open Sans', Arial, sans-serif; | |
| 574 | |
| 575 color: rgb(102, 102, 102); | |
| 576 text-shadow: 0 2px 2px rgba(0, 0, 0, .1); | |
| 577 | |
| 578 font-size: 30px; | |
| 579 line-height: 36px; | |
| 580 | |
| 581 letter-spacing: -1px; | |
| 582 } | |
| 583 | |
| 584 .slide q { | |
| 585 display: block; | |
| 586 font-size: 50px; | |
| 587 line-height: 72px; | |
| 588 | |
| 589 margin-top: 100px; | |
| 590 } | |
| 591 | |
| 592 .slide q strong { | |
| 593 white-space: nowrap; | |
| 594 } | |
| 595 | |
| 596 | |
| 597 /* IMPRESS NOT SUPPORTED STYLES */ | |
| 598 | |
| 599 .fallback-message { | |
| 600 font-family: sans-serif; | |
| 601 line-height: 1.3; | |
| 602 | |
| 603 display: none; | |
| 604 width: 780px; | |
| 605 padding: 10px 10px 0; | |
| 606 margin: 20px auto; | |
| 607 | |
| 608 border-radius: 10px; | |
| 609 border: 1px solid #E4C652; | |
| 610 background: #EEDC94; | |
| 611 } | |
| 612 | |
| 613 .fallback-message p { | |
| 614 margin-bottom: 10px; | |
| 615 } | |
| 616 | |
| 617 .impress-disabled .step, | |
| 618 .impress-not-supported .step { | |
| 619 position: relative; | |
| 620 opacity: 1; | |
| 621 margin: 20px auto; | |
| 622 } | |
| 623 | |
| 624 .impress-not-supported .fallback-message { | |
| 625 display: block; | |
| 626 } | |
| 627 | |
| 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> | |
| 995 | |
| 996 <!-- class is renamed once javascript detects browser support --> | |
| 997 <body class="impress-not-supported"> | |
| 998 | |
| 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> | |
| 1003 | |
| 1004 <div id="impress"> | |
| 1005 | |
| 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> | |
| 1016 | |
| 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> | |
| 1022 | |
| 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> | |
| 1041 | |
| 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> | |
| 1046 | |
| 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> | |
| 1050 | |
| 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> | |
| 1055 | |
| 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> | |
| 1059 | |
| 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> | |
| 1063 | |
| 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> | |
| 1067 | |
| 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> | |
| 1072 | |
| 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> | |
| 1101 | |
| 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> | |
| 1106 | |
| 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> | |
| 1110 | |
| 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> | |
| 1114 | |
| 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> | |
| 1118 | |
| 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> | |
| 1125 | |
| 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> | |
| 1130 | |
| 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> | |
| 1134 | |
| 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> | |
| 1138 | |
| 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> | |
| 1142 | |
| 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> | |
| 1146 | |
| 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> | |
| 1150 | |
| 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> | |
| 1154 | |
| 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> | |
| 1167 | |
| 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> | |
| 1172 | |
| 1173 <div id="overview" class="step" data-x="2500" data-y="-4200" data-scale="12"> | |
| 1174 </div> | |
| 1175 | |
| 1176 <!--<div id="midlabel" class="step" data-x="3700" data-y="-3000" data-scale="6"> | |
| 1177 <h1>Tizen</h1> | |
| 1178 </div>--> | |
| 1179 | |
| 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> | |
| 1188 | |
| 1189 <script src="impress.js"></script> | |
| 1190 <script>impress().init();</script> | |
| 1191 | |
| 1192 </body> | |
| 1193 </html> |
