howitworks.html 9.88 KB
Newer Older
Mushtaq Ali committed
1
<%page expression_filter="h"/>
2
<%inherit file="base.html" />
3
<%def name="online_help_token()"><% return "welcome" %></%def>
4 5 6 7
<%namespace name='static' file='static_content.html'/>
<%!
  from django.core.urlresolvers import reverse
  from django.utils.translation import ugettext as _
Mushtaq Ali committed
8
  from openedx.core.djangolib.markup import HTML, Text
9
%>
10

David Baumgold committed
11
<%block name="title">${_("Welcome")}</%block>
12
<%block name="bodyclass">not-signedin index view-howitworks</%block>
13 14 15 16 17 18

<%block name="content">

<div class="wrapper-content-header wrapper">
  <section class="content content-header">
    <header>
19 20
      <h1><span class="wrapper-text-welcome">${_("Welcome to {studio_name}").format(
          studio_name=settings.STUDIO_NAME
Mushtaq Ali committed
21
      )}</span></h1>
22
      <p class="tagline">${_("{studio_name} helps manage your online courses, so you can focus on teaching them").format(
23
        studio_name=settings.STUDIO_SHORT_NAME
24
      )}</p>
25 26 27 28 29 30 31
    </header>
  </section>
</div>

<div class="wrapper-content-features wrapper">
  <section class="content content-features">
    <header>
32
      <h2 class="sr">${_("{studio_name}'s Many Features").format(studio_name=settings.STUDIO_SHORT_NAME)}</h2>
33 34 35 36 37
    </header>

    <ol class="list-features">
      <li class="feature">
        <figure class="img zoom">
38
          <a rel="modal" href="#hiw-feature1">
39
            <img src="${static.url("images/thumb-hiw-feature1.png")}" alt="${_('{studio_name} Helps You Keep Your Courses Organized').format(studio_name=settings.STUDIO_SHORT_NAME)}" />
40
            <figcaption class="sr">${_("{studio_name} Helps You Keep Your Courses Organized").format(studio_name=settings.STUDIO_NAME)}</figcaption>
41
            <span class="action-zoom">
42
              <span class="icon fa fa-search-plus" aria-hidden="true"></span><span class="sr">${_("Enlarge image")}</span>
43
            </span>
44
          </a>
45 46 47
        </figure>

        <div class="copy">
David Baumgold committed
48
          <h3>${_("Keeping Your Course Organized")}</h3>
Mushtaq Ali committed
49 50 51 52 53
          <p>${Text(_("The backbone of your course is how it is organized. {studio_name} offers an {strong_start}Outline{strong_end} editor, providing a simple hierarchy and easy drag and drop to help you and your students stay organized.")).format(
                  studio_name=settings.STUDIO_SHORT_NAME,
                  strong_start=HTML('<strong>'),
                  strong_end=HTML('</strong>')
              )}</p>
54 55 56

          <ul class="list-proofpoints">
            <li class="proofpoint">
David Baumgold committed
57
              <h4 class="title">${_("Simple Organization For Content")}</h4>
Mushtaq Ali committed
58 59 60 61 62
              <p>${Text(_("{studio_name} uses a simple hierarchy of {strong_start}sections{strong_end} and {strong_start}subsections{strong_end} to organize your content.")).format(
                    studio_name=settings.STUDIO_SHORT_NAME,
                    strong_start=HTML('<strong>'),
                    strong_end=HTML('</strong>')
                  )}</p>
63 64 65
            </li>

            <li class="proofpoint">
David Baumgold committed
66
              <h4 class="title">${_("Change Your Mind Anytime")}</h4>
Mark Hoeber committed
67
              <p>${_("Draft your outline and build content anywhere. Simple drag and drop tools let you reorganize quickly.")}</p>
68 69 70
            </li>

            <li class="proofpoint">
David Baumgold committed
71
              <h4 class="title">${_("Go A Week Or A Semester At A Time")}</h4>
