forked from makkarlabs/badgeit
-
Notifications
You must be signed in to change notification settings - Fork 1
/
faq.html
125 lines (116 loc) · 8.6 KB
/
faq.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
<head>
<title>BadgeIt - Badge Generator for Events, Conferences|FAQ</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="The smart way to generate badges for your events">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/createfonts.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/head.css" type="text/css">
<style>
.box{padding-left:50px; padding-right:50px; padding-top:30px;}
#questions li a { font-size:18px;}
#questions li { height:30px; }
</style>
<script src="resources/js/jquery.js"></script>
<script src="resources/js/analytics.js"></script>
</head>
<body>
<div id="social"></div>
<div id="headerContainer">
<header>
<h1 id="title-large">Badge it</h1>
<div style="float:right;">
<ul class="nav nav-pills">
<li><a href="home.html">Home</a></li>
<li><a href="start.html">Create</a></li>
<li class="active"><a href="#">FAQ</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="clr">
</header>
</div>
<div class="container box">
<h1> Frequently Asked Questions </h1><hr/>
<div class="clr"></div>
<ul class="unstyled" id="questions">
<li><a href="#what">What is BadgeIt?</a></li>
<li><a href="#how">How do I use it?</a></li>
<li><a href="#imgsize">DPI, Pixels, Inches - What are they?</a></li>
<li><a href="#sizereco">What are the recommended sizes for badges?</a></li>
<li><a href="#csv">What is a CSV file?</a></li>
<li><a href="#qr">Why do I need a QR code on my badge?</a></li>
<li><a href="#create">How does the badge generation work?</a></li>
<li><a href="#chrome">Why does it work only in Google Chrome?</a></li>
<li><a href="#permissions">Why are you asking for user information while signing in with Google?</a></li>
<li><a href="#other">What are the other uses of this app?</a></li>
</ul>
<div id="answers">
<div id="what">
<h3>What is BadgeIt?</h3><br/>
<p>BadgeIt is a web application that helps you generate customized badges for attendees of your conference or event. It is built using HTML5 and Javascript and works completely on the client side. It takes in the template of your badge - which is the Background image, and the details of attendees in csv format. Optionally you can pull in this information from your Google drive, and add images and spreadsheets from you Drive too! You can choose which fields from the attendee database are to appear in your badge, and optionally add infographics to your badge. It then creates a canvas using your inputs, and gives you a smart toolbox to customize your badge, the text, positions, and QR codes. You can then generate badges for all the attendees listed in your csv, and download them all as a zip file, or print them all to PDF</p>
</div>
<hr/>
<div id="how">
<h3>How do I use it?</h3><br/>
<p>Check out our screencast of the demo <a href="tutorial.html">here</a>. To make it easy for first timers, we've added a Demo button in the Start page, that preloads a template and a CSV file, so you can try the application seamlessly.</p>
</div>
<hr/>
<div id="imgsize">
<h3>DPI, Pixels, Inches - What are they?</h3><br/>
<p>These are the three properties that will determine the resolution of your badge. There is a very good explanation on the subject <a href="https://pub.mtholyoke.edu/journal/DPI/entry/what_s_in_a_name">here</a>. The inches you enter in the app will decide the size of the printed badges. The DPI decides the resolution, hence giving the actual DPI of the image ensures that your printed badges are of optimal quality. You can find the DPI in your Image properties. It is sometimes also called X Resolution/Y Resolution.</p>
</div>
<hr/>
<div id="sizereco">
<h3>What are the recommended sizes for badges?</h3><br/>
<p>Firstly, you have the option of deciding between Vertical or Horizontal badges. If you choose to print 4 badges per sheet horizontally, you should be looking at sizes around 5.5 X 3.5 inches or smaller ones around 4 X 2.75 inches. Remember to get the best quality, for a larger size you always need higher DPI.</p>
</div>
<hr/>
<div id="csv">
<h3>What is a CSV file</h3><br/>
<p>A Comma Separated Values file stores tabular data in plain text form. If your database in a Google Spreadsheet, doing File->Download As->CSV, will download the CSV file in your computer. If you have the data in Microsoft Excel or other spreadsheet tools, you can save your sheets in CSV format. If you have a custom SQL database, you can export your data to CSV from your admin interface.</p>
<p>Once you submit the CSV file, BadgeIt parses the file, and fetches the various fields of your database from the first row, so we recommend that your first row only contains the column headings. You will now have a multiple select box that lets you choose which fields you would like to appear on the badge. A sample csv file can be downloaded <a href="resources/other/sample.csv">here</a>.</p>
</div>
<hr/>
<div id="qr">
<h3>Why do I need a QR code on my badge?</h3><br/>
<p>Infographics such as QR codes are graphical ways of communicating information. Smart phones can now scan QR codes, so adding a QR code that encodes the attendees' Name and Email could be a smart way to exchange business cards between them, by scanning each other's badges! Now you can make your badge much more than a mere name tag.</p>
<p>If you choose to add QR codes to your badges, a multiple select box similar to the previous one comes up, and you can choose the fields to be encoded into the QR code here.</p>
</div>
<hr/>
<div id="create">
<h3>How does the badge generation work?</h3><br/>
<p>Once the template image, CSV, and QR code options are set, BadgeIt creates a HTML5 canvas with the template, and the column headings loaded at arbitrary positions on the canvas. The text rendering is handled using a nifty framework, <a href="http://fabricjs.com">Fabric JS</a>. You can now use the toolbox to choose between the different texts on the canvas, and customize the positions, fonts, sizes, styles and colors. You can also drag text around in the canvas. To prevent long text values from overflowing, there is an option to Set bounds for each of your texts. This ensures that the long values are scaled to suit your settings.</p>
<p>After you are done customizing the template, you can save all your badges. This generates the badges for all the rows in your CSV file. The generated images are not uploaded anywhere, but are stored in your own file system, using the HTML5 FileSystem API. This ensures that your bandwidth is not wasted, and the application is fast.</p>
<p>The template image, the csv, generated badges, zipping the files, are all handled on the client side, using HTML5 and localStorage, so there is no threat to your data.</p>
</div>
<hr/>
<div id="chrome">
<h3>Why does it work only in Google Chrome?</h3><br/>
<p>Chrome is the only browser that currently supports the Filesystem API. We will extend support for other browsers once they implement the Filesystem API.</p>
</div>
<hr/>
<div id="permissions">
<h3>Why are you asking for User Information while Signing in with Google?</h3><br/>
<p>We are tracking user information so that we can reach out to you to get sample badges that we can add to the site's Badge portfolio. No, we don't spam.</p>
</div>
<hr/>
<div id="other">
<h3>What are the other uses of this app?</h3><br/>
<p>Apart from badges, you can use BadgeIt to generate business cards for event organizers in a common template. You could also generate attendee certificates which you can email them post the event. You can find your own creative uses for this tool too!</p>
</div>
<hr/>
</div>
</div>
<footer class="footer">
<div class="container">
<p> <a target="_blank" href="http://makkarlabs.in">Makkar Labs</a>, 2012</p>
<p> Customized for Google Chrome (Version 13.0+)</p>
<p> <a target="_blank" href="https://github.com/makkarlabs/badgeit">Code</a> is Licensed under <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.</p>
</div>
</footer>
</body>
</html>