Tag Archives: web

Making menus with Html-CSS

Posted on by

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.

Mobile device emulator as Chrome Browser extension

Posted on by

If you are a mobile application developer, then it would have been always a quest to find the devices to test the applications. Apart from that, one need particular environments to develop the application too. Some device applications can be developed and tested in particular Operating system. Then there are HTML5 and JS frameworks and tool kits to develop mobile applications. These frameworks and toolkits allow one to develop applications as web applications. While this option, opens up the opportunity to develop mobile applications in any environment, there is still a lot of work to do, when it comes to test these applications in various mobile devices.
Ripple is an extension to Chrome browser. I think this can not be more easier than this. Once installed, the interface is quite straight forward. Well the process goes like this. If you are in a webpage (any webpage), just right click and say

Emulator > Enable

That will render the webpage in a mobile device, there are choices to configure the devices also. That means, any web application can be tested with a number of device emulators, right in the browser itself. There are options for Device, Platform, Accelerometer along with a lot more.
I think this can not get easier than this.

Lua : getting started

Posted on by

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.

Finally updated the internals of this blog

Posted on by

well, its been a long silence. But better late than never. I have finally updated the base wordpress engine and the plugins to its current available state. I am not saying I will post this update message every time I will update, but this one needs a mention as I have taken log time ignoring this. Partly for ignoring and partly too enthusiastic. But then, i think I am better now to get up and keep going.
I least I am hoping so and wish me luck for the same.

Thank you all for stopping by.

Getting into web design action

Posted on by

Once we are familiar with the key concepts of the web, browser and how it works, now its time to see how to get started with it. If you have not yet gone through them, here are the links,
1. introduction
2. getting used to the terms
I hope by now you have gone through the above links. This is not mandatory, but then going through them will bring you to the same page with me. Else it will be a little difficult for any one to understand what is being referred in the tutorial here.
Well, lets get into action. By now, you must be knowing to start with a web-page we at least need 3 files (Not mandatory but good way to segregate different functionality in different files, refer to the “getting used to the terms” reference for more on this ). So the 3 files are, one HTML file, one Javascript file and one CSS file. We will start to put the basic code for these.
The HTML file is stored with an extension of “.html”, CSS files are stored as “.css” and javascript files are stored as “.js” files. Lets write our first html file.
The very basic HTML page code will look something like

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Continue reading →