UI DESIGNING

Syllabus for HTML Training :

Introduction

• The World Wide Web (WWW) and history of HTML
• Hypertext and Hypertext Markup Language
• Why HTML
• Prerequisites
• Objective of this HTML course

HTML Documents

1. Dividing the document into 2 parts.

• Headers tags
• Body tags

2. Paragraphs
3. Formattings
4. Elements of an HTML Document

• Text Elements
• Tag Elements

5. Special Character elements
6. Image tags
7. HTML Table tags
8. Lists

• Numbered list
• Non-Numbered lists
• Definition lists

9. Anchor tag, Name tag etc.
10. Hyperlinks - FTP/HTTP/HTTPS
11. Links with images and buttons
12. Links to send email messages
13. Text fonts and styles
14. background colors/images
15. Marquee Behavior
16. Forms related tags (action, method,name,input,submitetc)

HTML Media Tags

1. Inserting audio files
2. Inserting video files
3. Screen control attributes
4. Media control attributes
5. HTML Object

HTML 5 :

1. Introduction of different Web Technology
2. HTML5 Introduction
3. HTML5 New Elements
4. HTML5 Video
5. HTML5 Video/DOM
6. HTML5 Audio
7. HTML5 Drag and Drop
8. HTML5 Canvas
9. HTML5 SVG
10. HTML5 Canvas vs. SVG
11. HTML5 Geolocation
12. HTML5 Web Storage
13. HTML5 App Cache
14. HTML5 Web Workers
15. HTML5 SSE
16. HTML5 Tags

CSS

• CSS Introduction
• CSS Syntax
• CSS Id & Class
• CSS Styling
• Styling Backgrounds
• Styling Text
• Styling Fonts
• Styling Links
• Styling Lists
• Styling Tables
• CSS Box Model
• CSS Box Model
• CSS Border
• CSS Outline
• CSS Margin
• CSS Padding
• CSS Advanced
• CSS Grouping/Nesting
• CSS Dimension
• CSS Display
• CSS Positioning
• CSS Floating
• CSS Align
• CSS Navigation Bar
• CSS Image Gallery
• CSS Image Opacity
• CSS Image Sprites
• CSS Media Types
• CSS hacking
• CSS Summary

JavaScript Course Content

• What is JavaScript

JavaScript and related technologies

• First Step
• Setup your environment
• Hello, World!
• Variables and statements
• Browser Developer's Tools
• User interaction: alert, prompt and confirm
• Operators and constructs
• Operators
• Comparison operators, if..else
• Loops and switch

Functions: declarations and expressions

Mastering data types

• String
• Number, Math
• Objects
• Array
• Conversion, to String and value Of

Four scents of "this"
Type detection
Function arguments
Static variables and methods
Scopes and Closures

• Initialization of functions and variables
• Closures

Document and EventsBrowser environment

DOM

• DOM Nodes
• Traversing the DOM
• Basic DOM Node properties
• Attributes and custom properties
• Modifying the document
• Using document.write
• Searching elements in DOM

View and position

• Styles and classes, get Computed Style

Events

• Introduction into browser events
• Obtaining the event object
• Bubbling and capturing
• The default browser action
• Event delegation
• Mouse events
• Focus/Blur: methods and events
• Keyboard events

Object Oriented Programming
Prototypal inheritance
Extending Natives
The "constructor" property
The "instance of" operator

OOP patterns

• General concepts
• Pseudo-classical pattern
• All-in-one constructor pattern
• Factory constructor pattern

Early and Late Binding
Exceptions
Timing
Date/Time functions
Understanding timers: set Timeout and set Interval

Regular expressions in JavaScript

• Introduction
• Character classes
• Special characters
• Flags
• Character sets and ranges
• Numeric Quantifiers
• Quantifiers +, and ?
• Greedy and Lazy
• Anchors and multiline mode
• Word boundary
• Groups
• Alternation
• Regular expressions methods

