docs/html/index.jd

   1 fullpage=true
   2 no_footer_links=true
   3 carousel=true
   4 page.metaDescription=The official site for Android developers. Provides the Android SDK and documentation for app developers and designers.
   5 @jd:body
   6 <div id="butterbar-wrapper" >
   7   <div id="butterbar" >
   8     <div id="butterbar-message">
   9 <a target="_blank" href="https://docs.google.com/a/google.com/forms/d/1EHLPGqhbxj2HungHRRN4_0K9TGpc-Izy-u46vBDgS8Q/viewform">
  10       Take the Android Developer Survey</a>
  11     </div>
  12   </div>
  13 </div>
  14
  15
  16 <div class="wrap">
  17     <!-- Slideshow -->
  18     <div class="slideshow-container slideshow-home col-16">
  19         <a href="" class="slideshow-prev">Prev</a>
  20         <a href="" class="slideshow-next">Next</a>
  21         <div class="frame">
  22             <ul>
  23                 <li class="item carousel-home">
  24                     <div class="content-left col-9">
  25                         <a href="{@docRoot}about/versions/jelly-bean.html"><img src="{@docRoot}images/home/android-jellybean.png" ></a>
  26                     </div>
  27                     <div class="content-right col-6">
  28                     <h1>More Jelly Beans!</h1>
  29                     <p>Android 4.3 is now available with a variety of performance improvements
  30                     and new developer features. </p>
  31                     <p>With this release, Android now supports Bluetooth Low Energy for battery
  32                     savings with wireless peripherals, OpenGL ES 3.0 for the most advanced mobile 3D
  33                     graphics, MPEG DASH support for high quality media streaming, and much more.</p>
  34                     <p><a href="{@docRoot}about/versions/jelly-bean.html" class="button">Learn More</a></p>
  35                     </div>
  36                 </li>
  37                 <li class="item carousel-home">
  38                     <div class="content-left col-11" style="padding-top:10px;">
  39                         <a href="{@docRoot}channels/io2013.html">
  40                           <img src="{@docRoot}images/home/io-videos-2013.png" style="margin:60px 0 0;
  41                           box-shadow: 3px 10px 18px 1px #999;">
  42                         </a>
  43                     </div>
  44                     <div class="content-right col-4">
  45                     <h1>Watch the Android talks from Google I/O</h1>
  46                     <p>If you weren't able to attend Google I/O in person or couldn't make it
  47                     to all the talks, you can catch up on the action
  48                     with all the recordings, brought to you by
  49                     <a href="http://developers.google.com/live">Google Developers Live</a>.</p>
  50                     <p><a href="{@docRoot}channels/io2013.html" class="button"
  51                     >See the Android talks</a></p>
  52                     </div>
  53                 </li>
  54
  55
  56
  57                 <li class="item carousel-home">
  58                     <div class="content-left col-11" style="padding-top:65px;">
  59                       <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  60                       <div style="box-shadow: 3px 10px 18px 1px #999;width:600px;height:338px">
  61                         <div id="ytapiplayer">
  62                           You need Flash player 8+ and JavaScript enabled to view this video.
  63                         </div>
  64                         <script type="text/javascript">
  65                             var params = { allowScriptAccess: "always" };
  66                             var atts = { id: "ytapiplayer" };
  67                             swfobject.embedSWF("//www.youtube.com/v/O8i4HUw7JYA?enablejsapi=1&playerapiid=ytplayer&version=3&HD=1;rel=0;showinfo=0;modestbranding;origin=developer.android.com;autohide=1",
  68                               "ytapiplayer", "600", "338", "8", null, null, params, atts);
  69
  70                             // Callback used to pause/resume carousel based on video state
  71                             function onytplayerStateChange(newState) {
  72                                var isPaused = $("#pauseButton").hasClass("paused");
  73                                if ((newState == 1) || (newState == 3)) {
  74                                // if playing or buffering, pause the carousel
  75                                  if (!isPaused) {
  76                                     $("#pauseButton").click();
  77                                  }
  78                                } else {
  79                                // otherwise, make sure carousel is running
  80                                  if (isPaused) {
  81                                     $("#pauseButton").click();
  82                                  }
  83                                }
  84                             }
  85
  86                             // Callback received when YouTube player loads to setup callback (above)
  87                             function onYouTubePlayerReady(playerId) {
  88                               var ytplayer = document.getElementById("ytapiplayer");
  89                               ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
  90                             }
  91
  92                         </script>
  93                       </div>
  94                     </div>
  95                     <div class="content-right col-4">
  96                     <h1 style="white-space:nowrap;line-height:1.2em;">Developer Story: <br />redBus.in</h1>
  97                     <p>Bangalore-based developers redBus.in talk about how Android is helping them deliver a superior booking and travel experience to millions of daily bus riders in India.</p>
  98                     </div>
  99                 </li>
 100                 <li class="item carousel-home">
 101                     <div class="content-left col-10">
 102                         <img src="{@docRoot}images/home/design.png" style="margin-top:30px">
 103                     </div>
 104                     <div class="content-right col-5">
 105                     <h1>Make your Android apps<br>look great</h1>
 106                     <p>New templates in the design guide make it easier than ever to design apps
 107 that are beautiful and easy to use.</p>
 108                     <p><a href="{@docRoot}design/index.html" class="button">Learn More</a></p>
 109                     </div>
 110                 </li>
 111                 <li class="item carousel-home">
 112                         <div class="content-left col-10">
 113                             <img src="{@docRoot}images/home/google-play.png"
 114                                   style="margin-top:50px">
 115                         </div>
 116                         <div class="content-right col-5">
 117                         <h1>Publish your apps<br>in Google Play</h1>
 118                         <p>The most visited store in the world for Android apps. Cloud-connected and always synced, it's never been easier for users to find and download your apps.</p>
 119
 120                         <p><a href="{@docRoot}distribute/index.html" class="button">Learn More</a></p>
 121                         </div>
 122                 </li>
 123             </ul>
 124         </div>
 125     </div>
 126     <!-- /End slideshow -->
 127
 128     <a href="" id="pauseButton" style="display:none">pause</a>
 129
 130
 131 </div>
 132 <div class="wrap" style="padding-bottom:20px">
 133     <!-- Section links -->
 134     <div class="home-sections">
 135         <ul>
 136             <li><a href="{@docRoot}about/index.html">About Android</a></li>
 137             <li><a href="{@docRoot}sdk/index.html">Get the SDK</a></li>
 138             <li><a href="http://source.android.com">Open Source</a></li>
 139             <li><a href="{@docRoot}support.html">Support</a></li>
 140             <li class="last"><a href="{@docRoot}legal.html">Legal</a></li>
 141         </ul>
 142     </div>
 143     <!-- /Section links -->
 144 </div>