Archive for the ‘HTML, CSS, JS’ Category
Presenting the meta_tag plugin for the Smarty templating engine!
Click here to download block.meta_tag.txt
Click here to download outputfilter.meta_tag.txt
This plugin allows you to change the page title and meta tags from any template used to generate page output.
Purpose
Typical web page display scenario:
Web page “Home” consists of Smarty templates:
- header.tpl – generic page header, HTML declaration, <HEAD> & <BODY> tags etc.
- navigation.tpl - site navigation.
- home.tpl – the main content for a given page, in this example “home”.
- footer.tpl – the page footer – closing </HEAD> & </BODY> tags, javascript tracking etc.
In this example, the page title and meta data would be in header.tpl, whether as Smarty variables:
<title>{$page_title}</title>
…or hard-coded values:
<title>Hello world!</title>
Using the meta_tag plugin, title and meta tag values can be updated from any other template used to generate the page.
The following example contained in footer.tpl would add “Product description” to the page title:
{meta_tag type=’title’ method=’add’}Product description{/meta_tag}
The following example contained in home.tpl would replace the page title with the text “Important business report”:
{meta_tag type=’title’ method=’replace’}Important business report{/meta_tag}
The following example contained in footer.tpl would add the text “jacket,blue,leather” to the meta keywords:
{meta_tag type=’keywords’ method=’add’}jacket,blue,leather{/meta_tag}
So… what’s the point?
Often when you’re displaying dynamic data across several templates it isn’t practical to customise the page title and meta information using Smarty assign(). Also,the logic used in templates processed after the page header might contain information which would be useful to reference in the header.
Caveat
It’s preferable to call load_filter just once per output, BEFORE the instruction to display() or fetch():
$smarty->load_filter(‘output’, ‘meta_tag’);
$smarty->display(“template.tpl”);
In a scenario where multiple templates are used, they should all be contained within one container template, to ensure the output filter isn’t called repeatedly. In the above example, template.tpl might be:
{include file=’generic/header.tpl}
{include file=’generic/navigation.tpl}
{* load main page body – filename is contained within var $template*}
{include file=’`$template`}
{include file=’generic/footer.tpl}
Installation:
Click here to download block.meta_tag.txt
Click here to download outputfilter.meta_tag.txt
Change the file extension on both files to .php, then copy them to your Smarty plugins directory (smarty/plugins). Detailed usage instructions can be found in the comment block of each file.
Microsoft is urging developers to tag websites in preparation for the release of IE 8.
According to a post made on an MSDN blog, a public beta of IE 8 will be available in the third quarter of 2008 and it threatens to “render content in its most standards-compliant way by default”. As this is the first time Microsoft has stooped to such murky depths, we are warned that this will play havoc with content written for IE 7. The advice: to implement a specially created meta tag instructing IE 8 to render the content as if it were IE 7.
This is all a lot of fun, I’m sure you’ll agree, and it does seem to offer a pretty straight-forward solution for achieving backwards compatibility. However, given that the two rendering engines are so markedly different, the most excitement will surely be reserved for the future hours spent hacking IE 8 content to display correctly in IE 7. I, for one, can’t wait for that.
Our latest project, a fully searchable database of the UK and Ireland’s richest inhabitants, is now live.
Find out how last year’s contenders have faired, identify the wealthiest people in your region and more at the Times Online website.
The new BBC homepage, launched today, allows users to customise their experience by selecting content and creating garish colour schemes. It’s hardly a new idea, but it’s well implemented, and if nothing else, it’s worth the admission fee for the kitsch analogue clock displayed in the header.
Please note – I despise the term Web 2.0, but as there’s no recognised alternative term that I can think of, I will continue to use it under duress.
Five viral microsites promoting the new MTV series Bedroom Diaries have been launched. Production by us here at Include.
www.ipartypartypartyandmisbehave.com
www.itfreaksmeoutthatiquitefancyherbutiquitefancyhimtoo.com
www.inmyreligiongirlsaretotallyofflimits.com
www.isleptwithsomeoneandthecontraceptiondidntworkandbroke.com
www.isitsohardtofindaguythatisntatotalxxxxx.com
You can find out more about the series at Bebo.
Junior Web Developer – London, UK
Include – http://www.include-digital.com
Include is a digital design agency based in London. Our clients include Universal, EMI and The Sunday Times.
We have an immediate requirement for a Junior Web Developer to join the team in our London office. Previous commercial experience is preferred but not a requirement; enthusiasm and the desire to learn is.
The position would ideally suit an ambitious individual who is looking for an entry point into the industry. The successful candidate will have the opportunity to progress within the agency.
Responsibilities include:
* HTML and CSS authoring, with an awareness of W3C guidelines.
* Updating existing websites and HTML emails.
* On occasion, answering the telephone, making tea, and generally mucking in.
Experience of the following is desirable:
* Designing digital media – primarily websites, HTML emails and online advertising.
* Photoshop, ImageReady or Fireworks.
* Flash/Actionscript.
* PHP/MySQL.
The post requires:
* Good verbal and written communication skills.
The position offers a starting salary of £18,000 plus 20 days’ holiday. The successful candidate will be given ample opportunity to develop skills in-house, with external training provided where required.
To apply:
Please send your CV to [email protected], including any relevant URLs or portfolio material.
For more information on Include, please visit http://www.include-digital.com.
ABSOLUTELY NO AGENCIES! THEY SMELL OF POO AND KIDNAP CHILDREN! FRED WEST WAS A RECRUITMENT AGENT AND HE CAUSED NO END OF BARNEY RUBBLE!
Twittervision is a fun Twitter / Google Maps mashup that shows a never-ending stream of banal Twitter messages in realtime from across the globe.
SiteVista is a new service for testing HTML emails across a wide range of email clients. Each test results in two screen grabs: the email displayed in the software’s preview panel, and another showing the entire message when opened. Currently, the service supports:
Support for the following email clients is due imminently:
SiteVista is a great idea that deserves to do well. The price point is currently way too high (it’s at least 50% too expensive), and the lack of Lotus Notes support (yes, Lotus Notes still matters, as it is used by many large corporations) is a let down, but these things may well come in time.
Whilst working on a Flash website recently, I was surprised to note that all Javascript-executed new window commands were being caught by my browser’s pop-up blocker. This happened in both Firefox 2.0 and Internet Explorer 6 (I’ve so far resisted Microsoft’s attempts to force IE7 on me, although I don’t think I can hold out for long).
I’ve always used the Flash-calls-javascript-function-on-HTML-page approach before. Here’s an example of the code I might use to assign the getURL() event to my button click in Flash:
myBtn.onPress = function() {
getURL("javascript:openNewWindow('http:www.bbc.co.uk', 'bbc', 'width=400,height=200')");
}
where openNewWindow() is a Javascript function defined in the holding HTML page which simply calls the open() method of the document.window object.
Logically, I thought this approach would work, as the Javascript function is being executed as a result of user-interaction. However, this proved not to be the case, despite the fact that other sites that seemingly deploying the same solution successfully circumnavigated my over-zealous pop-up blockers.
Macromedia (ok, Adobe – some habits die hard…) themselves seemed also to advocate this as a valid approach. Where was I going wrong?
Eventually I downloaded the sample files (availabled for Mac or PC) and examined the code – all three lines of it! There was only one difference – the assignment of the getURL() method to the onRelease() event, rather than the onPress() event in my example above. Unconvinced this would make a difference, I duly updated my code so as to eliminate the possibility and guess what? It worked! My pop-ups were now being allowed to open.
There doesn’t seem to be much in the way of online documentation for this phenomenon. Brian’s post over at Midwest Macromedia Studio Users Group comes near the mark, but rather than the method of assigning the event to the button, it is actually the event type itself that plays the significant role in deciding whether a blocker will be triggered or not. onPress() events will always trigger a pop-up blocker while onRelease() events escape undetected.
So given that I’m happy to use an onRelease() event rather than on onPress() event, is everything now rosy? Unfortunately not. I also needed to include links opened in new windows using inline anchor tags within HTML formatted textfields. Here’s an example of how the code would be assigned to the textfield:
myTf.htmlText = 'Click <a target="_blank" xhref="http://www.bbc.co.uk/" mce_href="http://www.bbc.co.uk/">here</a> to view';
This will invariably result in the new window being blocked.
If anyone has a workaround for this, please let me know!
For a recent project, I needed to make a call to a Flash function from a link in the HTML page in which it was embedded. In the past I’ve done this many times but, as circumstance would have it, not for a couple of years or so. To refresh my distinctly blurred recollection of the methodology, I decided to consult Google.
I quickly found an example of the code with which I was familiar. The approach uses JavaScript to access the the Flash object’s id attribute and then calls its SetVariable() method, passing a string variable name followed by a value. Within the Flash file, a constantly looping script (or a ‘Watch’ed variable for those of you with a more CPU-sympathetic outlook) is used to detect changes in the value of the variable. It is then simple to map values to functions and all’s good.
Except it was buggy at best. For non-IE browsers, this method required the ‘swliveconnect=true’ attribute to be added to the EMBED tag, and this provided reasonable compatibility across PC browsers. Sadly however, Mac IE users were left wondering if their mouse button had broken.
So what are the alternatives? If you’re publishing for Flash player 8 (or having fun with AS3 and Flash player 9) the ExternalInterface class is the way to go, providing a native API which makes player to container communication a breeze.
In this instance, however, I was publishing for Flash player 7 and the overwhelming weight of public opinion seemed to favour OSFlash’s Flash Javascript Integration Kit. It looked good; it works “across all major browsers and operating systems” and it’s also open source. So I downloaded the latest release, and set about making JavaScript and Flash the best of friends. I just wasn’t ready for the hours of frustration that followed.
It turned out that two errors in the online sample code were the source of my frustrations:
- To access a method of your Flash file, you first need to create an instance of the FlashProxy JavaScript class which forwards the requests on to the included Flash gateway SWF. Create an instance according to the sample on OSFlash but disregard the parameters given by way of an example. The FlashProxy constructor takes two parameters only, the first is the unique id used to reference the Flash object, the second if the location of the gateway SWF. The Flash object id should not be included in the argument list.
- The FlashTag JavaScript class provides the functionality to embed the player on the web page. Unfortunately, it simply doesn’t have the addFlashVars() method referred to on the site. Instead use the setFlashvars() method.
I’ve since found that the documentation included with the download describes the deployment process correctly. It’s a little late for me, but if you’re having install troubles, ditch the web instructions and update your code with the above and all should work a treat.
activeCollab is an impressive open source clone of Basecamp. As you can see from the screenshot, it looks remarkably like Basecamp, even down to the navigation being nearly identical.
This application has a great deal of potential. I’m a huge fan of Basecamp – whilst activeCollab is clearly missing some of Basecamp’s headline features (most notably Writeboards), the fact that it’s free and installable on a third-party server is a real boon. As it’s open source we’re sure to see a host of user-generated add-ons and improvements integrated in the near future.
The release of activeCollab is sure to encourage (force?) 37signals to innovate further to maintain their user base.
Opera Software have released Opera 9. The update includes a number of new features including:
- Integrated BitTorrent downloader.
- Preview the contents of a tab by hovering the mouse pointer over its title. (I often have a dozen or more tabs open so this feature really appeals to me).
- Apple-inspired downloadable widgets.
- New content blocker — “Block content” option is available from the page context menu.
Opera is quite some way behind Firefox and Internet Explorer in the popularity stakes, but it’s good to see another software developer offering an alternative browser.
The author of the CSS3 preview page, Joost de Valk, has launched CSS3.info, a site dedicated to information about CSS3.
For more information on CSS3, check out:
http://www.w3.org/Style/CSS/current-workÂÂ
David Greiner has written an interesting article on HTML email for Vitamin.
As a co-founder of Campaign Monitor, there’s little doubt that David knows a thing or two about HTML email. The article contains invaluable information on email clients, image usage and general advice on message content and structure. (Note the lack of discussion on multipart email – Campaign Monitor appear to strongly favour HTML-only messages, which are a big no-no in my book). However, I’m not convinced by his suggestion that CSS is a viable option when creating HTML emails. Now, don’t get me wrong, I’m a real advocate of standards and accessibility, but the same rules don’t apply to HTML email.
Tables are the lowest common denominator – they’ll work pretty much anywhere. CSS HTML emails are sure to be the answer in the future, when consumers and businesses alike have migrated to newer email clients, but for the time being, use tables if you want your email to email campaign to be a success.
Xyle Scope is a CSS debugging tool which allows real-time editing of style sheet information on both local and remote websites. It’s currently OSX only unfortunately, but if you do have a Mac it’s an absolute must:
http://www.culturedcode.com/xyle/
