Peter Sofocleous | Web Developer

Deep today launched Deeplify.com - our new Content Management System (CMS).

We have been working on our new CMS for some time now and its finally ready to share with the world. We took our existing CMS (DeepAccess) and rebuilt it from the ground up. To start off with we built this with Subversion. We did this for a few reasons including so all the developers at Deep could develop simultaneously and we could track changes across different versions. The next change we made was to change the entire structure of the CMS. Our biggest problem was knowing what version of DeepAccess was on what website. Also if some bespoke changes were made to a client you could then not update the CMS without a significant investment (in time & money). So with Deeplify we introduce a centralised core. All our PHP classes and all the HTML for the CMS are centralised. This means if we want to upgrade a file or find a bug we can update it once and it will be upgrade all our clients. No more comparing files and wondering if the world will end if we overwrite something.

A key area of a CMS is how well it can optimise its content for search engines. With Deeplify we have built upon our existing SEO capabilities and expanded it not only in features but in ease of use. Deeplify now supports browser titles, meta keywords, meta descriptions, HTML sitemap and XML sitemap. We have also included a feature to allow the user to view and modify their titles, keywords and descriptions all on one page. So this is much more time saving than the old loading of each page, check the SEO and modify. The HTML and XML sitemaps are also live data. So if you add a page you do not have to regenerate your sitemap.

One of the most impressive features we have developed is called “Live Edit”. An issue some people have expressed is that they type the text content for a page in the CMS and when they come to look at it on the website it does not look the same. This is because the template and stylesheet are separated from the back-end. DeepAccess could preview pages before they were published. So we took this and incorporated it with some fancy coding. Now in Deeplify, double clicking on a text area (in Live Preview mode) launches a popup WYSIWYG editor which updates the page text live as you type. Users can see exactly how the text will render and where it will break on the page. We have received excellent feedback on this feature and we hope to expand on it soon.

DeepAccess also had module based permissions with actions (like add, edit, delete) for each one. We found this was a little to complex so we simplified this. For added security we placed the permissions check on the PHP class rather than in the PHP that was calling the class. In Deeplify, simply drag and drop the module you want a user to have access to.

We wanted to reduce the amount of bespoke work we made for clients. Most of the time we were making a list of one form or another… a video manager, a news manager, etc. So we developed a List Manager. It allows us to create a list by defining its data structure. Then the list appears as a normal module with Deeplify which they can populate with their content. This module is extremely powerful as it means we do not have to code new modules every time we make a website.

Just a couple more features we added. You can now upload multiple files to Media Manager rather than one file at a time. Also we developed a backup module, so you have backup the menu, content, settings and media manager before the user makes any drastic changes. These backups can be restored at any point to roll the website back to an earlier version.

To conclude we feel this is a vast improvement on DeepAccess and we hope it pushes Deep to the next level. Have a look for yourself at www.deeplify.com

Deeplify.com - Home

Deeplify.com - About

www.golfliveevent.com

Watch Learn and Indulge your Passion

Brand Events, one of Deep’s existing client which host events such as Top Gear Live (live.topgear.com) and Taste Festival (www.taste-festivals.com) have created a new and unique event.

GOLF LIVE is a new event to be held at Stoke Park on May 14 – 16, 2010. This truly engaging event is designed to give amateur golfers of all ages and abilities the chance to indulge in their passion by watching and learning from the best in the game. Leading professionals and coaches will host instructional theatres based around specific golfing skill sets such as long-game, short-game, bunker-play, chipping and putting.

The website is an integration of XHTML, FLash and Ajax to deliver a stylish and slick website. I used jQuery (www.jquery.com) as opposed to Yahoo’s YUI (developer.yahoo.com/yui) and I have to admit I found it lightweight and performed very well. Have a look for yourself.

Golf Live :: Home

Golf Live :: Talent

Deep was commision by WebsEdge to redevelop the Local Government Channel website. Our brief was to add to the existing functionality while giving the website a completely new look and feel.

www.localgovernmentchannel.com

With 500+ large videos (640×270 pixles) across the website, bandwidth is a definite concern. We decided to use AJAX to break up the website into sections. Each section is only called when its required thus saving on unnecessary data transfer. With a website so heavy, efficiency is a must. We spent some time optimising and improving the speed not only of the data processing but the delivery of that data. The videos are on a seperate server so that streaming has no bearing on the server load. We are caching PHP functions, MySQL queries, and HTML output. We are even caching friendly URLs.

The redeveloped website had to be ready for May 4th to coincide with the start of the annual “Council Worker of the Year” awards hosted by the Local Government Channel website.

Local Government Channel - Home

Local Government Channel - Awards

Are you a sharp shootin’ font-master or a no-good calamity who can’t spell Futura?

To prove your design know how, shoot the font mounted on a target which is displayed on the banner. Points are scored for each successful round and the speed with which you complete it… but be warned, during the game the tables will turn, so keep on your toes.

http://www.deep.co.uk/games/font_game/

Deep Font Challenge

www.brand-events.com

We bring brands to life and inspire
consumer passions through live events and experiences.

