Formats for eReaders

 ePublishing  Comments Off on Formats for eReaders
Mar 292011
 

(6.2) Compare, contrast and criticise the various formats for eReaders (PDF, ePub and other formats) and comment on the workflow software for their production.

–        Introduction

–        Format descriptions

–        About Digital Rights Management (DRM)

–        Building Files for eReaders in InDesign

–        Selling an e-book through your Website

Introduction

The number of eReaders available on the market is growing quickly, and different file formats are required to support all those different eReading devices and reading methods. Comparing with the battle between Betamax and VHS format in the 70s or more recently Blu-ray vs HD DVD, the confusion involving eBook formats today is way more complex. It’s been called the “Tower of eBabel”, where no one seems to be speaking the same language.  If you release a file only in PDF – one of the most well-know formats – for example, you’re excluding 81% of readers that won’t read this specific format.

Companies and organizations are fighting to establish their own formats. Amazon with their Kindle wants you to read your e-books in their DRM-encrypted version of Mobipocket, while Sony would prefer you to read in ePub, which is compatible with their reader.  The storage size for texts without images depends on the file format, but is always relatively small compared with a richly illustrated text. For publishers, e-books are lucrative as they eliminate distributors and printing.

The eReaders and Tablets have some differences. An eReader basically has the advantage to work quite well in the sun or in very bright environments, is gentler on the eyes and usually smaller and lighter, making the reading experience more comfortable and, of course, eReaders are considerably less expensive. The tablet has a great range of apps, full colour screens and 3G connection, however the “e-ink reader” can have some difficulties when reading in sun light for example, and it is way heavier than an eReader, a very important fact for its use as an e-book. Carl Howe, director of the Anywhere Consumer’s research division, said: “Carrying around a Nook  (eReader) is like carrying a paperback. An iPad is like a hardback. They’re both perfectly viable but they are different experiences.

Format descriptions

According to Wikipedia there at least 28 different formats for eReaders at the moment, and this number keep increasing. Here are the 5 most important ones.

1) ePub (.epub)

ePub (short for Electronic Publication) is arguably the most important format today. Managed by the Independent Digital Publishing Forum (IDPF), is a free and open e-book format. Text created in ePub is a linear flow and reflows according to the screen size of different readers. If your book is available in ePub, it can be read on some of the most popular e-book readers and e-book reading software applications (like Stanza on the iPhone or Adobe Digital Editions). In other words, it’s an open e-book format that allows readers to read books on a variety of devices. ePub can be seen from the monitor of your PC to your mobile phone, tablets or eReaders each with different resolutions and screen sizes, and ePub provides a way of easily viewing images and text on any of those devices.

The .epub format can be read by the Kobo eReader, Apple’s iBooks app running on iOS devices such as the iPhone and iPad, Barnes and Noble Nook, Sony Reader, BeBook, Bookeen Cybook Gen3 (with firmware v. 2 and up),COOL-ER, Adobe Digital Editions, Lexcycle Stanza, BookGlutton, AZARDI, Aldiko and WordPlayer on Android and the Mozilla Firefox add-on EPUBReader. Several other reader software programs are currently implementing support for the format, such as dotReader, FBReader, Mobipocket, uBook and Okular.

So, to summarize, ePub features are the following: it is free and open; re-flowable and re-sizable text; inline raster and vector images; embedded metadata; DRM support ; CSS styling; support for alternative renditions in the same file. One criticism of ePub is that, while good for text-centric books, it may be unsuitable for publications which require precise layout or specialized formatting, such as a comic book.

2) Portable Document Format (.pdf)

Portable Document Format (PDF) is a file format readable by devices such as eReaders, PDAs and computers. It’s ideal if the book contains complex formatting and layout. There’s a plug-in called Pitstop Professional that allows you to edit the PDF: change colours, font-styles, delete or move elements and add or remove pages, for example. The format was created by Adobe aiming to provide a standard format for storing and editing printed publishable documents.  PDF is a very popular format on the World Wide Web as it can be viewed and printed by users on many computer platforms.

PDF files are supported on the following e-book readers: Mobipocket, iRex iLiad, iRex DR1000, Sony Reader, Bookeen Cybook, Foxit eSlick, Amazon Kindle (1, 2, International & DX), Barnes & Noble Nook, the iPad, PocketBook Reader, Bebook Neo and the Kobo eReader. Also, pdf files can be read on the iPod Touch using the free Stanza app.

