Category Archives: Web Development

When bespoke isn’t best

Wherever possible I have always chosen to develop bespoke designs for my websites, be they static marketing sites or developed using content management systems.

When discussing the design for a new project with a client I tend to suggest looking at a representative sample of sites (usually, but not necessarily) within their industry in order to identify features and design aspects that they like. I then seek to bring together these features, in combination with the client’s existing corporate branding, to develop a best of breed site intended to be greater than the sum of it’s parts.

I do, however,  find template sites to be great sources of inspiration. This is due in part to the fact that they are often instrumental in highlighting emerging technologies and techniques within the design sector.

When it comes to choosing a content management system, however, there are a number of very compelling reasons why bespoke is not best. Content Management Systems broadly fall into one of three major groups.

  1. Open Source Content Management Systems include Joomla!, WordPress and Drupal, each of which can provide different strengths and benefits depending on the nature of the project.
  2. Proprietary Content Management Systems
  3. Bespoke Content Management Systems are created on an ad-hoc basis by in-house development teams, often to meet the specific requirements of a particular company or project.

I would not advocate the use of bespoke systems for a number of reasons.

  1. They are High Risk.
  2. They become quickly dated or obsolete.
  3. Lack of extensibility.

[article still in draft stages]

 

 

 

 

Responsive web design: What goes around…

“Responsive Web Design essentially indicates that a web site is crafted to adapt the layout to the environment that it is being viewed in.”1

At Generation X it has always been a first principle to consider the wide variety of user platforms when designing websites. Cross browser compatibility and varied browser resolutions have always been tested as an inherant part of the design process since I first began designing websites in 2003, so the concept of responsive web design is not new to me.

The term responsive web design, however, first came to my attention last month when I read an article by James Pearce entitled Not a mobile web, merely a 320px-wide one2, orginally written in October 2010 in response to Ethan Marcotte’s seminal article3 on A List Apart.

Proponents of responsive web design seem to fall into two camps – the purists and the adaptives. The distinction lies in whether exactly the same information is presented across all platforms – the purist arguemnt – or whether the design should respond to different platforms by delivering “different content and services altogether – or, at least, a differently prioritized version of the default desktop experience”.2 As is so often the case, both sides of the argument have much to recommend them.

Allied to the concept of responsive web design is that of Mobile First,4 whereby web applications and websites are designed for mobile devices first, rather than the mobile version being adapted from the desktop version. The case for Mobile First is argued in the book of the same title, by Luke Wroblewski.

I should point out that responsive web design principles have (not yet) been applied to this WordPress blog.

1 Responsive Web Design, Wikipedia
2 Not a mobile web, merely a 320px-wide one, by James Pearce
3 Responsive Web Design, by Ethan Marcotte
4 Mobile First by Luke Wroblewski

f-Commerce: The Rise of Social Commerce

It is widely contended that f-Commerce transactions will exceed Amazon’s annual sales over the next 5 years.

f-Commerce, also known as Facebook commerce and f-comm, refers to the buying and selling of goods through Facebook. f-Commerce is a subset of Social Commerce, the use of social network(s) in the context of e-commerce transactions. These transactions can be completed either on the  Facebook, or off-Facebook using their Open Graph Protocol1, which enables the integration of Facebook-enhanced features on external websites or ecommerce shops.

As an f-Commerce developer the first decision to be made is how to deliver products and content within the Facebook environment. f-Commerce pages can be presented using either iFrames or Facebook Apps, each offering advantages and disadvantages.

1 Open Graph apps enable the developer to deeply integrate into the core Facebook experience, including Timeline, News Feed, and Ticker. See http://developers.facebook.com/docs/opengraph/

 

Joomla! CMS Development Status

Joomla Version 2.5.0 is the second release made within the new six-month release cycle that started with the delivery of Joomla 1.6 in January 2011. Version 2.5 is a long-term-support (LTS) release that will be supported for at least 18 months.

Joomla Version 1.7 reaches end of life on 24 February 2012. All users of version 1.7 are advised to update to version 2.5.0 before that time.

The following list of key dates in the development cycle should prove useful.

Key Dates

Long Term Support Release: Joomla 2.5

General Availability Date: January 24, 2012

End of Long Term Support: December, 2013

This is the culmination of the 1.6/1.7/2.5 series

Long Term Support Release: Joomla! 1.5.25

End of Support: April 2012. Major security fixes will be done until release of 3.0 in September 2012.

Standard Support Release: Joomla 1.7.4

End of Support: February 24 2012

Upcoming Major Release: Joomla! 3.0

Current status: Planning

Expected General Availability Date: September 19, 2012

Joomla 2.5 Stable Released

Joomla! 2.5 - Extra Features! Easy Updates! Too many exclamation marks!As of January 24th 2012 Joomla 2.5 was made generally available, in line with Joomla’s six-month release cycle which  started with the delivery of Joomla 1.6 in January 2011 and Joomla 1.7 in July, 2011.

At first glance it seems very similar to the previous version, but “under the hood” there are a number of key enhancements and new features, including:

Automatic notification when a Joomla or extension update is available. This extends on the update functionality already present in previous versions. As a Joomla developer I find this particularly welcome.

A better natural language search engine to the Joomla core, faster and more versatile than the standard search, and offering better functionality such as auto-completion and stemming (for example if you type “running” in a search field you also see run).

Multi-database support, which should make Joomla more attractive to a corporate user-base and improve scalability. Joomla 2.5 offers support for Microsoft SQL Server, with Oracle support promised in the near future. Previous versions of Joomla supported MySQL exclusively. Again, from the perspective of a Joomla developer this is a particularly welcome feature in raising the profile of Joomla amongst prospective clients. Generation X already offer a choice of Linux or Windows-based hosting to our clients, and can now offer Joomla on either platform. However, as an advocate of Open Source software my default setup will remain MySQL-focused.

