Mgt 240 Lecture Website Construction: Software and Language Alternatives March 29, 2005

HTML Specific example of SGML (Standard Generalized Markup Language) Specific example of SGML (Standard Generalized Markup Language) Consists of tags and tag attributes Consists of tags and tag attributes Allows for page formatting and insertion of links and images Allows for page formatting and insertion of links and images An evolving language An evolving language

HTML Code Example

HTML - Hypertext Markup Language Why is it helpful to know how to write HTML code? Why is it helpful to know how to write HTML code? Language of the web Language of the web Good to know what’s going on in the background Good to know what’s going on in the background Code generation, WYSIWYG interfaces may not be perfect Code generation, WYSIWYG interfaces may not be perfect

HTML – Viewing Source Code How can you view a page’s source code? How can you view a page’s source code? View - Source View - Source Edit page Edit page Saving source code Saving source code Editing source code Editing source code Displaying the new page Displaying the new page

HTML Editors HTML code HTML code Text Editors Text Editors NotePad NotePad Alternate between file and browser to create page Alternate between file and browser to create page Can all be done locally Can all be done locally Only need to submit file to web server when you’re ready to show it to the world Only need to submit file to web server when you’re ready to show it to the world

HTML Files File Storage File Storage Edit on client Edit on client Must be placed on web server to be accessed by other networked computers Must be placed on web server to be accessed by other networked computers

File Transfer Protocol Standard for transferring files over the internet Standard for transferring files over the internet Can be used to access your H: or N: drive from any computer as an alternative to WebFile Can be used to access your H: or N: drive from any computer as an alternative to WebFile Will be using ftp to upload web files to the web server when working on your web assignments and projects Will be using ftp to upload web files to the web server when working on your web assignments and projects There are a number of ways to use ftp There are a number of ways to use ftp

HTML Transferring files to server Transferring files to server Using ftp in your browser Using ftp in your browser Using F-Secure ftp Using F-Secure ftp Can download for free from OIT software download page Can download for free from OIT software download page Using Dreamweaver ftp Using Dreamweaver ftp In Dreamweaver you establish a local version that you can upload in its entirety to the server when you’re ready In Dreamweaver you establish a local version that you can upload in its entirety to the server when you’re ready

Managing Sites in Dreamweaver Establish local site Establish local site Establish remote site Establish remote site Identify file transfer protocol to be used Identify file transfer protocol to be used Can then upload and download entire site Can then upload and download entire site

HTML Editors WYSIWYG WYSIWYG Word Word Netscape Composer Netscape Composer FrontPage FrontPage Dreamweaver Dreamweaver ColdFusion ColdFusion

Advanced HTML Editors

Advanced HTML Editor Features Syntax coloring Syntax coloring Code navigation Code navigation Auto-indenting Auto-indenting Pop-up attributes Pop-up attributes

Advanced Editor Features

Advanced HTML Editor Features Integration with other tools Integration with other tools Inclusion of scripting support and debugging Inclusion of scripting support and debugging Integration with databases Integration with databases Assist with web site management Assist with web site management

Advanced Editor Features

Limitations of HTML Can you think of any? Can you think of any?

Extending HTML on the client Javascript Javascript Java applets Java applets ActiveX ActiveX

Extending HTML on the server Active Server Pages (ASP) Active Server Pages (ASP) HTML page that includes one or more scripts (small embedded programs) that are processed on a Microsoft Web server before the page is sent to the user HTML page that includes one or more scripts (small embedded programs) that are processed on a Microsoft Web server before the page is sent to the user Typically, the script in the Web page at the server uses input received as the result of the user's request for the page to access data from a database and then builds or customizes the page on the fly before sending it to the requestor Typically, the script in the Web page at the server uses input received as the result of the user's request for the page to access data from a database and then builds or customizes the page on the fly before sending it to the requestor

JavaScript Interpreted language Interpreted language Uses JavaScript interpreter in browser Uses JavaScript interpreter in browser Can use text editor to create JavaScript code Can use text editor to create JavaScript code Process data collected in HTML forms right on the user's computer Process data collected in HTML forms right on the user'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 input Change page elements on the fly based on user input

