Elephanti the Revolutionary Lifestyle Media Network

June 8, 2013 at 2:57 pm (CSS, Development, HTML, Javascript, Life, Mobile, PHP, Retail Media, Social Media, Web, Work)


Today social media applications plays an important role in our day-to-day activities as a result of the Web 2.0 revolution that took place in the Internet. It has revolutionized the lifestyle of almost all the individuals and business entities, for the majority of them spending at least few minutes with it has become an integral part of the day. The Elephanti, is a retail media ecosystem that aims to provide a platform for both individuals (Shoppers) and business entities (Merchants) to virtually interact with each other to buy and sells items on the go. It composed of a free Web based application for the Merchants and a free smart phone application (iPhone and Android) for Shoppers.

  • The Merchants can sign up for a free account and be able to create a virtual storefront in few minutes and manage its routine activities via the Web based console to update their profile, add products, post discounts, etc…
  • Those who are signing up as Merchants, initially selects their type of business (Single store, Chain store, Mall, Brand, Department store and Freelancer). Each type of business is modeled with an unique, customized set of features to facilitate its main line of business requirements.
  • For Merchant signing up with Elephanti, the system facilitates the merchant to describe the nature of the business and its specialization areas, such as Fashion retail, Cafes, Dinning venue, Cinema, Book stores, Services, Health and Beauty, Consumer electronic, Grocery stores, Automotive, Hotel, Travel and Tourism, Entertainment venue, etc… Each category further goes into a fine level of detailed specializations.
  • Shoppers only needs to download the app into their mobile phones to follow their favorite merchants, search for interesting place, items, create a shopping list, and many more. Using the app, they will be able to look at stores nearby and see what they have, write a review, add items to their shopping lists.
    • Shoppers will be able to look at places nearby and see what they have by check-in to the place, this provides the shopper and the shop owner a customized set of interactive features.
    • Also the Shoppers can discover Friends on the Elephanti network or sending invitations via other social media networks or via an Email and interact with each other through messaging, sharing activity updates, exchange shopping lists, uploading photo(s) to an album and tag their friends or/and places(Merchants), etc…
    • Shoppers can organize list of items planning buy just by creating a shopping lists and select nearby place(Merchant) they plans to buy it.
    • Rate a place and write a review and/or to comment them.

The main idea of Elephanti is to provide a platform for business owners to create a virtual storefront and invite shoppers to get to know about the items they sell and the discounts they offer, in the meantime the Shoppers are benefited by finding places nearby, items they sell and the discounts they offer and getting touch with their friends, plan their activities and many more.

Leave a Comment

Div based Fixed or Fluid CSS/HTML layout Template

August 5, 2012 at 6:36 am (CSS, FOSS, HTML, Javascript, Life, Web)


About two year back I worte an article introducing a simple HTML structure to organize the content on the web page as shown below.

Layout structure

header
sidebar left
content
sidebar right
footer

The above illustration just a simple introduction to how the template looks like. This HTML/CSS layout structure consists of examples illustrating the usage of Fixed and Fluid layouts covering following aspects

  • Without any Sidebars
  • With one Sidebar on Left
  • With one Sidebar on Right
  • With two Sidebars on either sides (Left and Right)

Folder sturcture

  • css – consists of all the CSS files
  • js – consists of all the JavaScript files
  • images – consists of all the image files
  • plugins – consists of all the third party components
  • template – consists of examples
  • readme.txt – simple introduction
  • lgpl.txt – lgpl license file

CSS

Inside the css folder you’ll find several files as illustated below, I adapted this structure after studing the Drupal Zen theme. Currely the theme is not Sass aware.

  • Core
    • html-elements.css – style rules to neutralize browser defaults and define baseline formatting to HTML elements
    • form-elements.css – style rules to format form blocks
    • layout.css – style rules to control the overall layout of the template (fixed or fluid)
    • sidebar.css – style rules to ncontrol the formating of sidebar(s)
    • print.css – style rules to format the web page when printing to a paper or PDF/Postscript.
    • website.css – style rules that requires to meets the look and feel of the custome design (main CSS file)
  • Optional
    • website-popup.css – style rules used for popul dialogs
    • handheld.css – style rules required to override website.css to make the site mobile friendly
    • ie_8.css – to keep IE 8 specific style rules
    • ie_7.css – to keep IE 7 specific style rules
    • ie_6.css – to keep IE 6 specific style rules

The above CSS files linked to the HTML markup was done within HTML head element as illustrated in Figure 1. CSS files with IE version specifc style rules were loaded inside a conditional comment block.

Figure 1: Linking of CSS files

JavaScript (breed of ECMAScript)

Inside the js folder you’ll find the javascript files used by the theme. I have used jQuery library as the base for all the client-side scripting requirements.

  • actions.js – to handle client side logic
  • window.orientation.js – to control the orientation of the page when viewing from a handheld device.