3) Plain text files (.txt)

Plain text is the most widely supported file format, working on most of the readers and devices. It has limitations regarding formatting (no bolding or italics for example), but will work in any device. It doesn’t include images.

4) eReader (.pdb)

Formerly Palm Digital Media/Peanut Press

PDB or Palm Doc can be read in Ereader. It’s a  freeware program for viewing Palm Digital Media electronic books.  There are versions available for IPhone, PalmOS, WebOS, Android, Symbian, Blackberry, Windows Mobile Pocket PC/Smartphone, desktop Windows and Macintosh. The reader shows one page at a time and supports embedded hyperlinks and images.

A wide selection of eReaders-formatted e-books are available in the company’s website, which can be purchased and downloaded, and they also offer a  handful of public domain titles available for free. The program has features such as bookmarks and footnotes. The footnotes can be written in any part of the text and then exported as a Memo document.  Barnes & Noble uses the eReader format as their method to deliver e-books for their eReader Nook.

5) Mobipocket (.prc)

Mobipocket is the format used by the Amazon Kindle and is supported on Windows PCs and on eReading apps used by many handheld devices. Amazon has been criticised by the industry for insisting publishers must supply DRM-protected books for Kindle. The Kindle’s AZW format is basically just the Mobipocket format with a slightly different serial number scheme.

The Mobipocket e-book format is based on the open e-book standard using XHTML and can include JavaScript and frames. The Mobipocket Reader has a home page library. Readers can add blank pages in any part of a book and add free-hand drawings. Annotations — highlights, bookmarks, corrections, notes, and drawings — can be applied, organized, and recalled from a single location. Images are converted to GIF format and have a maximum size of 64K,  sufficient for mobile phones with small screens, but rather restrictive for newer gadgets. Mobipocket Reader has also a built-in dictionary.

About Digital Rights Management (DRM)

E-readers normally use DMR restrictions to try to limit copying, printing and sharing of e-books.

An interesting story involving Amazon’s DMR occurred in 2009. Through the system, Amazon remotely deleted purchased copies of George Orwell’s “1984” and “Animal Farm” from customers who had it in their Kindles after providing a refund for the purchased products.  An Amazon spokesman, Drew Herdener, said in an e-mail message that the books were added to the Kindle store by a company that did not have rights to them, using a self-service function. “When we were notified of this by the rights holder, we removed the illegal copies from our systems and from customers’ devices, and refunded customers,” he said. That case shows the power Amazon has to remotely censor what people read through its software. Jeff Bezos, CEO of Free Software Foundation called upon Amazon to free its e-book reader and drop DRM.

In Sony Reader DRM rules allow any purchased e-book to be read on up to six devices. The owner can’t share a purchased e-book but can register five eReaders to a single account and make the books available to those devices.


Building Files for eReaders in InDesign

Text in a well built e-book is fluid; it is a linear flow and reflows according to the screen size of different readers. Reflow works very well but is not compatible with complex layouts.  According to stonehillgraphics.com, “True drop caps, carefully controlled text sizes, large spaces at the top of chapter pages, etc., are either difficult to create or are not possible. Punctuation used in print books, such as curly quotes, em or en dashes, and special characters, will often fall out of eBook files and be replaced by nonsense code.”

Adobe InDesign is the best software to create an ePub file. E-books in this format can be read on the Adobe Digital Editions, iPad, Lexcycle, Barnes & Noble Nook for PC, Sony Reader, Stanza, and many other eReaders. If you’d like have a book formatted for a specific eReader, it is simple to convert ePub to another format, like Amazon’s Mobipocket for example.

When generating an ePub file, Adobe InDesign automatically reduces images to a size that can be viewed on all eReaders. The Kindle displays larger images than most of eRedaers, but even those are still smaller compared to a printed book. If in colours, images are converted to greyscale, but the best procedure is to convert them before insert into the InDesign project. About fonts, web-safe fonts are the best options, although in case the reader doesn’t have the font, it will be default to one closest to the original.

STEP BY STEP – EPUB in Adobe InDesign

a)     For this example I will create a 16 pages book for demonstration.

In InDesign: File > New > Document

