BlueGriffon: A New WYSIWYG Editor Which Supports CSS3 And HTML5

BlueGriffon is a new WYSIWYG editor which uses Gecko, the Firefox 4 rendering engine for displaying the web pages. It's cross-platform and runs on Windows, Linux and Mac OSX.

What I like about it is the built-in HTML5 and CSS3 editing features - you can use it to easily apply transforms, transitions, text and box shadows, linear and radial gradients and so on. Further more, BlueGriffon comes with Google Font Directory and FontSquirrel addons so you can easily apply a custom font to your page.

Another interesting feature is the inclusion of SVG Edit - a SVG editor you can use to draw vectorial graphics from within BlueGriffon to embed them into your documents. BlueGriffon will automatically add to your HTML 4 documents the necessary chunk of JavaScript code enabling SVG rendering if you use it.

You can check out all its features @ bluegriffon.org

Install BlueGriffon in Ubuntu

In my test, the latest nightly builds was more stable then the latest release (0.8) so I suggest you use that. Download the latest nightly from HERE.

Even tough there is a .deb file available for download (only for the nightlies), it's better to use the installer because the .deb is only available for 32bit and it creates the executable file in the wrong place. 

Once you've downloaded the installer (its name ends with "-install"), simply right click it, select Properties > Permissions, check the "Allow executing file as program" box and then double click the downloaded file. Once installed, there should be an icon on your desktop which you can use to launch BlueGriffon.

Please note that BlueGriffon is not yet stable so expect to find bugs!

[Thanks to  sourceslist.eu for mentioning BlueGriffon]

The Ubuntu Font Now Available For Any Website Through Google Font Directory

Google announced that the Ubuntu Font Family is now available in the Google Font Directory which makes it very easy to install for any website:

Through the magic of the Google Font API any web designer can now pick Ubuntu from the Google Font Directory and bring the beauty and legibility of the Ubuntu fonts to their websites too.

To use it on your website, head over to Google Font Directory, select the Ubuntu font variant you want to use and copy the code to the "head" section of your blog (above "</head>"). The code looks like this:

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>

You can use the font for all the font on the website or only for some parts of it like the posts tile (like we are using it here, on WebUpd8). To only use it for the post titles, search for "h1" in your CSS code and add this:

font-family: 'Ubuntu', arial, serif; 

Clientside: Gedit Plugin To Format, Minify And Validate CSS / Javascript

Clientside is a Gedit plugin for those who work with CSS and Javascrip which can be used to minify and format/beautify Javascript and CSS. Further more, the plugin also includes jsLint and an option to Gzip the current file.

To install Clientside Gedit Plugin, download it and extract it to the ~/.gnome2/gedit/plugins folder. You'll also have to install NodeJS and PHP - in Ubuntu, simply use the following command to install NodeJS and PHP (php5-cli should be enough):

sudo apt-get install nodejs php5-cli

Once everything is installed, restart Gedit and enable it by going to Edit > Preferences > Plugins - then, you'll find the options to minify / beautify Javascript and CSS under Tools > Clientside. There's one more step: under Clientside, select "Configure plugin" and make sure you enter "nodejs" under "How do I call NodeJS?" and "php" under "How do I call PHP?" or else the plugin will not work.

Clientside Gedit Plugin works on other Linux distributions (obviously), Mac OSX and Windows too, however, the instructions in this post are strictly for Ubuntu. For info on setting it up on a non-Ubuntu system, visit its page @ GitHub.


Also see: Get TextMate Features And Styles In Gedit With GMate

How to make your website mobile friendly

Do you run a website or blog ? If yes, how accessible is it on a mobile device ? Now a days, with more and more people browsing the net straight from their mobile devices like cell phones, it is very important to make your website as accessible to this group of users. Google teaches you how.
Read more »

Linux Help blog gets a fresh new look

Your favorite blog on Linux - "All about Linux" has been overhauled and given a fresh lease of life through a massive redesign. The design is unique to this site as I have built it from scratch. Compare the old design with the new one in the images below and gauge for yourself which one you like better.

Linux is used by Hollywood extensively to create movies.

A few features worth noting of this new design

