Design About Web

Monday, August 25, 2014

Lab 2 : Overview of HTML and HTML5

I was trying to understand basic differences of HTML5 against HTML (orHTML4 to be specific) and couldn't find exact information I was looking for. Hence I decided to compile it. Hope others will find it useful too.

HTML	HTML5
DOCTYPE is much longer as HTML4 is based on SGML-based. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	DOCTYPE is required to enable standards mode for HTML documents. <!DOCTYPE html>
Audio and Video are not part of HTML4 specification	Audio and Videos are integral part of HTML5 specifications e.g. <audio> and <video> tags
Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc.	Vector graphics is integral part of HTML5 e.g. SVG and canvas
It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices.	JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it)
Browser cache can be used as temporary storage.	Application Cache, Web SQL database and Web storage is available as client side storage. Accessible usingJavaScript interface in HTML5 compliant browsers.
Web Sockets are not available. Generally used mechanisms are long polling and streaming.	Full duplex communication channels can be established with Server using Web Sockets. Accessible using JavaScript interface in HTML5 compliant browsers.
Works with all old browsers	Most of modern browser have started supporting HTML5 specification e.g. Firefox, Mozilla, Opera, Chrome, Safari etc.
Does not allow JavaScript to run in browser. JS runs in same thread as browser interface.	Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5

I am not expert in HTML5 and neither in HTML4 specifications. These are just few set of differences in HTML Vs HTML5 that I compiled for immediate reference.

Lecture 1 : Web Design Principles

HTML
HTML or HyperText Markup Language is the standart markup language used to create web pages. A web browser can read HTML files and compose them into visible or audible web pages. The HTML files contains content text and HTML markup. and make look at the web page body of the document can contain : Text, Images, Video, Audio, Forms, Link, and Other Interactive resources. Web pages from HTML can also refer to Cascading Style Sheets (CSS) to define the look and layout of text and other material.

History
A physicist Tim Berners-Lee proposed and prototyped a software contain a simple hypertext program (ENQUIRE) to use and share document at The European Organization for Nuclear Research (CERN). in 1989-late 1990 Barners-Lee joined the ideas of the user interface (browser), a markup language (HTML), and a communications protocol (http:) that allowed hypertext linking The World Wide Web Consortium (W3C) was founded in 1994 MIT for standardization for all browser.

XML and XHTML
XML is a Markup language like HTML but can define your own markup. but in XML has stricter syntax than HTML with more rules. some rules is

Document must well-formed
All tags must nest properly and not overlap
Use all lowercase for element names
Always use closing tags
Empty elemnets are signified by a closing slash
Attribute values must be contained in quotation marks

And then XML updated to XHTML to refer Cascading Style Sheets (CSS), but XHTML still have the XML syntax rules.

HTML5
And now, The Web Hypertext Application Technology Working Group (WHATWG) proposed HTML5 that can use to:

Supports standards-based coding
Compatible with HTML and XHTML
Compatible with CSS
Supports new page layout elements
Application and media compatible

Lab 1 : Simplicity, Clearance, Consistency, and Uniqueness (part 2)

This is one of good web design with the simplicity, clearance, consistency and uniqueness web page element. http://lloydsinn.com/ is a web to explain and booking one of orchard road hotel in singapore. This hotel name is Lloyd Inn.

Simplicity

All the pages of this website focus on the topic, so make it no confuse to take it because the structure so simple.

Clearance

There is many space make it clear and nice.

Consitency

The picture on this website look nice because the pixel and graduation of color have harmonization. make it well and tidy. as well the text containing on the site consisten with the color, font, and size.

Uniquness

The Web site attractive with some animation in home page, make it so unique. The animation on text in home can move up and down to attract the user or visitor. and the animation and picture in room tab look nice with the simple structure.

Lab 1 : Element of Web Design (part 1)

For a good Web Design we need a standart that we call the Elements of Web Design. The Element of web design include:

1. Simplicity
2. Consistency
3. Uniqueness
4. Usefulness
5. Easy to use Navigation
6. Rapid Output
7. Clearance
8. Standardization
9. Responsive Web
10. Less error