Now you can choose Number of Pages, Page Size, Orientation and Margins. Uncheck the option Facing Pages.

After create your document paste the book cover followed by publisher’s information and index. Then select the whole content of the book (in Microsoft Word or some text editor) and paste it in InDesign. It’s important that the content is pasted as one long story, with no breaks. The chapter division will be done later on.

b)     To confirm that you have an unique piece rather than separate parts, go to View > Show Text Threads and the connectors will show you

that you have a long story.

c)     When placing images, it’s important to make sure that they are part of the text or into the long story, as an ePub file is read from left to right and top to bottom. If the images are inserted as separated elements, they will appear together before the text starts. The following examples taken from an Adobe’s tutorial video show the behaviour of an ePub file. In the first example, 5 separated objects were placed in a particular order and were read in an eReader (in this case, Adobe Digital Editions, a free software to read e-books in a computer) from left to right, top to bottom.

In the second example, the elements 1 and 2 were aligned, so an eReader will read it left to right, (block with elements 1 and 2), then top to bottom, as the eReader image shows. That helps to understand the linear flow generated in ePub.

d)     To place images, the first step is to convert them to greyscale in Photoshop, as most eReaders haven’t got colour displays. After dragging the image into your document in InDesign, you’ll have to make it part of your text, so cut it (Edit > Cut), move the cursor to the exact place where you want it (in this example, right before the text “illustration here”) and paste (Edit > Paste) then press return key. Doing this, the image will become an inline graphic, meaning it is part of the flow of content.

e)     To place this graphic in its on paragraph, having total control on how it will be displayed in an eReader, you first quadruple click besides the image to select the paragraph, then set the leading value to zero. Then go to Window > Text Wrap and click in the second option of text wrap so you can drag your image and place it where you want it to appear in the eReader.

f)      To separate the chapters without split the document in separate documents, we will use the InDesign Table of Contents feature. First you need to decide where you want your chapters to start and apply Paragraph Styles in the beginning of each chapter. First, select the text where the chapters begins (Chapter 1, Chapter 2 etc), the go to Type > Paragraph Styles. Click in Create New Style. You’re going to see a Style Name called Paragraph Style 1. Double-click and an option box will appear. Name it and choose options like Alignment, Character Formats etc. I named mine Demo e-book Style.

g)     Next Step is going to Layout > Table of Contents Styles. Click New in the box that will appear. Name it, let’s call this one epub. Then in Other Styles you select the Paragraph Style that you just created. Click add and your style will be moved to Include paragraph Styles. Click OK.

h)     Now, to save your final ePub file, go to File > Export for Digital Editions, name it and click save. So, we need to tell InDesign to use our Table of Contents. Go to the Contents Panel, turn on Include InDesign TOC entries and select your style. Turn on the other option as well (Suppress Automatic Entries for Documents) and click Export. Your ePub file now have the images placed where you wanted, is divided by chapters and can be read in most eReaders. To make it available for Kindle, for example, just use a converter and convert it to .mobi. Mobipocket has developed an .epub to .mobi converter called KindleGen. In this example, the ePub created is being read in Adobe Digital Editions.

Selling an e-book through your Website

In the Internet, distribution of any type of media is easy. Music, distributed mainly in mp3 format, started as a free peer-to-peer file sharing that led to lawsuits, and ended up with the creation of a successful business, the Itunes music store. Books have begun to enter the online market place, aided by the increasing popularity of Amazon’s Kindle, Apple’s iPad, Barnes and Noble’s Nook and other e-Readers, therefore starting an on-line e-book businesses or implementing a method to sell e-books in your website may have a great chance of success.

It’s possible to create your own e-book as it was described above or sell other e-books. To do so, you must acquire licenses from various publishers to sell the eletronic version of their products. You’ll need a web host with enough storage space to host all the books you will sell on the site. Then integrate a payment provider such as PayPal or Google Checkout.

REFERENCES

The New York Times, Amazon Erases Orwell Books From Kindle, available online, accessed on 21th February 2011.

Smashwords, Smashwords eBooks, available online, accessed on 21th February 2011.

Stone Hill Graphics, eReader Formats, available online, accessed on 21th February 2011.

Wikipedia, ePub, available online, accessed on 21th February 2011.

Wikipedia, eBook Collections Usage Guide , available online, accessed on 21th February 2011.

 Posted by at 5:32 pm

