Web Development 1 A4 Project Description Web Architecture

Size: px

Start display at page:

Download "Web Development 1 A4 Project Description Web Architecture"

Cuthbert McCoy
8 years ago
Views:

1 Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3

2 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff: Load balancing Security Etc. Framework Web Server Static Pages Programs CSS Core Technologies HTML CSS 5 Almost Minimal HTML5 Document <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title> </title> <link href="css/some-stylesheet.css rel="stylesheet"/> <script src="scripts/some-script.js ></script> </head> <body>  </body> </html> 6

3 Good Tags to Know <h1> </h1> <p> </p> Headings (also h2 h6) Paragraphs <a href= > </a> Anchor to reference another document; a hyperlink. <ul><li> </li> <li> </li></ul> <img src= alt= height= px width= px /> <table> <tr><td> </td><td> </td> <tr><td> </td><td> </td> </table> <div> </div> <span> </span> Lists. Use <ul> for unordered lists and <ol> for ordered lists. Images A 2 x 2 table. Related tags include <thead>, <tbody>, and <tfoot> to define headers, footers, and the body. <th> 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 8 Tag Attributes! Typical tags: - <a href=" ipsum</a> - <img id="cicero" src="cicero.jpg" alt="cicero" />! What other attributes are useful? 9

4 Core Attributes: Available for most tags Attribute id class style title Meaning Assigns a unique identifier to the element. Assigns one or more classifications to the element. Apply in-line CSS styles to the element. Provide a title or advisory information about the element. 10 Event Attributes: Available on most tags listed earlier Attribute onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup Meaning Fired when the pointer s button is clicked over an element. Fired when the pointer s button is pressed over an element. Fired when the pointer moves over an element. Fired when the pointer moves out of an element s bounds Fired when the pointer s button is released over an element. Useful with Javascript more later. 11 Focus Attributes: Available on input tags Attribute accesskey onblur onfocus tabindex Meaning Assigns an access key to the link and/or form field Fired when an element loses focus Fired when an element gains focus Assigns a position to an element when tabbing through input elements. Useful with Javascript more later. 12

5 Per Element Attributes! Many elements have tags that are unique.! Example: <table> Attribute border= num cellpadding= num cellspacing= num rules= all cols rows none summary= text width= num width= percentage Meaning Width of border (in pixels) around the table Space (in pixels) between cell border and contents Space (in pixels) between table cells Specifies which interior rules (lines) to display A summary of the table s contents Width of the table. Most of these should be specified in CSS rather than in-line. 13 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. <form action= method= post > <label>first Name: <input type= text name= first /></label> <label>last Name: <input type= text name= last /></label> <input type= submit >Add Student</input> </form> 14 Input Elements! We ll be processing input data using Javascript. It will look more like this: <label>first Name: <input type= text name= first /></label> <label>last Name: <input type= text name= last /></label> <input type= submit onclick= myjavascriptfunction() > Add Student</input>! More on Javascript in the next lectures. 15

6 Input Elements Element <input type= button > <input type= checkbox > <input type= file > <input type= hidden > <input type= image > <input type= password > <input type= radio > <input type= reset > <input type= submit > <input type= text > <select><option> </o> <textarea> <label> 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 16 CSS: Cascading Style Sheets! Specify formatting in a separate file.! Advantages: - Consistency Consistency across pages and within pages Apply changes consistently Use someone else s styles - Minimize network traffic (cache the css file) 17 Element Tags <head> <meta charset="utf-8"/> <title> </title> <link href="css/some-stylesheet.css rel="stylesheet"/> <script src="scripts/some-script.js > </script> </head> 18

7 Rule Structure Selector Declaration block Property Value p { padding-left: 20px; color: red; } 19 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 20 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. 21

8 What can be a selector? What HTML CSS Universal * { } Type <p> p { } Descendent <ul> <li> <em> ul em { } Child <p> <em> p > em { } <tr><td> </td><td> td:first-child { } Class <div class= floatleft big > div.floatleft { } or.big{ } Id <img id= cicero > #cicero { } What can be a selector? What HTML CSS Universal * { } Type <p> p { } Descendent <ul> <li> <em> ul em { } Child <p> <em> p > em { } Pseudoselectors Pseudoselectors <tr><td> </td><td> td:first-child { } Class <div class= floatleft big > div.floatleft { } or.big{ } Id <img id= cicero > #cicero { } 24

9 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 inherited attributes 25 The Cascade! Explicit weight: - Example: p { color: red;!important} - When to use it? Almost never.! Specificity: Selector Type Specificity Inline style 1, 0, 0, 0 ID identifier 0, 1, 0, 0 Class identifier, pseudo-class ids 0, 0, 1, 0 Element identifier, pseudo-element ids 0, 0, 0, 1 Universal selector 0, 0, 0, 0! Order of declaration: 26 Pro-Tip: Use your Browser s Developer Tools 27

10 Pre-Built Stylesheets! E.g. Twitter Bootstrap Customize your own - Pre-built themes, eg bootswatch.com Themes-For-Better-Bootstrap-Designs - The A4 portal will have Bootstrap loaded 28 Coming! Javascript - Basic language features - Object-oriented model (it s different!) - Gotchas! Client-Side Programming - Manipulating the HTML document Adding/removing elements Changing CSS JQuery, Callbacks - Model-View-Controller in Javascript - Templating (mustache.js library) - Web services & Json 29

Website Planning Checklist

Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even