Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nomenclature, grammar fixes #12

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Nomenclature, grammar fixes #12

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions paperprototype.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Build your first Browser Extension</title>
<title>Build Your First Extension for Firefox</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand Down Expand Up @@ -45,7 +45,7 @@
<div class="container">
<img class="profile-image img-responsive pull-left" src="assets/images/profile.png" />
<div class="profile-content pull-left">
<h1 class="name">Build your first Browser Extension</h1>
<h1 class="name">Build Your First Extension for Firefox</h1>
<h2 class="desc">Second meeting - Prototype your idea</h2>
</div><!--//profile-->
</div><!--//container-->
Expand All @@ -58,9 +58,9 @@ <h2 class="desc">Second meeting - Prototype your idea</h2>
<div class="section-inner">
<h2 class="heading">Introduction</h2>
<div class="content">
<p>This is the second activity for building a browser extension. Do you want to start from the beggining? <a href="https://mozillacampusclubs.github.io/teach-how-to-build-addons/">Check out the first activity</a> which will introduce you to browser extensions and idea generation.</p>
<p>In this meeting/activity participants will learn all about paper prototyping, a technique for communicating and sharing an idea early on by making it real and testing it early with your users.</p>
<p>This activity is inspired by the <a href="https://toolkit.mozilla.org/method/paper-prototype/">Paper prototype guide on Mozilla's Open Innovation Toolkit</a>.
<p>This is the second activity for building an extension for Firefox. Do you want to start from the beginning? <a href="https://mozillacampusclubs.github.io/teach-how-to-build-addons/">Check out the first activity</a> which will introduce you to browser extensions and idea generation.</p>
<p>In this meeting/activity, participants will learn all about paper prototyping, a technique for communicating and sharing an idea by making it real and testing it early with your users.</p>
<p>This activity is inspired by the <a href="https://toolkit.mozilla.org/method/paper-prototype/">paper prototype guide on Mozilla's Open Innovation Toolkit</a>.
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
Expand All @@ -78,7 +78,7 @@ <h2 class="heading">Getting ready</h2>

<h4 class="title">Share a slide presentation</h4>
<p>Use the following slide deck as is, or customize it to make it your own. Going through this will teach you everything you need to lead this activity with your club.</p>
<p>After you customize the slidedeck use it during your Club's meeting for introducing your members into prototyping their idea.</p>
<p>After you customize the slidedeck, use it during your Club's meeting to introduce your members to prototyping their ideas.</p>
<a class="btn btn-cta-secondary fork" href="https://docs.google.com/presentation/d/1qySrYEOtLvs7Cuum1TuH7Mud-5M-Bqtli1lqSrJmA7s/edit#slide=id.p" target="_blank">Prototyping ideas slidedeck</a>