Ten albums to listen to when coding

 Lists, Non-cognate, Thoughts  Comments Off on Ten albums to listen to when coding
Mar 282011
 

I often find it difficult to get the balance right. Too song-oriented and I find myself getting distracted; too ethereal or ambient on and my mind wanders.

These albums seem to work though (all links go to Spotify):

Crit 4 – Delight – Talk Medical Online Casey KC -30 March 2011

 Thesis  Comments Off on Crit 4 – Delight – Talk Medical Online Casey KC -30 March 2011
Mar 282011
 

 Talk Medical Online – Crit 4– Design 

Elevator pitch – Talk Medical Online “Speaking your language”

  Given to an investor

There is high turnover of medical support works in primary and secondary care particularly in the role of administrator and receptionist; many are part-time and returning to work mothers. There is a constant need to train these workers and refresh their knowledge in medical terminology under very tight budget constraints.

 Online medical terminology training is appearing the best value and most easy to implement for busy GPS who now hold budget. Current online competition delivers uninspiring low quality courses that are not good value. Budget holders need an alternative ?

 The proposal is to deliver our material online and worldwide for profit. TM’s unique and fun style of training delivery will translates well into the video format of new online training. The offering will be easy to use, one click ordering available any time anywhere. Our training will be professional refreshing informative and fun specifically tailored for this niche. We will offer the best value £35 per 20 hours training.

 Our bundled discounts and special training packages will be the best on offer and simple to purchase.

 We aim to be accredited in our first year.

Link to presentation

http://www.webdesignstuff.co.uk/work/kc005/talkmedical/critdesign.ppt

Wireframe

Wireframe Talk Medical Online

Wireframe Talk Medical Online

 

 

 Posted by at 12:32 pm

A very short post about Apps

 Content Management, Thoughts  Comments Off on A very short post about Apps
Mar 252011
 

I was reading a blog post by Ethan Marcotte today and he neatly summed up one of the points I was trying to make in my (slightly rambling) presentation the other day:

“But let’s say that your project—or more specifically, your audience—is better served by a mobile-/tablet-/$DEVICE-specific experience. Heck, I’ve worked on a number of projects that benefitted from that approach: where a separate mobile site was needed, and where a responsive approach would’ve been less than ideal. That decision wasn’t driven by any “mobile vs. desktop” mindset, though: it was dictated by research, by our content strategy, and by studying the needs of that site’s particular audience.”

Apps are fine, websites are fine but context is everything and the audience is king. I’ll be writing up my presentation soon.

Why I don’t like Clients from Hell

 Non-cognate, Thoughts  Comments Off on Why I don’t like Clients from Hell
Mar 242011
 

I don’t know if you’re familiar with Clients from Hell. It’s a funny Tumblr log where creatives, mostly web developers and graphic designers, send in rude/stupid/funny/ridiculous/annoying things their clients have said to them or asked them to do. Most of the entries fall into one of two categories: 1) my client is an idiot and 2) my client is trying to rip me off.

On the whole the entries which fall into category two leave me marvelling at the chutzpah of some people and in those cases I offer my sympathies to the downtrodden working stiff who’s been landed with such an arsehole of a client. When reading entries which fall into category one though, I’m increasingly finding myself siding with the client. Continue reading »

HTML 5 the Future of the Web

 Content Management, HTML 5, Uncategorized  Comments Off on HTML 5 the Future of the Web
Mar 242011
 

What is HTML5 and how will it affect web content creators?

The presentation on HTML5 – Download Here.

What is HTML 5?

HTML (Hypertext Markup Language) is a formatting language the use for structure and creates documents of the web page.  HTML5 is the next major revision of HTML such as HTML 4.01 and XHTML 1.0. HTML5 introduces numbers of new features that improve website performance. It has specific rules that allow placement and format of text, graphic, video and audio on a web page. Thurs, these can be useful for developers to produce web page with more unique and creative ways. (r4)

HTML5 also has numbers of important new elements for web content structure such as <article>, <section> and <header> elements. As a result, these new elements will improve page segmentations as pages can be divided into different part. Therefore, these make each part much more recognisable to search engine. (r8)

Moreover, HTML5 is backward compatible. It provides many new features that are essential part for modern web application. HTML5 provide many new attribute and tags built specifically for web application. (r2 & r6)

 

