Making menus with Html-CSS

Continuing the basics of HTML and CSS, lets go further to see how CSS really changes the way of rendering the basic HTML structure. We will be creating some horizontal menus with CSS. The basic HTML structure needed is nothing but an un-ordered list.

  • Page One
  • Page Two
  • Page Three

Well, since these items are going to link to some other pages or other places, we must add some links to them. After all, what is a menu item without a path or link to it! So the final structure will be as below. Note that we have put all the items inside a div with id as “nav-Menu”.


In a real scenario the “href” value would be a real URL, either relative or absolute. But that is part of the content, let us concentrate on building the menus. So all in all the HTML part is over! Thats it! Yes, thats all to it. One simple un-ordered list with links in the list items.
Lets move on to design it with CSS, so that it looks as a horizontal menu items instead of vertical lists. First things first, lets get rid of the default styling of the list items, the CSS would be as below

#nav-Menu ul
{
	list-style: none;
}

Next is to push the list items so as to they come on one line. The CSS for these would be as below

#nav-Menu li
{
	float: left;
}
#nav-Menu li a
{
	float:left;
	display: block;
	width: 9em;
}
#nav-Menu
{
	width: 30em;
}

Thats all to it. One thing to remember here is everything now is a just fine for the menus. But there would be the contents after these menu items and they will be placed after the last menu rather than below the menu items. The fix is to add a style to the next elements with

#main-content
{
	clear: both;
}

Now its the time to add some more visually appealing style to the menu items we just created. These styles are basically margins, borders and color, so the final CSS for the menus look as below.

#nav-Menu ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav-Menu li
{
	float: left;
	margin: 0 0.15em;
}

#nav-Menu li a
{
	float:left;
	display: block;
	width: 9em;
	height: 2em;
	line-height: 2em;
	border: 0.1em solid #DCDCE9;
	
	text-decoration: none;
	text-align: center;
	
	color: #0D2474;
}

#nav-Menu
{
	width: 30em;
}

Hurray, we have just created a horizontal menu bar with menu items from a simple HTML un-ordered list.

Removing the tracking of files, already tracked by Git

If you work on Git then you must be knowing once we fork(or initialise a repository) a repository, all the files inside that folder get tracked automatically by Git. Well, thats not a problem if we really want all of them to be tracked all the time. But the problem starts when there are some files we need not track. And the worse happens when all of the files are being tracked and now we decide to remove some files from being tracked. The handy command is

$ git rm --cached readme.txt

And for folders

$ git rm --cached docs/

There is an option to set a rule for Git to ignore all the files, one need Git to ignore from tracking. This rule is set in a file named .gitignore. Remember there is a dot (.) before gitignore word name. All those files which need to be ignored must be mentioned in this .gitignore file. The tricky part is .gitignore will not remove files from tracking by Git if those files are already being tracked by Git. In those case the above “git rm –cached” trick will help.
The way I do it regularly is add the .gitignore file in the beginning inside the folder I am going to initialise Git repository. That only works if I know which files I need to ignore in the beginning only.
There is a set of .gitignore templates for different languages at Github, That is a great help in the beginning of configuring the .gitignore for different languages.

Git Svn

While the dialogue can go on as to what to use for version control system, central or distributed, the truth is the whole developer community is inclined towards Git.

If you are a Git user, chances are you come across teams, who still uses Svn. Never to worry though, since Git has native support for Svn. So basically, while all of the team will be using Svn, you can still use Git and work on the same repository as the team, with the added power of Git.

My often used commands to work with Svn through Git are below,

git svn init https://svn.repo.org/dev/trunk/
git svn rebase (or git svn fetch)
git svn dcommit

Basically, once you have your repository locally, everything else is plain Git.

git branch myLocalDev
git checkout myLocalDev
git add .
git commit -m 'my comment'
git checkout master
git merge myLocalDev
git svn dcommit

Below is a description taken from here, which makes it clear as to what to do when Svn is updated and you need to update the local repository before pushing your update to the central repository.

Solve git-svn rebase problems

Put aside your changes using the command :

 git-stash 

Update your working copy using :

git svn rebase 

Take back your changes typing :

git-stash apply 

Clear “the stash” typing :

git-stash clear 

Hope that helps someone out there.

Posted from WordPress for Android through my “HTC Wildfire”.

Lua : some basics

This is an extension of my last post about Lua. If you have not read that yet, I strongly suggest start from there as a beginner of Lua. On the other hand, if you know the basics of Lua, this post is exactly for you.
Hope you enjoy Lua as I am excited about it. Lets get started.
Commenting in Lua is done by “–” for single line and with “–[[ ]]” for multiline.

-- single line comment
--[[
Multiline comment is
Like this.
]]
print("comments are done, get back to work")

Continue reading

Lua : getting started

At very basic Lua syntax is very flexible. Lua can interpret the line ending!! I am serious. For example the code below

local a=6 local b=5 print (a+b)

is exactly same as the code below

local a=6 
local b=5 
print (a+b)

That means we can go ahead writing like the code below too.

local 
a=6 local b
=5 print 
(a+b)

But then comes readability. Its generally better to write code, which we, ourselves can read later too !! So generally one statement per line is a convention.
Now for the declaration of variables, by default any variable declaration is a global variable, unless we define it as a local variable with the ‘local’ keyword as follows.

local a=1
local b='string'

