Main principles and uses of web design and web animation

In 1989, while working at CERN Tim Berners-Lee made a proposal for his global hypertext project which has leaded to the development of the World Wide Web. The World Wide Web is a global system of interlinked hypertext documents which can be viewed by the web browsers. Each hypertext document has an URL (Uniform Resource Locator) which is a reference to an Internet resource. Earlier browsers viewed only text based documents. With the development of new technology such as HTML, CSS, JavaScript and DHTML, web pages have incorporated not only text but also images, audio, video and graphics. Web design has become a new way of communication and presentation of information.

Web browser is an application which views HTML documents on the web along with its content such as images, videos, animations, audio and graphics. There are several major web browsers: Chrome, Firefox, Internet Explorer, Opera, and Safari. All of them have similar interface which consists of elements such as back, forward, stop, reload, refresh and home buttons; an address bar to input an URL in order to view a website; status bar to display progress in loading the resource and also the URL of links when the cursor hovers over them, and page zooming capability. Browsers also contain features such as plug-ins which add specific abilities to the browser. For example, some plug-ins supports Flash applications on the web. Without them Flash applications cannot be viewed by the end user.

Web pages incorporate technology such as HTML, JavaScript, CSS, HTML DOM and DHTML. HTML stands for Hyper Text Markup Language. It consists of different tags which describes document content. JavaScript is a programming language which adds interactivity to the web pages. CSS stands for Cascading Style Sheets. It defines how to display HTML elements. Larger CSS and JavaScript files are usually external HTML files which are referenced in the HTML code. This way, the size of the webpage becomes smaller. HTML DOM defines HTML objects and properties, and methods how to access and manipulate them. DHTML stands for Dynamic HTML. It combines HTML, JavaScript, HTML DOM and CSS in order to make a web page interactive. XHTML stands for Extensible HyperText  Markup Language. It is almost identical to HTML4.01, but XHTML is stricter and clearer. For example, in XHTML all of the tags have to be closed and to be in lowercase while in HTML it is not necessary.

PHP is a server side script as well as ASP. It is an open source and runs on almost all platforms such as Windows, Linux and Unix. PHP is compatible with most of the servers such as Apache and IIS. PHP files can contain text, HTML tags and scripts. PHP supports MySQL which is a database server. It uses SQL language for accessing databases. MySQL is also an open source and runs on almost all platforms.

Unfortunately, different browsers support different technology which causes a big inconvenience to the web designers and developers. For example, HTML 5 is supported only partly by all major browsers such as Safari, Chrome, Firefox, Opera, Internet Explorer and still continue adding its new features to the latest versions. It is still not a  W3C standard.

The developer uses file transfer protocol (FTP) in most cases to connect to the remote web server and upload the website from a local folder to make the page publicly accessible.

Web design depends on the goals and objectives of the project. For example, the overall look of the web page depends on the target audience and the information that will be incorporated in it. The other issue is discovering and understanding what technology to use for building the website. There are a great number of platforms for building interactive websites such as Adobe Dreamweaver. Adobe Dreamweaver can generate codes such as HTML, JavaScript and CSS. Adobe Photoshop and Adobe Illustrator are appropriate software for creating and editing graphics and images. The most common web images formats are JPEG and PNG raster (bitmap) formats with resolution 72ppi. Vector graphics are preferable for high resolution displays as they can be scaled in to different dimensions without losing their quality. You should avoid using bitmaps and try to use vectors and Smart Objects in Photoshop. Adobe Illustrator produces SVG (Scalable Vector Graphics) vector images which are completely scalable. SVG files are stored as XML and can be scripted. The most common web document size is 960x700 for screen size 1024x768. Considering the toolbar and status bar, the web document size is reduced to 960x700. The colour mode for the web is RGB as it is used for on screen presentations. Typography is the foundation of web design. The most popular fonts for body and headings are serif and sans-serif. The most common for body are Georgia, Arial, Verdana and Lucida Grande while for headings are Georgia, Arial and Helvetica. The most common body font size is between 12 and 14 pixels. Between 18 and 29 pixels is the size of the headlines fonts.

Web pages can also incorporate 2D and 3D animations in order to promote, entertain, educate or inform the end user. It is commonly used animated interface elements. For example, when the pointer hovers over the web button and it changes its colour or when a drop down menu appears. There are also linear and non-linear (interactive) animations. There are a wide variety of technologies used for creating animations such as Adobe Flash, Adobe Director, Adobe After Effects and DHTML. Animation software incorporates programing languages which are used for more complex animations. For example, Adobe Flash supports ActionScript and Adobe Director supports Lingo script. Respectively, there are different players that support particular animation formats. For example, Adobe Flash Player can view Flash applications such as SWF and FLV which are the most common small web formats. Not all of the browsers support Flash plug-ins and the end user has to download it in order to view the animation. Shockwave Player can open DCR animation created in Adobe Director Software. Flash default frame rate is 24fps. The higher frame rate, the smoother the animation plays. Higher frame rate also contributes to a larger file size. There are three main frame rates: 24 fps, 25 fps and 30 fps. 29.97fps is NTSC television standard used in the US and Japan. 25fps is PAL television standard used in Europe and some parts of Asia. Video games can require 60fps for smoother scene.

Stop motion animation is also known as frame by frame animation. It is an animation technique to make a physically manipulated object appear to move on its own. Stop motion animation which uses plasticine is called Claymation. Wallace and Gromit is an example of Clay animation. Here you can find more examples of stop motion animations:http://www.smashingapps.com/2009/06/15/21-stunning-examples-of-creatively-done-stop-motion-animations.html . Optical illusion of motion is also kind of animation in which a static image appears to be moving due to the cognitive effects of interacting color contrasts and shape position. Here you can find some examples of optical illusion: http://www.scientificamerican.com/slideshow.cfm?id=art-as-visual-research  .

Banner adverts is a form of advertising over the web. It incorporates embedding advertising onto a webpage. Banner adverts can be static and animated. There are different web banners such as Fullbanner animation, Square banner animation, Skyscraper banner and Pop-up window banner. Fullbanner animation is a standard for horizontal form of animation. It can be static and animated. Its dimensions are 468px × 60px. The size is up to 20kB and the location is next to the logo in a header area.  Square banner animation has square dimensions. It contains logo and text.  Its dimensions are usually 300px × 300px, 300px × 250px, 250px × 250px etc. The size is up to 20kB and the location is on a single position - in the article. Skyscraper banner is the most frequent banner used on the web.  Its dimensions are 120px × 600px. The size is up to 20kB. It is located on the left of right side of the page. Pop-up window banner is a dynamic banner which pops up when the web page loads. Its dimensions are 350px × 220px. The size is up to 30kB and the location is in a new browser window.

 .