The presentation layer in web site design

The presentation layer in web site design

The presentation layer in web site design

As everyone knows, there are at all times two sides to each web site design. The visible facet that every one customers see with all of the graphic parts, buttons, photos and the facet behind it, which is the code chargeable for the web site’s performance. obtain steadiness?

The connecting facet doesn’t include just one kind of code, but it surely contains totally different codes. To begin with, it’s the HTML code that creates a framework by which CSS (Cascading Type Sheets) or programming languages ​​corresponding to PHP could be positioned. In different phrases, HTML is used to construction the content material of the web page, whereas CSS permits you to deal with the content material and styling of your web site individually, and programming languages ​​talk directions to the pc.

HTML itself doesn’t present results corresponding to dropdown menus or carousels. There may be code that’s expressively devoted to the person interface, whereas different code is used for processing information and connecting to the database. The “presentation layer” refers back to the graphical person interface in addition to the code that helps it, together with the code that controls interactive parts corresponding to drop-down menus.

The submission code contains:

  • HTML and HTML 5
  • CSS:
  • Scripting languages ​​like JavaScript, jQuery, and Ajax.

Often all these languages ​​are expertly woven collectively to create a visually interesting and extremely useful web site design.

1. Making a multimedia interface

Animated and immersive design is achieved utilizing Adobe Flash or a mix of HTML, CSS and different scripting languages ​​blended collectively.

For a few years Adobe Flash was the chief, however that began to alter. These days, with the event of HTML 5 and CSS, we’re capable of repeat a lot of the interactive and animation results increasingly.

HTML 5, the latest version of HTML, has taken an enormous step ahead by way of presentation layer design capabilities. It gives an improved toolkit of parts and properties and embraces the way in which designers work and use sure parts. For instance, it permits designers to outline a brand new navigation group “nav” as a substitute of the beforehand used “div” component. HTML5’s animation and interplay design help options have additionally improved dramatically, and the truth that HTML5 is supported in cellular browsers corresponding to Apple’s Safari has opened up the chances for internet design.

A couple of phrases about Adobe Flash

Flash is an animation and interactive expertise that lets you create a high-quality person interface. As for the implementation of the Flash component within the design of the positioning, the method is kind of easy. A element developed in Adobe Flash is exported as a standalone .swf file, and in precisely the identical method as a picture, the .swf file is embedded into an HTML web page. A .swf file could be both a small a part of a web page or actually your entire interface. It ought to be famous that customers will need to have Flash Participant put in of their browser to view a web page with a .swf element.

Regardless of its means to create spectacular person experiences utilizing Flash, it has some drawbacks. Most significantly, Apple’s cellular platform merely doesn’t help Flash information. Subsequently, a web site created in Flash ought to provide another model of the positioning for (Apple) cellular viewers (in fact provided that the market is essential sufficient for them). An invite to the person to obtain the newest model of Flash participant for the iPhone is a ineffective button, as a result of even when they downloaded Flash, the positioning would nonetheless not be accessible.

HTML5 – Flash different

As talked about earlier, the mix of HTML 5, CSS, and jQuery code now makes it attainable to render animated web sites that have been solely attainable in Flash. Utilizing the canvas component, it is now simpler than ever to design a wealthy and animated person interface. Most trendy desktop and cellular browsers help the HTML5 normal, which lets you create designs that work throughout a number of platforms.

1.1: DHTML, JavaScript, jQuery and Ajax

Do not forget that HTML is simply structuring content material. Scripting languages ​​corresponding to JavaScript, Ajax, and jQuery that management the conduct of person interface parts and content material displayed on a web page are woven into that construction.

JavaScript: is a dynamic scripting language able to advanced animation and interplay results, corresponding to making a drop-down menu or an expandable window layer. It permits you to work together with the person, management the browser and modify the content material of the displayed internet web page. When JavaScript is embedded in HTML, the HTML is then referred to as “DHTML”. Dynamic HTML (DHTML) permits you to create fascinating interactive parts and animations.

jQuery: A simplified type of JavaScript that focuses on generally used interactions between JavaScript and HTML. It’s designed to make internet web page navigation simpler. jQuery is free, open supply software program and out there on-line. You’ll be able to copy and paste ready-made scripts into your internet pages and customise them to serve your functions. Utilizing jQuery, you possibly can create animation and interplay design results with a lot much less code than could be required for JavaScript.

Examples of jQuery results:

  • Expands and collapses by window
  • Carousel picture rotation
  • Picture zoom by panning, and many others.

Ajax (Asynchronous JavaScript and XML) permits information processing, corresponding to sending or retrieving information, to happen within the background (asynchronously) with out interfering with the show or conduct of the net web page. Subsequently reloading the web page or urgent the “refresh” button will not be required and the web page information could be refreshed/up to date robotically.

1.2: Superior CSS graphic results

Prior to now, we relied on bitmap graphics corresponding to jpeg or gif to create a graphic component corresponding to a button. Not solely do they enhance internet web page load instances, however they need to be created by designers accustomed to software program like Photoshop, after which need to be manually modified each time you need to change the look of the positioning.

These days, CSS provides growing ranges of stylistic management over the looks of parts. It is now attainable so as to add gradations, rounded corners, reflections, and comfortable shadows to textual content and parts merely by code.

There are fairly a number of helpful CSS graphic model controls that we will apply to keep away from utilizing bitmap graphics in person interface building.

The advantages of utilizing CSS for our interface embody:

  • Sooner loading instances – CSS code is written solely as soon as and could be utilized as a method to any graphic or textual content component;
  • Scalable design – CSS code permits you to apply scalable attributes to fonts and parts;
  • Straightforward upkeep – To vary the scale, shade and visible results of a button, textual content or design component, we merely change the values ​​within the CSS code, and the change might be utilized to all parts assigned to a sure model.
  • Accessibility – In CSS, we use actual textual content for our buttons and interface parts, and these are labeled and recognized in a method that display readers can digest and translate for customers who depend on such gadgets.

1.3: Responsive design

The newest development in web site design is ‘responsive design’. It is an strategy aimed toward creating web sites in a method that gives an optimum viewing expertise, simple to learn and navigate throughout all kinds of gadgets. When the person resizes their browser window, the net web page instantly updates to show optimally within the “viewport” measurement. View port is a brand new time period utilized by designers to refer not solely to totally different desktop browser sizes, but additionally to cellular gadgets, all of which have totally different fastened display sizes.

Responsive design is feasible because of the “media question half” of the CSS3 specification. It acknowledges the browser’s measurement and prompts the web page to load the suitable model sheet, corresponding to “widescreen.css” or “mobilescreen.css”. That is attainable as a result of totally different model sheets include totally different format techniques, font sizes, and picture optimization settings.

Final however not least is getting inventive concepts for the person interface. There may be plenty of inspiration on the web. It’s endorsed to research good design practices, break them down as wanted, and see how a few of them could be tailored to use in our area.

#presentation #layer #web site #design

Leave a Comment

Your email address will not be published.

Scroll to Top