INFSY 547: WEB-Based Technologies

1
INFSY 547 WEB-Based Technologies

• Gayle J Yaverbaum, PhD
• Professor of Information Systems
• Penn State Harrisburg

2
Introductions
3
Course Objectives

• Tools
• Apply and integrate.
• Project teams
• Design

4
Course Tools and Support Materials

• Syllabus/ANGEL
• WEB References
• Text Book

5
Prerequisite Background

• INFSY 535
• Java programming language
• equivalent as approved by program
• HTML helpful!

6
Course Methods

• Active Learning
• Research Paper
• Semester WEB Project
• Assignments/labs
• Collaborative learning
• Semester WEB Project
• Lecture

7

• Instructor Role
• Introduce tools/techniques
• Provide guidance
• Evaluate work

8

• Your Role
• Active participation
• Expanding knowledge
• Meet time lines for completion of work.
• Peer Evaluation

9
ANGEL

• Course Management System
• Syllabus
• Grading
• Assignments
• Policies
• Background form
• Evaluation Forms
• Links to all resources

10
About Grading

• Portfolios 12
• Project 70
• StoryBoards
• Home pages
• Project Reviews
• Labs, homework 6
• Project Teamwork - 12

11
Lets Begin!!
12

• An Overview of the World Wide WEB

13
The Internet

• DODs Advanced Research Projects Agency (ARPA)
• funded first network of 12 research schools.
• Several other networks were then established
• BITNET
• CSNET
• NSFnet (National Science Foundation ) replaced
• ARPANET leading to the Internet, a gigantic
  network
• of computers around the world
• .

14
World-Wide WEB (WWW)

• A way to make information available
• Information is stored on computers world-wide
• Displayed on pages that may contain text,
  images, sounds, video, and animation

15
Requesting a Web Page over the Internet
Server (a program) answers requests sends pages
Requests are sent through Internet, i.e.
computers linked world-wide
Client requests pages
16
(No Transcript)
17
A little quiz!
18
IP Addresses and URLs
I. Internet Protocol or IP Address

• Unique numbers are assigned to all computers
  connected to the Internet
• is a more meaningful name associated with an IP
  address such as www.psu.edu

II. URL or Uniform Resource Locator
19
Applications and hardware are integrated
Server www.personal.psu.edu
WEB Programmer ColdFusion, Dreamweaver,FrontPage
, etc.
Servers May talk to other servers
WEB Programmer HTML, XHTML, XML, JAVA,
JavaScript, VBScript, Perl, JSP, and more
20
Lets Try IT!

• Open Eclipse Development Environment on the
  desktop
• File/Open/Project/General
• Be sure line numbers are selected
• Windows/preferences/general
• Editors/TextEditors/
• Select Line Numbers

21
Develop XHTML within Project Folder!

• File/New/Other/Web/html
• Next
• Select XHTML Code
• Enter File Name of your choice
• XHTML 1.0 Transitional
• Review XHTML Rules to follow

22
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1
Transitional//EN" "http//www.w3.org/TR/xhtml1/DT
D/xhtml1-transitional.dtd"gt lthtml
xmls"http//www.w3.org/1999/xhtml"gt lthtmlgt
ltheadgt lttitlegtPersonal Pagelt/titlegt lt/headgt
ltbody bgcolor"ffffff" width"750"
topmargin"0" leftmargin"0"gt ltp align"center"gt
This is a temporary Personal e-Portfolio
Page automatically posted by the Penn
State Personal Web Server for lt/pgt lth2
align"center"gt ltbgtWRIGHT, MATTHEW lt/bgt lt/h2gt ltp
align"center"gt e-mail address lta
href"mailtomgw117_at_psu.edu"gt
mgw117_at_psu.edult/agtltbrgt lta href"http//www.psu.edu
/cgi- bin/ldap/ldap_query.cgi?uidmgw
117"gtCurrent Directory Entrylt/agt lt/pgt ltp
align"center"gt To learn how to turn your
personal home page into an e-portfolio that
documents your Penn State experience, visit
lt/pgt lth2 align"center"gt lta href"http//portfolio
.psu.edu/"gthttp//portfolio.psu.edu/lt/agt lt/h2gt
lthr width"75"gt ltp align"center"gt
lt/bodygt lt/htmlgt
23
(No Transcript)
24

