A list of XML based CMS for Web Developers

In this post I'm sharing a list of XML based CMS (Content Management System) to help web designers and developers. CMS usually implemented as a Web application, for creating and managing HTML content.

It is used to manage and control a large, dynamic collection of Web material (HTML documents and their associated images). A CMS facilitates content creation, content control, editing, and many essential Web maintenance functions.

Here's the following list:

XMLNUKE

XMLNuke is a site content management. No database is needed and it has a minimum setup, using only XML and XSLT files. All output is done in XML. The XMLNuke framework converts the XML into the appropriate format - HTML, RSS, Excel, etc.. All so simple.



GetSimple

GetSimple is an XML based lite Content Management System. To go along with it's best-in-class user interface, we have loaded it with features that every website needs, but with nothing it doesn't. GetSimple is truly the simplest way to manage a small-business website.



INGENIUX

Ingeniux CMS is a highly modular Web content management system built on open-standard XML technology. The Ingeniux CMS enterprise 2.0 content platform delivers usable, scalable, innovative solutions for managing websites, online media, and team collaboration.



HANNON HILL XML CMS

XML Content Management by Hannon Hill. The award-winning ContentXML product provides enterprise content management solutions for online information management. Hannon Hill creates web marketing solutions that give people and organizations the freedom to manage their Internet, Intranet, Extranet and Portal content with ease.



WebJaxe

WebJaxe is a free CMS based on XML documents edition. Semantic edition is provided by a graphical web interface using Jaxe as a Java applet, and HTML publishing is done with PHP and XSLT stylesheets. WebJaxe includes sample configurations for the XPAGES and XHTML languages.



Kumera CMS

Kumera is an Open Source Content Management System written in Perl and using XML for data storage, designed for small to medium web sites. You can read more about what it does in features, or download it and try it for yourself.



sharpcms

sharpcms is a open source content management system based on XML and XSLT and written in C#. Easy for developers to install and use it.



YellowTail

YellowTail is exciting, next generation technology designed to make life easier for marketing teams. It allows you to easily create, manage and extend your websites.



Mapix CMS

Mapix CMS is a very simple CMS that allows to modify any content in your websites without using a database. All the content of your website is written in XML files that are editable through mapix back office. Mapix is free (under GNU GPL Licence) and simple to use.



Webrender CMS

Webrender CMS is an XML-based CMS, with nested modules. For more hits and more success search engine optimized output is a priority.



Do you have any opinion, leave a comment

Let's make a nice vertical menu with 2kb CSS

In this post I am going to explain you that how to make a nice vertical menu with light weight CSS (i.e. 2kb). This menu is fully compatible with all standard browsers like IE6-7, Mozilla Firefox, Opera and Safari.

Some time back I wrote tutorial about How to Design a Nice Vertical Menu with CSS where I couldn't used working example. Now this time I am going to show you working example.

I have used one image, some lines of html and a 2kb CSS to make this menu. Here's final menu look that we are going to acheive:

WHAT DO YOU WANT TO DO?

• This is task one
• This is task two
• This is task three
• This is task four
• This is task five
• This is task six
• This is final result

Use following html code:

<div id="leftNav"><!--leftNav Start-->
<div class="header">WHAT DO YOU WANT TO DO?</div>
<ul><li ><a href="#">This is task one</a></li>
<li><a href="#">Task two</a></li>
<li><a href="#">Task three</a></li>
<li ><a href="#">Task four</a></li>
<li><a href="#">Task Five</a></li>
<li><a href="#">Task six</a></li>
<li><a href="#">Task seven</a></li>
<li style="border-bottom:none;"><a href="#">This is final result</a></li></ul></div><!--leftNav End-->

Attach following CSS in your page between <head></head> tag:

#leftNav {float: left; width: 231px; border: 1px solid #c9c9c7; margin-bottom: 10px; font-family:Geneva, Arial, Helvetica, sans-serif;}
#leftNav .header{float:left; width:231px; height:20px; padding-top:4px; background:url(Images/leftMenu-header-bg.gif) repeat-x; text-align:center; color:#344f6f; font-size:13px; font-weight:bold; border-bottom:1px solid #a7b4c3;}
#leftNav ul{margin:0px; padding:0px; width:231px;}
#leftNav ul li{margin:0px; padding:0px; font-size:11px; height:24px; width:231px; color:#364e70; border-bottom:1px solid #a7b4c3; float:left; list-style-type:none;background:#cad2df; border-top:1px solid #dbe3ec;}
#leftNav ul li a{ text-decoration:none;padding-top:5px; height:19px; width:226px; text-indent:14px; background:#cad2df; color:#364e70; list-style-type:none; position:absolute;border-left:5px solid #828fa6;}
#leftNav ul li a:hover{text-decoration:underline; font-weight:bold; padding-top:5px; height:19px; width:226px; background:#394a63; color:#cad2df; border-left:5px solid #1c3552;}

