Balance is a Logical game inspired by a famous variation of weighing coin mathematical problems.
In this game you have 12 balls, 11 of them have the same weight and 1 of them has a different weight, it could be heavier or lighter. You have a two plate’s scale and your goal is to find which ball has a different weight, and if it is heavier or lighter than the others. You have to find this out with just three weightings to get the best score.
I released the source code of the game here https://github.com/fsvieira/balance. Its a simple small game so I think anyone looking for a ionic/angular example to study may find the code usefully (even if the code is not great, and all messy lol).
If you have read the previews (balls12) game algorithm you will find this one much more easy, because we don’t need to keep track of the individual balls, just total for each group like: Equal, Heavier, Lighter and Unknown.
Maybe I will explain the algorithm on some post, if anyone is interested please post it on the comments.
On the past days I been playing with different tools/frameworks to make html5 applications, actually I want to code once deploy everywhere kind of thing.
And I discover this awesome tools:
The Ionic Framework let you make applications in html5 that you can deploy on the web and mobile.
The ionic framework is made on top of other existing technologies like cordova and angular.js, hammer.js and it provides a lot additional features, its easy
to make a clean UI that will look good on mobile and web.
Obviously if you use specific mobile features they will not work on the web, but its easy to make fall-back code to deal with this limitations.
I made two applications, available on Android App Store and online, you see them here.
The node-webkit lets you make standalone application to run on desktop (linux, windows, mac OS),
its also easy to deploy application on the web (but with no access to node modules).
The node-webkit is node and webkit running in the same thread, this is great because you can use any node module seamless on your html5 application
letting you access for example local file system.
I started an application with node webkit, and it easy really easy to work with. I think my next experiment would be using ionic with node-webkit and get an application working on the web, mobile and desktop.
I just wanted to mention the Grunt Tool because it is really handy that can be used to automate many development processes and already have some nice ready to use scripts: For example there is a node-webkit script to automate the process of packaging for multiple platforms.
I started to learn AngularJS, the main motivation to learn AngularJS is to use it on my day job, where I have to build a WebGIS Application. But AngularJS seems so cool that I am thinking in use it for other projects.
Since I am still learning I decided to start with a really basic website, so I choose to updated my 12 Balls game website that is coded in php. I also took the opportunity to update some content :).
The website is static and is only using php for routing pages, so converting the site to use AngularJS templates was petty easy, I just had to make a js file with my Application and define the routes:
Now on my index.html page I added the following code:
... Import JS and Angular dependencies ...
The routes that we defined for ball12App will be rendered on the ng-view, Angular knows that he has to use ball12App because we defined the ng-view inside the
ng-app=”balls12App”, so I guess this would be the scope for ng-view?
So this is how it works on my website, when I go to the link balls12/, the route / is not defined in js file so it will use the otherwise rule, witch is
It’s a good book for anyone interested to start learning HTML5 and even better for people with Flash Development experience.
As a experienced HTML5 developer I enjoyed most the part of CSS media queries and transformations, I also like that the book is very practical and also suggests real world solutions: software and libs to help convert old flash software to html5 or develop in a Flash manner.
From my experiments of desktop/web design in my website Fsvieira Desktop, I concluded a few things about Iframes:
To get on context, my website goal is to experiment on web and desktop design concepts heavily based on Ubuntu unity desktop design.
Right now most of my applications are more like websites, this is because I am unifying my old websites into this project. But that doesn’t really matter because web applications are still websites, except that the user interaction concept are different.
The title of this post is Iframes are bad, so why did I use iframes in my “applications”?:
It is easy to setup other websites as an application using iframes, I just had to load the url in the iframe, so my existing websites are easily integrated,
It keeps the “host” environment clean: I don’t have to be concerned by js/html conflicts, like clashing name-space, id’s or css…
I had participated in other projects that are not in my server (And they are not supposed to be), so the only way to get them integrated in my website is with an iframe.
So why are iframes bad:
The “host” website can’t communicate with an iframe (unless using some kind of a hack),
Iframes work as a independent browser window or tab/separator,
Bad navigation: link or address are redirected to a new window/tab or to the iframe itself and the url will not show in the browser meaning that there is no easy way to share a link to the iframe content,
To properly show Iframe content all needed resources must be loaded even if the “host” website have already loaded the same resources,
Search engines may land on a page that is supposed to be embedded on the “host” website with an iframe, making this page out of context and with no back links to the main website.
Like someone else said Iframes are just another html tool, that can be used or abused.
Sometimes iframes are used as hack to get a third party service information or website.
The benefits of using an iframe is that everything loaded in the iframe will not interfere with the “host” website, making it very good to embed third party widgets, services or whatever.
So a good use case of iframe would be embed a youtube video or something like that.
When Iframes are abused the benefits became the problem.
A bad use case of a iframe is when its used to structure a website, because its hard to control the loaded content and website navigation and resources are not used properly everything must be reloaded on an iframe so it can show the content properly even if some resources are available in the already loaded “host” website.
Conclusion To Fsiviera Desktop Project
One of the main problems with Fsvieira Desktop is that it doesn’t have any content since everything is loaded with iframes, so search landing pages will probably be the so called “applications” that are only independent websites with no links to the “desktop site”.
Unifying all this websites in the “desktop site” is not a easy task and will take some time and work. As a solution I am making a php/js main menu with back-links to the “desktop site” that integrate well in the iframe. With this solution not only a user can land in a “stand alone” application but also will be presented with other options.
I did not bother to see the Browser Gamepad API specs I just grab the first code on the Internet that works for me and modified it to my needs.
I would like to put here the original code url but I lost it :(. The code was made by Marcin Wichary from google and is license under Apache license.
So I am doing a simple application that is on development phase (BETA) and can be found in my new website Fsvieira Desktop that I am working on. To access the app just click on the gamepad icon. I have to develop some solution so I can pass a direct url to my applications 😀 instead of saying please click on the icon X.
The only browser that I was able to put the application working was with latest Chrome, I tested with Firefox and Chromium and it doesn’t work. Gamepad API is still in discussion so I guess its not very well supported.
If anyone tests this please tell me how it goes. Just comment on this post or if you like send me a email.