Blog2Works

This is the blog of freelance website designer and developer Ben Johnson, with thoughts on design, programming, frameworks, jquery and the latest technology.
Viewing entries tagged with 'website'
  • Difference between Web Accessibility & Usability

    Author: Ben Johnson

    Tags: , ,

    Both Website Accessibility and Usability are often misused and confused. Usability is a measure of how easy it is to use a site, while accessibility relates to whether the site can be accessed by everybody. Website Usability: Is a measure of how easy a system is to use and can be applied to any interaction between a user and the website. Usability is made up of several key factors: Ease of learning - how steep the learning curve is. Efficiency of use - how quickly a user can perform a task on a website, may be finding a certain piece of information, using the navigation menu and many other tasks depending on the website. Ease of memorisation - how simple (or difficult) it is to remember how to perform a particular task. Error trapping - ensuring errors are prevented by informing the user how to use the website before errors occur. When they do occur the user experience is not completely broken by providing feedback to the user why the error has accrued. Satisfaction - a user is able to perform a given task on a site satisfactorily. Website Accessibility: Allows for equal access to all users regardless of technological device and physical means. This ranges from people with mobile phones, screen readers and monitor size. Accessibility can even cover how accessible your website is for users with slow connections. A blind user will use a screen reader, whilst a businessman uses a mobile phone and granny turns her font size up, accessibility is about ensuring your site can be accessed equally in all these scenarios


  • Creating Modern website using HTML5

    Author: Ben Johnson

    Tags: ,

    HTML has some great new features to offer, such as the new semantic elements that aim to give meaning to the various parts of a modern Website. Over the past few years concepts such as Web 2.0, Rich Internet Applications and the Semantic Web have all pushed HTML, CSS and JavaScript beyond their limits replying on plugins such as Adobe Flash to power components sch as video and audio. For many years, the Web has relied on external plugins to deliver features that cannot be natively supported by the Web browser, particularly in terms of 2D drawing, animation, and multimedia. The latest versions of the HTML and CSS specification aim to remove the need for these additional browser components to facilitate such features, as well as reduce the amount of JavaScript required. HTML5 is a relatively young specification, and as a result, browser support is limited to: Mozilla Firefox (version 3.5+) Apple Safari (version 4.0+) Opera (version 10.0+) Google Chrome (version 3.0+) The HTML5 specification includes a series of new semantic elements that is used to give some meaning to the various sections or parts of a Website, such as a <header>, <footer>, <navigation> etc. Previously you would typically use <div> elements to create these parts, using ID or class attributes to differentiate them from each other. The problem with this is that this has no semantic meaning, as there are no strict rules defined that specify what class names or IDs are to be used, making it extremely difficult for search engines to determine which sections of the website hav emost importance. The main semantic elements that HTML5 introduces are: <header>  - Define a header section of the website. <footer> - Like the <header> element athough for the footer. <nav> - Used only for the primary navigation links on a Web page. <article> - An independent item on the page that can be distributed on its own, such as a news item, blog post, or comment. <section> - This element represents a section of a document or application, such as a chapter or a section of an article or tutorial. <aside> - This new element can be used to mark up a sidebar or some other content that is considered somewhat separate to the content around it. An example of this might be advertising blocks. The <canvas> element The <canvas> element was standardised and included in the HTML5 specification, along with a series of 2D drawing APIs that can be used to create shapes, text, transitions, and animations inside the element. The <canvas> element itself is quite basic, defining the width, height, and unique ID for the object. The developer must then use a series of JavaScript APIs to actually draw objects on the canvas, typically when the Web page has finished rendering. These APIs allow the developer to draw shapes and lines; apply color, opacity, and gradients; create text; transform canvas objects; and perform animation. The APIs also allow the <canvas> to be interactive and respond to user input such as mouse events and key events, facilitating the production of games and Web applications on the canvas. Playing <audio> and <video> In recent years, the popularity of video sharing sites such as YouTube has seen a huge explosion in the use of the Web for multimedia streaming. Unfortunately, the Web was not built with such content in mind, as a result the provision of video and audio has by Flash Video (.flv) file format and the Adobe Flash platform. HTML5, however, includes support for two new elements, <audio> and <video>, which allow Web developers to include multimedia content without relying on the user to have additional browser plug-ins installed such as Flash. Several browsers, including Mozilla Firefox, Apple Safari, and Google Chrome, have begun supporting these new elements and providing standard browser playback controls, should the user choose to use them. In addition, a set of standard JavaScript APIs has been provided to allow developers to create their own playback controls, should they wish to do so. Local storage and offline applications Web developers have traditionally used cookies to store information on a visitor's local machine, allowing a Web page to read this information back at a later point. While cookies are very useful for storing basic data, they are limited by the fact that Web browsers are not required to keep more than 20 cookies per Web server or more than 4KB of data per cookie (including both name and value). In addition, they are sent to the Web server with every HTTP request, which is a waste of resources. HTML5 provides a solution for these problems with the Local Storage APIs, which are covered in a separate specification to the main HTML5 document. This set of APIs allows developers to store information on the visitor's computer while remaining reasonably confident that they will still be there at a later date. In addition, the information is accessible at any point (even after the page has rendered) and is not loaded automatically with each HTTP request. The specification includes same-origin restrictions, which prevent Web sites from reading or changing data stored by other Web sites. Web form enhancements HTML5 aims to fill some of the gaps left by its predecessor in this space by providing a whole range of new form input types: color date datetime datetime-local email month number range search tel time url week Support for these new form fields is quite limited. The Mobile Safari browser on the iPhone makes use of some of these new types to change the type of keyboard presented to the user (for example, with the e-mail type, the @ symbol and .com shortcuts will be shown). Also, Opera provides some new widgets for many of these controls, including a spinner for the number type and a calendar date picker for the date-related types. The most widely available type of these new offerings is the range type, which is rendered as a slider by Opera, Safari, and Google Chrome. Browser Support In addition to these new input types, HTML5 also supports two major new features for form fields. The first of these is autofocus, which tells a browser to automatically give focus to a particular form field when the page has rendered, without requiring JavaScript code to do so. The second enhancement is the placeholder attribute, which allows the developer to define the text that will appear in a textbox-based control when its contents are empty. Other new features HTML5 includes so many new features; it's impossible to cover them all in this tutorial. This section provides a brief overview of some of the other enhancements in the specification. Web worker - This allows JavaScript code to be set to run in a background process facilitating the development of multi-threaded applications. The chief benefit that Web workers offer developers is that intensive calculations can be processed in the background without adversely affecting the speed of the user interface. Geolocation - HTML5 includes a geolocation API that allows a Web application to determine your current geographical location, assuming the device you are targeting provides features for finding such information (for example, GPS on a cellphone). If you do not have a device that supports this feature (such as an iPhone or an Android 2.0-based smartphone), you can use Firefox and download a plug-in that allows you to set your location manually. Drag and Drop - Another interesting feature is the inclusion of a drag and drop API. Up until now, implementation of drag and drop without plug-ins was dependent on some very complex JavaScript or the use of a JavaScript library such as jQuery Attribute selectors E[foo^="bar"] - Select an element, E, whose foo attribute begins exactly with the string bar E[foo$="bar"] - Select an element, E, whose foo attribute ends exactly with the string bar E[foo*="bar"] - Select an element, E, whose foo attribute contains the string bar Structural pseudo-classes E:root - Select an element, E, the root of the document (the <html> tag) E:nth-child(n) - Select an element, E, the n-th child of its parent element E:nth-last-child(n) - Select an element, E, the n-th last child of its parent element E:nth-of-type(n) - Select an element, E, the n-th sibling of its type E:nth-last-of-type(n) - Select an element, E, the n-th last sibling of its type E:last-child - Select an element, E, whose is the last child of its parent element (Note that E:first-child was previously defined in CSS2) E:first-of-type - Select an element, E, the first sibling of its type E:last-of-type - Select an element, E, the last sibling of its type E:only-child - Select an element, E, the only child of its parent element E:only-of-type - Select an element, E, the only sibling of its type E:empty - Select an element, E, that has no children (including text nodes) The target pseudo-class E:target - Select an element, E, who is the target of the referring URI UI element states pseudo-classes E:enabled - Select a user interface element, E, which is enabled E:disabled - Select a user interface element, E, which is disabled E:checked - Select a user interface element, E (a radio button or checkbox), which is checked or selected Negation pseudo-class E:not(s) - Select an element, E, which does not match the simple selector s General sibling combinator E ~ F - Select an element, F, which is preceded by an element, E Browser support for the new attribute selectors and the general sibling combinator is excellent, as they work on almost all modern Web browsers. Support for the new pseudo-classes is included with the latest versions of most browsers, but you may need to include fallbacks for older browsers such as Internet Explorer 6/7 and Firefox 3.0. New effects Although the new selectors are probably the features that reduce developers' headaches the most, the enhancements people most want to see are the shiny new effects that are available. These are facilitated through a slew of new CSS properties, including: background (now supports multiple backgrounds) background-clip background-origin background-size border-radius (rounded corners) border-image border-color (gradient borders) box-shadow (drop shadow on boxes without images) box-sizing opacity outline-offset resize text-overflow text-shadow word-wrap Multicolumn layouts CSS3 multicolumn layouts allow for text to be spread over a number of columns, like you might find in a newspaper. This can be done in two ways, either using the column-width property, where you define how wide each column should be (the number of columns is determined by the space available to the container), or using column-count, where you define the number of columns that should be used. The width will then vary based on the space available to each column. Other features of multicolumn layouts include the column-gap property, which allows the developer to define the space that should be present between columns when the column-width method is used. Another useful addition is the column-rule property, which allows a border-style rule to be placed between columns. Finally there is the column-space-distribution property, which determines how left over space should be allocated between the columns. Multicolumn layouts are currently supported by Mozilla and WebKit browsers. At present, these are implemented by means of temporary proprietary properties prefixed with -moz or -webkit, respectively. When the specification has been finalized, these browsers will eventually move to the CSS standard properties. Web fonts Web fonts were actually proposed for CSS2 and have been available in Microsoft Internet Explorer since version 5. Unfortunately, this required the use of the proprietary .eot (Embedded Open Type) font format, and none of the other browser vendors chose to implement it. As a result, Web fonts never really took off on CSS2-based Web sites. Basic HTML5 Page <!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Demo</title> <link rel="stylesheet" href="styles.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <hgroup> <h1>Company Name</h1> <h2>An example of HTML5 and CSS3 in action</h2> </hgroup></header><nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul></nav><article> <header> <time datetime="2010-01-12" pubdate> <span>Jan</span> 12 </time> <h1> <a href="#" title="Link to this post" rel="bookmark">Article Heading</a> </h1> </header> <p>This is an article that demonstrates some of the new features that HTML5 and CSS3 has to offer. This article contains several sections, each with its own heading, as well as a video element which will play a video without Flash on browsers that support it.</p> <section> <header> <h1>This is a section heading</h1> </header> <p>This is an example of a basic section of a document. A section can refer to different parts of a document, application, or page. According to the draft W3C spec, HTML5 sections usually have headings.</p> </section></article><footer> <p>&copy; 2009 Company Name. All rights reserved.</p></footer></body></html> Video Elemment <video src="http://www.double.co.nz/video_test/transformers480.ogg" controls autoplay> <div> <p>This video will work in Mozilla Firefox or Google Chrome only.</p> </div></video> Web form enhancements <section> <header> <h1>This is a feedback form</h1> </header> <form> <label for="contact_name">Name:</label> <input id="contact_name" placeholder="Enter your name" autofocus /> <label for="contact_email">E-mail:</label> <input type="email" id="contact_email" placeholder="Enter your email address" /> <label for="contact_phone">Phone:</label> <input type="tel" id="contact_phone" placeholder="Enter your phone number" /> <label for="contact_callback">Callback on:</label> <input type="datetime" id="contact_callback" /> <label for="contact_priority">Priority:</label> <input type="range" min="1" max="5" value="1" id="contact_priority" /> <input type="submit" value="Request Call" /> </form></section> You'll notice that the first input elemtn has the placeholder text "Enter your name" and is set to autofocus. Supporting browsers will automatically switch focus to this element when the page has been rendered. The next element is of type "email" and again contains a placeholder text value. The only browser that recognizes this type of input element as anything special is Opera, which displays a mail icon in the field to signify that it's an email field. The next field of interest is the datetime field with the label "Callback on:". In supporting browsers, this will display a date and time picker. In Opera, this displays as two controls, a textbox with a datepicker and a spinner for the time. Finally, you'll see a control of the type range, with min, max, and value attributes set. This control will be rendered by Safari, Chrome, and Opera as a slider, with a minimum value of 1, selected by default, and a maximum value of 5. Unsupported browsers will simply display this as a textbox with the text value set to 1.  


  • New Apple Macbook Pro

    Author: Ben Johnson

    Tags: , ,

    Apple's new MacBook Pros now come with next-gen processors, graphics and Intel’s I/O technology called Thunderbolt. Thunderbolt is a new interface that will let users connect peripheral devices that need to move a lot of data quickly, such as an array of disk drives, or an external device that requires very high-speed connections via USB or FireWire. More details on this new high-speed connection tech here. Sandy Bridge across the board: Intel's latest 32-nanometer Core i series processor makes it into all models. That's good news for consumers, of course. These Core i5 and i7 processors offer both improved power efficiency and better performance. A mainstream dual-core Core i5 Sandy Bridge processor, for example, runs at a speed of 2.3GHz but can jump to a higher speed, when necessary, of close to 3GHz. 13-MacBook Pro/Intel graphics chip only: Apple has gone with graphics silicon built directly onto the Sandy Bridge processor for the 13-inch MacBook Pro, as CNET reported last year. Nvidia, and its chipset based on GeForce 320M graphics, is out. This likely presages changes to new MacBook AIr models expected later this year. 15- and 17-inch MacBook Pro/AMD graphics: AMD (formerly ATI) "discrete" graphics silicon is now offered in the larger, more powerful MBPs. As in previous MacBook Pros, the discrete graphics chip is only fired up when heavy lifting is needed. When power savings is paramount or high-end graphics processing is not necessary, the system defaults to Intel's graphics. All in all, an array of technology that makes these new MacBooks pretty irresistible.


  • camelCase Table Names using WAMP on Windows

    Author: Ben Johnson

    Tags: , , , ,

    When developing websites at Web2Works to ensure all our projects are of a high standard one of our standards is using the CamelCase naming conventions set by Zend Framework http://framework.zend.com/manual/en/coding-standard.naming-conventions.html If you are using a WAMP or XAMPP, and try to create a table in camelCase (example: AdminLogin) you will notice that camelCase is not working, table name will be lowercase: adminlogin. In order to fix this, you need to add to your my.cnf file the line: lower_case_table_names=2 and restart mysql. Although please note that once you have turn on this setting you can't go back. "ButThenWhyWouldYouWantToEverGoBackCamelCasingIsCool"