devhub landing page updates; fix bug 794266

media/css/ecosystem/landing.less

@@ -1,5 +1,7 @@
 @import './documentation';
 
+@right-width: 528px;
+
 #landing-page {
     color: @medium-gray;
     font-size: 14px;
@@ -11,57 +13,170 @@
 
     h1 {
         color: @dark-gray;
-        font-size: 45px;
+        font-size: 55px;
         font-weight: 100;
-        margin-bottom: 20px;
+        margin: 20px 0 40px;
+        text-align: center;
         text-shadow: #fff 0 1px 1px;
     }
 
+    p.intro {
+        font-size: 25px;
+        font-weight: 100;
+        text-align: center;
+    }
+
     .button-wrapper {
         padding: 30px 0 20px;
     }
-
-    .sections {
-        a {
-            font-size: 20px;
-            line-height: 30px;
-        }
-
-        p {
-            margin: 5px 0 10px;
-        }
-    }
 }
 
 #landing-page .half {
-    background-color: #fff;
-    .box-shadow(@light-gray 0 3px 3px);
     float: left;
-    margin: 20px 0;
+    margin: 8px 0;
-    padding: 30px 20px 20px;
+    padding: 10px 20px 0;
     position: relative;
     width: 920px;
 
-    .panel {
+    &.initial-steps {
-        float: left;
+        background: #fff url(../../img/ecosystem/landing-steps.png) no-repeat 15px 50%;
-
+        .border-radius(5px);
-        &:first-child {
+        .box-shadow(@light-gray 0 3px 3px);
-            border-right: 1px solid @faint-gray;
-            text-align: center;
-            width: 50%;
     }
 
-        &:last-child {
+    .panel {
-            width: 370px;
+        float: left;
-            padding: 0 30px;
+        width: 33.3%;
+
+        h2 {
+            text-align: center;
+        }
+
+        a p {
+            color: @medium-gray;
+        }
+
+        a:hover {
+            text-decoration: none;
+        }
+
+        p {
+            margin: 0 auto;
+            text-align: center;
+            width: 200px;
+        }
     }
 
     h2 {
-            margin-bottom: 5px;
+        color: @dark-gray;
+        font-size: 30px;
+        margin-bottom: 15px;
     }
 
     p {
         margin-top: 0;
     }
+
+    .platform-copy, .videos, .screenshot {
+        float: left;
+    }
+
+    .screenshot {
+        margin-top: 10px;
+    }
+
+    .platform-copy, .screenshot {
+        padding-right: 30px;
+        width: 360px;
+
+        &.right {
+            padding: 0;
+            width: @right-width;
+        }
+    }
+
+    video {
+        display: block;
+        margin: 0 auto;
+        padding: 10px;
+    }
+
+    .videos {
+        margin: 0 auto;
+        width: @right-width;
+
+        .video-item {
+            display: none;
+            margin-top: 10px;
+        }
+
+        .video-item:first-child {
+            display: block;
+        }
+
+        .subtitles {
+            margin-top: 5px;
+            text-align: center;
+        }
+
+        .video-control {
+            background-color: @white;
+            .border-radius(3px);
+            .box-shadow(@medium-gray 0 0 2px);
+            margin: 0 auto;
+        }
+
+        ol {
+            display: block;
+            float: left;
+            margin: 20px 0;
+            padding: 0;
+
+            li {
+                .border-radius(3px);
+                .box-shadow(@medium-gray 0 0 2px);
+                cursor: pointer;
+                float: left;
+                margin-right: 10px;
+                padding: 3px 3px 0 3px;
+
+                &:first-child {
+                    margin-left: 2px;
+                }
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+            img {
+                width: 91px;
+            }
+        }
+    }
+
+    .icons {
+        list-style-type: none;
+        padding: 10px 0 0;
+        li {
+            background-repeat: no-repeat;
+            border-bottom: 1px dotted @light-gray;
+            font-size: 15px;
+            line-height: 22px;
+            min-height: 52px;
+            margin-bottom: 5px;
+            padding: 10px 0 0 68px;
+
+            &.testing {
+                background-image: url(../../img/ecosystem/landing-icon-testing.png);
+            }
+
+            &.early {
+                background-image: url(../../img/ecosystem/landing-icon-early.png);
+            }
+
+            &.target {
+                background-image: url(../../img/ecosystem/landing-icon-target.png);
+            }
+        }
     }
 }

media/js/mkt/ecosystem.js

@@ -0,0 +1,63 @@
+(function() {
+    var videos = $('.videos');
+    var videoItems = videos.find('.video-item');
+    var videoObjects = videos.find('video');
+    var videoThumbs = videos.find('.video-thumbs');
+
+    // Video functions taken from https://github.com/mozilla/bedrock/blob/master/media/js/marketplace/partners.js
+    var getNewObject = function(vidObject)
+    {
+        var data = $object.attr('data');
+        data = data.replace(/&/g, '&');
+        var html =
+              '<object '
+            + 'type="application/x-shockwave-flash" '
+            + 'style="width: 509px; height: 278px;" '
+            + 'data="' + data + '">'
+            + '<param name="movie" value="' + data + '" />'
+            + '<param name="wmode" value="transparent" />'
+            + '<div class="video-player-no-flash">'
+            + gettext('This video requires a browser with support for open video ')
+            + gettext('or the <a href="http://www.adobe.com/go/getflashplayer">Adobe ')
+            + gettext('Flash Player</a>.')
+            + '</div>'
+            + '</object>';
+
+        return $(html);
+    };
+
+    var stopVideos = function() {
+        var el;
+
+        for (var i = 0; i < videoObjects.length; i ++) {
+            el = videoObjects[i];
+            if (typeof HTMLMediaElement !== 'undefined') {
+                el.pause();
+                el.currentTime = 0;
+                if (el._control) {
+                    el._control.show();
+                }
+            } else {
+                // Delete and re-add Flash object. We don't have the
+                // documentation to script it :-(
+                (function() {
+                    var theEl = el;
+                    var vidObject = $('object', theEl);
+                    var newObject = getNewObject(vidObject);
+                    setTimeout(function() {
+                        vidObject.remove();
+                        newObject.appendTo(theEl);
+                    }, 750);
+                })();
+            }
+        }
+    };
+
+    videoThumbs.on('click', 'img', function() {
+        var self = $(this).parent();
+
+        videoItems.hide();
+        stopVideos();
+        videos.find('#' + self.data('name')).show();
+    });
+})();

mkt/asset_bundles.py

@@ -320,4 +320,7 @@ JS = {
         'js/impala/suggestions.js',
         'js/mkt/lookup-tool.js',
     ),
+    'mkt/ecosystem': (
+        'js/mkt/ecosystem.js',
+    ),
 }

mkt/ecosystem/templates/ecosystem/base.html

@@ -107,12 +107,6 @@
                 {{ _('Marketplace Submission') }}
               </a>
             </li>
-            <li>
-              <a href="{{ url('ecosystem.partners') }}"
-                 title="{{ _('Business Partners') }}">
-                {{ _('Business Partners') }}
-              </a>
-            </li>
           </ol>
         </li>
       </ul>

mkt/ecosystem/templates/ecosystem/landing.html

@@ -1,45 +1,157 @@
 {% extends 'ecosystem/base.html' %}
 
+{% from "ecosystem/macros.html" import video_display with context %}
+
 {% block bodyclass %}landing developer-hub{% endblock %}
 
+{% block devhub_categories %}{% endblock %}
+
 {% block content %}
   <div id="landing-page">
-    <section class="half first">
-      <div class="panel">
     <h1>{{ _('Developer Hub') }}</h1>
-        <p>
+    <p class="intro">
       {%- trans %}
-            Develop HTML5 Web apps for an open marketplace.
+        Develop HTML5 Web Apps for an open marketplace.
       {% endtrans -%}
     </p>
+    <section class="half initial-steps">
+      <div class="panel">
+        <a href="{{ url('ecosystem.documentation', page='principles') }}">
+          <h2>{{ _('Design') }}</h2>
+          <p>
+            {% trans %}
+              Learn how to design Web Apps that provide a user experience
+              optimized for Firefox OS &amp; Mobile
+            {% endtrans %}
+          </p>
+        </a>
         <div class="button-wrapper">
-          <a href="{{ url('submit.app') }}" class="button prominent">{{ _('Submit an App') }}</a>
+          <a href="{{ url('ecosystem.documentation', page='principles') }}"
+             class="button prominent">
+            {{ _('View the Design Guide') }}
+          </a>
         </div>
       </div>
       <div class="panel">
-        <h2>
+        <a href="{{ url('ecosystem.documentation', page='html5') }}">
-          <a href="{{ url('ecosystem.partners') }}">
+          <h2>{{ _('Build') }}</h2>
-            {{ _('Business Partners') }}
-          </a>
-        </h2>
           <p>
             {% trans %}
-            Great app experiences delivered across multiple platforms
+              All the tools, docs and references you'll need for
-            and devices.
+              development and testing of your App
             {% endtrans %}
           </p>
-        <h2>
-          <a href="{{ url('ecosystem.support') }}">
-            {{ _('Support') }}
         </a>
-        </h2>
+        <div class="button-wrapper">
+          <a href="{{ url('ecosystem.documentation', page='tutorial_general') }}"
+             class="button prominent">
+            {{ _('Start the Tutorial') }}
+          </a>
+        </div>
+      </div>
+      <div class="panel">
+        <a href="{{ url('ecosystem.documentation', page='mkt_hosting') }}">
+          <h2>{{ _('Publish') }}</h2>
           <p>
             {% trans %}
-            Frequently asked questions about Web apps and the Firefox
+              Find out how to distribute your Apps on an open marketplace
-              Marketplace.
+              that puts users and developers first
             {% endtrans %}
           </p>
+        </a>
+        <div class="button-wrapper">
+          <a href="{{ url('submit.app') }}" class="button prominent">
+            {{ _('Submit an App') }}</a>
+        </div>
+      </div>
+    </section>
+    <section id="platform" class="half">
+      <div class="platform-copy">
+        <h2>{{ _('The Mozilla Apps platform') }}</h2>
+        <p>
+          {% trans %}
+            Building Apps for the Web provides developers with full control
+            over content, functionality and how Apps are distributed,
+            including access to hundreds of millions of Firefox users
+            through the Firefox Marketplace.
+          {% endtrans %}
+        </p>
+        <p>
+          {% trans %}
+            Using open Web standards and Mozilla-designed APIs, great app
+            experiences can be delivered across multiple platforms,
+            devices and operating systems &mdash; closing the gap between Web
+            and native apps for the first time.
+          {% endtrans %}
+        </p>
+      </div>
+
+      <div class="videos">
+        {% for video in videos %}
+          {{ video_display(video.name, video.path, video.translation) }}
+        {% endfor %}
+
+        <ol class="video-thumbs">
+          {% for video in videos %}
+            <li data-name="{{ video.name }}">
+              <img src="{{ media('img/ecosystem/poster-%s.jpg' % video.name) }}">
+            </li>
+          {% endfor %}
+        </ol>
+      </div>
+    </section>
+    <section id="marketplace" class="half">
+      <div class="screenshot">
+        <img src="{{ media('img/ecosystem/marketplace-landing.jpg') }}">
+      </div>
+
+      <div class="platform-copy right">
+        <h2>{{ _('Firefox Marketplace') }}</h2>
+        <p>
+          {% trans %}
+            The Firefox Marketplace gives users the opportunity to find,
+            try and buy Apps and content that matters most to them. This
+            means exciting, useful and high-quality Apps relevant to
+            local markets across all categories that users can use to
+            get the most out of their daily lives.
+          {% endtrans %}
+        </p>
+        <p>
+          {% trans %}
+            Mozilla's global reach extends to hundreds of millions of
+            Firefox users worldwide. Through intelligent Marketplace
+            curation and effective use of Mozilla’s marketing channels,
+            Mozilla can help developers can get their App into the hands
+            of their target users around the world.
+          {% endtrans %}
+        </p>
+        <p>
+          {% trans %}
+            Before the public launch later this year, Mozilla will be
+            opening the Marketplace for user testing. Take advantage of
+            this by being one of the first App developers to build a user
+            base. Submit your App to:
+          {% endtrans %}
+
+          <ul class="icons">
+            <li class="testing">
+              {% trans %}
+                Test your App with a committed group of early adopters.
+              {% endtrans %}
+            </li>
+            <li class="early">
+              {{ _('Build an early fan base and gain popularity.') }}
+            </li>
+            <li class="target">
+              {{ _('Target tech savvy consumers with your App.') }}
+            </li>
+          </ul>
+        </p>
       </div>
     </section>
   </div>
 {% endblock %}
+
+{% block js %}
+  {{ js('mkt/ecosystem') }}
+{% endblock %}

mkt/ecosystem/templates/ecosystem/macros.html

@@ -163,16 +163,44 @@
                 {{ _('Test Installation on Desktop') }}
               </a>
             </li>
-            <li>
-              <a href="{{ url('ecosystem.partners') }}"
-                 {% if section == 'partners' %}class="selected"{% endif %}
-                 title="{{ _('Business Partners') }}">
-                {{ _('Business Partners') }}
-              </a>
-            </li>
           </ol>
         {% endif %}
       </li>
     </ul>
   </section>
 {% endmacro -%}
+
+{% macro video_display(video_name, video_path, translation_id) -%}
+  <div class="{{ video_name }}-content video-item" id="{{ video_name }}">
+    <div class="video-control">
+      <video width="509" height="278"
+        poster="{{ media('img/ecosystem/poster-%s.jpg' % video_name) }}"
+        controls="controls">
+        <source src="//videos-cdn.mozilla.net/serv/drafts/{{ video_path }}.webm" type="video/webm">
+        <source src="//videos-cdn.mozilla.net/serv/drafts/{{ video_path }}.theora.ogv"
+                type="video/ogg; codecs=&quot;theora, vorbis&quot;">
+        <source src="//videos-cdn.mozilla.net/serv/drafts/{{ video_path }}.mp4" type="video/mp4">
+        {# TODO: Get a version of playerWithControls.swf on the video CDN for addons #}
+        <!--
+        <object type="application/x-shockwave-flash"
+                style="width: 528px; height: 317px;"
+                data="//videos-cdn.mozilla.net/addons/playerWithControls.swf?flv=serv/drafts/{{ video_name }}.mp4&amp;autoplay=false&amp;msg=Play%20Video">
+          <param name="movie" value="//videos-cdn.mozilla.net/addons/playerWithControls.swf?flv=serv/drafts/{{ video_name }}.mp4&amp;autoplay=false&amp;msg=Play%20Video">
+          <param name="wmode" value="transparent">
+          <div class="video-player-no-flash">
+            This video requires a browser with support for open video or the
+            <a href="http://www.adobe.com/go/getflashplayer">
+              Adobe Flash Player
+            </a>.
+          </div>
+        </object>
+        -->
+      </video>
+    </div>
+    <div class="subtitles">
+      <a href="http://www.universalsubtitles.org/videos/{{ translation_id }}/info/">
+        {{ _('View with subtitles') }}
+      </a>
+    </div>
+  </div>
+{% endmacro -%}

mkt/ecosystem/templates/ecosystem/partners.html

@@ -1,48 +0,0 @@
-{% extends 'ecosystem/base.html' %}
-{% from "ecosystem/macros.html" import navigation with context %}
-
-{% block title %}
-  {{ hub_page_title(_('Partners')) }}
-{% endblock %}
-
-{% block extrahead %}
-  {{ css('mkt/ecosystem') }}
-{% endblock %}
-
-{% block content %}
-  <div class="doc-wrapper">
-    {{ navigation('partners') }}
-
-    <article>
-      <h1>{{ _('Business Partners') }}</h1>
-
-      <h2>{{ _('Reach') }}</h2>
-      <ul>
-        <li>{{ _('Enter &amp; excite emerging markets') }}</li>
-        <li>{{ _('Default app store on the Firefox OS') }}</li>
-        <li>{{ _('Reach new smartphones users') }}</li>
-        <li>
-          {% trans %}
-            Access to massive distribution via Mozilla &amp; Telefónica
-          {% endtrans %}
-        </li>
-      </ul>
-
-      <h2>{{ _('Choice') }}</h2>
-      <ul>
-        <li>{{ _('Direct User-Developer relationship') }}</li>
-        <li>{{ _('Content owners keep direct connection to audience') }}</li>
-        <li>{{ _('No need to resubmit apps for updated content') }}</li>
-        <li>{{ _('Content owners control app releases') }}</li>
-        <li>{{ _('Light approval process') }}</li>
-      </ul>
-
-      <h2>{{ _('Open') }}</h2>
-      <ul>
-        <li>{{ _('Based on Standard web technologies') }}</li>
-        <li>{{ _('Limits/eliminates fragmentation issues') }}</li>
-        <li>{{ _('Open &amp; non proprietary') }}</li>
-      </ul>
-    </article>
-  </div>
-{% endblock %}

mkt/ecosystem/tests/test_views.py

@@ -37,11 +37,6 @@ class TestLanding(amo.tests.TestCase):
 
 class TestDevHub(amo.tests.TestCase):
 
-    def test_partners(self):
-        r = self.client.get(reverse('ecosystem.partners'))
-        eq_(r.status_code, 200)
-        self.assertTemplateUsed(r, 'ecosystem/partners.html')
-
     def test_support(self):
         r = self.client.get(reverse('ecosystem.support'))
         eq_(r.status_code, 200)

mkt/ecosystem/urls.py

@@ -4,7 +4,6 @@ from . import views
 
 urlpatterns = patterns('',
     url('^$', views.landing, name='ecosystem.landing'),
-    url('^partners$', views.partners, name='ecosystem.partners'),
     url('^installation$', views.installation, name='ecosystem.installation'),
     url('^support$', views.support, name='ecosystem.support'),
     url('^docs/(?P<page>\w+)?$', views.documentation,

mkt/ecosystem/views.py

@@ -12,13 +12,35 @@ log = commonware.log.getLogger('z.ecosystem')
 
 def landing(request):
     """Developer Hub landing page."""
-    return jingo.render(request, 'ecosystem/landing.html')
+    videos = [
-
+        {
-
+            'name': 'evernote',
-def partners(request):
+            'path': 'MozMarketplace-Evernote_2ndDraft-RC-SD1%20640',
-    """Landing page for partners."""
+            'translation': 'LaXSpZ3FQJps'
-    return jingo.render(request, 'ecosystem/partners.html',
+        },
-           {'page': 'partners', 'category': 'publish'})
+        {
+            'name': 'mobbase',
+            'path': 'Moz_Market_Mixmatchmusic',
+            'translation': 'oSJQGUbVgGKj'
+        },
+        {
+            'name': 'teambox',
+            'path': 'Moz_Market_Teambox',
+            'translation': 'dvmnkd83CJgI'
+        },
+        {
+            'name': 'kicksend',
+            'path': 'Moz_Market_kicksend%202',
+            'translation': 'lQ8UVq6KwwEW'
+        },
+        {
+            'name': 'box',
+            'path': 'Moz_Market_box_1stDraft-HD%20720p%20Video%20Sharing-640x360%20Video%20Sharing',
+            'translation': 'fxvXQC0H68AU'
+        }
+    ]
+    return jingo.render(request, 'ecosystem/landing.html',
+           {'videos': videos})
 
 
 def support(request):