Web Development 1 Introduction to A4, Architecture, Core Technologies

A4 Project Description

2

CS 349 - Web Dev 1: Core Technologies

Disclaimers

3

CS 349 - Web Dev 1: Core Technologies

Web Architecture

4

CS 349 - Web Dev 1: Core Technologies

Web Service

Web Service

Web Service

Browser

Javascript Javascript Framework Other Stuff: •  Load balancing •  Security •  Etc.

Web Server

Static Pages

CSS Database

Programs

Core Technologies HTML CSS

6

CS 349 - Web Dev 1: Core Technologies

Minimal HTML5 Document …

7

CS 349 - Web Dev 1: Core Technologies

Good Tags to Know …

Headings (also h2…h6)

…

Paragraphs

…

“Anchor” to reference another document; a hyperlink.

… …

Lists. Use for unordered lists and for ordered lists.



Images

…… ……

A 2 x 2 table. Related tags include , , and to define headers, footers, and the body. renders cell titles.

…

Apply CSS to a section of the document

…

Apply CSS to a span of characters

br, hr, code, pre, dl/dt/dd 9

CS 349 - Web Dev 1: Core Technologies

CSS: Cascading Style Sheets   Specify

formatting in a separate file.

  Advantages: -  Minimize

network traffic (cache the css file) -  Consistency Consistency across pages and within pages Apply changes consistently Use someone else’s styles

10

CS 349 - Web Dev 1: Core Technologies

Element Tags

11

CS 349 - Web Dev 1: Core Technologies

Rule Structure Selector

Declaration block

Property

Value

p { padding-left: 20px; color: red; }

12

CS 349 - Web Dev 1: Core Technologies

What can be a selector? What

HTML

Universal

CSS * {…}

Type



p {…}

Descendent

……

ul em {…}

Child

…

p > em {…}

Pseudoselectors

……

td:first-child {…}

Class

…

div.floatLeft {…} or .big{…}

Id

…

#cicero {…}

13

CS 349 - Web Dev 1: Core Technologies

14

CS 349 - Web Dev 1: Core Technologies

What can be a selector? What

HTML

Universal

CSS * {…}

Type



p {…}

Descendent

……

ul em {…}

Child

…

p > em {…}

Pseudoselectors

……

td:first-child {…}

Class

…

div.floatLeft {…} or .big{…}

Id

…

#cicero {…}

15

CS 349 - Web Dev 1: Core Technologies

The Cascade   A single

html document may have many style sheets. There may be in-line styles. The browser has pre-defined styles. The user can define styles. For a given element, which one takes precedence?

  How

are missing values filled in?

  Find

all selectors that apply to the element

  Sort

by the composite key (explicit weight, specificity, order of declaration)

  Use

the first rule

  Propagate

16

inherited attributes

CS 349 - Web Dev 1: Core Technologies

The Cascade   Explicit

weight:

-  Example:

p { color: red; !important} -  When to use it? Almost never.   Specificity:

  Order

17

of declaration:

CS 349 - Web Dev 1: Core Technologies

Selector Type

Specificity

Universal selector

0, 0, 0, 0

Element identifier, pseudo-element ids

0, 0, 0, 1

Class identifier, pseudo-class ids

0, 0, 1, 0

ID identifier

0, 1, 0, 0

Inline style

1, 0, 0, 0

Pre-Built Stylesheets   E.g.

Twitter Bootstrap -- http://getbootstrap.com

-  Customize

your own -  Pre-built themes, eg bootswatch.com http://bootstrapthemes.quora.com/25-Awseome-Twitter-BootstrapThemes-For-Better-Bootstrap-Designs

18

CS 349 - Web Dev 1: Core Technologies

Tag Attributes   Typical

tags:

-  Lorem ipsum -    What

19

other attributes are useful?

CS 349 - Web Dev 1: Core Technologies

Core Attributes: Available for most tags Attribute

Meaning

id

Assigns a unique identifier to the element.

class

Assigns one or more classifications to the element.

style

Apply in-line CSS styles to the element.

title

Provide a title or advisory information about the element.

20

CS 349 - Web Dev 1: Core Technologies

Event Attributes: Available on most tags listed earlier Attribute

Meaning

onClick

Fired when the pointer’s button is clicked over an element.

onDblClick onKeyDown onKeyPress onKeyUp onMouseDown

Fired when the pointer’s button is pressed over an element.

onMouseMove

Fired when the pointer moves over an element.

onMouseOut

Fired when the pointer moves out of an element’s bounds

onMouseOver onMouseUp

21

Fired when the pointer’s button is released over an element.

CS 349 - Web Dev 1: Core Technologies

Focus Attributes: Available on input tags Attribute

Meaning

accessKey

Assigns an access key to the link and/or form field

onBlur

Fired when an element loses focus

onFocus

Fired when an element gains focus

tabIndex

Assigns a position to an element when tabbing through input elements.

22

CS 349 - Web Dev 1: Core Technologies

Per Element Attributes   Many

elements have tags that are unique.

  Example:



Attribute

Meaning

border=“num”

Width of border (in pixels) around the table

cellPadding=“num”

Space (in pixels) between cell border and contents

cellSpacing=“num”

Space (in pixels) between table cells

rules=“all|cols| rows|none|…”

Specifies which interior rules (lines) to display

summary=“text”

A summary of the table’s contents

width=“num” Width of the table. width=“percentage”

23

CS 349 - Web Dev 1: Core Technologies

Specifying Values   Colours: -  #RRGGBB

eg: #FFFF00 for yellow -  rgb(rr.rr%, gg.gg%, bb.bb%) -  black, yellow, silver, gray, maroon, purple, … and about 150 others   Numbers -  Percentage:

50% -  Absolute: .5in, 1cm, 10mm, 50pt, 50px -  Relative: 1.2em

24

CS 349 - Web Dev 1: Core Technologies

Block-level Layout top margin top border top padding width height

  Background

goes to the outer edge of the border.

  Margins

can have negative lengths.

  Padding

and borders default to 0 and none.

25

CS 349 - Web Dev 1: Core Technologies

Pro-Tip: Use your Browser’s Developer Tools

26

CS 349 - Web Dev 1: Core Technologies

Forms and Input Elements   This

style of form is used for sending information to a program running on a server. We won’t be doing this for A4.

First Name: Last Name: Add Student



27

CS 349 - Web Dev 1: Core Technologies

Input Elements   We’ll

be processing input data using Javascript. It will look more like this:

First Name: Last Name: Add Student

  More

28

on Javascript in the next lectures.

CS 349 - Web Dev 1: Core Technologies

Input Elements Element

Meaning



A button



A checkbox



Specify a file for uploading



Hidden information to be submitted with a form



Use an image instead of a button



Don’t show the actual text



Only one can be “on” of the group with the same name



Reset the form



Submit the form



Input one line of text

…

A drop-down list of options



A multi-line block of text



A label for an input element

29

CS 349 - Web Dev 1: Core Technologies

Coming…   Javascript -  Basic

language features -  Object-oriented model (it’s different!) -  Callbacks -  Using jQuery   Client-Side

Programming

-  Manipulating

the HTML document Adding/removing elements Changing CSS -  Model-View-Controller in Javascript -  Templating (mustache.js library) -  Web services & Json

30

CS 349 - Web Dev 1: Core Technologies