1 fullpage=true 2 page.title=Develop 3 header.hide=1 4 carousel=1 5 tabbedList=1 6 @jd:body 7 8 <style> 9 #noplayer-message { 10 position:absolute;top:50%;left:0;width:100%;z-index:-1;text-align:center;display:none; 11 } 12 #player-frame object {z-index:1;} 13 </style> 14 15 <div id="player-wrapper"> 16 <div id="player-frame"> 17 <div id="noplayer-message"> 18 <!-- busted flash player message --> 19 Your video is supposed to appear here.<br/> 20 Make sure you have the <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash® Player</a>. 21 </div> 22 <div id="player"><!-- Youtube embeds here... actually replaces this div --></div> 23 <a class="close" onclick="$('#player-wrapper').hide()">close video</a> 24 </div> 25 </div> 26 <div class="wrap"> 27 <!-- Slideshow --> 28 <div class="slideshow-container slideshow-develop col-16"> 29 <a href="" class="slideshow-prev">Prev</a> 30 <a href="" class="slideshow-next">Next</a> 31 <div class="frame"> 32 <ul> 33 <li class="item carousel-home"> 34 <div class="col-8"> 35 <img 36 src="http://4.bp.blogspot.com/-lfjzgG5Dqrk/UHMThRtpRwI/AAAAAAAABpk/h4d3nsmkgPM/s400/mint.png" 37 class="play no-shadow no-transform" /> 38 </div> 39 <div class="content-right col-6"> 40 <h2>Building Great Apps for Tablets</h2> 41 <p>Tablets are a growing part of the Android installed base and they offer new opportunities for user engagement and monetization. If you are targeting tablets, check out the <strong>Tablet App Quality Checklist</strong> for tips and techniques on how to deliver a great app experience for tablet users. </p> 42 <p><a 43 href="/distribute/googleplay/quality/tablet.html" class="button">Read 44 more</a></p> 45 </div> 46 </li> 47 <li class="item carousel-home"> 48 <div class="col-8"> 49 <img 50 src="http://1.bp.blogspot.com/-6K1kfNOdek8/T72bXvtTSQI/AAAAAAAABmw/kYzmJt0_328/s1600/google-play-subscriptions.png" class="play"></div> 51 <div class="content-right col-6"> 52 <h2>In-app Subscriptions with Trials</h2> 53 <p>You can now set up a <strong>free trial period</strong> for any Google Play in-app subscription, making it easy for users try your subscriber content before automatically converting to a full subscription. Free trials give you a new way to bring users into your products and engage them effectively. </p> 54 <p><a class="button" 55 href="http://dirkbd.mtv:8809/guide/google/play/billing/billing_subscriptions.html#trials">Read 56 more</a></p> 57 </div> 58 </li> 59 <li class="item carousel-home"> 60 <div class="col-8"> 61 <img 62 src="http://2.bp.blogspot.com/-MgN5DnoO5XU/UHYGYzTcAOI/AAAAAAAABs4/jTS7sKkfBcM/s1600/pubsites.png" class="play"></div> 63 <div class="content-right col-6"> 64 <p class="title-intro">From the blog:</p> 65 <h2>New Google Play Developer Console</h2> 66 <p>All developers can now try the <strong>new Google Play Developer Console</strong>. With a streamlined publishing flow, new language options, and new user ratings statistics, youll have better tools for delivering great Android apps that delight users.</p> 67 <p><a 68 href="http://android-developers.blogspot.com/2012/10/new-google-play-developer-console.html" class="button">Read 69 more</a></p> 70 </div> 71 </li> 72 <li class="item carousel-home"> 73 <div class="col-8"> 74 <img 75 src="http://4.bp.blogspot.com/-g05If_eKKRQ/UAcrVLI-OYI/AAAAAAAAAr8/AWvunVb5S-w/s320/nexus7.png" 76 class="play no-shadow no-transform" /> 77 </div> 78 <div class="content-right col-6"> 79 <p class="title-intro">From the blog:</p> 80 <h2>Getting Your App Ready for Jelly Bean and Nexus 7</h2> 81 <p>For many people, their first taste of Jelly Bean will be on the beautiful 82 <strong>Nexus 7 tablet</strong>. Most applications will run just fine on Nexus 7, but who wants 83 their app to be just fine? Here are some tips for optimizing your app 84 to make the most of this device.</p> 85 <p><a 86 href="http://android-developers.blogspot.com/2012/07/getting-your-app-ready-for-jelly-bean.html" class="button">Read 87 more</a></p> 88 </div> 89 </li> 90 </ul> 91 </div> 92 </div> 93 <!-- /End slideshow --> 94 </div> 95 <div class="wrap"> 96 <!-- news and feature feed --> 97 <div class="feed col-8" style="margin-left:0"> 98 <ul class="feed-nav"> 99 <li class="active">DEVELOPER NEWS</li> 100 <li>FEATURED DOCS</li> 101 </ul> 102 <div class="feed-container"> 103 <div class="feed-frame"> 104 <!-- DEVELOPER NEWS --> 105 <ul> 106 <li><a href="http://android-developers.blogspot.com/2012/10/google-play-seller-support-in-india.html"> 107 <div class="feed-image" style="background:url('http://4.bp.blogspot.com/-ekT-9XQi0YY/UH7WT2XjSdI/AAAAAAAABwc/fI5QaPi7QEk/s320/india-apps1.png') no-repeat 0 0"></div> 108 <h4>Google Play Seller Support in India</h4> 109 <p>Developers in India can sell paid applications, in-app products, and subscriptions in Google Play, with monthly payouts to their local bank accounts...</p> 110 </a></li> 111 <li><a href="http://android-developers.blogspot.com/2012/09/google-play-services-and-oauth-identity.html"> 112 <div class="feed-image" style="background:url('https://lh4.ggpht.com/7z4NItEg-X21zvFGAarKonk-VaysBYthJ30u1JjaQ0-5fjyHNawnmoNeG--4FCACog=w124') no-repeat 0 0"></div> 113 <h4>Google Play services and OAuth Tools</h4> 114 <p>The rollout of Google Play services to all Android 2.2+ devices worldwide is now complete, and all of those devices now have new tools for working with OAuth 2.0 tokens...</p> 115 </a></li> 116 <li><a href="http://android-developers.blogspot.com/2012/08/creating-your-own-spelling-checker.html"> 117 <div class="feed-image" style="background:url('http://2.bp.blogspot.com/-QKlztEdM1aA/UC1bH6Kv4UI/AAAAAAAAADo/fQS8-EfBYIQ/s320/spell-check-framed-new.png') no-repeat 0 0"></div> 118 <h4>Creating A Spelling Checker Service</h4> 119 <p>If you are an IME developer, the Spelling Checker framework gives you a great way to provide an even better experience for your users...</p> 120 </a></li> 121 <li><a href="http://android-developers.blogspot.com/2012/04/accessibility-are-you-serving-all-your.html"> 122 <div class="feed-image"></div> 123 <h4>Accessibility</h4> 124 <p>We recently published some new resources to help developers make their Android applications more accessible... </p> 125 </a></li> 126 </ul> 127 <!-- FEATURED DOCS --> 128 <ul> 129 <li><a href="{@docRoot}distribute/googleplay/spotlight/tablets.html"> 130 <h4>Tablet Stories</h4> 131 <p>More developers are investing in a full tablet experience for their apps. Here are some stories from developers who are seeing real results as they expand their offering to include Android tablets. </p> 132 </a></li> 133 <li><a href="{@docRoot}distribute/googleplay/quality/core.html"> 134 <h4>Core App Quality Guidelines</h4> 135 <p>This document helps you assess basic aspects of quality in your app through a compact set of core app quality criteria and associated tests. All Android apps should meet these criteria.</p> 136 </a></li> 137 <li><a href="{@docRoot}guide/topics/ui/notifiers/notifications.html"> 138 <h4>Updated Notifications API Guide</h4> 139 <p>The Notifications API Guide is updated to include information about building Jelly Bean rich notifications using the Support Library APIs for backwards-compatibility.</p> 140 </a></li> 141 <li><a href="{@docRoot}guide/topics/ui/dialogs.html"> 142 <h4>Updated Dialogs API Guide</h4> 143 <p>The Dialogs API Guide now shows to use DialogFragment class, a simpler way to manage your dialogs and embed them in alternative layouts.</p> 144 </a></li> 145 </ul> 146 </div> 147 </div> 148 </div> <!-- /news and feature feed --> 149 <!-- video feed --> 150 <div class="feed col-8" style="margin-right:0"> 151 <ul class="feed-nav"> 152 <li class="active">DEVELOPERS LIVE</li> 153 <li>VIDEO PLAYLISTS</li> 154 </ul> 155 <div class="feed-container"> 156 <div class="feed-frame"> 157 <ul id="DevelopersLive"> 158 </ul> 159 <ul id="VideoPlaylists"> 160 </ul> 161 </div> 162 </div> 163 </div> 164 <!-- /video feed --> 165 </div> 166 167 <br class="clearfix"/> 168 169 170 171 172 173 174 175 176 177 178 <script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script> 179 <script type="text/javascript"> 180 181 /* Load a video into the player box. 182 * @param id The YouTube video ID 183 * @param title The video title to display in the player box (character escaped) 184 * @param autoplay Whether to automatically play the video 185 */ 186 function loadVideo(id, title, autoplay) { 187 swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' + 188 (autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'}); 189 $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>"); 190 $("#player-wrapper").show(); 191 setTimeout(function(){$('#noplayer-message').show()}, 2000); 192 } 193 194 /* Draw all videos from a playlist into a 'videoPreviews' list 195 * @param data The feed data returned from the youtube request 196 */ 197 function renderVideoPlaylists(data) { 198 var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description 199 var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description 200 var MAX_LIST_LENGTH = 4; // number of videos to put in the list 201 var feed = data.feed; 202 var entries = feed.entry || []; 203 var playlistId = feed.yt$playlistId.$t; 204 205 var $ulVideos = $('<ul style="display:none"/>'); 206 var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t; 207 208 var $liPlaylist = $('<li class="playlist"></li>'); 209 var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>'); 210 $liPlaylist.append($aPlaylist); 211 $aPlaylist.append('<h4>' + feed.title.$t + '</h4>'); 212 213 var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH); 214 playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 215 $aPlaylist.append('<p>' + playlistDescription + '</p>'); 216 217 // Loop through each entry (each video) and add it to the 'videoPreviews' list 218 var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list 219 for (var i = 0; i < length; i++) { 220 var entry = entries[i]; 221 222 var title = entry.title.$t; 223 var id = entry.media$group.yt$videoid.$t; 224 var thumbUrl = entry.media$group.media$thumbnail[0].url; 225 var fullDescription = entry.media$group.media$description.$t; 226 var playerUrl = entry.media$group.media$content[0].url; 227 228 var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH); 229 shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 230 231 var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>'); 232 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); 233 var pShortDescription = $('<p>' + shortDescription + '</p>'); 234 var h5Title = "<h5>" + title + "</h5>"; 235 var li = $('<li class="playlist-video"/>'); 236 237 li.append(a); 238 a.append(img).append(h5Title).append(pShortDescription); 239 240 $ulVideos.append(li); 241 242 // use the first entry's thumbnail for the playlist 243 if (i == 0) { 244 $aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>'); 245 } 246 } 247 248 if (feed.entry.length > MAX_LIST_LENGTH) { 249 // add item to go to youtube for playlist 250 $ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=PL' + playlistId + '">More »</a></li>'); 251 } 252 253 $liPlaylist.append($ulVideos); 254 $('#VideoPlaylists').append($liPlaylist); 255 } 256 257 258 function renderDevelopersLivePlaylist(data) { 259 260 var MAX_DESC_LENGTH = 125; // the length at which we will trim the description 261 var feed = data.feed; 262 var entries = feed.entry || []; 263 var playlistId = feed.yt$playlistId.$t; 264 265 var ul = $('#DevelopersLive'); 266 267 // Loop through each entry (each video) and add it to the '#DevelopersLive' list 268 for (var i = 0; i < 4; i++) { 269 var entry = entries[i]; 270 271 var title = entry.title.$t; 272 var id = entry.media$group.yt$videoid.$t; 273 var thumbUrl = entry.media$group.media$thumbnail[0].url; 274 var fullDescription = entry.media$group.media$description.$t; 275 var playerUrl = entry.media$group.media$content[0].url; 276 var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH); 277 shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 278 279 var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>'); 280 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); 281 var pShortDescription = $('<p>' + shortDescription + '</p>'); 282 var h4Title = "<h4>" + title + "</h4>"; 283 var li = $('<li/>'); 284 285 li.append(a); 286 a.append(img).append(h4Title).append(pShortDescription); 287 288 ul.append(li); 289 } 290 } 291 292 293 294 /* This 'playlist' object defines the playlist IDs for each tab. 295 * Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs). 296 * Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab. 297 */ 298 var playlists = { 299 'googleio' : { 300 'ids': ["4C6BCDE45E05F49E"] 301 }, 302 'fridayreview' : { 303 'ids': ["B7B9B23D864A55C3"] 304 }, 305 'officehours' : { 306 'ids': ["7383D9AADA6E6D55"] 307 }, 308 'about' : { 309 'ids': ["D7C64411AF40DEA5"] 310 } 311 }; 312 313 /* Request the playlist feeds from YouTube */ 314 function showVideosPlaylists() { 315 for (var x in playlists) { 316 var ids = playlists[x].ids; 317 for (var i in ids) { 318 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/" 319 + ids[i] + 320 "?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=published'><\/script>"; 321 $("body").append(script); 322 } 323 } 324 } 325 326 327 /* Request the playlist feeds from YouTube */ 328 function showDevelopersLivePlaylist() { 329 var playlistId = "B7B9B23D864A55C3"; /* The Friday Review */ 330 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/" 331 + playlistId + 332 "?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=published'><\/script > "; 333 $("body").append(script); 334 } 335 336 337 function togglePlaylist(listLink) { 338 var $list = $(listLink).parent(); 339 var $ul = $list.find('ul'); 340 if ($ul.is(":visible")) { 341 $ul.slideUp(function() { 342 $list.css({'height':'inherit'}); 343 }); 344 } else { 345 $list.closest('ul').find('li.playlist').find('ul').slideUp(); 346 $ul.slideDown(); 347 $list.css({'height':'auto'}); 348 } 349 } 350 351 showDevelopersLivePlaylist(); 352 showVideosPlaylists(); 353 </script>
