How to create desktop link for your Program in Ubuntu

If you are new to Ubuntu, You may have to face, that you have to use terminal to browse and run .sh files. When I was new to Ubuntu I had to face this. I’ve to type path of Intellij IDEA’s idea.sh file to run the IDE. Using terminal is nice but shortcut would be nice right?
Let’s Figure how to do it. Here I configure Intellij IDEA 14 (in 15 they ask if you want desktop entries or not.)

First we have to create the desktop link file with .desktop extension. You can use arbitrary valied name but after that .desktop extension should be there. Type below command in terminal.

sudo gedit /usr/share/applications/Intellij.desktop

Below code you must Enter to the file and save it.

[Desktop Entry]
Name=Intellij 14
Type=Application
Exec=/home/dreamer/idea-IU-141.3056.4/bin/idea.sh
Terminal=false
Icon=/home/dreamer/idea-IU-141.3056.4/bin/idea.png
Comment=Integrated Development Environment
NoDisplay=false
Categories=Development;IDE;
Name[en]=Intellij

As you can Understand you Must change “Name” fields as your Application and “Exec” field with respective executable file (Normally in Linux software executable resides in bin folder as .sh file). If you want to give Icon you can use “Icon” field. Now you can type the name of software in Dash run it. If you use it frequently you can use very easy setup for it. Right click on running application’s icon on sidebar select Lock to Launcher. Now you can see it in side bar.

Advertisements

Design A Responsive Form with Bootstrap in minutes

How much you waste time on Configuring UI on web page. Was it not easy to handle a responsive lovely framework like bootstrap? Well Today I’m going to ease your headache. Today we are going to design form by drag and dropping :D.

Lets start the magic. We do this with http://bootsnipp.com/ This was created By Adam Moore (@minikomi) to help take the stress out of writing all that markup to get bootstrap forms together. First you should create an account in the site. After creating the account you can see Menu top of the site. Select Tools there. Then you can see below image

tools

As you can see there are plenty of GUI designing tools such as Form Builder, Button Builder, Favicon Generator etc. If you want add suitable default icon to your bootstrap elements you can search it in icon search. And many more tools 😀 For the moment we just hand on in Form Builder and Button Builder. Which are most probably any web developer need to know to create.

Click of Form Builder. Now you can see below image.

Formbuild

 

Now you can see every element which you need to create form is divided as the category. If you have basic html knowledge you can go on creating your own forms without me. for the moment lets just Explain what go on here.

Every element in html has there own attributes. So we need to change them as our requirements. Lets take simple input creation. You just have to Drag and Drop the text input to left Your Form area under the Form Name.  Then Click on it.

inputattr

you can see all the element you want to configure is provided. Also the helps 😀
You can change the Attribute you want and press save. Then you can see how the form changes.

