blob: 190a6d9332743622f17e5bae004481bb414b06fd [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
7
8<style>
9#noplayer-message {
10position: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&reg; 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>
Scott Main50e990c2012-06-21 17:14:39 -070026<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>
Robert Ly32c0cac2013-02-12 10:31:42 -080033
34 <li class="item carousel-home">
35 <div class="col-8">
36 <img src="{@docRoot}images/google/gps-plus-signin-hero.jpg"
37class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px;
38 max-width:409px;width:409px" />
39 </div>
40 <div class="content-right col-6" style="width:350px">
41 <h2>Google+ Sign-in for your Android Apps</h2>
42 <p>Google+ Sign-In is an easy, trusted way to sign a user into your app,
43 and get more Android installs when people visit your website.
44 When users sign in with Google on the web, they have the option to instantly
45 install your Android app without ever leaving your website.</p>
46 <p><a
47href="{@docRoot}google/play-services/plus.html" class="button">Read more</a></p>
48 </div>
49 </li>
50
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070051 <li class="item carousel-home">
52 <div class="col-8">
Scott Main9748abb2012-11-29 14:28:44 -080053 <img src="{@docRoot}images/google/maps-v2-trulia-n7.png"
54class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px;
Scott Mainb74844c2012-11-29 21:13:30 -080055 max-width:409px;width:409px" />
Scott Main9748abb2012-11-29 14:28:44 -080056 </div>
57 <div class="content-right col-6" style="width:350px">
Scott Mainaaaa1562012-12-03 09:19:10 -080058 <h2>New Google Maps Android APIs!</h2>
Scott Main9748abb2012-11-29 14:28:44 -080059 <p>Google Maps Android API version 2 is now available with enhanced
60 features such as 3D buildings, vector-based map tiles, rich overlay capabilities,
61 indoor maps, support for fragments, and much more.</p>
62
63 <p>The APIs are bundled with Google Play services and are
64 compatible with Android 2.2 and higher.</p>
65 <p><a
66href="{@docRoot}google/play-services/maps.html" class="button">Read more</a></p>
67 </div>
68 </li>
69 <li class="item carousel-home">
70 <div class="col-8">
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070071 <img
Dirk Dougherty41665132013-01-15 19:57:25 -080072src="//lh4.ggpht.com/-lfjzgG5Dqrk/UHMThRtpRwI/AAAAAAAABpk/h4d3nsmkgPM/s400/mint.png"
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070073class="play no-shadow no-transform" />
74 </div>
75 <div class="content-right col-6">
76 <h2>Building Great Apps for Tablets</h2>
77 <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>
78 <p><a
79href="/distribute/googleplay/quality/tablet.html" class="button">Read
80more</a></p>
81 </div>
82 </li>
83 <li class="item carousel-home">
84 <div class="col-8">
85 <img
Dirk Dougherty41665132013-01-15 19:57:25 -080086src="//lh4.ggpht.com/-6K1kfNOdek8/T72bXvtTSQI/AAAAAAAABmw/kYzmJt0_328/s1600/google-play-subscriptions.png" class="play"></div>
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070087 <div class="content-right col-6">
88 <h2>In-app Subscriptions with Trials</h2>
89 <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>
90 <p><a class="button"
Scott Maine63dfe52013-02-01 14:18:51 -080091href="{@docRoot}google/play/billing/v2/billing_subscriptions.html#trials">Read
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070092more</a></p>
93 </div>
94 </li>
95 <li class="item carousel-home">
96 <div class="col-8">
97 <img
Dirk Dougherty41665132013-01-15 19:57:25 -080098src="//lh4.ggpht.com/-MgN5DnoO5XU/UHYGYzTcAOI/AAAAAAAABs4/jTS7sKkfBcM/s1600/pubsites.png" class="play"></div>
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070099 <div class="content-right col-6">
100 <p class="title-intro">From the blog:</p>
101 <h2>New Google Play Developer Console</h2>
102 <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>
103 <p><a
104href="http://android-developers.blogspot.com/2012/10/new-google-play-developer-console.html" class="button">Read
105more</a></p>
106 </div>
107 </li>
Scott Main50e990c2012-06-21 17:14:39 -0700108 </ul>
109 </div>
110 </div>
111 <!-- /End slideshow -->
112</div>
113<div class="wrap">
114 <!-- news and feature feed -->
115 <div class="feed col-8" style="margin-left:0">
116 <ul class="feed-nav">
117 <li class="active">DEVELOPER NEWS</li>
118 <li>FEATURED DOCS</li>
119 </ul>
120 <div class="feed-container">
121 <div class="feed-frame">
122 <!-- DEVELOPER NEWS -->
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700123 <ul>
Dirk Dougherty20d47ca2013-01-14 17:42:30 -0800124 <li><a href="//android-developers.blogspot.com/2013/01/verifying-back-end-calls-from-android.html">
125 <div class="feed-image" style="background:url('//lh4.ggpht.com/7z4NItEg-X21zvFGAarKonk-VaysBYthJ30u1JjaQ0-5fjyHNawnmoNeG--4FCACog=w124') no-repeat 0 0"></div>
126 <h4>Verifying Back-End Calls from Android Apps</h4>
127 <p>You can take advantage of the auth APIs in Google Play services to let your back end know which app is calling and for which user....</p>
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700128 </a></li>
Dirk Dougherty20d47ca2013-01-14 17:42:30 -0800129 <li><a href="//android-developers.blogspot.com/2012/12/daydream-interactive-screen-savers.html">
Dirk Dougherty41665132013-01-15 19:57:25 -0800130 <div class="feed-image" style="background:url('//lh4.ggpht.com/-wVsUOo4xGE0/UNy9mZ1nmMI/AAAAAAAAB4w/f6rhyLn5KbI/s1600/daydream-example.jpg') no-repeat 0 0;background-position:right top;"></div>
Dirk Dougherty20d47ca2013-01-14 17:42:30 -0800131 <h4>Daydream: Interactive Screen Savers</h4>
132 <p>Daydream is an interactive screen-saver mode introduced in Android 4.2. Learn how to add Daydreams to your apps...</p>
Dirk Dougherty5e6c05a2012-12-14 22:05:27 -0800133 </a></li>
134 <li><a href="//android-developers.blogspot.com/2012/11/designing-for-tablets-were-here-to-help.html">
Dirk Dougherty20d47ca2013-01-14 17:42:30 -0800135 <div class="feed-image" style="background:url('//developer.android.com/design/media/multipane_expand.png') no-repeat 0 0; background-position:right top;"></div>
Dirk Dougherty5e6c05a2012-12-14 22:05:27 -0800136 <h4>Designing for Tablets?</h4>
137 <p>Essential resources for everyone in the app development pipeline—from product managers, to designers, to developers, and QA engineers...</p>
138 </a></li>
Dirk Dougherty20d47ca2013-01-14 17:42:30 -0800139 <li><a href="//android-developers.blogspot.com/2012/12/in-app-billing-version-3.html">
140 <div class="feed-image" style="background:url('//developer.android.com/images/iab-thumb.png') no-repeat 0 0;background-position:center right;"></div>
141 <h4>In-app Billing Version 3 Now Available</h4>
142 <p>A new version of In-app Billing is available that lets you sell digital goods in your app with just a few lines of code...</p>
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700143 </a></li>
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700144 </ul>
Scott Main50e990c2012-06-21 17:14:39 -0700145 <!-- FEATURED DOCS -->
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700146 <ul>
147 <li><a href="{@docRoot}distribute/googleplay/spotlight/tablets.html">
148 <h4>Tablet Stories</h4>
149 <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>
150 </a></li>
151 <li><a href="{@docRoot}distribute/googleplay/quality/core.html">
152 <h4>Core App Quality Guidelines</h4>
153 <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>
154 </a></li>
155 <li><a href="{@docRoot}guide/topics/ui/notifiers/notifications.html">
156 <h4>Updated Notifications API Guide</h4>
157 <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>
158 </a></li>
159 <li><a href="{@docRoot}guide/topics/ui/dialogs.html">
160 <h4>Updated Dialogs API Guide</h4>
161 <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>
162 </a></li>
163 </ul>
Scott Main50e990c2012-06-21 17:14:39 -0700164 </div>
165 </div>
166 </div> <!-- /news and feature feed -->
167 <!-- video feed -->
168 <div class="feed col-8" style="margin-right:0">
169 <ul class="feed-nav">
170 <li class="active">DEVELOPERS LIVE</li>
171 <li>VIDEO PLAYLISTS</li>
172 </ul>
173 <div class="feed-container">
174 <div class="feed-frame">
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700175 <ul id="DevelopersLive">
176 </ul>
177 <ul id="VideoPlaylists">
178 </ul>
Scott Main50e990c2012-06-21 17:14:39 -0700179 </div>
180 </div>
181 </div>
182 <!-- /video feed -->
183</div>
184
185<br class="clearfix"/>
Scott Main50e990c2012-06-21 17:14:39 -0700186
187
188
189
190
191
192
193
194
195
196<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script>
197<script type="text/javascript">
198
199/* Load a video into the player box.
200 * @param id The YouTube video ID
201 * @param title The video title to display in the player box (character escaped)
202 * @param autoplay Whether to automatically play the video
203 */
204function loadVideo(id, title, autoplay) {
205 swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' +
206 (autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'});
207 $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>");
208 $("#player-wrapper").show();
209 setTimeout(function(){$('#noplayer-message').show()}, 2000);
210}
211
212/* Draw all videos from a playlist into a 'videoPreviews' list
213 * @param data The feed data returned from the youtube request
214 */
215function renderVideoPlaylists(data) {
216 var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description
217 var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description
218 var MAX_LIST_LENGTH = 4; // number of videos to put in the list
219 var feed = data.feed;
220 var entries = feed.entry || [];
221 var playlistId = feed.yt$playlistId.$t;
222
223 var $ulVideos = $('<ul style="display:none"/>');
224 var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t;
225
226 var $liPlaylist = $('<li class="playlist"></li>');
227 var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>');
228 $liPlaylist.append($aPlaylist);
229 $aPlaylist.append('<h4>' + feed.title.$t + '</h4>');
230
231 var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH);
232 playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
233 $aPlaylist.append('<p>' + playlistDescription + '</p>');
234
235 // Loop through each entry (each video) and add it to the 'videoPreviews' list
236 var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list
237 for (var i = 0; i < length; i++) {
238 var entry = entries[i];
239
240 var title = entry.title.$t;
241 var id = entry.media$group.yt$videoid.$t;
242 var thumbUrl = entry.media$group.media$thumbnail[0].url;
243 var fullDescription = entry.media$group.media$description.$t;
244 var playerUrl = entry.media$group.media$content[0].url;
245
246 var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH);
247 shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
248
249 var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>');
250 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
251 var pShortDescription = $('<p>' + shortDescription + '</p>');
252 var h5Title = "<h5>" + title + "</h5>";
253 var li = $('<li class="playlist-video"/>');
254
255 li.append(a);
256 a.append(img).append(h5Title).append(pShortDescription);
257
258 $ulVideos.append(li);
259
260 // use the first entry's thumbnail for the playlist
261 if (i == 0) {
262 $aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>');
263 }
264 }
265
266 if (feed.entry.length > MAX_LIST_LENGTH) {
267 // add item to go to youtube for playlist
268 $ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=PL' + playlistId + '">More &raquo;</a></li>');
269 }
270
271 $liPlaylist.append($ulVideos);
272 $('#VideoPlaylists').append($liPlaylist);
273}
274
275
276function renderDevelopersLivePlaylist(data) {
277
278 var MAX_DESC_LENGTH = 125; // the length at which we will trim the description
279 var feed = data.feed;
280 var entries = feed.entry || [];
281 var playlistId = feed.yt$playlistId.$t;
282
283 var ul = $('#DevelopersLive');
284
285 // Loop through each entry (each video) and add it to the '#DevelopersLive' list
286 for (var i = 0; i < 4; i++) {
287 var entry = entries[i];
288
289 var title = entry.title.$t;
290 var id = entry.media$group.yt$videoid.$t;
291 var thumbUrl = entry.media$group.media$thumbnail[0].url;
292 var fullDescription = entry.media$group.media$description.$t;
293 var playerUrl = entry.media$group.media$content[0].url;
294 var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH);
295 shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
296
297 var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>');
298 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
299 var pShortDescription = $('<p>' + shortDescription + '</p>');
300 var h4Title = "<h4>" + title + "</h4>";
301 var li = $('<li/>');
302
303 li.append(a);
304 a.append(img).append(h4Title).append(pShortDescription);
305
306 ul.append(li);
307 }
308}
309
Scott Main50e990c2012-06-21 17:14:39 -0700310/* This 'playlist' object defines the playlist IDs for each tab.
311 * Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs).
312 * Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab.
313 */
314var playlists = {
Scott Mainbce26802012-11-15 10:26:40 -0800315 'designinaction' : {
316 'ids': ["PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF"]
Scott Main50e990c2012-06-21 17:14:39 -0700317 },
318 'about' : {
Scott Mainbce26802012-11-15 10:26:40 -0800319 'ids': ["PL611F8C5DBF49CEC6"]
320 },
321 'developersstrikeback' : {
322 'ids': ["PLWz5rJ2EKKc8nhhIOieejm1PxYHmPkIPh"]
323 },
324 'googleio' : {
325 'ids': ["PL4C6BCDE45E05F49E"]
Scott Main50e990c2012-06-21 17:14:39 -0700326 }
327};
328
329/* Request the playlist feeds from YouTube */
330function showVideosPlaylists() {
331 for (var x in playlists) {
332 var ids = playlists[x].ids;
333 for (var i in ids) {
334 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
335 + ids[i] +
336 "?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=published'><\/script>";
337 $("body").append(script);
338 }
339 }
340}
341
342
343/* Request the playlist feeds from YouTube */
344function showDevelopersLivePlaylist() {
Scott Main5b61ad22013-01-15 11:18:48 -0800345 var playlistId = "PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0"; /* DevBytes */
Scott Main50e990c2012-06-21 17:14:39 -0700346 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
347 + playlistId +
348 "?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=published'><\/script > ";
349 $("body").append(script);
350}
351
352
353function togglePlaylist(listLink) {
354 var $list = $(listLink).parent();
355 var $ul = $list.find('ul');
356 if ($ul.is(":visible")) {
357 $ul.slideUp(function() {
358 $list.css({'height':'inherit'});
359 });
360 } else {
361 $list.closest('ul').find('li.playlist').find('ul').slideUp();
362 $ul.slideDown();
363 $list.css({'height':'auto'});
364 }
365}
366
367showDevelopersLivePlaylist();
368showVideosPlaylists();
Dirk Dougherty49be1ef2012-11-29 21:11:24 -0800369</script>