New features of HTML 5

HTML5 introduces a numbers of new elements and attributes. The code in HTML5 has a very script intensive as all the features are relied on JavaScript.

These are examples of the new important features of HTML5:

Canvas element This can be used for drawing complex figures such as graph, game display, and other visual images. You can draw lines, circles, arcs, rectangles, curve and much more. You can also input colour on the figures, and even insert images. These can be done by using JavaScript in order to generate dynamic graphic to the web pages.

Video elements & audio element- – This allow web pages to display videos or music online without the use of third-party plug-in such as Flash or QuickTime.

Geolocation – This method allow gathering a user’s location information from WiFi tower and GPS. The geolocation element can be important when targeting users from abroad.

The method can also be implemented by the used of IP address detection to gather user’s information. However, this method is more reliable on using HTML5 geolocation element.

Offline web application – This allow user to select web page files to be cached. Therefore, this will allow web page to work offline. The users can to continue interacting with web application and document without available of network connection. For example the user can check their e-mail locally without internet connection or install an external client.

Dragging and Dropping – This allow web users to easily dragging and dropping elements and text around the browser, using mouse or other pointing device.  This method is relied mainly on JavaScripts. This method can also be useful for e-commerce website, where the users may need to move items into the shopping cart. It also allow users to customise the element appear in their home page. (r1 & r4)

 

 

 

Browsers that support new features of HTML 5

This graph below displays the list of all the new elements or features of HTML5 with short descriptions. The graph also shows how each browser able to support HTML5 features and how they will improves their support in the future. (r4)

(Note: Click on the image to view in full size.)

Each browser has its own rules and each one has different capacity to adapt HTML5 at its own rate. The graphic display different colours that illustrate how each browser can support on each feature of HTML5.

According to the graphic, it shows that most of popular browser such as Firefox, chrome and safari are able to support most of the HMTL5 features. However, the only major issue is the Internet Explorer 8.0, which it can support only few features of HTML5. For example, if we implement new elements of HTML5 such as video element. As a result, this video element will not be able to display on internet explorer 8.0 or older version of internet explorer.

Nevertheless, IE 9.0 has official released in 14 March 2011. (r5) It has new improvement to able to adopt with some of the new feature of HTML5. However, it is still a new browser, which we should take to consideration that not every users to have IE9 installed in their computer.

Therefore, it is essential for the users to have modern web browser to run the websites that developed in HTML5.

Example of HTML5 websites

(Please note:  These websites might not work in older version of Internet Explorer)

http://www.sourcebits.com/cart543/

This is one good example of e-commerce website, which developed on HTML5. This site uses Dragging and Dropping element, which allows the user to drag the items and drop into the green area. The user can then click on “Checkout” button to purchase the items. This technique will improve the user’s experience for the future of online shopping.

http://en.opera.se/

This website looks similar to dynamic flash website. This site contain the used of Canvas element, in order to generate dynamic graphic on the site. The dynamic images have been implemented mainly by the used of JavaScript code in HTML5.  Moreover, It sites made well used of Video and Audio element as this site contain video and sound track, without other plug-in such as flash or QuickTime.


Difference in DOCTYPE for XTHML, HTML 4 and HTML5

These are prior DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">               <html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">

HTML5

<DOCTYPE HTML>

HTML5 has more simplified doctype than HTML4 and XHTML doctype.

Different between HTML4 & HTML5 (r2)

In order to understand the semantic mark-up in HTML5, it is essential differentiate the different between HTML4 and HTML5 mark-up.

HTML4 mainly use div on as commonly used on semantic mark-up.

Example in HTML4

<div id= ”hearder” >                                                                                                                      <h1>Introduction</h1>                                                                                                                                       <p>more information</p>                                                                                                                             </header>

In HTML5, the div element and id attribute has no defined semantic. Therefore HTML5 define a <header> as an element for this purpose. (r2. page 41)

For example, instead of using <div id=”header”>, we can replace it to <header> in HTML5 mark-up.

Example in HTML5

<hearder>                                                                                                                         <h1>Introduction</h1>                                                                                                                                                                                                                                                                  <p>more <p>information</p>                                                                                                                                                                                                                                                                     </header>

How will HTML5 affect web content creators?

