Has we’ve seen in the previous part, the history of web development has been evolving to a kind of programming state of the art involving techniques and best practice principles.

All these principles are aimed to make a whole web project more easily sustainable, readable, updatable and…enterprise wide in its evolution.

  • SEO
  • OOP
  • Reusability
  • Pretty urls
  • Database abstraction
  • Caching
  • Security
  • Localization (making it international)
  • maintainable code (coded with design patterns)

are characteristics that actual web applications/sites should be developed in mind with. More over, a framework helps reduce the developement by providing a series of “functions” that we usually have to develop for a webApp.

Let’s stick to one of these characteristics: The design patterns.

Design Patterns

Design patterns are a general reusable solutions to a commonly occurring problem in software design. (wikipedia) Obviously, if all software are developed with design patterns it means that everyone aware of the design patterns can perform a maintenance on the software (and not only the one who developed the so call software)…well…theoretically.

But design patterns will also ease the way you program and reduce the amount of code you type by applying programming principles and techniques. If you want to know more about this just start with the definition of Wikipedia on design patterns.

However, one of them is VERY important when you fancy the use of a framework : The Model View Controller design pattern or MVC.

MVC

The be simple, the MVC is an architectural design patterns which implies the separation of the presentation (view), the business logic (controller) and the data (model) to allow the independence of development, testing and maintenance of all the software components.

If it is not clear for you now it soon will be with our first project tutorial using a framework.

What you just have to bear in mind is that NO actual framework can ignore the MVC design pattern.

Of course, a framework which implement the MVC design pattern surely implements other design patterns.

Enough theory please !

As I stated in part 1 of this series of post, the main goal is to create a whole project using a framework and that is what we’re going to do. But first, we have to choose a framework.

Choose a framework

We assume here that the language we are going to use to develop our application is PHP. PHP has been there for a long time and is one of the most popular language in the world. Moreover, every web project I made with it is still working perfectly. PHP has also been the bricks and mortar for several exceptional applications like, for exampe, Wordpress, Magento, Drupal…and much much more.

Choosing PHP for your web app is, surely, not a bad choice !

If you type “php framework” in Google you’ll be served with A LOT of frameworks available. And all are stating they’re the best.

I can’t go against that, as for pros and cons, I should have been using all of them.

But I acquired certainties on a bunch of them. I kept several things in mind. the first is: the law of the market. As a web development company we must ensure to be able to integrate the most popular enterprise wide frameworks in the market.

One of the best and robust one is the ZEND Framework. It is stable, it implements MVC and has a lot of libraries ready to ease and reduce the coding work. It is also very flexible as you can use the libraries without the whole engine and use the whole engine without all the libraries. It is a glue framework (opposite of a stack framework).

A stack framework will have to use all installations files to be able to work. One  of the best known in the stack category is SYMPHONY.

SYMPHONY is also implementing MVC and comes with lots of goodies that fasten the creation of a whole website: like an admin generator.

And you’ve got more: CakePHP, DooPHP, CodeIgniter, and much more ….

I do believe that it is best to use the right solution for the right problem and that it is not necessary to use one fo them to build a blog for example. Use Wordpress instead. (yeah well, we don’t want to re invent the wheel you know)

So, don’t use a framework if you feel it’s an overkill. Using a framework implies to learn a new language and new techniques. It is a considerable investment of time when you come from the procedural.

So stick to the market, read what others say and be wise.

Let’s get going. I lately stepped into a very interesting php framework which revealed itself light, quick, extensible and easy to implement. Even if i think it is still young, it as enough maturity to be a good solution in many ways. Ladies and Gentlemen…the YII FRAMEWORK (pronounce veee).

to be continued…in part 3….

There goes another freebie from fifteenpeas.com.

This Wordpress plugIn enables the creation of a simple weekly time table.

  1. On the Y axis you enter whatever you want (“Shop opens” for example)
  2. On the X axis you enter the time in your favorite format (“from 8.00 to 18.00” for example)

No control is done on the format you use since it’s only characters, so try to set a convention such as : 12h00-18h00 or 1:30 am-2:00 pm.

To display the result, just use the shortcode as follows: [wttdsp entry_id=5] where 5 is the id of your time table.

This is an example result

This is how it is styled in the admin side. Use these selectors in your own stylesheet client side.

<style>

/*
* The time table
*/
#wtt {padding:2px;}
#wtt th { background-color:#DDDDDD; padding:5px;}
#wtt tr { background-color:#EEEEEE;padding:5px;}
#wtt td {padding:3px; }
/*
* The entry inside the table
*/
#wtt .wttentry {font-weight:bold}

</style>

To install it:

  1. Download the zip file here
  2. Uncompress and copy the wtt folder into the Wordpress PlugIn directory
  3. Activate the plugIn from the WordPress plugin menu.
  4. A new WTT menu will appear in the admin panel
  5. Start to fill and then use the shortcode in one your pages/posts

This is the admin menu

If you enjoy it, if  it helps you …well…donate


Well, I’d like to consider this as an introduction to a mini series of posts which will guide you through the intricate, vasts, and sometimes tedious, ways of the web development market to the full completion of a web project using a framework.

But first, a little history….