JavaScript Code Libraries The JavaScript Source The JavaScript Source The JavaScript Source The JavaScript Source ZDNet Developer ZDNet Developer ZDNet Developer ZDNet Developer JavaScript Example JavaScript Example Calendar Calendar Calendar Calendar.html Calendar.html Calendar.html Calendar.js Calendar.js Calendar.js

Dreamweaver and Javascript Includes behaviors written in Javascript that you can incorporate into your html files Includes behaviors written in Javascript that you can incorporate into your html files Allows you to incorporate Javascript code you have written into any html file Allows you to incorporate Javascript code you have written into any html file Supports writing Javascript code in either code or design views Supports writing Javascript code in either code or design views

Java Architecture-neutral Architecture-neutral Portable Portable Can download executable files to client Can download executable files to client Client does the computing work Client does the computing work Applet downloaded dynamically Applet downloaded dynamically Same version will work on any hardware platform Same version will work on any hardware platform Only need to develop one application Only need to develop one application Easy to distribute Easy to distribute

Java Java Virtual Machine Java Virtual Machine Another piece of code that helps computer understand Java application Another piece of code that helps computer understand Java application Built into browser Built into browser Java applications run slower because of this intermediary Java applications run slower because of this intermediary

Java Applets Many Java applet sources online Many Java applet sources online JavaFile.com JavaFile.com JavaFile.com Applet Download Example Applet Download Example Dracula’s Lair Dracula’s Lair Dracula’s Lair Dracula’s Lair Slots.htm Slots.htm Slots.htm

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

Java How are application updates facilitated by Java? How are application updates facilitated by Java? Java applications can sit on server until request from client Java applications can sit on server until request from client Client will always download most recent version Client will always download most recent version No need to upgrade software on individual machines No need to upgrade software on individual machines

ActiveX Microsoft’s answer to Java Microsoft’s answer to Java An ActiveX control is a self-sufficient program that can be run on a network An ActiveX control is a self-sufficient program that can be run on a network An ActiveX control is roughly equivalent to a Java applet An ActiveX control is roughly equivalent to a Java applet

XML - Extensible Markup Language XML is another example of SGML (Standard Generalized Markup Language) XML is another example of SGML (Standard Generalized Markup Language) Consists of tags and tag attributes Consists of tags and tag attributes Labels content rather than format Labels content rather than format XML specifies tag structure but not tag labels XML specifies tag structure but not tag labels

XML XML is a set of rules for taking your data and encoding it in chunks of text, which you can easily send across the Net and unpack at the receiving end XML is a set of rules for taking your data and encoding it in chunks of text, which you can easily send across the Net and unpack at the receiving end Tag labels are defined by coder, company, industry group Tag labels are defined by coder, company, industry group Tags must be used consistently across organizations to facilitate information exchange Tags must be used consistently across organizations to facilitate information exchange Labeling of data elements with tags allows selection and display based on tag names Labeling of data elements with tags allows selection and display based on tag names Puts all data in similar format, allowing different applications to share data without cumbersome conversions Puts all data in similar format, allowing different applications to share data without cumbersome conversions

XML versus HTML

HTML Example Greenhouse.htm Greenhouse.htm Greenhouse.htm

XML Example Greenhouse.xml Greenhouse.xml Greenhouse.xml Light.xsl Light.xsl Light.xsl Greenhousexwithlightxsl.xml Greenhousexwithlightxsl.xml Greenhousexwithlightxsl.xml

XML Uses Likely to become the standard for automating data exchange between business systems Likely to become the standard for automating data exchange between business systems Facilitates display of information on multiple devices because of separation of content from format Facilitates display of information on multiple devices because of separation of content from format Facilitates smarter searches for information across the web Facilitates smarter searches for information across the web What are the pro’s and con’s of using XML for data storage? What are the pro’s and con’s of using XML for data storage?