During January 2009 Deep launched the new Brand Events website. This website incorporates several different technologies to bring together a website which reflects the personality of the team – fun loving, yet hard working and promotes their top global brands such as Taste Festivals and Top Gear LIVE.

Firstly we had to construct a Event Manager which allows Brand Events to add all their events they hold across the world. This data is provided in XML format for use on the homepage (www.brand-events.com/) and in a PHP array for the calendar page (www.brand-events.com/events_calendar/).

Several pages across the website are flash based. For these a text only version is running in the background. On the homepage we had to construct a 3D model and animation of the world and plane. These for put together and incorporated with data from the events manager to give the user a more interactive experience. On the event calendar we had to find a way to display all the events for a country, event and date. We did this with a table of data with events marked against the year’s months. We used Yahoo YUI to make the JavaScript animation requires to show this data on a mouse over action. All this data for the events is also written in the mark-up to enable Search Engines (like Google) to index.

One of the biggest challanges with this website was the fact that it is designed to a four colomn grid with rounded corners added to some areas of text and to all images. This might not sound as a big deal but when you need the entire website to be content managable by the client without them having any HTML knowledge. We decided the best approach was to modify our WYSIWYG editor in our CMS (DeepAccess) to automatically position images and to allow the use of code snippets to handel all the rounded corner text blocks. By the end this enabled us to content manage a conplex design with relative ease.

Brand Events - Homepage

Brand Events - Who We Are

http://www.maris-interiors.co.uk

Maris Interiors LLP is the UK’s leading specialist in office design, project management, fit-out, refurbishment and furniture supply. We create world class working environments for occupiers throughout the UK and Europe.

Last week Deep launched the new website for Maris Interiors. This is a slick flash website with large scaled images. The biggest challenge with this was was its shear size. With over 150 pages, and a large image for each page (1400×937px averaging between 300KB-500KB), it was important not to compromise performance. Since the images are so big we decided not to stop the page text from loading until the image was download. So if someone has a slow internet connection they still get he page content. Also the entire website’s content is contained in one XML file to speed up navigation within the website.

This website was also constructed in Flash 9 to take advantage scaling images. The usual box of tricks is included on this website. We have friendly URLs, text only version and changing browser titles from within Flash.

Maris Interiors - Homepage

Maris Interiors - About Overview

www.deep.co.uk

On the 1st of September 2008 Deep launched it’s new website. This website is probably one of the smartest websites I have ever worked on. There is so much behind the scenes that the ordinary user never has any idea about.

First of all we had to construct a system to manage the enormous Deep portfolio. We made a system that allows the admin user to assign different elements (images, thumbnails, text etc) to clients and disciplines. With a few clicks a project can be featured on the homepage, or placed in a client gallery or discipline gallery. Everything is stored in the database for easy access, and cached in XML files for fast flash downloading.

Friendly URLs was a bit of a challenge. The website runs off Deep’s own Content Management System (CMS) which has build it in friendly URL support. However with the portfolio system we had to constructed an add-on module which would seamlessly integrate into the existing module.

The website has a Flash image scroller to allow to user to select a project and click through to the project gallery. Behind all the flash elements sites a fully functional and visually almost identical HTML version.

We didnt want to create a Flash version of the website and then lose ordinary HTML functionality that users rely on. These are the address bar, the browser navigation buttons (back and forward) and the browser title. So once inside the Flash gallery we insert a hash character (#) in the URL ( eg. from: /portfolio/client1/image1/ to: /portfolio/#/client1/image1/). This means we can get Flash to update the URL without leaving the physical page. We also update the browser title at the same time.  This is all done with Flash to JavaScript communication. Also as an added bonus the use of the hash character (#) in the URL triggers the browser to register a page change so the back and forward buttons now work. So all that is left is getting Flash to read after hash character and load the correct data into the gallery.

Once the new website was ready we optimised it for Google. We saw our Google links increase by approx 1500%. This has meant our traffic has also increased by approx 400%.

Deep Homepage

Deep Gallery

http://www.hunters.co.uk

In their own words, Hunters is….

“A leading architectural practice and professional building consultancy to the private and public sectors, both in the UK and around the world.”

This website is really 1 main site and 5 micro-sites all rolled into 1 website. Size this is a Flash website, the biggest challenge was its shear size. Loading 1 XML file for a Flash website is ok, but loading XML for 6 websites and still asking the website to load in a reasonable amount of time is stretching it a little. In the end Adam (one of the other developers at Deep) broke the website into 2 SWF files. 1 was the preloader which loaded the basic frame, XML for the website and search facility as well as the XWF for the main site. Once everything is loaded the main site SWF is ran.

All in all the website is about 1MB to run the homepage however the preloader is only 4KB so the user doesnt have to wait long to see something happening.

As this is a Flash website we needed to treat it like the Deep gallery pages. We needed changing browser titles, friendly URLs and the use of the browser back and forward buttons. This is all done through JavaScript as it is on the Deep website.

The whole website also has a text only version should Flash or JavaScript fail to load. This also enables Google to index the content of the website.

Homepage

Architects Homepage