• Stress has been given to minimalism. There are very few images.This translates to faster loading of the web page. I am a sucker for minimalist web designs with plenty of white space.
• The design is devoid of tables. In fact, the number of tables you will find on this site (design wise) are zilch ... Nada.
• The site uses Google Custom Search which helps a visitor to this blog find what he is looking for very fast. And the search is prominently displayed at the upper right corner of the site.
  
  Try it out, it is really good. You can search through over a 1000 articles on this site.
• Non-English speaking visitors to this site can read the articles in their language of choice through the Google Translate widget displayed on the right hand side.
  
• I have even incorporated some of the best SEO practices into the design. Though it is early to say what effect (positive or negative) these changes will have on the site traffic.
• The "Do you Know?" box - an optional feature, allows me to prominently displays some data and links not related to the parent post.
• All the javascript (or most of it) has been moved to the bottom of the page as recommended by Google's webmaster guidelines.
• The site has a functional footer where some text is actually embedded.
  

The fine tuning is still in progress and will be done on a case by case basis. But the major work has been finished.

Can you share this blogger theme with the rest of us?

Well, I believe a unique design helps a site maintain its identity. Having said this, now that I have understood the process of designing a website, I might create further blogger designs which I promise to provide as a free download. Of course, anybody with some knowledge in CSS and HTML can easily figure out what I have accomplished here.

Please tell me what you like and what you don't about the new design of this site. All your opinions (critical or otherwise) are most welcome.

Free HTML editor - A shootout for the best one

Linux has a plethora of free editors, most of them are also good HTML editors. So the big question is, which one is the best HTML editor of them all? TuxRadar.com is having a nice shootout of seven free HTML editors in Linux. Those in the fray are - Bluefish, Amaya, OpenOffice.org Writer/Web, Quanta Plus, Screem, Kompozer and Composer (Oh yeah there is no mistake, both are different editors).

If you ask me, I mostly use Gedit to edit HTML code and it does a pretty decent job too. But for large projects, it always helps if you have project support and a few other time saving features as well. So which is the best HTML editor ?

The review says Bluefish is the best there is in coding your website if you are developing it in Linux. Bluefish is no Dreamweaver killer. But it provides the best all-round package owing to its excellent reference material and versatility; and it does so at an unbeatable price as well. Now you know which editor to opt for when building your website in Linux.

Introducing LAMP, WAMP and MAMP application stacks from Bitnami

Lets say you are interested in running a website related to a subject close to your heart. In days of yore, it involved getting your hands down and dirty in writing code which will show your content legibly in a web browser. But then a couple of years ago, a new phenomenon gathered momentum - which was the spurt in software which help one to manage ones content online. Not surprisingly most of these software categorize themselves as content management systems (CMS) though many call themselves by other names like blogging systems, Wiki and so on.

What is really spectacular and common about these software is that all of them allow non-tech users to publish their content online without worrying about writing code. Some of the more popular CMSes around are Drupal, Wordpress, Joomla, MediaWiki ... the list is a long one and I could take a whole day to list all of them here.

But ease of use of a CMS to publish your content doesn't mean ease of installing it. That is, most CMSes make use of a web server to serve the files and a database to store the content. While it is simple to set up when you are hosting your website online on a shared or even managed dedicated host provider since most of the work is done for you, when it comes to developing your site (setting up all the software locally on your machine), it fast gets tedious. This is especially true if you are a pure web designer by profession and know little about configuring a web server or a database server.

This is were software stacks gain prominence. Software stacks are installation bundles which contain all the relevant software to get you up and running in what ever you intend to do with it. For example, if you are a Wordpress developer who intend to work in developing a Wordpress theme, then instead of separately downloading, installing and configuring a web server, a database server and likes, you can just download the Wordpress stack, install it using the point-and-click method and then go about testing your theme in the newly installed Wordpress blog on your machine.

Keeping the web developer and tech agnostic people who intend to develop their own website in mind, a group called BitNami are providing software / application stacks as a free download. They have laid out an impressive array of software stacks on their website. For example, you have the Joomla stack, Drupal, Wordpress, Mediawiki, even CMSes targeted at corporate environments which require Java, such as Roller. And each of these stacks are an all inclusive bundle containing all the relevant software. You just need to download, install and then start using the CMS - which removes a major hassle from you.

Bitnami provides these application stacks for multiple platforms such as Windows, Linux and MacOSX - though the Linux and Mac OSX versions of their stacks for some applications are yet to be ready.

