E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 1 EE-AA-Element 3 Ver: 1.0 E-commerce Advanced Application User Interface Graphical Design

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 2 EE-AA-Element 3 Ver: 1.0 Summary Corporate image and branding strategy Frames Supported images and pictures format Dynamic HTML features Macromedia Flash session Conclusions Exercises

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 3 EE-AA-Element 3 Ver: 1.0 Corporate image Definition Three main section –Section 1 Analysing Designing the structure –Section 2 Creating graphical elements Draft web site in a test URL –Section 3 Creating final version Registering into some search machines

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 4 EE-AA-Element 3 Ver: 1.0 Branding strategies Definition Brand –Product Logo Graphic etc. –Service –Concept

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 5 EE-AA-Element 3 Ver: 1.0 Scenario modelling Scenario modelling is usually one of the first steps in the object-oriented analysis of a computer software system A scenario describes an outline of activities, which correspond to some system behaviour. The scenario models can consist of – textual description –diagram description - useful for helping software developers to understand the interactions among the components of a software system

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 6 EE-AA-Element 3 Ver: 1.0 Frames Definition –Use of multiple, independently controllable section on a Web page Advantages and Disadvantages Frame Tags –

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 7 EE-AA-Element 3 Ver: 1.0 tag Description –Defines a set of frames –Determines how many separate frames there will be on the screen Usage –Open and closed tags … –Don’t use element on the frames containing page –Must use the cols or the rows attribute

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 8 EE-AA-Element 3 Ver: 1.0 tag Description –Defines a sub window on the frameset Usage –Has to be between and –End tag is forbidden

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 9 EE-AA-Element 3 Ver: 1.0 tag Description –Define a noframe section for browsers which couldn’t handle frames Usage –Open and closed tags … –Displays text for browsers that do not handle frames –Important use it

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 10 EE-AA-Element 3 Ver: 1.0 tag Description –Defines an inline sub window Usage –Open and closed tags … –Supported by IE 5.5 –Not supported by Netscape 4.7 –The text between the open and closed iframe tags would have appeared in Netscape 4.7

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 11 EE-AA-Element 3 Ver: 1.0 Examples Vertical frameset (cols) Horizontal frameset (rows) Mixed frameset (embedded frameset) Navigation frame (target) Inline frame Header Main Footer FirstSecondThird Main Title Other M1 M2 M3 Frame1.htm, Frame2.htm or Frame3.htm List.htm

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 12 EE-AA-Element 3 Ver: 1.0 Supported image format Definition –Image –Pixel –Bitmap –dpi –Image compression Supported image types –GIF –JPEG –PNG

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 13 EE-AA-Element 3 Ver: 1.0 GIF GIF: Graphical Interchange Format –File format for electronic image –Uses larger scale compression –Supported by all browser –Maximum 256 colour –Supported transparent background Recommended usage

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 14 EE-AA-Element 3 Ver: 1.0 JPEG JPEG: Joint photographic Experts Group –Compressed picture file format –Lost invisible information –Optional the range of the compression at encoding –Not handle compression of black-and-white images or moving pictures Recommended usage

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 15 EE-AA-Element 3 Ver: 1.0 PNG PNG: Portable Network Graphics –New file format for image compression –Not supported by all browser –Supports transparent background –Not supports animation –It can be 10 to 30 % more compressed then a GIF format PNG advantages and disadvantages

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 16 EE-AA-Element 3 Ver: 1.0 Animated GIF – GIF89a Graphical interchange format, that appears to move or change as a result of multiple layered images Contains a set of images within a single file Can loop whenever you want (same as endlessly) Features of GIF89a The Structure of a GIF89a file

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 17 EE-AA-Element 3 Ver: 1.0 Image editors Possibility for creating, modifying pictures and animations Examples –Abode Photoshop –Paint Shop Pro, Animation Shop –Picture Publisher –WebImage –PhotoStudio –Painter 2.0 –… etc.

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 18 EE-AA-Element 3 Ver: 1.0 Dynamic HTML feature Definition –Combination of HTML, style sheet and scripts that allows documents to be animated Three main component –Positioning –Style modification –Event handling Tools –LAYER, CSS, Javascript, PHP, XML

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 19 EE-AA-Element 3 Ver: 1.0 Component and Tools PositioningStyle modification Event handler LAYER  CSS  JavaScript  PHP  XML 

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 20 EE-AA-Element 3 Ver: 1.0 Layers Definition –Allows elements to be positioned at exact coordinates on the page. Usage –Netscape Navigator 4.0 and later supports –Three tags:

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 21 EE-AA-Element 3 Ver: positioned content –Position blocks of contents Usage –Open and closed tags … –Positioned block of content can overlap each other –Transparent or opaque –Visible or invisible

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 22 EE-AA-Element 3 Ver: inline layer –Position the content relative to its natural position Usage –Open and closed tags … –Positioned block of content can overlap each other –Transparent or opaque –Visible or invisible

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 23 EE-AA-Element 3 Ver: alternative text for layers –Display content in browsers which not support layers Usage –Open and closed tags … –Ignored by supported browsers –Message appears between open and close tags in case browsers which not support layers

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 24 EE-AA-Element 3 Ver: 1.0 Cascading Style Sheet CSS definition –Define how to display HTML –Stored in Style Sheets or CSS files (external) Specifying 3 ways –Inline Style sheet: inside a single HTML element –Internal Style sheet: inside the element –External Style sheet: in an external CSS file Multiple Style Sheet

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 25 EE-AA-Element 3 Ver: 1.0 CSS basic properties Background: define the background effects Border: specify element’s border Classification: cursor, display, visibility Font: font size, style List: list-item markers shape and place Margin: space around elements Padding: space between element border and content Positioning Table: border, caption-side Text: appearance of text

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 26 EE-AA-Element 3 Ver: 1.0 Scripting Languages Scripts are executed when a document is loaded and can modify the contents dynamically. JavaScript –Usage: creating dynamic HTML –Properties –Embedding in HTML

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 27 EE-AA-Element 3 Ver: 1.0 Embedding JS in HTML Using the SCRIPT tag – … Specifying a file of JavaScript code –... Using JavaScript expressions as HTML attribute values – Scripting event handlers –onChange and onClick

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 28 EE-AA-Element 3 Ver: 1.0 What is XML? EXtensible Markup Language Markup language Describe data Not predefined Document Type Definition (DTD) or an XML Schema Self-descriptive Not a replacement for HTML.

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 29 EE-AA-Element 3 Ver: 1.0 XML and HTML goals XMLHTML was designed todescribe datadisplay data focus onwhat data ishow data looks informationdescribingdisplaying XML and HTML were designed with different goals:

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 30 EE-AA-Element 3 Ver: 1.0 XML structure Logical Structure –Elements each element has a type, identified by name, sometimes called its "generic identifier" (GI) may have a set of attribute specifications Physical Structure –Entities storage units have content and are all identified by entity name each XML document has one entity called the document entity

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 31 EE-AA-Element 3 Ver: 1.0 Macromedia Flash sessions Creating interactivity homepages and multimedia presentation Uses –Vector graphic-based editor –Animation creator –Multimedia developer Supports Inserting a flash object into HTML code (automatically) To play need a Flash Player plugin

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 32 EE-AA-Element 3 Ver: 1.0 The Flash tools Edit Selecting tools Texts Layers Importing pictures Symbols Animations Sounds Actions Flash movie creating Exporting –Several vector graphic-based pictures –Pixel graphics –AVI, GIF, MOV animations

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 33 EE-AA-Element 3 Ver: 1.0 Exercises Create a frameset which contains a top frame, a menu frame and a main frame. Use graphics, animations and at least one flash session.

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP ) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme 34 EE-AA-Element 3 Ver: 1.0 References n/ ok/javascript/