The above JavaScript files and the ones mentioned under plugins section was linked to the HTML markup was done just before the HTML closing body element as illustrated in Figure 2. This method was adapted to minimized the loading delay introduce by JavaScript files to the clent browser.

Figure 2: Linking of JavaScript files

Images

Inside the images folder you’ll find all the images used in the theme. Inside this you’ll find a folder called icons, which holds third party icons find from the Web (unfortunately I’m unable to locate the repository, my apologies to the creator/owner of the icon.)

Plugins

Inside the plugin folder you’ll find all the third pary libraries used in the theme.

Templates

Inside the template folder you’ll find examples illustrating following layouts

  • Fixed layout
    • no-sidebars-tableless-fixed
    • sidebar-left-tableless-fixed
    • sidebar-right-tableless-fixed
    • two-sidebars-tableless-fixed
  • Fluid layout
    • no-sidebars-tableless-fluid
    • sidebar-left-tableless-fluid
    • sidebar-right-tableless-fluid
    • two-sidebars-tableless-fluid

Fixed/Fluid switching

The switching between the Fixed and Fluid layout structures and be very easily achieved by toggleing the class attribute found on the HTML body element as follows:

  • Fixed – fixed-layout
  • Fluid – fluid-layout

<body class="fixed-layout">
            or
<body class="fluid-layout">

With and without Side-bars switching

The switching between the With and without Side-bars layout structures and be very easily achieved by toggleing the class attribute found on the first HTML div element next to body element as follows:

<body class="fixed-layout">
<div id="wrapper" class="no-sidebars">
            or
<body class="fixed-layout">
<div id="wrapper" class="sidebar-left">
            or
<body class="fixed-layout">
<div id="wrapper" class="sidebar-right">
            or
<body class="fixed-layout">
<div id="wrapper" class="two-sidebars">

To create an easily customizable div based HTML/CSS template by myself was their in my mind for sometimes and I’ll be sharing it for the benefit of others. The template can be download form Github repository.

Leave a Comment

Two years have passed

October 11, 2011 at 1:23 pm (CMS, CSS, PHP, Work)


Looking back into the past two years I spend in the industry getting graduated with a B.Sc. in IT, it gave me a chance to experiment on what I learnt in the uni. The period that I spent in the university was so exciting and adventurous, where I got the chance to get involve with some interesting research projects, one project that contributed to the well being of the global community while another one had military involvement. I was so fortunate that during all those involvements I got the privileged to work under the reputed professionals in the industry.

Although the place I joined first didn’t worked out well but there was this one project that I got involved gave me the opportunity to learn and do what I was actually spending most of my free time during the university. The project was all about controlling the presentation layer of the Web Browser using CSS (theming more than 600 websites with 400 to 500 pages per site on top of Drupal CMS using Zen theme and Zenophile module). Initially I got an excellent insight into CSS and Drupal framework from Chris Craig, who spent a couple of weeks with our team. Every time the designers were coming up with crazy and elegant designs which we have to port them back into the newly created Drupal sites without failing to miss a single dot and even missing the slightest fraction of the layout of the components including IE 6, 7 and 8, which was a nightmare in the beginning. Within a month time I managed to release two conversion per week.

As a principal I always try to be honest and straight with what I know, but unfortunately it didn’t worked out well for me with my boss. He always tried to fool me and cheat me in many occasions. So after spending more than one year with them I decided that the time has come to say goodbye. So I took the decision to leave the place and gave them two months advance notice. Next stop was the place where I currently working. Initially the environment was somewhat similar to my previous place but since the entire team consists of energetic young blood, so because of that everybody had our own strengths and weakness where we fought each other over that. But the interesting part of it is that the project (which I’ll discuss about it in the future, but if things turned out well it will be a thing that we all can be proud of for all the hardship we went through) in front of everybody was way beyond our radar. Which I believe that was the reason behind all that. Fortunately our team was blessed with a futuristic and generous management so the things didn’t went bad, instead we got a new light to our team. With this project I’ll be able to explore into various technologies where I’ll never even be dream of, if not which will at least take me more than five years or so.

Leave a Comment

Beauty of Drupal

August 31, 2010 at 5:58 pm (CMS, CSS, FOSS, PHP, Web)


Drupal is one of the best PHP based CMS geared with an enormous amount of functionality out of the box to have your dream fulfilled with reliability and guaranteed satisfaction to meet your business goals. The Drupal has been popular among the community as a CMS, but if one digs deeper into it he’ll finds that it can be use as a base framework, one off solution or tool to leverage functionality. This gives both the designers as well as for developers the chance to test their limits to extreme.

