1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
|
fullpage=true
page.title=Develop
header.hide=1
carousel=1
tabbedList=1
@jd:body
<style>
#noplayer-message {
position:absolute;top:50%;left:0;width:100%;z-index:-1;text-align:center;display:none;
}
#player-frame object {z-index:1;}
</style>
<div id="player-wrapper">
<div id="player-frame">
<div id="noplayer-message">
<!-- busted flash player message -->
Your video is supposed to appear here.<br/>
Make sure you have the <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash® Player</a>.
</div>
<div id="player"><!-- Youtube embeds here... actually replaces this div --></div>
<a class="close" onclick="$('#player-wrapper').hide()">close video</a>
</div>
</div>
<div class="wrap">
<!-- Slideshow -->
<div class="slideshow-container slideshow-develop col-16">
<a href="" class="slideshow-prev">Prev</a>
<a href="" class="slideshow-next">Next</a>
<div class="frame">
<ul>
<li class="item carousel-home">
<div class="col-8">
<img src="{@docRoot}images/google/maps-v2-trulia-n7.png"
class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px;
max-width:409px;width:409px" />
</div>
<div class="content-right col-6" style="width:350px">
<h2>New Google Maps Android APIs!</h2>
<p>Google Maps Android API version 2 is now available with enhanced
features such as 3D buildings, vector-based map tiles, rich overlay capabilities,
indoor maps, support for fragments, and much more.</p>
<p>The APIs are bundled with Google Play services and are
compatible with Android 2.2 and higher.</p>
<p><a
href="{@docRoot}google/play-services/maps.html" class="button">Read more</a></p>
</div>
</li>
<li class="item carousel-home">
<div class="col-8">
<img
src="//lh4.ggpht.com/-lfjzgG5Dqrk/UHMThRtpRwI/AAAAAAAABpk/h4d3nsmkgPM/s400/mint.png"
class="play no-shadow no-transform" />
</div>
<div class="content-right col-6">
<h2>Building Great Apps for Tablets</h2>
<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>
<p><a
href="/distribute/googleplay/quality/tablet.html" class="button">Read
more</a></p>
</div>
</li>
<li class="item carousel-home">
<div class="col-8">
<img
src="//lh4.ggpht.com/-6K1kfNOdek8/T72bXvtTSQI/AAAAAAAABmw/kYzmJt0_328/s1600/google-play-subscriptions.png" class="play"></div>
<div class="content-right col-6">
<h2>In-app Subscriptions with Trials</h2>
<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>
<p><a class="button"
href="{@docRoot}google/play/billing/billing_subscriptions.html#trials">Read
more</a></p>
</div>
</li>
<li class="item carousel-home">
<div class="col-8">
<img
src="//lh4.ggpht.com/-MgN5DnoO5XU/UHYGYzTcAOI/AAAAAAAABs4/jTS7sKkfBcM/s1600/pubsites.png" class="play"></div>
<div class="content-right col-6">
<p class="title-intro">From the blog:</p>
<h2>New Google Play Developer Console</h2>
<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>
<p><a
href="http://android-developers.blogspot.com/2012/10/new-google-play-developer-console.html" class="button">Read
more</a></p>
</div>
</li>
<li class="item carousel-home">
<div class="col-8">
<img
src="//lh4.ggpht.com/-g05If_eKKRQ/UAcrVLI-OYI/AAAAAAAAAr8/AWvunVb5S-w/s320/nexus7.png"
class="play no-shadow no-transform" />
</div>
<div class="content-right col-6">
<p class="title-intro">From the blog:</p>
<h2>Getting Your App Ready for Jelly Bean and Nexus 7</h2>
<p>For many people, their first taste of Jelly Bean will be on the beautiful
<strong>Nexus 7 tablet</strong>. Most applications will run just fine on Nexus 7, but who wants
their app to be just fine? Here are some tips for optimizing your app
to make the most of this device.</p>
<p><a
href="http://android-developers.blogspot.com/2012/07/getting-your-app-ready-for-jelly-bean.html" class="button">Read
more</a></p>
</div>
</li>
</ul>
</div>
</div>
<!-- /End slideshow -->
</div>
<div class="wrap">
<!-- news and feature feed -->
<div class="feed col-8" style="margin-left:0">
<ul class="feed-nav">
<li class="active">DEVELOPER NEWS</li>
<li>FEATURED DOCS</li>
</ul>
<div class="feed-container">
<div class="feed-frame">
<!-- DEVELOPER NEWS -->
<ul>
<li><a href="//android-developers.blogspot.com/2013/01/verifying-back-end-calls-from-android.html">
<div class="feed-image" style="background:url('//lh4.ggpht.com/7z4NItEg-X21zvFGAarKonk-VaysBYthJ30u1JjaQ0-5fjyHNawnmoNeG--4FCACog=w124') no-repeat 0 0"></div>
<h4>Verifying Back-End Calls from Android Apps</h4>
<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>
</a></li>
<li><a href="//android-developers.blogspot.com/2012/12/daydream-interactive-screen-savers.html">
<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>
<h4>Daydream: Interactive Screen Savers</h4>
<p>Daydream is an interactive screen-saver mode introduced in Android 4.2. Learn how to add Daydreams to your apps...</p>
</a></li>
<li><a href="//android-developers.blogspot.com/2012/11/designing-for-tablets-were-here-to-help.html">
<div class="feed-image" style="background:url('//developer.android.com/design/media/multipane_expand.png') no-repeat 0 0; background-position:right top;"></div>
<h4>Designing for Tablets?</h4>
<p>Essential resources for everyone in the app development pipeline—from product managers, to designers, to developers, and QA engineers...</p>
</a></li>
<li><a href="//android-developers.blogspot.com/2012/12/in-app-billing-version-3.html">
<div class="feed-image" style="background:url('//developer.android.com/images/iab-thumb.png') no-repeat 0 0;background-position:center right;"></div>
<h4>In-app Billing Version 3 Now Available</h4>
<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>
</a></li>
</ul>
<!-- FEATURED DOCS -->
<ul>
<li><a href="{@docRoot}distribute/googleplay/spotlight/tablets.html">
<h4>Tablet Stories</h4>
<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>
</a></li>
<li><a href="{@docRoot}distribute/googleplay/quality/core.html">
<h4>Core App Quality Guidelines</h4>
<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>
</a></li>
<li><a href="{@docRoot}guide/topics/ui/notifiers/notifications.html">
<h4>Updated Notifications API Guide</h4>
<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>
</a></li>
<li><a href="{@docRoot}guide/topics/ui/dialogs.html">
<h4>Updated Dialogs API Guide</h4>
<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>
</a></li>
</ul>
</div>
</div>
</div> <!-- /news and feature feed -->
<!-- video feed -->
<div class="feed col-8" style="margin-right:0">
<ul class="feed-nav">
<li class="active">DEVELOPERS LIVE</li>
<li>VIDEO PLAYLISTS</li>
</ul>
<div class="feed-container">
<div class="feed-frame">
<ul id="DevelopersLive">
</ul>
<ul id="VideoPlaylists">
</ul>
</div>
</div>
</div>
<!-- /video feed -->
</div>
<br class="clearfix"/>
<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
/* Load a video into the player box.
* @param id The YouTube video ID
* @param title The video title to display in the player box (character escaped)
* @param autoplay Whether to automatically play the video
*/
function loadVideo(id, title, autoplay) {
swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' +
(autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'});
$("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>");
$("#player-wrapper").show();
setTimeout(function(){$('#noplayer-message').show()}, 2000);
}
/* Draw all videos from a playlist into a 'videoPreviews' list
* @param data The feed data returned from the youtube request
*/
function renderVideoPlaylists(data) {
var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description
var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description
var MAX_LIST_LENGTH = 4; // number of videos to put in the list
var feed = data.feed;
var entries = feed.entry || [];
var playlistId = feed.yt$playlistId.$t;
var $ulVideos = $('<ul style="display:none"/>');
var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t;
var $liPlaylist = $('<li class="playlist"></li>');
var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>');
$liPlaylist.append($aPlaylist);
$aPlaylist.append('<h4>' + feed.title.$t + '</h4>');
var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH);
playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
$aPlaylist.append('<p>' + playlistDescription + '</p>');
// Loop through each entry (each video) and add it to the 'videoPreviews' list
var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list
for (var i = 0; i < length; i++) {
var entry = entries[i];
var title = entry.title.$t;
var id = entry.media$group.yt$videoid.$t;
var thumbUrl = entry.media$group.media$thumbnail[0].url;
var fullDescription = entry.media$group.media$description.$t;
var playerUrl = entry.media$group.media$content[0].url;
var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH);
shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>');
var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
var pShortDescription = $('<p>' + shortDescription + '</p>');
var h5Title = "<h5>" + title + "</h5>";
var li = $('<li class="playlist-video"/>');
li.append(a);
a.append(img).append(h5Title).append(pShortDescription);
$ulVideos.append(li);
// use the first entry's thumbnail for the playlist
if (i == 0) {
$aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>');
}
}
if (feed.entry.length > MAX_LIST_LENGTH) {
// add item to go to youtube for playlist
$ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=PL' + playlistId + '">More »</a></li>');
}
$liPlaylist.append($ulVideos);
$('#VideoPlaylists').append($liPlaylist);
}
function renderDevelopersLivePlaylist(data) {
var MAX_DESC_LENGTH = 125; // the length at which we will trim the description
var feed = data.feed;
var entries = feed.entry || [];
var playlistId = feed.yt$playlistId.$t;
var ul = $('#DevelopersLive');
// Loop through each entry (each video) and add it to the '#DevelopersLive' list
for (var i = 0; i < 4; i++) {
var entry = entries[i];
var title = entry.title.$t;
var id = entry.media$group.yt$videoid.$t;
var thumbUrl = entry.media$group.media$thumbnail[0].url;
var fullDescription = entry.media$group.media$description.$t;
var playerUrl = entry.media$group.media$content[0].url;
var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH);
shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>');
var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
var pShortDescription = $('<p>' + shortDescription + '</p>');
var h4Title = "<h4>" + title + "</h4>";
var li = $('<li/>');
li.append(a);
a.append(img).append(h4Title).append(pShortDescription);
ul.append(li);
}
}
/* This 'playlist' object defines the playlist IDs for each tab.
* Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs).
* Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab.
*/
var playlists = {
'designinaction' : {
'ids': ["PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF"]
},
'about' : {
'ids': ["PL611F8C5DBF49CEC6"]
},
'developersstrikeback' : {
'ids': ["PLWz5rJ2EKKc8nhhIOieejm1PxYHmPkIPh"]
},
'googleio' : {
'ids': ["PL4C6BCDE45E05F49E"]
}
};
/* Request the playlist feeds from YouTube */
function showVideosPlaylists() {
for (var x in playlists) {
var ids = playlists[x].ids;
for (var i in ids) {
var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
+ ids[i] +
"?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=published'><\/script>";
$("body").append(script);
}
}
}
/* Request the playlist feeds from YouTube */
function showDevelopersLivePlaylist() {
var playlistId = "PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0"; /* DevBytes */
var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
+ playlistId +
"?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=published'><\/script > ";
$("body").append(script);
}
function togglePlaylist(listLink) {
var $list = $(listLink).parent();
var $ul = $list.find('ul');
if ($ul.is(":visible")) {
$ul.slideUp(function() {
$list.css({'height':'inherit'});
});
} else {
$list.closest('ul').find('li.playlist').find('ul').slideUp();
$ul.slideDown();
$list.css({'height':'auto'});
}
}
showDevelopersLivePlaylist();
showVideosPlaylists();
</script>
|