SlideShare una empresa de Scribd logo
1 de 17
Descargar para leer sin conexión
UI / Navigation/ HTML / CSS / JS


                   By :

            Akhil Singh (525691)
             Ritu Jain (525700)
          Rishabh Anand (525701)
           Guneet Kaur (525713)
          Gaurav Paliwal (525705)
           Ratika Malik (525695)
User Interface
Types :          Properties :


1. GUI           1. Simple and Helpful
2. WUI           2. User Friendly
3. CUI           3. Consistency
4. VUI           4. WYSIWYG (Eg. Gmail
5. TUI           Compose Mail / TinyMCE)
                 5. See and Prompt
User Interface
Elements :      Actions :


1. TextBox      1. OnClick
2. Option Box   2. OnLoad
3. Check Box    3. OnSubmit
4. Drop Down    4. OnKeyPress
5. Combo Box    5. OnMouseOver (Hover)
6. List Box     6. OnFocus & LostFocus
Etc.            Etc.
Navigation
Its like having a road sign in IT world.


Properties :
1. Systematic display.
2. Easy traversal (back and forth).
3. Easy functionality invocation.
4. Faster acquaintance with the system.
5. Easy access.
HTML
1. Hyper Text Markup Language.
2. Concept by Tim Berners-Lee in 1990.
3. Tag Language.
4. Used in web designing.
5. Predefined tags.
6. Browser independent.
7. Supported by W3C.
CSS
1. Cascading Style Sheets.
2. Layout of web pages.
3. Improves presentation.
4. Reusable.
5. Easier Maintenance.
6. Inheritance.
7. Inline, Internal and External.
Javascript
1. Client-side processing.
2. Increase user engagement.
3. Patent free.
4. Used for Validation.
5. Make Web pages interactive.
6. Browser Independent
7. Event Driven
8. Case Sensitive
Hands On Javascript
1. NaN demo ( Not a Number Check ).
2. Whitespace check validation demo.
3. Date Validation.
Cool things with Javascript
1. Write less do more.
2. Extends Libraries.
3. **Sometime** used for server side scripting Ex. Node.js.
4. Jquery.
5. Jquery UI (User Interface Stuff).
6. Easy to use.
Cool Demos
1. Calender picker
2. Real Time table manipulation
Questions
Surprise !!
Thanks

Más contenido relacionado

Similar a User interface

Codemotion Rome 2014
Codemotion Rome 2014Codemotion Rome 2014
Codemotion Rome 2014Ugo Lattanzi
 
Implementation of gui framework part1
Implementation of gui framework part1Implementation of gui framework part1
Implementation of gui framework part1masahiroookubo
 
Testing iOS applications
Testing iOS applicationsTesting iOS applications
Testing iOS applicationsAnadea
 
Web Api 2.X - Lattanzi
Web Api 2.X - LattanziWeb Api 2.X - Lattanzi
Web Api 2.X - LattanziCodemotion
 
User first! 前端的最後一塊拼圖
User first! 前端的最後一塊拼圖User first! 前端的最後一塊拼圖
User first! 前端的最後一塊拼圖Maxis Kao
 
Patterns&Practices-Errai
Patterns&Practices-ErraiPatterns&Practices-Errai
Patterns&Practices-Erraihbraun
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayBojan Veljanovski
 
Frontend architecture design for large(r) team final
Frontend architecture design for large(r) team   finalFrontend architecture design for large(r) team   final
Frontend architecture design for large(r) team finalChadchapol Vittavutkarnvej
 
online exam system
online exam systemonline exam system
online exam systemStudentRocks
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointChad Schroeder
 
Academy PRO: React Native - introduction
Academy PRO: React Native - introductionAcademy PRO: React Native - introduction
Academy PRO: React Native - introductionBinary Studio
 
Complete JavaScript Guide Notes Examples
Complete JavaScript Guide Notes ExamplesComplete JavaScript Guide Notes Examples
Complete JavaScript Guide Notes ExamplesJavier Crisostomo
 
