Less of Qt and more of HTML5: Rekonq

The implementation of the background image selector done in Rekonq was coded in Qt. The widgets and all were all coded. But now I've got a different implementation for the same problem. Rekonq uses webkit, so almost all of the HTML5 and CSS3 features are available for use. So instead of creating the popup widget and creating layouts using Qt we can create a lightbox using CSS3 and load the images using HTML5 handlers. Again the file select class of HTML5 will make it real easy to select files from the local disk or from the web. The data file although remains the same. The HTML5 will load data from the XML file using AJAX. This solution will not only make the widget a bit faster, but also coding for it will be a lot simpler. Just like a simple web page. The interface will also be for attractive and making animations will be also very easy.

The 6 images that I intended to load in the lightbox, will be a simple 3 x 2 table and the cells will be image hyperlinks. Instead of controlling the data by the file class of Qt we can use handlers to right the data directly from the HTML file. The entire lightbox will be just a HTML form with submit and cancel buttons. I guess this will soon be implemented. :)

Adding a background image to Rekonq: Concept

The default page in Rekonq provides navigation to your favorite pages, downloads, closed tabs, history and the session manager! But it looks quite blunt with a white background. So I decided to add a feature to Rekonq by which you can choose your own background image for the new tab page. Like the "Add favorite" button on the top right corner of the page, there will be a "Change background image" button on the bottom left corner of the page. On clicking the button, a dialog will appear which will allow you to choose a background image from the previous six images you chose. It will also provide you a field to choose a file from your local disk or from the web. On saving that, the new file will be appended to a xml file from which the browser reads the background image. The xml file will contain the name of the image and the address of the image and the information on which is the current image. Since I'm interested in displaying only six images from history, so I don't need to store more than six names in the xml file at any time. Now when we open the browser for the next time, the browser will check the xml file and load the picture in the background. With the coming of HTML5 and CSS3, features like tile, stretch, fill and center can also be added to the widget.

A giant leap!

Finally I decide to take a turn from web-development and design to open source application development. After fiddling with Qt for over a year and a half, its time a switch over to my old passion of writing code snippets for applications! I still remember the calender and clock widget I made in Qt for Linux back in class 12. It was a nice little application that could store birthdays, reminders and alarms. In short a scaled down version of empathy with better customizable looks. Now its time to get dirtier! Look in bigger codes and make necessary upgrades and changes and if possible add new features. With unlimited access to the software repositories all over the world this is like jumping into a sea of balloons....I hope I'll have the fun too! :)

Newspaper Layout - Getting modern

Frontpage Screenshot 1

Frontpage Screenshot 2

Newspapers have been with us for a long time. It was the main source of information for commoners for the later half of the twentieth century, until and unless the human race was invaded by the Internet. Information started flooding the Internet and people remained informed just by a few clicks. But somehow the newspaper never lost its importance.
Newspaper companies started uploading high resolution images of their newspapers so that people could read them on the web itself. No doubt they take a good amount of space but the quality is superb. Afterall everything has a price.

Frontpage Screenshot3

After noticing the new layout and grid features of CSS3, I was encouraged to make a web layout to display the newspaper exactly at it is on paper. I very tough challenge indeed. The newspaper layout itself is so varying and complex that it was almost impossible to write it out through a single style sheet. Again the content is so huge that it has to be arranged efficiently too and any two newspapers seldom have the exact same arrangement. Images sometimes get difficult to handle.
After working on it for a few days I have creating a model on how it should look like once it is done. I created it using CSS3 and HTML5. But the limitations of this model outnumber the amount of data in it! Many things needs to be looks upon, the greatest challenge being to make the structure fluid. May be this is the start of another framework, but whatever it may be it will surely stretch web layout capability to its limits.

Source under development. Available on request.
Send a mail at amitdatta1806082599@gmail.com

Accordion - 700bytes of CSS

Till date whenever you wanted to include an accordion to your site, you needed to include the jQuery file and call the javascript functions. But now all that can be done without the jQuery and the javascript functions. So you can take out the 200KB of .js files from your site base and put in just a css file 800bytes long. In this example, I have used CSS to create a crude accordion, which works just when you hover on the topic. You can put in anything you wanted into the slides, starting from normal content, to images, tables, and even a HTML5 canvas for that matter. Animation can be included too. I'm currently working on it. A more sophisticated accordion will be available soon.

Source code: http://hotfile.com/dl/139644571/2dd5cd4/CSS3_Accordion.zip.html

4 exciting forms of navigation

This is a collection of the four easiest and most used navigations used in todays world. The collection contains a horizontal navigation bar, a windows like menubar, a vertical menubar, and a tabular grid containing items. The menus has been styled with bright colours and varying transparencies.
The HTML markup of most of the menus is as simple as an unordered list. In the tabular grid, it has been arranged in a simple table. All the effects of a menu has been given using the CSS. So all the focus in this example should be on the CSS instead of the HTML markup. The markup can be changed anytime. I've used a few CSS3 transitions in here, to highlight the menu items on hover. The code for them has been written with only the -webkit- vendor prefix, so it will run fine in chrome and safari but not in opera and mozilla. You can add the vendor prefixes for them though!

Download source:

http://hotfile.com/dl/139475699/619ca97/4_exciting_CSS3_Navigations.zip.html