HTML5 introduces numbers of new elements for both media and web content structure. However, the main benefit of using HTML5 for web content are it gives content much more semantic meaning and able to support content that falls outside of the concept of documents.

The new elements in HTML5 effect on how web content creators are able to structure the content of the web page. Therefore, it is essential to understand each of the new elements on HTML5 as it has unique characteristic to help differentiate the most comment area on a modern website. (r3)

These are the following new elements for content structure in HTML5 specification:                                 (According to Mark Pilgrim, (2010), HTML5 Up and Running, Book)

<article>

The article element represents a self-contained composition in a document, page, application, or site that intended to be independently distributable or reusable. For example, this could be for forum post, magazine, newspaper article, blog entry, user-submitted comment, or any other independent item of content.

<section>

The section element represents a generic section of a document or application. It is a main grouping of content. For example, a web page could be divided into different sections for the introduction, news products and contact detail. Moreover, the section element is suitable for divide the <article> element into smaller divisions. (r1. page 213)

<header>

The header elements represent a group of introductory. For example, header element can be used to wrap a section’s content, search form, logos, navigation, heading, other any other content that associate with a header.

<hgroup>

The hgroup element represents the heading section. This element used to group a set of multiple heading elements (h1-h6). This element can be use for content that has both a heading and subheading.

<footer>

The footer element represents footer for its nearest ancestor sectioning content. A footer element can contain information such as copyright, detail about who created the site and links to related documents.

<nav>

The nav element represents a section of a page that links to other pages of the website or links within the page: a section navigation links. For example, the nav element is use to contain the navigation bar of the website. It is normally found within the header element.

<aside>

The aside element represents the sections of a content that is related to the content surrounding it. For example, the element can be used for typographical effects such as pull quotes or sidebars for advertising.

(According to, Mark Pilgrim, (2010), HTML5 Up and Running, Book)

An example of HTML5 semantic mark-up

This is an example of HTML5 semantic mark-up including the entire new elements for web content structure. However, the new elements have its own rules on how web content should be structure in the correct systematic method.

These are line by line analysis of HTML5 mark-up. (r1 & r3)

This is an example of my HTML5 web page

<!DOCTYPE HTML> HTML5 has more simplified doctype than prior Doctype.
<head> Open head element
<title>Example of HTML5s</title> The title element will display the title bar of browser windows.
</head> End head element
<body> The main content of the web page goes within body element.
<header> Everything related to header include website name and navigation bar.
<h1>Example of HTML5</h1> This h1 element display the name of the website
<nav> This element is for navigation bar.
<ul> This is unordered list inorder to structure the navigation menu
<li><a href="/">Home</a></li>
<li><a href="/Page 2/">Page 2</a></li>
<li><a href="/About-Us/">About Us</a></li>
<li><a href="/Contact/">Contact</a></li>

These are the links of navigation bar
</ul> End navigation link items
</nav> End the navigation bar
</header> End header
<section> The section element is use for divide the article element into different divisions.
<article> This article is the first independent items within section content.
<header>
Open up a new header of first article. The header element here contain metadata
<hgroup> This element is suitable for multiple heading.
<h1>Heading 1</h1>

 

<h2>Sub-heading 1</h2>
</hgroup> End hgroup element
</header> End header element
<p>Garden furniture is available in all varieties of meta and wood designs. One can select from a wide and exclusive range of rustic metals to cedar and oak designed garden furniture. This can be chosen and matched with your environment surroundings.</p>
<p>Shopping on line provides you the pleasure of selecting an amazing range of outdoor furniture. Rustic chairs, wooden outdoor chairs, the variety is unlimited, leaving the shopper muddled. But while deciding on a particular type of furniture, one must remember to make sure of the elements, his furniture is going to face and brook bravely. The furniture, you choose, should be suitable for your environment; whether it is rainy, snowy, or sunny.</p>
Simple paragraphs give the summery of the content.
</article> The first article now completed.
<article> This article element is the second independent item of the content. 
<header>

 

<hgroup>
<h1>Heading 2</h1>
<h2>Sub-heading 2</h2>
</hgroup>

 

