blob: 70d3f6d55cacd5e750eb629f99820ac3009e88d9 [file] [log] [blame]
Scott Main50e990c2012-06-21 17:14:39 -07001fullpage=true
2page.title=Develop
3header.hide=1
4carousel=1
5tabbedList=1
6@jd:body
Scott Main3bb56f02012-12-04 18:23:09 -08007<style>
8#butterbar-wrapper {
9 position:absolute;
10 top:0;
11 left:0;
12 width:100%;
13}
14#butterbar {
15 width:940px;
16 margin:0 auto;
17}
18#butterbar-message {
19 background-color:#f80;
20 float:right;
21 font-size:12px;
22 font-weight:bold;
23 padding:0 10px;
24 border-radius: 0 0 5px 5px;
25}
26#butterbar-message a {color:#fff !important}
27#butterbar-message a:hover {text-decoration:underline;}
28</style>
29
30 <div id="butterbar-wrapper" >
31 <div id="butterbar" >
32 <div id="butterbar-message">
33<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/17EFbvdm4FYkocc83EcrKhyhP5Y6tbns_eiBSeQ6ojxU/viewform">
34 Take the Android Developer Survey</a>
35 </div>
36 </div>
37</div>
Scott Main50e990c2012-06-21 17:14:39 -070038
39<style>
40#noplayer-message {
41position:absolute;top:50%;left:0;width:100%;z-index:-1;text-align:center;display:none;
42}
43#player-frame object {z-index:1;}
44</style>
45
46<div id="player-wrapper">
47 <div id="player-frame">
48 <div id="noplayer-message">
49 <!-- busted flash player message -->
50 Your video is supposed to appear here.<br/>
51 Make sure you have the <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash&reg; Player</a>.
52 </div>
53 <div id="player"><!-- Youtube embeds here... actually replaces this div --></div>
54 <a class="close" onclick="$('#player-wrapper').hide()">close video</a>
55 </div>
56</div>
Scott Main50e990c2012-06-21 17:14:39 -070057<div class="wrap">
58 <!-- Slideshow -->
59 <div class="slideshow-container slideshow-develop col-16">
60 <a href="" class="slideshow-prev">Prev</a>
61 <a href="" class="slideshow-next">Next</a>
62 <div class="frame">
63 <ul>
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070064 <li class="item carousel-home">
65 <div class="col-8">
Scott Main9748abb2012-11-29 14:28:44 -080066 <img src="{@docRoot}images/google/maps-v2-trulia-n7.png"
67class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px;
Scott Mainb74844c2012-11-29 21:13:30 -080068 max-width:409px;width:409px" />
Scott Main9748abb2012-11-29 14:28:44 -080069 </div>
70 <div class="content-right col-6" style="width:350px">
Scott Mainaaaa1562012-12-03 09:19:10 -080071 <h2>New Google Maps Android APIs!</h2>
Scott Main9748abb2012-11-29 14:28:44 -080072 <p>Google Maps Android API version 2 is now available with enhanced
73 features such as 3D buildings, vector-based map tiles, rich overlay capabilities,
74 indoor maps, support for fragments, and much more.</p>
75
76 <p>The APIs are bundled with Google Play services and are
77 compatible with Android 2.2 and higher.</p>
78 <p><a
79href="{@docRoot}google/play-services/maps.html" class="button">Read more</a></p>
80 </div>
81 </li>
82 <li class="item carousel-home">
83 <div class="col-8">
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070084 <img
85src="http://4.bp.blogspot.com/-lfjzgG5Dqrk/UHMThRtpRwI/AAAAAAAABpk/h4d3nsmkgPM/s400/mint.png"
86class="play no-shadow no-transform" />
87 </div>
88 <div class="content-right col-6">
89 <h2>Building Great Apps for Tablets</h2>
90 <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>
91 <p><a
92href="/distribute/googleplay/quality/tablet.html" class="button">Read
93more</a></p>
94 </div>
95 </li>
96 <li class="item carousel-home">
97 <div class="col-8">
98 <img
99src="http://1.bp.blogspot.com/-6K1kfNOdek8/T72bXvtTSQI/AAAAAAAABmw/kYzmJt0_328/s1600/google-play-subscriptions.png" class="play"></div>
100 <div class="content-right col-6">
101 <h2>In-app Subscriptions with Trials</h2>
102 <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>
103 <p><a class="button"
Dirk Dougherty2b286bb2012-11-29 17:25:09 -0800104href="{@docRoot}google/play/billing/billing_subscriptions.html#trials">Read
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700105more</a></p>
106 </div>
107 </li>
108 <li class="item carousel-home">
109 <div class="col-8">
110 <img
111src="http://2.bp.blogspot.com/-MgN5DnoO5XU/UHYGYzTcAOI/AAAAAAAABs4/jTS7sKkfBcM/s1600/pubsites.png" class="play"></div>
112 <div class="content-right col-6">
113 <p class="title-intro">From the blog:</p>
114 <h2>New Google Play Developer Console</h2>
115 <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, you’ll have better tools for delivering great Android apps that delight users.</p>
116 <p><a
117href="http://android-developers.blogspot.com/2012/10/new-google-play-developer-console.html" class="button">Read
118more</a></p>
119 </div>
120 </li>
Scott Main50e990c2012-06-21 17:14:39 -0700121 <li class="item carousel-home">
122 <div class="col-8">
123 <img
Scott Main67922bb2012-07-23 14:33:42 -0700124src="http://4.bp.blogspot.com/-g05If_eKKRQ/UAcrVLI-OYI/AAAAAAAAAr8/AWvunVb5S-w/s320/nexus7.png"
125class="play no-shadow no-transform" />
126 </div>
127 <div class="content-right col-6">
128 <p class="title-intro">From the blog:</p>
129 <h2>Getting Your App Ready for Jelly Bean and Nexus 7</h2>
130 <p>For many people, their first taste of Jelly Bean will be on the beautiful
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700131 <strong>Nexus 7 tablet</strong>. Most applications will run just fine on Nexus 7, but who wants
132 their app to be just fine? Here are some tips for optimizing your app
Scott Main67922bb2012-07-23 14:33:42 -0700133 to make the most of this device.</p>
134 <p><a
135href="http://android-developers.blogspot.com/2012/07/getting-your-app-ready-for-jelly-bean.html" class="button">Read
136more</a></p>
137 </div>
138 </li>
Scott Main50e990c2012-06-21 17:14:39 -0700139 </ul>
140 </div>
141 </div>
142 <!-- /End slideshow -->
143</div>
144<div class="wrap">
145 <!-- news and feature feed -->
146 <div class="feed col-8" style="margin-left:0">
147 <ul class="feed-nav">
148 <li class="active">DEVELOPER NEWS</li>
149 <li>FEATURED DOCS</li>
150 </ul>
151 <div class="feed-container">
152 <div class="feed-frame">
153 <!-- DEVELOPER NEWS -->
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700154 <ul>
155 <li><a href="http://android-developers.blogspot.com/2012/10/google-play-seller-support-in-india.html">
156 <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>
157 <h4>Google Play Seller Support in India</h4>
158 <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>
159 </a></li>
160 <li><a href="http://android-developers.blogspot.com/2012/09/google-play-services-and-oauth-identity.html">
161 <div class="feed-image" style="background:url('https://lh4.ggpht.com/7z4NItEg-X21zvFGAarKonk-VaysBYthJ30u1JjaQ0-5fjyHNawnmoNeG--4FCACog=w124') no-repeat 0 0"></div>
162 <h4>Google Play services and OAuth Tools</h4>
163 <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>
164 </a></li>
165 <li><a href="http://android-developers.blogspot.com/2012/08/creating-your-own-spelling-checker.html">
166 <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>
167 <h4>Creating A Spelling Checker Service</h4>
168 <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>
169 </a></li>
170 <li><a href="http://android-developers.blogspot.com/2012/04/accessibility-are-you-serving-all-your.html">
171 <div class="feed-image"></div>
172 <h4>Accessibility</h4>
173 <p>We recently published some new resources to help developers make their Android applications more accessible... </p>
174 </a></li>
175 </ul>
Scott Main50e990c2012-06-21 17:14:39 -0700176 <!-- FEATURED DOCS -->
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700177 <ul>
178 <li><a href="{@docRoot}distribute/googleplay/spotlight/tablets.html">
179 <h4>Tablet Stories</h4>
180 <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>
181 </a></li>
182 <li><a href="{@docRoot}distribute/googleplay/quality/core.html">
183 <h4>Core App Quality Guidelines</h4>
184 <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>
185 </a></li>
186 <li><a href="{@docRoot}guide/topics/ui/notifiers/notifications.html">
187 <h4>Updated Notifications API Guide</h4>
188 <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>
189 </a></li>
190 <li><a href="{@docRoot}guide/topics/ui/dialogs.html">
191 <h4>Updated Dialogs API Guide</h4>
192 <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>
193 </a></li>
194 </ul>
Scott Main50e990c2012-06-21 17:14:39 -0700195 </div>
196 </div>
197 </div> <!-- /news and feature feed -->
198 <!-- video feed -->
199 <div class="feed col-8" style="margin-right:0">
200 <ul class="feed-nav">
201 <li class="active">DEVELOPERS LIVE</li>
202 <li>VIDEO PLAYLISTS</li>
203 </ul>
204 <div class="feed-container">
205 <div class="feed-frame">
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700206 <ul id="DevelopersLive">
207 </ul>
208 <ul id="VideoPlaylists">
209 </ul>
Scott Main50e990c2012-06-21 17:14:39 -0700210 </div>
211 </div>
212 </div>
213 <!-- /video feed -->
214</div>
215
216<br class="clearfix"/>
Scott Main50e990c2012-06-21 17:14:39 -0700217
218
219
220
221
222
223
224
225
226
227<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script>
228<script type="text/javascript">
229
230/* Load a video into the player box.
231 * @param id The YouTube video ID
232 * @param title The video title to display in the player box (character escaped)
233 * @param autoplay Whether to automatically play the video
234 */
235function loadVideo(id, title, autoplay) {
236 swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' +
237 (autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'});
238 $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>");
239 $("#player-wrapper").show();
240 setTimeout(function(){$('#noplayer-message').show()}, 2000);
241}
242
243/* Draw all videos from a playlist into a 'videoPreviews' list
244 * @param data The feed data returned from the youtube request
245 */
246function renderVideoPlaylists(data) {
247 var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description
248 var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description
249 var MAX_LIST_LENGTH = 4; // number of videos to put in the list
250 var feed = data.feed;
251 var entries = feed.entry || [];
252 var playlistId = feed.yt$playlistId.$t;
253
254 var $ulVideos = $('<ul style="display:none"/>');
255 var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t;
256
257 var $liPlaylist = $('<li class="playlist"></li>');
258 var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>');
259 $liPlaylist.append($aPlaylist);
260 $aPlaylist.append('<h4>' + feed.title.$t + '</h4>');
261
262 var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH);
263 playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
264 $aPlaylist.append('<p>' + playlistDescription + '</p>');
265
266 // Loop through each entry (each video) and add it to the 'videoPreviews' list
267 var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list
268 for (var i = 0; i < length; 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
277 var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH);
278 shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
279
280 var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>');
281 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
282 var pShortDescription = $('<p>' + shortDescription + '</p>');
283 var h5Title = "<h5>" + title + "</h5>";
284 var li = $('<li class="playlist-video"/>');
285
286 li.append(a);
287 a.append(img).append(h5Title).append(pShortDescription);
288
289 $ulVideos.append(li);
290
291 // use the first entry's thumbnail for the playlist
292 if (i == 0) {
293 $aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>');
294 }
295 }
296
297 if (feed.entry.length > MAX_LIST_LENGTH) {
298 // add item to go to youtube for playlist
299 $ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=PL' + playlistId + '">More &raquo;</a></li>');
300 }
301
302 $liPlaylist.append($ulVideos);
303 $('#VideoPlaylists').append($liPlaylist);
304}
305
306
307function renderDevelopersLivePlaylist(data) {
308
309 var MAX_DESC_LENGTH = 125; // the length at which we will trim the description
310 var feed = data.feed;
311 var entries = feed.entry || [];
312 var playlistId = feed.yt$playlistId.$t;
313
314 var ul = $('#DevelopersLive');
315
316 // Loop through each entry (each video) and add it to the '#DevelopersLive' list
317 for (var i = 0; i < 4; i++) {
318 var entry = entries[i];
319
320 var title = entry.title.$t;
321 var id = entry.media$group.yt$videoid.$t;
322 var thumbUrl = entry.media$group.media$thumbnail[0].url;
323 var fullDescription = entry.media$group.media$description.$t;
324 var playerUrl = entry.media$group.media$content[0].url;
325 var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH);
326 shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
327
328 var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>');
329 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
330 var pShortDescription = $('<p>' + shortDescription + '</p>');
331 var h4Title = "<h4>" + title + "</h4>";
332 var li = $('<li/>');
333
334 li.append(a);
335 a.append(img).append(h4Title).append(pShortDescription);
336
337 ul.append(li);
338 }
339}
340
341
342
343/* This 'playlist' object defines the playlist IDs for each tab.
344 * Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs).
345 * Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab.
346 */
347var playlists = {
Scott Mainbce26802012-11-15 10:26:40 -0800348 'designinaction' : {
349 'ids': ["PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF"]
Scott Main50e990c2012-06-21 17:14:39 -0700350 },
351 'about' : {
Scott Mainbce26802012-11-15 10:26:40 -0800352 'ids': ["PL611F8C5DBF49CEC6"]
353 },
354 'developersstrikeback' : {
355 'ids': ["PLWz5rJ2EKKc8nhhIOieejm1PxYHmPkIPh"]
356 },
357 'googleio' : {
358 'ids': ["PL4C6BCDE45E05F49E"]
Scott Main50e990c2012-06-21 17:14:39 -0700359 }
360};
361
362/* Request the playlist feeds from YouTube */
363function showVideosPlaylists() {
364 for (var x in playlists) {
365 var ids = playlists[x].ids;
366 for (var i in ids) {
367 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
368 + ids[i] +
369 "?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=published'><\/script>";
370 $("body").append(script);
371 }
372 }
373}
374
375
376/* Request the playlist feeds from YouTube */
377function showDevelopersLivePlaylist() {
Scott Mainbce26802012-11-15 10:26:40 -0800378 var playlistId = "PLB7B9B23D864A55C3"; /* The App Clinic */
Scott Main50e990c2012-06-21 17:14:39 -0700379 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
380 + playlistId +
381 "?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=published'><\/script > ";
382 $("body").append(script);
383}
384
385
386function togglePlaylist(listLink) {
387 var $list = $(listLink).parent();
388 var $ul = $list.find('ul');
389 if ($ul.is(":visible")) {
390 $ul.slideUp(function() {
391 $list.css({'height':'inherit'});
392 });
393 } else {
394 $list.closest('ul').find('li.playlist').find('ul').slideUp();
395 $ul.slideDown();
396 $list.css({'height':'auto'});
397 }
398}
399
400showDevelopersLivePlaylist();
401showVideosPlaylists();
Dirk Dougherty49be1ef2012-11-29 21:11:24 -0800402</script>