If we remove ‘local’ keyword, the variables are global.
Any variable declaration can contain any kind of values, i mean its not mandatory for a variable to store one kind of values, Lua interpreter can take care of that.
For people who are used to semicolons at the end of the statement, can write that way too and Lua interpreter can take care of that too.

local a=6;
local b=5;
print (a+b);

Writing a for loop in Lua is as below

for i=0,10 do
print (i)
end

Writing a conditional statement is as below

if(a>b) then
print ('a>b')
end

Similarly the if-else would be as below

if(a>b) then
print ('a>b')
end if(a

Finally the way we load different .lua files is through 'require' as follows

require "newFile.lua"

Finally there is a way to start experimenting with Lua without even installing it. This is through the Web Lua project.

With that I think we can get started with this small but powerful language, Lua.

One size fits all, does not fit.

I heard this one before, but then kind of ignored. Why?!! For I, as a web and desktop designer and developer when started iphone development it seemed, “ok, fine, lets do the design and go for development” . Iphone and any iOS in that case have a clear guideline of user interactions. So no worries, if I am sticking to those guidelines, I am sure the product will have a nice user experience. Keeping that in mind, I moved on. And then it all went well. Until I started developing for other devices and other OS such as Android.
Developing games on the other hand is not about those default navigations, one has to think of it from the gaming UI perspective. So what I think is while game design can be one design for multiple devices but the size factor does the trick. If a game is designed for 2 different mobile phones (may be different make too of same OS), it does not matter which OS they are running in, as long as the size of the device screen is kind of same, we are good to go. But then if at all there is a difference in the ratio of height and width of a device screen, the design needs some tweak to give the user a same or similar user experience.
Now, if we talk about application design for mobile, then its all together different approach. Apart from the size, one has to take into account, the platform that is running the application. This surprised me, when I was trying to port an application from iphone to android. Well, we can just port it and it will work the same way it works on iphone, but then there are different physical buttons present in Android devices (even Windows mobile phones and other OS phones), which are not present in iOS devices. The point is either we are not utilising the UI of the device or making a bad use case of the UI of the device and in turn our application, if we port one application as is to another device.
So clearly, each device will have a different design, the code base may be same, but design must be different to be useful and give the same user experience through out devices.

Making random numbers in ObjectiveC, the quick and dirty way.

This is another part of my iphone development experience, where I really feel the pain over and again. So putting up my quick way to do get a random number. There are a lot of methods regarding the random number generation in objectiveC and there are even third party attempts to get the best random number possible.
The three most obvious functions are rand(),random() and arc4random(). While a lot can be heard around of not getting a random number by the first two functions, the last options is better. At least I get decent random numbers with it.
Now to get a random number between 2 points, the code would be

//random number between 0 and 5 not 5, till 4
int i=arc4random()%5;
//random number between 10 and 15 not 15, till 14
int j=10 + arc4random()%5;

Hope that makes my next random number creation search leads me to look at this post.
Happy coding :)

Dealing with Touch Events, the Sparrow way.

This is specifically caught me, when I am coming from other object oriented technology. May be because of those environments are all single touch based. And I never have worked in multi-touch based application.
While working in Sparrow-framework, there is a nice event called “SP_EVENT_TYPE_TOUCH” . This is basically used if we want to use the touch based interaction in our game. Once we add an handler to it, the general expectation is it will just fire up once per touch/tap. But actually it will fire up 2 times as we have 2 different events, “touchesBegan” and “touchesEnded” for each touch interaction in the main cocoa/objectiveC framework. And the good news is Sparrow-framework does a nice job of encapsulating the internals of all those two events and gives us one event to deal with, that is “SP_EVENT_TYPE_TOUCH”.
Well, but the catch is getting confused with the event handler code. Lets dive in here.

[self addEventListener:@selector(onUserTouch:) 
	atObject:self forType:SP_EVENT_TYPE_TOUCH];

Now the handler code will look as below

- (void)onUserTouch:(SPTouchEvent*)event
{
        NSLog(@"onUserTouch");
}

When run, this code will generate log messages two times for a single touch! Thats for the reason we discussed earlier. Well, the fix is on the handler. We have to deal the events inside if-else where we will check, whether its single or multi touch as below.

- (void)onUserTouch:(SPTouchEvent*)event
{
        NSLog(@"onUserTouch");
        NSArray *touches = [[event touchesWithTarget:self 
                       andPhase:SPTouchPhaseBegan] allObjects];
	if (touches.count==1) {
		NSLog(@"1 fingure touch ");
               //Do the custom code here for single touch events
	}else if (touches.count==2) {
		NSLog(@"2 fingure touch ");
	}
}

For only single touch the syntax is even smaller

- (void)onUserTouch:(SPTouchEvent*)event
 {
     SPTouch *touch = [[event touchesWithTarget:self 
                 andPhase:SPTouchPhaseBegan] anyObject];
     if (touch)
     {
         SPPoint *touchPosition = [touch locationInSpace:self];
         NSLog(@"Touched position (%f, %f)", 
              touchPosition.x, touchPosition.y);
     }
 }

The only difference being, while handling single touches we can directly use “anyObject” as the last parameter and that will give us a single event and for multi-touch environments we have to use “allObjects” as the last parameter. But all this will happen inside the event handler, which will by default fire up twice.
One has to get the “touch” or “touches” inside the event handler and then process the code according to it. Directly the handler will fire up twice and that must not confuse as to, whats happening around!

Happy coding :)