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.
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.
June 12, 2010 at 8:49 am (CMS, CSS, FOSS, PHP, Web)
In my previous post I discussed about making use of Zen theme and zenophile module for theming on Drupal. Initially it was sort of a nightmare for me to understand the overall process and the structure, but with a struggle of about a week I managed to get most of the things sorted out. Now it only takes me less than two days to fully convert a site’s design (image) into a cross browser compatible, standard compliant CSS template. All this was made possible as a result of making use of Zen theme as the base theme.
- layout.css: to manage the theme’s structural layout
- html-elements.css: to format the html elements
- sidebar.css: to manage the structural layouts of sidebars and content areas
- menu.css: to apply menu specific style formatting
- sitename.css: to apply overall site specific style formatting
- sitename-fresh.css: to apply special formatting
- print.css: to format the print view
Method to use
In my approach I always starts applying (overriding the existing formatting values) CSS rules with html-elements.css followed by sidebar.css. Once that is finish you’ll notice that what’s remaining will be to apply the section specific CSS rules. For that you can use the layout.css and sitename.css files. Lastly I touch on getting the menu styled using the menu.css. Following the above steps helped me to achieve nearly 99% cross browser compatibility among A grade browsers and with minor fixes for IE 7 and IE 6.
For sites having the navigation hierarchy stretches for more than one level I would recommends to always skip the use of navigation bar region(I’ll talk about what regions are with reference to Zen theme) and can make use of following two methods to get the vertical or hierarchical drop down menus to work perfectly with IE versions as well.
The both approaches make use of the “suckerfish” dropdown implementation. My preference goes to the second method although you have to put an extra effort for it to works fine with IE (can overcome by correctly managing the z-indexs of different levels of the menu and the rest of the content).
Just to have a quick note about what regions means on Drupal with Zen theme (you can find simple yet comprehensive articles written about regions on Drupal.org). If you look at the internal operations of the framework you can categorized them into two layers based on how it handles the content.
- Presentation layer – it handles how the content is shown to the user.
- Generation and transmission layer- it handles how the content gets generated and transmitted among each other.
The Zen theme provides you a set of sections(regions) to position your content on the web page as follows:
navigation bar region
sidebar left region
content top region
content bottom region
sidebar right region
May 23, 2010 at 4:54 pm (CMS, FOSS, PHP, Web)
Drupal is one of the best PHP based CMS currently out there along with Joomla, WordPress to name a few. Each having its unique inherent features that differentiate each other. Previously I have worked with Joomla and WordPress (the CMS I’m using for my blog). While going through the Drupal CMS I found that it’s not just another CMS instead has a very powerful framework which can extend it functionality to suite our requirement through its diverse set of modules. Another wonderful thing about Drupal is that almost all the modules are freely available to download and it also maintains a neat and clear up-to-date documantation.
Before you going to start the development Drupal there are few things you need to consider.
- The Drupal version going to use (preferably 6.x- )
- Decide based on what theme you are going to work with. Based on your choice you can either start off with your own custom theme or make use of one of the contributed themes (Zen, Garland, Marinelli,etc…)
- If your preference is with Zen contributed theme then grab it and you also need to grab the zenophile module which allows themers to very easily create Zen subthemes without all the tedious file copying and find-and-replacing required when creating subthemes by hand and many more tedious work to a simple and an easy to understand single interface.
You are free to explore its power and flexibility.
Once you have the grab of the above tools you are good to go.
- Once you are finish with the main installation process navigate to the document root folder (the location where the install files are located.) Find the folder called sites. Inside that you’ll find two folders called all and default.
- Navigate to sites > all and create two folders called themes and modules and copy the Zen theme to themes folder and zenophile module to modules folder.
- Under administrator interface on the left side menu navigate to Administer > Site building.
- Enable the zenophile module found on Modules page (Administer > Site building > Modules).
- Find the Create Zen subtheme sub menu item on the Themes page (Administer > Site building > Themes).
- Inside the create Zen subtheme page fills out the basic information for your custom theme.
- System name : Client name, all lower case, with underscores but without spaces
- Human name : Client name, may contain uppercase letters, spaces, punctuation, etc
- Description : Example: “centered fixed width CSS based theme for client name”
- Site directory: ALWAYS place inside ‘ALL’
- Before submitting the form there are few more configuration parameters you needs to provide. Click on More option link and provides the values to meet your design layout
More information about working with Zen theme and zenophile module can be found here.
February 21, 2010 at 3:11 am (CMS, PHP, Web, Work)
Sometime back I blog about a project that I was engaged at the office. This system was initially started as a simple e-commerce site to manage the daily activities of an bathroom equipment retailer. So later based on the owners requirements the functionality got expanded and grew it into a CRM.
Currently the system consists of quote and order processing with a comprehensive refund process, stock , user task , supplier, manufacturer, category and product management, report generation and a well organized dashboard with summarized results of overall system activities.
Everything went smoothly until last week where the system came to a total stand still in few minutes. With some testing I found that once the user login and carry outs the regular activities, the MySQL server’s usage goes to 99.9% (checked it with command top). At that time I was totally lost because the system was on live run. ;-( . To understand the root cause I started by going through each and every functionality stating from the dashboard section and further dig into all the SQL statements, which mounted up to more than 300. It was a very painful task, where most the queries were SELECT statements that returned SELECT * resultset. So I had to select the columns that is only needed to display leaving out the rest. Also had to be very careful that this modification will not further degrade the existing functionality and some of the queries were used more than once within the system.
Next I make use of a profiler to measure the time for each page to load and it helped to identify the pages that took the longest time to give the results. The profiler used for this purpose was called the PQP. It had a simple interface with a comprehensive set of functionality and it was very easy to integrate into any web page. With that for every page I measured the
- Page Execution Time
- Memory Usage
- Runaway Includes
- Individual SQL query execution time
With that I was able to list down the pages and the SQL queries that contributed for most of the traffic. This series of testing concluded that four functionalities on the dashboard, couple more on the order details page and the main functionality on the reporting section was responsible for the overall performance issue.
Next I focused much of my effort and attention on the identified sections. Since I experienced a frequent crashing of the Firefox browser I decided to switched on to Safari browser. In Safari I found a tool that really suite my requirement at this point of time. It was called Web Inspect (Developer > Web Inspect ). It was a tools somewhat similar to Firebug but it also had profiler and resource analyzer inbuilt. So with that I managed to further investigate into each of the identified pages and there respective functionality. Along with few modification to existing PHP logic (by removing redundant database requests), introducing INDEXING to reduce execution time in database tables and finally decided to introduce archival mechanism to store historical data as a long term performance improvement. I must thank Ashoka Ekanayaka for his effort and guidance.