Rich Internet Application (RIA)

HTML5, CSS3, JavaScript, JQuery and Bootstrap

Branches:
Janakpuri | Nirman Vihar | South Extension

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
HTML5 Fundamentals
 Overview of HTML5
 Comparing HTML5 to XHTML
 Changes to Existing Tags
 Deprecated Elements and Attributes
 Browser Support
 Modernizr JavaScript Library
 ARIA

HTML5 Structural Elements

 New Semantic Elements
o <header>
o <footer>
o <section>
o <article>
o <nav>
o <aside>
o <hgroup>
o <figure> and <figcaption>
o <mark>
 Creating a Document Outline
HTML5 Web Forms
 New Form Attributes
o autocomplete
o novalidate
 New Input Attributes
o autofocus
o form
o min, max and step
o multiple
o pattern
 New Form Elements
o <datalist>
o <progress>
 New Input Elements
o email
o url
o tel
o search
 Form Validation

Audio and Video

 Browser Support for Audio/Video Formats
 Overview of Codecs
 <audio> and <video>Elements
 <source>Element
 Media Element API and Events

HTML5 JavaScript APIs

 Canvas API
 Web Storage API
 File Storage API
 Geolocation API
 Drag and Drop API
 Web Workers API
 Taking a Web Application "Offline"

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
HTML5 SVG HTML5-GRAPHICS (2D and 3D Effects)

 Introduction
 What is SVG?
 SVG Advantages
 Differences Between SVG and Canvas
 Comparison of Canvas and SVG
 Why SVG?
 SVG Shapes
 Rectangle
 Circle
 Ellipse
 Line
 Polyline
 Polygon
 Path

HTML5 Geolocation(Deeper Integration with OS)

 Introduction
 Locate the User’s Position
 Handling Errors and Rejections
 The getCurrentPosition()
 Geolocation object
 Reading users location

HTML5 – WebSockets (Stay connected)

 Introduction
 WebSocket Attributes
 WebSocket Events
 WebSocket Methods

HTML5 – Web SQL Database

 Introduction
 The Core Methods
 Opening Database
 Executing queries

Introduction to CSS3
 What's New in CSS3?
 Benefits of Using CSS3
 Browser Support
 Vendor Prefixes

CSS3 Selectors and Pseudo-Classes

 "Starts With" Selector
 "Ends With" Selector
 "Contains" Selector:nth-child(N)
 :nth-last-child(N)
 :nth-of-type(N)
 :nth-last-of-type(N)

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
  :root
 :target

CSS3 Properties
 Using Vendor-Specific Extensions to Ensure Cross-Browser Compatibility
 Using @font-face to Add Custom Fonts
 Changing the Opacity of Text and Images
 Creating Rounded Corners, Adding Shadows to Boxes, and Using Images as Borders
 Creating Multiple Columns for Laying Out Text
 Working with RGBA and HSL Color Models
 Creating Simple Animations Usingtransitions, transform, and animation

Introduction to Client-Side JavaScript

 Embedding JavaScript in an XHTML Document
 Evolution of the JavaScript Language
 JavaScript Versions and Browser Support

Statements and Operators

 Variable Declarations
 Assignment Operators and Statements
 Arithmetic Operators
 Logical Operators
 Comparison Operators
 String Operators
 Conditional Operators
 Operator Precedence

DOM/CSS Scripting
 Introduction to the Document Object Model (DOM)
 Using the getElementById method
 Modifying Page Content with the DOM
 Manipulating CSS using JavaScript
 Programmatic Access to CSS

Implementing Functions
 Defining Functions
 Invoking Functions
 Named and Anonymous Functions
 Passing Arguments
 Local vs. Global Variables
 Using the return Statement

Implementing Control Constructs

 Introduction to Conditional and Looping Constructs
 The if else Statements
 The do while Statements
 The for in Statements
 The switch Statement

JavaScript Objects
 The JavaScript Browser Object Model
 JavaScript Object Properties
 Object Methods
 The new Keyword
 The this Keyword
 Creating New Object Instances Using Constructor Functions
 String, Date and Array Objects

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
Fundamental JavaScript Directives
 Inline JavaScript
 Linking Web Pages to External JavaScript Files
 JavaScript Using <script> Tags and Attributes
 Deferred scripts
 <noscript> Tags

Implementing Arrays
 Using Arrays in JavaScript
 Predefined JavaScript Object Arrays
 Creating Arrays
 Reading and Writing to an Array
 Common Array Properties and Methods

Cookies
 Overview of JavaScript Cookies
 Session and Persistent Cookies
 Using Cookies on a Web Page
 Common Uses of JavaScript Cookies

Common Applications
 Form Validation and Testing
 Working with Regular Expressions
 User Interaction
 Local Form Processing
 Object Detection
 Creating New Windows
 Adding Content to a Window
 Browser Awareness Using the navigator Object
 Interactive Graphics

Event Handling
 The W3C and Internet Explorer Event Models
 The Event Object
 Registering JavaScript Events
 Inline Event Handlers
 Processing Keyboard and Mouse Events

jQuery Fundamentals
 Overview of jQuery
 Downloading and Using jQuery library
 Benefits of Using jQuery

jQuery Selectors and Filters

 Using jQuery Wrapper
 document.ready()
 Using jQuery Selectors and Filters
 Selecting Single and Multiple Elements
 Wrapped Sets
 Method Chaining

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
DOM Manipulation
 Review of Document Object Model
 Accessing Attributes of an Element
 Adding and Removing Elements
 Setting element Content With text()and html()
 Manipulating Classes and CSS

jQuery Events
 Review of Past Event Models
 jQuery Event Model
 Binding and Removing Event Handlers
 Event Object
 Common jQuery Events