Mushtaq Ali committed
72 73 74 75
              <p>${Text(_("Build and release {strong_start}sections{strong_end} to your students incrementally. You don't have to have it all done at once.")).format(
                    strong_start=HTML('<strong>'),
                    strong_end=HTML('</strong>')
                  )}</p>
76 77 78 79 80 81 82
            </li>
          </ul>
        </div>
      </li>

      <li class="feature">
        <figure class="img zoom">
83
        <a rel="modal" href="#hiw-feature2">
84
          <img src="${static.url("images/thumb-hiw-feature2.png")}" alt="${_('Learning is More than Just Lectures')}" />
David Baumgold committed
85
          <figcaption class="sr">${_("Learning is More than Just Lectures")}</figcaption>
86
          <span class="action-zoom">
87
            <span class="icon fa fa-search-plus" aria-hidden="true"></span><span class="sr">${_("Enlarge image")}</span>
88
          </span>
89
        </a>
90 91 92
        </figure>

        <div class="copy">
David Baumgold committed
93
          <h3>${_("Learning is More than Just Lectures")}</h3>
94
          <p>${_("{studio_name} lets you weave your content together in a way that reinforces learning. Insert videos, discussions, and a wide variety of exercises with just a few clicks.").format(studio_name=settings.STUDIO_SHORT_NAME)} </p>
95 96 97

          <ul class="list-proofpoints">
            <li class="proofpoint">
David Baumgold committed
98
              <h4 class="title">${_("Create Learning Pathways")}</h4>
Mark Hoeber committed
99
              <p>${_("Help your students understand one concept at a time with multimedia, HTML, and exercises.")}</p>
100 101 102
            </li>

            <li class="proofpoint">
David Baumgold committed
103 104
              <h4 class="title">${_("Work Visually, Organize Quickly")}</h4>
              <p>${_("Work visually and see exactly what your students will see. Reorganize all your content with drag and drop.")}</p>
105 106 107
            </li>

            <li class="proofpoint">
David Baumgold committed
108
              <h4 class="title">${_("A Broad Library of Problem Types")}</h4>
109
              <p>${_("It's more than just multiple choice. {studio_name} supports more than a dozen types of problems to challenge your learners.").format(studio_name=settings.STUDIO_SHORT_NAME)}</p>
110 111 112 113 114 115 116
            </li>
          </ul>
        </div>
      </li>

      <li class="feature">
        <figure class="img zoom">
117
          <a rel="modal" href="#hiw-feature3">
118 119
            <img src="${static.url("images/thumb-hiw-feature3.png")}" alt="${_('{studio_name} Gives You Simple, Fast, and Incremental Publishing. With Friends.').format(studio_name=settings.STUDIO_SHORT_NAME)}" />
            <figcaption class="sr">${_("{studio_name} Gives You Simple, Fast, and Incremental Publishing. With Friends.").format(studio_name=settings.STUDIO_SHORT_NAME)}</figcaption>
120
            <span class="action-zoom">
121
              <span class="icon fa fa-search-plus" aria-hidden="true"></span><span class="sr">${_("Enlarge image")}</span>
122
            </span>
123
          </a>
124 125 126
        </figure>

        <div class="copy">
David Baumgold committed
127
          <h3>${_("Simple, Fast, and Incremental Publishing. With Friends.")}</h3>
128
          <p>${_("{studio_name} works like web applications you already know, yet understands how you build curriculum. Instant publishing to the web when you want it, incremental release when it makes sense. And with co-authors, you can have a whole team building a course, together.").format(studio_name=settings.STUDIO_SHORT_NAME)}</p>
129 130 131

          <ul class="list-proofpoints">
            <li class="proofpoint">
David Baumgold committed
132
              <h4 class="title">${_("Instant Changes")}</h4>
Mark Hoeber committed
133
              <p>${_("Caught a bug? No problem. When you want, your changes go live when you click Save.")}</p>