</header>
<p>Garden furniture is available in all varieties of meta and wood designs. One can select from a wide and exclusive range of rustic metals to cedar and oak designed garden furniture. This can be chosen and matched with your environment surroundings.</p>
<p>Shopping on line provides you the pleasure of selecting an amazing range of outdoor furniture. Rustic chairs, wooden outdoor chairs, the variety is unlimited, leaving the shopper muddled. But while deciding on a particular type of furniture, one must remember to make sure of the elements, his furniture is going to face and brook bravely. The furniture, you choose, should be suitable for your environment; whether it is rainy, snowy, or sunny.</p>
</article> end second article.
<aside> We start using aside element as it directly related to the content around it.  
<h2>Subscribe to the RSS feed</h2>
</aside> End aside element
</section> End content section.
<footer> This element can contain copyright details and any other content in the footer area.
<p>Copyright 2011 By Annop</p>
</footer> End footer element
</body> End body element as all the contents are now completed
</html>

How will HTML5 affect SEO (Search Engine Optimisation)?

The new elements of HTML5 have improved page segmentation, as it divided into several different parts such as header, main content, footer, link section, nav, etc. Search engines have started applying page segmentation and determined each part as separate entries from different elements. Therefore, these help search engine to identify where main content  is located and to increase the relevancy of search result. However, it is essential for web content creators to understand the new elements of HTML5 that will affect web content.

These are the following new elements on HTML5 that will affect on SEO.

<article>

The article element is the most important elements in order to optimize website’s rank in the search engine for on page SEO. This is because the <article> element has reduced the need of using div tags and it makes the HTML code much cleaner. Therefore, search engine will put more focus to the content inside <article> element than other content used in other part of the page.

<section>

The section element is used to separate sections of many contents on a web page. Furthermore, each section can have many different heading and content within the article elements. Therefore, search engine will pay more attention to the contents of separate section.

<header>

The header element is also very important for search engine, as it has similar to the <h1> tag. However, the main different is that it can contain multiple heading such as H1,H2, H3 element, paragraphs of text and links which are important for SEO.

<footer>

The footer element is also important but not more than header element. It can be used to store some information, which can still be useful for SEO purpose.

<nav>

The nav element considered to be very important part for SEO. Because, it can be used to identify a collection of links to other pages.

(References 7 & 8 )

Thai is another one of my example for Thai wholesale furniture web page built in HTML5

According to the HTML5 mark-up for Thai furniture webpage, the header elements contain the heading of the website “Thai wholesale furniture”. There is also nav element, which contain collections of different links. Therefore, these are very useful for SEO purpose as it contain relevant keywords phrases.

<header>
<h1>Thai Wholesale Furniture</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Product/">Product</a></li>
<li><a href="/About-Us/">About Us</a></li>
<li><a href="/Contact/">Contact</a></li>
</ul>
</nav>
</header>

Furthermore, there are two different types of content including Thai furniture and news & event. Therefore, in HTML5 mark-up, it is essential to use section element in order to divide these categories into two different sections. I included the id attribute on each different section e.g <section id=”Thai furniture”> and <section id=”news-event”>.

The two divided sections on a web page will be more likely to improve the SEO result, as search engine will focus on the content inside each section. For example if search for specific keywords such as “wooden furniture”, which appear in a Thai furniture sections.  As a result, this page will be more likely to appear higher in search result compared to words that found all across the whole web page.

Moreover, the select element <section id=”Thai furniture”> has to split <article> element into different product’s type of materials such as wooden, rattan and bamboo furniture. Therefore, I have included article <article> elements on each product because it represented as an independent item on Thai furniture section.

The article element <article> is the most essential part for on page seo purpose, as there will be lots of content on product’s heading and description that will contain many target keywords and long tail keywords phases in order to attract more traffic to the website. Therefore, search engine will highlight the content appears that within the article element <article> more than other content from other elements of the web page.

This is an example mark-up by using <section> and <article> elements.

<section id="thai-furniture"> 

<article>
         <h1>Wooden furniture</h1>
         <p>Information about wooden furniture</p>
</article>

<article>
         <h1>Rattan furniture</h1>
         <p>Information about Rattan furniture</p>
</article>

<article>
         <h1>Bamboo furniture</h1>
          <p>Information about Bamboo furniture</p>
</article>

</section><!-- End section for Thai furniture-->

The section element of News & Event <section> has three different types of heading. Therefore, the article element <article> has to be included in the mark-up. Furthermore, it is essential to use <hgroup> element because there are multiple heading such as Heading <h1> and sub-heading <h2> display on the web page.