Page Animation with Effects

 Controlling Visibility Using show() andhide()
 Creating Slide and Fade Effects
 Creating Custom Animations
 Animation Queuing and Callback Functions

Ajax Requests Using jQuery

 Ajax Overview
 Loading Remote HTML
 Utilizing Global Event Handlers
 Fetching Data with getJSON()
 Sending Form Data with Ajax

jQuery Form Enhancement

 Using Form Selectors and Filters
 Handling Keyboard and Focus Events
 Improving Behavior and Appearance
 Performing Form Validation
 Validation Plugin

Utility Functions
 Disabling Animations
 Using Other Libraries with jQuery
 String and Array Manipulation

jQuery Plugins
 Benefits of Plugins
 Integrating Popular Plugins
 Image Manipulation with Slideshows and Carousels
 Creating Custom Plugins

jQuery UI Overview
 Configuring and Downloading the UI Library
 Themes and Styles
 Using ThemeRoller
 Implementing Drag and Drop
 Using Sliders for Numeric Input
 List Simplification with autocomplete
 Using datepickers for Date Input

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
Bootstrap (Responsive we design framework)

 What is Twitter Bootstrap?

 History
 Why use Bootstrap?
 What Bootstrap Package Includes?

Download Bootstrap

 File structure
 PRECOMPILED BOOTSTRAP
 Basic Examples

Bootstrap Grid System

 What is a Grid?
 What is Bootstrap Grid System?
 MOBILE FIRST STRATEGY
 Working of Bootstrap Grid System
 Media Queries

Grid options

 Responsive column resets

 Offset columns
 Nesting columns
 Column ordering

Bootstrap CSS Overview

 HTML5 doctype
 Mobile First
 Responsive images
 Typography and links
 Normalize
 Containers

Bootstrap Typography

 Headings
 INLINE SUBHEADINGS
 Emphasis
 Abbreviations
 Addresses
 Blockquotes
 Lists

Bootstrap Tables

 Basic Table
 Optional Table Classes
 STRIPED TABLE
 BORDERED TABLE
 HOVER TABLE
 CONDENSED TABLE
 Contextual classes
 Responsive tables

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
Bootstrap Forms

 Form Layout
 VERTICAL OR BASIC FORM
 INLINE FORM
 HORIZONTAL FORM
 Supported Form Controls
 CHECKBOXES AND RADIOS
 SELECTS
 Form Control States
 Form Control Sizing
 Help Text

Bootstrap Buttons

 Button Size
 Button State
 DISABLED STATE
 Button Tags

Bootstrap Images

 .img-rounded
 .img-circle
 .img-thumbnail

Bootstrap Helper Classes

 Close icon
 Carets
 Quick floats
 Center content blocks
 Clearfix
 Showing and hiding content
 Screen reader content

Bootstrap Responsive utilities

 visible-xs
 visible-sm
 visible-md
 visible-lg

Bootstrap Glyphicons

Bootstrap Dropdowns

Bootstrap Button Groups

Bootstrap Button Dropdowns

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
Bootstrap Input Groups

 Basic Input Group

 Input Group Sizing
 Checkboxes and radio addons
 Button addons
 Buttons with dropdowns
 Segmented buttons

Bootstrap Navigation Elements

Bootstrap Navigation bar

 Default navbar
 Responsive navbar
 Forms in navbar
 Buttons in navbar
 Text in navbar
 Non-nav links
 Component alignment
 Fixed to top
 Fixed to bottom
 Static top
 Inverted navbar
 Bootstrap Breadcrumb

Bootstrap Pagination

 Pagination
 DEFAULT PAGINATION
 STATES
 SIZING
 Pager
 ALIGNED LINKS
 STATES
 Bootstrap Labels

Bootstrap Progress Bars

 Default Progress Bar

 Alternate Progress Bar
 Striped Progress Bar
 Animated Progress Bar
 Stacked Progress Bar

Bootstrap Media Object

 .media
 .media-list

Bootstrap List Group

 Adding Badges to List Group

 Linking List Group Items
 Add Custom Content to List Group

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
Bootstrap Panels

 Panel with heading

 Panel with footer
 Panel Contextual alternatives
 Panel with tables
 Panel with Listgroups

Notes:
 Recommend Practical hours for student except class hours is 90 Hrs.
 We also provide weekend classes for all courses.
 After completion of 75% of course, student will go through Live Project Training,
Interview Preparation and Recruitment process in Software Industry.

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
 Our Technology Specialization and Certification Courses:

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.
 KEY FEATURES OF XPERT INFOTECH:

Training by Certified and Experienced Trainers.

Industrial and Corporate Tie-ups for Live projects for student.

Well-equipped Computer Lab, Internet and Book Bank facility.

Live project based Summer Trainings, Summer Internships and summer

programs.

100% placement assistance on every course.

Interview Preparation and Technical Events.

On Campus Interviews in every month for the

placement of students.
WI-FI enabled classrooms.

Janakpuri Training Center

58-61 (Basement), Vashist Park, Pankha Road, New Delhi-46

Ph.: 011-65833100, 9999991236
www.xpert-infotech.com Email: janakpuri@xpert-infotech.com

Nirman Vihar Training Center

E-359 (LGF), Nirman Vihar Metro Stn. Gate No.:3, New Delhi-92
Ph.: 011-65655550, 9999087993
www.xpert-infotech.com Email: nirmanvihar@xpert-infotech.com

South Ex. Training Center

F6, South Ex., Part-1, Mc. Donald Lane, New Delhi-49

Ph.: 011-65655502, 9999667446
www.xpert-infotech.com Email: southex@xpert-infotech.com

Course Outline for UI Development (RIA)

XPERT INFOTECH is Training division of XPERIA Technologies Pvt. Ltd.