1. 1 Pertemuan 18 Programming Languages for E-Business/E-commerce Matakuliah: M0284/Teknologi & Infrastruktur E-Business Tahun: 2005 Versi: >

2. 2 Learning Objectives Distinguish between the static and dynamic modes of a Web page Define the current state of the practice in Web page composition Practice with the most common events of DHTML Describe how the choice of image format affects performance in the context of limited bandwidth Have a brief overview of programming options Understand the important trends coming in the near future Comprehend the standardization effort of various associations

3. 3 Chapter Overview Languages used on the WWW Similarities and dissimilarities Advantages and disadvantages Understanding the newer technologies in the offing

4. 4 HTML editors Many editors available, range of attributes starting from simple Windows Notepad

5. 5 Business should consider Use of standards Style sheets Dynamic HTML Support for the scripting language

6. 6 Features of HTML editors Collaboration and site management Database features (ODBC, email options) Deployment features Design features (JavaScript & VBScript support, easy integration with CSS1 and CSS2, DHTML) Visual wizard for forms, tables and frames Support for image composition and mapping Pixel-precise positioning Drag and drop support Preview Syntax checking Site navigation overview

7. 7 HTML editing features Customizable templates HTML validation and cross XML compliance tool. Search, replace, replace all features Supports Java applets, ActiveX, CGI Syntax coloring In-built DHTML scripts or wizard Import, view, play multi-media files (GIF, JPEG, BMP, WAV and MIDI)

8. 8 HTML editors MS FrontPage (integration with Microsoft IIS and Windows NT platform) from Microsoft HomeSite with WYSIWYN (what you see is what you need) from Macromedia/Allaire is very easy and intuitive 1rst Page 2000 from evrSoft (a freeware) XMetaL 2.0 and HoTMetaL PRO 6.0 from SoftQuad HotDog Professional from Sausage Software PageMill, GoLive from Adobe. GoLive provides websites with dynamic links. Ultradev from Macromedia. Ultradev & Dreamweaver and Fireworks. Ultradev has all the best features required to build a fine site. Barebones for Apple users.

9. 9 Advanced HTML and DHTML Dynamic behavior of a web page can be created using many technologies, e.g. JavaScript, VBScript, Document Object Model (DOM), and Cascading Style Sheets (CSS). The display of the web page can be changed after the page loads. Use of CSS for a uniform look and feel of the whole website. Event-driven animation can be interactive and interesting.

10. 10 Additional HTML tags Tags and Advisable to use as a generic container. Box can be placed anywhere in the page

11. 11 <!-- #pic1{ POSITION: absolute; Z-INDEX: 1; LEFT: 30px; TOP: 30px; Visibility: visible} -- > <img src= “http://mis.mgmt.umb.edu/euni.gif” width= 100 height=50 alt= “ ” border = “0”>

12. 12 DHTML contd. Both absolute positioning and relative positioning are possible. With DHTML, less data has to be downloaded, as there are no large bitmap files.

13. 13 Elements that DHTML can control Ability to hide and unhide portions of pages. Display attributes of style sheets (text, background, form field, images, frames, tables and paragraphs). Animation effects, make them more interactive and engaging Scroll bars, ticker objects

14. 14 Events OnBlur OnFocus OnLoad OnAbort OnChange OnClick OnError OnKeyDown

15. 15 Portable Document Format (PDF) PDF writer and distiller On any computer platform –(DOS, Mac, Unix, Windows) Preserves the format and looks Can’t be modified, tampered with if protected PDF Reader available free of cost to any user. FrameMaker and Illustrator are able to write PDF format. Corel with WordPerfect can export to the original PDF format but cannot modify existing documents. Can be setup as an add-in to MS Word

16. 16 Cascading Style Sheets (CSS) More powerful More flexible Useful for designing consistent looking web pages, like templates Designers will create style sheets and apply them to any web page. Developers can define their own classes, and new HTML elements.

17. 17 CSS Fundamentals Style sheets have a defined order of precedence CSS1 – by W3C, a set of style sheets or statements that may determine how a given element is presented in a web page format, using Netscape and I.E. browsers.

18. 18 Advantages of CSS Separation of style and layout of HTML files from their informational content. Provides relative measurement for any size of monitor screen or resolution. Avoid breaking existing pages because older browsers simply ignore style sheets. Allow readers to influence the presentation of HTML documents. Enable companies to implement a house look and feel on their site, promote branding. Improve the printing of web documents instead of having unpredictable HTML transfer to paper. Enable access to the web for people with disabilities (larger fonts, variation of colors)

19. 19 CSS2 A newer standard proposed by W3C and agreed upon by the industry for richer and more accessible web pages. See latest news: –http://www.w3.org/Style/CSS/#news New features – sidebars, navigation scrollbars Images can be layered Control over table layout

20. 20 Useful features of CSS Both absolute and relative measurements can be applied Color control Fonts and texts can be formatted Position, alignment properties Spacing and areas (which includes borders, margins, padding, width, height, float property and clear property).

21. 21 Example of a simple style Style sheet <!-- body {background: #FFFFFF} A:link {color: #80FF00} A:visited {color: #FF00FF} H1 {font-size: 24pt; font-family: arial; color:blue} H2 {font-size: 18pt; font-family: braggadocio} H3 {font-size: 14pt; font-family: Desdemona} -- > this is heading 1 heading 2 heading3

22. 22 Tools supporting DHTML and style sheets GoLive Dreamweaver and Ultradev Netobjects Fusion

23. 23 Some Sharewares for creating style sheets TopStyle CoffeeCup StyleSheet Maker + + Prime Style Style Master