• Structure of an XHTML Document
• Always has a head, body, and foot
• lthtmlgt
• ltheadgt
• lttitlegtMy First Attempt lt/titlegt
• lt/headgt
• ltbodygt
• This is a sample HTML Document!
• lt/bodygt
• lt/ html gt

25
Let's Add More Interesting Tags

• Add Some Headings
• lth1gt..lt/h1gt Very Large Text
• lth2gtlt/h2gt A little smaller
• And so forth through H6 tags for extremely small
  print such as disclaimers, etc.

26
Make More Interesting Pages

• Add A Paragraph
• ltpgt..lt/pgt
• (Doesnt really require the closing tag but
• closing tags are necessary in XML)
• indicates a new paragraph a carriage return
• ltp ALIGNRIGHTgt or LEFT OR CENTER
• Use closing tags for everything to prepare
  for
• XML!

27
More Interesting Pages

• ltdivgt..lt/divgt
• ltdiv ALIGNRIGHTgt or LEFT OR CENTER
• lt/ div gt
• Chops document into sections main use now is for
  aligning
• parts of your document. Note old center tag has
  been removed
• ltbr/gt used to move to next line
• lthr/gt places a horizontal line across page
• Note Use of / after the command. This is
  necessary
• in the XML world

28
Lists

• ltligt lt/ligt is the list tag
• Always used with ltolgt, ltulgt, and ltmenugt
• Example
• ltolgt
• ltligtPoint 1lt/ligt
• ltligt Point 2 lt/ligt
• lt/olgt

29
Result of a List Command

• On the Screen
• Point 1
• Point 2

30
More Advanced Stuff
31
Tables

• lttablegt.lt/tablegt
• Several attribute examples
• lttable BORDER0 WIDTH90gt
• ..
• ..
• lt/tablegt

32
Tables

• ltTABLE BORDER0 WIDTH90gt
• ltTRgt
• ltTDgt..lt/TDgt
• lt/TRgt
• lt/TABLEgt
• Note 2 column table would have 2 nested TD tags,
  etc.

33
2-Column Table

• ltTABLE BORDER2 WIDTH90gt
• ltTRgt
• ltTDgtJanuary 18, 2007lt/TDgt
• ltTDgtHTML Reviewlt/TDgt
• lt/TRgt
• lt/TABLEgt

January 18,2007
HTML Review
34
Hyperlinks
Linking Between Documents ltagtlt/agt Attrib
utes href sets up a reference to
a location name sets up a named
reference within a document
35
Hyperlink Examples
href lta hrefhttp//www.psu.edugtPenn State
Universitylt/agt -----------------------------------
----------------------- name lta nametopgtThis
is the top of the pagelt/agt . . lta href"top"gtGo
to top of pagelt/agt
36
Images
image tag ltimggt Attributes (partial list)
src .. widthin pixels
height in pixels align top,middle, left,
right vspace in pixels hspace in
pixels ltimg src "psumark.gif" align"LEFT"
WIDTH750 HEIGHT42gt
37
Lab/HomeWork

• Open your PASS space
• Create or Rework your Home page using your text
  and these slides for a reference
• Post this by January 25th replacing your
  index.htm page provided by PSU

38
XHTML Basics

• XHTML tags are all lowercase.
• XHTML is a stricter, tidier version of HTML.
• Pages written in XHTML work well in most
  browsers.
• All tags, including empty elements, must be
  closed.
• XHTML is the reformulation of HTML 4.0 as an
  application of XML.
• The elements (tags) and attributes are almost
  identical to HTML.

39
Assignment 1 Paper

• Web Design
• The Home Page-headings, titles, and labels
• Web Navigation and Content Organization
• Text Appearance, Lists, and Page Layout
• Graphics, Images, and Multimedia and Color
  Considerations
• Links, scrolling, and paging

40
READ INSTRUCTIONS!

• Take Advantage of the Learning Center
• WEB Resources are well worth your time
• One draft will be returned with feedback