Copy following image in your image folder:



Thats all. Thanks.

Do you have any problem to implement, leave a comment.

Welcome to new template of TutorialFeed

Hello readers! I'm privileged and very excited to announce that I have launched the new template of TutorialFeed. The look & feel of new template is very simple and easy to understand for readers.

As you are seeing I have used three columns layout, left column has a content and right column has contains different topics like recent post, recent comments and facebook fan list... lot more to come later. Extreme right has a space for advertisers. I have also designed a new logo of TutorialFeed.

I would love to call it TutorialFeed 2.0 yes it is a version 2.0 of TutorialFeed. I am still working on more improvement to this new template.

I would love to hear your valuable feedback about this new look of TutorialFeed. Leave a comment.

Follow me on Twitter

Become a fan on Facebook

Subscribe RSS feed

Cheers !!!

6 Essential tools to check your website Usability

Usability is a qualitative attribute that assesses how easy user interfaces are to use. More impotantly it shows the user behaviour who interact with your webpage first time.

In this post I'm sharing some very useful tools for webmasters to check website usability. Here's the following list:

Feng-GUI

Feng-GUI simulates human vision during the first 5 seconds of exposure to visuals, and creates heatmaps based on an algorithm that predicts
what a real human would be most likely to look at.

This offers designers, advertisers and creatives, a Pre-testing technology that predicts performance of an image, by analyzing levels of attention, brand effectiveness and placement, as well as breaking down the Flow of Attention.



Five Second Test

A simple online usability test that helps you identify the most prominent elements of your user interfaces. A central test management screen helps organise and visualise your responses so you can get all the information you need at a glance.



Loop11

Loop11 is a web-based user-experience testing tool, allowing companies to conduct online, unmoderated user testing on any kind of digital interface. Loop11 is not a survey or web analytics tool, but a user experience tool… helping you to understand user behaviour.



CrazyEgg

CrazyEgg is simple - show the hotspots where users click on in a site. This information is not the same as popular pages; instead this is practical information about how and where people click on your site. More importantly, CrazyEgg's approach lets you understand the difference between where you want your users to click and where they are actually clicking.

Traditional site tracking tools offer you a ton of information, including:

:: Popular pages :: Entry pages :: Exit pages :: Came from :: Visitor Paths :: Visit Length



Clixpy

Clixpy is a web usability testing tool. It’s very easy to install, just by pasting a few lines of JavaScript code in your site’s HTML. When users browse your website Clixpy traces everything they do and then plays it for you, giving you the opportunity to extract any information you may need.



ClickDensity

More than a Heat Maps ClickDensity is a full usability toolkit. With a unique integrated A/B Test suite, you can trial and analyze improvements at the touch of a button. It takes minutes to set-up. From the second you see the reports, they just make sense. Complements your existing web analytics for an unbeatable analysis of visitor trends.



Know more about Usability

Share your thoughts and ideas about website usability, leave a comment

10 Free source to create mobile version of your blog or website

If you want to create a mobile version of your blog or website free then this post going to help you to choose good source. In this post I'm going to share some free source to help you to create mobile site or blog for free.

Here's the following list of free mobile site creators:

mobiSiteGalore

mobiSiteGalore is a FREE mobile website builder that allows you to easily build, publish & share a full-fledged mobile website that is guaranteed to work fine on any mobile phone.

MOBIFY

MOBIFY is a service that provides websites with seamless, integrated mobile views. It lets publishers quickly monetize mobile users and gives web designers a powerful mobile toolkit.

mofuse

Build a mobile site, in a minutes. Its a right platform for your needs and you can build and launch your mobile site using our very intuitive & simple to use tools.

Zinadoo

You can have a live version of your mobile site published on your blog or PC website so everyone will know you are mobile by using Zinadoo

Bango

Bango makes quick and easy for you to build a mobile website. Use a tried and trusted online site builder that delivers professional results fast. It provides important ingredients needed to get fully functional mobile website.

winksite

Winksite makes it easy to create a mobile website and community that can be shared worldwide.

mobilemo

Mobilemo allows ordinary people, businesses, and institutions to create and manage mobile sites. Mobile sites that are created using Mobilemo are automatically converted to the right size, layout, and format for mobile phone viewing (mobi-compliant).

