Cimlvojt 2013bach (1)

Czech Technical University in Prague

Faculty of Electrical Engineering

BACHELOR THESIS

Web Content Aggregator forEducational Purposes

Prague, 2013 Author: Vojtech Ciml

Acknowledgment

I would like to express my acknowledgement to thesis supervisor Ing.Adam Sporka, for his remarks and opinions. He brought my attention touser centered design and usability testing. I am also expressing thanks toTereza Horakova, who teached me how to prepare great design. My lastmention belongs to Vojta Drbohlav, who introduced me to Ruby on Railsand Jan Moskalyk for taking part in the usability test.

i

Prohlasenı

Prohlasuji, ze jsem praci vypracoval samostatne a pouzil jsem pouze pod-klady uvedene v prilozenem seznamu.

Nemam zavazny duvod proti uzitı tohoto skolnıho dıla ve smyslu § 60Zakona c.121/2000 Sb., o pravu autorskem, o pravech souvisejıcıch s pravemautorskym a o zmene nekterych zakonu (autorsky zakon).

V Praze dnepodpis

iii

Abstrakt

V teto praci se seznamıme a popıseme nasledujıcı temata. Reserse aanalyza soucasnych bookmarkovacıch a e-learningovych webovych aplikacı.Design webove aplikace, ktera umoznuje snadno organizovat a publikovatsoubor weboveho obsahu. Zakladnı implementace teto sluzby a jejı zprıstupnenıonline siroke verejnosti. Test uzivatelske pouzitelnosti, ktery odhalı ne-dostatky. Nastınım take plany budoucıho vyvoje.

Abstract

This thesis covers following topics. Research and analysis of current book-marking and e-learning web applications. Design of web application, thatallows to organize and publish web content package in friendly way. Basicimplementation of such service and placing result online available to generalpublic. Finally carrying out test that helps to uncover usability issues. I willalso propose future plans.

v

Contents

List of figures ix

List of tables xi

1 Introduction 11.1 Problem description . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.3 Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.3.1 Functional . . . . . . . . . . . . . . . . . . . . . . . . . 21.3.2 Non-functional . . . . . . . . . . . . . . . . . . . . . . 2

2 Research and concept 32.1 Competition and other services . . . . . . . . . . . . . . . . . 3

