Angular JS - UI Development Online Training
-
Upload
angular-js-online-trainer -
Category
Technology
-
view
376 -
download
5
Transcript of Angular JS - UI Development Online Training
![Page 1: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/1.jpg)
User Interface / User Experience Demo
![Page 2: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/2.jpg)
Agenda
1. What is UI?
2. Emerging UI Technologies
3. HTML vs. CSS
4. JavaScript
5. Bootstrap
6. Angular JS
7. Become an UI Developer
8. Roles & Responsibilities
9. UI Development Tools
10. Mobile Hybrid Applications
11. What is User Experience?
12. Web Designer
![Page 3: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/3.jpg)
About Me
Subrahmanyam Poluru ( UI / UX / Consultant / Trainer )
• 10+ Yrs experience
• Working as Full Stack Frontend Developer
• Responsible for UI development
• Corporate Trainer (Genpact, L&T InfoTech, iGATE, Crescent ITS, Possibillion)
• Currently working as Freelance Online Trainer for UI / UX developers.
• Placed more than 200+ UI developers around the globe
• Worked with major clients Deloitte, iGATE, ExxonMobil, LPL Financial, GE
Health Care, Royal Bank of Canada, Owens Corning and Calgary Scientific.
![Page 4: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/4.jpg)
Prerequisite• Any educational background
• IT
• Non IT
• Web Developers
• Web Designers
• Graphic Designers
• Any Programmers
![Page 5: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/5.jpg)
What is User Interface (UI)?
![Page 6: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/6.jpg)
User Interface (UI)
The way a person interacts with
a computer, tablet, mart phone
or other electronic device. The
user interface (UI) comprises
the screen menus and icons,
keyboard shortcuts, mouse and
gesture movements, command language and online help, as well as physical
buttons, dials and levers. The user interface can arguably include the total "user
experience," which may include the aesthetic appearance of the device,
response time, and the content that is presented to the user within the context
of the user interface.
![Page 7: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/7.jpg)
Emerging UI Technologies
![Page 8: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/8.jpg)
Some of UI Technologies
HTML5 CSS3 JAVASCRIPT JQUERY
BOOTSTRAP ANGULAR JS NODE JS MOBILE UI
![Page 9: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/9.jpg)
HTML vs. CSS
HTMLHypertext Markup Language, a
standardized system for tagging text
files to achieve font, color, graphic, and
hyperlink effects on World Wide Web
pages.CSS
Cascading Style Sheets (CSS) is a style
sheet language used for describing
the presentation of a document
written in a markup language.
![Page 10: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/10.jpg)
JavaScript
JavaScriptAn object-oriented computer programming language commonly used to create
interactive effects within web browsers.
Popular JavaScript Frameworks :
JQuery
JQuery UI
JQuery Mobile
React JS
Backbone JS
Kendo UI
Ext JS
Sencha Touch
Phonegap
Node JS
LESS
Bootstrap
![Page 11: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/11.jpg)
JavaScript
JavaScript Examples
![Page 12: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/12.jpg)
Bootstrap
Twitter Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile first projects on the web.
• Ease Of Use
• Highly Flexible
• Responsiveness
• Comprehensive List Of Components
• Leveraging JavaScript Libraries
Why Bootstrap?
![Page 13: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/13.jpg)
Bootstrap
Bootstrap Example
![Page 14: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/14.jpg)
Angular JS
Angular JS
Angular JS is a structural framework for dynamic web apps. It lets you
use HTML as your template language and lets you extend HTML's
syntax to express your application's components clearly and succinctly.
• MVC, MVVM
• Good for Single Page Applications
• Two binding
• Templating
• Easy to develop
Why Angular JS?
![Page 15: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/15.jpg)
Angular JS
Angular Example
![Page 16: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/16.jpg)
Mobile Hybrid Applications
Hybrid apps, like native apps, run on the device, and are written with web
technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native
container, and leverage the device’s browser engine (but not the browser) to
render the HTML and process the JavaScript locally.
• Phonegap
• Ionic Framework
• Rhomobile
• Titanium
Popular Frameworks
![Page 17: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/17.jpg)
Hybrid Application
Some of Mobile UI Frameworks
![Page 18: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/18.jpg)
JQuery Mobile Demo
DEMO
![Page 19: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/19.jpg)
Want to Become UI Developer?
![Page 20: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/20.jpg)
Become UI Developer
• HTML 4/5
• CSS 2/3
• JavaScript / OOJS
• JQuery
• JQuery UI
• JQuery Mobile
• Bootstrap
• SASS / LESS
• Angular JS
• AJAX / JSON
• Node JS
• Grunt, Bower, Yeoman, Jasmine
![Page 21: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/21.jpg)
Tools for UI
• Basic Note Pad
• Note Pad++
• Edit++
• Sublime
• Eclipse
• Netbeans
• Visual Studio
• Dreamweaver
![Page 22: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/22.jpg)
Roles & Responsibilities
• Should closely work with backend developers like ASP, PHP, Java, and Ruby
• Convert Visual Designs to HTML web or mobile or responsive
• Creating Prototypes for demonstrating applications
• Should be hand coded JS, HTML, CSS experience
• Familiar with DIV based layouts
• Should be hands on experience in Mobile UI frameworks.
• Responsible for getting into UI RESTful services data
![Page 23: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/23.jpg)
User Experience (UX)
![Page 24: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/24.jpg)
User Experience
User Experience Design (UXD or UED or XD) is the process of enhancing user
satisfaction by improving the usability, accessibility, and pleasure provided in the
interaction between the user and the product.
• Adobe Photoshop
• Wireframes / Prototypes
• Axure
• Iconography
• User Research
![Page 25: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/25.jpg)
User Experience
UX Concepts
User Research User Interviewing Gathering Statics Personas Information Architecture Creating Wireframes Prototyping Usability
User Interface Visual Design Interaction Design Content Strategy Accessibility Work Closely with developers Communication with stack
holders
![Page 26: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/26.jpg)
Web Designer
![Page 27: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/27.jpg)
Web Designer
Design is the process of collecting ideas, and aesthetically arranging and
implementing them, guided by certain principles for a specific purpose. Web
design is a similar process of creation, with the intention of presenting the
content on electronic web pages, which the end-users can access through the
internet with the help of a web browser.
• Adobe Photoshop
• Wireframes / Prototypes
• HTML
• CSS
• JavaScript
• JQuery
![Page 28: Angular JS - UI Development Online Training](https://reader031.fdocuments.us/reader031/viewer/2022022414/58729f101a28ab07208b5597/html5/thumbnails/28.jpg)
Thank [email protected] | www.onlinetraininghome.com