We’re fan of free tools. We asked our HTML team to use Aptana as the IDE instead of Adobe Dreamweaver. However, from feedbacks of the team:
Aptana does not allow them to manage common HTML pieces => So, in case there are 10 HTML components used for 10 pages – if they need to change 1 component, they need to copy/paste the HTML piece on 10 pages.
This is a critical problem in efficiency. So, we need to find the solution.
One of the solution we find:
Using PHP syntax (include) for embedding common HTML parts in different pages. By this way, we need to change in the common HTML component in 1 file and it will affect to everywhere.
I did setting up a small skeleton PHP project for this purpose. Below is what we’re applying.
1. The PHP project skeleton
- Common HTML components are put into component folder.
- Master template pages are put at the root.
- css/js/images are on the same hierachy level.
2. The .htaccess file
#Rewrite rule to make nice “html” file path
RewriteRule ^(.*).html$ $1.php [nc]
#Allow css files to be processed by the php engine.
Why we need css files processed by PHP engine? => for solving the editing conflicts in collaboration working on SVN.
In case we use only 1 css file for working among >=2 developers, they often have conflicts when updating the file from SVN. To pass this issue + increase more the efficiency in working – we proposed the component approach.
3. Component approach
An HTML page should be separated into 2 main concepts:
+ The layout: this is the structure of a HTML page – which defines main zones of a page.
+ Components: HTML pieces that are displayed on zones. They can be used commonly in different pages.
So, for styling the layout + components, developers can work on different css files. However, when all css files for components are finished => they need to be merged into 1 file.
4. How we mix layout + component css files into 1 file?
On the merged css file, we put below script:
//Override the header Content-Type. Without this line, the browser
//thinks this is a text file => no css effect.
include(“index-layout.css”); //layout css file.
include(“menu.css”); //component css file
include(“post.css”); //component css file
I did a try with a template on this skeleton project and see it’s working so great!
Will apply this one to the team from next week. Wait’n see.