2.1.1 Glogster (http://www.glogster.com/) . . . . . . . . . . 32.1.2 Prezi (http://www.prezi.com/) . . . . . . . . . . . . . 42.1.3 TEDed (http://ed.ted.com/) . . . . . . . . . . . . . . . 52.1.4 Google Art project (http://googleartproject.com) . . . 62.1.5 StumbleUpon (https://www.stumbleupon.com/) . . . . 82.1.6 Qwiki (http://www.qwiki.com/) . . . . . . . . . . . . . 8

2.2 Selecting project name . . . . . . . . . . . . . . . . . . . . . . 92.3 Selecting the right technology . . . . . . . . . . . . . . . . . . 92.4 Detailed concept . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.4.1 The Player . . . . . . . . . . . . . . . . . . . . . . . . . 112.4.2 The Editor . . . . . . . . . . . . . . . . . . . . . . . . 132.4.3 Homepage . . . . . . . . . . . . . . . . . . . . . . . . . 15

3 Implementation and final design 193.1 Technical basics and setup . . . . . . . . . . . . . . . . . . . . 19

3.1.1 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.1.2 RubyMine . . . . . . . . . . . . . . . . . . . . . . . . . 193.1.3 Ruby on Rails . . . . . . . . . . . . . . . . . . . . . . . 20

vii

3.1.4 Pushing app online . . . . . . . . . . . . . . . . . . . . 223.2 Final design and implementation . . . . . . . . . . . . . . . . 23

3.2.1 The Player . . . . . . . . . . . . . . . . . . . . . . . . . 233.2.2 The Editor . . . . . . . . . . . . . . . . . . . . . . . . 273.2.3 Homepage . . . . . . . . . . . . . . . . . . . . . . . . . 293.2.4 Error page . . . . . . . . . . . . . . . . . . . . . . . . . 333.2.5 Profile page . . . . . . . . . . . . . . . . . . . . . . . . 34

3.3 Notable issues and fixes . . . . . . . . . . . . . . . . . . . . . 363.3.1 Postgres suddenly failed on Windows 7 . . . . . . . . . 363.3.2 oEmbed request refused because of Access-Control-Allow-

Origin . . . . . . . . . . . . . . . . . . . . . . . . . . . 363.3.3 Google Web Fonts . . . . . . . . . . . . . . . . . . . . 373.3.4 JavaScript not working properly in IE . . . . . . . . . 37

4 Usability test 394.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394.2 Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.3 Collected data . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

4.3.1 Vojtech Ciml . . . . . . . . . . . . . . . . . . . . . . . 424.3.2 Tereza Horakova . . . . . . . . . . . . . . . . . . . . . 434.3.3 Jan Moskalyk . . . . . . . . . . . . . . . . . . . . . . . 44

4.4 Analysis and recommendations . . . . . . . . . . . . . . . . . 45

5 Conclusion 475.1 Meeting objectives . . . . . . . . . . . . . . . . . . . . . . . . 475.2 Personal evaluation . . . . . . . . . . . . . . . . . . . . . . . . 475.3 Future work and improvements . . . . . . . . . . . . . . . . . 48

A Glossary of terms 51A.1 Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . 51A.2 TED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51A.3 JSON and JSONP . . . . . . . . . . . . . . . . . . . . . . . . 51A.4 Gamification . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

B Installation Guide 53

viii

List of Figures

2.1 Default box prompts you to drop video, but it is not possibleto do from your local folder. Instead you have to first uploadthe video, then find it in glogster media container and finallydrop it to desired box, which I see as UX mistake. . . . . . . 4

2.2 Editing Prezi . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.3 TEDed design that includes today’s mayor trends . . . . . . . 6

2.4 Google art gallery view . . . . . . . . . . . . . . . . . . . . . . 7

2.5 Incredible detail, when zoomed . . . . . . . . . . . . . . . . . 7

2.6 Course guide appeared as suitable name, but was already reg-istered . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.7 Typical US Highway traffic sign. . . . . . . . . . . . . . . . . . 10

2.8 Guideler logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.9 Concept of guider player . . . . . . . . . . . . . . . . . . . . . 13

2.10 Very first sketches of guideler. . . . . . . . . . . . . . . . . . . 14

2.11 First photoshop wireframe of Guideler.com homepage. . . . . . 16

3.1 RubyMine IDE offers variety of helpful features . . . . . . . . 20

3.2 Number of visits according to resolutions at SlidesLive.com . . 24

3.3 Design of player GUI for viewing guiders . . . . . . . . . . . . 27

3.4 Right upper navigation in GDocs . . . . . . . . . . . . . . . . 28

3.5 Right upper navigation in WordPress . . . . . . . . . . . . . . 28

3.6 Design of guider editor . . . . . . . . . . . . . . . . . . . . . . 29

3.7 Design of Guideler’s homepage . . . . . . . . . . . . . . . . . . 31

3.8 Homepage with login window rolled down . . . . . . . . . . . 32

3.9 Universal error page . . . . . . . . . . . . . . . . . . . . . . . 34

3.10 Profile page after you login . . . . . . . . . . . . . . . . . . . . 35

3.11 Managing your guiders . . . . . . . . . . . . . . . . . . . . . . 35

3.12 Do not forget to select which characters you would like toinclude! For Czech support include Latin-Extended characters. 38

ix

4.1 Curve showing the proportion of usability problems in an in-terface found by heuristic evaluation using various numbersof evaluators. The curve represents the average of six casestudies of heuristic evaluation. . . . . . . . . . . . . . . . . . . 40

x

List of Tables

2.1 Base words for domain and available domains . . . . . . . . . 172.2 Table of widely used web building technologies . . . . . . . . . 18

4.1 Heuristic evaluation - collected data from Vojtech Ciml . . . . 424.2 Heuristic evaluation - collected data from Tereza Horakova . . 434.3 Heuristic evaluation - collected data from Jan Moskalyk . . . . 44

xi

Chapter 1

Introduction

1.1 Problem description

Textbooks are becoming irrelevant in 21st century education. Paper basedtextbooks with hundreds of pages of plain text can cause pain and depres-sion among most of the university students. It’s because, they are missingtypical benefits of electronic version such as search, context links and richmedia. Digital publishing industry is rapidly growing (especially in recentmonths) and with the rise of tablets and eReaders, future of paper is uncer-tain. However in education industry, where innovations take place in slowmotion, we probably can not expect structured rich media digital version oflecture materials anytime soon.

Another problem, student might be facing is that he can not see much ofa progress while he is reading. This Thesis will try to address these issuesand create a web-based solution. This solution will be low-end alternative toexpensive digital publishing technology.

1.2 Objectives

Purpose is to create online service allowing teachers, educators and individu-als to create interactive guide through lesson or course. Multiple web sourceslike blogs, pictures, videos, presentations or forms can be entered and orga-nized inside editor to steps. Than final course guide will be published online.Student taking course will see his progress thanks to system of questions andanswers at each step.

1

2 CHAPTER 1. INTRODUCTION

1.3 Requirements

1.3.1 Functional

• Creating custom account

• Creating, editing and deleting own course guide

• Inputing multiple web links and organizing them into steps

• Adding knowledge testing to the guide

• Viewing final course guides

1.3.2 Non-functional

• Internet access

• Compatible with modern browsers

• HTML5 based

• Responsive design

Chapter 2

Research and concept

2.1 Competition and other services

2.1.1 Glogster (http://www.glogster.com/)

Glogster might be closest to what we want to build. It’s originally Czechcompany co-founded by Roman Smola (Which I know in person) and iscurrently global success. They call themselves #1 online learning tool inthe U.S. And several millions of users (Mostly students and teachers) areprompting that it might be true. Their main revenue stream comes fromproduct Glogster EDU which is derivative of Glogster itself only aimed forhigh-schools. Users are creating visual boards called Glogs and presents themto teachers. In a way it’s indirect competitor to Prezi. To create a Glog youcan upload variety of media such as images, texts or videos and organizethem in virtual notice board.

But I see many opportunities what to improve. Currently (March 2013)Glogster is using Flash as main technology for showing and editing Glogs.I personally consider Flash as a great web platform, unfortunately with de-creasing support. It’s performance and strength is especially online video.For basic image transformations and layering, CSS and JS took over theleadership.

Editing is too complex (See figure 2.1), and has many non intuitive fea-tures, such as Drag and Drop prompts, even though, Drag and Drop is notpossible in their Flash setup. Editing buttons are missing tooltips and mean-ing of layer buttons might be clear to Photoshop designer, but not to a highschool children. It creates many difficult situations and overall graphic designand UX might be improved.

3

4 CHAPTER 2. RESEARCH AND CONCEPT

Figure 2.1: Default box prompts you to drop video, but it is not possible todo from your local folder. Instead you have to first upload the video, thenfind it in glogster media container and finally drop it to desired box, whichI see as UX mistake.

2.1.2 Prezi (http://www.prezi.com/)

Prezi is innovative and leading presentation tool. With 20+ million registeredusers 250+ million presentation views, they changed perception of traditionalpresenting and PowerPoint. They came up with very interesting concept ofendless 2D workspace. You can input variety of web and local content andorganize it’s position, size. It takes some time to learn how entire editingprocess works, but overall experience is good (See figure 2.2). Finally youcreate presentation frames and connect them. Result is nice flyover effectbetween each slides, which makes your presentation different.

I talked with Prezi sales manager Mike Sutherland via Skype. Duringour conversation Mike emphasized many times, that Prezi team has nowvery strong focus. Their goal is to create best presentation software on the

2.1. COMPETITION AND OTHER SERVICES 5

market, so all other features and uses are now out of interest. Since Guidelerresult should not be a presentation in front of a classroom, but more for homestudies, Prezi is not a direct competitor. As I will describe later in details,Prezi inspired me in many ways. Especially endless 2D workspace.

Figure 2.2: Editing Prezi

2.1.3 TEDed (http://ed.ted.com/)

Readers of this document are probably familiar with TED (See glossary ofterms for details) conferences. With slogan “ideas worth spreading” andhundreds of videos from these events they attracted many more millions ofviewers. TED was so successful, that local conferences called TEDx are nowbeing organized. Thanks to this brand and it’s partners ambitious projectcalled TED ED is now available online.

After research, facts indicates that TED ED is not as much about contentcreation, but more about organizing that content using tags and flips. Usercan find video on YouTube and create a lesson based on that. Add ques-tions, “dig deeper” materials and discussion. General look and feel is greatand shows, that entire site was designed very carefully.

Design (Figure 2.3) contains today’s trends, which are:

• Large and spacious fonts, using Google Web Fonts directory, or safeweb fonts in order to be rendered by browser not in an image.

• Very clear navigation with small number of buttons. No multi-levelmenus from 1990s websites at all. It is quite clear what action willfollow after each click.


• Responsive web design. Video and menu is not only adapting browserwindow instantly. There is JavaScript animation that causes video tofly and resize to it’s new position.

• Lesson thumbnails are in high resolution to grab user attention.

Figure 2.3: TEDed design that includes today’s mayor trends

2.1.4 Google Art project (http://googleartproject.com)

This website is just amazing. World top paintings available in super highresolution for free. You can browse each image and zoom to incredible detail(See figures 2.4 and 2.5). I am writing about this web not because it is acompetitor, but it is design inspiration. Google is usually leading the way webis created and Art Project is part of it. Smooth transitions and animations.Dark color theme that is not harmfull to your eyes and complex navigationelegantly reduced.

2.1. COMPETITION AND OTHER SERVICES 7

Figure 2.4: Google art gallery view

Figure 2.5: Incredible detail, when zoomed


2.1.5 StumbleUpon (https://www.stumbleupon.com/)

It was a long time ago, when I last visited StumbleUpon. And since then alot things changes. What you notice first is, that you can not do anythingwithout login. You can not browse or explore any showcases. Homepage issuper empty. Only Log In button in upper right corner and Start Exploringcall to action button. Which surprisingly, takes you to Login / Sign up page.That is very interesting approach, that might look very brainless in the firstmoment. But you have to realize, that Facebook did this exactly the sameway. Everyone was there, and to enter the exclusive content, you have tojoin. If you are curious enough, like I was at the end fill out the form, orlogin via Twitter, Google or Facebook ID.

It is really unfortunate, but I managed to broke my StumbleUpon.comlogin. When I wanted to finally write about this website here in my thesis,I clicked login via Facebook, since then my account is constantly returningme to homepage and password reset and all other options do not work.

2.1.6 Qwiki (http://www.qwiki.com/)

I was tracking Qwiki for past 2 years and their product was really interesting.Unfortunatelly they recently completely changed their service and focus. Iwould not speculate why they did so. But I will describe their original servicein short.

Inside their editor, you could combine multiple web sources (Very similarto guideler) add narration or video from webcam and publish it as qwiki thatanyone can view. Editing each step was not that easy and required all kindof fields such as description, length etc...

2.2. SELECTING PROJECT NAME 9

2.2 Selecting project name

Good name of the project is one of the keys to potential commercial suc-cess. First I used brainstorming technique to create some names and af-ter few hours, I discovered very useful website (http://www.namemesh.com/company-name-generator/) which helps you to generate names after enter-ing keywords. So list was enriched by more candidates. See table XX forfinal list of options.

Than it was time to verify available domain names. CZ domain was notan option, since project is aimed to English speaking users and non-domesticmarkets. International domain is required and .com would be ideal. As Iexpected, most of the combinations were sold out. In table 2.1 red are markedunavailable domains. After long thinking session I selected guideler.com asthe suitable name. Asked several of my friends, and most of them liked thename. I bought domain and started working.

Figure 2.6: Course guide appeared as suitable name, but was already regis-tered

2.3 Selecting the right technology

Selecting the right framework for building such web application can causesignificant decrease in programming time, costs of maintenance and futurescalability. After doing some research I found several technologies currentlyused to create Web Applications (See table 4.3). I looked at their strengthsand weaknesses and selected the one that fit my needs. I decided to useRuby language, which was developed in mid 1990s by Yukihiro Matsumoto.It has very interesting features and structure which combines multiple pro-gramming approaches (Imperative, functional, declarative, OOP) Ruby onRails often referred as Rails is Open Source framework build on top of theRuby language.

http://www.namemesh.com/company-name-generator/

http://www.namemesh.com/company-name-generator/


2.4 Detailed concept

The initial concept of Guideler was sort of a map or assistant that guidesyou through a course. I wanted to use traffic signs as an expression of certainroute that you are taking. I did research on US highway signs and discoveredinteresting facts. Fonts and colors are standardized by FHWA, which standsfor Federal Highway Administration.

Figure 2.7: Typical US Highway traffic sign.

Font is Sans-serif based and is called Highway Gothic. It is not usedonly in US, but Canada, Mexico, Australia, Spain, Brazil and many morecountries.

Background color for green highway signs is Pantone Green - 342, repre-sented in HEX form as #006b54 and for yellow ones Pantone Yellow - 116,#fcd116.

I used this when I was creating logo for the project. Result can be seenat figure 2.8

2.4. DETAILED CONCEPT 11

Figure 2.8: Guideler logo.

2.4.1 The Player

I called individual creations as guiders (Longer previous version is Guidelers).Player is the component that can play guider when supplied with unique ID.

First idea was 2D space similar to Prezi, where user could zoom and dragas desired. After playing around with CSS and JS for a while, it appeared asnot a good decision. (Prezi might have reason, why their editing and playingis still flash only) CSS3 transformations simply behaved differently and notcorrectly on variety of browsers.

{

transform: scale(2,2);

-ms-transform: scale(2,2); /* IE 9 */

-webkit-transform: scale(2,2); /* Safari and Chrome */

}

Example of simple CSS3 transformation (2.4.1), which should scale entirediv. However performance went down quickly, when div contained manymore containers with images or iframes.

After consulting with potential users, I found out, that this feature isnot must have and simpler might be even better. Instead of endless space,guider is now divided into horizontal steps with fixed width, wider thanbrowser viewport width. All steps together are creating one wide div, thatcan be dragged or moved by arrows or specific step number. Steps are kepthidden and unloaded. When you move to certain step, next and previousones are preloaded and displayed. Thanks to this, animation can be keptsmooth.


To ensure, that user will be engaged with the guider I added gamificationelements. Clear indicator of your progress (percentage or loading bar) ispresent (Figure 2.10. The problem was how to measure this value. At first,each step was equipped with tick button, which you would click, when youfeel that you are done. This method based on self-evaluation is obviously notusable.

Secondly, some automatic analysis was option. After long hours of think-ing and trying, I decided that it would be just too complicated to developreliable method of step finish recognition. (How can you recognize withoutasking, that someone finished reading text)

I went through competition and research results again, and realized, thatsimple multiple choice quiz might be best cost/value solution. If studentanswers certain question correctly, step belonging to that question is markedgreen and your progress will increase. Your progress is regularly and auto-matically saved, so you can return at any time from any device.

I believe that gamification concept can be extended with badges, sharingto social networks and many other features. But it will not be covered inthis thesis.

Player should be responsive (Adaptive to multiple resolutions) and workon multiple devices, especially mobile ones. Flash would be simpler for me,thanks to my many years experience. Unfortunately Flash would not workon mobile devices and has uncertain future. In this case, HTML5 is theanswer.


Figure 2.9: Concept of guider player

2.4.2 The Editor

Key part is the editor, that enables those with the content to create guider.I wanted to make creation process elegant and simpler than one at Glogster.Compared with Glogster it will also be based on HTML5 not flash. Insideglogster, you have to select what type content is. In Guideler, I want to builduniversal field, where you can input any link and site would recognize whatcontent type it is. That means user is only copy-pasting links and do nothave to care about anything else. He might add question or notes, but it isnot required. So you might create visually attractive guider within few clicksand seconds instead of exporting bookmarks and sending them via email.

One feature, that potential users were thinking of or were proposing tome was Drag and Drop support. But not for entering images or videos, butfor entering links. Practically every modern browser has tabs, and most ofthe users are browsing more than 2 tabs at the time. So dragging tab anddropping it to editor’s link box would be useful. But I could not find anyway of doing this from the website itself. Only reasonable idea that came to


my mind was browser extension, that would allow you to add some keyboardlisteners, or “add to guider” button on top of every tab. Such extension mightavailable as premium feature, and provide basic clue to business model. ButI recommend to build it only in case, that traffic of the site exceeds at leastfew hundreds of users per week.

But with that comes a question, how to store and process the data. Op-tion number one was to parse the URLs after they are entered and saved,figure out what type of content or service it is and save service and it’s datainto database. But this approach has one significant disadvantage. Onceyou add support for more services, you have to run through db and correctall the data. Instead, I decided that storing just the links and parsing themwhen view is requested will be better.

Figure 2.10: Very first sketches of guideler.


2.4.3 Homepage

Homepage is critical to get traction. You have only few seconds to impressuser and create relationship. And few more seconds to explain him, what isit all about and why he should care.

In first concept (See figure 2.11) I reduced navigation. You need to beable to login, explore some guiders as an example and has ability to createone. Nothing else is important at the beginning. Other pages such as pricing,about, terms and conditions are for now unnecessary and can be added laterto the footer.

Texts in perfect english are important. After thinking, I entered “Text-book is super boring, endless stream with no checkpoints. Not with Guideler”.If this goes into production, consultation with native speaker is recommended.But you can see the general idea.

At least 2 or 3 example guiders will be created by me as a showcase.These are placed on homepage and after single click you can play themwithout saving progress functionality of course.

Very important is to have some kind of Call to action button (Buy now,Try now . . . ). In this case, it is CREATE GUIDER button. Marked clearlywith significant color, it desires you to try it.

I wanted to keep homepage clear, and in this draft it is still not as cleanand clear as I wish. But as a concept, it is enough. As I wrote, homepage iscrucial at the very beginning. After you get some users, it is better to demon-strate what you do right on the product. At my other project SlidesLive.com,over 70% of our traffic comes from external links and social networks. Thatmeans, that users often do not cross the homepage at all!


Figure 2.11: First photoshop wireframe of Guideler.com homepage.


Base words NamesEducationSkillsLearnCourseGuideNavigationDirectAbilityWisdomKnowledgeStudyTeachMaterialsEarnMapRoute

courseguide.comlearnguide.comtutorialguide.comtutorguide.comcoursepath.comcourseroad.comcoursetrack.comcourseway.comcourseroute.comstudytrack.comstudyway.comstudyroute.comlearntrack.comlearnway.comguide.meguidemealong.comguidemein.itmaster.itguidealong.itguidein.itdestinator.comrerouter.comguideme.tolearnme.itlearnme.toguide.atmylearnguide.commystudyguide.comskillguide.commyskillguide.comknowledgemaker.comguidester.comnavidom.complantastic.comlearnabout.itguideler.comgourse.comguidewy.com

Table 2.1: Base words for domain and available domains


Language Examined frameworkPHP SymfonyRuby Ruby on RailsJava GWT

Python DjangoASP.NET ASP.NET MVCJavaScript Node.js

Table 2.2: Table of widely used web building technologies

Chapter 3

Implementation and finaldesign

3.1 Technical basics and setup

3.1.1 jQuery

In this project I am using jQuery, which is open source JavaScript librarysupporting most of current browsers. It makes programming a lot easier incertain situation. You are using one code and do not care about browsertype in AJAX calls or events detection. It also makes manipulating with theDOM a lot easier.

3.1.2 RubyMine

RubyMine is IDE for building Ruby on Rails web apps. It is developedby JetBrains company (The one also responsible for IntelliJ IDEA). And Idefinitely have to recommend this IDE, because it has some great features.Basically, after installing Rails and RubyMine, everything can be done withinthe IDE, generating new project, running IRB (Interactive Ruby Shell), Railsconsole or bundler. Under tools it has shortcuts for generators (eg. formigrations) and rake tasks. Very handy is, that RubyMine understandsrelations between files and connects linked methods and variables. By justone click you enter the file which contains desired method, without searchingit inside directory structure. It also has integrated Git and other VersionControl Systems. JetBrains gave attention to every detail, including catchydark color scheme saving your eyes. And, there is much more under thehood.

19

20 CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN

Figure 3.1: RubyMine IDE offers variety of helpful features

3.1.3 Ruby on Rails

I decided to describe folder structure in Rails project to avoid confusion,when referencing any of these resources. Although purpose is evident fromfolder names.

app

-assets - Here are all you CSS, JS files and also images on the site

-controllers - Controllers - nerve centre of application

-helpers - Place for simple methods (eg loops, ordering and formatting)

that you use in view, but inside view it self, they would

increase complexity. So you place them inside helpers.

-mailers - I haven’t used this folder yet, it is reserved for

mailing actions and views.

3.1. TECHNICAL BASICS AND SETUP 21

-models - ORM representation of your data lies here

-views - All your templates, html or erb files belongs to here

config - Present probably at every modern web app, passwords,

db hosts etc...

db - Place for generated migrations and DB schema and seeds files

doc - Documentation

lib - Libraries, that should not be in vendor folder.

log - Rails prints error logs here.

public - There is one rule to remember, just keep this folder

as empty as possible.

script - Scripts for launching a web server or generating code

test - Every developer loves TDD, and here is the place

vendor - Here you include CSS or JS libraries from 3rd parties.

You should be also familiar with Gemfile. Gem is kind of external libraryor module of ruby code that you can use in your project. And Gemfile isindex of those Gems, so each time you run bundle install or update, it runsthrough Gemfile and fetches all gems and dependencies to your local storage.

Another key part of Rails, which is not common in other frameworksis concept of Migrations and working with ActiveRecord interface to accessdatabase. I think official guide explains benefits clearly

“Migrations are a convenient way for you to alter your database in astructured and organized manner. You could edit fragments of SQL by handbut you would then be responsible for telling other developers that they needto go and run them. You’d also have to keep track of which changes need tobe run against the production machines next time you deploy.

Active Record tracks which migrations have already been run so all youhave to do is update your source and run rake db:migrate. Active Recordwill work out which migrations should be run. It will also update yourdb/schema.rb file to match the structure of your database.” (Cited fromhttp://guides.rubyonrails.org/migrations.html, Accessed: 10.5.2013)

And I am adding one example of typical procedure inside RubyMine.Let’s say, that you have table Guiders and you want to add boolean tablecolumn “published”. Go to Tools/ Run Rails Generator and begin typingmig, autocompletion prompts migration, hit Enter and type name of yourmigration, recommended in Hungarian notation, in our case “AddPublished-ToGuiders”. Rails creates migration file, where you can define table change,and in case of error also rollback behaviour. After writing few lines, migrationlooks like this:

http://guides.rubyonrails.org/migrations.html


class AddPublishedToGuiders < ActiveRecord::Migration

def up

change_table :guiders do |t|

t.boolean :published, :default => false

end

Guider.update_all ["published = ?", false]

end

def down

remove_column :guiders, :published

end

end

Now final step, actual change in database. In Tools click Run RakeTasks, and look for db:migrate, hit and wait few seconds. And that is it.Your change took place and is saved for later use in production or anywhereelse.

I will not explain all other details about MVC and Rails, those can befound at official Ruby on Rails guide very well covered. But by now, readershould have basic idea how framework works.

3.1.4 Pushing app online

After doing quick research, I decided that Heroku is ideal hosting service.They have well arranged documentation, positive reviews and a lot of an-swered questions on StackOverflow. What is also great, is that they providefree tier for development, meaning I can develop and test everything with-out paying a single dollar. Of course free tier has limitations, that are notacceptable for production. Dyno for example falls asleep when not active forsome time, and it takes several seconds to wake it up.

I am using Git to push entire repository to Heroku, and they do the restfor me. It has a few prerequisites. First download Heroku Toolbelt (In mycase for windows) it adds Heroku commands to your command line. OpenCMD and go to the directory where you have the web app. Type herokulogin and proceed. (You have to select your SSH key). Once you solveauthentication it is time to connect your git repositories. Open heroku.comin the browser, go to you app settings and add address to your repository.Then return to the CMD and type

3.2. FINAL DESIGN AND IMPLEMENTATION 23

git remote add Guideler [email protected]/Guideler.git

Now you are ready to push your code online with following command

git push Guideler master

3.2 Final design and implementation

3.2.1 The Player

Player is designed to be responsive. It is necessary that users with laptops andsmall resolutions, reading materials for example in train will see everything.With this constraint, websites had standard width of 960 pixels. But thatis inconvenient when you have FullHD monitor (1920px x 1080px) wheremost of the space is unused. First solution, still used today, were to add nicebackgrounds and graphic, to make experience better. With the rise of mobileand tablet devices, increasing number of sites is using techniques to deal withthis trend.There are so many very different resolutions these days, that it isnot surprising year 2013 was called the Year of responsive web design.

And the statistics agrees, these (Figure 3.2) are desktop resolutions di-vided according to number of visitors of SlidesLive.com (Another educationalportal) As you can see top 2 places are typical Laptops and FullHD monitors.

Let’s take a closer look at how responsiveness is implemented. Basic isusage of relative units, meaning percentage or “em” instead of traditionalpoints and pixels. (em references current font size and multiplies it withprefix number. So 2em considering 20px font will result in 40px). This doesnot mean, that you should fully abandon pixels, you will still use them alot, but for key structural parts of the site such as menu wrappers, headers,content columns etc... you should consider relative units. Also beware ofCSS box model, prompting, that width is not involving margin, padding andborder.

For example, if you want to have element with relative left padding, takingentire width of the viewport, you have to subtract that padding from width.

#gl-questionWindow {

padding-left: 5%;

width:95%;

Otherwise, setting width simply to 100% would cause overflow and pos-sibly negative side effects somewhere else in the document.


Figure 3.2: Number of visits according to resolutions at SlidesLive.com

But the real issue was in individual steps with content. I had to ensure,not only that content is always fully visible, but it corresponds to it’s aspectratio. Videos 16:9, Slideshare player close to 4:3, SlidesLive has wide 28:9.And most methods of keeping aspect ratio using CSS only were not an op-tion, especially when each content type is unique. I came up with followingsolution.

Content fills 100% of it’s div. That div is equipped with class dependingon the content type. However that class is not present in CSS file, instead itis generated by JavaScript along with proper dimension calculations. Theseclasses are then appended to the DOM’s special style tag. You might beasking, why I generated classes when I could just modify content by jQuery?You would have to loop through every div and assign proper values, usingclass, browser does this for you.


Snippet from JS counting dimensions and generating CSS class

var videoHeight = Math.round(viewportHeight);

var videoWidth = Math.round((16*videoHeight) / 9);

var cssHtmlString =’.gl-dynamic-videoAspectRatio{ width:’+videoWidth+’px;

height:’+videoHeight+’px;}’

$(’#gl-dynamic-classes’).html(cssHtmlString);

Application template contains empty style element

<style type="text/css" id="gl-dynamic-classes">

</style>

First design drafts also did not had question/answer or just containedhint in form of a button, because I was not certain how to deal with it.Multiple choice question to be visible takes quite a lot of space. It is not wiseto just add that container somewhere and squeeze it together in case of asmaller resolution, also layout that will collapse into multiple columns is notappropriate in this case. Instead, question will roll out as overlayed window,similar to lightbox that is widespread. Custom styled radio inputs, placedinside are offering better user experience than default styled tiny circle.

Very interesting part was integrating display of 3rd party content. AsI mentioned before, database stores only the links, and rest is done insideRails controller and player JS. YouTube and Vimeo is parsed using traditionalRegex.

Sample or Regex extracting unique Vimeo Video ID

parsing_link[/https?:\/\/(?:[\w]+\.)*vimeo\.com(?:[\/\w]*\

/videos?)?\/([0-9]+)[^\s]*/]

Some websites provide API called oEmbed. oEmbed is attempt for stan-dardization of embedding content from other websites. You certainly knowthe classic problem, there are so many URL combinations (old URLS withparams in query, rewritten paths to accounts, articles, embeds) that coveringall of them by Regexes is nearly impossible, and you have to track providerfor any future changes. That is where oEmbed introduces API standard,where you can send request with URL parameter containing path to a re-source, and you receive back JSON or XML representation of that resource.Response usually contains html code for direct embedding, content title andunique ID, if it has one. This is example of SlideShare request result:


{

type: "rich",

slide_image_baseurl: "//image.slidesharecdn.com/110103quotes2010-12

-110103073149-phpapp01/95/slide-",

thumbnail_height: 128,

height: 355,

title: "Business Quotes for 2011",

provider_name: "SlideShare",

slide_image_baseurl_suffix: "-1024.jpg",

html: "<iframe src="http://www.slideshare.net/slideshow/embed_code/

6435157" width="427" height="356" frameborder="0" marginwidth="0"

marginheight="0" scrolling="no" style="border:1px solid #CCC;border-

width:1px 1px 0;margin-bottom:5px" allowfullscreen

webkitallowfullscreen mozallowfullscreen> </iframe> <div style="margin

-bottom:5px"><strong> <a href="http://www.slideshare.net/haraldf/

business-quotes-for-2011" title="Business Quotes for 2011" target=

"_blank">Business Quotes for 2011</a> </strong> from <strong>

<a href="http://www.slideshare.net/haraldf" target="_blank">Harald

Felgner</a></strong> </div>",

provider_url: "http://www.slideshare.net",

version: "1.0",

width: 425,

thumbnail: "//cdn.slidesharecdn.com/ss_thumbnails/110103quotes2010

-12-110103073149-phpapp01-thumbnail.jpg?1294126271",

total_slides: 75,

author_name: "Harald Felgner",

version_no: "1294126271",

conversion_version: 2,

slideshow_id: 6435157,

author_url: "http://www.slideshare.net/haraldf",

thumbnail_width: 170

}


Figure 3.3: Design of player GUI for viewing guiders

3.2.2 The Editor

Editor was one of the toughest parts. At the beginning there were dozensideas what user might be able to do. These ideas, when examined into detailsexplode into even more buttons, pop-ups and little hacks. Result is often GUIthat is not usable and nobody understands it even after several uses. Manyfunctions were crossed out and user should be able to do the following:

• Rename guider

• Add guider thumbnail

• Save guider

• Publish guider

• View all the steps

• Add guider step

• Paste, type or edit content link

• Add note to step


• Turn on and off question to each step

• Fill in details of that question

• Change default look and feel template

But organizing these basic functions into understandable way was nottrivial. I did a research on services like Google Docs, WordPress or Joomlasites and found out patterns, that users are used to.

Figure 3.4: Right upper navigation in GDocs

Figure 3.5: Right upper navigation in WordPress

Save, Share, Publish, Update and similar meaning buttons are usuallypresent in Right upper corner. (Figures 3.4 and 3.5)

The top bar is dedicated to guider properties - name, thumbnail, save,publish. Under this bar is container with all the steps and a place for otherbuttons like changing template (Brush in figure 3.6). Layout has 2 maincolumns, left one for entering link and right one for optional question. Ques-tion can be turned on and off by highly visible switch. It is multiple choicewith fixed 3 answers, it might be limiting user, but it allows simple one-pageediting. Compared for example with TEDed where creating single questionis quite a long process with many screens.


Editor is using AJAX, which allows to load and save data without re-freshing the page. Data are exchanged in JSON format and on special routesprocessed by Ruby controllers. Route ”/api/edit guider/” is used for savingin a form of POST request with JSON array containing all the data. Con-troller verifies, if user is authenticated and has the right to save the data.I also implemented automatic saving after one minute, but after few talkswith users I removed it. I figured out, that there is small number of browsercrashes and other events, where autosave is handy. Accidental closing ofbrowser tab is a risk, and for that exists window.onbeforeunload method,that you can use to display confirmation dialog. You may know this dia-log from closing tab with unfinished email. Guider editor does not supportany version history, or undo feature, so there are lot of cases, where youwant to discard changes, you have made. Because of this, autosave is notimplemented.

Figure 3.6: Design of guider editor

3.2.3 Homepage

As I wanted at the beginning, homepage is clear and shiny (See figure 3.7).Header contains slogan - “message” and call to action yellow button at thehottest place of the website. In the content area there is single image that


visually explains what and how is Guideler doing. But still, most of the usersmight not get the point and for them, there are displayed top guiders, thatmight be picked by the site owner or according to number of views.

I also proposed Login window (See figure 3.8), which rolls out from thetop and offers you not only to Login but also Sign Up directly from thehomepage without redirecting to some other page. People do not want to filllong registration forms today, and even those 3 fields are too much. (Accountname, Email and Password) So for the most comfortable users, there is SignUp with Facebook, which is today very common way of authentication onthe web.


Figure 3.7: Design of Guideler’s homepage


Figure 3.8: Homepage with login window rolled down


3.2.4 Error page

It is common that error occurs, whether it is a code failure, missing data orjust wrong URL input from user. However treating errors is often underesti-mated and on many websites you just see provider’s or browsers default pagesuch as 500 Internal Server error, 404 Not found etc...

Also it is difficult to design and implement for each error custom pageand explanation, so I designed one universal error page (See figure 3.9). Itis obvious to the user that it belongs. It’s functionality is limited and mightbe extended in the future, but it communicates message clearly.

I would like to add here few more details on the implementation side,since other developers might spend appreciable time, searching for solution.

For detecting errors like wrong URL, unauthorized access you will mostlyuse if statement. For database errors I recommend to use StatementInvalidand RecordNotFound exceptions.

rescue ActiveRecord::StatementInvalid

redirect_to show_general_error_path(:error_code => 103)

rescue ActiveRecord::RecordNotFound

redirect_to show_general_error_path(:error_code => 104)

end

Where:redirect to show general error is name of your route (and controllermethod)path must be added for framework to recognize your intention

(:error code =¿ 104) is parameter passed to the url query.

It is definitely better to pass error code instead of message itself andresolve message in the controller. Since you might want to translate errorsin another language, and URL has no problematic characters to be escapedand is more esthetic for the user.

You might also search for POST method parameters passing instead ofsimple GET that requires error code parameter inside query. But HTTP/1.1prohibited redirect using POST method. For details visit http://www.w3.

org/Protocols/rfc2616/rfc2616-sec10.html

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html


Figure 3.9: Universal error page

3.2.5 Profile page

In this part of the website, user can view his profile, make common changessuch as password reset. And he is able to create and manage his guiders.Again, there is no need to fill space with unwanted content. I am trying toserve people what they want and not annoy them with tons of features thatare used by fraction of users. Once you login (See figures 3.11 and 3.11), yousee Welcome screen with “How it works”.


Figure 3.10: Profile page after you login

Figure 3.11: Managing your guiders


3.3 Notable issues and fixes

3.3.1 Postgres suddenly failed on Windows 7

I am quite new to Postgres, so not used to all variety of errors. So It wassurprise that I couldn’t login from Rails and even from pgAdmin, constantlyreturning error that server is not listening.Connection refused (0x0000274D/10061) Is the server running on host ”lo-calhost” and accepting TCP/IP connections on port 5432

After searching, this solution worked for me. Start / cmd and type ser-vices.msc. Display the list, find postgres, right click and start. Check inproperties, that it is set to start automatically as you turn on the computer.

Despite these facts, Postgres together with Rails is running perfectlysmooth compared to experience with Symfony and MySQL (Which had con-stant problems with PDO drivers)

3.3.2 oEmbed request refused because of Access-Control-Allow-Origin

If there is one security issue, you will see over and over again, it is Access-Control-Allow-Origin. Usually, it can be fixed by adding . htaccess file to theserver, which allows different domains to access the resource. But when usingembed and accessing 3rd party resources or content, you can not simply addhtaccess file to their server. To my surprise slideshare did not allowed thiscross-domain communication when requesting their oEmbed API.

But you can deal with this situation by adding little detail to your code.If using jQuery, add jsonpCallback parameter (you do not have to do any-thing in that function) and change dataType from json to jsonp.

Snippet showing oEmbed AJAX request that is Cross-Origin ResourceSharing valid

$.ajax({

type: ’GET’,

url: externalData,

async: false,

jsonpCallback: ’jsonCallback’,

contentType: "application/json",

dataType: ’jsonp’,

success: function(data) {

3.3. NOTABLE ISSUES AND FIXES 37

console.log("success");

},

error: function(e) {

console.log("error");

}

});

For more details about JSON and JSONP go to Glossary of Terms (Ap-pendix A)

3.3.3 Google Web Fonts

This is very trivial issue, if you already have experience with it. But whenI came across this first, I spent afternoon detecting the problem. GoogleWebFonts library is great, you are no more limited by 13 or so Web SafeFonts. If you plan, that your site will support additional languages andspecial characters, selecting a font is little more careful. So I found a font,that displayed text in Czech Language, pressed USE button and copy pastedcode into my CSS. But Czech characters were still not showing up. I triple-checked database, erb files coding and all other options to find that mistakeis in code from Google. You have to add subset parameter to that URL ifyou want additional characters like extended latin (Figure 3.12)

<%= stylesheet_link_tag "http://fonts.googleapis.com/css?family=

Open+Sans:400italic,400,700,300&subset=latin,latin-ext" %>

3.3.4 JavaScript not working properly in IE

When it comes to JavaScript, there is one thing, I would like to mention. Itmight happened, that all your JS is working fine on Chrome or Firefox, butIE (Surprisingly!) seems totally broken. Reason for this is, that you forgotto remove console.log somewhere in your code, or you are using it for debuginformation. Remove all occurrences, and refresh the page, I believe thatwill fix many troubles.

It is because IE console object is available only when developer consoleis open. And even if you close that console, it remains accessible until youclose the tab. That might be reason, why it always worked when you weretrying to detect the errors, but was broken in the production.


Figure 3.12: Do not forget to select which characters you would like to in-clude! For Czech support include Latin-Extended characters.

Chapter 4

Usability test

4.1 Introduction

World today is producing more information than ever. Consider quote fromGoogle’s former CEO Eric Schmidt - “There were 5 Exabytes of informa-tion created between the dawn of civilization through 2003, but that muchinformation is now created every 2 days.” In this information overload, it isincreasingly difficult to distinguish between value and noise. Key to succeed,get user’s attention and encourage them to return is User-centered design,which mean clear interface that is intuitive to use. In other words, if targetuser does not perform task, he wanted, it is your mistake.

There are many methods how to perform usability test. For exampleCognitive walkthrough, Heuristic evaluation, Test with user or A/B Testing.I decided to use Heuristic evaluation, because it is cheap and relatively quickmethod how to find usability problems. It requires experts in field, thatare separately investigating the design and looking for problems. Number ofexperts is usually between 2 and 8, since ratio of discovered issues is growinglogarithmically (See figure 4.1)

39

40 CHAPTER 4. USABILITY TEST

Figure 4.1: Curve showing the proportion of usability problems in an inter-face found by heuristic evaluation using various numbers of evaluators. Thecurve represents the average of six case studies of heuristic evaluation.

(Source: http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/, Accessed: 10.5.2013)

4.2 Preparation

I decided to involve in the test me and two other persons. Tereza Horakova,Art director at SlidesLive.com and Jan Moskalyk, entrepreneur and creatorof educational content for diabetics.

We will use following 10 Usability Heuristics according to Jakob Nielsen,proposed in 1995.

1. Visibility of system status

2. Match between system and the real world

3. User control and freedom

4. Consistency and standards

http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/


4.2. PREPARATION 41

5. Error prevention

6. Recognition rather than recall

7. Flexibility and efficiency of use

8. Aesthetic and minimalist design

9. Help users recognize, diagnose, and recover from errors

10. Help and documentation

Each expert will also assign criticality of the issue.

1. Critical problem, must be removed soon.

2. Should be fixed.

3. Look and feel or nice to have issue.


4.3 Collected data

4.3.1 Vojtech Ciml

Issue Bar with individual steps should be adaptive accordingto number of steps. Small number has too much emptyspace, large number is overflowing.

Heuristic Error preventionFix Make div element adaptivePriority 2Issue I as a developer would miss open API to create my own

mashups and apps on top of guider.Heuristic Consistency and standards, User control and freedomFix Create open APIPriority 3Issue Inside editor, user might expect drag feature, allowing

him to change order of the steps. Like inside powerpointHeuristic Flexibility and efficiency of use, Consistency and stan-

dardsFix Implement this capabilityPriority 2Issue Because both player and editor opens inside new tab

without some kind of universal website menu, it is notclear how to return.

Heuristic User control and freedom, Visibility of system statusFix Add some navigational elementsPriority 1

Table 4.1: Heuristic evaluation - collected data from Vojtech Ciml

4.3. COLLECTED DATA 43

4.3.2 Tereza Horakova

Issue At homepage, I would expect video how it works, thatis present inside my account page.

Heuristic Help and documentationFix Add video to homepagePriority 2Issue I would not be sure how to go back from the editing.

Because it opens in new window, and there is no close,or return button

Heuristic User control and freedom, Visibility of system statusFix Add ”go back” buttonsPriority 1Issue I am missing some kind of a preview, because at first I

had no idea how the resulted guider looks like.Heuristic Visibility of system statusFix Add preview button and functionality.Priority 2Issue After answering several questions, I went back, but it

did not remember my answer.Heuristic Recognition rather than recallFix Mark the answered question, when returningPriority 1

Table 4.2: Heuristic evaluation - collected data from Tereza Horakova


4.3.3 Jan Moskalyk

Issue When watching and switching to other steps, transitionwas too slow

Heuristic Flexibility and efficiency of useFix Make animation fasterPriority 2Issue From the image at the homepage I am not sure how

exactly Guideler works. I would expect more details orbetter explanation

Heuristic Match between system and the real worldFix Maybe better analogy with other service, ideally not IT

realted.Priority 3Issue When creating guider, I was not able to reorganize steps

easily. I had to cut and paste links and textsHeuristic When creating guider, I was not able to reorganize steps

easily. I had to cut and paste links and textsFix Implement this featurePriority 1Issue I was often clicking on the icons under the link field.

Expecting some action, nothing happenedHeuristic Visibility of system statusFix Add some explanation, what happenedPriority 2

Table 4.3: Heuristic evaluation - collected data from Jan Moskalyk

4.4. ANALYSIS AND RECOMMENDATIONS 45

4.4 Analysis and recommendations

As I expected, we detected many issues, and I believe there are many moreto come. And the reason is, that Guideler is new project that I am buildingfrom scratch. So it is not probable, that you make everything perfect at firstattempt. And usability testing is not about single test, but about loop. Itis not a task, but a continuous process. You have to make constant changesin order to move forward. Since some of the issues were repeating, or weresimilar, I would start fixing them first. In the future, I would also like toimplement A/B testing on the site that in my opinion provides much betterresults than heuristic evaluation.

Chapter 5

Conclusion

5.1 Meeting objectives

Make a survey of the current e-learning platforms. Identify their commonfeatures and weaknesses. Learn the state of art of social bookmarking ser-vices such as stumbleupon.com, delicio.us, which enable the users to shareand discuss generic content resources.I successfully searched for competition and analyzed their strengths andweaknesses. This task was completed.

Design and implement a combination of a social bookmarking service andan e-learning platform which allows anyone to assemble an annotated se-quence of links to existing resources (web sites, vidoes, sound files, ...) thatcan be used as an on-line course with study material as well as particulartasks allowing the users to verify their knowledge and skills.Product was designed and minimum viable product was realized and is nowavailable online at http://guideler.com/ Design can be seen at figures 3.3,3.6, 3.7, 3.8, 3.9, 3.10 and 3.11 or in High Resolution at enclosed CD.

Perform a usability test of the implemented system.Usability test was performed and details are described in chapter 4.

5.2 Personal evaluation

What I consider as a great success, is that I managed to get this projectup and running from scratch. Coming up with the idea, making a research,do the design, implement a solution, put it online and document the wholeprocess in one person is difficult. Sure, there are lot of mistakes, unfinisheddesign and overlooked details that might be improved. Usability test helpedme to reveal some of those. I am dedicated to continue improving this so-

47

http://guideler.com/

48 CHAPTER 5. CONCLUSION

lution and I am very excited about the future of this project. This Thesisenhanced my skills to learn new things quickly, justify my opinions and find-ings and examined my capability of writing work in English. It is a greatexperience.

5.3 Future work and improvements

There are many opportunities that could be tapped.User should have an option to upload material directly. If you have a

PDF document, you have to first upload it to slideshare and then paste alink inside guideler. That is inconvenient, and direct upload, which wouldforward that document to SlideShare automatically and filled in the link isbeneficial feature.

Concept of gamification together with proper emailing could be devel-oped further. That requires study of user psychology and other factors thatencourages you to return and finish guider that you were watching. That isclosely related to well designed emails that are sendet at the right time, withthe right words.

After years of experience, I can say, users will often not fill anything.And that is true even if that data would help them to reach their targetaudience. In this situation, computer should do the job for you. Automaticanalysis of entered links could help categorize each guider and deliver it tothe right user. So musicians would see guiders how to compose new tracksand astronomers would be supplied with pictures and videos of stars.

No project can last long in isolation. So letting now potential partners andcustomers about existence of this website and developing relationship withthem is crucial. I can name TEDed initiative or Pulse content aggregator.These might provide valuable insight that helps to decide right direction ofanother development.

Bibliography

[1] Douglas Crockford. Discovering javascript object notation with dou-glas crockford. http://www.youtube.com/watch?v=kc8BAR7SHJI, Ac-cessed 18.5.2013.

[2] Jakob Nielsen. How to conduct a heuristic evaluation. http://www.

nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/,Accessed 18.5.2013, 1995.

[3] Jason Fried, David Heinemeier Hansson. Restart. Jan MelvilPublishing, 2010.

[4] Josef Slerka. Gamifikace a sirsı kontext. http://slideslive.com/

w/38889586, Accessed 18.5.2013.

[5] Oded Ezer. 21st century design. http://slideslive.com/DE.SIGN/

w/38888926, Accessed 18.5.2013.

[6] Steve Krug. Webdesign - Nenutte uzivatele premyslet! ComputerPress, 2006.

[7] The Author Collective. Rails guide. http://guides.

rubyonrails.org/, Accessed 18.5.2013.

49

http://www.youtube.com/watch?v=kc8BAR7SHJI



http://slideslive.com/w/38889586

http://slideslive.com/w/38889586

http://slideslive.com/DE.SIGN/w/38888926

http://slideslive.com/DE.SIGN/w/38888926

http://guides.rubyonrails.org/

http://guides.rubyonrails.org/

50 BIBLIOGRAPHY

Appendix A

Glossary of terms

A.1 Responsive Web Design

Is webdesign technique allowing users to view content on many devices withdifferent resolutions without scrollbars or zooming. It uses CSS3 Media queryand JS feature detection to adapt website layout. Generally, you use 2 or3 layouts (For desktop, mobile and tablet) with relative units - percentages,not pixels.

A.2 TED

TED is a nonprofit devoted to Ideas Worth Spreading. It started out (in1984) as a conference bringing together people from three worlds: Technol-ogy, Entertainment, Design. Since then its scope has become ever broader.Along with two annual conferences – the TED Conference on the West Coasteach spring, and the TEDGlobal conference in Edinburgh UK each summer– TED includes the award-winning TED Talks video site, the Open Transla-tion Project and TED Conversations, the inspiring TED Fellows and TEDxprograms, and the annual TED Prize.

(Cited from https://www.ted.com/pages/about, Accessed: 10.5.2013)

A.3 JSON and JSONP

JSON stands for JavaScript Object Notation and was proposed by DouglasCrockford. It is data-interchange format that is easy for humans to read andeasy for machines to parse or generate. It is language independent.

51

https://www.ted.com/pages/about

52 APPENDIX A. GLOSSARY OF TERMS

JSONP is JSON with padding, that allows to bypass Same Origin Policy.Forcing browser to to execute callback function passed in the URL parameter.

A.4 Gamification

Gamification means use of game mechanisms in non-gaming enviroment. Itis not a game, and it is not describing how game looks like. It transmitsgaming tricks to engage and motivate users to certain actions. Or to modifytheir behaviour.

Appendix B

Installation Guide

First, I would like to point out, that the code stored on CD is probablyout of date by now. For latest version, please clone Git repository fromhttps://github.com/wojtaw/Guideler. CD also contains installation filesfor Ruby, Rails, RubyMine, PostgreSQL and Github. All of these are forWindows 64-bit computer, and might require internet connection or update.

Make sure that your computer has Ruby and Rails framework installed(Version 3.2.13 and above). For Windows and Mac users I recommend to useRailsInstaller which includes all necessary dependencies. (Download fromhttp://railsinstaller.org/)

Than copy or clone files into your working directory and run RubyMine.Select File/Open Project and search for the directory. Once IDE finishesopening, it is time to update Gems using bundler. Choose Tools/Bundler/Update.

Guideler is using PostgreSQL Database, so you need to install that onetoo. If you did so, either create new user (postgres with password postgres)or provide custom DB login in config/database.yml file. Note, that you arenot suppose to create a DB schema or table, Rails will do it for you! ChooseTools/Run Rake Task and select db:create and right afterwards db:migrate.This will create all tables for you and you are ready to go. Now run railsserver (Run:Development) open browser and type localhost:3000. You shouldsee Guideler’s homepage.

53

https://github.com/wojtaw/Guideler

http://railsinstaller.org/

Cimlvojt 2013bach (1)

Education

Transcript of Cimlvojt 2013bach (1)