In the early times of the web and all its wonders, like PHP for example, we rapidly knew that it was mandatory to think of what we developed in a project as an asset for another project. Re usability was in our minds (and still is).

All along we’ve been crafting pieces of codes that would be used from project to project with, of course, tiny modifications based on the context/client’s peculiarities.

And we weren’t the only ones to do that ! A whole planet earth of developers seemed engage into it.

“we’ve been crafting pieces of codes

that would be used from project to

project”

An that is obvious ! Who wants to re invent the wheel ?

In order to spend more time in the user experience and the graphic design of things (…yes, because remember this: the wrapper is what is seen first..and this rule can be applied to many things…look at the music industry….) we had to reduce the development time. That meant we had to be able to reuse code developed by us and others by remaining compliant to the market trends.

And in the Internet field…GOD KNOWS THERE HAS BEEN A LOT OF TRENDS !!!!

One of them is:  Separate the content from its container…the CSS and the template engines were born ! That way, all sites could follow the graphic trends for not to be forgotten in the  hall of fame of tasteless websites.

And what about the databases ? There was no MySQL at that time ! And when MySQL began, it was missing things like indexes. And what will be the tomorrow of databases ?

Data persistence is what a client wants. The data is the most valuable asset of one’s business. (We know it for sure as we developed a successful Business Intelligence branch within fifteenpeas). Therefore, data should be able to be migrated to any database. But sometimes that meant that we should adapt the business logic (aka: modify the code) of the web application !

“The data is the most valuable asset

of one’s business”

Thus came database abstraction !!!

And then, to improve performances came: caching. And then to improve the search Engine Optimization came the nice urls (without the ?&&&?&?&). And then to be able to read what others did in their code, and to drive developers to a common best practice, came: The Design Patterns. And then for re usability came the Object Oriented Programming (best known as OOP). And then…

Oh come on…stop there…too much of novelty in here. How can we stick to all this easily and remain efficient along the way ? How can we dig into someone else’s code and yet feel like we’ve coded it.

BY USING A FRAMEWORK !


Ok, i will end this first introductory post here. But first here goes some definitions out of the web.

See you in part  2 of…GEEEET USED TOOOO FRRRRAMEWORKS ! (muhohaha…MUUHOHAHA)


Definitions:

  • Database abstraction : all the concepts of the database engines without being tied up to a specific vendor.
  • Template Engines : are code generators using templates interspersed with tags that contain actions or data references. A template engine typically follows a model-view programming pattern, separating the data source from the presentation.
  • Design Patterns : is a general reusable solution to a commonly occurring problem in software design.
  • SEO : is the process of improving the volume or quality of traffic to a web site or a web page (stands for Search Engine Optimisation).
  • OOP: is a programming paradigm that uses “objects” – “data structures” consisting of datafields and methods together with their interactions – to design applications and computer programs. (wikipedia)

Yep, I’ve just got my Smashing book and I couldn’t wait to read it through.

If you’re in WebDesign or interested in WebDesign Smashing Magazine is definitively the website you should check/bookmark and subscribe to their rss feed.

Everything you need to know is there.

And now they have concentrated the best knowledge of the industry into a wonderful book that, definitively, worth it’s price.

The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs. And lastly, you will also get a peek behind the curtains of Smashing Magazine.” (resource)

When you star a blog you find yourself facing a lot of things. One of them is keeping it attractive with good illustrations and photos.

Lately, I came across this wonderful Wordpress Plugin which really helps in finding the right images for your posts. Here is how it works.

  1. Dowload the plugin
  2. Extract the zipped folder
  3. Put the folder in your WordPress Plugin folder
  4. Now Go to your admin panel and activate the plugin in the plugin section

This plugin adds a box next to the Posts editing box. You can perform the searches and it will display the images related to your search. Once you have found your image, just drag and drop it into your post  et voilà.

Hence the idea is fine, the stock of photos comes from crestock.com and they are nearly all watermarked. Often, you will have to back link them in order to be compliant for its use.

I like the idea, but it would have been better if the plug-in would have been searching through more stock photos resources.

Find it here http://www.freebieimages.com/

This is a free fifteenPeas release. It is somethonk that bothered me for a while when deploying Wordpress installs.

The Wordpress PlugIn “Visit Site” Link Enhanced is a dead simple plugin

which allows :

  1. to add a target =”_blank” attribute to the “Visit Site” link on the admin header,
  2. to add another link next to the “Visit Site” link

The additional link will display just as the “Visit Site” link does and it is totally optional. However, the url field and the name field must be filled to make the new link work.

The plugin will create an entry in the the Settings menu of your Wordpress Admin Panel.

And this is the vsle options screen.

Installation

  1. Download the vsle WP plugin just here.
  2. Unzip it and copy the complete folder into the “/wp-content/plugins/” directory
  3. Activate the plugin through your Admin Panel (Plugins)
  4. Go to the settings menu to modify the options.

Feel free to use it, modify it and copy it at your will !

If you like it, if it helps you, well…


Hello WebWorld!

23 Feb
2010

And there it goes. The first post of, we hope, a long series. All dedicated to improve your way into Web Technologies and Digital Life. There will be hints and tips, reviews, point of views, tutorials and goodies.

Hope you’ll enjoy it !

top