Lets See how to add this form in to your web page. Click on View HTML. Here you can see the HTML code of the form. Copy it and paste it on your html page. Make sure you have included the bootstrap to the form. (As mentioned in here http://getbootstrap.com/getting-started/#download ). If everything goes right You can see you brand new responsive form on your web browser.

Lets Check Button Generator. Another wanted tool for creating fancy button with meaningful look.

Tools -> Button Generator

Now you can see a below window

Buuton

You can click the buttons in here and observe how the Output button changes according to it (You can find below of the page output button.)  as before you can copy and paste the code under the output.

Here you can see output button is a link (<a></a> anchors). If you don’t like it or need inputs (<input>) in handy way you can find another suitable button generators like http://www.plugolabs.com/twitter-bootstrap-button-generator/ like that one. Here you can create any type of button.

Some Useful suggestions.

If you want to add Calendar to your web site you can use Bootstrap Datepicker.

https://eternicode.github.io/bootstrap-datepicker/

Also you may find it nice have Bootstrap  Menu Builders 😀 below is a one. You can find many on Internet.

http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/

Below is nice bootstrap table generator

http://tablestrap.com/#tables

Well As you can see, the best idea is to Google whatever-you-need builder 😀
Happy developing fellas. Sayonara 🙂

First day in Bootstrap

If you haven’t used bootstrap, I think my post will help you to get first hard parts (Of course easy things when you are familiar 🙂 ) done quickly. Lets Start the basic Such as what is bootstrap.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. It easy to use and has lots of wonderful features. So lets check how we can  add bootstrap to our web site creations.

Adding bootstrap framework is easy. You just have to link correct css, js etc to you web page. There is two ways for that.

  • Using CDN (Content Delivery Network)
  • Linking bootstrap files

Already afraid of word CDN 😀 well you have nothing to fear. Lets see how to add boostrap with CDN. Before that you need to generate a sample bootstrap button using a Button generator ( button Generator 😀 Already in love with bootstrap , yeah I know right 😀 )  One thing you have to care about not using bootstrap 2. Because I used here Bootstrap 3. It’s have no effect on the thing you’ve done up to now. But when you search for button generators you may face bootstrap 2 button generators. Just a reminder.

Lets back to business. I’ve created My button and now create a empty html file.  Got to below link and copy the link under the <!-- Latest compiled and minified CSS -->

Now you have to check the bootstrap is working. Use below html code for you html file

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;title&gt;&lt;/title&gt;

&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot; integrity=&quot;sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7&quot; crossorigin=&quot;anonymous&quot;&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;a href=&quot;#&quot; class=&quot;btn btn-success btn-lg&quot;&gt;&lt;i class=&quot;icon-edit icon-white&quot;&gt;&lt;/i&gt; Bootstrap Button Generator&lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;

If you did it correctly your html page look like below. (Since bootstrap CDN link through the internet, You must have to Internet to get below out put. If one day you saw you hard working using bootstrap is not working please don’t die in heart attack just check the internet connection 😉 )

buttonCDN

There are few things you want to know as a beginner.

  • CDN link may change so adding my code exactly may not work in future, so it’s recommend to go to bootstrap page and use current CDN (you have the link now)
  • It’s easy to create lovely buttons using Bootstrap button Generators but be careful about version conflicts that could occur.
  • To add the button you just have to copy and paste auto generated html code from the generator’s site.  Not only links as i used here but also <input> also can be generate just check the page correctly

If you don’t like the idea of using CDN due to internet problem or else, usage of downloaded framework is for you just go to previous link or click below to download.

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

Then download file under

Bootstrap

Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.

open it and extract folders in side the dist folder to where you are going to build the bootstrap html page. If you are very very beginner so you may not get what I’m saying. Look the below image

sitewithfiles

second.html is the html file that I’m going to add bootstrap framework using local framework. (That mean you have to upload these folders too, to the server when you are going to host your bootstrap web site. ) Other folders ( css, fonts, js) were in the compressed file you downloaded. Now you are good to go.

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;title&gt;&lt;/title&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; &gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.css&quot; &gt;

&lt;/head&gt;
&lt;body&gt;

&lt;a href=&quot;#&quot; class=&quot;btn btn-success btn-lg&quot;&gt;&lt;i class=&quot;icon-edit icon-white&quot;&gt;&lt;/i&gt; Bootstrap Button Generator&lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;

Now you can see same Button as before when you open the html page in browser.  As you can see in the html code it just linking the css files of the bootstrap css folder.

General instructions for the beginner

Understanding the Bootstrap concepts like grid system bit may difficult in the beginning but you have will. So it better to practice some tutorials. check below links

If you got the concepts correct. You always don’t need to build bootstrap web sites from scratch. Use template themes. Check belows.

Well there are thousands of themes you can search on the Internet.

I used to have a bootstrap ready html page as template (An empty html page with common features added such as background image) for my bootstrap work. So when I’m going to create bootstrap page I’ll copy from the template page and used it. (This is not a theme I talking about to keep the consistency of the whole web page I do this practice so It looks like I used a theme all over my web site. )