<section id="news-events"> <!-- This section contain list of news and events-->
<article>
<hgroup>
<h1>News & Event 1</h1>
<h2>Headline 1</h2>
</hgroup>
<p>Information about News and Event 1</p>
</article>
<article>
<hgroup>
<h1>News & Event 2</h1>
<h2>Headline 2</h2>
</hgroup>
<p>Information about News and Event 2</p>
</article>
<article>
<hgroup>
<h1>News & Event 3</h1>
<h2>Headline 3</h2>
</hgroup>
<p>Information about News and Event 3</p>
</article>
</section><!-- End section of news and events-->

Conclusion

HTML5 is the newest version of HTML (HyperText Markup Language). It has many incredible new features that will enhance website performance and user experience for the web. However, the new feature or elements can be used today, despite the fact that some browses do not offer fully support them.

Furthermore, HTML5 introduces numbers of new elements for web content structure such as <article>, <section>, <hearder>, <footer>, <nav> and <aside> elements. These new elements alllow web content creators to organise content structure with more semantic meaning and it also divided the page into different parts.

However, page segmentation allows search engine to differentiate a page into its component parts, and improve an understanding of the mark-up and the relevancy of a page. Search engine can easily indentify where main content is located and less important on the menus, footers, headers and other elements. As the result, these helps search engine to ranks muti-topics pages much more accurately and effectively. Thurs, it is essentail that web content creators to pay more attention to the content within the <article>and <section> elements as seach egine will considers these elements as the main content within HTML5 web page.

References

Books

(1) By Holzner, S. (2011, Sams Teach Yourself HTML5 in 10 Minutes, (page 6 & 213)

(2) By Pilgrim, M. (2010), HTML5 Up and Running, (page 41)

Google Book

(3) By Hawkes, R. (2011) Foundation HTML5 Canvas: For Games and Entertainment (page 4)

Websites

(4) http://www.focus.com/images/view/11905/

(5) http://www.thetechlabs.com/tech-news/microsoft-internet-explorer-9/

(6) http://www.w3schools.com/html5

(7) http://www.webconfs.com/html5-seo-article-27.php

(8) http://www.techiemania.com/html-5-and-what-it-means-for-seo.html

 Posted by at 1:14 pm

How is the market for eReaders, developing and what future changes can be expected?

 Content Management  Comments Off on How is the market for eReaders, developing and what future changes can be expected?
Mar 242011
 

Throughout time the book has taken many forms. Whether it be clay and wax tablets, parchments and scrolls, sheep’s gut, through to the more conventionally stacked and organised paper-based book, constant technological advancement has pressed development onward.

With the the advent of the computer age therefor, it’s not surprising that the book should evolve vertically into a medium ideally suited for it: the digital eReader. For the purpose of this investigation, the eReader is defined as, but not exclusively referred to as such (especially when referring to iPads and tablet PCs further on), being:

“an electronic device that is designed primarily for the purpose of reading digital books and periodicals and uses e-ink technology to display content to readers.” (Wikipedia, 2011) Continue reading »

 Posted by at 12:37 pm

Photojournalism and Web Publishing

 Content Management, Coursework  Comments Off on Photojournalism and Web Publishing
Mar 202011
 

How can the image selection principles used for photojournalism be adapted and used by web publishers?

This is an expanded and revised version of the presentation that I gave in class on the 9th March. Original Presentation.

What is photojournalism?

Mark M. Hancock, the photojournalist and blogger wrote that:

“A journalist tells stories. A photographer takes pictures of nouns… Photojournalists capture ‘verbs'” (Hancock, 1996).

Since a verb is ‘the part of speech which asserts or predicates something’ (Chambers, 1972) it isn’t immediately apparent how it can be applied to a photograph. However this photograph of a survivor of the Japanese earthquake, taken from the BBC website, provides a good example.

Although this picture wasn’t shown with a cutline – the caption which appears near the photograph – by considering what the cutline could have been we can understand what Hancock means. It could have begun with ‘a woman grieves‘, ‘a survivor weeps‘ or even simply ‘a woman wears a mask.’ As a photograph, rather than an example of photojournalism, the cutline would be ‘a survivor of the Japanese earthquake.’

Continue reading »