What is a QR Code?

Published | 16.35, 6th of October 2010, by Chris van Aurich | Technical

A QR Code is a matrix barcode (or two-dimensional code), readable by QR scanners, mobile phones with a camera, and smartphones. The code consists of black modules arranged in a square pattern on white background. The information encoded can be text, URL or other data.

Although initially used for tracking parts in vehicle manufacturing, QR Codes can now be used in a much broader context, including both commercial tracking applications and convenience-oriented applications aimed at mobile phone users (known as mobile tagging).

QR Codes storing addresses and URLs may appear in magazines, on signs, buses, business cards, or on just about any object about which users might need information. Users with a camera phone equipped with the correct reader application can scan the image of the QR Code to display text, contact information, connect to a wireless network, or open a web page in the phone's browser.

No comments | Make a comment (Average rating | 4.00 / 5)

HTML 5

Published | 16.07, 15th of September 2010, by Jay Vincent | Technical

The online world is currently atwitter (no social media pun intended) about HTML 5, and how quickly we as web developers can adopt this 'new' mark-up language as our formatting default. But just how much excitement should this really merit?

I've used XHTML 1.1 transitional for the last 4 years, and for good reason. Mostly, I enjoy the consistency of it. Everything lowercase, all attributes within quotes, all tags must have an end. The XML-rigidity of it is extremely appealing to me, and also makes it more readable when it comes to making amends or working within a team.

HTML 5 doesn't inherit this rigidity - any case is allowed, attributes not required to be in quotes and tags don't require an ending. I'm not so sure about this, it could quite easily lead to messy code and inconsistent standards, especially with new coders, and I don't think this is a good thing - surely, code consistency is best practise.

This personal gripe can be solved, however, by serving HTML 5 with an XML MIME type, thereby turning it into XHTML 5. This way, all the new elements and features of HTML 5 can be used whilst maintaining the strict coding standards I so enjoy.

Here are some features I'm really looking forward to using:

• Wrapping the a tag around any element, including block elements such as div - Up until now, this could only be done using a javascript fix.
• HTML 5 video - clearly the most talked about HTML 5 element is video, for good reason. Video on the web currently relies on plugins being installed within the browser such as Adobe Flash, or Microsoft Silverlight. With HTML 5, video playback is native within the browser, requiring no plugins or javascript integration. This also opens up the video element for CSS manipulation for things like opacity, overlapping and rotation (with CSS 3). Annoyingly, a codec squabble is preventing consistent cross-browser operability at present.
• Improved web forms - the text field has been revised, and HTML 5 now recognises input type="email", "tel", "url", etc, as well as returning validation through 'The constraint validation API'.

There are of course many more features, these are just some of the things that I can see will immediately improve my day-to-day life.

To find out more about HTML 5, visit http://www.whatwg.org  

No comments | Make a comment (Average rating | 4.80 / 5)

Internet Explorer 6

Published | 16.32, 11th of March 2010, by Jay Vincent | Technical

You may have seen several headlines in recent weeks about Microsoft's web browser internet explorer 6 (ie6):

"Google has begun to phase out support for Internet Explorer 6, the browser identified as the weak link in a cyber attack on the search engine."
http://news.bbc.co.uk/1/hi/8488751.stm

For people who aren't web designers/developers, the outcry against ie6 might seem irrational and trivial so I wanted to try and explain why this is such a big deal, and why Artlines Media will follow suit in dis-regarding ie6 in our browser-compatibility testing.

Security

The security (or lack thereof) of ie6 is predominantly what has prompted google to drop its browser support - essentially the straw that broke the camel's back. Vulnerabilities and flaws exist not only in the browser but also in the implementation of ActiveX controls, which allow programs to be installed through internet explorer. Malware, such as computer viruses and spyware, can be accidentally installed from malicious websites using ActiveX controls.

CSS Standards

Probably the most noticeable errors an ie6 user would experience is poor display of webpages - elements not appearing where they should, unwanted gaps, etc. This is due to ie6's terrible implementation of CSS, the styling language used to position and control presentation of a webpage. All modern web browsers now interpret CSS according to the W3C CSS 2.0 specification, with few discrepancies between browsers. And with CSS 3 just round the corner, it is holding the web back when websites must also cater for ie6 with its many CSS bugs and terrible CSS implementation. (check out http://www.positioniseverything.net/explorer.html to see some of these bugs)

PNG Support

PNG is an image file-type which allows for transparency and semi-transparency. Use of PNG images in modern web designs is on the up, yet ie6 does not support them. ie6 instead removes all transparency and displays the image with a solid colour background (usually grey). To get PNGs to work in ie6 requires long-winded javascript-based fixes, which are non-compliant themselves.

"Quirks Mode"

Microsofts poor attempts to follow set guidelines on CSS and javascript implementation has resulted in what they have branded "quirks mode" - a not quite there version of compliance. This has been a long-running joke in the web industry, but I feel 9 years of dealing with it has taken the joke too far.

So in conclusion...

It is so so frustrating for a web developer to create a website which follows all modern web standards and works perfectly in standards-compliant browsers such as firefox, only for the client to complain of ie6 issues. Accommodating for these issues has always been time-consuming and frustrating.

So from now on, when we design and develop websites for our clients, ie6 compatibility will be seen an extra service in our web development process.

No comments | Make a comment (Average rating | 4.38 / 5)

Integrating Instant Messenger with your website

Published | 14.27, 13th of May 2009, by Chris van Aurich | Technical

After recently doing some research on live messenger integration, I have found an easy way to incorporate Microsoft Instant Messenger with your website.

Uses for IM on a website

• Instant support for existing/new clients
• Instant sales enquiry activity
• Live on-line tutorial support
• No MSN Messenger required plus the visitor remains anonymous
• Maximise your customer interaction
• IT - Support existing clients by offering IM via a secure log in area
• Accounts - Deal with Invoice queries in an instant

If you are interested in this facility, contact us and we will be happy to help.

No comments | Make a comment (Average rating | 3.67 / 5)

My standard CSS resets for default element properties

Published | 16.01, 30th of March 2009, by Jay Vincent | Technical

Whenever I start a new CSS build, I use a pre-made stylesheet and add to it, rather than create one from scratch. There are a few reasons for this:

• HTML elements have default browser-inherited properties: for example, unstyled text usually display as 16px times new roman.
• Different browsers may apply slightly different default values. In interner explorer, the h1 tag displays at 300% in relation to its parent element font-size, where as firefox displays at 200%.
• Re-declaring these values ensures all browsers are using the correct styles and are displaying uniformly and as intended.

Good practise for font-size declarations is to set the size in the body tag using em's or a percentage (not pixels), so a user can over-ride the values using the browser's 'increase text-size' functions. All other font-size declarations should then be made relative to this.

Example:

We want to have a font-size of 12px for the body text and h1 tags of 24px:
note: The browser's default font-size setting is 16px, so 75% amounts to 12px.

body
{
     font-size: 75%;
     font-family: arial, helvetica, sans-serif;
     color: #000;
     background: #fff;
}

h1
{
     font-size: 200%;
}

There are other values and properties which require attention, most notably element margins of block elements, but the best way to find out what CSS works best for you is thorough mulit-browser testing and a passion for web design and self-improvement :)

No comments | Make a comment (Average rating | 4.67 / 5)

Showing blog entries 1-5 of 11.

Page | 1 | 2 | 3 | 4 | 5