{% extends "base.html" %}

{% block pageid %}mobile{% endblock %}

{% block extrahead %}
<link rel="alternate" type="application/rss+xml" title="Planet Firefox Mobile" href="http://planet.firefox.com/mobile/rss20.xml" />
{% endblock %}

{% block bodyclass %}section-mobile landing{% endblock %}

{% block title %}{{ page_title(_('Mobile')) }}{% endblock %}

{% block content %}
<header id="section-head">
<div class="wrap">
  <h1 class="intro">{{ _('Welcome to the <b>Mobile Developer Community</b>')|safe }}</h1>

  <div class="util">
    <p><strong>{{ _('You took back the Web. Now take it with you.') }}</strong></p>
    <ul>
      <li class="util-twitter"><a href="http://twitter.com/mozmobile">{{ _('Twitter') }}</a></li>
      <li class="util-rss"><a href="http://planet.firefox.com/mobile/">{{ _('Subscribe') }}</a></li>
      <li class="util-discuss"><a href="http://mobile.support.mozilla.com/tiki-view_forum.php?locale=en-US&amp;forumId=5">{{ _('Join the Mobile discussions!') }}</a></li>
    </ul>
  </div>
</div>
</header>

<section id="content">
<div class="wrap sidebar">
  <section id="content-main" role="main">

    <div class="boxed">
      <section id="popular-docs" class="articles-list">
        <header class="head section-mobile">
          {# L10n: Please escape HTML entities here, like &amp; #}
          <h2>{{ _('Popular Mobile Documentation')|safe }}</h2>
        </header>

        <ul class="hfeed">
          <li class="hentry">
            <h4 class="entry-title"><a href="https://wiki.mozilla.org/mobile">{{ _('Mobile Wiki') }}</a></h4>
            <p class="entry-summary">
            {% trans %}
            Get the latest news, status and developer documentation on the Mozilla mobile
            project. Check out the mobile project's goals, and how you can help out and get
            involved!
            {% endtrans %}
            </p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="https://wiki.mozilla.org/Mobile/Fennec/Extensions">{{ _('Build Great Mobile Add-ons') }}</a></h4>
            <p class="entry-summary">
            {% trans basics_url='https://wiki.mozilla.org/Mobile/Fennec/Extensions',
                     best_practices_url='https://wiki.mozilla.org/Mobile/Fennec/Extensions/BestPractices',
                     snippets_url='https://wiki.mozilla.org/Mobile/Fennec/CodeSnippets' %}
            Firefox is the world's first Web browser to support mobile add-ons. Learn about
            <a href="{{ basics_url }}">Extension Basics</a>, <a href="{{ best_practices_url
            }}">Extension Best Practices</a>, helpful <a href="{{ snippets_url }}">Code
            Snippets</a>, and more so you can build innovative add-ons for Firefox on Android
            and Firefox on Nokia's Meego platform.
            {% endtrans %}
            </p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="https://wiki.mozilla.org/Mobile/DeviceAPIs">{{ _('Location-Aware Applications') }}</a></h4>
            <p class="entry-summary">
            {% trans geo_url=devmo_url('Using_geolocation') %}
            Learn how to use the <a href="{{ geo_url }}">Geolocation API</a> and put people on the
            right path. Location-Aware Browsing is a must when you're out and about on your mobile.
            Learn how to build innovative apps that delight your audience.
            {% endtrans %}
            </p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="https://wiki.mozilla.org/Mobile#Get_Involved">{{ _('Help build Firefox for Mobile') }}</a></h4>
            <p class="entry-summary">
            {% trans irc_url='irc://irc.mozilla.org/#mobile', meeting_url='https://wiki.mozilla.org/Mobile#Weekly_Meetings',
                     bugzilla_url='https://bugzilla.mozilla.org/' %}
            Your help is vital to the success of Firefox. Provide feedback on our <a href="{{
            irc_url }}">IRC channel</a>, <a href="{{ meeting_url }}">join our Wednesday development
            meeting</a>, or even <a href="{{ bugzilla_url }}">file some bugs</a>.
            {% endtrans %}
            </p>
          </li>
        </ul>
        <p class="all"><a href="{{ devmo_url('Mobile') }}" class="go">{{ _('All mobile development documentation') }}</a></p>
      </section>
      
      <section id="videos">
        <header class="subhead">
          <h2>{{ _('Watch Mobile Videos')|safe }}</h2>
        </header>
        {% include "includes/video_player.html" %}
        <ul class="hfeed">
          <li class="hentry">
            <h3>
              <a href="/en-US/firefox/video/?video=about-mobile" title="{{ _('Watch this video') }}"
                 id="ragavan_summit_2010" class="mobile video_thumbnail">
                <img src="http://videos-cdn.mozilla.net/serv/mdn/ragavan_summit_2010/ragavan_summit_2010.jpg" 
                   alt="Ragavan demoing Firefox Sync" height="150" width="270">
                <span>{{ _('Firefox Sync')}}</span>
              </a>
            </h3>
            <h4 class="entry-title">{{ 
              _('Why Sync up, Security and More')}}</h4>
            <p class="entry-summary">{% trans %}
              See Ragavan demo Firefox Sync on his Android phone. Learn about 
              purpose and goals behind the development of Firefox Sync.
              {% endtrans %}</p>
          </li>
          <li class="hentry">
            <h3>
              <a href="/en-US/firefox/video/?video=about-mobile" title="{{ _('Watch this video') }}"
                 id="stuart_summit_2010" class="mobile video_thumbnail">
                <img src="http://videos-cdn.mozilla.net/serv/mdn/stuart_summit_2010/stuart_summit_2010.jpg" 
                   alt="Stuart demoing html5" height="150" width="270">
                <span>{{ _("Fennec") }}</span>
              </a>
            </h3>
            <h4 class="entry-title">{{ 
              _("Pre-Alpha Fennec and HTML5 Demos") }}</h4>
            <p class="entry-summary">{% trans %}
            See Stuart demo HTML5 capabilities on pre-alpha Fennec. Learn about 
            the purpose and goals behind the development of Firefox 4 for mobile.
            {% endtrans %}
            </p>
          </li>
        </ul>
      </section>

      <section id="fave-articles" class="articles-list">
        <header class="subhead">
          {# L10n: Please escape HTML entities here, like &amp; #}
          <h2>{{ _('Favorite Mobile Articles')|safe }}</h2>
        </header>
        <ul class="hfeed">
          <li class="hentry">
            <h4 class="entry-title"><a href="http://starkravingfinkle.org/blog/2010/06/fennec-2-0-whats-coming" rel="bookmark">{{ _("Firefox for mobile: What's coming next") }}</a></h4>
            <p class="entry-summary">
            {% trans %}
            The projects and planning never stops. We're cooking up some amazing new
            features and improvements for our next major release. Check it out and see
            how you can help us continue to make the world's best mobile Web browser.
            {% endtrans %}
            </p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="http://www.readwriteweb.com/start/2010/01/html5-is-great-for-mobile.php" rel="bookmark">{{ _('"HTML5 is Great for Mobile, Developers Say"') }}</a></h4>
            <p class="entry-summary">
            {% trans %}
            Hear from other developers about the advantages of HTML5 and developing for
            the mobile Web in this article from ReadWriteWeb:
            {% endtrans %}
            </p>
            <p class="entry-summary"><em>
            {% trans %}
            "'Hands down, the developer pool for HTML / JS rock stars is tenfold larger
            [and] there is no download attrition. You simply point people at a URL and
            there you go -- it's installed.' The fact that apps can be directly installed
            by URL rather than by waiting for an App Store download means that
            developers reduce barriers to virality."
            {% endtrans %}
            </em></p>
          </li>
          <li class="hentry">
            <h4 class="entry-title"><a href="http://developer.android.com/reference/packages.html" rel="bookmark">{{ _('Android APIs') }}</a></h4>
            <p class="entry-summary">
            {% trans %}
            Access Android APIs on this Android Developer page.
            {% endtrans %}
            </p>
          </li>
        </ul>
      </section>

      <section id="recent-news" class="articles-list">
        <header class="subhead">
          {# L10n: Please escape HTML entities here, like &amp; #}
          <h3>{{ _('Recent Mobile News &amp; Updates')|safe }}</h3>
        </header>

        {{ newsfeed(updates) }}

        <p class="all"><a href="http://planet.firefox.com/mobile/" class="go">{{ _('All mobile development entries') }}</a></p>
      </section>
    </div>{# /.boxed #}

  </section>{# /#content-main #}

  <aside id="content-sub" role="complementary">
  
    <figure class="promo banner">
      <a href="http://webfwd.org" rel="external">
        <img src="{{MEDIA_URL}}img/webfwd-promo-square.png" width="235" height="205" alt="{{ _("Web Fwd: Mozilla's accelerator for open Web projects. Learn more.") }}">
      </a>
    </figure>
   
    {# {{ twitter(tweets, title=_('Tweets from the Mobile developer community.')) }} #}
  </aside>{# /#content-sub #}

</div>
</section>{# /#content #}

{% endblock %}