Hey guys,
here is our presentation of our 2.prototype.
Feel free to comment!
Within the last year Cloud9ide has raisen a lot of attention because it shifted the development environment from the desktop into the browser. Thus collaborating with other developers had become easier then ever before. Together with cloud based databases, deployment servers and online repositories, the developer has everything he needs within his browser. The main reason for this paradigm shift is, that browsers (and their javascript engines) had become faster and more responsive.
Within this project I’m going to find out, if it’s possible for me to develop and deploy a web app only with the help of a browser. This means:
- no local Editor or IDE, just my browser
- no usage of own servers, repositories or infrastructure
- no usage of services with costs
Below I will introduce all services I’m going to use for this project to fulfill the above requirements:
- online edtior for snippets build from html, css and Javascript
- supporting all actively developed frameworks (jQuery, bootstrap, ExtJs,..)
- code can be shared
- good for isolating bugs and testing compatibility (e.g. css3 browser-support)
cloud9ide as a replacement for a desktop-ide/editor
- online web-based Cloud Integrated Development Environment for Javascript and Node.js development (It is written almost entirely in Javascript, and uses Node.js on the back-end)
- code is accessible from anywhere on the web
- teams can collaborate on projects and run/debug them within the browser
- easy deployment on different servers (e.g. heroku)
- free for open source projects
github as a public repository
- web-based hosting service for software development projects that use the Git revision control system.
- Includes source-code browser, in-line editing, wikis, and ticketing.
- free for open source projects
heroku for hosting our app
- cloud platform as a service (PaaS) supporting several programming languages.
- Agile deployment for Ruby, Node.js, Clojure, Java, Python, and Scala.
- Run and scale any web or background process with any web framework or worker type in minutes
- first Node and a small Database is free
- one-click-deployment-button in cloud9ide
Have a look:
- jsfiddle prototypes:
- memory: http://jsfiddle.net/adifah/eDbvR/
- colorstation: http://jsfiddle.net/adifah/MtLXQ/
- Project on c9.io: http://c9.io/adifah/flag (registration required)
- Project on github: https://github.com/adifah/flag
- running version of the app on heroku: http://flag-zigzag.herokuapp.com/
This article explains how Web 2.0 changes the way of perception and usage of the internet. Typical E-Learning 1.0 platforms will be displaced by personal configurable learning- and working environments. The with Web 2.0 combined applications contain much less technology-driven Innovations, but could be understood as a consequent application of already existing internet technologies. The main feature of Web 2.0 applications is, that so far conventional applications for PCs are shifted into the world wide web. Like publishing my personal photo collection on platforms like Flickr and tagging them with keywords, so foreign people can see them. This is how communities arise step by step. An another important change is, that we use the internet more often from different electronic devices and different locations like at home, en route or at work. It becomes more and more a part of the everyday life.
The changes of perception and usage of the internet associated with the Web 2.0 can be transcribed through the shift of three borders:
- User versus Author: Users can become Authors.
- Local versus Distant: The border between local and distant data management- and handling become indistinct.
- Private versus Public: private content become more and more public.
This three border can also be transferred into the learning context:
- Learner vs. Teacher: learner can generate content.
- At Home vs. School: learning becomes ubiquitous.
- Learning vs. Testing: learning turn into a performance.
What does this mean for the future of E-Learning? Till now the development of E-Learning offerings often only provides contents for learners on servers in the internet without any social tools for the users. Like an island in the world wide web with its own contens and tools separated from other platforms. And this is where the big difference between E-Learning 1.0 and E-Learning 2.0 is. Instead of using the E-Learning platform as a gate which leads the user through the internet and also containing its own contents and tools the teacher only transfers all resources onto the island. Besides the learner isn´t able to configure his own personal learning and working environment.
In the following an overview over the most important differences between E-Learning 1.0 and E-Learning 2.0:
| E-Learning 1.0 | E-Learning 2.0 |
| Learning environment: an island in the internet with contents and tools | Learning environment: a portal which guides through the internet with contents and tools |
| Teacher transfers all resources onto the island | Teacher provides guideposts and aggregates resources |
| Learner uses the given contents and tools | Learner configures his personal learning and working environment |
The Institute for prospective Technological Studies (IPTS) have done a techno-economic research and prospective analyses on the use of ICT for creativity, innovation and lifelong learning for all. The research on learning in informal learning networks and communities concludes that social media applications provide easy, fast and efficient ways to access a great diversity of information and situated knowledge. They also provide learners with opportunities to develop their competences in collaboration with other learners, practitioners and stakeholders.
There a four dimensions the so called four C´s of Learning 2.0 in the IPTS research (content, creation, connecting and collaboration):
- content: social media allow learners to access a vast variety of learning content.
- creation: social media allow users to create digital content themselves and publish it online, giving rise to a huge resource of user-generated content.
- connecting: social media connect learners with one another, and to experts and teachers.
- collaboration: social media support collaboration between learners and teachers on a given project or a joint topic of interest.
As you can see there a huge potentials for learners in web 2.0 learning applications, but the question of the media didactic approach in those E-Learning platforms is given. Those portals surly supporting mostly the approach of learning activities in social contexts which we can find in groups of people. But the big advantage of E-Learning platforms is that there are as far as possible open to the different didactic approaches. That means these platforms are flexible to concentrate on certain education problems of the didactic field. The future will show how these opportunities will be used by learners and teaches as well.
Text sources:
First of all: there are so many Apps (about 300 only for Android) which focus on flags – because of this, we selected five apps for Android, three apps for iOS and one browser game.
Apps for Android:
National flags quiz
- This app has tow game modes: “From Flag to Name” and “From Name to Flag” – every mode have three difficulty levels: easy, normal and hard
- The game can be played with or without time limit, if you play with time limit, you have 60 seconds to earn as much points as you can
- If you want to play without a time limit, you can choose between the modus “All Flags” or “no fault”
- After the game ends, you can see in a review each flag with the name of the country, so you can check which questions you answered wrong
- In the settings you can choose the order of questions, the range of questions, the language and if you want to play with sound or not
- This app supports 25 different languages
Pros:
- Also small or unknown countries take place
- A list with all used flags
- Review at the end of the game
- free download
- many supported languages
Cons:
- Just two different game modes
- No way to compare online with your friends – no highscore list
- Just collecting points, but there is no use for this collected points
World Flags
- You have 50 seconds to touch the correct flag and earn points
- This app contains 193 flags
Pros:
- The large number of used flags
- Also small or unknown countries
- free download
Cons:
- Just one game mode
- No way to compare online with your friends – no highscore list
- Just collecting points, but there is no use for this collected points
- No possibility to change the difficulty
- it’s a really dull game
- bad design
World Flags: Quiz and learn
- You start this game with 50 questions and you get a new one each day
- You get one flag and 4 possible answers, if you choose the wrong answer, it gets red and the app shows you the right one
- After every question you have two options: you can click the Wikipedia logo to get more informations about the country or you can order the next flag
- If you choose the right answer the yellow bar at the left corner changes and shows your improvement
Pros:
- The linking to Wikipedia
- The improvement bar
- Also smaller and/or unknown countries
- free download
Cons:
- Just one game mode
- No way to compare online with your friends – no highscore list
- No different difficulties
- No possibility to restart
- The user can’t see which questions he had answered correctly since he started the game
- It’s more for learning and not for gaming
Word Flags Memory Lite
- two different game types:
- Memory: Time yourself on how fast you can discover all the pairs of flags
- Quiz: quiz yourself the name of a then compare your time against other players around the world in the World Top 100
- also multiplayer available
pros:
- gallery of all flags (good for learning)
- multiplayer with top 100 list
- free (full version for 0,99€)
cons:
- no different difficulty levels
- bad design
- advertisements in free version
- no active players for multiplayer online (so not testable)
Flag Quiz
- knowledge about worldwide Countries and Capitals
- if you give a wrong answer the game is over and you are back on the dashboard
- the goal is to give the most correct answers in a line
- many possible game modes:
- Country flag and four possible answers are given: select the correct name/capital city/emblem
- Country name and four possible answers are given: select the correct flag/capital city/eblem
- Country emblem and four possible answers are given: select the correct flag/capital city/name
- Country flag and emblem are given: you have to enter the correct name and capital city of the country
pros:
- many different game modes
- also including the emblems of a country
- many flags (191 countries and emblems)
- next versions will support sharing your maximum score through Facebook, Twitter, Whatsapp, SMS, email and other options provided by our Android terminal.
- many languages supported: spanish, english, greek, russian, portuguese, italian, french, deutsch
- free
cons:
- bad design and bad structured navigation
- advertisements
- no different difficulty levels
- no multiplayer
- only local toplist
- every wrong answer brings you back to the dashboard
iOS-Apps:
World Flags Game
- This app helps the user to learn and recognize the flags of 200 countries
- The user has to collect points by correctly identifying the flags
- If the user collects more than 15 points, than he will get a level-up, but if he got less than five points he will move down a level
Pros:
- The large number of flags
- Using the collected points for level-up or level-down
- different levels and difficulties
Cons:
- no free download
World Mania
- World Mania is a Quizgame
- 6 different quiz modes: capitals, currencies, continents, flags, independence and random
- the user can choose the number of questions he wants to answer
- at the end of the game the user get a report about his results
- the countries can be viewed in an interactive map
- can also be used to just get some informations about the countries
Pros:
- detailed report at the end of the game
- different quiz modes
- background informations to the countries
- flexibility in choosing the number of questions
- interactive map
- design is suitable for children
Cons:
- No way to compare online with your friends – no highscore list
- no free download
- no different levels/difficulties
Flags!
- Flags! is a multiple choice game
- the app tracks your progress
- uses sophisticated learning algorithms
- the browse mode lets you look at all the flags
Pros:
- Also small or unknown countries
- A list with all flags
- progress tracking
- nice and clear design – no dispensable stuff
- large number of flags
Cons:
- Just one game mode
- No way to compare online with your friends – no highscore list
- no different levels/difficulties
- no free download
Browser-Games
Flags of the World
- online flash game (targeted to desktop browsers)
- you have to pick up the right name of a country
- multiple game rounds
- round 1 (warm-up): 60 seconds, 8 country names with 2 corresponding flags are shown, you have to pick the right one four times to qualify for round 2
- round 2 (marathon): 60 seconds, 12 country names are shwon, you can choose the number of possible answers (2 or 4), you have to pick the right one six times to qualify for round 3
- round 3 (hill climb): 8 country names with 4 corresponding flags, you have 7 seconds per question, you have to pick the right one four times to qualify for round 4
- round 4 ?
- if you don’t qualify fo the next round you have to begin from scratch
pros
- nice design
- online highscore
- displaying user comments
- difficulty increased by each level, so it’s interesting for a longer time
- besides the levels you earn points for:
- your speed
- selecting 4 answers in level 2
- linking together correct answers in level 3
- ..?
cons
- it’s flash!
- not for mobile devices
- only one game (but in different leves/modes)
- many advertisments
- only in english
Summary
As shown, there are many different apps which focus on flags. But basically, they are all very similar: you get a flag and your task is to name the flag correctly. Some of the games have different levels and/or different difficulties, some of them have different game modes.
All games uses flags from all over the world – our App just concentrates on Europe – but this is expendable
None of the presented games uses the GPS – our App does, this is a very nice feature and a large USP.
So, let’s face it: our App is really the best choice 😉
In this blog entry we will give you a summary of the technical side of our flag app: “What technologies are we going to use and why do we choose them.”
First of all we had to make a decision: “Are we going to make a native app, or a web app”.
We already summarized the differences between this approaches in an older blog post [1]. Due to the big workload (because of the many mini-games) and my lacking experience with native app developing we decided to do it the web-app-way. Common web technologies (html/css3/js) paired with a mobile-web-framework will cover all our requirements and thus our app can even be used with desktop browsers.
The Client Side
For best user experiences on mobile browsers we will use the web-app-framework jQuery mobile [2]. This way the mobile user gets a native feeling whereby there are also optimization possibilities for desktop users (with css3 media queries). We favour jQueryMobile over Sencha Touch because of the wider device support of jQueryMobile and the fact, that everything can be done in Html and css3 (JavaScript will mainly be used for the game logic). Furthermore we have the option to make our app native as well later (phonegap [3] for example, transforms any web app into a native iOS or Android App).
The Server Side
On the server side we primary need user handling/authentication, a database for storing informations like the user’s score. There are many ways to implement user handling, one is oAuth [4]. This way the user can login with his twitter/facebook/whatever-account and we don’t have to struggle with the registration part.
Besides, the majority of the game logic should be computed on the server. The advantage of this approach is that there is no way for the users to cheat (like looking up the sourcecode of the memory game to get informations about a card’s backside). Since we have to split the game logic into server and client parts it would be fine if we can use the same programming language on both sides.
Based on this requirements we are going to use node.js [5], a server-side javascript environment in combination with express [6], a web framework for Node.js. The authentication with oAuth (twitter) will be handled by everyauth [7]. The persistance layer can be filled with a nosql databse like couchDB [8] for data storage, but for the prototype we will use dirtyDB [9], a tiny & fast key value store with append-only disk log.
Communication between client and server
There are several informations that have to communicate between the clients and the server (e.g. user moves or highscores).
To archive a asynchronous real-time communication between the server and the clients we will use socket.io [10], which works perfectly together with nodejs. Socket.io is compatible with a wide range of browsers and in combination with json [11], a data interchange based on javascript, it’s a fast websocket solution (with fallbacks for older browsers) with a minimal data overhead.
- Node.js (JavaScript Server)
- DirtyDB (file-based DB)
- Express (Web-Framework)
- Jade (Template-Engine)
- Less (dynamic Stylesheets)
- Everyauth (Twitter oAuth)
- Socket.io (real-time Communication)
- jQueryMobile (Mobile-Framework)
- HTML5 (generated by Jade)
- CSS3 (generated by Less)
- jQuery (for game logic)
- Socket.io (real-time Communication)
[1] https://fsln12group3.wordpress.com/2012/04/16/web-hybrid-or-native-app/
[2] http://jquerymobile.com (jQuery mobile example: http://www.professorcloud.com/supercharged/mobile/)
[3] http://phonegap.com
[4] http://en.wikipedia.org/wiki/OAuth
[5] http://nodejs.org
[6] http://expressjs.com/
[7] http://everyauth.com
[8] http://couchdb.apache.org/
[9] https://github.com/felixge/node-dirty
[10] http://socket.io
[11] http://en.wikipedia.org/wiki/JSON
Hi everybody,
We are happy to present to you, after long hours of work, our Flagmania mockup.
You can watch it at this link: https://www.lucidchart.com/documents/view/4baf-f714-4fb921cd-8e09-09cd0abeb545
The mockup contains all 5 games at all game levels (opening and login screens, game menu, level selection, games and high scores screens).
Working Process:
At the beginning we planned on building the mockup with axure that we familiar with from other courses. But, when we realized that due to really tight schedule of both of us, we won’t be able to meet, we decided to look for another environment that will allow us to works collaboratively from different locations (and this is also a very important aspect of social learning), and that’s how we found lucidchart.com that allows trial account.
During the build, we were using the Berlin girls design from earlier steps of the project as the base to the build, that and the fact that lucidchart provides iphone ui components, were really helpful for us.
There were some difficulties during the build, part of it is the fact that the “Flagmania” idea contains a lot of games and levels and we wanted to make the mockup as detailed as we can, The biggest difficulty however, was the relatively small resolution of the iphone that made us make some changes to the games (for example, changing the size of board at the memory games to a bit smaller boards) but we believe we handled it pretty well.
a bit about the Mockup:
** at each step on the mockup, you can press the “Show Hotspots” button in the upper right corner in order to view the available interactions on the current page.
- Home Screen:
- this screen will open after login to the app or at every click on the button on the top left corner.
- in this screen we can see the user name and the flag of the user country, log-out option and links to all 5 games.
- Games Screens:
- after selection a game from the list, in 5 out of 5 cases the user will be directed to select the game difficulty or watch the high scores page.
- after selecting the difficulty the user will be directed to the selected game and difficulty.
- when selecting the 5th game – GPS Questioning, the user will first be directed to locating screen where he will be asked to approve his location and from there the user will be directed to select the game difficulty
- High Scores:
- the high-scores screen will display the top 5 users and their scores for each game level
(Memory-Starter, Memory-Advanced etc.).
- the high-scores screen will display the top 5 users and their scores for each game level
Please let us know what you think,
Shiran and Na’ama.
Here is our first presentation of the “flag”-idea.
You will find the slides of this presentation here: 1st Presentation
Please give us feedback, so we can develop our idea…
–> The provisional “User reqiurements” are directly under this blog-post. So feel free to give us feedback for this, too.
Vivien and I had the ideas of a mobile learning app for country flags. We made some examples, how such an app could look like. Our idea is about learning the national flags. First we want to concentrate on Europe because the workload for this purpose will be high enough. May be we can’t realize all of our ideas but may be one or two games and the leftover is just visualized. There will be lot of work to concretize the app and your ideas, suggestions and representations are very welcome! Feel free to comment!
Now, here is our idea!
Target Group
The target group of our application is both men and women and between
10 and 99 years old. Maybe they just had the european continent and
whose national flags in class or studies and want a deeper enquiry in the
topic (vexillology) or just want to improve their general knowledge about the
different european national flags. It is imaginable to use the app for school
or studies as a exercise in class.
The main target group is located on the european continent, but there can
be also users on other continents all over the world, which are very interessted
in travelling to europe. The users have fun playing games especially
with other players in a community or in real life.
Startscreen
We will start with an startscreen, where you can choose the different games and your personal learning status. The aim is to collect points. At a certain score the user will reach a higher level. For every right answer it will give (1, 2 or 3 points according to the difficulty) With increase of the level the requirements to the user will get more difficult, so the learning effect becomes bigger. The user has to know more.
For example:
| Level | Level-Name |
| 1 | Starter |
| 2 | Advanced Learner |
| 3 | Specialist |
Interface Colourstation
In this game the user has to ink the flag in the correct colours. The name of the country is given.
Steps of difficulty:
1: Name of the country, the outlines of the national flag and the right colours/symbols are given
2: Name of the country and outlines/symbols of the national flag are given
3: Name of the country is given but no outlines or symbols
Europe Map
The user has to pull the right flag to the right capital point of the country. The point of the capital is always shown.
Steps of difficulty:
1: Border of the country and capital are shown in the map
2: Only the borders of the countries are shown in the map
3: There is shown an empty map
Interface Memory
This is a classical memory game, the user has to lay open two equal country cards.
1: Lay open two equal cards and choose the correct country out of a list (5×5 matrix)
2: Lay open two equal cards and choose the correct country out of a list (10×10 matrix)
3: Lay open two equal cards and type the correct country in the free area (10×10 matrix)
Interface Texturize
This game is based on a word puzzle. There are given a field with a lot of letters. But only a few letters are adding to a country. The user has to mark the countries, if it is right the background of the letters becomes green otherwise it becomes red and disappears after a few seconds.
Before mark the country, the corresponding flag has to be chosen.
1: Flag and name are given
2: only flag is given
3: only flag is given, after marking right a popup-window opens and asks for the capital of the country
Therewith the appeal is higher, every user can post its status on facebook / twitter/ … via a button
The whole user requirements are in our wiki, or should they posted here, too?
Some thoughts on the pros and cons of the basic approaches to develop apps for mobile devices. Feel free to give some feedback.
Web App / Mobile Website (jQuery Mobile, Sencha Touch, Kendo UI, …)
- Runs in the phone’s browser (HTML5, CSS, Javascript and/or local storage for the data)
- Uses the same codbase to support all devices and os (depends on the chosen framework)
- Updates installed in real time
- Found through google web search and accessible by desktop browsers
- User has to wait until the app is loaded (slow/no connection can ruin the experience for the user)
- No full integration of all phone features (accelerometer, push notification, camera, compass, etc.)
- Extensive use of javascript effects and Ajax may have bad effects on the performance and the CPU and battery usage.
Native App (Objective-C, .Net/C#, Java)
- Using native UI-Components and OS-Api (best user experience)
- Fully utilize all phone features (accelerometer, geolocation, push notification, camera, compass, etc.)
- Because the app is downloaded on the device it can be accessed at any time
- Good for high performance applications (e.g. games)
- Requires implementation specific to handset OS (using local database and filesystem)
- Must be downloaded and installed from the Apple iTunes Store, the Android Market and other similar services
- The consumer has to upgrade to get new versions
- IPhone native apps must be approved by Apple
Hybrid App (Phonegap, Rhomobile, Titanium)
- Using Phonegap every Web App can be wrapped into a native app packed for appstore distribution, without the need of lower-level languages such as Objective-C
- Natively target all smartphones with a single codebase
- Access to the device API (http://phonegap.com/about/features)
- All layout rendering is done via the webview instead of the platform’s native UI-Framework, so the performance issues remain the same.
hey guys,
here are our first ideas for our mobile learning application.
check it out: http://fsln12group3.pbworks.com/w/page/52728592/First%20ideas
please feel free to add some other ideas or tell us which is your favorite one.
greetings form berlin
fsln12 group 3 
