Vacation Tracker on Android - LungoJs

After hanging around a lot with PHP and CSS, development of web apps for PC's got somewhat monotonous. Hence, I decided to move on to develops web apps for the tablet and the smart phones. Being the possessor of a Sony Xperia U, Android was the obvious choice of platform. Instead of hard coding the entire application with javaScript I decided to use the framework called LungoJs. The first look at the framework convinced me that it is definitely cool, but lack of documentation and support made it really cumbersome. It took a hell lot of time for me to figure out how to use the Framework. At this point I must tell you that it is not at all that tough as I felt, its just the lack of support.  
 The application itself is very simple. The routine is stored in a MySQL database. All I need to do is to update the routine if I'm absent in a particular class. The absent dates are stored in the database. The application automatically calculates the percentage of classes I have attended in each subject and warns me if I'm low on attendance.

The application is currently in alpha stage of development and major features have already been implemented. The last module that I'm working on is trying out a algorithm that will help me to plan my classes so that I can cope up if I'm low on attendance. A bit of AI ;)

Menu - A new way!!

Website menus has always been lists modified with a lot of CSS. We have seen vertical menus, horizontal menus, dropdown menus, etc. So this time I planned on something different. I made a circular menu where the sub menus appear as bearings around the main circle. This menu can be extended on all sides to include more sub menus. Check out the code. It will surely be interesting I hope!!

Download files:

http://hotfile.com/dl/146527305/ce07ecf/menu.7z.html

Note: The code has been optimized for Mozilla. Add the -webkit- and -o- commands for running it on Chrome, Safari or Opera.

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. :)

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

Animated Intro Clip - No Flash, only CSS3

Finally an attempt to create a small animation using CSS3. There has been lots of debate of whether CSS3 and HTML5 will be able to kill Flash or not, but its certain that the web has come a long way from where it has been. In this project I attempt to create a small animation clip as an intro to the techno-management-fest site of our college. A small bundle of images and a css file. That's all I needed. Currently this runs only on Google Chrome and other -webkit- browsers. But a tweak will enable us to run it on firefox and opera also. This is just a small effort and the concept can be broadened to a much larger effort. Happy digging.

P.S. This is under development

Download the code:

http://hotfile.com/dl/138396729/297f124/movie.zip.html

Desktop icon arrangement

I gave a try to simulate the entire desktop on the web using the HTML5. Believe me its possible. A small part of it was to bring in the windows icon arrangement on the desktop. I tried to do it using CSS3 tags transform and transition. It was easy though the draggable part of the icons requires a lot of javaScript in it. So avoided it in this example. Here I just simulated the looks and feels of the desktop using CSS3.

Download the source code:

http://hotfile.com/dl/137235434/ec9ae61/CSS3_DesktopIconStyle.zip.html

Sliding login panel using CSS3

Generally login panels are popups in webpages. In this one I'm trying to be a bit different. Here is a login panel that slides down. As soon as you hover on the login text, the panel rolls down. The panel has no initial background colour. While coming down it changes its background colour to a semi transparent white. One can easily customize the looks of the form in the panel. Adding a bit of animation using the keframes tag would make it look even better. Most of the popups created in webpages uses javascript which take a larger type to load, while doing so with CSS3 not only making it load faster but also gives a better look to the panel.

Download Link
http://hotfile.com/dl/136562107/b8ab286/CSS3_SlidingLoginPanel.zip.html

Windows like menubar using only CSS3

This menu has been created using CSS3 and HTML5. Its really simple and needs to be customized as per the needs. No JavaScript in whatsoever form has been used. This menu can be easily customized by editing the CSS file. One can change the font-size, the colors, the opacity and the fade in and fade out effects of the menu. With the use of the "transform" and "transition" tags of CSS, effects have become really simple. You can even put in animations by using the "keyframes" tag. May be I'll show it in a modified version later.
With the use of the '>' operator now you can make anything appear or disappear whenever you want. Various realtime appications can be noted down as Tooltips, Notifications, Menus, Tabs and much more.

Download link:

http://hotfile.com/dl/136559776/25f6d45/CSS3_WindowLikeMenu.zip.html

Science Calculator Chrome Extension

Finally, after a break of four months and learning CSS3 and HTML5, I'm back to developing apps. This type a web app, more precisely, an extension for chrome, with CSS3, JavaScript and HTML5. This is just a scientific calculator. The buttons have an effect on hover using the CSS3 transform tag, and they are tidily arrange in a tab. Using JQuery I've made a sliding mechanism, which helps to keep the size of the calculator small inspite of have a large number of keys, and also make the accessibility of the keys easier. The main engine of the calculator is created using javascript functions. In general the site works in most browsers and also in mobile browsers, just the sliding mechanism made in JQuery has some issues. I guess that bug will be fixed in later versions.

Download the source http://hotfile.com/dl/135076422/d570dc3/Calculator.zip.html
Compilation instructions included inside.