JQuery Course Content

Overview of jQuery

• What's jQuery and what's so good about it?
• Who is using it?
• Cross-browser compatibility
• jQuery UI and Plugins

Getting started with jQuery

• Downloading and including jQuery
• Google and Microsoft CDN
• Developer vs. Production versions (compressed vs uncompressed)
• jQuery name space and jQuery '$' alias
• Revisiting HTML DOM
• Debugging jQuery problems
• Accessibility concerns

Using jQuery

• Making sure that the page is ready
• Selections using CSS3
• Filters
• Multiple item selectors
• Best practices
• Decorating with CSS
• Changing styles
• Adding/removing classes
• Effects with jQuery (e.g. hiding, revealing, and toggling elements)
• Basic Animations
• Callback functions
• Event handlers
• Adding and removing HTML elements
• Modifying content

Advanced Animations

• Animating with CSS
• Color animation
• Easing
• Bouncy Content Panes
• Animation Queues
• Chaining Actions
• Animating Navigation
• jQuery User Interface (UI) Library

Handling User Scrolling

• The scroll event
• Floating navigation
• Scrolling the document
• Customizing scroll bars

Handling Resizing

• The resize event
• Layout switcher
• Re Sizable elements(text area, plane splitter)

Images and Slide shows

• Building our own light box
• Using Color Box plugin
• Cropping images with jCrop plug in
• Slide shows
• Faders (cross, roll over)
• Timers
• Using Cycle plugin
• Scrolling
• Thumbnails
• Customizing events that trigger scrolling

Menus

• Expandable and collapsible menus
• Open-closed indicators
• Expand on hover
• Hover intents
• Drop-down menus
• Accordion menus
• Simple
• Multi-level
• jQuery UI

Tabs

• Basic tabs
• jQuery UI tabs

Tab options and controls

Panels and Panes

• Slide-downs
• Sliding overlay

Tool tips

• Simple
• Advanced (using sprites)

Ajax with jQuery

• Overview of Ajax
• Loading content asynchronously
• Fetching JSON data
• jQuery's .ajax facilities
• Common settings
• GET and POST requests
• Ajax Events
• Consuming XML
• Sending HTML form data
• Loading external scripts dynamically
• Interactive Ajax
• Spinners and progress indicators
• Endless scrolling

Forms

• Simple form validation
• The submit event
• Validation plug in
• Form hints
• Check box checker
• In line editing
• Auto complete
• Star rating input
• Controls
• Date picker
• Date validation
• Sliders
• Drag and drop
• Sorting with jQuery UI's sortable
• Progress bar

What is AngularJS?

• Understanding the MVC Pattern
• Creating an Angular Model,View, Controller
• How AngularJS Works
• Life Cycle of AngularJS
• Architecture of AngularJS
• Basics of AngularJS ex:ng-app
• Data Binding,two way binding
• Scope
• $scope
• How Scope works
• $scope life cycle
• Directives and scope
• nested scope
• Filters
• Basics of Filters
• Custom FIlter
• Form validation using Filter
• Directives
• How to create directives
• Configure Directives
• Passing arguments in directives
• Built in Directives
• Directive Scope
• ngModel
• Routing
• Routing Modes
• Multiple Views Configuration
• $location service
• Layout Template
• Advanced Routing Techniques
• Dependence Injection
• Annotation
• Define Annotation Explicitly
• Define Annotation Inline
• ngMine
• $inject API
• Service
• Service Registration
• How to use Service in your app
• Different ways of Creating Service
• Security
• Black and White listing URLS
• $sce API and $sce Service,Configuration
• What is Context Type
• Events
• How to handle events
• Event Life Cycle
• Event Object
• Module
• Module Loading
• Properties
• Run Blocks
• Testing
• RequireJs
• Writing test cases
• Jasmine
• Debugging AngularJs
• Debugging from DOM
• Debugger
• Angular Batarang