Going Live: Live@EDU AT UGA
Going Live: Live@EDU AT UGAGoing Live: Live@EDU AT UGA
Going Live: Live@EDU AT UGALewis Noles
 
Usability engineering Category specific guidelines(web structure)
Usability engineering Category specific guidelines(web structure)Usability engineering Category specific guidelines(web structure)
Usability engineering Category specific guidelines(web structure)REHMAT ULLAH
 
evolve-2022-zreating-reusable-sections-in-melody.pptx
evolve-2022-zreating-reusable-sections-in-melody.pptxevolve-2022-zreating-reusable-sections-in-melody.pptx
evolve-2022-zreating-reusable-sections-in-melody.pptxKurczakGdakowski
 
best java training center in chennai
best java training center in chennaibest java training center in chennai
best java training center in chennaisathis est
 

Similar a User interface (20)

Codemotion Rome 2014
Codemotion Rome 2014Codemotion Rome 2014
Codemotion Rome 2014
 
Overview of Liferay 7 Technology
Overview of Liferay 7 TechnologyOverview of Liferay 7 Technology
Overview of Liferay 7 Technology
 
Implementation of gui framework part1
Implementation of gui framework part1Implementation of gui framework part1
Implementation of gui framework part1
 
Testing iOS applications
Testing iOS applicationsTesting iOS applications
Testing iOS applications
 
Web Api 2.X - Lattanzi
Web Api 2.X - LattanziWeb Api 2.X - Lattanzi
Web Api 2.X - Lattanzi
 
User first! 前端的最後一塊拼圖
User first! 前端的最後一塊拼圖User first! 前端的最後一塊拼圖
User first! 前端的最後一塊拼圖
 
Patterns&Practices-Errai
Patterns&Practices-ErraiPatterns&Practices-Errai
Patterns&Practices-Errai
 
IT roadmap
IT roadmapIT roadmap
IT roadmap
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
 
Frontend architecture design for large(r) team final
Frontend architecture design for large(r) team   finalFrontend architecture design for large(r) team   final
Frontend architecture design for large(r) team final
 
online exam system
online exam systemonline exam system
online exam system
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
 
Shyam pcf
Shyam pcfShyam pcf
Shyam pcf
 
Java Swing
Java SwingJava Swing
Java Swing
 
Academy PRO: React Native - introduction
Academy PRO: React Native - introductionAcademy PRO: React Native - introduction
Academy PRO: React Native - introduction
 
Complete JavaScript Guide Notes Examples
Complete JavaScript Guide Notes ExamplesComplete JavaScript Guide Notes Examples
Complete JavaScript Guide Notes Examples
 
Going Live: Live@EDU AT UGA
Going Live: Live@EDU AT UGAGoing Live: Live@EDU AT UGA
Going Live: Live@EDU AT UGA
 
Usability engineering Category specific guidelines(web structure)
Usability engineering Category specific guidelines(web structure)Usability engineering Category specific guidelines(web structure)
Usability engineering Category specific guidelines(web structure)
 
evolve-2022-zreating-reusable-sections-in-melody.pptx
evolve-2022-zreating-reusable-sections-in-melody.pptxevolve-2022-zreating-reusable-sections-in-melody.pptx
evolve-2022-zreating-reusable-sections-in-melody.pptx
 
best java training center in chennai
best java training center in chennaibest java training center in chennai
best java training center in chennai
 

Más de Gaurav Paliwal

Más de Gaurav Paliwal (18)

Group Presentation on Bussiness Intelligence
Group Presentation on Bussiness IntelligenceGroup Presentation on Bussiness Intelligence
Group Presentation on Bussiness Intelligence
 
Mysql engines
Mysql enginesMysql engines
Mysql engines
 
IBM Developer SuperStar Competition
IBM Developer SuperStar CompetitionIBM Developer SuperStar Competition
IBM Developer SuperStar Competition
 
