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 34 <li class="item carousel-home"> 35 <div class="col-8"> 36 <img 37 src="//lh4.ggpht.com/-lfjzgG5Dqrk/UHMThRtpRwI/AAAAAAAABpk/h4d3nsmkgPM/s400/mint.png" 38 class="play no-shadow no-transform" /> 39 </div> 40 <div class="content-right col-6"> 41 <h2>Building Great Apps for Tablets</h2> 42 <p>Tablets are a fast-growing part of the Android installed base and they offer new opportunities for user engagement and monetization. If you are targeting tablets, check out this list of tips and techniques on how to deliver a great app experience for tablet users. </p> 43 <p><a 44 href="//android-developers.blogspot.com/2012/11/designing-for-tablets-were-here-to-help.html" class="button">Read 45 more</a></p> 46 </div> 47 </li> 48 <li class="item carousel-home"> 49 <div class="col-8"> 50 <img src="{@docRoot}images/google/gps-location.png" 51 class="play no-shadow no-transform" style="margin:0 0 0 70px;height:230px;width:340px" /> 52 </div> 53 <div class="content-right col-6" style="width:350px"> 54 <h2>New Location APIs from Google</h2> 55 <p>The latest version of Google Play services includes new APIs that provide more 56 efficient and immediate user location data on devices running Android 2.2 57 and higher. Features include geofencing APIs, user activity recognition, and 58 power-efficient location updates.</p> 59 <p><a 60 href="{@docRoot}google/play-services/location.html" class="button">Read more</a></p> 61 </div> 62 </li> 63 64 <li class="item carousel-home"> 65 <div class="col-8"> 66 <img src="{@docRoot}images/google/gps-plus-signin-hero.jpg" 67 class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px; 68 max-width:409px;width:409px" /> 69 </div> 70 <div class="content-right col-6" style="width:350px"> 71 <h2>New Cross-Platform Single Sign On</h2> 72 <p>Google+ Sign-In is an easy, trusted way to sign a user into your app. 73 Now it's even more seamless. A user can sign in to your app on one device and 74 pick it up on another—without signing in again. Best of all, it's built 75 into Google+ Sign-in, so there's no change needed in your app.</p> 76 <p><a 77 href="{@docRoot}google/play-services/plus.html" class="button">Read more</a></p> 78 </div> 79 </li> 80 81 <li class="item carousel-home"> 82 <div class="col-8"> 83 <img src="{@docRoot}images/google/maps-v2-trulia-n7.png" 84 class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px; 85 max-width:409px;width:409px" /> 86 </div> 87 <div class="content-right col-6" style="width:350px"> 88 <h2>New Google Maps Android APIs!</h2> 89 <p>Google Maps Android API version 2 is now available with enhanced 90 features such as 3D buildings, vector-based map tiles, rich overlay capabilities, 91 indoor maps, support for fragments, and much more.</p> 92 93 <p>The APIs are bundled with Google Play services and are 94 compatible with Android 2.2 and higher.</p> 95 <p><a 96 href="{@docRoot}google/play-services/maps.html" class="button">Read more</a></p> 97 </div> 98 </li> 99 </ul> 100 </div> 101 </div> 102 <!-- /End slideshow --> 103 </div> 104 <div class="wrap"> 105 <!-- news and feature feed --> 106 <div class="feed col-8" style="margin-left:0"> 107 <ul class="feed-nav"> 108 <li class="active">DEVELOPER NEWS</li> 109 <li>FEATURED DOCS</li> 110 </ul> 111 <div class="feed-container"> 112 <div class="feed-frame"> 113 <!-- DEVELOPER NEWS --> 114 <ul> 115 <li><a href="//android-developers.blogspot.com/2013/07/making-beautiful-android-app-icons.html"> 116 <div class="feed-image" style="background:url('//2.bp.blogspot.com/-HfoO6KNFBKA/UeiyRoELb7I/AAAAAAAAAFs/bHR-5viktU4/s1000/icons.png') no-repeat 0 0;background-size:500px;background-position:center center;"></div> 117 <h4>Making Beautiful Android App Icons</h4> 118 <p>As higher density screens gain popularity, it's important to make sure your launcher icon is crisp and high quality...</p> 119 </a></li> 120 <li><a href="//android-developers.blogspot.com/2013/07/beautiful-design-collection-summer-2013.html"> 121 <div class="feed-image" style="background:url('//1.bp.blogspot.com/-k8DZYu0daT4/UdRt1AzstvI/AAAAAAAAAFM/CvEkb2yh-i0/s965/beautifulapps_4.png') no-repeat 0 0"></div> 122 <h4>The Beautiful Design Summer 2013 Collection</h4> 123 <p>See the apps chosen by the Android Design team for their masterfully crafted design details...</p> 124 </a></li> 125 <li><a href="//android-developers.blogspot.com/2013/10/new-developer-features-in-google-play.html"> 126 <div class="feed-image" style="background:url('//3.bp.blogspot.com/-k33rf398Lqw/UlRUMQQRUNI/AAAAAAAAClM/pSwz2YgQpmY/s1600/gps-play_games_logo.png') no-repeat 0 0;background-size:130px;background-position:8px -4px;"></div> 127 <h4>New Features in Google Play Games</h4> 128 <p>Three new features that make it easier to understand what players are doing in your game and help you manage game features...</p> 129 </a></li> 130 <li><a href="//android-developers.blogspot.com/2013/05/new-ways-to-optimize-your-business-in.html"> 131 <div class="feed-image" style="background:url('//3.bp.blogspot.com/-_8WvpdTVGsE/UkxxxrVoNNI/AAAAAAAACj8/FrQyA-BO11c/s1600/gp-referral-ga.png') no-repeat 0 0;background-size:180px"></div> 132 <h4>Linking Google Analytics with Google Play</h4> 133 <p>Understanding your users easier through a new integration between Google Analytics and the Google Play Developer Console...</p> 134 </a></li> 135 </ul> 136 <!-- FEATURED DOCS --> 137 <ul> 138 <li><a href="{@docRoot}distribute/googleplay/spotlight/tablets.html"> 139 <h4>Tablet Stories</h4> 140 <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> 141 </a></li> 142 <li><a href="{@docRoot}distribute/googleplay/quality/core.html"> 143 <h4>Core App Quality Guidelines</h4> 144 <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> 145 </a></li> 146 <li><a href="{@docRoot}guide/topics/ui/notifiers/notifications.html"> 147 <h4>Updated Notifications API Guide</h4> 148 <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> 149 </a></li> 150 <li><a href="{@docRoot}guide/topics/ui/dialogs.html"> 151 <h4>Updated Dialogs API Guide</h4> 152 <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> 153 </a></li> 154 </ul> 155 </div> 156 </div> 157 </div> <!-- /news and feature feed --> 158 <!-- video feed --> 159 <div class="feed col-8" style="margin-right:0"> 160 <ul class="feed-nav"> 161 <li class="active">DEVELOPERS LIVE</li> 162 <li>VIDEO PLAYLISTS</li> 163 </ul> 164 <div class="feed-container"> 165 <div class="feed-frame"> 166 <ul id="DevelopersLive"> 167 </ul> 168 <ul id="VideoPlaylists"> 169 </ul> 170 </div> 171 </div> 172 </div> 173 <!-- /video feed --> 174 </div> 175 176 <br class="clearfix"/> 177 178 179 180 181 182 183 184 185 186 187 <script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script> 188 <script type="text/javascript"> 189 190 /* Load a video into the player box. 191 * @param id The YouTube video ID 192 * @param title The video title to display in the player box (character escaped) 193 * @param autoplay Whether to automatically play the video 194 */ 195 function loadVideo(id, title, autoplay) { 196 swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' + 197 (autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'}); 198 $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>"); 199 $("#player-wrapper").show(); 200 setTimeout(function(){$('#noplayer-message').show()}, 2000); 201 } 202 203 /* Draw all videos from a playlist into a 'videoPreviews' list 204 * @param data The feed data returned from the youtube request 205 */ 206 function renderVideoPlaylists(data) { 207 var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description 208 var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description 209 var MAX_LIST_LENGTH = 4; // number of videos to put in the list 210 var feed = data.feed; 211 var entries = feed.entry || []; 212 var playlistId = feed.yt$playlistId.$t; 213 214 var $ulVideos = $('<ul style="display:none"/>'); 215 var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t; 216 217 var $liPlaylist = $('<li class="playlist"></li>'); 218 var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>'); 219 $liPlaylist.append($aPlaylist); 220 $aPlaylist.append('<h4>' + feed.title.$t + '</h4>'); 221 222 var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH); 223 playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 224 $aPlaylist.append('<p>' + playlistDescription + '</p>'); 225 226 // Loop through each entry (each video) and add it to the 'videoPreviews' list 227 var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list 228 for (var i = 0; i < length; i++) { 229 var entry = entries[i]; 230 231 var title = entry.title.$t; 232 var id = entry.media$group.yt$videoid.$t; 233 var thumbUrl = entry.media$group.media$thumbnail[0].url; 234 var fullDescription = entry.media$group.media$description.$t; 235 var playerUrl = entry.media$group.media$content[0].url; 236 237 var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH); 238 shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 239 240 var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>'); 241 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); 242 var pShortDescription = $('<p>' + shortDescription + '</p>'); 243 var h5Title = "<h5>" + title + "</h5>"; 244 var li = $('<li class="playlist-video"/>'); 245 246 li.append(a); 247 a.append(img).append(h5Title).append(pShortDescription); 248 249 $ulVideos.append(li); 250 251 // use the first entry's thumbnail for the playlist 252 if (i == 0) { 253 $aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>'); 254 } 255 } 256 257 if (feed.entry.length > MAX_LIST_LENGTH) { 258 // add item to go to youtube for playlist 259 $ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=' + playlistId + '">More »</a></li>'); 260 } 261 262 $liPlaylist.append($ulVideos); 263 $('#VideoPlaylists').append($liPlaylist); 264 } 265 266 267 function renderDevelopersLivePlaylist(data) { 268 269 var MAX_DESC_LENGTH = 125; // the length at which we will trim the description 270 var feed = data.feed; 271 var entries = feed.entry || []; 272 var playlistId = feed.yt$playlistId.$t; 273 274 var ul = $('#DevelopersLive'); 275 276 // Loop through each entry (each video) and add it to the '#DevelopersLive' list 277 for (var i = 0; i < 4; i++) { 278 var entry = entries[i]; 279 280 var title = entry.title.$t; 281 var id = entry.media$group.yt$videoid.$t; 282 var thumbUrl = entry.media$group.media$thumbnail[0].url; 283 var fullDescription = entry.media$group.media$description.$t; 284 var playerUrl = entry.media$group.media$content[0].url; 285 var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH); 286 shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 287 288 var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>'); 289 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); 290 var pShortDescription = $('<p>' + shortDescription + '</p>'); 291 var h4Title = "<h4>" + title + "</h4>"; 292 var li = $('<li/>'); 293 294 li.append(a); 295 a.append(img).append(h4Title).append(pShortDescription); 296 297 ul.append(li); 298 } 299 } 300 301 /* This 'playlist' object defines the playlist IDs for each tab. 302 * Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs). 303 * Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab. 304 */ 305 var playlists = { 306 'designinaction' : { 307 'ids': ["PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF"] 308 }, 309 'bizdevbytes' : { 310 'ids': ["PLWz5rJ2EKKc8-Osr0TuHyTMEhKV0xJ6ql"] 311 }, 312 'thisweek' : { 313 'ids': ["PLWz5rJ2EKKc9Wam5jE-9oY8l6RpeAx-XM"] 314 }, 315 'googleio' : { 316 'ids': ["PLWz5rJ2EKKc9WGUwq2gQ-coU3fSyexgOx"] 317 } 318 }; 319 320 /* Request the playlist feeds from YouTube */ 321 function showVideosPlaylists() { 322 for (var x in playlists) { 323 var ids = playlists[x].ids; 324 for (var i in ids) { 325 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/" 326 + ids[i] + 327 "?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=position'><\/script>"; 328 $("body").append(script); 329 } 330 } 331 } 332 333 334 /* Request the playlist feeds from YouTube */ 335 function showDevelopersLivePlaylist() { 336 var playlistId = "PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0"; /* DevBytes */ 337 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/" 338 + playlistId + 339 "?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=position'><\/script > "; 340 $("body").append(script); 341 } 342 343 344 function togglePlaylist(listLink) { 345 var $list = $(listLink).parent(); 346 var $ul = $list.find('ul'); 347 if ($ul.is(":visible")) { 348 $ul.slideUp(function() { 349 $list.css({'height':'inherit'}); 350 }); 351 } else { 352 $list.closest('ul').find('li.playlist').find('ul').slideUp(); 353 $ul.slideDown(); 354 $list.css({'height':'auto'}); 355 } 356 } 357 358 showDevelopersLivePlaylist(); 359 showVideosPlaylists(); 360 </script> 361
