UI Technologies Online Training

INTRODUCTION

• UI Developer roles and Responsibilities
• UX Designer Roles
• Technologies needed
• Power of UI
• Current Market Requirements on UI
• Sample Webpages
• Crawling and Meta Tags

BASICS

• DOM
• Structure of HTML Page
• Mandatory tags in html page (html, head, body)
• What is CSS
• Different ways of applying css for elements, and priority chain of css
• Heading tags(H1…H6), Tags and attributes(Class, Id, style..etc)
• Inline and blocklevel elements

MORE TAGS IN HTML

• Including External Page Links In A Page Using Anchor Tags And Its Properties
• Working With Row And Column Data Using Table Tags
• Hiding And Unhiding Elements Using Display Property
• Img tag, p tag, ul and ol tags, li, nobr, hr, br etc Layouts, forms, buttons
• Input Fields (Textbox, Radiobutton, Checkbox, Dropdown, Textarea Etc)

MORE CSS PROPERTIES

• Adding borders, font, pseudo classes, Positioning elements (absolute, relative, fixed and static)
• Image spriting
• Boxmodel (margins, padding)
• Floating elements (float left, right etc.)
• Including External Resources
• Absolute And Relative Paths
• Including External Resources Like Css, Images Etc

FORM ELEMENTS

• Get & Post
• Validating input values in a form
• Form Action and Type

JAVASCRIPT

• Introduction
• Data types and data structures in JS
• Control structures, if, ifelse, while, for, switch case statements
• Dynamic creation and maniplation of dom elements using JS
• Adding dynamic event listerners to dom elements
• Event capturing and event bubbling
• Validations using key char codes

JAVASCRIPT SUPPORTED DATA STRUCTURES

• Arrays
• Predefined Methods In Arrays
• Strings And Predefined Methods
• Objects
• JSON

ADVANCED JAVASCRIPT

• Prototyping in JavaScript
• Closures in JavaScript
• Inheritance in JavaScript
• Adding methods for an object

JQUERY FRAMEWORK

• Onload And Onready Diffrence
• Jquery Selectors
• Multiple Ways Of Refering Dom Elements Using
• Jquery Selectors
• Jquery Methods
• Adding Dynamic Properties For Dom Elements
• Toggleing Elements
• Creating Dynamic Elements Using Jquery

JQUERY TRAVERSING METHODS

• Finding Elements Using Jquery Techniques
• Filtering Elements

EVENTS USING JQUERY

• Binding Events
• Dynamic Binding
• List of events been supported in Jquery (blur, change, click, dbclick….etc)

AJAX

• Advantages with Ajax and its limitations
• Samples working with Ajax
• Different data formats used in Ajax (string, xml, Json, etc)
• Xml And Json Difference
• Crossdomain interactions using JSONP

JQUERY TINPLATING

• Loading DOM Dynamically Using Jquery Templates
• Loading Templates Using AJAX

HTML5

• Difference between HTML5 and HTML 4
• Media tags (audio and video tags)
• Graphics using Canvas tag
• Drag and Drop features
• Working on locations lat and lng using Geolocation
• Storing user Preferences using Local Storage
• List of Browsers support HTML5 Doctype

CSS 3

• Difference between CSS2 and CSS3
• Adding Borders and Backgrounds
• Advanced Text Effects(Shadow)
• 2D and 3D Transformations
• Adding Transitions To Elements
• Adding Animations To Text and Elements

RESPONSIVE DESIGNS

• Difference Between Multiple Devices, Making A Page To Work On Multiple Devices
• Media Queries
• Introduction to Bootstrap CSS API (2hrs)