NoSQL and SQL Databases
NoSQL and SQL DatabasesNoSQL and SQL Databases
NoSQL and SQL Databases
 
foss for colleges
foss for collegesfoss for colleges
foss for colleges
 
Open Source ICT Education India
Open Source ICT Education IndiaOpen Source ICT Education India
Open Source ICT Education India
 
Egovernace
EgovernaceEgovernace
Egovernace
 
Debianvsubuntu
DebianvsubuntuDebianvsubuntu
Debianvsubuntu
 
Software testing tools
Software testing toolsSoftware testing tools
Software testing tools
 
Railway Presentation
Railway PresentationRailway Presentation
Railway Presentation
 
Linux_Fedora_ppt
Linux_Fedora_pptLinux_Fedora_ppt
Linux_Fedora_ppt
 
The Timer
The TimerThe Timer
The Timer
 
Timer Listings
Timer ListingsTimer Listings
Timer Listings
 
Fedora Linux
Fedora LinuxFedora Linux
Fedora Linux
 
X Server
X ServerX Server
X Server
 
Open Source for Institutes
Open Source for InstitutesOpen Source for Institutes
Open Source for Institutes
 
Slim Server Theory
Slim Server TheorySlim Server Theory
Slim Server Theory
 
Slim Server Practical
Slim Server PracticalSlim Server Practical
Slim Server Practical
 

Último

Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditSkynet Technologies
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 

Último (20)

Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
How Tech Giants Cut Corners to Harvest Data for A.I.
How Tech Giants Cut Corners to Harvest Data for A.I.How Tech Giants Cut Corners to Harvest Data for A.I.
How Tech Giants Cut Corners to Harvest Data for A.I.
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 

User interface

  • 1. UI / Navigation/ HTML / CSS / JS By : Akhil Singh (525691) Ritu Jain (525700) Rishabh Anand (525701) Guneet Kaur (525713) Gaurav Paliwal (525705) Ratika Malik (525695)
  • 2. User Interface Types : Properties : 1. GUI 1. Simple and Helpful 2. WUI 2. User Friendly 3. CUI 3. Consistency 4. VUI 4. WYSIWYG (Eg. Gmail 5. TUI Compose Mail / TinyMCE) 5. See and Prompt
  • 3. User Interface Elements : Actions : 1. TextBox 1. OnClick 2. Option Box 2. OnLoad 3. Check Box 3. OnSubmit 4. Drop Down 4. OnKeyPress 5. Combo Box 5. OnMouseOver (Hover) 6. List Box 6. OnFocus & LostFocus Etc. Etc.
  • 4. Navigation Its like having a road sign in IT world. Properties : 1. Systematic display. 2. Easy traversal (back and forth). 3. Easy functionality invocation. 4. Faster acquaintance with the system. 5. Easy access.
  • 5.
  • 6. HTML 1. Hyper Text Markup Language. 2. Concept by Tim Berners-Lee in 1990. 3. Tag Language. 4. Used in web designing. 5. Predefined tags. 6. Browser independent. 7. Supported by W3C.
  • 7.
  • 8.
  • 9. CSS 1. Cascading Style Sheets. 2. Layout of web pages. 3. Improves presentation. 4. Reusable. 5. Easier Maintenance. 6. Inheritance. 7. Inline, Internal and External.
  • 10.
  • 11. Javascript 1. Client-side processing. 2. Increase user engagement. 3. Patent free. 4. Used for Validation. 5. Make Web pages interactive. 6. Browser Independent 7. Event Driven 8. Case Sensitive
  • 12. Hands On Javascript 1. NaN demo ( Not a Number Check ). 2. Whitespace check validation demo. 3. Date Validation.
  • 13. Cool things with Javascript 1. Write less do more. 2. Extends Libraries. 3. **Sometime** used for server side scripting Ex. Node.js. 4. Jquery. 5. Jquery UI (User Interface Stuff). 6. Easy to use.
  • 14. Cool Demos 1. Calender picker 2. Real Time table manipulation