Category Archives: html5

Balance a web and mobile math game

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

Hi,

Balance is the next version of my ball12 game with a new interface.

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.

Source Code

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).

The Algorithm

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.

Happy coding/gaming :)

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

Html5: Mobile, web, desktop!!

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

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:

Ionic Framework

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.

Node-Webkit

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.

Grunt: The JavaScript Task Runner

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.

Well that’s it :D, happy coding…

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

12 Balls WebSite with mathML and AngularJS

What do you think of this post?
  • Awesome (100.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

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:

var balls12App = angular.module('balls12App', [
	'ngRoute'
]);

balls12App.config(['$routeProvider',
	function($routeProvider) {
	$routeProvider.
		when('/play', {
			templateUrl: 'partials/play.html'
		}).
		when('/about', {
			templateUrl: 'partials/about.html'
		}).
		when('/caanoo', {
			templateUrl: 'partials/caanoo.html'
		}).
		when('/algorithm', {
			templateUrl: 'partials/algorithm.html'
		}).
		when('/todo', {
			templateUrl: 'partials/todo.html'
		}).
		when('/downloads', {
			templateUrl: 'partials/downloads.html'
		}).
		otherwise({
			redirectTo: '/play'
		});
}]);

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

otherwise({
   redirectTo: '/play'
});

And the link is rewritten as http://fsvieira.com/balls12/#/play, now the /play route is defined in the js file like this:

when('/play', {
    templateUrl: 'partials/play.html'
}).

So the ng-view content is replaced by the template content ‘partials/play.html’ (in this case just a static page 😀 ).

And thats it. AngularJS can do much much more but I wanted to start with a really simple exercise.

Also I think its cool that Angular uses anchors to do this routing stuff.

Note: You can download the full website here: balls12/#/downloads.

MathML

I almost forget about this, I written about the 12 balls algorithm using MathML, you can see it here.

And right now I know one thing: I hate MathML, is hard to write and its ugly, maybe with some css gets better but it is still a pain to write.

So my advice if you are thinking in writing stuff in MathML use a latex to MathML converter, I found this online converter http://www.mathtowebonline.com/ and its pretty good!

Have fun!

What do you think of this post?
  • Awesome (100.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

Space-Combat: Old School Space shooter for the web.

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)



I was bored so I made a 48h game old school space shooter, also I wanted to draw and paint with my markers :D.

So the code is here, the game can be played here and the media is on opengameart levels and opengameart actors or in git repo.

The game is expandable so can be improved with new levels and graphics, maybe I will paint some more…

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

HTML5 for Flash Developers (book review)

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

It’s a good book for anyone interested to start learning HTML5 and even better for people with Flash Development experience.

The fundamental concepts of HTML5, like JavaScript, CSS and HTML are explained in a simple and clear way with good examples.

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.

Available at
and
What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

Iframes Bad for a website!

What do you think of this post?
  • Awesome (43.8%)
  • Interesting (25.0%)
  • Useful (12.5%)
  • Boring (12.5%)
  • Sucks (6.3%)

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”?:

  1. 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,
  2. 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…
  3. 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:

  1. The “host” website can’t communicate with an iframe (unless using some kind of a hack),
  2. Iframes work as a independent browser window or tab/separator,
  3. 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,
  4. To properly show Iframe content all needed resources must be loaded even if the “host” website have already loaded the same resources,
  5. 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.

Conclusion

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.

What do you think of this post?
  • Awesome (43.8%)
  • Interesting (25.0%)
  • Useful (12.5%)
  • Boring (12.5%)
  • Sucks (6.3%)

Fsvieira desktop with applications distinctive links.

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

My website http://fsvieira.com/desktop uses an iframe to display applications, so applications are just simple websites.

The problem with this approach is that I can’t link to applications embedded in the fsvieira desktop and neither other people can easily copy and share the url.

But that is fixed now 😀 using anchor notation in the url and some JavaScript magic. The good thing about anchors is that the browser doesn’t force the page to reload but updates the url.

So now I can say: If anyone is willing to test my gamepad application to test gamepad in the browser you can go here http://fsvieira.com/desktop/#gamepad.

And if you try clicking in other applications it will maintain the active application url updated.

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

Testing Browser Gamepad API

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

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.

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)