Mgt 240 LectureMgt 240 Lecture

Website Construction: Website Construction: Software and Language Software and Language

Alternatives Alternatives

March 29, 2005March 29, 2005

HTMLHTML

Specific example of SGML (Standard Specific example of SGML (Standard Generalized Markup Language)Generalized Markup Language)

Consists of tags and tag attributesConsists of tags and tag attributes Allows for page formatting and Allows for page formatting and

insertion of links and imagesinsertion of links and images An evolving languageAn evolving language

HTML Code ExampleHTML Code Example

HTML - Hypertext Markup HTML - Hypertext Markup LanguageLanguage

Why is it helpful to know how to write Why is it helpful to know how to write HTML code?HTML code? Language of the webLanguage of the web Good to know what’s going on in the Good to know what’s going on in the

background background Code generation, WYSIWYG interfaces Code generation, WYSIWYG interfaces

may not be perfectmay not be perfect

HTML – Viewing Source HTML – Viewing Source CodeCode

How can you view a page’s source How can you view a page’s source code?code? View - SourceView - Source Edit pageEdit page

Saving source codeSaving source code Editing source codeEditing source code Displaying the new pageDisplaying the new page

HTML EditorsHTML Editors

HTML codeHTML code Text EditorsText Editors NotePadNotePad Alternate between file and browser to Alternate between file and browser to

create pagecreate page Can all be done locallyCan all be done locally Only need to submit file to web server Only need to submit file to web server

when you’re ready to show it to the worldwhen you’re ready to show it to the world

HTML FilesHTML Files File StorageFile Storage

Edit on clientEdit on client Must be placed on web server to be Must be placed on web server to be

accessed by other networked computersaccessed by other networked computers

File Transfer ProtocolFile Transfer Protocol Standard for transferring files over the Standard for transferring files over the

internetinternet Can be used to access your H: or N: drive Can be used to access your H: or N: drive

from any computer as an alternative to from any computer as an alternative to WebFileWebFile

Will be using ftp to upload web files to the Will be using ftp to upload web files to the web server when working on your web web server when working on your web assignments and projectsassignments and projects

There are a number of ways to use ftpThere are a number of ways to use ftp

HTMLHTML

Transferring files to serverTransferring files to server Using ftp in your browserUsing ftp in your browser

ftp://username@darwin.cc.nd.edu

Using F-Secure ftpUsing F-Secure ftp Can download for free from OIT software Can download for free from OIT software

download pagedownload page Using Dreamweaver ftpUsing Dreamweaver ftp

In Dreamweaver you establish a local In Dreamweaver you establish a local version that you can upload in its entirety to version that you can upload in its entirety to the server when you’re readythe server when you’re ready

Managing Sites in Managing Sites in DreamweaverDreamweaver

Establish local siteEstablish local site Establish remote siteEstablish remote site Identify file transfer protocol to be Identify file transfer protocol to be

usedused Can then upload and download entire Can then upload and download entire

sitesite

HTML EditorsHTML Editors

WYSIWYGWYSIWYG WordWord Netscape ComposerNetscape Composer FrontPageFrontPage DreamweaverDreamweaver ColdFusionColdFusion

Advanced HTML EditorsAdvanced HTML Editors

Advanced HTML EditorsAdvanced HTML Editors

Advanced HTML Editor Advanced HTML Editor FeaturesFeatures

Syntax coloringSyntax coloring Code navigationCode navigation Auto-indentingAuto-indenting Pop-up attributesPop-up attributes

Advanced Editor FeaturesAdvanced Editor Features

Advanced HTML Editor Advanced HTML Editor FeaturesFeatures

Integration with other toolsIntegration with other tools Inclusion of scripting support and Inclusion of scripting support and

debuggingdebugging Integration with databasesIntegration with databases Assist with web site managementAssist with web site management

Advanced Editor FeaturesAdvanced Editor Features

Limitations of HTMLLimitations of HTML

Can you think of any?Can you think of any?

Extending HTML on the Extending HTML on the clientclient

JavascriptJavascript Java appletsJava applets ActiveXActiveX

Extending HTML on the Extending HTML on the serverserver

Active Server Pages (ASP)Active Server Pages (ASP) HTML page that includes one or more scripts HTML page that includes one or more scripts

(small embedded programs) that are processed (small embedded programs) that are processed on a Microsoft Web server before the page is on a Microsoft Web server before the page is sent to the usersent to the user

Typically, the script in the Web page at the Typically, the script in the Web page at the server uses input received as the result of the server uses input received as the result of the user's request for the page to access data from a user's request for the page to access data from a database and then builds or customizes the page database and then builds or customizes the page on the fly before sending it to the requestor on the fly before sending it to the requestor