XTGEM

xtgem is a easy to use mobile website builder which allows you to create a mobile version your blog or website free by using simple and userfriendly wizard.

Jag.ag

Jag.ag is a new cool mobile social networking platform for creating and sharing digital content such as music and videos on mobile devices, by building free and easy-to-use mobile internet sites.

PHN.ME

PHN.me is the best mobile site builder around! It provide a free, high-end mobile web design tool. With PHN.me you can create a professional mobile web site without any knowledge of html or a scripting language!

Do you have any opinion, pls leave a comment.

A bouquet of freebies for web designer and developers

Hello friends start your new week with a bouquet of freebies you'll get here. In this post I am sharing some useful and interesting freebies for web designer and developers.

It includes Free Wordpress themes, Drupal themes, Flash gallery, Vector icon sets, Grunge fonts, Cool Twitter Graphics and much more:

Free Wordpress theme

This is one of our new simple Wordpress theme. Hope you enjoy this theme.



| dfMarine Blogger Theme | See demo

Free dfTheme Drupal

Presenting the dfTheme 2.0 for DRUPAL CMS. Currently Drupal is one of the best CMS and if you have not taken a look at it… it is time… This theme supports both the Admin and the Client. This is a three column layout because there will be enough content to go all down the sidebar.



| See demo

18 Free Project Icon Set

Here is another simple icon set that covers various aspects of a Project. Here is some more info:
:: 18 Icons in this set
:: Transparent PNGs
:: Vector Fireworks Source files
:: completely FREE... (even commercial use)





10 Free weather psd graphics

This set contains 10 simple graphics portraying different Weather conditions both in Day & Night. There are Layered PSDs and are totally FREE to use anywhere, even commercially!





Free Flash Gallery

This gallery is one of the coolest free flash galleries. The reason for this gallery to be cool is not just its UI but the way it is built and architected. It has amazing theme engine built to support custom themes with multiple skins for each. The administration console built on CodeIginter lets you manage multiple galleries and albums of different types.





220 Amazing free photoshop layer styles

Photoshop Layer Styles have been one of the most common ways to speed up design process. These styles have been helping us and lot and we hope you find it the same.





49 Free vector psd icon set

This is very cool icon set available for free download. These are based on lights & shadows effects. This icon set is a freebie on Smashing Magazine too.

The icon Set has follow features:
:: 100% Vector - Shape Based
:: Layered PSDs
:: 128 x 128 PNG included
:: 100% FREE - use them anywhere…





Simple Javascript Accordions

Javascript accordians have been used a lot in todays web design world. There are a lot of scripts we have seen and sure you too would have seen them.

This script is one of the smallest accordion script which is extremely simple and easy to integrate. Does’nt require any framework and fully cross-browser compatible.





35+ Really Awesome Free Grunge Fonts

A good collect of Grunge fonts for free download.



Direct link

40 Cute Free Twitter Graphics

Here's free set of unique twitter graphics. Simply drag and drop the various graphics, icons, badges and buttons into your work free of charge.



Direct link

Do you have any opinion, leave a comment

8 Good instances of z-index property

If you are new in CSS then you may find difficulty to understand about z-index property. In simple words z-index sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order.

In this post I'm sharing some good examples of z-index property to help upcoming web designers and developers. Here's the following list:

CSS z-index Property

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.



How z-index works!

This page is to demonstrate how elements stack.



A Detailed Look at the Z-Index CSS Property

Most CSS properties that a web developer deals with regularly are instantaneous in their application to elements on the page.



OverlappingAndZIndex

There seems to be some confusion about how to get one element to appear on top of another. Do you add z-index: 1 or z-index: 1000? Why do some items overlap others, no matter how high the z-index value goes? This page hopes to clear this up.



Understanding CSS z-index

Usually HTML pages can be considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. There is a single rendering flow, and all elements are aware of the space taken by others.



CSS2: z-index

Here is a post I wrote on webmasterworld.com to explain how z-index works. z-index goes hand-in-hand with the local stacking context. What is a stacking context? Whenever you specify a z-index, you create a new stacking context. Here's an example:



"Z's not dead baby, Z's not dead"

Developers I speak to often associate z-index with Dreamweaver’s layers feature. But in combination with alpha transparency support for PNG images in IE7 and full implementation of position property values, the stacking of elements with z-index is going to be big.



CSS Z-Index

The z-index property specifies the stack order of an element. In other words, when there is an overlap between two elements, the z-index value determines which one shows up on top. The element with a larger z-index value will appear on top.



Do you have any opinion, leave a comment.