Cimlvojt 2013bach (1)
Upcoming SlideShare
Loading in...5
×
 

Cimlvojt 2013bach (1)

on

  • 291 views

 

Statistics

Views

Total Views
291
Views on SlideShare
291
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Cimlvojt 2013bach (1) Cimlvojt 2013bach (1) Document Transcript

    • Czech Technical University in Prague Faculty of Electrical Engineering BACHELOR THESIS Web Content Aggregator for Educational Purposes Prague, 2013 Author: Vojtˇch Ciml e
    • Acknowledgment I would like to express my acknowledgement to thesis supervisor Ing. Adam Sporka, for his remarks and opinions. He brought my attention to user centered design and usability testing. I am also expressing thanks to Tereza Horakova, who teached me how to prepare great design. My last mention belongs to Vojta Drbohlav, who introduced me to Ruby on Rails and Jan Moskalyk for taking part in the usability test. i
    • ii
    • Prohl´ˇen´ as ı Prohlaˇuji, ˇe jsem pr´ci vypracoval samostatnˇ a pouˇil jsem pouze pods z a e z klady uveden´ v pˇiloˇen´m seznamu. e r z e Nem´m z´vaˇn´ d˚vod proti uˇit´ tohoto ˇkoln´ d´ ve smyslu § 60 a a z y u z ı s ıho ıla Z´kona ˇ.121/2000 Sb., o pr´vu autorsk´m, o pr´vech souvisej´ ıch s pr´vem a c a e a ıc´ a autorsk´m a o zmˇnˇ nˇkter´ch z´kon˚ (autorsk´ z´kon). y e e e y a u y a V Praze dne podpis iii
    • iv
    • Abstrakt V t´to pr´ci se sezn´m´ e a a ıme a pop´seme n´sleduj´ ı t´mata. Reˇerˇe a ıˇ a ıc´ e s s anal´za souˇasn´ch bookmarkovac´ a e-learningov´ch webov´ch aplikac´ y c y ıch y y ı. Design webov´ aplikace, kter´ umoˇnuje snadno organizovat a publikovat e a zˇ soubor webov´ho obsahu. Z´kladn´ implementace t´to sluˇby a jej´ zpˇ´ e a ı e z ı rıstupnˇn´ e ı online ˇirok´ veˇejnosti. Test uˇivatelsk´ pouˇitelnosti, kter´ odhal´ nes e r z e z y ı dostatky. Nast´ ım tak´ pl´ny budouc´ v´voje. ın´ e a ıho y Abstract This thesis covers following topics. Research and analysis of current bookmarking and e-learning web applications. Design of web application, that allows to organize and publish web content package in friendly way. Basic implementation of such service and placing result online available to general public. Finally carrying out test that helps to uncover usability issues. I will also propose future plans. v
    • vi
    • Contents List of figures ix List of tables xi 1 Introduction 1.1 Problem description . . 1.2 Objectives . . . . . . . 1.3 Requirements . . . . . 1.3.1 Functional . . . 1.3.2 Non-functional . . . . . . . . . . . . . . . . . . . . 1 1 1 2 2 2 2 Research and concept 2.1 Competition and other services . . . . . . . . . . . . . . 2.1.1 Glogster (http://www.glogster.com/) . . . . . . . 2.1.2 Prezi (http://www.prezi.com/) . . . . . . . . . . 2.1.3 TEDed (http://ed.ted.com/) . . . . . . . . . . . . 2.1.4 Google Art project (http://googleartproject.com) 2.1.5 StumbleUpon (https://www.stumbleupon.com/) . 2.1.6 Qwiki (http://www.qwiki.com/) . . . . . . . . . . 2.2 Selecting project name . . . . . . . . . . . . . . . . . . . 2.3 Selecting the right technology . . . . . . . . . . . . . . . 2.4 Detailed concept . . . . . . . . . . . . . . . . . . . . . . 2.4.1 The Player . . . . . . . . . . . . . . . . . . . . . . 2.4.2 The Editor . . . . . . . . . . . . . . . . . . . . . 2.4.3 Homepage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 3 3 4 5 6 8 8 9 9 10 11 13 15 . . . . 19 19 19 19 20 . . . . . . . . . . . . . . . . . . . . . . . . . 3 Implementation and final design 3.1 Technical basics and setup . . . 3.1.1 jQuery . . . . . . . . . . 3.1.2 RubyMine . . . . . . . . 3.1.3 Ruby on Rails . . . . . . vii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    • 3.2 3.3 3.1.4 Pushing app online . . . . . . . . . . . . . . . . . . . . Final design and implementation . . . . . . . . . . . . . . . . 3.2.1 The Player . . . . . . . . . . . . . . . . . . . . . . . . . 3.2.2 The Editor . . . . . . . . . . . . . . . . . . . . . . . . 3.2.3 Homepage . . . . . . . . . . . . . . . . . . . . . . . . . 3.2.4 Error page . . . . . . . . . . . . . . . . . . . . . . . . . 3.2.5 Profile page . . . . . . . . . . . . . . . . . . . . . . . . Notable issues and fixes . . . . . . . . . . . . . . . . . . . . . 3.3.1 Postgres suddenly failed on Windows 7 . . . . . . . . . 3.3.2 oEmbed request refused because of Access-Control-AllowOrigin . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.3.3 Google Web Fonts . . . . . . . . . . . . . . . . . . . . 3.3.4 JavaScript not working properly in IE . . . . . . . . . 4 Usability test 4.1 Introduction . . . . . . . . . . . 4.2 Preparation . . . . . . . . . . . 4.3 Collected data . . . . . . . . . . 4.3.1 Vojtˇch Ciml . . . . . . e 4.3.2 Tereza Hor´kov´ . . . . a a 4.3.3 Jan Moskalyk . . . . . . 4.4 Analysis and recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 23 23 27 29 33 34 36 36 36 37 37 39 39 40 42 42 43 44 45 5 Conclusion 47 5.1 Meeting objectives . . . . . . . . . . . . . . . . . . . . . . . . 47 5.2 Personal evaluation . . . . . . . . . . . . . . . . . . . . . . . . 47 5.3 Future work and improvements . . . . . . . . . . . . . . . . . 48 A Glossary of terms A.1 Responsive Web Design . A.2 TED . . . . . . . . . . . A.3 JSON and JSONP . . . A.4 Gamification . . . . . . . . . . . . . . . . . . . B Installation Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 51 51 51 52 53 viii
    • List of Figures 2.1 Default box prompts you to drop video, but it is not possible to do from your local folder. Instead you have to first upload the video, then find it in glogster media container and finally drop it to desired box, which I see as UX mistake. . . . . . 2.2 Editing Prezi . . . . . . . . . . . . . . . . . . . . . . . . . . 2.3 TEDed design that includes today’s mayor trends . . . . . . 2.4 Google art gallery view . . . . . . . . . . . . . . . . . . . . . 2.5 Incredible detail, when zoomed . . . . . . . . . . . . . . . . 2.6 Course guide appeared as suitable name, but was already registered . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.7 Typical US Highway traffic sign. . . . . . . . . . . . . . . . . 2.8 Guideler logo. . . . . . . . . . . . . . . . . . . . . . . . . . . 2.9 Concept of guider player . . . . . . . . . . . . . . . . . . . . 2.10 Very first sketches of guideler. . . . . . . . . . . . . . . . . . 2.11 First photoshop wireframe of Guideler.com homepage. . . . . 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 . . . . . 4 5 6 7 7 . . . . . . 9 10 11 13 14 16 RubyMine IDE offers variety of helpful features . . . . . . . . Number of visits according to resolutions at SlidesLive.com . . Design of player GUI for viewing guiders . . . . . . . . . . . . Right upper navigation in GDocs . . . . . . . . . . . . . . . . Right upper navigation in WordPress . . . . . . . . . . . . . . Design of guider editor . . . . . . . . . . . . . . . . . . . . . . Design of Guideler’s homepage . . . . . . . . . . . . . . . . . . Homepage with login window rolled down . . . . . . . . . . . Universal error page . . . . . . . . . . . . . . . . . . . . . . . Profile page after you login . . . . . . . . . . . . . . . . . . . . Managing your guiders . . . . . . . . . . . . . . . . . . . . . . Do not forget to select which characters you would like to include! For Czech support include Latin-Extended characters. 20 24 27 28 28 29 31 32 34 35 35 ix 38
    • 4.1 Curve showing the proportion of usability problems in an interface found by heuristic evaluation using various numbers of evaluators. The curve represents the average of six case studies of heuristic evaluation. . . . . . . . . . . . . . . . . . . 40 x
    • List of Tables 2.1 2.2 Base words for domain and available domains . . . . . . . . . 17 Table of widely used web building technologies . . . . . . . . . 18 4.1 4.2 4.3 Heuristic evaluation - collected data from Vojtˇch Ciml . . . . 42 e Heuristic evaluation - collected data from Tereza Hor´kov´ . . 43 a a Heuristic evaluation - collected data from Jan Moskalyk . . . . 44 xi
    • xii
    • Chapter 1 Introduction 1.1 Problem description Textbooks are becoming irrelevant in 21st century education. Paper based textbooks with hundreds of pages of plain text can cause pain and depression among most of the university students. It’s because, they are missing typical benefits of electronic version such as search, context links and rich media. Digital publishing industry is rapidly growing (especially in recent months) and with the rise of tablets and eReaders, future of paper is uncertain. However in education industry, where innovations take place in slow motion, we probably can not expect structured rich media digital version of lecture materials anytime soon. Another problem, student might be facing is that he can not see much of a progress while he is reading. This Thesis will try to address these issues and create a web-based solution. This solution will be low-end alternative to expensive digital publishing technology. 1.2 Objectives Purpose is to create online service allowing teachers, educators and individuals to create interactive guide through lesson or course. Multiple web sources like blogs, pictures, videos, presentations or forms can be entered and organized inside editor to steps. Than final course guide will be published online. Student taking course will see his progress thanks to system of questions and answers at each step. 1
    • 2 CHAPTER 1. INTRODUCTION 1.3 1.3.1 Requirements 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 Czech company co-founded by Roman Smola (Which I know in person) and is currently global success. They call themselves #1 online learning tool in the U.S. And several millions of users (Mostly students and teachers) are prompting that it might be true. Their main revenue stream comes from product Glogster EDU which is derivative of Glogster itself only aimed for high-schools. Users are creating visual boards called Glogs and presents them to teachers. In a way it’s indirect competitor to Prezi. To create a Glog you can upload variety of media such as images, texts or videos and organize them 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 decreasing support. It’s performance and strength is especially online video. For basic image transformations and layering, CSS and JS took over the leadership. Editing is too complex (See figure 2.1), and has many non intuitive features, such as Drag and Drop prompts, even though, Drag and Drop is not possible in their Flash setup. Editing buttons are missing tooltips and meaning of layer buttons might be clear to Photoshop designer, but not to a high school children. It creates many difficult situations and overall graphic design and 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 to do from your local folder. Instead you have to first upload the video, then find it in glogster media container and finally drop it to desired box, which I see as UX mistake. 2.1.2 Prezi (http://www.prezi.com/) Prezi is innovative and leading presentation tool. With 20+ million registered users 250+ million presentation views, they changed perception of traditional presenting and PowerPoint. They came up with very interesting concept of endless 2D workspace. You can input variety of web and local content and organize it’s position, size. It takes some time to learn how entire editing process works, but overall experience is good (See figure 2.2). Finally you create presentation frames and connect them. Result is nice flyover effect between each slides, which makes your presentation different. I talked with Prezi sales manager Mike Sutherland via Skype. During our conversation Mike emphasized many times, that Prezi team has now very 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 Guideler result should not be a presentation in front of a classroom, but more for home studies, 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 of terms for details) conferences. With slogan “ideas worth spreading” and hundreds of videos from these events they attracted many more millions of viewers. TED was so successful, that local conferences called TEDx are now being organized. Thanks to this brand and it’s partners ambitious project called TED ED is now available online. After research, facts indicates that TED ED is not as much about content creation, but more about organizing that content using tags and flips. User can find video on YouTube and create a lesson based on that. Add questions, “dig deeper” materials and discussion. General look and feel is great and 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 safe web fonts in order to be rendered by browser not in an image. • Very clear navigation with small number of buttons. No multi-level menus from 1990s websites at all. It is quite clear what action will follow after each click.
    • 6 CHAPTER 2. RESEARCH AND CONCEPT • Responsive web design. Video and menu is not only adapting browser window instantly. There is JavaScript animation that causes video to fly 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 high resolution 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 a competitor, but it is design inspiration. Google is usually leading the way web is created and Art Project is part of it. Smooth transitions and animations. Dark color theme that is not harmfull to your eyes and complex navigation elegantly reduced.
    • 2.1. COMPETITION AND OTHER SERVICES Figure 2.4: Google art gallery view Figure 2.5: Incredible detail, when zoomed 7
    • 8 2.1.5 CHAPTER 2. RESEARCH AND CONCEPT StumbleUpon (https://www.stumbleupon.com/) It was a long time ago, when I last visited StumbleUpon. And since then a lot things changes. What you notice first is, that you can not do anything without login. You can not browse or explore any showcases. Homepage is super empty. Only Log In button in upper right corner and Start Exploring call to action button. Which surprisingly, takes you to Login / Sign up page. That is very interesting approach, that might look very brainless in the first moment. But you have to realize, that Facebook did this exactly the same way. Everyone was there, and to enter the exclusive content, you have to join. If you are curious enough, like I was at the end fill out the form, or login via Twitter, Google or Facebook ID. It is really unfortunate, but I managed to broke my StumbleUpon.com login. When I wanted to finally write about this website here in my thesis, I clicked login via Facebook, since then my account is constantly returning me 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. I would not speculate why they did so. But I will describe their original service in short. Inside their editor, you could combine multiple web sources (Very similar to guideler) add narration or video from webcam and publish it as qwiki that anyone can view. Editing each step was not that easy and required all kind of fields such as description, length etc...
    • 2.2. SELECTING PROJECT NAME 2.2 9 Selecting project name Good name of the project is one of the keys to potential commercial success. First I used brainstorming technique to create some names and after few hours, I discovered very useful website (http://www.namemesh.com/ company-name-generator/) which helps you to generate names after entering keywords. So list was enriched by more candidates. See table XX for final list of options. Than it was time to verify available domain names. CZ domain was not an option, since project is aimed to English speaking users and non-domestic markets. International domain is required and .com would be ideal. As I expected, most of the combinations were sold out. In table 2.1 red are marked unavailable domains. After long thinking session I selected guideler.com as the suitable name. Asked several of my friends, and most of them liked the name. I bought domain and started working. Figure 2.6: Course guide appeared as suitable name, but was already registered 2.3 Selecting the right technology Selecting the right framework for building such web application can cause significant decrease in programming time, costs of maintenance and future scalability. After doing some research I found several technologies currently used to create Web Applications (See table 4.3). I looked at their strengths and weaknesses and selected the one that fit my needs. I decided to use Ruby language, which was developed in mid 1990s by Yukihiro Matsumoto. It has very interesting features and structure which combines multiple programming approaches (Imperative, functional, declarative, OOP) Ruby on Rails often referred as Rails is Open Source framework build on top of the Ruby language.
    • 10 2.4 CHAPTER 2. RESEARCH AND CONCEPT Detailed concept The initial concept of Guideler was sort of a map or assistant that guides you through a course. I wanted to use traffic signs as an expression of certain route that you are taking. I did research on US highway signs and discovered interesting facts. Fonts and colors are standardized by FHWA, which stands for Federal Highway Administration. Figure 2.7: Typical US Highway traffic sign. Font is Sans-serif based and is called Highway Gothic. It is not used only in US, but Canada, Mexico, Australia, Spain, Brazil and many more countries. Background color for green highway signs is Pantone Green - 342, represented 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 seen at 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 drag as desired. After playing around with CSS and JS for a while, it appeared as not a good decision. (Prezi might have reason, why their editing and playing is still flash only) CSS3 transformations simply behaved differently and not correctly 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 entire div. However performance went down quickly, when div contained many more containers with images or iframes. After consulting with potential users, I found out, that this feature is not must have and simpler might be even better. Instead of endless space, guider is now divided into horizontal steps with fixed width, wider than browser viewport width. All steps together are creating one wide div, that can be dragged or moved by arrows or specific step number. Steps are kept hidden and unloaded. When you move to certain step, next and previous ones are preloaded and displayed. Thanks to this, animation can be kept smooth.
    • 12 CHAPTER 2. RESEARCH AND CONCEPT To ensure, that user will be engaged with the guider I added gamification elements. Clear indicator of your progress (percentage or loading bar) is present (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 you feel that you are done. This method based on self-evaluation is obviously not usable. Secondly, some automatic analysis was option. After long hours of thinking and trying, I decided that it would be just too complicated to develop reliable method of step finish recognition. (How can you recognize without asking, that someone finished reading text) I went through competition and research results again, and realized, that simple multiple choice quiz might be best cost/value solution. If student answers certain question correctly, step belonging to that question is marked green and your progress will increase. Your progress is regularly and automatically saved, so you can return at any time from any device. I believe that gamification concept can be extended with badges, sharing to social networks and many other features. But it will not be covered in this thesis. Player should be responsive (Adaptive to multiple resolutions) and work on multiple devices, especially mobile ones. Flash would be simpler for me, thanks to my many years experience. Unfortunately Flash would not work on mobile devices and has uncertain future. In this case, HTML5 is the answer.
    • 2.4. DETAILED CONCEPT 13 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. Inside glogster, you have to select what type content is. In Guideler, I want to build universal field, where you can input any link and site would recognize what content type it is. That means user is only copy-pasting links and do not have to care about anything else. He might add question or notes, but it is not required. So you might create visually attractive guider within few clicks and seconds instead of exporting bookmarks and sending them via email. One feature, that potential users were thinking of or were proposing to me was Drag and Drop support. But not for entering images or videos, but for entering links. Practically every modern browser has tabs, and most of the users are browsing more than 2 tabs at the time. So dragging tab and dropping it to editor’s link box would be useful. But I could not find any way of doing this from the website itself. Only reasonable idea that came to
    • 14 CHAPTER 2. RESEARCH AND CONCEPT my mind was browser extension, that would allow you to add some keyboard listeners, or “add to guider” button on top of every tab. Such extension might available as premium feature, and provide basic clue to business model. But I recommend to build it only in case, that traffic of the site exceeds at least few hundreds of users per week. But with that comes a question, how to store and process the data. Option 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 data into database. But this approach has one significant disadvantage. Once you add support for more services, you have to run through db and correct all the data. Instead, I decided that storing just the links and parsing them when view is requested will be better. Figure 2.10: Very first sketches of guideler.
    • 2.4. DETAILED CONCEPT 2.4.3 15 Homepage Homepage is critical to get traction. You have only few seconds to impress user and create relationship. And few more seconds to explain him, what is it all about and why he should care. In first concept (See figure 2.11) I reduced navigation. You need to be able to login, explore some guiders as an example and has ability to create one. Nothing else is important at the beginning. Other pages such as pricing, about, terms and conditions are for now unnecessary and can be added later to the footer. Texts in perfect english are important. After thinking, I entered “Textbook 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 them without 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 clearly with significant color, it desires you to try it. I wanted to keep homepage clear, and in this draft it is still not as clean and clear as I wish. But as a concept, it is enough. As I wrote, homepage is crucial at the very beginning. After you get some users, it is better to demonstrate 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. That means, that users often do not cross the homepage at all!
    • 16 CHAPTER 2. RESEARCH AND CONCEPT Figure 2.11: First photoshop wireframe of Guideler.com homepage.
    • 2.4. DETAILED CONCEPT Base words Education Skills Learn Course Guide Navigation Direct Ability Wisdom Knowledge Study Teach Materials Earn Map Route 17 Names courseguide.com learnguide.com tutorialguide.com tutorguide.com coursepath.com courseroad.com coursetrack.com courseway.com courseroute.com studytrack.com studyway.com studyroute.com learntrack.com learnway.com guide.me guidemealong.com guidemein.it master.it guidealong.it guidein.it destinator.com rerouter.com guideme.to learnme.it learnme.to guide.at mylearnguide.com mystudyguide.com skillguide.com myskillguide.com knowledgemaker.com guidester.com navidom.com plantastic.com learnabout.it guideler.com gourse.com guidewy.com Table 2.1: Base words for domain and available domains
    • 18 CHAPTER 2. RESEARCH AND CONCEPT Language PHP Ruby Java Python ASP.NET JavaScript Examined framework Symfony Ruby on Rails GWT Django ASP.NET MVC Node.js Table 2.2: Table of widely used web building technologies
    • Chapter 3 Implementation and final design 3.1 3.1.1 Technical basics and setup jQuery In this project I am using jQuery, which is open source JavaScript library supporting most of current browsers. It makes programming a lot easier in certain situation. You are using one code and do not care about browser type in AJAX calls or events detection. It also makes manipulating with the DOM a lot easier. 3.1.2 RubyMine RubyMine is IDE for building Ruby on Rails web apps. It is developed by JetBrains company (The one also responsible for IntelliJ IDEA). And I definitely have to recommend this IDE, because it has some great features. Basically, after installing Rails and RubyMine, everything can be done within the IDE, generating new project, running IRB (Interactive Ruby Shell), Rails console or bundler. Under tools it has shortcuts for generators (eg. for migrations) and rake tasks. Very handy is, that RubyMine understands relations between files and connects linked methods and variables. By just one click you enter the file which contains desired method, without searching it inside directory structure. It also has integrated Git and other Version Control Systems. JetBrains gave attention to every detail, including catchy dark color scheme saving your eyes. And, there is much more under the hood. 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 from folder 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 library or module of ruby code that you can use in your project. And Gemfile is index of those Gems, so each time you run bundle install or update, it runs through Gemfile and fetches all gems and dependencies to your local storage. Another key part of Rails, which is not common in other frameworks is concept of Migrations and working with ActiveRecord interface to access database. I think official guide explains benefits clearly “Migrations are a convenient way for you to alter your database in a structured and organized manner. You could edit fragments of SQL by hand but you would then be responsible for telling other developers that they need to go and run them. You’d also have to keep track of which changes need to be run against the production machines next time you deploy. Active Record tracks which migrations have already been run so all you have to do is update your source and run rake db:migrate. Active Record will work out which migrations should be run. It will also update your db/schema.rb file to match the structure of your database.” (Cited from http://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 table column “published”. Go to Tools/ Run Rails Generator and begin typing mig, autocompletion prompts migration, hit Enter and type name of your migration, recommended in Hungarian notation, in our case “AddPublishedToGuiders”. Rails creates migration file, where you can define table change, and in case of error also rollback behaviour. After writing few lines, migration looks like this:
    • 22 CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN 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 Rake Tasks, 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 anywhere else. I will not explain all other details about MVC and Rails, those can be found at official Ruby on Rails guide very well covered. But by now, reader should 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 answered questions on StackOverflow. What is also great, is that they provide free tier for development, meaning I can develop and test everything without paying a single dollar. Of course free tier has limitations, that are not acceptable for production. Dyno for example falls asleep when not active for some time, and it takes several seconds to wake it up. I am using Git to push entire repository to Heroku, and they do the rest for me. It has a few prerequisites. First download Heroku Toolbelt (In my case for windows) it adds Heroku commands to your command line. Open CMD and go to the directory where you have the web app. Type heroku login and proceed. (You have to select your SSH key). Once you solve authentication it is time to connect your git repositories. Open heroku.com in 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 git@heroku.com/Guideler.git Now you are ready to push your code online with following command git push Guideler master 3.2 3.2.1 Final design and implementation The Player Player is designed to be responsive. It is necessary that users with laptops and small resolutions, reading materials for example in train will see everything. With this constraint, websites had standard width of 960 pixels. But that is inconvenient when you have FullHD monitor (1920px x 1080px) where most of the space is unused. First solution, still used today, were to add nice backgrounds and graphic, to make experience better. With the rise of mobile and tablet devices, increasing number of sites is using techniques to deal with this trend.There are so many very different resolutions these days, that it is not surprising year 2013 was called the Year of responsive web design. And the statistics agrees, these (Figure 3.2) are desktop resolutions divided according to number of visitors of SlidesLive.com (Another educational portal) 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 is usage of relative units, meaning percentage or “em” instead of traditional points and pixels. (em references current font size and multiplies it with prefix number. So 2em considering 20px font will result in 40px). This does not mean, that you should fully abandon pixels, you will still use them a lot, but for key structural parts of the site such as menu wrappers, headers, content columns etc... you should consider relative units. Also beware of CSS box model, prompting, that width is not involving margin, padding and border. For example, if you want to have element with relative left padding, taking entire 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 possibly negative side effects somewhere else in the document.
    • 24 CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN 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 aspect ratio. 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 option, especially when each content type is unique. I came up with following solution. Content fills 100% of it’s div. That div is equipped with class depending on the content type. However that class is not present in CSS file, instead it is generated by JavaScript along with proper dimension calculations. These classes are then appended to the DOM’s special style tag. You might be asking, why I generated classes when I could just modify content by jQuery? You would have to loop through every div and assign proper values, using class, browser does this for you.
    • 3.2. FINAL DESIGN AND IMPLEMENTATION 25 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 contained hint 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 wise to just add that container somewhere and squeeze it together in case of a smaller resolution, also layout that will collapse into multiple columns is not appropriate in this case. Instead, question will roll out as overlayed window, similar to lightbox that is widespread. Custom styled radio inputs, placed inside are offering better user experience than default styled tiny circle. Very interesting part was integrating display of 3rd party content. As I mentioned before, database stores only the links, and rest is done inside Rails controller and player JS. YouTube and Vimeo is parsed using traditional Regex. 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 standardization of embedding content from other websites. You certainly know the classic problem, there are so many URL combinations (old URLS with params in query, rewritten paths to accounts, articles, embeds) that covering all of them by Regexes is nearly impossible, and you have to track provider for any future changes. That is where oEmbed introduces API standard, where you can send request with URL parameter containing path to a resource, and you receive back JSON or XML representation of that resource. Response usually contains html code for direct embedding, content title and unique ID, if it has one. This is example of SlideShare request result:
    • 26 CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN { 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;borderwidth: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 }
    • 3.2. FINAL DESIGN AND IMPLEMENTATION 27 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 dozens ideas what user might be able to do. These ideas, when examined into details explode into even more buttons, pop-ups and little hacks. Result is often GUI that is not usable and nobody understands it even after several uses. Many functions 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
    • 28 CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN • 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 not trivial. I did a research on services like Google Docs, WordPress or Joomla sites 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 usually present 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 other buttons like changing template (Brush in figure 3.6). Layout has 2 main columns, left one for entering link and right one for optional question. Question can be turned on and off by highly visible switch. It is multiple choice with fixed 3 answers, it might be limiting user, but it allows simple one-page editing. Compared for example with TEDed where creating single question is quite a long process with many screens.
    • 3.2. FINAL DESIGN AND IMPLEMENTATION 29 Editor is using AJAX, which allows to load and save data without refreshing the page. Data are exchanged in JSON format and on special routes processed by Ruby controllers. Route ”/api/edit guider/” is used for saving in a form of POST request with JSON array containing all the data. Controller verifies, if user is authenticated and has the right to save the data. I also implemented automatic saving after one minute, but after few talks with users I removed it. I figured out, that there is small number of browser crashes and other events, where autosave is handy. Accidental closing of browser tab is a risk, and for that exists window.onbeforeunload method, that you can use to display confirmation dialog. You may know this dialog from closing tab with unfinished email. Guider editor does not support any version history, or undo feature, so there are lot of cases, where you want to discard changes, you have made. Because of this, autosave is not implemented. 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 the hottest place of the website. In the content area there is single image that
    • 30 CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN visually explains what and how is Guideler doing. But still, most of the users might not get the point and for them, there are displayed top guiders, that might 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 the top and offers you not only to Login but also Sign Up directly from the homepage without redirecting to some other page. People do not want to fill long registration forms today, and even those 3 fields are too much. (Account name, Email and Password) So for the most comfortable users, there is Sign Up with Facebook, which is today very common way of authentication on the web.
    • 3.2. FINAL DESIGN AND IMPLEMENTATION Figure 3.7: Design of Guideler’s homepage 31
    • 32 CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN Figure 3.8: Homepage with login window rolled down
    • 3.2. FINAL DESIGN AND IMPLEMENTATION 3.2.4 33 Error page It is common that error occurs, whether it is a code failure, missing data or just wrong URL input from user. However treating errors is often underestimated and on many websites you just see provider’s or browsers default page such as 500 Internal Server error, 404 Not found etc... Also it is difficult to design and implement for each error custom page and explanation, so I designed one universal error page (See figure 3.9). It is obvious to the user that it belongs. It’s functionality is limited and might be 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 mostly use if statement. For database errors I recommend to use StatementInvalid and 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 controller method) 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 and resolve message in the controller. Since you might want to translate errors in another language, and URL has no problematic characters to be escaped and is more esthetic for the user. You might also search for POST method parameters passing instead of simple GET that requires error code parameter inside query. But HTTP/1.1 prohibited redirect using POST method. For details visit http://www.w3. org/Protocols/rfc2616/rfc2616-sec10.html
    • 34 CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN Figure 3.9: Universal error page 3.2.5 Profile page In this part of the website, user can view his profile, make common changes such 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 to serve people what they want and not annoy them with tons of features that are used by fraction of users. Once you login (See figures 3.11 and 3.11), you see Welcome screen with “How it works”.
    • 3.2. FINAL DESIGN AND IMPLEMENTATION Figure 3.10: Profile page after you login Figure 3.11: Managing your guiders 35
    • 36 CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN 3.3 3.3.1 Notable issues and fixes Postgres suddenly failed on Windows 7 I am quite new to Postgres, so not used to all variety of errors. So It was surprise that I couldn’t login from Rails and even from pgAdmin, constantly returning error that server is not listening. Connection refused (0x0000274D/10061) Is the server running on host ”localhost” and accepting TCP/IP connections on port 5432 After searching, this solution worked for me. Start / cmd and type services.msc. Display the list, find postgres, right click and start. Check in properties, that it is set to start automatically as you turn on the computer. Despite these facts, Postgres together with Rails is running perfectly smooth compared to experience with Symfony and MySQL (Which had constant problems with PDO drivers) 3.3.2 oEmbed request refused because of Access-ControlAllow-Origin If there is one security issue, you will see over and over again, it is AccessControl-Allow-Origin. Usually, it can be fixed by adding . htaccess file to the server, which allows different domains to access the resource. But when using embed and accessing 3rd party resources or content, you can not simply add htaccess file to their server. To my surprise slideshare did not allowed this cross-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 anything in that function) and change dataType from json to jsonp. Snippet showing oEmbed AJAX request that is Cross-Origin Resource Sharing 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 (Appendix A) 3.3.3 Google Web Fonts This is very trivial issue, if you already have experience with it. But when I came across this first, I spent afternoon detecting the problem. Google WebFonts library is great, you are no more limited by 13 or so Web Safe Fonts. If you plan, that your site will support additional languages and special characters, selecting a font is little more careful. So I found a font, that displayed text in Czech Language, pressed USE button and copy pasted code into my CSS. But Czech characters were still not showing up. I triplechecked database, erb files coding and all other options to find that mistake is in code from Google. You have to add subset parameter to that URL if you 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. It might happened, that all your JS is working fine on Chrome or Firefox, but IE (Surprisingly!) seems totally broken. Reason for this is, that you forgot to remove console.log somewhere in your code, or you are using it for debug information. Remove all occurrences, and refresh the page, I believe that will fix many troubles. It is because IE console object is available only when developer console is open. And even if you close that console, it remains accessible until you close the tab. That might be reason, why it always worked when you were trying to detect the errors, but was broken in the production.
    • 38 CHAPTER 3. IMPLEMENTATION AND FINAL DESIGN Figure 3.12: Do not forget to select which characters you would like to include! For Czech support include Latin-Extended characters.
    • Chapter 4 Usability test 4.1 Introduction World today is producing more information than ever. Consider quote from Google’s former CEO Eric Schmidt - “There were 5 Exabytes of information created between the dawn of civilization through 2003, but that much information is now created every 2 days.” In this information overload, it is increasingly 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 target user does not perform task, he wanted, it is your mistake. There are many methods how to perform usability test. For example Cognitive walkthrough, Heuristic evaluation, Test with user or A/B Testing. I decided to use Heuristic evaluation, because it is cheap and relatively quick method how to find usability problems. It requires experts in field, that are separately investigating the design and looking for problems. Number of experts is usually between 2 and 8, since ratio of discovered issues is growing logarithmically (See figure 4.1) 39
    • 40 CHAPTER 4. USABILITY TEST Figure 4.1: Curve showing the proportion of usability problems in an interface found by heuristic evaluation using various numbers of evaluators. The curve 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 Hor´kov´, a a Art director at SlidesLive.com and Jan Moskalyk, entrepreneur and creator of 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
    • 4.2. PREPARATION 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. 41
    • 42 CHAPTER 4. USABILITY TEST 4.3 Collected data 4.3.1 Vojtˇch Ciml e Issue Heuristic Fix Priority Issue Heuristic Fix Priority Issue Heuristic Fix Priority Issue Heuristic Fix Priority Bar with individual steps should be adaptive according to number of steps. Small number has too much empty space, large number is overflowing. Error prevention Make div element adaptive 2 I as a developer would miss open API to create my own mashups and apps on top of guider. Consistency and standards, User control and freedom Create open API 3 Inside editor, user might expect drag feature, allowing him to change order of the steps. Like inside powerpoint Flexibility and efficiency of use, Consistency and standards Implement this capability 2 Because both player and editor opens inside new tab without some kind of universal website menu, it is not clear how to return. User control and freedom, Visibility of system status Add some navigational elements 1 Table 4.1: Heuristic evaluation - collected data from Vojtˇch Ciml e
    • 4.3. COLLECTED DATA 4.3.2 Tereza Hor´kov´ a a Issue Heuristic Fix Priority Issue Heuristic Fix Priority Issue Heuristic Fix Priority Issue Heuristic Fix Priority At homepage, I would expect video how it works, that is present inside my account page. Help and documentation Add video to homepage 2 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 User control and freedom, Visibility of system status Add ”go back” buttons 1 I am missing some kind of a preview, because at first I had no idea how the resulted guider looks like. Visibility of system status Add preview button and functionality. 2 After answering several questions, I went back, but it did not remember my answer. Recognition rather than recall Mark the answered question, when returning 1 Table 4.2: Heuristic evaluation - collected data from Tereza Hor´kov´ a a 43
    • 44 CHAPTER 4. USABILITY TEST 4.3.3 Jan Moskalyk Issue Heuristic Fix Priority Issue Heuristic Fix Priority Issue Heuristic Fix Priority Issue Heuristic Fix Priority When watching and switching to other steps, transition was too slow Flexibility and efficiency of use Make animation faster 2 From the image at the homepage I am not sure how exactly Guideler works. I would expect more details or better explanation Match between system and the real world Maybe better analogy with other service, ideally not IT realted. 3 When creating guider, I was not able to reorganize steps easily. I had to cut and paste links and texts When creating guider, I was not able to reorganize steps easily. I had to cut and paste links and texts Implement this feature 1 I was often clicking on the icons under the link field. Expecting some action, nothing happened Visibility of system status Add some explanation, what happened 2 Table 4.3: Heuristic evaluation - collected data from Jan Moskalyk
    • 4.4. ANALYSIS AND RECOMMENDATIONS 4.4 45 Analysis and recommendations As I expected, we detected many issues, and I believe there are many more to come. And the reason is, that Guideler is new project that I am building from scratch. So it is not probable, that you make everything perfect at first attempt. And usability testing is not about single test, but about loop. It is not a task, but a continuous process. You have to make constant changes in order to move forward. Since some of the issues were repeating, or were similar, I would start fixing them first. In the future, I would also like to implement A/B testing on the site that in my opinion provides much better results than heuristic evaluation.
    • 46 CHAPTER 4. USABILITY TEST
    • Chapter 5 Conclusion 5.1 Meeting objectives Make a survey of the current e-learning platforms. Identify their common features and weaknesses. Learn the state of art of social bookmarking services such as stumbleupon.com, delicio.us, which enable the users to share and discuss generic content resources. I successfully searched for competition and analyzed their strengths and weaknesses. This task was completed. Design and implement a combination of a social bookmarking service and an e-learning platform which allows anyone to assemble an annotated sequence of links to existing resources (web sites, vidoes, sound files, ...) that can be used as an on-line course with study material as well as particular tasks allowing the users to verify their knowledge and skills. Product was designed and minimum viable product was realized and is now available 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 project up and running from scratch. Coming up with the idea, making a research, do the design, implement a solution, put it online and document the whole process in one person is difficult. Sure, there are lot of mistakes, unfinished design and overlooked details that might be improved. Usability test helped me to reveal some of those. I am dedicated to continue improving this so47
    • 48 CHAPTER 5. CONCLUSION lution and I am very excited about the future of this project. This Thesis enhanced my skills to learn new things quickly, justify my opinions and findings and examined my capability of writing work in English. It is a great experience. 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 a link inside guideler. That is inconvenient, and direct upload, which would forward that document to SlideShare automatically and filled in the link is beneficial feature. Concept of gamification together with proper emailing could be developed further. That requires study of user psychology and other factors that encourages you to return and finish guider that you were watching. That is closely related to well designed emails that are sendet at the right time, with the 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 target audience. In this situation, computer should do the job for you. Automatic analysis of entered links could help categorize each guider and deliver it to the right user. So musicians would see guiders how to compose new tracks and astronomers would be supplied with pictures and videos of stars. No project can last long in isolation. So letting now potential partners and customers about existence of this website and developing relationship with them is crucial. I can name TEDed initiative or Pulse content aggregator. These might provide valuable insight that helps to decide right direction of another development.
    • Bibliography [1] Douglas Crockford. Discovering javascript object notation with douglas crockford. http://www.youtube.com/watch?v=kc8BAR7SHJI, Accessed 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 Melvil Publishing, 2010. ˇ [4] Josef Slerka. Gamifikace a ˇirˇ´ kontext. http://slideslive.com/ s sı 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 - Nenuˇte uˇivatele pˇem´ˇlet! t z r ys Press, 2006. [7] The Author Collective. Rails guide. rubyonrails.org/, Accessed 18.5.2013. 49 Computer http://guides.
    • 50 BIBLIOGRAPHY
    • Appendix A Glossary of terms A.1 Responsive Web Design Is webdesign technique allowing users to view content on many devices with different resolutions without scrollbars or zooming. It uses CSS3 Media query and JS feature detection to adapt website layout. Generally, you use 2 or 3 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 (in 1984) as a conference bringing together people from three worlds: Technology, Entertainment, Design. Since then its scope has become ever broader. Along with two annual conferences – the TED Conference on the West Coast each spring, and the TEDGlobal conference in Edinburgh UK each summer – TED includes the award-winning TED Talks video site, the Open Translation Project and TED Conversations, the inspiring TED Fellows and TEDx programs, 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 Douglas Crockford. It is data-interchange format that is easy for humans to read and easy for machines to parse or generate. It is language independent. 51
    • 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. It is not a game, and it is not describing how game looks like. It transmits gaming tricks to engage and motivate users to certain actions. Or to modify their behaviour.
    • Appendix B Installation Guide First, I would like to point out, that the code stored on CD is probably out of date by now. For latest version, please clone Git repository from https://github.com/wojtaw/Guideler. CD also contains installation files for Ruby, Rails, RubyMine, PostgreSQL and Github. All of these are for Windows 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 use RailsInstaller which includes all necessary dependencies. (Download from http://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 finishes opening, it is time to update Gems using bundler. Choose Tools/Bundler/Update. Guideler is using PostgreSQL Database, so you need to install that one too. 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 are not suppose to create a DB schema or table, Rails will do it for you! Choose Tools/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 rails server (Run:Development) open browser and type localhost:3000. You should see Guideler’s homepage. 53