JavaScriptJavaScript

Interpreted languageInterpreted language Uses JavaScript interpreter in browserUses JavaScript interpreter in browser Can use text editor to create JavaScript codeCan use text editor to create JavaScript code Process data collected in HTML forms right on the Process data collected in HTML forms right on the

user's computeruser's computer Create and store data on the user's machine Create and store data on the user's machine Add interactivity to graphics Add interactivity to graphics Change page elements on the fly based on user Change page elements on the fly based on user

inputinput

JavaScript Code LibrariesJavaScript Code Libraries The JavaScript SourceThe JavaScript Source ZDNet DeveloperZDNet Developer

JavaScript ExampleJavaScript Example CalendarCalendar

Calendar.htmlCalendar.html Calendar.jsCalendar.js

Dreamweaver and Dreamweaver and JavascriptJavascript

Includes behaviors written in Includes behaviors written in Javascript that you can incorporate Javascript that you can incorporate into your html filesinto your html files

Allows you to incorporate Javascript Allows you to incorporate Javascript code you have written into any html code you have written into any html filefile

Supports writing Javascript code in Supports writing Javascript code in either code or design viewseither code or design views

JavaJava

Architecture-neutralArchitecture-neutral PortablePortable Can download executable files to client Can download executable files to client Client does the computing workClient does the computing work Applet downloaded dynamicallyApplet downloaded dynamically Same version will work on any hardware Same version will work on any hardware

platformplatform Only need to develop one application Only need to develop one application Easy to distributeEasy to distribute

JavaJava

Java Virtual MachineJava Virtual Machine Another piece of code that helps Another piece of code that helps

computer understand Java applicationcomputer understand Java application Built into browserBuilt into browser Java applications run slower because of Java applications run slower because of

this intermediarythis intermediary

Java AppletsJava Applets

Many Java applet sources onlineMany Java applet sources online JavaFile.comJavaFile.com

Applet Download ExampleApplet Download Example Dracula’s LairDracula’s Lair

Slots.htmSlots.htm

JavaJava

Why is Java being used increasingly Why is Java being used increasingly to develop mission-critical to develop mission-critical applications?applications? Network and web readyNetwork and web ready PortabilityPortability Quick deploymentQuick deployment Good development toolsGood development tools

JavaJava

How are application updates How are application updates facilitated by Java?facilitated by Java? Java applications can sit on server until Java applications can sit on server until

request from clientrequest from client Client will always download most recent Client will always download most recent

versionversion No need to upgrade software on No need to upgrade software on

individual machinesindividual machines

ActiveXActiveX

Microsoft’s answer to JavaMicrosoft’s answer to Java An ActiveX control is a self-sufficient An ActiveX control is a self-sufficient

program that can be run on a program that can be run on a networknetwork

An ActiveX control is roughly An ActiveX control is roughly equivalent to a Java appletequivalent to a Java applet

XML - Extensible Markup XML - Extensible Markup LanguageLanguage

XML is another example of SGML XML is another example of SGML (Standard Generalized Markup (Standard Generalized Markup Language)Language)

Consists of tags and tag attributesConsists of tags and tag attributes Labels content rather than formatLabels content rather than format XML specifies tag structure but not XML specifies tag structure but not

tag labelstag labels

XMLXML

XML is a set of rules for taking your data and XML is a set of rules for taking your data and encoding it in chunks of text, which you can easily encoding it in chunks of text, which you can easily send across the Net and unpack at the receiving send across the Net and unpack at the receiving endend Tag labels are defined by coder, company, industry groupTag labels are defined by coder, company, industry group Tags must be used consistently across organizations to Tags must be used consistently across organizations to

facilitate information exchangefacilitate information exchange Labeling of data elements with tags allows selection and Labeling of data elements with tags allows selection and

display based on tag namesdisplay based on tag names Puts all data in similar format, allowing different Puts all data in similar format, allowing different

applications to share data without cumbersome applications to share data without cumbersome conversionsconversions

XML versus HTMLXML versus HTML

HTML ExampleHTML Example

Greenhouse.htmGreenhouse.htm

XML ExampleXML Example

Greenhouse.xmlGreenhouse.xml Light.xslLight.xsl Greenhousexwithlightxsl.xmlGreenhousexwithlightxsl.xml

XML UsesXML Uses

Likely to become the standard for Likely to become the standard for automating data exchange between automating data exchange between business systemsbusiness systems

Facilitates display of information on Facilitates display of information on multiple devices because of separation of multiple devices because of separation of content from formatcontent from format

Facilitates smarter searches for Facilitates smarter searches for information across the webinformation across the web

What are the pro’s and con’s of using XML What are the pro’s and con’s of using XML for data storage?for data storage?