C777 Web Development Applications
To use functions effectively (4)
- Define (or declare) functions. - Pass arguments to them. - Call them. - Return function results
function definition make up (4)
- The function keyword - The name of the function (which may be defined by the user) - A list of arguments to the function, enclosed in parentheses ( ) and separated by commas - The JavaScript statements that define the function, enclosed in curly braces { }
Commenting in CSS / Commenting out CSS
/* and */
CSS new capabilities (4)
2D and 3D transformations Transitions /Animations Alpha transparency Overlays
function
A named set of statements that performs a task or calculates a value.
Document Flow
In CSS, the arrangement of content elements on a page and how the space is used.
Literals (3)
Literal TypeExample Integer literal: 56 Floating-point literal:23.45 String literal: "Howdy!
Techniques for easy mobile navigation
Placement of navigation elements Text-based hyperlinks Access to the full version of the site Limited links
Techniques to make mobile content easy to read / use
Simplify the design Divide pages into smaller portions Require less text entry Avoid pop-ups
Cascading Style Sheets (CSS)
Style sheet language that provides the formatting and "look" of a Web page or document written in a markup language formatting instructions that can define the font, color and display of phrase elements used on a particular markup page
JScript
The Microsoft version of JavaScript.
AJAX
This technique for requesting and reusing data using the JavaScript XMLHttpRequest object with HTML pages and CSS is often called AJAX (Asynchronous JavaScript and XML). It is considered asynchronous because it enables the page to retrieve and update data in the background, without disturbing the page's display or behavior.
opacity
Used to specify transparency for an element. 0-1 scale. Lower the value the more transparent the element img{ opacity:0.6; }
VBscript
-Another Microsoft version of JavaScript -Mostly used in Microsoft proprietary programs: Excel. .Word
A function is called by (3)
-Another function. A script block. -An event, such as a mouse click, or a page loading or unloading.
Common JavaScript errors
-Incorrect capitalization -Inconsistent capitalization -Inconsistent spelling -Language and browser versions -Inconsistent or incomplete use of braces -Casting errors
object
-Self-contained programming component modeled after abstract or real "objects" that contains properties and methods needed to make a certain type of data useful. -encapsulate pre-designated attributes and behavior.
Universal markup code is important for several reasons (3)
-pages ensured to render in future versions of most browsers. - pages more scalable. This means that as you add more sophisticated content, make pages searchable or use the content in ways you have not yet imagined, you can still use markup you created without having to revise the code extensively. -pages will be more accessible to all users, including those with disabilities. You will be able to more easily make your pages compliant so that your site is available to the widest possible audience and does not present a liability to your organization.
H.264
-video codec supported by HTML5-compliant browsers does not require plug-in; -uses less battery and processing resources
operator precedence
1. parenthesis & brackets 2. Multiplication & division 3. Addition & subtraction 4. Remaining operators performed left to right
CSS benefits? (2)
1. Consistency: CSS easily gives an entire site a consistent look and feel. 2. Easy Change Management: ability to change look/feel of site by simply changing 1 part of a single line of code vs lots of line Ex: Can change H1 style once in CSS and applies to all H1s on site vs changing each H1 individually.
Ways to apply CSS to HTML (3)
1. Declare inline CSS style attribute in HTML element. <h1 style="font-family: arial, sans-serif;"> Introduction </h1> 2. Embed an internal style sheet in an HTML page. <head> <style type="text/css"> h1 {font-family: arial, sans-serif;color: #FFFFFF;font-size: 36px;} </style> </head> 3. Link an HTML page to an external style sheet. <head> <link rel="stylesheet" type="text/css" href="css/habitat.css"/> </head>
HTML 5 supported video formats (3)
1. MP4 (MPEG-4): 2. WebM 3. Ogg Should include all 3 formats to ensure all browsers/devices can access....if cant use MP4 as default
mobile web site
A Web site designed for viewing on mobile device browsers.
variable
A named space of memory that holds a value. The value can change depending on a condition or information passed to the program, or by reassignment of a new value.
dot notation
A reference technique used to access a property or method of an object.
fluid images
A responsive design technique that adapts an image's size to the device's screen size. img { max-width: 100%; }
JavaScript
A scripting language that adds dynamic interactivity to Web pages. Client and server side language.
class
A selector that specifies CSS styles for a group of elements. starts with a period. Ex: .right CSS classes are useful for floating images to the left or right of text in HTML5
id
A selector that specifies CSS styles for one unique element. starts with #. Ex: #red
Document Object Model (DOM)
A standard that specifies how objects in a Web document can be referred to and manipulated through scripting languages.
calling statement
A statement that transfers program execution to a subroutine, procedure or function. When the subroutine is complete, execution transfers back to the command following the call statement.
WebGL
API enables rendering of interactive 3D / 2D graphics in HTML canvas, w/o need for plug-ins in HTML5-compatible browsers. Early apps of WebGL include Google Maps. To use w/ canvas API: canvas.getContext("webgl") You can design WebGL scenes without programming knowledge by using content creation tools such as CopperCube, Blender or Autodesk Maya. You can then export the scenes you create to WebGL and place them in your page.
XMLHttpRequest
An API object used by scripting languages to send HTTP or HTTPS requests to a Web server; the server response is loaded back into the script. allows Web developers to update pages without reloading themA client device can request and receive data from a server after it has loaded a Web page. This data is exchanged with the server in the background while the user continues to interact with the site. syntax is used to create the XMLHttpRequest object: xmlhttp= new XMLHttpRequest();
mobile app
An application designed for a specific mobile operating system.
Z-axis
An axis used along with X and Y for specifying Cartesian coordinates in three dimensions, whereas only the X-axis and Y-axis are used for two-dimensional coordinates.
CSS versions
CSS1: governs basic structure of style sheets. CSS2: adds more capabilities to the CSS1: media type support (such as specific printers) / work w/ tables. CSS3: provides a modularized standard ---> if making changes to a style, only a particular module will need updating vs entire standard. Allow flexibility/timely upgrade of the CSS standard as whole. New functions are being added to CSS3 to enhance support of borders, backgrounds, colors, text effects, etc. **HTML5 uses CSS1, CSS2 and CSS3**
Popular HTML 5 APIs
Canvas Offline Application Cache Geolocation Drag-and-Drop
operand
Data that is to be operated upon or manipulated in some manner.
Responsive Design
Describes the ability to create pages that respond to user screen size and that work in multiple environments
CSS animations
Designed to replace basic animations that previously required plug-ins, such as Adobe Flash and Apple QuickTime. Also replace basic animations that previously required JavaScript.
Inheritance AKA Cascading
Examples: - Style sheet will override the default browser<body> font color, which is black. - Styles embedded internal style sheet in HTML ----> override styles in linked external style sheet. - Styles specified inline using the style attribute in individual HTML elements within an HTML page override ----> embedded and external CSS entries
pogo-sticking
Forms that require users to click the Submit button before validation occurs. This can be frustrating for users because they must submit and resubmit a form until it validates. This process is sometimes called pogo-sticking and may lead to users becoming impatient and abandoning your form.
drag and drop
Functionality that allows a user to grab an object on a computer screen and move it to a different location on the screen. two types: -Dragging files from the user's computer onto a Web page -Dragging items to different locations within the same page Finally, you must define a drop zone on the page. This is done by creating two events: dragover — called when you drag a page element drop — called when a page element is dropped after being dragged
jQuery
JavaScript library used to simplify JavaScript programming. intended to help developers perform common JavaScript tasks with less code: HTML/DOM manipulation, CSS manipulation, AJAX calls, HTML event methods, animations, utilities and effects syntax: HTML elements are selected and jQuery performs various actions on them using the following code: $(selector).action()
pass by value
Mode that describes when values are passed to a function, and the function's parameters receive a copy of its argument's value.
pass by reference
Mode that describes when values are passed to a function, and the function's parameters receive its argument's actual value. for objects
Responsive design vs. mobile design
Responsive design aims to make Web page elements adjust on-the-fly to accommodate any device, rather than simply making a smaller, simpler version of a standard site
HTML5 addition to make web forms easier for users
Semantic input types — New or expanded input fields that describe their content to developers as well as browsers (which you studied in the previous lesson). Selection options — New HTML5 elements, input types and validation features that make it easier for users to enter information into Web forms on smaller screens (which you studied in the previous lesson). Validation tools — Built-in processes that can check and guide user input into form fields before form submission.
HTML5 additions for easier form input for touchscreens/mobile
Semantic input types — New or expanded input fields that describe their content to developers as well as browsers. Selection options - New HTML5 elements, input types and validation features that make it easier for users to enter information into Web forms on smaller screens. Validation tools — Built-in processes that can check and guide user input into form fields before form submission
steps to debug JavaScript
Test the code. Identify the problem. Review the code manually line-by-line, as well as with a debugging tool. Locate the error and determine the error type. Determine the best way to fix the problem. Correct the code. Review the code again, watching for other errors introduced by the corrections. Test your code again ... and again. Repeat as needed.
input tag
The <input> element uses the type attribute to identify the input control for users. The value of the type attribute varies widely, depending on the type of input you need for specific information. <form> <input type="date" name="dob"> </form> Note: If the type attribute is omitted, then the browser will infer the default type of text. If the specified value of the type attribute is not supported, the browser will ignore the value and infer the default type of text. generally if type attribute not supported by browser it will default to type = text
variable naming rules
The first character of the variable must be a letter, the underscore ( _ ) character or the dollar sign ( $ ). No other initial characters are allowed. Subsequent characters can be letters, numbers and/or underscore characters. good: address1 _contact $allowance lastName bad: 1stName ?subname @location
<!DOCTYPE>
The first tag in an HTML document; it informs the interpreter (usually a browser) which version of HTML the Web page is written in.
<input> required attribute
Your Name: <input type="text" name="name" required>
Graceful degradation
a term used to describe the backward-compatibility of code Backward-compatibility is needed for older browsers to support newer HTML features.
drop zone
an area where dragged items can be dropped
Examples of built in math methods
isNaN() - used to determine whether an operand is a number parseInt() - converts a string to its integer equivalent parseFloat() - converts a string to its floating-point decimal equivalent
object based object oriented
object oriented: a collection of individual objects that perform different functions. object based: derives functionality from a collection of built-in objects
Inline validation
occurs when each form field is validated as the user completes it........before the Submit button is clicked.
Style Guide
set of standards for writing/design of docs... general /specific publication docs, organization or field. Style guide provides uniformity/formatting/consistency in style w/ in docs/multiple documents.
CSS3 Selectors
$ = Selects every element whose attribute ENDS w/ specified value ^ = BEGINS with specified value * = contains SUBSTRING of specified value
How File API works
The File API allows you to interact with files using three interface types: FileList — provides a directory list of file objects. You can list information such as the file name, MIME type and size. FileReader — provides read-only access to individual files, such as images. Blob — provides the ability to divide a file into byte ranges.
variable data types (5)
number: Any numeric value used for mathematical operations string: Any series of alphanumeric characters used for words or for numbered phrases that are not mathematically manipulated (e.g., "Hello, World!", "555-1212" or "KA12V2B334") Boolean: True or false values only Object: A reference to a JavaScript object null: Occurs when a variable has a value of "nothing" (e.g., if a user enters nothing in a text box then submits the form, the text box has null value) Note: Compare null value to empty value, in which a user types and enters only a space in the text box; the value of the text box is empty, but can be counted as a character. undefined: Occurs when a variable has no value assigned yet. Note: The undefined value is different from null, which is actually a value of nothing.
overlays
places an HTML element on top of another HTML element. use the Z-index property to specify the stack order of an element. This defines which element is placed in front of another by using positive or negative values. Study the example code:
2D/3D Transform Properties (6)
transform: Applies 2D/ 3D transformation to element.Include: rotating, moving, skewing, scaling transform-origin: Changes transformed element's position transform-style: Specifies whether child elements will retain parent element's position in 3D space perspectiveSpecifies perspective from which 3D child element is viewed by defining how far placed from view (in pixels) perspective-origin: Specifies bottom position of 3D element backface-visibility: Defines if element visible when rotated to face away from the viewer
transition properties
transition: Sets the four transition properties into single property transition-property: Specifies CSS property that transition will affect transition-duration: Sets amount of time a transition takes. Default=0 If no value specified no transition occurs Values in seconds (s) or milliseconds (ms) transition-timing-function: Speed of a transition. Default = "ease" (slow start) Parameters include :-linear-ease-ease-in-ease-out-ease-in-out transition-delay: When transition will begin. Default= 0. Values in seconds (s) or milliseconds (ms)
operator
A symbol character used in programming expressions to instruct the program how to store or manipulate (operate on) a value.
Browser vendor prefixes to ensure CSS3 renders properly
-webkit- (for Chrome, Safari and iOS) -o- (for Opera) -mozilla- (for Firefox) -ms- (for Internet Explorer)
HTML / CSS and legacy browsers
- Most webpage formatting uses CSS 1,2 -HTML5 not supported by IE8/earlier. -Solution for self: DL Chrome / Firefox -Solution for end user code: document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("nav"); header, nav, article, footer{display: block;} (Above code referred to as HTML Shiv sometimes ) OR Implement Remy Sharp's script into code. Enables HTML5 elements for legacy browsers. Used by Google / MIT : http://remysharp.com/2009/01/07/html5-enabling-script.
JavaScript Characteristics
- Object based (built in objects) - Recently object oriented - Event driven - Not attached to any OS/hardware platform but tied to specific user agent like browser - Allows for quick development - Relatively easy to learn
arguments
- go in function parenthesis separated by commas A value or expression containing data or code that is passed on to a function or procedure. AKA a parameter.
hyperlinks
- set of instructions embedded within a file that calls another location in the file or a separate file when the link is clicked -The global set of linked documents across the existing Internet framework grew into what is known as the World Wide Web
Scripting Language
-An interpreted programming language designed to simplify application development. -Scripting languages interpreted not compiled. enable computer users to write useful programs easily. Scripting languages include: JavaScript Perl PHP (PHP Hypertext Preprocessor) Tcl (Tool Command Language) ColdFusion VBScript REXX.
Most authoritative mark up valdiator?
-most authoritative is the W3C Markup Validation Service (http://validator.w3.org) -this validator reads <!DOCTYPE> declarationHTML page...validates according to HTML version specified DTD
Ways to apply CSS (3)
1. Applied inline to individual HTML elements on an HTML page. 2.Embedded in HTML page to affect all specified elements on that page. 3. Collected in an external file that is linked to multiple HTML pages.
HTML 5 supported audio formats (3)
1. MP3 2. WAV 3. Ogg
CSS terms / syntax (5)
1. Selector 2. Property 3. Value 4. Declaration 5. Rule EX: body {background-color: #ADD8E6;} Selector : body Property: background-color Value: #ADD8E6 Opening curly brace: { Closing curly brace: } Declaration: background-color: #ADD8E6; (must always end with semi colon) Rule: body {background-color: #ADD8E6;} (Selector + Property + Value = rule)
CSS3 Background properties (3)
1. background-origin: defines location to which background-position property should be relative. 3 values: border-box — sets background relative to border's upper-left corner padding-box — sets background relative to padding edge's upper-left corner content-box — sets background starting from content's upper-left corner 2. background-clip: determines whether background extends into border or not/ specifies panting area of background. 3 Values: border-box — extends background to outside edge of border (default setting). padding-box — extends background to padding area but not into border. content-box — clips background within the content box. 3. background-size: allows background images to be resized. Values: length: sets background img width/height. percentage: sets width / height. determines size of img in relation to parent element cover: Scales img to largest size possible... completely covers background area of parent container while maintaining aspect ratio of image contain: Scales background img to largest size possible that allows both width/height to fit w/in specified content area. Maintains aspect ratio but may not completely fill parent container
CSS3 border properties (3)
1. border-image: Allows you to create a border that uses an image instead of just a line. div {border-image: url("flowers.png") 80 round;} 2. border-radius: Creates rounded corners. div {border: 2px solid;border-radius: 30px;} 3. box-shadow: Adds a configurable shadow to a box. box-shadow: 5px 5px 0px 5px #888888; Values: Required h-shadow — horizontal shadow position, also referred as x-offset v-shadow — vertical shadow position, also referred as y-offset Optional blur — the distance of the shadow's blur (optional) spread — the shadow size (optional) color — the shadow color (optional) inset — creates an inward shadow instead of an outward shadow (optional)
HTML 5 Structural Elements
1. header: Top of page. General description of page 2. main: Main content of the document body. (Cannot be the child of the header, nav, article, aside or footer elements) 3. nav: Area for navigation links 4. section: Defines portions or areas of a document grouped together as necessary. Ex: Group of articles or images Any portion of the Web page document 5. article: Site content accompanying the main content. Ex: Company services, news articles, blogs, images, videos, tweets, social networking posts 6. aside: Defines content that is aside from or additional to the main article content. Ex: Site Advertisements, news feeds, highlighted resource links 7. footer: Bottom of page. Contains Site copyright, owner, contact information * These tags may not render versions prior to IE9*
Most useful CSS3 Text Effects (2)
1. text-shadow property: applies shadow to text....by defining horizontal shadow, vertical shadow, blur distance / shadow color. h1{text-shadow: 3px 3px 3px #888888;} 2. word-wrap property: forces word to break, or wrap, to next line when reaches end of specified visible area. If necessary, it splits a word in the middle and wraps it to the next line. p {word-wrap: break-word; *These properties can provide effects that previously required images*
HTML <audio> element
<audio controls="controls"> <source src="media/audio.mp3" type="audio/mpeg" /><source src="media/audio.wav" type="audio/wav" /><source src="media/audio.ogg" type="audio/ogg" />Your browser does not support the HTML5 audio element.</audio>
<button> element syntax/attributes
<button type="submit">Submit Form</button> button<button type="button"> Creates a clickable button submit<button type="submit"> Creates a Submit button that submits all user input in a form to a server for processing reset<button type="reset"> Creates a Reset button that changes all user input and settings in a form back to their original values Other HTML5 <button type="submit"> global attributes autofocus — applies focus on the <button> element when the page loads form — specifies the form(s) on the page in which the <button> element appears by binding the button to the form formaction — specifies where to send user input when the form is submitted (takes a URL value) formmethod — specifies the HTTP method (get or post) for sending form input to the formaction attribute's URL value formenctype — specifies how form input should be encoded when submitted to the server formnovalidate — Directs the form not to validate upon submission formtarget — Specifies a name or keyword that indicates where to display the response to the user after s/he has submitted the form
<datalist> element
<datalist>Specifies a list of pre-defined choices for an <input> element. Users see the pre-defined choices in a drop-down list that narrows according to any user input. This field also features the autocomplete function for user input. input list attribute value and datalist id have to match for this to work. <input list="continents" name="continent"> <datalist id="continents"><option value="North America"><option value="South America"><option value="Europe"><option value="Asia"><option value="Africa"><option value="Australia"><option value="Antarctica"> </datalist>
New form elements with HTML5
<datalist>Specifies a list of pre-defined choices for an <input> element. Users see the pre-defined choices in a drop-down list that narrows according to any user input. This field also features the autocomplete function for user input. input list attribute value and datalist id have to match for this to work. <input list="continents" name="continent"> <datalist id="continents"><option value="North America"><option value="South America"><option value="Europe"><option value="Asia"><option value="Africa"><option value="Australia"><option value="Antarctica"> </datalist> <keygen>The HTML5 <keygen> element is used to generate a key pair to add security in an HTML form. These keys enable asymmetric (or public-key) cryptography to encrypt communications between the user and your server. <form> User Name: <input type="text" name="username"> Encryption: <keygen name="encryption"> <input type="submit"> </form> <output>Displays the result when a calculation is performed
HTML <video> element
<video width="360" height="270" controls="controls" poster="image.png"> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <source src="video.ogg" type="video/ogg" /> Your browser does not support the HTML5 video element. </video> know what all bolded attributes mean.
@keyframe rules / Animation properties
@keyframesDefine animation animation: Shorthand property for all animation properties, except animation-play-state animation-name: Specifies identifier for @keyframes animation that binds it to a selector animation-duration: Specifies length animation will take to complete one cycle Default is 0If no value is specified, then no transition occursValues can be specified in either seconds (s) or milliseconds (ms) animation-timing-function:Specifies how an animation progresses over one cycle Default is "ease" (slow start)Parameters include:-linear-ease-ease-in-ease-out-ease-in-out animation-delay: Specifies when the animation will begin Default is 0Values can be specified in either seconds (s) or milliseconds (ms) animation-iteration-count:Specifies the number of times that the animation will playDefault is 1 animation-direction:Specifies whether to play animation in reverse on alternate cycles. Iteration count of at least 2 required Default is "normal"Parameters include:-normal-reverse-alternate-alternate-reverse animation-play-state: Specifies whether the animation is running or pausedDefault is "running
media query
A CSS3 technique for checking a client device, or media type, then limiting the scope of the page design to a specific range in order to target styles based on the device's properties, such as screen size. Essentially, media queries allow Web designers to target styles based on device properties, such as screen width. use boolean operations to apply styling. Ex: below styling is applied if condition is true: media="screen and (min-width: 320px) and (max-width: 768px)" <link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)" > <link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px)" >
responsive web design (RWD)
A Web design approach to create sites that adapt to many different devices adjusts itself gracefully to fit on desktop, tablet and smartphone browsers by using:Grid-based layouts.Resizable images.Media queries.
Canvas API
An HTML5 API used for rendering visual images on the fly by providing scripts with a bitmap canvas. Only supports rectangle natively. Other shapes have to be created "provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly." By itself, Canvas is a simple pixel-based drawing API that produces a bitmap image. <canvas> The canvas element is not supported by your browser. (for older browsers that do not support canvas ) </canvas> two attributes: width, height The <canvas> element uses a DOM method called getContext(). The getContext() method returns a context object, which provides properties and methods (i.e., information about lines, colors, fonts, etc.) that can be used to draw and manipulate images on the canvas. You call a <canvas> element's drawing context by passing the string "2d" to the getContext() method: canvas.getContext("2d")
Examples from Google's style guide on HTML/CSS
Be consistent — When editing existing code, for example, match the written code style (spacing, comment use, etc.). If code that you add to a file looks drastically different from the existing code around it, other users of the code can become distracted or even confused. The purpose of style guidelines is to provide a common vocabulary for coding. Global style rules are helpful in general, but local style (dictated by your organization) is also important. Capitalization — Use only lowercase letters for your code, including HTML element names, attributes, attribute values, CSS selectors, properties and property values. Declaration order — In a style sheet, alphabetize your declarations to create consistent code that is easy to remember, search and maintain. For example:
CSS page layout general guidelines
Be succinct — Limit words to clear, necessary verbiage, especially on the home page. Most users simply scan pages quickly looking for specific information or links to it. Let users navigate to additional pages if they want more information. Make sure that each page focuses on one topic — No tangent message, regardless of its importance, should be added to a page. Use links to point users to appropriate related topics on separate pages. Include navigation aids — A common way to enable navigation is to place links at the top and bottom of the page, and within the body of the page, to reduce the need for users to scroll. Place comments in each section of code — Comments help explain changes you have made to the code or page. You can indicate the nature of the change, including the date you made the change and your name or initials, or you can explain the nature of the markup. For example, the syb.html page has three headings (h1, h2 and h3). You could comment each of these sections of the narrative
Browsers and CSS3
Browsers generally need to be HTML5 compliant in order to render CSS.
@font-face
CSS3 rule that defines any font desired by a Web designer; the font library is hosted on the Web server. Allow custom fonts This at-rule requires the developer to name the font and provide a server location from which it can be obtained. @font-face { font-family: oregonfont; src: url("../media/oregon_book.ttf"); font-weight:bold; ---will use bold version of this font family now } div {font-family: oregonfont;} *The font-family and src property are required for @font-face to work....on test*
<input> pattern attributes
Can specify format patterns using regular expressions for the values. Regular expressions are patterns used to match strings of characters in computer languages. Ex: Country code <input type="text" pattern="[A-Za-z]{3}"> Date (dd/mm/yyyy) <input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}"> E-mail address <input type="email" pattern="^.+@.+$"> Latitude / longitude <input type="text" pattern="-?\d{1,3}\.\d+"> Price <input type="text" pattern="\d+(\.\d{2})?"> URL <input type="url" pattern="https?://.+">
XHTML
Extensible Hypertext Markup Language version of HTML that incorporates the strict syntax rules of Extensible Markup Language (XML) with the existing set of HTML 4.01 tags to create Web documents. Like HTML 4.01, XHTML has three flavors: Transitional, Strict and Frameset.
Page Layout Methods (2)
Fixed-width layout — achieved by assigning specific pixel widths to elements using the HTML5 structural elements or the <div> tag. This layout ensures that the text, images and layout will not vary from browser to browser. The problem with using a fixed-width layout is that the elements may not render as expected when users change the size of their browser windows. Liquid layout — also known as relative width or fluid layout. Achieved by assigning percentage values to elements. With this layout, the size of an element is flexible and will change dynamically depending on the size of the browser window. For example, you can specify in the CSS width property that Element A will occupy 35 percent of the screen and Element B will occupy the remaining 65 percent. If the user resizes the browser window, the elements will resize correspondingly.Whether you design a fixed-width or liquid layout depends on your goal. If you design for mobile devices, consider liquid layout. If you design for desktop computers, consider fixed-width layout.
Web Development Trifecta
HTML CSS JavaScript
Canvas API
HTML 5 API developers can display graphics, animation, video and games "on the fly" (dynamically) without the need for a plug-in using bitmap canvas.
HTML 5
HTML5 provides modern design techniques for the Internet while requiring fewer plug-ins. For example, HTML5: Standardizes video/audio are presented on a Web page. Introduces the <video> element, which is designed to eliminate the need to install third-party plug-ins (such as those for Adobe Flash or Microsoft Silverlight). Adds the <audio> element, which allows pages to seamlessly add audio files for events such as podcasts. Establishes ways to enable drag-and-drop capability for Web pages without using third-party add-ons. Gives developers more native tools to use on a page, such as download progress indicators, image captioning options and form validation. Provides developers with a native option for offline storage, and enables applications to run as expected even without network connectivity. Allows developers to retrieve the geographical location information for a Web site visitor. This technology is called geolocation. Examples include using the global positioning system (GPS) of a mobile device to determine the device's location, which allows Web services to be provided based on the client's locatio
casting
In JavaScript, a technique for variable control in which a variable's value is changed from one data type to another.
types of errors
Load-time errors — Commonly called compiler or interpreter errors, these are typically syntax errors. Load-time errors usually cause error alerts. Run-time errors — After the script has loaded and is running, an error occurs. These are typically caused by improper use of commands. Run-time errors usually cause error alerts as well. Logic errors — These are mathematical errors, casting errors, errors in proper command usage or errors in the structure of the script, which result in the script running improperly. Logic errors do not cause error alerts. The script may return unexpected results or may fail to execute at all.
Hyper Text Mark Up Language (HTML5)
Markup language. Defines page structure, hyperlinks, graphics, etc... to enable pages to render in Web browsers / devices
Some functions of HTML 5 APIs
Media (audio and video). Document editing. Cross-document messaging. MIME type and protocol handler registration. Web storage.
Expression
Part of a statement this is evaluated as a value; it can use any combination of variables, operators, and other expressions. The exception to this is an assignment expression, which assigns a value to a variable
Javascript object's attributes & behaviors
Properties — various attributes of an object, such as height, color, font size, sentence length and so forth. Values — value of properties. Ex: statement color="red" assigns a value to a property. Methods — the actions that an object can be made to perform, such as a calculation, an onscreen move or the writing of text into a window. Methods often describe the actions that an object performs with its properties.
Various types of online form fields
Radio buttons — round buttons in a group of mutually exclusive pre-determined choices Check boxes — square buttons in a group of pre-determined choices from which the user can select more than one choice Drop-down select list — rectangular field that can expand upon user interaction and allow users to select one or more pre-determined choices Text box — rectangle field into which users can type alphanumeric characters of their choice Submit and Reset buttons— buttons typically found at the bottom of forms used for either submitting the form or clearing all user input from the form
JavaScript
Scripting language that provides dynamic, interactive capabilities to Web pages
Key CSS3 modules (5)
Selectors Box Model Backgrounds and Borders Text Effects /Fonts User Interface
<keygen> element attributes/values
The HTML5 <keygen> element is used to generate a key pair to add security in an HTML form. These keys enable asymmetric (or public-key) cryptography to encrypt communications between the user and your server. autofocus: autofocus Applies focus on the <keygen> element when the page loads challenge: challenge Challenges the value of the <keygen> element when submitted disabled: disabled Disables the <keygen> element form:form_id Specifies the form(s) on the page in which the <keygen> element appears keytype: rsadsaec Specifies the security algorithm used for the keys (RSA, DSA or EC)The default algorithm is RSAUsers may be asked to choose key size or strength for any of these algorithms name:text Specifies a name for the <keygen> element that can be used to reference it
Offline Storage
The ability for Web browsers and online services to download and access content and services without being connected to the Internet.
3d Tranformations
format your elements in CSS3 using three-dimensional effects. Commonly used 3D transform methods are rotateX() and rotateY(),
HTML 4.01 Flavors
Transitional Strict Frameset
2D Transformations
format your elements using a flat, two-dimensional effect. Commonly used 2D transform methods are: rotate() and scale()
<output> element attributes
When a Web page form performs a calculation for the user, the result (or output) of the calculation can be saved and reused with the HTML5 <output> element. Calculations are usually performed by a script. for element_id Specifies the IDs of the elements whose values were used in the calculation form form_id Specifies the form(s) on the page in which the <output> element appears nameUser-specified text Specifies a name for the <output> element that can be used to reference it
List of different types of events
abort: the loading of an image is terminated blur: user clicks the mouse button outside of a particular field click: user selects a link or form element change: user modifies the value of a form field error: error takes place while a page or image is loading focus: user gives input to a form element load: page is opened in the browser mouseOver: moves the mouse pointer over a visible element on a page mouseOut: mouse pointer leaves a visible element on a page reset: form's Reset button is clicked select: user selects the text in a form field submit: form's Submit button is clicked unload: page is closed in the browser
Commonly used JavaScript methods (built in)
alert() — creates a pop-up box with the specified message string, which the user can dismiss by clicking a button in the box. prompt() — creates a pop-up box with the specified message string and requests user input into a text field in the box. confirm() — creates a pop-up box with the specified message string and requests user confirmation (yes or no) by clicking the OK or Cancel button in the box. document.write() — writes the specified message string in the page.
Offline AppCache API
allow the user to interact with Web sites or Web documents while the user is offline. stores data locally using the AppCache: (directory where apps can be stored and run without access to the original application.) This API uses a manifest (A list of the files that are needed for the Web application to work offline.)to tell the browser which files to store locally, which allows the user to continue working without the connection. Steps to use manifest file: <html manifest="date.appcache> have to point html file to manifest file. manifest file visual: CACHE MANIFEST (ALWAYS STARTS W/ THIS) #Comment: The CACHE MANIFEST line is required. #Comment: Blank lines and comments are ignored CACHE: index.html styles.css actions.js banner.jpg
History API
allows Web designers to control the browser history. Ex: have a Web page with a slideshow of a Top 10 list. Each item on the list is an image. The images change, but the Web page does not. If you used a language such as AJAX or JavaScript to create the slideshow and the user closes his or her Web browser or refreshes the page, then the slideshow starts from the beginning. The History API allows you to identify each image URL within the browser history so that users start where they left off in the Top 10 list. You can also configure the API so that when users click the Back button, they access a URL that you identified.
CSS Box Model
allows designers to configure the space around each HTML element. It represents each HTML element as a rectangular box. Without this box, HTML elements would overlap or lay against one another. CSS is used to configure the boxes. The Box Model is straightforward: Each element is surrounded by four rectangular boxes that can be configured to create space and a border: 1. content 2. margin 3. padding 4. border
Drag-and-drop API
allows user to move item from one place to another by dragging across screen and dropping it in a different area. The user can also drag an item off the Web page and drop it into an external application such as a word processor, a photo editor or another browser. steps: First, you must specify the HTML element(s) that you want to become draggable. Next, you must add an event listener for the dragstart event on any of the HTML draggable elements. Lastly, you must add an event listener for the dragover and drop events on any elements that will accept a dragged item. To begin, you define an element as able to be dragged by setting itsdraggableattribute to the value"true", as shown in the following code example in bold: <img id="drag1" src="logo\CIWLogo.png" draggable="true" ondragstart="drag(event)" width="336" height="69" />
<legend>
allows you to add a caption for a group of items created by the <fieldset> element <form> <fieldset> <legend>Personal Information</legend> First Name: <input type="text"><br>Last Name: <input type="text"> <br> E-mail: <input type="email"><br>Date of birth: <input type="date"></fieldset></form>
How history API works
allows you to add, change and delete URLs and titles in the browser history field. methods to do this: history.back()Sends the browser back one page in the history history.forward()Sends the browser forward one page in the history history.go(number)Sends the browser forward (positive number) or backward (negative number) the specified number of pages in the historyThe current page is history.go(0) history.pushState(state object, title, url)Changes the URL in the browser window by adding a URL to the history stackNew method in HTML5 history.replaceState(state object, title, url)Replaces the current URL in the history with a new one, instead of adding another URL to the history stackNew method in HTML5 There are also three objects you can use to help configure the History API (see Table 7-5). History API ObjectDescription history.lengthReturns the number of URLs in the history for this browser window history.stateReturns the state object at the top of the history stack window.onpopstateAn event handler that is called when the history changes for a document in the browser window
2 new global attributes for <form> element
autocompleteEnables the form to suggest and automatically complete input as the user enters it, based on input that the user has previously entered novalidateDirects the browser not to validate form data upon submission
Geolocation API
an API that defines an advanced interface for location information associated only with the device hosting the application, such as latitude and longitude." determines location via : -The user's IP address. -The user's wireless network. -GPS hardware on the user's device. can be used to: -Determine a user's current position. -Monitor the user's location. -Update any changes to that location. 3 methods: getCurrentPosition() watchPosition() clearWatch()
global attribute
an attribute that can be used by various (and in some cases, all) HTML elements commonly used ones: autofocus Applies focus on the element when the page loads disabled Disables the element for Specifies the IDs of elements whose values were used form Specifies the form(s) on the page in which the element appears maxlength Specifies the maximum number of characters that can be entered in the field by the user name Specifies a name for the element that can be used to reference it placeholder Specifies a short description to provide the user with a hint about the expected input in the fieldThe placeholder value appears before the user enters any input, and it disappears when the user enters a character in the field required Requires the user to select or enter a value before the form can be submitted wrap Specifies whether text submitted in a form field is to be wrappedDefault is "soft" (not wrapped)Wrapped ("hard") text input will contain newlines (i.e., returns) when submitted
transform
an effect that changes an element's shape, size and/or position
user agent
any application, such as a Web browser or help engine, that renders HTML for display to users.
CSS3 User Interface Properties
appearance: Makes element look like standard UI element Ex: button or window box-sizing: Forces specified elements fit an area in certain way Parameters include:-content-box-border-box-inherit icon: Styles element w/ an iconic equivalent nav-down:Specifies where the cursor will navigate to when user presses the arrow-down key nav-index: Specifies the tabbing order for an element nav-left: Specifies where the cursor will navigate to when the user presses the arrow-left key nav-right: Specifies where the cursor will navigate to when the user presses the arrow-right key nav-up:Specifies where the cursor will navigate to when the user presses the arrow-up key outline-offset:Draws an outline beyond the border edge (i.e., offsets the outline) as specified resize: Specifies whether an element can be resized by the user and how it can be resized Values : both — The height and the width can be resized. horizontal — Only the width can be resized. vertical — Only the height can be resized. none — No resizing is allowed.
@keyframes
at-rule required to create CSS3 animations. Once you create the @keyframes rule, you can specify CSS styles inside it. Animation is created by gradually changing from one set of styles to another. Defines animation / position @keyframes logoanimation { 0% {left: 0px; top: 0px;} 50% {left: 200px; top: 0px;} 100% {left: 0px; top: 0px;} } Description of above code It will start at the 0% (or beginning of the animation) location, which is left: 0px; top: 0px. At 50% of the way through the animation's duration, the element will be at left: 200px; top: 0px. It will end at the 100% (end of animation) location of left: 0px; top: 0px.
New <input> HTML5 attributes
autocomplete Form completion Enables the <input> field to suggest and automatically complete input as the user enters it, based on input the user has previously entered autofocusForm completion Applies focus on the <input> field when the page loads formData submission Specifies the form(s) on the page in which the <input> element appears by binding the input field to the formValue is the <form> element's id attribute formactionData submission Specifies where to send user input when the form is submittedValue is a URLOverrides the <form> element's action attribute formenctypeData submission Specifies how form input should be encoded when submitted to the serverExample values:application/x-www-form-urlencodedmultipart/form-datatext/plainOverrides the <form> element's enctype attribute formmethodData submission Specifies the HTTP method for sending form input to the formaction attribute's URL valueValues are get or postOverrides the <form> element's method attribute formnovalidateData submission Directs the form not to validate upon submissionOverrides the <form> element's novalidate attribute formtargetData submission Specifies a name or keyword that indicates where to display the response to the user after s/he has submitted the formValues are:_blank_self_parent_top framenameOverrides the <form> element's target attribute listInline validation Refers to pre-defined options contained in a datalist minmaxForm completionInline validation Defines the minimum or maximum value for an <input> elementAccepts the date and number attributes maxlengthForm completionInline validation Defines the maximum length of input allowed in an <input> fieldAccepts number of characters as the value multipleForm completion Allows the user to enter more than one value in the <input> element patternForm completionInline validation Checks input into the field against a regular expression, which is a pattern of characters for use in pattern-matching and search-and-replace functions placeholderForm completion Provides a hint to the user of the input value expected in the <input> field requiredForm completionInline validation Requires input in the field before the form can be submitted
CSS3 Properties
background-clip: Specifies the painting area of the background and determines whether the background extends into the border or not background-origin: Positions the background-image relative to an element's border, padding or content background-size: Defines the size of background images and default value is auto border-image: Creates a border that uses an image instead of a line border-radius: Defines the shape or curve of a border around an element and used to create rounded corners in borders box-shadow: Applies shadows to edges of elements to create visual depth Opacity: Specifies transparency for an HTML element (e.g., structure tag, image) and accepts values from 0.0 to 1.0 Resize: Defines whether an element can be resized by the user and how it can be resized text-overflow: Cuts off, or clips, text that extends beyond its container text-shadow: Applies shadows to edges of text characters to create visual depth
Multiple background images
body { background-image: url("../media/html5_logo.jpg"), url("../media/globe.png"); background-repeat: repeat-y, no-repeat; }
CSS Syntax
body { font-family: arial, verdana, helvetica; color: #808080; font-size: 14px; } h1 { font-family: arial, sans-serif; color: #FFFFFF; font-size: 36px; } - Selector and opening curly brace on own line - Each declaration on own line separated by semi colon. - Closing curly brace on own line.
CSS to align images to text
bottom (Default value) middle top left right
Click-to-call: The tel protocol
call <a href="tel:18005551212"> Call Us Now!</a> text <a href="sms:18005551212"> Text
User input validation
ensures that user-entered data is properly formatted and complete Ex: Do the numeric fields contain numbers? Are the date formats valid? Are the e-mail addresses valid? Are all required fields completed?
HTML 4.01 Flavors
flavors ensured that you could use the specification and still remain backward-compatible with older Web browsers. Following is a short description of each flavor. HTML 4.01 Transitional — allowed developers to insert formatting using either CSS or traditional layout instructions. HTML 4.01 Strict — required the separation of presentation and content. Deprecated tags were disallowed and generated validation errors. HTML 4.01 Frameset — required for pages that used HTML frames, which placed Web pages inside each other to create separate panes in the browser window. *Specify favor via <!DOCTYPE> tag*
CSS transitions
gradually changes element from one style to another style. usually triggered when element is selected, hovered over by. When the user removes the cursor from the element, the element changes back to its original style. must identify the CSS property to add the transition, then define the duration of the effect. If you do not specify a duration, then no transition will occur.
CSS3 User Interfaces
interaction between a Web page/person using it. A UI generally accepts commands from the user and returns info, but not always. UI properties allow user to effectively control/operate the Web page.
local variable vs global variable
local: a variable declared within a function, whose value cannot be accessed from any function other than the one in which it was declared. global: a variable declared outside of any function, whose value can be accessed from any function or script block on the page. *a variable created w/o use of var in a function will be global after function is called*
File API
provides a standard way to interact with files on the client machine using a Web browser. It provides access to a local file system on a client for Web applications to use. The File API can: Retrieve and display the properties of a file in the browser. Save file references when users are offline. Create preview thumbnail images during image uploads. Restrict upload sizes. Check for errors by comparing MIME types and verifying they are the correct type for the upload The <input type="file"> element is the simplest way to reference a file.
HTML5 form input types
range: Allows the user to enter numbers using a slider control time: Allows the user to choose a time without a time zone date: Allows the user to choose a date without a time zone number: Allows the user to enter rational integers or float values email: Allows the user to enter an e-mail address month: Allows the user to choose a date with the month and year without a time zone tel: Allows the user to enter a phone number datetime: Allows the user to choose a date and time with a GMT time zone datetime-local: Allows the user to choose a date and time with a local time zone week: Allows the user to choose a date with the week and year without a time zone
interpreted languages vs compiled languages
scripting languages = interpreted programming languages = compiled
API (Application Program Interface)
source code specification that enables components of an application or program to work together to produce the desired functionality
CSS to position block level elements
static: The normal, or default, position of the element within a page relative: The element is relative to others on a page, usually because of the top, bottom, left and right properties fixed: The element remains in the same position when the page is scrolled inherent: The element inherits position from the parent element absolute: The element appears to float above the document and can be positioned as neededIt is completely removed from the rest of the page flow
<fieldset> element
used to group elements so that related fields are placed together in a form. It creates a box around the related fields, which helps to group and separate them on the screen. This is particularly helpful with long forms to compartmentalize the form parts and add whitespace, which makes the form easier to read. attributes: form — specifies the form(s) on the page in which the <fieldset> element appears name — specifies a name for the <fieldset> element that can be used to reference it disabled — disables a group of related form elements <form> <fieldset> <legend>Personal Information</legend> First Name: <input type="text"><br>Last Name: <input type="text"> <br> E-mail: <input type="email"><br>Date of birth: <input type="date"></fieldset></form>
return keyword
used to retrieve values from a function
