SlideShare a Scribd company logo
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

More Related Content

Similar to User interface

Codemotion Rome 2014
Codemotion Rome 2014Codemotion Rome 2014
Codemotion Rome 2014
Ugo Lattanzi
 
Overview of Liferay 7 Technology
Overview of Liferay 7 TechnologyOverview of Liferay 7 Technology
Overview of Liferay 7 Technology
Azilen Technologies Pvt. Ltd.
 
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 applications
Anadea
 
Web Api 2.X - Lattanzi
Web Api 2.X - LattanziWeb Api 2.X - Lattanzi
Web Api 2.X - Lattanzi
Codemotion
 
User first! 前端的最後一塊拼圖
User first! 前端的最後一塊拼圖User first! 前端的最後一塊拼圖
User first! 前端的最後一塊拼圖
Maxis Kao
 
Patterns&Practices-Errai
Patterns&Practices-ErraiPatterns&Practices-Errai
Patterns&Practices-Erraihbraun
 
IT roadmap
IT roadmapIT roadmap
IT roadmap
shahab zebari
 
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
Bojan 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 final
Chadchapol Vittavutkarnvej
 
online exam system
online exam systemonline exam system
online exam system
StudentRocks
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
Chad Schroeder
 
Shyam pcf
Shyam pcfShyam pcf
Shyam pcf
shyam kumar
 
Academy PRO: React Native - introduction
Academy PRO: React Native - introductionAcademy PRO: React Native - introduction
Academy PRO: React Native - introduction
Binary Studio
 
Complete JavaScript Guide Notes Examples
Complete JavaScript Guide Notes ExamplesComplete JavaScript Guide Notes Examples
Complete JavaScript Guide Notes Examples
Javier 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.pptx
KurczakGdakowski
 
best java training center in chennai
best java training center in chennaibest java training center in chennai
best java training center in chennai
sathis est
 

Similar to 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
 

More from Gaurav Paliwal

Group Presentation on Bussiness Intelligence
Group Presentation on Bussiness IntelligenceGroup Presentation on Bussiness Intelligence
Group Presentation on Bussiness IntelligenceGaurav Paliwal
 
IBM Developer SuperStar Competition
IBM Developer SuperStar CompetitionIBM Developer SuperStar Competition
IBM Developer SuperStar CompetitionGaurav Paliwal
 
NoSQL and SQL Databases
NoSQL and SQL DatabasesNoSQL and SQL Databases
NoSQL and SQL Databases
Gaurav Paliwal
 
Open Source ICT Education India
Open Source ICT Education IndiaOpen Source ICT Education India
Open Source ICT Education IndiaGaurav Paliwal
 
Software testing tools
Software testing toolsSoftware testing tools
Software testing tools
Gaurav Paliwal
 
Fedora Linux
Fedora LinuxFedora Linux
Fedora Linux
Gaurav Paliwal
 
Open Source for Institutes
Open Source for InstitutesOpen Source for Institutes
Open Source for InstitutesGaurav Paliwal
 

More from 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
 

Recently uploaded

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 

Recently uploaded (20)

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 

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