134 135 136
            </li>

            <li class="proofpoint">
David Baumgold committed
137
              <h4 class="title">${_("Release-On Date Publishing")}</h4>
Mushtaq Ali committed
138 139 140 141 142
              <p>${Text(_("When you've finished a {strong_start}section{strong_end}, pick when you want it to go live and {studio_name} takes care of the rest. Build your course incrementally.")).format(
                      studio_name=settings.STUDIO_SHORT_NAME,
                      strong_start=HTML('<strong>'),
                      strong_end=HTML('</strong>')
                  )}</p>
143 144 145
            </li>

            <li class="proofpoint">
David Baumgold committed
146 147
              <h4 class="title">${_("Work in Teams")}</h4>
              <p>${_("Co-authors have full access to all the same authoring tools. Make your course better through a team effort.")}</p>
148 149 150 151 152 153 154 155 156 157 158
            </li>
          </ul>
        </div>
      </li>
    </ol>
  </section>
</div>

<div class="wrapper-content-cta wrapper">
  <section class="content content-cta">
    <header>
159
      <h2 class="sr">${_("Sign Up for {studio_name} Today!").format(studio_name=settings.STUDIO_SHORT_NAME)}</h2>
160
    </header>
161

162
    <ul class="list-actions">
163
      <li class="action-item">
Mushtaq Ali committed
164
        <a href="${reverse('signup')}" class="action action-primary">${_("Sign Up & Start Making Your {platform_name} Course").format(platform_name=settings.PLATFORM_NAME)}</a>
165
      </li>
166
      <li class="action-item">
167
        <a href="${reverse('login')}" class="action action-secondary">${_("Already have a {studio_name} Account? Sign In").format(studio_name=settings.STUDIO_SHORT_NAME)}</a>
168 169 170 171
      </li>
    </ul>
  </section>
</div>
172

173
<div class="content-modal" id="hiw-feature1">
David Baumgold committed
174
  <h3 class="title">${_("Outlining Your Course")}</h3>
175
  <figure>
176
    <img src="${static.url("images/hiw-feature1.png")}" alt="" />
Mushtaq Ali committed
177
    <figcaption class="description">${_("Simple two-level outline to organize your course. Drag and drop, and see your course at a glance.")}</figcaption>
178 179
  </figure>

180
  <a href="" rel="view" class="action action-modal-close">
181
    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
David Baumgold committed
182
    <span class="label">${_("close modal")}</span>
183
  </a>
184 185 186
</div>

<div class="content-modal" id="hiw-feature2">
David Baumgold committed
187
  <h3 class="title">${_("More than Just Lectures")}</h3>
188
  <figure>
189
    <img src="${static.url("images/hiw-feature2.png")}" alt="" />
David Baumgold committed
190
    <figcaption class="description">${_("Quickly create videos, text snippets, inline discussions, and a variety of problem types.")}</figcaption>
191 192
  </figure>

193
  <a href="" rel="view" class="action action-modal-close">
194
    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
David Baumgold committed
195
    <span class="label">${_("close modal")}</span>
196
  </a>
197 198 199
</div>

<div class="content-modal" id="hiw-feature3">
David Baumgold committed
200
  <h3 class="title">${_("Publishing on Date")}</h3>
201
  <figure>
202
    <img src="${static.url("images/hiw-feature3.png")}" alt="" />
203
    <figcaption class="description">${_("Simply set the date of a section or subsection, and {studio_name} will publish it to your students for you.").format(studio_name=settings.STUDIO_SHORT_NAME)}</figcaption>
204 205
  </figure>

206
  <a href="" rel="view" class="action action-modal-close">
207
    <span class="icon fa fa-times-circle" aria-hidden="true"></span>
David Baumgold committed
208
    <span class="label">${_("close modal")}</span>
209 210
  </a>
</div>
211
</%block>