Archive for the ‘Web Technology’ Category
published by Dan in Web Technology | Website Analytics | Website Design
As the term implies, eye tracking is simply a technique used to follow (keep track) a person’s gaze. It makes use of a device called an eye tracker which measures the positions of the eyes and its movements. There are different kinds of technologies available that is used for eye tracking but the most common eye tracker uses a video camera to record the eye(s) and its movements. This is also the method used by (web) usability consultants/engineers.
What happens is that the camera has a special feature (the eye tracker!) which enables it locate the center of the pupil. This is usually done using infrared and near-infrared light. Before data is gathered during eye tracking the camera is calibrated for each user. Calibration takes only a few seconds. The data is gathered by simply allowing the user to go about browsing the a website the way he/she normally would. Specific tasks can be given to the user since eye tracking can be done simultaneously with other usability tests. Note that the camera used for eye tracking is usually placed unobtrusively so that it will not bother the user and thus affect the outcome of the test.
After the data is gathered the usability consultant will then interpret the data. Images showing browsing pattern of the test subject (the average user) should of course be part of the report making it all very easy to understand.
If you haven’t done eye tracking and want to improve your website design I suggest you do this before investing to redesign your website. You might be surprised at how much you can learn and how much it will affect your approach to web design.
published by Dan in Usability | Web Technology | Website Design
Every user has his/her own habits when browsing a web page. In general though users follow a certain pattern and focus on the same parts of the page. There will always be users that will have browsing/reading patterns that diverge from the norm but learning the habits of the majority of the users is good enough to aid in making a better web design.
Eye tracking is a method used by usability experts to determine the parts of the pages users look at, the frequency with which they look at those parts, and the amount of time they spend looking at those parts. The data garnered from this technique is very useful in web design because you can then adjust your web page design and make it more effective by placing the most important contents in key positions/placements.
Eye tracking is usually done as part of usability testing, however, not all usability consultants offer this service (in fact only very few do). To do eye tracking the web design consultant need to not only be knowledgeable about this technique but also have the equipment to carry out the test. In my next post I will be discussing briefly how eye tracking is done.
Note that eye tracking has many applications though primarily it is used for all kinds of research from medical research to primate research. Our interest in eye tracking is obviously its application in computer/web design usability and it is this application we will be tackling on the next post.
published by Dan in Accessibility | Tools & Resources | Web Technology | Website Design | Website Standards
Last time I posted about the importance of web accessibility. I mentioned how other users, aside from the disabled and partially disabled, could benefit from web accessibility. As a web designer though that is not very familiar with web accessibility you should realize that there is a pretty wide range of disabilities to address including:
- visual impairments - whether full or partial blindness or colour blindness
- motor disabilities - for those with problems with fine muscle control due to certain conditions like Parkinson’s disease, cerebral palsy, muscular dystrophy, etc.
- auditory problems - whether full or partial deafness
- seizures - epilepsy is sometimes triggered when the screen frequency is between 2 to 55Hz
- cognitive/intellectually impairments - users with learning disabilities such as dyslexia, dyscalculia, has poor memory and problem solving skills, etc.
Looking at the list above can be daunting. However, a web design provider really needs to address these issues especially if under the jurisdiction of countries that legally require web accessibility. As mentioned in the previous post though, the Web Accessibility Initiative is a good place to start informing yourself about the issue. There you will find everything from guidelines and techniques to evaluation tools.
As a web designer note though that your job is really only to follow the guidelines set by the W3C. You do not have to worry about the hardware part and other assistive technologies that will help the disabled in web browsing. By following the guidelines you can be assured that the website you have designed can be easily read by assistive technologies such as screen readers. Of course, since technology constantly gives better (or at least newer) solutions then it is important that you keep yourself up-to-date with the latest developments in web accessibility.
published by Dan in Web Development | Web Technology | Website Design
Progress - The progress element, as the name indicates, is used to indicate the progress or state of a specific process. Everyone is familiar with progress bars and this acts just like it. Of course if the progress value isn’t updated dynamically then it simply serves to represent the progress of a specific process during a specific time frame, which I think defeats the entire purpose of the element. To be able to update the values in the progress bar you will need JavaScript.
The progress element has two attributes: min and max. The max attribute can be left out for processes wherein there is really no max value or the max value isn’t known. When using the the progress element you can opt to show the actual value or a percentage of the value. For example when downloading a file you can write it as
<p>Downloaded: <progress value=”204.57″ min=”0″ max=”700″> 204.57MB </progress></p>
or as
<p>Downloaded: <progress value=”204.57″ min=”0″ max=”700″>28.8%</progress></p>
For processes that do not have maximum values you can simply eliminate the max attribute:
<p>You are visitor number: <progress value=”20457″> 20457 </progress></p>
Of course the example given wasn’t really a process but is simply a hit counter. But you get the point.
Next up: Embedded Media Elements
Source: New Elements in HTML 5 by Prof. E. Harold
published by Dan in Web Development | Web Technology | Website Standards
Meter - The meter element is used to “represent a numeric value (amount) in a specified range” and can be given up to six attributes, including value, minimum, low, high, maximum, and optimum, which are used to describe the amount in a way that will be recognized by browsers. The amount enclosed by the meter tag <meter></meter> can be anything from money to statistical values. Let me use my son’s height as an example.
Without the meter element I can simply write:
<p>My 25-month old son is 85cm long.</p>
Using meter tags I can let the browser know that his length is a numerical value by simply putting the value between tags.
<p>My 25-month old son is <meter>85cm</meter> long.</p>
Now if I use the attributes I can give the machine more information without changing the sentence one bit.
<p>My 25-month old son is <meter value=”85″ low=”80″ high=”94″ optimum=”88″>85cm</meter> long.</p>
In this example the use of minimum and maximum is not applicable since there is no minimum or maximum length. However, the height chart states that the range for 25-month-old boys is between 80 to 94 cm, which is why I set that as the low and high length. The average, which can be seen as optimum is 88cm. This means that my son is below the optimum or average height. The additional information may not be seen by readers when looking at the sentence but it can be shown as a tool tip or in any other manner you may desire.
Source: New Elements in HTML 5 by Prof. E. Harold
published by Dan in Web Development | Web Technology | Website Standards
Block-Level Semantics:
- Dialog - The dialog, as the word implies, is used to represent reciprocal conversation between two or more persons. In HTML 5 three tags are used to represent the start and end of the entire dialog <dialog></dialog>, the speaker <dt></dt>, and the spoken part <dd></dd>.
Inline Semantics:
- Mark - The mark element is represented by the m tag <m></m>. Marking an element lets it stand out, making it easy to find in a document. However, unlike boldfacing and italicizing a word it, marking a word(s) does not emphasize the word. Instead when you mark a word you simply sort of “highlight” it to give you a reference point pretty much the same way search terms appear when you view cahced pages on Google.
- Time - The time element is simply used to denote a line of text as time and date. When using the time tag it is important to use the datetime attribute so that the line of text can be read and understood by browsers for what it is. This attribute will be useful in the future for applications like calendars and other stuff that will depend on dates and times. The correct syntax when using the timedateline attribute is as follows:
<p>My son was born
<time datetime=”2005-64-30T16:27:00-04:00″>4:27 P.M. on June 30th</time>.
</p>
With out the dateline attribute it can be coded as
<p>My son was born
<time>4:27 P.M. on June 30th</time>.
</p>
which is valid but will not be machine readable.
Source: New Elements in HTML 5 by Prof. E. Harold
published by Dan in Web Development | Web Technology | Website Standards
Aside from new structural elements there are also new semantic tags.
Block-Level Sematics:
- Aside - In the English language the word “aside” can be used as a substitute to the word digression. When you digress from a certain topic it means that you insert or include something that is not really included in the main jist of your original or main topic. The Aside element in HTML 5 works just like that. It is used to denote anything “outside the main flow of the narrative” including notes, tips, a sidebar, a pullquote, and parenthetical remarks. In HTML 4, since there is no such element yet sidebars and other features needed to be encoded usign tables. The Aside element obviates the need to do this simplying your code a great deal.
- Figure - The new figure element is HTML 5’s answer to representing block-level images in a more semantic way. In HTML 4 when embedding images and other elements along with their corresponding captions you simply code them directly and do not really have a way to represent the block of code in so as to signify what the embedded element really is. While the method is sufficient by putting the whole code inside the figure tag <figure></figure> it leaves little room for ambiguities making it easier for browsers to interpret and associate the caption with the image. Aside from embedded pictures the audio, videos, objects and iframes can also be captioned using the figure tag.
Source: New Elements in HTML 5 by Prof. E. Harold
published by Dan in Web Development | Web Technology | Website Standards
There’s a new version of HTML coming - HTML 5. It includes additional tags in structure, semantics, embedded media, and interactivity, that will make the lives of web developers easier and makes HTML more apt for use with some of the fundamental concepts of Web 2.0.
Structure
New elements in structure include section, header, footer, nav and article. Elliot Harold of the Polytechnic University gave a brief description of the basic construct that each element corresponded with.
- section: A part or chapter in a book, a section in a chapter, or essentially anything that has its own heading in HTML 4
- header: The page header shown on the page; not the same as the head element
- footer: The page footer where the fine print goes; the signature in an e-mail message
- nav: A collection of links to other pages
- article: An independent entry in a blog, magazine, compendium, and so forth
The new elements answer one of the aims of HTML 5, which is to have a more structured way of managing header levels. In the past each header like sidebars, footers, headers, navigation menus, main content sections, and individual stories needed to be marked with the div element (<div> </div>). With the new elements used the div element is no longer necessary and developers can do away with it.
Source: New Elements in HTML 5 by Prof. E. Harold
published by Dan in Web Development | Web Technology | Website Design
Remember the time when most computer screens were only able to render 256 colors accurately? At that time web designers were adviced to limit themselves to using “web safe colours” if they want their designs not to go to waste. Because of this what designers only used were 6 shades each of red, green and blue, which made a total of 216 colours belonging in the web safe colour palette. Although computer screens were capable of displaying 256 the shades of colour which operating systems usually used already were taken out of the web safe palette.
Thanks to improvements technology, which were mostly driven by the demand for better video game graphics and as well as digital photos, computer displays started supporting 16-bit colour and 24-bit colour, called TrueColor. Because of this defining “web safe colours’ is no longer needed. Web designers now have a freedom of choice as to whatever shade they may want to use for the websites being developed.
Although most users may not really notice the difference and merely think that some websites are better than others the ability to use so many hues allow web designers to give more attention to details, making the experience richer and more pleasing to users. As technology progresses forward web designers can also look forward to more choices, not just in color, but in almost all aspects affecting website design.
published by Dan in Accessibility | Web Technology
While the top three alternative browsers are really cool they do not suit the needs of people with disabilities. Listed below are two free alternative browsers special designed to answer the needs of visually impaired people.
Simply Web – Simply Web 2000 is a software-based speech synthesizer that can be used as a stand alone “Talking Web Browser”. It can be downloaded for free at their website. The caveat though is that you would need a screen reader to make full use of it. Any screen reader would do but it is of course best used with the Simply Talker 2000 screen reader. The Simply Taker 2000 is sold for US$100 each. Language supported is English. Works best with Internet Explorer 5.0.
Emacspeak “The Complete Audio Desktop” – “Emacspeak is a speech interface that allows visually impaired users to interact independently and efficiently with the computer.” Features include a whole slew of speech-enabled applications (157 applications in all!) with everything from documentation applications to messaging and even Google clients like Blogger and Google Reader. They even have speech-enabled programming applications! Emacspeak can be downloaded for free from their website. Language supported is English. Works in Linux (Debian, Mandrake, Red Hat, Slackware, SuSE and Turbo distros).
To find out more about different alternative browsers for people with disabilities you can visit the Alternative Web Browsing page of the W3C Web Accessibility Initiative.
0845 838 7448 