The default Drupal solution comes with a collection of functionalities that lets you to create a web site with minimum effort. If you need more functionality into your site then all you have to do is to expand your imaginations to extreme because Drupal has all or most of the functionality that you imagined to do as readily downloadable out of the box solutions. With Drupal even you can build systems without requiring to do a simple programming effort because everything in there is automated. Most of your requirements can be achieved through its very powerful mechanisms such Blocks, Nodes, Views, CCK, etc…

Meeting the design and aesthetics of a site are very important aspects to consider in creating a fresh, appealing, yet still functional and user-friendly website. With Drupal you can very easily achieve them thanks to its inbuilt, easily customizable theming engine. There a wide array of theming modules out there to choose from, such as the popular ‘CSS Zen Garden’ based Zen theme, Garland theme, Bluemarine theme, Acquia Marina theme, etc…

The ‘CSS Zen Garden’ based Zen theme provides a very flexible mechanism to customize the positioning of the components to meet the overall as well as to a specific section of your design while adhering to standards-compliant and semantically correct XHTML that can be highly modified through CSS.

When we look at the design we might find ones with a three column layout having sidebars on either sides or both, or two column layouts with a sidebar on left or right or fluid layout with a sidebar on left or right, etc… With the blend of both the Zen theme and the Zenophile module it’s just a matter of you giving the dimensions of each section and state whether it should be fixed or fluid layout, then the system will do the rest. In simply all you have to do is to provide the correct dimensions of your design, rest is up to the themer to let go the dream design crafted on the site without any limits.

Leave a Comment

Introduction to DIV based layout

July 15, 2010 at 5:51 pm (CSS, Web)


If we go back ten years back into 1990s and start of 2000 the number of people connected with Internet to fulfill their various needs are very limited and it was mostly used by rich. But in the present day more and more people are gathering around the Internet in their daily activities and for most of them spending at least few minutes has being a part of their daily life. Due to its very powerful social networking capability it has made our lives more dynamic and exciting. So it is very important for people who involve in the process of evolving this infrastructure to make use of the accepted standards in all of their development efforts because this greatly benefits all kind of users with varying accessibility issues to achieve maximum satisfaction with less trouble.

In the earlier days of the Internet web sites were developed mainly based on table structure and this method was very popular among everybody. With the effort of numerous industry experts proper standards were defined to give the user a better user experience. As a result HTML and XHTML got evolved over the years to organized the content ( HTML 5 standard will be the future of web ) for representing the content and the CSS is there to control the look and feel (presentation) of the web page. In this article I’m going to share some resources that will be helpful for web developers.

Favicon

This is the small icon that is getting displayed on the address bar of your web browser just before the place where you type the URL which you want to visit or on the left most corner of the browser window tab. It’s it highly encouraged to include this feature into the site during the development phase. There are plenty of freely available services to have your favicon generated out of any popular image formats like png, jpg, gif, bmp, etc…

Introduction

I have seen that still the people use table based structure to handle the overall layout. In most cases they have adapted this approach to overcome the layout issues encountered with IE. It is very important to understand the importance in use of CSS to control the overall as well as element level layout. This gives a grater advantage to the web application in many ways, such as cleaner and structured layout, saves loading time, easier organization, wider accessibility, etc… If you are new to this following are some of the useful sites worth going through.

DIV based layouts

When you first received the site design it’s very important identify the correct layout for the site.

  • Tow columns with a sidebar on left or right
  • Three columns with sidebars on either side
  • Three columns with sidebars either on left or right, etc…

Once this is clearly identified next step is to properly organized it on your HTML page using div elements rather than going for table elements.. For example if the design is a three column layout having the sidebars on either sides of the content with a header and footer, this can be very easily organized as follows:


#wrapper- { width: 450px; margin: 0 auto; }
#header-,
#footer-,
#content-wrapper- { float: left; width: 440px; margin:5px; display: block; clear: both; }
#sidebar-left-,
#sidebar-right- { float: left; width: 90px; height: 250px; }
#content- { float: left; width: 250px; height: 250px; }

<div id="wrapper-">

<div id="header-"> header  </div>

<div id="content-wrapper-">
<div id="sidebar-left-"> sidebar left </div>
<div id="content-"> content </div>
<div id="sidebar-right-"> sidebar right </div>
</div>

<div id="footer-"> footer </div>
</div>

header
sidebar left
content
sidebar right
footer

Please don’t consider this as a complete example. I just provided this as a starting guide. Following points are very important when you are into serious work.

  • Reset the oveall HTML elements to a default styling settings.
    This step helps your to reset the HTML element’s properties to know and a standard configuration overriding the properties applied by different web browsers.

    are few examples to start with.

  • Apply HTML element level styling
    Start applying the element level styling. Doing so you’ll be able to maintain a consistency throughout the site.
  • Apply the overall site layout styling as shown above
  • Lastly apply the section level styling

Jason Bartholme has taken the trouble to share some awesome CSS resources. 🙂

7 Comments

« Older entries