I decided to download their Drupal stack mainly because they provide a Linux version of it. Not surprisingly it is a hefty download of 56 MB. After downloading, I was flawlessly able to install it on my Linux machine and in no time, I was browsing the newly installed and running Drupal. One thing worth noting is that during the installation itself you are prompted to set a user name and password which will be your administrator user name and also the IP address of your machine so that the software can be configured to be accessed from within your LAN. If you are using a standalone machine, you can enter the IP address 127.0.0.1 or your machine host name.

Pros of Bitnami Stacks

• Each stack is self contained and will not interfere with other software installed on your machine.
• Each stack contain all the relevant software pieces which are required to run the application
• No need to edit the configuration files of your web server or database server as all of it is taken care for you.
• You can download bitnami stacks for multiple platforms.
• You can install multiple stacks on the same machine - though I guess, not run them at the same time.
  

Cons of Bitnami Stacks

• Since each stack is an all inclusive package, it is a relatively hefty download. For example, the Drupal application stack is a huge 56 MB download compared to that from the Drupal official website which is around 5 MB.

Suggestions for further improvement

• When I downloaded the Drupal stack from Bitnami, I found that it was a plain vanilla installation. A glance at the Drupal website shows it has 100s of extra modules which a web developer needs to download and install separately in order to use them, not to speak of the themes. It would be a really good thing if the Bitnami application stack included all these extra Drupal modules and themes too. As the size of the download is not an issue here, including these extra modules and themes will at most increase the size by a further 10 - 20 MB but will provide even greater value for the web developer.
• Apart from providing an installer it would be nice if they also provide a standalone zip or tar.gz archive for download so that it can be unpacked to a USB stick and run from it.
  

Interesting tips to designing effective websites

Anybody who runs a website will be faced at one time or another to redesign his site. I have myself tried my hand at redesigning this site with varying degrees of success - though you can plainly see that there is a lot of scope for improvement.

But does designing websites require following a series of pre-charted steps ? Or is it a process which require little if any planning - one where you just jump in and start modifying the code ?

It appears that most, beautifully designed websites are the result of careful planning and forethought. Designing websites can be divided into 9 separate steps. Them being :

1. Know what you're doing.
2. Know what the site needs to do.
3. Know what the site's visitors want.
4. Get a good picture of the personality and style of the web site.
5. Sketch out highly successful scenarios.
6. Organise views into a site map.
7. Sketch the essential features & look - This is the time you use a graphics software such as Gimp. But using only pen and paper is also equally effective.
8. Map your visitors' attention.
9. Arrange the visual elements to work together.
   

You can read the details of each step at this well written article at Web design from scratch - a beautiful site with good articles pertaining to web design.

And if you are wondering which is a good book to pick up the essential skills in XHTML, CSS and Javascript which are pre-requisites for mastering the art of web design - I would highly recommend you check out the book Web Design in a Nutshell which is well into its third edition having sold over 200,000 copies so far.

Developing websites solely in GNU/Linux - A Web Developer's Experience

Lets face it. Developing websites means using a mis-mash of software right from the ubiquitous text editor to full blown graphics editors, having access to a variety of web browsers and even good ftp clients to upload the files to the remote server. I have at times wondered what it is like to develop complete websites right from the designing stage to the final implementation all from within GNU/Linux. Considering that GNU/Linux and the applications that run on it have advanced considerably to be viable options for web development, I did believe that it was entirely possible.

J. Christopher - a web developer by profession has written a two part series listing his experiences in developing full blown websites entirely in GNU/Linux. In the first part, he gives an outline of why he chose GNU/Linux. He talks about using Gimp and Pixel to create mockups of the website as well as other software like Beagle which made a big difference in bringing convinence while developing websites. It felt nice to learn that his watcom tablet was detected without any problem in Linux (Ubuntu 6.06). Though he says that developing flash based sites would be a problem. In the second part of the series, he gives a run down of the different editors he uses and how he had access to Internet Explorer in Linux - (after all IE still is the dominant web browser in the world and is unavoidable while developing websites). Both the articles are peppered with links to useful web resources related to Linux.

The author after using Linux for a couple of months is absolutely pleased with the switch from Windows to Linux and considers himselves to work faster, smarter and happier since the switch.