1 Pertemuan 18 Programming Languages for E-Business/E-commerce Matakuliah: M0284/Teknologi &...

1

Pertemuan 18 Programming Languages

forE-Business/E-commerce

Matakuliah : M0284/Teknologi & Infrastruktur E-Business

Tahun : 2005

Versi : <<versi/revisi>>

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

Chapter Overview

• Languages used on the WWW

• Similarities and dissimilarities

• Advantages and disadvantages

• Understanding the newer technologies in the offing

4

HTML editors

• Many editors available, range of attributes starting from simple Windows Notepad

5

Business should consider

• Use of standards

• Style sheets

• Dynamic HTML

• Support for the scripting language

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

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

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

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

Additional HTML tags

• Tags <div> and <span>

• Advisable to use <div> as a generic container.

• Box can be placed anywhere in the page

11

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional //EN”><HTML><STYLE type = “text/css”><!--#pic1{

POSITION: absolute;Z-INDEX: 1;LEFT: 30px;TOP: 30px;Visibility: visible}

-- ></STYLE><BODY><div id= pic1><img src= “http://mis.mgmt.umb.edu/euni.gif” width= 100height=50 alt= “ ” border = “0”></div></BODY></HTML>

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

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

Events

• OnBlur

• OnFocus

• OnLoad

• OnAbort

• OnChange

• OnClick

• OnError

• OnKeyDown

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

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

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

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

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

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

Example of a simple style

<html><head><title>Style sheet</title><style type = “text/css”><!--

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}

-- ></style></head><h1>this is heading 1 </h1><h2>heading 2</h2><h3>heading3</h3></body></html>

22

Tools supporting DHTML and style sheets

• GoLive

• Dreamweaver and Ultradev

• Netobjects Fusion

23

Some Sharewares for creating style sheets

• TopStyle

• CoffeeCup StyleSheet Maker + +

• Prime Style

• Style Master

1 Pertemuan 18 Programming Languages for E-Business/E-commerce Matakuliah: M0284/Teknologi &...

Documents

Transcript of 1 Pertemuan 18 Programming Languages for E-Business/E-commerce Matakuliah: M0284/Teknologi &...