</div><!--//desc-->
Expand All @@ -93,13 +93,13 @@ <h4 class="title">Share a slide presentation</h4>
<h2 class="heading">Plan - 5'</h2>
<div class="content">
<div class="item">
<p>In your last meeting your group identified an idea for building a browser add-on and submitted on GitHub. </p>
<p>Now it's time to start to flesh out what your addon's product experience would look like. Ask the following questions:</p>
<p>In your last meeting, your group identified an idea for building an extension for Firefox and submitted on GitHub. </p>
<p>Now it's time to start to flesh out what your extension's product experience would look like. Ask the following questions:</p>
<ul>
<li>What interactions would the user need to have, where does your product end and real life begin?</li>
<li>What are the questions you have, the assumptions you are making in this? </li>
<li>What are the questions you have and the assumptions you are making in this? </li>
</ul>
<p>A paper prototype can be great to shape an idea but can also be a great way to test these early questions about how to design a solution. Think about what your goal is for your prototype before you start creating it. Select one scenario that can aide you in this goal and a few key tasks to focus on developing further.</p>
<p>A paper prototype can be great to shape an idea, and can also be a great way to test these early questions about how to design a solution. Think about what your goal is for your prototype before you start creating it. Select one scenario that can aide you in this goal and a few key tasks to focus on developing further.</p>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
Expand All @@ -110,7 +110,7 @@ <h2 class="heading">Plan - 5'</h2>
<h2 class="heading">Create - 35'</h2>
<div class="content">
<div class="item">
<p>Use the paper and pen to draw out each interaction screen for the tasks/scenario you have chosen. Not every screen has to be redone, If small things change, use cut outs to be able to move small changes in place. Continue to walk through your prototype until it makes sense to you and your team. And then go test it with users. You can either present your paper prototype as is or you can make it easier to share by incorporating it with links in programs like <a href="https://www.invisionapp.com/" target="_blank">invision</a> or <a href="https://popapp.in/" target="_blank">pop.</a></p>
<p>Use the paper and pen to draw out each interaction screen for the tasks/scenario you have chosen. Not every screen has to be redone! If small things change, use cut outs to be able to move small changes in place. Continue to walk through your prototype until it makes sense to you and your team. Then, test it with users. You can either present your paper prototype as is or you can make it easier to share by incorporating it with links in programs like <a href="https://www.invisionapp.com/" target="_blank">invision</a> or <a href="https://popapp.in/" target="_blank">pop.</a></p>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
Expand All @@ -126,7 +126,7 @@ <h2 class="heading">Share and Test your prototype - 10'</h2>
<p>You can use your new prototype to test your solution with real users and gain buy-in and understanding by sharing with the relevant stakeholders.</p>
<ol>
<li>Spend two minutes to make pair of groups</li>
<li>Each group has 5’ to present its idea, gather feedback and test their prototype with the other group</li>
<li>Each group has 5’ to present an idea, gather feedback, and test their prototype with the other group</li>
</ol>
<p>Review the feedback you received from the other teams and update/adjust your prototypes if necessary.</p>
</div><!--//item-->
Expand All @@ -140,8 +140,8 @@ <h2 class="heading">Update your proposal - 10'</h2>
<div class="content">
<div class="item">
<p>As final step we invite you to upload all of your digital resources (photos, files) into your idea submission on GitHub.</p>
<p>That way all of your fellow Open Source Clubs and experts will be able to track your progress and see the amazing work you are doing!</p>
<p>You are now ready to take the next step and start Building your browser add-on! Ask your Club Captain when the next meeting will be.</p>
<p>That way, all of your fellow Open Source Clubs and experts will be able to track your progress and see the amazing work you are doing!</p>
<p>You are now ready to take the next step and start building your extension! Ask your Club Captain when the next meeting will be.</p>
<a class="btn btn-cta-secondary fork" href="https://github.com/mozillacampusclubs/teach-how-to-build-addons/issues/">Update your idea on GitHub</a>
</div><!--//item-->
</div><!--//content-->
Expand All @@ -156,7 +156,7 @@ <h2 class="heading">What you will learn</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<p><i class="fa fa-quote-left"></i>By going through this activity you will learn everything about paper prototyping your idea! This is an important and usefull technique for not only building a browser extension.</p>
<p><i class="fa fa-quote-left"></i>By going through this activity you will learn everything about paper prototyping your idea! This is an important and useful technique for creating extensions, apps, and more.</p>
</blockquote>
<p class="source"><span class="name">Stegios Marias</span><br /><span class="title">Undergrad Computer Science Student</span></p>
</div><!--//item-->
Expand Down Expand Up @@ -205,7 +205,7 @@ <h2 class="heading">Requirements & Resources</h2>
<li>Your favorite text editor</li>
<li>Access to the internet</li>
<li>Paper, cardboard, foam, glue, scissors, markers, bluetack</p>
<li>For testing use programs such as keynote, <a href="https://www.invisionapp.com/" target="_blank">invisio</a> or <a href="https://popapp.in/" target="_blank">pop app</a></li>
<li>For testing use programs such as keynote <a href="https://www.invisionapp.com/" target="_blank">invisio</a> or <a href="https://popapp.in/" target="_blank">pop app</a></li>
</ul>
</div><!--//item-->
</div>
Expand Down