As discussed earlier in the course, there are two sides to every web page: the pretty side that your users see with all the graphics, buttons, and photography, and the underlying code that makes everything function.
To elaborate, the enabling side encompasses different types of code. As discussed in before post, the HTML code creates a framework in which to embed CSS and programming languages such as PHP. But HTML by itself does not power cool effects such as drop-down menus and carousels. Some code is expressly dedicated to the user interface, while some code is focused on processing data and connecting to databases. The “presentation layer”, as it’s called in web design circles, refers collectively to the graphical interface and the coding that powers it - including code that controls interactivity such as expanding windows and drop-down menus.
Presentation layer code includes HTML, HTML5, and CSS, and also scripting languages such as JavaScript, jQuery, and Ajax. It is not uncommon for a “presentation layer architect” to weave all of these languages together skillfully to achieve a very cool front-end experience like the one shown in below.
Creating multimedia interfaces
Immersive and animated multimedia user interface design is possible through the use of either Adobe Flash or a mix of HTML5, CSS, and other scripting languages combined together.
For years Adobe’s Flash led the charge, but increasingly we are able to replicate much of the interactive and animation effects with HTML5 and CSS. Previous post briefly introduced HTML5, the most recent edition of HTML that takes us leaps and bounds forward in terms of presentation layer design capabilities. This generation of HTML offers an expanded toolkit of elements and properties, and finally acknowledges the
way designers use elements to avoid workarounds.
For example, designers can define a navigation group with the new “nav” element instead of using a generic “div” element. The animation and interaction design support features of HTML5 are also impressive, and the fact that HTML5 is supported on mobile browsers such as Apple’s Safari has truly opened up the web design possibilities.
Adobe Flash
Flash is an animation and interactive technology that is capable of creating highly immersive user interfaces,
illustrated by the beautiful example shown in above. The component is developed in Adobe Flash and exported as a self-contained .swf file. Like an image, the .swf file is simply embedded within a HTML page.
The .swf file can either be a small portion of our page, just like an image, or it can literally be the entire interface as in above. Users must have the Flash player installed in their browser in order to view a page featuring a .swf component.
While Flash is capable of creating impressive user experiences, it’s not without its limitations, the most
glaring of which is that the Apple mobile platform (iPhones, iPads, etc.) simply does not support Flash .swf files. Therefore, the We Choose the Moon website must offer an alternative version of the site for (Apple) mobile viewers if the market is important enough to them. As you can see in below, on an iPhone the invitation for the user to download the latest version of the Flash player is an irrelevant button, since even if they did download Flash the site would still not be viewable.
Reportedly Apple’s withholding of support for the .swf file format is over performance issues. The official line is that .swf files require too much bandwidth and drain the device battery.
HTML5, enabling a Flash alternative
HTML5’s canvas element combined with CSS and jQuery code now make it possible to replicate the kinds of animated/immersive websites that were previously only possible with Flash .swf files. Take a look at the impressive pool table game at http://agent8ball.com, shown in above. This non-Flash game site makes excellent use of the HTML5 “canvas” element to target and control actions within regions of the page. Because most modern desktop and mobile browsers support the HTML5 standard, it’s now easier than ever to design a rich, animated user interface that works across a multitude of platforms.
Read Next - Web Development : Presentation Layer Design - Part 2
No comments:
Post a Comment