Joomla 2.5 demonstrates what a truly collaborative community-driven software project Joola is, having been developed with the feedback gathered from more than 2.5 million Joomla forum posts, 540,000 Joomla forum members and data from more than 8,800 Joomla extensions.

However, before widespread adoption can take place wider support for Joomla extensions such as Virtuemart and Community Builder will be needed for Joomla 2.5. I had been hoping to use Joomla 2.5 on a new eCommerce project today, but Virtuemart 2.0 does not yet support this latest version of Joomla, and while support is promised within the next fortnight it seems prudent to develop the site using the Joomla 1.7.4 version, and upgrade to Joomla 2.5 when Virtuemart support becomes available (and stable).

 

Add a link to a .swf file

As part of my ongoing work for a client I sometimes update their home page using a Flash .swf file provided by their corporate marketing department. In order to improve user navigation I have been looking for way to add a link from the swf file to specific content within my client site. However, I don’t have access to the .fla source file, and can’t therefore simply update the actionscript within the Flash movie.

Initially I had simply hoped to add an <a href=”link.html”> style link around the swf object. However, searching in Google, the established view seems to be that it is impossible to add an html link to a .swf file without access to the source.

In web design and development, if not in other aspects of life, my mantra is always to find a way, so I started to think a little more laterally. My solution is to place a layer over the Flash file, containing a transparent image, linked to my target. I’ve tested this solution in IE7, 6, 5.5, Firefox 2 and Opera and I’m delighted to report that it seems to work.

The code which inspired my original implementation of this technique was found on a Hawaiian web design company website, and whilst I intended to add details of my exact implementation here, time has defeated me so far. Therefore I’ve added their code below until I get a chance to document my own.

1. First add the wmode parameter transparent to the flash object that is going to be embedded.

Like so…  <param name=”wmode” value=”transparent” />

(note:) If you are using the swfobject.js method to embed your flash files (recommended) you can add the transparent parameter by simply using the example below to append to your current setup:

<script type=”text/javascript”>
var so = new SWFObject(“movie.swf”, “movie”, “700”, “300”, “#ffffff”);
so.addParam(“wmode”, “transparent”);
so.write(“flashcontent”);
</script>

 

2. Now wrap the flash movie in its own div tag and and apply some css so that we can set the position to be below the header text and description div.
(See example below for xhtml and css code.)

<div id=”header”>

<div id=”flash”>flash file goes here.</div>

</div>
And the accompanying css for the above is:
(note the z-index and absolute position for #flash div)

#flash {
width: 700px;
height: 300px;
position: absolute;
z-index: 0;
}

#header {
height: 300px;
margin-bottom: 30px;
text-align: left;
}

3. Ok, now lets go ahead and set up the html layers that will be displayed displayed above our flash content. In this case it will be an h1 header and a description that is in its own div that is above the flash media.

(Two items to be positioned over the flash movie)

The h1 css is: (note: feel free to style it however you want or use a different tag, the important thing is the z-index and absolute position.

h1 {
padding-top: 15px;
padding-bottom: 15px;
margin-left: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #666666;
font-weight: bold;
position: absolute;
z-index: 1;
}
Now for the description css which is going to be in its own div tag containing text and will be positioned above the flash element as well: (note the z-index and the absolute position again)

.description {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
margin-left: 15px;
margin-top: 35px;
padding: 5px;
font-weight: bold;
line-height: 14px;
position: absolute;
z-index: 1;
}

4. Thats it, the finished code in the body of a web page will look like this:
(note: Code is placed in the header div which has no z-index or absolute position necessary)

<div id=”header”>

<div id=”flash”>flash file goes here.</div>

<h1>Heading Text</h1>
<div class=”description”>Your description text</div>

</div>

And the final accompanying CSS is:
h1 {
padding-top: 15px;
padding-bottom: 15px;
margin-left: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #666666;
font-weight: bold;
position: absolute;
z-index: 1;
}

.description {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
margin-left: 15px;
margin-top: 35px;
padding: 5px;
font-weight: bold;
line-height: 14px;
position: absolute;
z-index: 1;
}

#flash {
width: 700px;
height: 300px;
position: absolute;
z-index: 0;
}

#header {
height: 300px;
margin-bottom: 30px;
text-align: left;
}

HTML Layers and Flash Position Summary:

How to layer a Flash movie below another html div tag or layer.

To position a flash movie under another html element basically you just need to give the flash move a parameter of wmode transparent and position it absolutely with a z-index of 0. Do this by putting the flash object in its own div and using css. (see examples above)

For the items that you would like positioned above the flash movie set their z-index to 1 and position them absolutely as well. After that it’s just a matter of putting it all in the div or container that you would like applying the css and adjusting the margin and padding to your specific needs.

Under Fire

Generation X Hosting is currently experiencing what we believe to be a distributed denial-of-service attack, also known as a DDoS attack.  A distributed denial of service attack occurs when multiple compromised systems flood the bandwidth or resources of a targeted system in an attempt to make a computer resource unavailable to it’s intended users. Our network providers are working to blackhole the attack higher in the system.

Black hole filtering works by forwarding malicious traffic to an imaginary interface known as Null0 – similar to /dev/null on Unix machines. As an invalid interface, traffic routed to Null0 is essentially dropped. This technique also minimises performance impact during the DDoS investigation so that the rest of the network remains stable under the increased load. 

I am pleased to report that most mail and web services have now been restored and that in spite of the attack our web monitoring service is currently showing an uptime report of 99.96% across the Generation X network.