Aciano Technologies Blog

A Place With Numerous Solutions!

Fixed Navbar (Menu bar) with Bootstrap 3 | Post - 2

Today, I’m going to tell you how to fix the Navbar (Menu bar) just like we see on our Facebook. First of all you’ll need to add some bootstrap 3 CSS and script files in your document to run these features.

Below are some of the scripts that you need to add on above the </head> tag OR you can download bootstrap files from their website.

 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> 

 

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

 

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

 

Now you need to create the <nav> tag which is now available in HTML5 and put it under the <body> tag.

The <nav> tag contains two things, first one is ‘class’ and second one is ‘role’.

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">

</nav>

 

The above code contains class in which you can see "navbar-fixed-top" basically this code is used to fix the navbar.

Now let me tell you the complete code.

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">

    <div class="navbar-header">

        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

        </button>

        <a href="#" class="navbar-brand">Brand</a>

    </div>

    <div id="navbarCollapse" class="collapse navbar-collapse">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#">Profile</a></li>

            <li><a href="#">Messages</a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">

            <li><a href="#">Login</a></li>

        </ul>

    </div>

</nav>

 

Follow the above code, paste it in your <body> tag, run the code and enjoy!

 

Thank You.

PhoneGap (Introduction to PhoneGap | Post-1)

Hi Guys,

Here I am exploring you a wonderful tool PhoneGap, every mobile developer want to see their application in every mobile platform like iOS, Anroid, BlackBerry, Symbian etc. but we are strict on platform languages some know C-objective, some developers know java for Anroid, so now you don’t get panic because PhoneGap providing you multi-plat form solutions.

Using PhoneGap, Developers don’t have to worry about iOS, Android or C# languages. Developers can achieve this by writing the user interface portion of their application with Web technologies HTML, CSS and JavaScript. 
If you are convenient to work on web technologies like HTML, CSS and Javascript then you can develop multi-plat form mobiles applications easily.

PhoneGap builds such applications those can run on variety of mobile devices, as well as we can upload those apps on multiple stores like iOS, Android, Windows Phone and etc.

PhoneGap supports verity of Platform given below:

·         iOS

·         Android

·         Windows 8

·         Windows Phone 7 and 8

·         BlackBerry 5.x+

·         WebOS

·         Symbian

·         Tizen

 

To build an app using GitHub, Dreamweaver, Edge Code, or even a simple ZIP file, you just need to configure splash screens, icons and other app features like enabling access to mobile camera, locating sensor data and etc.

 To deploy and install in your mobile devices, you just need to configure config.xml file then set parameters and permissions fort deploying on iOS and Android.

 

 

Introduction to SEO / Search Engine Optimization

Abbreviated as SEO, a Search Engine Optimization is not only an event but a technical process which assist any business or organization to expose their features to the entire world. As the online promotion system is influencing over the ages due to which SEO has become the most widespread and effective procedure. SEO opens up an option of greater visibility and increased web traffic and more sales in the long run. It makes the website a leading online shop for the visitors.  The more frequently a site appears in the search results, the more people it’ll receive by the search engine's handlers.

How is SEO useful?

Well, SEO involves the growth, customization and retooling of your website and proceed it to the top rankings on search engines. It is a blend of different techniques and tools. If you want to get your website in front of as many people as possible, it’s not a big deal; you can have that by performing SEO techniques for your website.

No matter! How enormous? Of what nature? And how old is your organization? Matter is how popular is your piece on INTERNET WORLD today? SEO ameliorates your website traffic by listing it to the summit to help you generate leads and keep your organization from being a world leader.

Thank you.

Bootstrap 3 (Introduction to Responsiveness | Post-1)

Today every organization desire to build their website in such a way that would be flexible and display the ideal view at any device such as desktop computers, tablets, mobile devices and etc. They obviously wish to display their web application perfectly not only on every browser but also on different types of screen resolutions. In IT world we call it ‘Responsive’ where every component fits itself to the space it has.

 

If you are planning to build responsive web application you need to just using CSS which is a complicated task but good thing is that we have Twitter Bootstrap in different versions by using of it you can easily customize your page according to your requirements. It provides you good responsive behavior for the application layout; you can see the script below.

 

<link rel="stylesheet" href="css/bootstrap.css">

<script src="js/bootstrap.min.js" type="text/javascript"></script>

 

First of all you need to download the bootstrap from their website and then use the above script to run the bootstrap style in any of your webpage; you can find the URL below.

 

http://getbootstrap.com/getting-started/#download

 

Basically bootstrap 3 supports all types of browser, except the IE7, IE8 & IE9 due to old versions of Internet Explorer, they just don’t support certain CSS3 properties as they are now too aged to support new technology.

The New Grid system in Bootstrap3 uses percentage for width not the pixels. It provides 4 different types of classes to manage the grid system, below you can see those classes.

1.       For Phones (less than 768px) we use .col-xs

2.       For Tablets (768px and up) we use .col-sm

3.       For Medium Desktop (992px and up) we use .col-md

4.       For Large size (1200px and up) we use .col-lg

 

 Please have a look on below screenshots.

 

 

 

 

 

Thank you.