W3Tech provide a reliable source of technologies survey so you can make your own idea on what is buzzing right now.

Visit them http://w3techs.com

The package is generally a directory containing several files. Even though all major browsers support Webfonts they all don’t do it the same way! That is why, usually, you should get these files included for each font

• .SVG
• .TTF
• .WOFF
• .EOT

Your Webfonts file must be reachable by your website. You might upload them there.

1.Include the webfont in the CSS

This is done using the @font-face command.

@font-face{ font-family: 'MyWebFont';
src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg'); }

Then link the stylesheet to your html file.

Now use the Webfont

To use the webfont you will have to use the font-family: command to any of the element you whish.

p { font-family: 'WebFont', Arial, sans-serif; }

And that’s it ! Short, plain and simple !

Bear in mind that

• IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.
• A service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE.
• IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to “image/svg+xml” in the server settings.
• Older browser won’t render the webfonts: just upgrade now !

Yet the community is less important than WordPress but DotClear still is a fine quality piece of software which will do what you are asking for without a problem.

It is a fine contender which is just waiting for you to give it a try. I installed it and browsed its features and it’s just perfect. As for the theming, if you are used with templates system then you will be at ease to build your own themes.

It also features an antispam system, a multiblog feature from one single installation, full localization,  rss feed, import/export form one one blog to another, …

The CMS uses also a plugin system which extends its functionality. And yes, you can also use it as a CMS.

Go and get it at www.dotclear.org

But it is also necessary to avoid going to much exotic or the expertise might become a problem instead of an asset.

SILVERSTRIPE has revealed to offer true flexibility faster  than no other CMS did. In fact, the CMS is just an application built on the Sapphire Framework. Thus, it is up to you to use the framework and go far beyond a simple CMS solution.

We’ve found Silverstripe to be a kind of crossover between Joomla and YII. But that is not all. If you decide to use pure html without using the framework, it will work too !!

Silverstripe comes with a wealth of modules that will extend the classic CMS features to photo galleries, integration with googleMap services, a blog system, payment solutions and much more.

On Silverstripe.org you’ll be able to also find themes and widgets. Easy to install, easy to use, extend and customize.

This is surely a very good alternative to other CMS solutions.

Try it at silverstripe.org

The setup makes the portrait of professionals using three questions:

• Who are you, and what do you do ?
• What hardware are you using ?
• What software are you using ?

This interesting reading will enlighten you over the vast diversity of jobs in the IT Industry or related and maybe, will make you discover fine software and pieces of hardware you never heard about before.

Just visit theSetup and see by yourself.

Well, sometimes we do not think about everything and that is why it is interesting to turn to others solutions like….SKELETON.

Created by Dave Gamache, Skeleton is described as

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

And that exactly what it is. By downloading Skeleton you already have implemented features such as :

• Responsive Grid Down To Mobile (based on 960 grid)
• Style Agnostic : no ui library used
• Strong typography hierarchy
• Nice slick buttons
• Simple tabs using jQuery
• Styled forms
• Use of media queries to best fit your target

And everything is very accessible and easy to use.  No cryptic code and not too much features (that usually you have to strip off from such kind of initiative).

SKELETON is a real streamlined, with just what you need, starting point for a website developement.

Visit http://www.getskeleton.com and give it a try.

Not so long ago, if you wanted to display nice thick crispy fonts on your site you had to create images of your text.

Then appeared nice solutions such as sIFR, facelift or other image replacement techniques. All with pros and cons, of course, but all facing problems in particular browser!

And now, here comes Cufón!

This is an alternative which is becoming a standard nowadays. Despite the merits of sIFR, Cufón is much easier to deploy and brings some interesting improvements:

• No plug-ins required,
• Works on every major browser on the market,
• Easy to use,
• very little configuration needed for standard use cases,
• Rapid,
• No impact on SEO.

Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript. Cufón has been tested in Internet Explorer 6, 7 and 8, Mozilla Firefox 1.5+, Safari 3+, Opera 9.5+ & Google Chrome.

It has been designed with developers in mind. Therefore the API is simple and configuration is usually not needed at all, as most of the needed information is provided by CSS style sheets.

Implementation

In order to function, we need to use the font converter utility on the Cufón website. Alternatively, you may download the source code and convert your fonts locally.

The Implementation is pretty easy:

1. Download Cufon (recommended the YUI-compressed version)
2. Generate your personalized font

3.  Replacing the text:

[html]
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="molot.cufonfonts.js"></script>
<script type="text/javascript">
Cufon.replace(‘h1′); // replace as necessary
</script>
[/html]

For the first line you can use the online version of the library.

[html]<script src="http://cufon.shoqolate.com/js/cufon-yui.js" type="text/javascript"></script> [/html]

As you can see, no jQuery like library is used so far.

Avoid delay display in IE by adding this line just before body closing tag:

[html toolbar="true"]<script type="text/javascript"> Cufon.now(); </script>[/html]

Of course, you can use JQuery selectors to target specific pieces of your design.
Don’t forget then to import the JQuery library!

[html] Cufon.replace(‘#mydiv h2′); [/html]

We use Cufón on this site ! Check the posts titles for example.

Check this site out http://www.cufonfonts.com/ as it contents ready to use Cufón fonts, so you can skip the generation process.

A tiny sample of the library.

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

You can enter a list of IDs for a multiple line Time Table. You can also enter html tags (htmlEntities supported).

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

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….

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)

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/