changeset
Introduce production changes, mention online lecture URL, and
Thu, 28 Feb 2013 21:46:37 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 28 Feb 2013 21:46:37 +0100
- changeset 22
- 545df6643bcd
- parent 13
- ee91ce4e01a7
- child 23
- 5366b8d38d6d
Introduce production changes, mention online lecture URL, and
integrate quick meme according to suggestion from Mike ELIAS.
| tizenporta/index.html | file | annotate | diff | comparison | revisions | |
| tizenporta/quickmeme.png | file | annotate | diff | comparison | revisions |
1.1 --- a/tizenporta/index.html Wed May 02 20:50:26 2012 +0200 1.2 +++ b/tizenporta/index.html Thu Feb 28 21:46:37 2013 +0100 1.3 @@ -68,11 +68,11 @@ 1.4 min-height: 740px; 1.5 1.6 background: rgb(215, 215, 215); 1.7 - background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(250, 250, 250)), to(rgb(160, 160, 160))); 1.8 - background: -webkit-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160)); 1.9 - background: -moz-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160)); 1.10 - background: -o-radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160)); 1.11 - background: radial-gradient(rgb(250, 250, 250), rgb(160, 160, 160)); 1.12 + background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(255, 255, 255)), to(rgb(160, 140, 80))); 1.13 + background: -webkit-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80)); 1.14 + background: -moz-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80)); 1.15 + background: -o-radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80)); 1.16 + background: radial-gradient(rgb(255, 255, 255), rgb(160, 140, 80)); 1.17 1.18 -webkit-font-smoothing: antialiased; 1.19 } 1.20 @@ -248,6 +248,15 @@ 1.21 padding-left: 96px; 1.22 } 1.23 1.24 +#contents a { 1.25 + color: inherit; 1.26 + text-decoration: none; 1.27 + padding: 0 0.1em; 1.28 + border-radius: 0.2em; 1.29 + background: rgba(220,220,220,0.5); 1.30 + text-shadow: 0 0 0; 1.31 + } 1.32 + 1.33 #topcat .smalltext, #tophybrid .smalltext { 1.34 font-size: 80px; 1.35 position: absolute; 1.36 @@ -274,6 +283,17 @@ 1.37 transform: translateZ(50px); 1.38 } 1.39 1.40 +#tophybrid .extratext { 1.41 + width: 200px; 1.42 + color: #808080; 1.43 + font-size: 68px; 1.44 + position: absolute; 1.45 + top: 1.5em; 1.46 + left: 10em; 1.47 + text-align: right; 1.48 + line-height: 64px; 1.49 + } 1.50 + 1.51 #tophybrid h1 { 1.52 font-size: 180px; 1.53 line-height: 200px; 1.54 @@ -319,6 +339,14 @@ 1.55 opacity: 1; 1.56 } 1.57 1.58 +#picnative:not(.active) { 1.59 + opacity: 0; 1.60 +} 1.61 + 1.62 +#picnative:is(.active) { 1.63 + opacity: 1; 1.64 +} 1.65 + 1.66 #topweb .smalltext { 1.67 font-size: 104px; 1.68 position: absolute; 1.69 @@ -400,6 +428,33 @@ 1.70 opacity: 1; 1.71 } 1.72 1.73 +#specases .smalltext { 1.74 + font-size: 92px; 1.75 + line-height: 116px; 1.76 + position: absolute; 1.77 + top: 1.25em; 1.78 + left: 2.5em; 1.79 + 1.80 + -webkit-transform: translateZ(20px); 1.81 + -moz-transform: translateZ(20px); 1.82 + -ms-transform: translateZ(20px); 1.83 + -o-transform: translateZ(20px); 1.84 + transform: translateZ(20px); 1.85 + } 1.86 + 1.87 +#specases h1 { 1.88 + font-size: 160px; 1.89 + position: relative; 1.90 + top: -.8em; 1.91 + text-align: center; 1.92 + 1.93 + -webkit-transform: translateZ(50px); 1.94 + -moz-transform: translateZ(50px); 1.95 + -ms-transform: translateZ(50px); 1.96 + -o-transform: translateZ(50px); 1.97 + transform: translateZ(50px); 1.98 + } 1.99 + 1.100 #topchoose1 .smalltext { 1.101 font-size: 130px; 1.102 position: absolute; 1.103 @@ -488,8 +543,9 @@ 1.104 1.105 #resources { 1.106 background-image: url('meegarbeit.svg'); 1.107 - background-position: 90% 80%; 1.108 + background-position: 90% 70%; 1.109 background-repeat: no-repeat; 1.110 + color: #202020; 1.111 } 1.112 1.113 #resources h1 { 1.114 @@ -502,24 +558,27 @@ 1.115 1.116 #resources ul { 1.117 font-size: 36px; 1.118 - line-height: 52px; 1.119 + line-height: 44px; 1.120 padding-left: 64px; 1.121 } 1.122 1.123 -#resources .ecrivain { 1.124 +#resources .buchtit { 1.125 text-decoration: underline; 1.126 } 1.127 1.128 #conclusion { 1.129 - background-image: url('qrtizportdev.png'); 1.130 - background-size: 300px 300px; 1.131 - background-position: 10% 95%; 1.132 + background-size: 100% 100%; 1.133 + background-image: url(schlusshintergrund.png); 1.134 background-repeat: no-repeat; 1.135 + background-attachment: fixed; 1.136 + background-position: top; 1.137 + 1.138 + color: white; 1.139 + text-shadow: 8px 6px 12px black; 1.140 } 1.141 1.142 #conclusion h1 { 1.143 padding-top: 64px; 1.144 - text-align: center; 1.145 padding-bottom: 96px; 1.146 font-size: 200px; 1.147 font-weight: bold; 1.148 @@ -527,10 +586,16 @@ 1.149 } 1.150 1.151 #conclusion h2 { 1.152 - text-align: center; 1.153 - font-size: 72px; 1.154 + width: 600px; 1.155 + padding-left: 360px; 1.156 + font-size: 96px; 1.157 font-weight: bold; 1.158 font-family: 'Open Sans', Arial, sans-serif; 1.159 + line-height: 100px; 1.160 + } 1.161 + 1.162 +#conclusion img { 1.163 + float: left; 1.164 } 1.165 1.166 /* overview step */ 1.167 @@ -1023,12 +1088,12 @@ 1.168 <div id="contents" class="step slide" data-x="1300" data-y="-1920"> 1.169 <h1>Contents</h1> 1.170 <ul> 1.171 - <li>Mobile App <b>Categories</b></li> 1.172 - <li><b>Web</b> App Frameworks</li> 1.173 - <li><b>Native</b> App Frameworks</li> 1.174 - <li><b>Hybrid</b> App Frameworks</li> 1.175 - <li>Tizen SDK <b>Provision</b></li> 1.176 - <li>Tizen SDK <b>Integration</b></li> 1.177 + <li><a href="index.html#/topcat">Mobile App <b>Categories</b></a></li> 1.178 + <li><a href="index.html#/topnative"><b>Native</b> App Architecture</a></li> 1.179 + <li><a href="index.html#/topweb"><b>Web</b> App Frameworks</a></li> 1.180 + <li><a href="index.html#/tophybrid"><b>Hybrid</b> App Frameworks</a></li> 1.181 + <li><a href="index.html#/sdkprovide">Tizen SDK <b>Provision</b></a></li> 1.182 + <li><a href="index.html#/sdkinteg">Tizen SDK <b>Integration</b></a></li> 1.183 <!--<li>Web App Frameworks</li> 1.184 <li>Hybrid Frameworks</li> 1.185 <li>License Compatibility </li> 1.186 @@ -1044,11 +1109,11 @@ 1.187 <h1>Categories</h1> 1.188 </div> 1.189 1.190 - <div id="svgrich1" class="step" data-x="1050" data-y="-240" data-z="-1000" data-scale="0.1"> 1.191 + <div id="svgrich1" class="step" data-x="1052" data-y="-240" data-z="-1000" data-scale="0.125"> 1.192 <img src="richreach.svg" width="100%" /> 1.193 </div> 1.194 1.195 - <div id="topnative" class="step" data-x="200" data-y="-560" data-z="-1000" data-scale="0.3"> 1.196 + <div id="topnative" class="step" data-x="200" data-y="-570" data-z="-1000" data-scale="0.3"> 1.197 <span class="smalltext">Development</span> 1.198 <h1>Native App</h1> 1.199 </div> 1.200 @@ -1061,6 +1126,10 @@ 1.201 <img src="tizenarch.svg" width="100%" height="720px" /> 1.202 </div> 1.203 1.204 + <div id="picnative" class="step" data-x="-1800" data-y="-1100" data-z="-1000" data-scale="0.2"> 1.205 + <img src="quickmeme.png" width="100%" /> 1.206 + </div> 1.207 + 1.208 <div id="svgrich3" class="step" data-x="-1815" data-y="-800" data-z="0" data-scale="1.5"> 1.209 <img src="appsweb.svg" width="100%" /> 1.210 </div> 1.211 @@ -1080,7 +1149,7 @@ 1.212 <li class="item fmwork-5">Glovebox</li> 1.213 <li class="item fmwork-6">Lungo</li> 1.214 <li class="item fmwork-7">Appmobi</li> 1.215 - <li class="item fmwork-8">Xooxdoo</li> 1.216 + <li class="item fmwork-8">Enyo</li> 1.217 <li class="item fmwork-9">Appcraft</li> 1.218 <li class="item fmwork-10">Wink</li> 1.219 <li class="item fmwork-11">Xui</li> 1.220 @@ -1099,24 +1168,31 @@ 1.221 </ul> 1.222 </div> 1.223 1.224 - <div id="topchoose1" class="step" data-x="-2755" data-y="-3850" data-z="-1000" data-rotate="180" data-scale="2"> 1.225 + <div id="specases" class="step" data-x="-2755" data-y="-3700" data-z="-1000" data-rotate="180" data-scale=".5"> 1.226 + <!-- Paul IRISH with best practices --> 1.227 + <!-- Principle of progressive enhancement --> 1.228 + <span class="smalltext">HTML5Boilerplate Modernizr</span> 1.229 + <h1>Special Cases</h1> 1.230 + </div> 1.231 + 1.232 + <div id="topchoose1" class="step" data-x="-2755" data-y="-4550" data-z="-1000" data-rotate="180" data-scale="2"> 1.233 <span class="smalltext">a framework</span> 1.234 <h1>Choosing</h1> 1.235 </div> 1.236 1.237 - <div id="svgappflow" class="step" data-x="-2740" data-y="-3800" data-z="-1000" data-rotate="180" data-scale="0.1"> 1.238 + <div id="svgappflow" class="step" data-x="-2740" data-y="-4500" data-z="-1000" data-rotate="180" data-scale="0.1"> 1.239 <img src="newappflow.svg" width="100%" /> 1.240 </div> 1.241 1.242 - <div id="topchoose2" class="step" data-x="-2755" data-y="-4050" data-z="-1000" data-rotate="180" data-scale="2"> 1.243 + <div id="topchoose2" class="step" data-x="-2755" data-y="-4850" data-z="-1000" data-rotate="180" data-scale="2"> 1.244 <a target="_blank" href="http://www.markus-falk.com/mobile-frameworks-comparison-chart/">with Markus FALK's chart</a> 1.245 </div> 1.246 1.247 - <div id="topwhy" class="step" data-x="-2755" data-y="-5450" data-z="-1000" data-rotate="180" data-scale="2"> 1.248 + <div id="topwhy" class="step" data-x="-2755" data-y="-6250" data-z="-1000" data-rotate="180" data-scale="2"> 1.249 <h1>Why a Web Framework?</h1> 1.250 </div> 1.251 1.252 - <div id="rasterwhy" class="step" data-x="-2755" data-y="-5450" data-z="-500" data-rotate="180" data-scale="2"> 1.253 + <div id="rasterwhy" class="step" data-x="-2755" data-y="-6250" data-z="-500" data-rotate="180" data-scale="2"> 1.254 <blockquote>“2012 will come to be known as the year of the web 1.255 runtimes. Officially there is no native development. Tizen 1.256 is an html5 affair only.” 1.257 @@ -1125,6 +1201,7 @@ 1.258 1.259 <div id="tophybrid" class="step" data-x="1000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4"> 1.260 <span class="smalltext">Leveraging</span> 1.261 + <span class="extratext">Cordova Titanium Rhomobile</span> 1.262 <h1>Hybrid Frameworks</h1> 1.263 </div> 1.264 1.265 @@ -1155,19 +1232,22 @@ 1.266 <div id="resources" class="step slide" data-x="0" data-y="-2600" data-rotate="0"> 1.267 <h1>Resources</h1> 1.268 <ul> 1.269 - <li>jQuery Mobile: Up and Running, <span class="ecrivain">Maximiliano FIRTMAN</span> 1.270 - <li>Beginning Phonegap, <span class="ecrivain">Thomas MYER</span> 1.271 + <li><span class="buchtit">jQuery Mobile: Up and Running</span>, Maximiliano FIRTMAN</li> 1.272 + <li><span class="buchtit">Mobile Design Pattern Gallery</span>, Theresa NEIL</li> 1.273 + <li><span class="buchtit">Beginning Phonegap</span>, Thomas MYER</li> 1.274 <li><a href="http://docs.phonegap.com/">http://docs.phonegap.com/</a></li> 1.275 <li><a href="http://www.modernizr.com/">http://www.modernizr.com/</a></li> 1.276 <li><a href="http://www.dojotoolkit.org/">http://www.dojotoolkit.org/</a></li> 1.277 <li><a href="http://www.jquerymobile.com/">http://www.jquerymobile.com/</a></li> 1.278 <li><a href="http://www.sencha.com/products/touch/">http://www.sencha.com/products/touch/</a></li> 1.279 + <li><a href="ftp://ftp.europalab.com/pub/doc/lect/tizportdev/">ftp://ftp.europalab.com/pub/doc/lect/tizportdev/</a></li> 1.280 </ul> 1.281 </div> 1.282 1.283 <div id="conclusion" class="step slide" data-x="-1300" data-y="-2600" data-rotate="0"> 1.284 - <h1>Thank You</h1> 1.285 - <h2>Tizen Application Portability</h2> 1.286 + <h1>Thank You!</h1> 1.287 + <img src="qrtizportdev.png" width="300px" /> 1.288 + <h2><span style="color: aqua;">Tizen</span> <span style="color: orange;">Application</span> <span style="color: red;">Portability</span></h2> 1.289 </div> 1.290 1.291 <div id="overview" class="step" data-x="2500" data-y="-4200" data-scale="12">
2.1 Binary file tizenporta/quickmeme.png has changed
