Presentation Layer in Web page Design
As we’re all conscious, there are at all times two facets of each and every website online design. The visible facet that every one customers see with all of the graphic parts, buttons, photos and the facet at the back of it, which is the code this is liable for the capability of the website online. How to reach the steadiness?
The enabling facet does no longer comprise just one form of code, however it encompasses other ones. First off all it’s HTML code, which creates a framework during which to embed CSS (Cascading Taste Sheets) or programming languages akin to PHP. In different phrases HTML is used to construction the content material at the web page, whilst CSS permits treating your website online content material and its taste one at a time and programming languages keep in touch directions to the pc.
HTML itself does no longer energy such results as drop down menus or carousels. There’s a code which is expressively devoted to the consumer interface whilst different code is used to procedure knowledge and connect with database. The ‘presentation layer’ refers to graphical interface in addition to to the code that powers it, together with the code that controls interactive parts akin to drop down menus.
Presentation code contains:
- HTML and HTML 5
- CSS
- Scripting languages akin to JavaScript, jQuery and Ajax.
Normally all the ones languages are skilfully weaved in combination with the intention to create a visually horny and extremely practical website online design.
1. Developing multimedia interface
Animated and immersive design is completed thru using both Adobe Flash or mixture of HTML, CSS and different scripting languages combined in combination.
For a few years Adobe Flash used to be within the lead, however it began to switch. At the moment with the advance of HTML 5 and CSS we’re ready to more and more mirror a lot of the interactive and animation results.
HTML 5, the latest version of HTML has made an enormous step ahead relating to presentation layer design functions. It supplies an progressed toolkit of parts and houses and recognizes the way in which designers paintings and use specific parts. As an example it permits designers to outline a navigation workforce with the brand new ‘nav’ as a substitute of the up to now used ‘div’ component. The animation and interplay design make stronger options of HTML5 have additionally progressed impressively, and the truth that HTML5 is supported on cell browsers akin to Apple’s Safari has unfolded the internet design chances.
A couple of phrases about Adobe Flash
Flash is an animation and interactive generation that permits to create extremely immersive interface. As for implementation of Flash component in website online design the method is somewhat easy. The element evolved in Adobe Flash is exported as a self- contained .swf record and in precisely the similar means as a picture, the .swf record is embedded inside a HTML web page. The .swf record can both be a small portion of the web page or it may well actually be all the interface. It should be spotted that customers should have the Flash participant put in of their browser with the intention to view a web page that includes a .swf element.
In spite of the aptitude of constructing spectacular consumer revel in the usage of Flash has some disadvantages. Essentially the most important one is the truth that the Apple cell platform merely does no longer make stronger Flash recordsdata. Due to this fact, the website online created in Flash should be offering another model of the web site for (Apple) cell audience (in fact provided that the marketplace is essential sufficient to them). The invitation for the consumer to obtain the newest model of the Flash participant at the iPhone is an inappropriate button, since although they did obtain Flash the web site would nonetheless no longer be obtainable.
HTML5 – Flash selection
As discussed previous, mixture of HTML 5, CSS and jQuery code now make it conceivable to breed animated web sites that had been best conceivable in Flash. The use of ‘canvas’ component it’s now a lot more uncomplicated than ever to design wealthy and animated consumer interface. Most current desktop and cell browsers make stronger the HTML5 same old which makes it conceivable to create design that works throughout a large number of platforms.
1.1 DHTML, JavaScript, jQuery, and Ajax
Take note that HTML simply bureaucracy a construction for a content material. Scripting languages akin to JavaScript, Ajax, and jQuery which regulate the behaviour of consumer interface parts and content material displayed on a web page are woven into that construction.
JavaScript is a dynamic scripting language this is able to complicated animation and interplay results, akin to making a drop-down menu or an increasing window layer. It permits to have interaction with the consumer, regulate the browser and change the internet web page content material this is displayed. When JavaScript is carried out into HTML, the HTML is then known as ‘DHTML’. Dynamic HTML (DHTML) permits to create attention-grabbing interactive parts and animations.
jQuery is a simplified type of JavaScript that makes a speciality of the commonly-used interactions between JavaScript and HTML. It’s designed to provide help to navigate a internet web page. jQuery is a unfastened, open-source instrument and is to be had on-line. You’ll replica and paste in a position scripts into your internet pages and customise them to serve your functions. The use of jQuery, you’ll create animation and interplay design results with a lot much less code than can be required with JavaScript.
Examples of jQuery results:
- Increasing and collapsing in accordance home windows
- Carousel symbol rotation
- Symbol zoom upon rollover and many others.
Ajax (Asynchronous JavaScript and XML) permits knowledge processing akin to sending or retrieving knowledge to happen within the background (asynchronously) with out interfering with show or behaviour of the internet web page. Due to this fact reloading the web page or clicking an “replace” button isn’t required and information at the web page can also be refreshed/up to date routinely.
1.2 Complex CSS Graphic Results
Prior to now, with the intention to create a graphic component, a button as an example, we used to depend on bitmap graphics akin to jpeg or gif. No longer best do they build up the burden time of the internet web page but additionally they need to be created through designers conversant in instrument akin to Photoshop, after which they need to be hand-changed each and every time you need to trade the glance of the web site.
At the moment CSS is providing expanding ranges of stylistic regulate over the semblance of parts. It is now conceivable so as to add gradations, rounded corners, reflections, and comfortable drop shadows to textual content and parts merely thru code.
There are somewhat a couple of helpful CSS graphical taste controls that we will be carried out to steer clear of using bitmap graphics in development consumer interface.
The benefits of the usage of CSS for our consumer interface come with:
- Sooner obtain occasions – CSS code is written simply as soon as, and can also be carried out as a method to any graphic or textual content component;
- Scalable design – CSS code means that you can practice scalable attributes to fonts and parts;
- Simple upkeep – With a view to trade the dimensions, color, and visible results of a button, textual content, or design component, we merely trade values within the CSS code, and the trade will likely be carried out to all parts assigned to the specific taste;
- Accessibility – in CSS we’re the usage of precise textual content for our buttons and interface parts, and those are tagged and known in some way that display screen readers can digest and translate for customers who depend on such units.
1.3 Responsive design
The newest development in website online design is ‘responsive design’. It’s an approached geared toward growing web sites in some way that gives an optimum viewing revel in, simple to learn and navigate throughout the wide variety of units. When the consumer adjustments the dimensions in their browser window, the internet web page updates instantly with the intention to optimally show within the ‘view port’ measurement. View port is a brand new time period designers use to refer not to best other desktop browser sizes, but additionally cell units which all have other mounted display screen sizes.
Responsive design is conceivable because of the ‘media queries portion of the CSS3 specification. It acknowledges the browser’s measurement and tells the web page to load the fitting taste sheet, as an example ‘widescreen.css’ or ‘mobilescreen.css’. It’s conceivable as a result of other taste sheets comprise other format techniques, font sizes, and symbol optimization settings.
The remaining however no longer least is getting an artistic concepts for consumer interface. There are many inspirations on-line. It will be prompt to analyse just right design practices, ruin them right down to necessities, and notice how a few of them can also be tailored for software in our personal box.
