Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
1
Web EngineeringWeb Technologies I
N 30 2009
© Copyright 2008 STI - INNSBRUCK www.sti-innsbruck.at
Nov 30 2009Katharina Siorpaes
Overview
• Introduction• HTML & XHTML• CSS• JavaScript• Wrap-up
Web Engineering 2
2
What are the basic ingredients to start to build a Web site
Web Engineering
INTRODUCTION
3
Basic Ingredients
• Content structuring (and “basic” presentation…)– (X)HTML
• Business logic (client side)– JavaScript
• Presentation– CSS
• … with these 3 elements you can start building nice (content static) interfaces for you web applications
Web Engineering
(content static) interfaces for you web applications
4
3
Standards or not Standards?
• XHTML and CSS are recommendation from W3C– XHTML 1.1 (2.0 is currently a draft)
htt // 3 /M kU /• http://www.w3.org/MarkUp/– CSS 2.1 (3.0 is under development)
• http://www.w3.org/Style/CSS/
• JavaScript is “not” a standard– This due to the fact also that at the beginning there was
some competition between Sun scripting language and Mircrosoft one
– An attempt of standardization was made by European
Web Engineering
An attempt of standardization was made by European Computer Manufacturers Association (ECMA), never completed (last version dates back to 1999)
– http://en.wikipedia.org/wiki/JavaScript
5
How to structure your content in a Web page
Web Engineering
HYPERTEXT MARKUP LANGUAGE
6
4
HTML & XHTML
• W3C– Set Standards
• Syntax• Functionality
• HyperText Markup Language (v4.01 – 1999)– Type of More General Language (SGML)– Describes Function of Text Using Codes
• Extensible HTML (v2.0 – 2004)St i t V i f HTML
Web Engineering
– Stricter Version of HTML– Integrate HTML with XML
7
HTML & XHTML
• HTML Advantages– Platform Portability– Speed (size of file)– Text File
• HTML Disadvantages– Rendering Differences– Extensions
• Proprietary Functionality Added by Browsers
Web Engineering
• XHTML Advantages– Resolve Issues with Different HTML Versions
8
5
Syntax
• Elements (Tags)– Codes that Control Content Appearance– Opening/Closing
• Two-Sided– <tagName>Content</tagName>
• One-Sided– <tagName />
– Lowercase
• Deprecated
Web Engineering
– Obsolete Elements or Syntax– Future Support Not Guaranteed
9
Syntax
• Comments– <!-- . . . -->
• <!-- This is a comment. -->
• White Space– Does Not Render Multiple Spaces– Tab, Enter do not Render– Use Non-breaking Space
•
Attrib tes
Web Engineering
• Attributes– Controls Behavior or Appearance of Element
• <tagName attrib#1=“Value” attrib#2=“Value” />
10
6
<html>
• <html>…</html>– Surround All Markup & Text– Required – Used To Begin & End Every HTML Document
Web Engineering 11
<head>
• <head>…</head>– Contains the Document's Header Information– Required – Important Information
• Document Title• META Tags
– Text Included Does Not Render
Web Engineering 12
7
<body>
• <body>…</body>– Contains All Content to be Rendered
• Attributes– leftmargin=number
• Sets The Left Margin for Page
– topmargin=number• Sets the Top Margin for the Page
Web Engineering 13
<body>
• Styles– style=“color: colorName | #rrggbb | rgb(#,#,#);”
• Specifies the Color of the Regular Text
– style=“background-color: colorName | #rrggbb | rgb(#,#,#);”• Specifies the Background Color
– style=“background-image: url(filename.ext);”• Points to Location of Image that is Used as Background• Image is Tiled
Web Engineering 14
8
<body>
• Styles– style=“background-position: horizontal vertical;”
• Specifies the Positioning of the Background Image• Can Specify Keywords or Percentages
– style=“background-repeat: repeat | repeat-x | repeat-y | no-repeat;”
• Specifies the Tiling of the Background Image
– style=“background-attachment: scroll | fixed;”• Background Image Scrolls with Page or Acts as Watermark
Web Engineering 15
<h#>
• <h#>…</h#>– Create a Heading– Numbered from h1 through h6
• h1 is the Top Head Level While h6 is the Bottom
– Should not be Used for Text Formatting– Convey Page & Content Organization– Should be Used in Descending Order
• Stylet l “t t li l ft | t | i ht | j tif ”
Web Engineering
– style=“text-align: left | center | right | justify;”• Specifies the Alignment of the Heading Text
16
9
<p> & <br>
• <p>…</p>– Inserts Blank Line Before Tag
• Separates Paragraphs of Text
• <br />– Causes Text To Break Wherever Tag is Placed
Web Engineering 17
Lists
• <ul>…</ul>– Unordered List Renders a Bulleted List– Use Where Order or Rank is Unimportant
• Style– style=“list-style-type: disc | square | circle;”
• Changes Style of Bullet Before Item
– style=“list-style-image: url(filename.ext);” • Image Used as Bullet
Web Engineering 18
10
Lists
• <ol>…</ol>– Ordered List Tags Render a Numbered List
• Style– style=“list-style-type: decimal | upper-roman | upper-alpha |
. . .;” • Changes Number / Letter Style Before Item
– style=“list-style-position: inside | outside;” • Changes Wrapped Item Placement
Web Engineering 19
Lists
• <li>…</li>– Defines an Item in a List
• <dl>…</dl>– Definition List– <dt>…</dt>
• Defined Term
– <dd>…</dd>• Definition
Web Engineering 20
11
Block Level Elements
• <blockquote>…</blockquote>– Content Indented on Left & Right
• <pre>…</pre>– Retains All White Space– Uses Fixed Width Typeface
Web Engineering 21
Inline Elements
• <strong>…</strong> or <b>…</b>– Bold
• <em>…</em> or <i>…</i>– Italics
• <sub>…</sub>– Subscripted
• <sup>…</sup>– Superscripted
Web Engineering
Superscripted
22
12
Inline Elements
• <span>…</span>– Used for Applying CSS Classes
• Nesting– Placing Sets of Tags Within Each Other
• <b><i>…</i></b> instead of <b><i>…</b></i>
Web Engineering 23
<img>
• <img />– Inserts an Image Into a Document– Secondary to Content
• Attributes– alt=“text”
• Provides Alternative Text that Describes the Image• IE Displays ALT Text When User Hovers on Image
– Users Who Surf With Graphics Turned Off– Non-graphical Browsers
Web Engineering
» Alt Text is Displayed in Place of Image
• Required
24
13
<img>
• Attributes– height=“pixels”
• Specifies the Image's Height
– src=“URL”• Specifies Location of Image to Place in Web Page• Required
– width=“pixels”• Specifies the Image's Width
Web Engineering 25
<img>
• Style– style=“float: none | left | right;”
• Place Image on Left / Right & Wrap Text Around It
– style=“clear: none | left | right;”• Display Content After Margin is Clear of Floating Elements
– style=“margin: top# right# bottom# left#;”– style=“border-width: #;”
• Rendered in Designated Link Color if Image is a Link
Web Engineering 26
14
<hr>
• <hr />– Inserts Plain Line (Horizontal Rule) Across Page– Emphasize Divisions & Transitions In Content
• Style– style=“background-color: #RRGGBB | colorname;”– style=“color: #RRGGBB | colorname;”– style=“height: number;”– style=“width: number;”
Web Engineering 27
Special Characters
• & – Ampersand
• ©– Copyright
• ·– Bullet
• ®– Registered
Web Engineering
Registered
• ™– Trademark
28
15
<a>
• <a>…</a>– Used to Create Links to Other Resources– Named Anchor
• AKA Bookmark• Used to Name Specific Locations within a Page• id Attribute
– Defines Destination
Web Engineering 29
<a>
• Attributes– accesskey=“text”
• Character Used as Keyboard Shortcut to Activate Link
– coords=“X1, Y1, X2, Y2, etc.”• Coordinates that Define Hot Spot Shape in Image Map
– href=“URL”• Specifies Location of Linked Resource
– Typically Another HTML File– Can Also Specify Other Internet Resources
» Files, E-mail, FTP
Web Engineering
• Named Anchor or Bookmark URLs are Preceded By #
30
16
<a>
• Attributes– name=“text”
• Marks Specific Place Within an HTML Document• AKA Named Anchor or Bookmark
– rel=“text”• Indicates Relationship Between Documents
– rel=“stylesheet”» Tells Browser that Linked Document is a Style Sheet
– shape=“rect | circle | poly | default”• Specifies Shape of Hot Spot in Image Map
Web Engineering
Spec es S ape o o Spo age ap
31
<a>
• Attributes– title=“text”
• Provides Supplemental Information Regarding a Link– Behaves Like a Tooltip– Should be Less Than 60 Characters
Web Engineering 32
17
<a>
• Example<a href="http://www.mysite.com/">A link to a p ysite.</a>
< a href="#P5">A link to paragraph 5 in same document.</a><p>Paragraph 1</p><p>Paragraph 2</p>
Web Engineering
p Paragraph 2 /p<p>Paragraph 3</p><p>Paragraph 4</p><p id=“P5”>Paragraph 5 content.</p>
33
Paths
• URL (Uniform Resource Locator)– Location of Document on Web
• www.sti-innsbruck.at
• Path– Location of Document on Server
• http://www.sti-innsbruck.at/about/team/details/federico-michele-facca/
Web Engineering 34
18
Paths
• Absolute– Exact Location on Server
• Begins with a /– /student/index.htm
• Relative– Location Relative to Current Document
• Current — Nothing– page.htm
• Child — Separated by /images/background gif
Web Engineering
– images/background.gif• Parent — Two Periods (..)
– ../page.htm
35
URL
• http://www.sti-innsbruck.at/about/team/details.html– Communication Protocol
• http://
– Domain• www.sti-innsbruck.at
– Path • /about/team/
– Document• details.html
Web Engineering 36
19
Protocols
• Hypertext Transfer Protocol– Web Server– http://
• File Transfer Protocol– File Server– ftp://
• USENET– Newsgroup
Web Engineering
g p– <a href=“news:newsgroup.name”>Click Me</a>
37
Protocols
• E-Mail– Mailto
• <a href=“mailto:[email protected]”>Send Mail</a>
– Can Automatically Include Subject Line• “mailto:[email protected]?subject=text”
– Other Options• “mailto:[email protected][email protected]
&[email protected]&subject=subscribe&body=Send me your newsletter right away”
Web Engineering 38
20
<table>
• <table>…</table> – Structure to Control Page Layout– Structure to Contain & Align Content
• Attributes– border=“#”
• Sets Thickness of Borders Displayed for Table Cells• Attribute Set to 0 Will Make Borders “Invisible”
Web Engineering 39
<table>
• Attributes– cellpadding=“#”
• Specifies Amount of Space Between Cell & Content in Cell
– cellspacing=“#”• Specifies Amount of Space Between Cells
– frame=“above | below | border | box | hsides | lhs | rhs | void | vsides”
• Specifies Where Borders of Tables & Cells Appear
Web Engineering 40
21
<table>
• Attributes– height=“# | %”
• Specifies Height of Table in Pixels or Percentage of Window
– rules=“all | cols | groups | none | rows”• Specifies Where Gridlines Appear in a Table
– valign=“top | bottom | middle ”• Specifies Vertical Alignment of Text in Cells
– width=“# | %”• Specifies Width of Table in Pixels or Percentage of Window
Web Engineering 41
<colgroup>
• <colgroup>…</colgroup> – Defines Groups of Table Columns for Formatting– Only Valid Inside <table>
• Attributes– align=“left | center | right | justify | char”
• Specifies Horizontal Alignment of Contents in Column Group
– char=“character”• Specifies Character to Use to Align Text On
Web Engineering 42
22
<colgroup>
• Attributes– span=“#”
• Specifies Number of Columns <colgroup> Should Span
– valign=“top | middle | bottom | baseline”• Specifies Vertical Alignment of Contents in <colgroup>
– width=“# | %”• Specifies Width of Each Column in <colgroup>• 0* - Column Width Should be Minimum Width
Web Engineering 43
<col>
• <col /> – Defines One or More Columns of Table for Formatting– Only Valid Inside <table> or <colgroup>
• Attributes– align=“left | center | right | justify | char”
• Specifies Horizontal Alignment of Contents in Table Column
– char=“character”• Specifies Character to Use to Align Text On
Web Engineering 44
23
<col>
• Attributes– span=“#”
• Specifies Number of Columns the Column Should Span
– valign=“top | middle | bottom | baseline”• Specifies Vertical Alignment of Contents in Table Column
– width=“# | %”• Specifies Width of Column• 0* - Column Width Should be Minimum Width
Web Engineering 45
<tr> & <td>
• <tr>…</tr>– Defines a Row in a Table
• <td>…</td>– Defines Table Data (a Cell) in a Row
• Table Data Cells Must Only Appear Within Table Rows• Closing Tag Must Appear on Same Line as Content
– Otherwise Gapping May Occur
Web Engineering 46
24
<td>
• Attributes– colspan=“#”
• Specifies How Many Columns the Cell Overlaps
– rowspan=“#”• Specifies How Many Rows the Cell Overlaps
Web Engineering 47
<th> & <caption>
• <th>…</th>– Specifies the Table Header for a Row
• Identical to Table Data Cells Except:– Cells Contents are Bolded– Cells Contents are Centered
• <caption>…</caption>– Attaches a Caption to a Table
Web Engineering 48
25
Example
Web Engineering 49
How to make your Web page good looking
Web Engineering
CASCADE STYLE SHEET
50
26
History of CSS
• Initial Proposal for CSS – Released in 1994 by Hakon Lie of CERN
• World Wide Web Consortium (W3C)– Founded in 1994 as a Web Standards Organization
• CSS1 (’96) — 50 Properties– www.zvon.org/xxl/css1Reference/Output/index.html
• CSS2 (’98) — 70 Additional Properties– www.zvon.org/xxl/css2Reference/Output/index.html
Web Engineering
www.zvon.org/xxl/css2Reference/Output/index.html
51
CSS Basics
• Style Rules– Determines Style Characteristics for an HTML Element– Selector
• Determines Element to Which Rule is Applied
– Declaration• Details the Exact Property Values
– Property» Quality or Characteristic (e.g., Color)
– Value» Specification of Property (e.g., Blue)
Web Engineering
• Style Sheet– Set of Style Rules
52
27
CSS Basics
• Style Rule Syntax
Web Engineering 53
Combining CSS & HTML
• Inline– Modify the Appearance of a Particular Element
• Style Attribute
• Embedded– Applied To An Entire Document
• Redefines All Occurrences of a Particular Element– Uses <style>…</style> in <head>
• Linked
Web Engineering
Linked– External File of Declarations Available to an Entire Site
• ASCII File with an Extension of .css
54
28
Inline Style
• Defines a Style for a Single Element
– Generally Used to Override a Style Set at a Higher LevelGenerally Used to Override a Style Set at a Higher Level
– Only Affects One Instance of an Element
• Syntax
– <tag style=“property:value1; property:value2;”>
Web Engineering
<h1 style=“color:green; font-family:sans-serif;”>
<b style=“color:yellow; background-color:green;”>
55
Embedded Style
• Always Contained in the <head> – Generally Used to Override a Style Set at a Higher Level– Only Affects the Document in Which it Resides
• Syntax– selector {declarations}
<style type=“text/css”>h1 {color:green; font-family:sans-serif;}b {color:yellow; background-color:green;}
Web Engineering
</style>
56
29
Linked Style
• External Style Sheet– Always Contained in the <head>– Text Document that Contains Style Rules– Allows Specification of Rules for Multiple Documents– Does Not Contain HTML Code
• Syntax• <link rel=“stylesheet” href=“master.css” />
Web Engineering 57
Cascading
• Determines Which Rules are Assigned to Elements• Weight Assignment Based on Four Variables:g g
– Use of the !Important Keyword– Origin of the Rule– Specificity of the Selector– Order of the Rule in the Style Sheet
Web Engineering 58
30
Cascading
• Rule Weight with the !Important Keyword– Allows User to Override Author’s Style Setting
• For Particular Element
– Improves Accessibility of Documents • Gives Control to Users with Special Requirements
• Rule Weight by Origin– Cascading Order of Precedence:
1. Rules From Author’s Style Sheet
Web Engineering
1. Rules From Author s Style Sheet
2. Rules From User’s Style Sheet
3. Rules From Browser’s Style Sheet
59
Cascading
• Rule Weight by Specificity– Rules with More Specific Selectors Take Precedence Over
Rules with Less Specific Selectors
• Rule Weight by Order– Based on Order of Rule within Style Sheet
• Rules Listed Later Take Precedence Over Those Listed Earlier
Web Engineering 60
31
Inheritance
• Parent– Element that Contains Another Element
• Child– Element within Another Element
• Inheritance– CSS Rules Inherit from Parent to Child Elements
• Based on Hierarchical Structure of Documents
Web Engineering 61
Basic Selection
• Type Selectors– Selector Determines Element to which Declaration is
Applied– Style Sheet Examples:
• h2 {color: red;}• p {font-size: 10 pt;}
Web Engineering 62
32
Basic Selection
• Grouping Selectors– Set the Same Declaration for Multiple Selectors
• Syntax:• h1 {color: red;}• h2 {color: red;}or• h1, h2 {color: red;}
Web Engineering 63
Basic Selection
• Combining Declarations– Multiple Declarations May be Stated for Same Selector
• Syntax:• p {color: blue;}• p {font-size: 12pt;}or• p {color: blue; font-size: 12pt;}
Web Engineering 64
33
Basic Selection
• Descendant Selector– AKA Contextual Selectors– Based on Hierarchical Structure of Elements in Document
• Syntax:– b i {color: #336699; background-color: #000000;}– Does Not Apply to i b
Web Engineering 65
Advanced Selection
• id Attribute Selector– Applied to Only ONE
Unique Element in aUnique Element in a Document
– Core Attribute that can be Applied to Any HTML Element
Web Engineering• Syntax:
34
Advanced Selection
• class Attribute Selector– Enables Application of Rule to Selected Element(s)– Core Attribute that can be Applied to Any HTML ElementCore Attribute that can be Applied to Any HTML Element
• Syntax:
Web Engineering
Syntax:<p class=“quote”>Text in red with a 30 pixel margin</p>– May be Restricted to a Specific Element Type
h1.quote {color: red; margin: 30px;}
67
Advanced Selection
• <div>…</div>– Block Level Element – Used to Contain Other HTML Elements– Displayed Discretely from the Rest of the Document
• Paragraph Breaks Added Before and After <div> Contents
• <span>…</span>– Inline Element– Used to Contain Other HTML Elements
U d ithi T t Bl k
Web Engineering
– Used within Text Blocks
68
35
Advanced Selection
• Pseudo-Class Selectors– Select Elements Based on Characteristics Other Than
Name– Link Pseudo-Classes
• :link– Allow Modification of Style Characteristics for Unvisited Links
:link {color: green;}• :visited
– Allow Modification of Style Characteristics for Visited Links:visited {color: green;}
Web Engineering 69
Advanced Selection
• Pseudo-Class Selectors– Dynamic Pseudo-Classes
• Apply Styles to an Element Based on User’s Actions• :hover
– Applies Style When User Mouses Over Element• :active
– Applies Style When User Activates Element• :focus
– Applies Style When Element is Accepting User Input
Web Engineering 70
36
Advanced Selection
• Pseudo-Elements Selectors– Modify Aspects of Document Not Classified by Elements– :first-letter
• Apply Style Rules to the First Letter of Any Block-level Element– Initial Capitals– Drop Capitals
Web Engineering 71
Advanced Selection
• Pseudo-Element Selectors
:first letter– :first-letter
Web Engineering
37
Advanced Selection
• Pseudo-Element Selectors
– :first-line
• Apply Style Rules to the First Line of Any Block-level Element
Web Engineering 73
Advanced Selection
• Child Selector– >
• Apply Style Rules to Child Elements of Any Parentdiv > blockquote {font-weight: bold;}
Web Engineering 74
38
Advanced Selection
• First Child– :first-child
• Apply Style Rules to the First Child Element of a Parentdiv > p:first-child {font-weight: bold;}
Web Engineering 75
Advanced Selection
• Adjacent Sibling– +
• Apply Style Rules to – Elements that Share the Same Parent– Are Adjacent in the Code
Web Engineering 76
39
Fonts
• Measurement Units
– Absolute Units
• Specify a Fixed Value
• Cannot be Scaled to Client Display
– Use Only When Measurements of User Medium are Known
– Relative Units
• Enables Scalable Web Pages
Web Engineering
– Adapt to Different Display Types & Sizes
– Recommended Method for Web Page Design
77
Fonts
• Measurement Units
Web Engineering 78
40
Font Propertiess
• Styles– style=“font-family: fonts;”
• Allows Specification of Font Family Names• Generic Font Families
– Allows Greater Portability Across Platforms– Serif → Traditional Letter Form (e.g., Times)– Sans-serif → Block Letters, Have no Serifs (e.g., Arial)– Monospace → Fixed-width
» Every Letter has Same Horizontal Width– Cursive → Resembles Handwriting (Limited Support)– Fantasy → Primarily Decorative (Limited Support)
Web Engineering
y y ( pp )
79
Font Properties
• Styles– style=“font-family: fonts;”
• Specific Font Families– Allows Specification of Particular Font-family
» Garamond, Impact– User Must Have Font Installed on Machine
» If not, Browser Will Supply Default
• Example:<p style=“font-family: arial;”>
Web Engineering 80
41
Font Properties
• Styles– style=“font-family: fonts;”
• Specifying Font Substitution– Allows Specification of Alternate Fonts
» Uses Comma Separated List– Browser Scans List for First Installed Font
» Otherwise, Browser Supplies Default– Generic Font-family Names can be Used
• Example:<p style=“font-family: verdana,arial,helvetica,sans-serif;”>
Web Engineering 81
Font Properties
• Styles– style=“font-size: size | keyword | %;”
Ab l t K d• Absolute Keywords– xx-small– x-small– small– medium– large– x-large– xx-large
Web Engineering
42
Font Properties
• Styles– style=“font-size: size | keyword | %;”
• Relative Keywords– Smaller | Larger– Example
» Parent Element’s Size is Large» Current Element’s Size is Set to Larger» Result is that the Current Font Size will be X-large
• Percentage– Example
» 50%, 150%, 200%
Web Engineering
Font Properties
• Styles– style=“font-style: normal | italic | oblique;”– style=“font-variant: normal | small-caps;”– style=“font-weight: normal | bold | bolder | lighter | #;”
• # = 100 – 900 in Increments of 100• 400 = Normal• 700 = Bold
Web Engineering
43
Font Properties
• Font Shortcut– Allows Specification of Properties in a Single Statement– Font-size & Font-family Required
• Must be in Order
– Line-height Must be Preceded by /
• Example:– <p style=“font: 18pt/24pt arial bold;”>
Web Engineering 85
Text Properties
• Styles– style=“line-height: # | %;”
AKA L di• AKA Leading
– style=“letter-spacing: normal | #;”
• AKA Kerning
– style=“word-spacing: normal | #;”
• AKA Tracking
Web Engineering
44
Text Properties
• Styles– style=“text-indent: #;”
S f f f• Allows Specification Amount of Indentation of First Line
Web Engineering
Text Properties
• Styles– style=“text-decoration: none | underline | overline | line-
through | blink;”through | blink;
Web Engineering
– style=“text-transform: capitalize | uppercase | lowercase | none;”
45
Text Properties
• Styles– style=“vertical-align: baseline | sub | super | top | text-
top | middle | bottom | text bottom | % | #;”top | middle | bottom | text-bottom | % | #;
Web Engineering
Visual Formatting Model
• Three Element Display Type Categories
– Block (e.g., Paragraphs)• Contain Inline Boxes that Contain Element Content
– Inline• Contain Content within the Block-level Elements
• Do not Form New Blocks of Content
– List-item
Web Engineering
• Creates Surrounding Container and List-item Inline Boxes
– display: block | inline | list-item | none
90
46
Box Model
• Describes Rectangular Boxes that Contain Content– Each Block-level Element is Displayed as a Box– Each Content Box can have Margins, Borders, & Padding
Web Engineering 91
Margin Properties
• margin: # | %– Shorthand Property Sets All Four Individual Margins
Web Engineering
47
Margin Properties
• margin-left | margin-right | margin-top | margin-bottom: # | %
N ti i b t t hi i l ff t– Negative margins can be set to achieve special effects
Web Engineering
Padding Properties
• padding: # | %
– Shorthand Property Sets All Four Individual Paddings
• Same Format as Margin
• padding-left | padding-right | padding-top | padding-bottom: # | %
Web Engineering
padding-bottom: # | %
48
Border Properties
• border: style width color
Shorthand Property Sets All Four Individual Borders– Shorthand Property Sets All Four Individual Borders
• Same Format as Margin
Web Engineering
Border Properties
• border-style: keyword– Keywords
• none• dotted • dashed• solid• double• groove• ridge
i t
Web Engineering
• inset • outset
49
Border Properties
• border-width: thin | medium | thick | #
Web Engineering
• border-color: value
Special Box Properties
• width: # | %
– Sets Horizontal Width of a Containing Box
• height: # | %
– Sets Vertical Height of a Containing Box
• float: left | right | none
– Sets Position of an Element to Left/Right of Parent Element
Web Engineering
• clear: none | left | right | both
– Controls Flow of Text Around Floated Elements
50
Special Box Properties
• float & clear
Web Engineering
Background Properties
• background-color: colorname | #
Web Engineering
51
Background Properties
• background-image: url(imagename.gif)
Web Engineering
Background Properties
• background-repeat: repeat | repeat-x | repeat-y | no-repeat
Web Engineering
52
Background Properties
• background-position: % | length | keyword
Web Engineering
Background Properties
• background-attachment: scroll | fixed
Web Engineering
53
List Properties
• list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lo er greek | lo er alpha | lo er latin | pper alphalower-greek | lower alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hira-ganairoha | katakana-iroha | none– Default = disc– Allows Customization of the List Marker
• Syntax:
Web Engineering
• Syntax:ul {list-style-type: circle;}
105
List Properties
• list-style-type
Web Engineering
54
List Properties
• list-style-image: url(filename.ext)– Allows Use of Image as List Marker
• Syntax:ul {list-style-image: url(paw.gif);}
Web Engineering 107
List Properties
• list-style-position: inside | outside
– Default = inside
– Allows Placement of the List Marker
• Syntax:
Web Engineering
ul {list-style-position: outside;}
108
55
Positioning Properties
• position: type position size
– type = static | relative | absolute | fixed
– position = top | left | bottom | right
– size = height | width
Web Engineering 109
Positioning Properties
• div {position:absolute; left:130px; top:100px;}
Web Engineering
56
Positioning Properties
• div {position:absolute; left:130px; top:100px; width: 100px;}
Web Engineering
Positioning Properties
• visibility: visible | hidden
– Specifies Whether an Element is Displayed or Hidden
• z-index: auto | #
– Specifies an Element’s Stacking Level
Web Engineering 112
57
Example
Web Engineering 113
How to add some business logic to your Web page
Web Engineering
JAVASCPRIPT
114
58
What’s a Scripting Language?
• Language used to write programs that compute inputs to another language processor– One language embedded in another
• Embedded JavaScript computes HTML input to the browser• Shell scripts compute commands executed by the shell
• Common characteristics of scripting languages– String processing – since commands often strings– Simple program structure, define things “on the fly”
Flexibility preferred over efficiency safety
Web Engineering
– Flexibility preferred over efficiency, safety• Is lack of safety a good thing? (Example: JavaScript used for Web
applications…)
JavaScript History
• Developed by Brendan Eich at Netscape – Scripting language for Navigator 2
• Later standardized for browser compatibility– ECMAScript Edition 3 (aka JavaScript 1.5)
• Related to Java in name only– Name was part of a marketing deal
• Various implementations available– SpiderMonkey C implementation (from Mozilla)
Web Engineering
SpiderMonkey C implementation (from Mozilla)– Rhino Java implementation (also from Mozilla)
59
Common Uses of JavaScript
• Form validation• Page embellishments and special effectsg p• Navigation systems• Basic math calculations• Dynamic content manipulation• Sample applications
– Dashboard widgets in Mac OS X, Google Maps, Philips universal remotes Writely word processor hundreds of
Web Engineering
universal remotes, Writely word processor, hundreds of others…
Example 1: Add Two Numbers
<html>…
<p> </p><p> … </p><script>
var num1, num2, sumnum1 = prompt("Enter first number")num2 = prompt("Enter second number")sum = parseInt(num1) + parseInt(num2)alert("Sum = " + sum)
/ i t
Web Engineering
</script>…
</html>
60
Example 2: Browser Events
<script type="text/JavaScript">function whichButton(event) {if (event button==1) {
Mouse event causes page-defined function to be calledif (event.button==1) {
alert("You clicked the left mouse button!") }else {
alert("You clicked the right mouse button!") }}
</script>…
b d d " hi hB tt ( t)"
to be called
Web Engineering
<body onmousedown="whichButton(event)">…</body>
Example 3: Page Manipulation
• Some possibilities– createElement(elementName)– createTextNode(text)– appendChild(newChild)– removeChild(node)
• Example: add a new list itemvar list = document.getElementById('t1')var newitem = document.createElement('li')
Web Engineering
var newtext = document.createTextNode(text)list.appendChild(newitem)newitem.appendChild(newtext)
61
Language Basics
• JavaScript is case sensitive– onClick, ONCLICK, … are HTML, thus not case-sensitive
• Statements terminated by returns or semi-colons – x = x+1; same as x = x+1
• “Blocks” of statements enclosed in { …}• Variables
– Define using the var statement– Define implicitly by its first use, which must be an
Web Engineering
Define implicitly by its first use, which must be an assignment
• Implicit defn has global scope, even if occurs in nested scope!
JavaScript Primitive Datatypes
• Boolean: true and false• Number: 64-bit floating pointg p
– Similar to Java double and Double – No integer type – Special values NaN (not a number) and Infinity
• String: sequence of zero or more Unicode chars– No separate character type (just strings of length 1)– Literal strings using ' or " characters (must match)
Web Engineering
g g ( )
• Special objects: null and undefined
62
Objects
• An object is a collection of named properties• Think of it as an associative array or hash tabley
– Set of name:value pairs• objBob = {name: “Bob", grade: 'A', level: 3};
– Play a role similar to lists in Lisp / Scheme
• New members can be added at any time• objBob.fullname = 'Robert';
• Can have methods
Web Engineering
• Can refer to this
Functions
• Functions are objects with method called “( )”– A property of an object may be a function (=method)
• function max(x,y) { if (x>y) return x; else return y;};• max.description = “return the maximum of two arguments”;
– Local declarations may appear in function body
• Call can supply any number of arguments– functionname.length : # of arguments in definition– functionname.arguments.length : # arguments in call
Basic types are passed by value objects by reference
Web Engineering
– Basic types are passed by value, objects by reference
• “Anonymous” functions – (function (x,y) {return x+y}) (2,3);
63
Examples of Functions
• Curried functions• function CurriedAdd(x) { return function(y){ return x+y} };
C i dAdd(2)• g = CurriedAdd(2);• g(3)
• Variable number of argumentsfunction sumAll() {
var total=0;for (var i=0; i< sumAll.arguments.length; i++)
total+=sumAll.arguments[i];return(total); }
Web Engineering
return(total); }sumAll(3,5,3,5,3,2,6)
Anonymous Functions
• Anonymous functions very useful for callbacks– setTimeout(function() { alert("done"); }, 10000)– Evaluation of alert("done") delayed until function call
• Simulate blocks by function definition and callvar u = { a:1, b:2 }var v = { a:3, b:4 }(function (x,y) {
var tempA = x.a; var tempB =x.b; // local variables
Web Engineering
x.a=y.a; x.b=y.b; y.a=tempA; y.b-tempB
}) (u,v) // Works because objs are passed by ref
64
Basic Object Features
• Use a function to construct an object– function car(make model year) {function car(make, model, year) {
this.make = make; this.model = model; this.year = year; }
• Objects have prototypes, can be changed– var c = new car(“Ford”,”Taurus”,1988);– car.prototype.print = function () {
Web Engineeringslide 127
car.prototype.print function () {return this.year + “ “ + this.make + “ “ + this.model;}
– c.print();
JavaScript in Web Pages
• Embedded in HTML page as <script> element– JavaScript written directly inside <script> element
• <script> alert("Hello World!") </script>
– Linked file as src attribute of the <script> element• <script type="text/JavaScript" src=“functions.js"></script>
• Event handler attribute• <a href="http://www.yahoo.com " onmouseover="alert('hi');">
• Pseudo-URL referenced by a link• <a href=“JavaScript: alert(‘You clicked’);”>Click me</a>
Web Engineering
<a href JavaScript: alert( You clicked ); >Click me</a>
65
Language Features in This Class
• Stack memory management– Parameters, local variables in activation records
• Garbage collection• Closures
– Function together with environment (global variables)
• Exceptions• Object features
Dynamic lookup encapsulation subtyping inheritance
Web Engineering
– Dynamic lookup, encapsulation, subtyping, inheritance
• Concurrency
JavaScript eval
• Evaluate string as code– The eval function evaluates a string of JavaScript code, in
scope of the calling codevar code = "var a = 1";eval(code); // a is now '1‘var obj = new Object(); obj.eval(code); // obj.a is now 1
Web Engineering slide 130
66
Unusual Features of JavaScript
• Eval, run-time type checking functions• Support for pattern matching (reg. expressions)pp p g ( g p )• Can add methods to an object• Can delete methods of an object
– myobj.a = 5; myobj.b = 12; delete myobj.a;
• Iterate over methods of an object– for (variable in object) { statements }
Web Engineering
Example
Web Engineering 132
67
That’s almost all for day…
Web Engineering
WRAP-UP
133
Things to keep in mind(or summary)
• XHTML for content structure• CSS for presentationp• JavaScript for client side logic
Web Engineering 134
68
Bibliography
• Mandatory reading– XHTML Specification
• http://www.w3.org/TR/xhtml11/
– CSS Specification• http://www.w3.org/TR/CSS2/
– JavaScript reference• http://www.w3schools.com/jsref/default.asp
Web Engineering 135
Validation Tools
• XHTML– http://validator.w3.org/
• CSS– http://jigsaw.w3.org/css-validator/
• JavaScript Debugger (for Mozilla)– https://addons.mozilla.org/en-US/firefox/addon/216
Web Engineering 136
69
Next Lecture
# Date Title Lecturer
1 7th Oct Web Engineering Introduction and Overview F. M. Facca
2 14h Oct Collection Requirements for Web Applications F. M. Facca
3 21st Oct Web Application Modeling F M Facca3 21st Oct Web Application Modeling F. M. Facca
4 28th Oct Developing Applications with WebML F. M. Facca
5 4th Nov Web Application Architectures I F. M. Facca
6 11th Nov Web Application Architectures II F. M. Facca
7 18th Nov Testing and Usability on the Web F. M. Facca
8 25th Nov Mid Term Exam F. M. Facca
9 2nd Dec Web Technologies I F. M. Facca
10 9th Dec Web Technologies II F. M. Facca
Web Engineering 137
11 6th Jan Web Technologies III F. M. Facca
12 13th Jan Web 2.0 Mash-ups F. Daniel (UNITN)
13 20th Jan Web Application Development Process/Project Management for Web Applications
F. M. Facca
14 27th Jan Final Exam F. M. Facca
Questions?
Web Engineering 138