Web Application Development 2015

Course details

This instructor led course is an intensive, interactive workshop consisting of formal lecturing, discussions, exercises and presentations. There will be practical exercises for each of the subjects reflecting real-life problems.

Course Aims and Objectives

Upon completion of this course the delegates will have:

Gained working knowledge of the current key technologies used for web pages. Exploited the power of JavaScript and its supporting libraries such as jQuery

Audience

This course is designed for anyone who has an interest in web development and wishes to go beyond the basics. Experience of using the web is essential, and knowledge of programming is desirable.

Course Content

Introduction to HTML

• Browsers and servers
• Identifying pages – URLs
• HyperText Markup Language
• HTML, XML, XHTML and HTML5
• Standards

Getting Started

• HTML basics
• Paragraph formatting
• Comments
• Headings
• Styles
• Logical versus physical styles
• Nesting elements
• Deprecated tags
• Titles
• Attributes
• Using Colours
• RGB and hexadecimal
• Special characters in HTML

Hyperlinks and Images

• Lists
• Hypertext links – the anchor tag
• Relative and absolute URLs
• Hyperlink guidelines
• Opening a new window
• Linking within a document
• Hyperlink targets
• Using other protocols
• Images and formats
• Images, text and hyperlinks
• Image maps

Tables

• Using tables
• HTML table structure
• The table header and footer
• The table body
• Cell padding and spacing
• Cell sizing and formatting
• Tables and images

HTML5 Enhancements

• Syntax simplications
• Semantic markup
• New elements in HTML5
• Audio and video
• Accessibility
• Canvas and SVG
• Off-line applications

Forms and Scripts

• The form method
• Submit and reset buttons
• Input controls
• Labels
• Naming and identifying controls
• At the server
• Password controls
• Check boxes and radio buttons
• Text areas and selects

HTML5 Forms

• Placeholders and focus
• Auto completion
• New form controls
• Dates and times
• Validation and highlighting

Cascading Style Sheets

• Content and presentation
• Embedding a style sheet
• A basic style rule
• Multiple selectors
• Class selectors
• Using the class
• IDs and ID selectors
• Font styles
• Shorthands
• Text alignment and indentation
• Text transforms
• Media types and printing
• Using an external file
• Borders
• Using span
• p – the universal container
• Fluid or fixed layouts
• The CSS box model
• Margins and padding
• Floating elements
• Float and images
• Using CSS for layout
• Hyperlink pseudo classes
• List styles
• Backgrounds and repetitions

CSS3

• CSS modules and incremental enhancement
• Modernizer
• Borders, curves, gradients and backgrounds
• Responsive web sites
• Media queries
• Images everywhere
• New selectors
• Fonts and font kits
• Improvements to the box model
• Multi-column text
• Transitions, transforms and 3D
• Calculation, counters and generated content

JavaScript

• Scripting and HTML
• Scripting languages and the origins of JavaScript
• Recent enhancements to JavaScript

JavaScript Language Fundamentals

• Blocks and functions
• Variables and operators
• Control flow

Basic Scripting

• Forms, fields and field validation
• Event handling
• Writing to the document

Objects and Object Models

• How objects work
• Predefined objects
• Browser, window and document objects
• The ubiquitous getElementById method

Bringing Pages to Life

• How HTML and JavaScript fit together
• Cascading Style Sheets and names styles
• Absolute and relative positioning
• Compatibility considerations
• Changing styles and style rules dynamically
• Graphical and dynamic pages

AJAX

• AJAX – Asychnronous JavaScript and XML
• The XMLHttpRequest object
• The onReadyStateChanged function
• JSON – JavaScript Object Notation
• Examples

jQuery

• What jQuery is
• The jQuery function and its $ shorthand
• Selecting and modifying elements
• Event handling
• Animations
• Using jQuery for AJAX

Exploiting jQuery

• Including and debugging jQuery
• jQuery UI
• Introducing jQuery Mobile
• Drawing using HTML5 Canvas

Other Libraries

• Bootstrap for mobile-first and layout automation
• Knockout for MVVM
• Others