changeset
Improve from first draft quality, make corrections, and change formatting.
Sat, 05 May 2012 16:08:17 +0200
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Sat, 05 May 2012 16:08:17 +0200
- changeset 14
- 5691915dae1d
- parent 13
- ee91ce4e01a7
- child 15
- a6e4a053743f
Improve from first draft quality, make corrections, and change formatting.
| tizenporta/index.html | 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 Sat May 05 16:08:17 2012 +0200 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,18 @@ 1.37 transform: translateZ(50px); 1.38 } 1.39 1.40 +#tophybrid .extratext { 1.41 + width: 200px; 1.42 + padding-right: 0; 1.43 + color: #808080; 1.44 + font-size: 72px; 1.45 + position: absolute; 1.46 + top: 1.5em; 1.47 + left: 9.5em; 1.48 + text-align: right; 1.49 + line-height: 60px; 1.50 + } 1.51 + 1.52 #tophybrid h1 { 1.53 font-size: 180px; 1.54 line-height: 200px; 1.55 @@ -400,6 +421,33 @@ 1.56 opacity: 1; 1.57 } 1.58 1.59 +#specases .smalltext { 1.60 + font-size: 92px; 1.61 + line-height: 116px; 1.62 + position: absolute; 1.63 + top: 1.25em; 1.64 + left: 2.5em; 1.65 + 1.66 + -webkit-transform: translateZ(20px); 1.67 + -moz-transform: translateZ(20px); 1.68 + -ms-transform: translateZ(20px); 1.69 + -o-transform: translateZ(20px); 1.70 + transform: translateZ(20px); 1.71 + } 1.72 + 1.73 +#specases h1 { 1.74 + font-size: 160px; 1.75 + position: relative; 1.76 + top: -.8em; 1.77 + text-align: center; 1.78 + 1.79 + -webkit-transform: translateZ(50px); 1.80 + -moz-transform: translateZ(50px); 1.81 + -ms-transform: translateZ(50px); 1.82 + -o-transform: translateZ(50px); 1.83 + transform: translateZ(50px); 1.84 + } 1.85 + 1.86 #topchoose1 .smalltext { 1.87 font-size: 130px; 1.88 position: absolute; 1.89 @@ -488,8 +536,9 @@ 1.90 1.91 #resources { 1.92 background-image: url('meegarbeit.svg'); 1.93 - background-position: 90% 80%; 1.94 + background-position: 90% 70%; 1.95 background-repeat: no-repeat; 1.96 + color: #202020; 1.97 } 1.98 1.99 #resources h1 { 1.100 @@ -502,24 +551,27 @@ 1.101 1.102 #resources ul { 1.103 font-size: 36px; 1.104 - line-height: 52px; 1.105 + line-height: 44px; 1.106 padding-left: 64px; 1.107 } 1.108 1.109 -#resources .ecrivain { 1.110 +#resources .buchtit { 1.111 text-decoration: underline; 1.112 } 1.113 1.114 #conclusion { 1.115 - background-image: url('qrtizportdev.png'); 1.116 - background-size: 300px 300px; 1.117 - background-position: 10% 95%; 1.118 + background-size: 100% 100%; 1.119 + background-image: url(schlusshintergrund.png); 1.120 background-repeat: no-repeat; 1.121 + background-attachment: fixed; 1.122 + background-position: top; 1.123 + 1.124 + color: white; 1.125 + text-shadow: 8px 6px 12px black; 1.126 } 1.127 1.128 #conclusion h1 { 1.129 padding-top: 64px; 1.130 - text-align: center; 1.131 padding-bottom: 96px; 1.132 font-size: 200px; 1.133 font-weight: bold; 1.134 @@ -527,10 +579,18 @@ 1.135 } 1.136 1.137 #conclusion h2 { 1.138 - text-align: center; 1.139 - font-size: 72px; 1.140 + display: inline; 1.141 + width: 600px; 1.142 + padding-left: 64px; 1.143 + font-size: 96px; 1.144 font-weight: bold; 1.145 font-family: 'Open Sans', Arial, sans-serif; 1.146 + line-height: 108px; 1.147 + } 1.148 + 1.149 +#conclusion img { 1.150 + display: inline; 1.151 + padding-left: 48px; 1.152 } 1.153 1.154 /* overview step */ 1.155 @@ -1023,12 +1083,12 @@ 1.156 <div id="contents" class="step slide" data-x="1300" data-y="-1920"> 1.157 <h1>Contents</h1> 1.158 <ul> 1.159 - <li>Mobile App <b>Categories</b></li> 1.160 - <li><b>Web</b> App Frameworks</li> 1.161 - <li><b>Native</b> App Frameworks</li> 1.162 - <li><b>Hybrid</b> App Frameworks</li> 1.163 - <li>Tizen SDK <b>Provision</b></li> 1.164 - <li>Tizen SDK <b>Integration</b></li> 1.165 + <li><a href="index.html#/topcat">Mobile App <b>Categories</b></a></li> 1.166 + <li><a href="index.html#/topnative"><b>Native</b> App Frameworks</a></li> 1.167 + <li><a href="index.html#/topweb"><b>Web</b> App Frameworks</a></li> 1.168 + <li><a href="index.html#/tophybrid"><b>Hybrid</b> App Frameworks</a></li> 1.169 + <li><a href="index.html#/sdkprovide">Tizen SDK <b>Provision</b></a></li> 1.170 + <li><a href="index.html#/sdkinteg">Tizen SDK <b>Integration</b></a></li> 1.171 <!--<li>Web App Frameworks</li> 1.172 <li>Hybrid Frameworks</li> 1.173 <li>License Compatibility </li> 1.174 @@ -1044,11 +1104,11 @@ 1.175 <h1>Categories</h1> 1.176 </div> 1.177 1.178 - <div id="svgrich1" class="step" data-x="1050" data-y="-240" data-z="-1000" data-scale="0.1"> 1.179 + <div id="svgrich1" class="step" data-x="1052" data-y="-240" data-z="-1000" data-scale="0.125"> 1.180 <img src="richreach.svg" width="100%" /> 1.181 </div> 1.182 1.183 - <div id="topnative" class="step" data-x="200" data-y="-560" data-z="-1000" data-scale="0.3"> 1.184 + <div id="topnative" class="step" data-x="200" data-y="-570" data-z="-1000" data-scale="0.3"> 1.185 <span class="smalltext">Development</span> 1.186 <h1>Native App</h1> 1.187 </div> 1.188 @@ -1099,24 +1159,29 @@ 1.189 </ul> 1.190 </div> 1.191 1.192 - <div id="topchoose1" class="step" data-x="-2755" data-y="-3850" data-z="-1000" data-rotate="180" data-scale="2"> 1.193 + <div id="specases" class="step" data-x="-2755" data-y="-3700" data-z="-1000" data-rotate="180" data-scale=".5"> 1.194 + <span class="smalltext">HTML5Boilerplate Modernizr</span> 1.195 + <h1>Special Cases</h1> 1.196 + </div> 1.197 + 1.198 + <div id="topchoose1" class="step" data-x="-2755" data-y="-4550" data-z="-1000" data-rotate="180" data-scale="2"> 1.199 <span class="smalltext">a framework</span> 1.200 <h1>Choosing</h1> 1.201 </div> 1.202 1.203 - <div id="svgappflow" class="step" data-x="-2740" data-y="-3800" data-z="-1000" data-rotate="180" data-scale="0.1"> 1.204 + <div id="svgappflow" class="step" data-x="-2740" data-y="-4500" data-z="-1000" data-rotate="180" data-scale="0.1"> 1.205 <img src="newappflow.svg" width="100%" /> 1.206 </div> 1.207 1.208 - <div id="topchoose2" class="step" data-x="-2755" data-y="-4050" data-z="-1000" data-rotate="180" data-scale="2"> 1.209 + <div id="topchoose2" class="step" data-x="-2755" data-y="-4850" data-z="-1000" data-rotate="180" data-scale="2"> 1.210 <a target="_blank" href="http://www.markus-falk.com/mobile-frameworks-comparison-chart/">with Markus FALK's chart</a> 1.211 </div> 1.212 1.213 - <div id="topwhy" class="step" data-x="-2755" data-y="-5450" data-z="-1000" data-rotate="180" data-scale="2"> 1.214 + <div id="topwhy" class="step" data-x="-2755" data-y="-6250" data-z="-1000" data-rotate="180" data-scale="2"> 1.215 <h1>Why a Web Framework?</h1> 1.216 </div> 1.217 1.218 - <div id="rasterwhy" class="step" data-x="-2755" data-y="-5450" data-z="-500" data-rotate="180" data-scale="2"> 1.219 + <div id="rasterwhy" class="step" data-x="-2755" data-y="-6250" data-z="-500" data-rotate="180" data-scale="2"> 1.220 <blockquote>“2012 will come to be known as the year of the web 1.221 runtimes. Officially there is no native development. Tizen 1.222 is an html5 affair only.” 1.223 @@ -1125,6 +1190,7 @@ 1.224 1.225 <div id="tophybrid" class="step" data-x="1000" data-y="-5000" data-z="0" data-rotate="360" data-scale="4"> 1.226 <span class="smalltext">Leveraging</span> 1.227 + <span class="extratext">Rhomobile Titanium Cordova</span> 1.228 <h1>Hybrid Frameworks</h1> 1.229 </div> 1.230 1.231 @@ -1155,19 +1221,22 @@ 1.232 <div id="resources" class="step slide" data-x="0" data-y="-2600" data-rotate="0"> 1.233 <h1>Resources</h1> 1.234 <ul> 1.235 - <li>jQuery Mobile: Up and Running, <span class="ecrivain">Maximiliano FIRTMAN</span> 1.236 - <li>Beginning Phonegap, <span class="ecrivain">Thomas MYER</span> 1.237 + <li><span class="buchtit">jQuery Mobile: Up and Running</span>, Maximiliano FIRTMAN</li> 1.238 + <li><span class="buchtit">Mobile Design Pattern Gallery</span>, Theresa NEIL</li> 1.239 + <li><span class="buchtit">Beginning Phonegap</span>, Thomas MYER</li> 1.240 <li><a href="http://docs.phonegap.com/">http://docs.phonegap.com/</a></li> 1.241 <li><a href="http://www.modernizr.com/">http://www.modernizr.com/</a></li> 1.242 <li><a href="http://www.dojotoolkit.org/">http://www.dojotoolkit.org/</a></li> 1.243 <li><a href="http://www.jquerymobile.com/">http://www.jquerymobile.com/</a></li> 1.244 <li><a href="http://www.sencha.com/products/touch/">http://www.sencha.com/products/touch/</a></li> 1.245 + <li><a href="http://ftp.europalab.com/pub/doc/lect/tizenportdev/">http://ftp.europalab.com/pub/doc/lect/tizenportdev/</a></li> 1.246 </ul> 1.247 </div> 1.248 1.249 <div id="conclusion" class="step slide" data-x="-1300" data-y="-2600" data-rotate="0"> 1.250 - <h1>Thank You</h1> 1.251 - <h2>Tizen Application Portability</h2> 1.252 + <h1>Thank You!</h1> 1.253 + <img src="qrtizportdev.png" width="300px" /> 1.254 + <h2><span style="color: aqua;">Tizen</span> <span style="color: orange;">Application</span> <span style="color: green;">Portability</span></h2> 1.255 </div> 1.256 1.257 <div id="overview" class="step" data-x="2500" data-y="-4200" data-scale="12">
