Respecting Semantics
Technology, Development, & UX
Who am I?

Brian Durkin
UX Designer
brianjdurkin@gmail.com
@uxbd

@uxbd #respectingsemantics
Who am I?
• I am a UXer

• I have been a Web Designer, Web Developer,
Webmaster, Information Systems Specialist, FrontEnd ...
Agenda
• Introduction

• How it works
• Understanding Development
• HTML, CSS, JS
• Front, Middle, & Back
• Templates and ...
Introduction
Intro

- google search

@uxbd #respectingsemantics
How It Works
How it Works

Applications

Hardware

Users

Operating Systems
@uxbd #respectingsemantics
How it Works

The Internet
What: It’s a network of computers.
Why: Communicate without having to print.

How: Through lang...
How it Works

Computer
Communication
Protocol

a description of the rules computers
must follow to communicate with
each o...
How it Works

Examples:
TCP/IP = Transfer Control Protocol/Internet Protocol
HTTP = Hypertext Transfer Protocol
HTML = Hyp...
The Internet

@uxbd #respectingsemantics
The Internet of Things
The convergence of widgets

@uxbd #respectingsemantics
The Internet of Things

A Networked Intelligence

@uxbd #respectingsemantics
The Internet of Things

How do we design to a networked intelligence?

We can start by thinking about
How different medium...
The Internet of Things
“Service Design is the activity of planning and organizing
people, infrastructure, communication an...
The Internet of Things

- Framework for Knowledge Work Analysis (Efimova, 2004)

@uxbd #respectingsemantics
The Internet of Things

How do we distribute knowledge?
integrating knowledge into computer
systems through language

@uxb...
Understanding
Development
Understanding Development

Why should you care?

@uxbd #respectingsemantics
Understanding Development

@uxbd #respectingsemantics
Understanding Development

Just like software/web development

@uxbd #respectingsemantics
Understanding Development

@uxbd #respectingsemantics
Understanding Development
<link rel="stylesheet" type="text/css" href=”style.css">

@uxbd #respectingsemantics
Understanding Development

@uxbd #respectingsemantics
Understanding Development

$('#lightSwitch').click(function() {
$('#theLights').toggle(’fast', function() {
// Yep, That J...
Understanding Development

@uxbd #respectingsemantics
Understanding Development

Semantics…huh?

@uxbd #respectingsemantics
Understanding Development

Not Semantic

Walk up to the selfcheckout line and
what?
“I am buying cereal”

@uxbd #respectin...
Understanding Development

Semantic

@uxbd #respectingsemantics
HTML, CSS, JS
HTML, CSS, JS
HTML5:
<!DOCTYPE html>
<html>
<head>
<title>The Hello World Website</title>
</head>
<body>
<!–- this is a co...
HTML, CSS, JS
The Hello World Website

Hello World

@uxbd #respectingsemantics
HTML, CSS, JS
<body>
<header>
<h1><a href="#">Name Of My Company</a></h1>
<nav>
<ul>
<li class="active"><a href="#">Home</...
HTML, CSS, JS
External CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=”style.css">
<title>...
HTML, CSS, JS
style.css

@uxbd #respectingsemantics
HTML, CSS, JS
External JS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">

<titl...
HTML, CSS, JS

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>The Hello W...
Front, Middle, & Back
HTML, CSS, JS, and more…

Front-End: ex. HTML, CSS, JS

Middle-Tier: ex. PHP, JSP, ASP.Net

Back-End: ex. SQL, MySQL, Java...
HTML, CSS, JS, and more…

Static

Front-End

Middle-Tier

Web Application

Dynamic
Back-End

@uxbd #respectingsemantics
Templates &
Frameworks
Templates & Frameworks

@uxbd #respectingsemantics
Templates & Frameworks

@uxbd #respectingsemantics
Templates & Frameworks

@uxbd #respectingsemantics
UX Semantics
UX Semantics

What are UX Semantics?

@uxbd #respectingsemantics
Summary
Summary

We are service designers
and knowledge
management engineers
working to help people.

@uxbd #respectingsemantics
Summary

Suggestions:
Keep it simple, make it fast,
validate all design assumptions,
and respect semantics.

Remember:
The...
References

Thank You
Questions?

Brian Durkin
brianjdurkin@gmail.com
@uxbd

Google
Wikipedia
http://stackoverflow.com/
ht...
Upcoming SlideShare
Loading in …5
×

Respecting Semantics

312 views

Published on

This talk was about semantics and the discussions that happen between humans and computers, and computers and computers. As we try to fully understand knowledge systems and information stacks, designers can really design to users needs by utilizing some of these technologies. "All web designers code" is a bit harsh but all designers DO need to at least understand code and why semantic decisions are made. Every role on a product development team has their own level of semantic language and when we all try to at least understand that language, we can get out of the silo and try to work together.

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
312
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Respecting Semantics

  1. 1. Respecting Semantics Technology, Development, & UX
  2. 2. Who am I? Brian Durkin UX Designer brianjdurkin@gmail.com @uxbd @uxbd #respectingsemantics
  3. 3. Who am I? • I am a UXer • I have been a Web Designer, Web Developer, Webmaster, Information Systems Specialist, FrontEnd Developer, etc… • I like to teach • I like craft beer …and I’m a dad @uxbd #respectingsemantics
  4. 4. Agenda • Introduction • How it works • Understanding Development • HTML, CSS, JS • Front, Middle, & Back • Templates and Frameworks • UX Semantics • Thank You @uxbd #respectingsemantics
  5. 5. Introduction
  6. 6. Intro - google search @uxbd #respectingsemantics
  7. 7. How It Works
  8. 8. How it Works Applications Hardware Users Operating Systems @uxbd #respectingsemantics
  9. 9. How it Works The Internet What: It’s a network of computers. Why: Communicate without having to print. How: Through language @uxbd #respectingsemantics
  10. 10. How it Works Computer Communication Protocol a description of the rules computers must follow to communicate with each other. @uxbd #respectingsemantics
  11. 11. How it Works Examples: TCP/IP = Transfer Control Protocol/Internet Protocol HTTP = Hypertext Transfer Protocol HTML = Hypertext Markup Language @uxbd #respectingsemantics
  12. 12. The Internet @uxbd #respectingsemantics
  13. 13. The Internet of Things The convergence of widgets @uxbd #respectingsemantics
  14. 14. The Internet of Things A Networked Intelligence @uxbd #respectingsemantics
  15. 15. The Internet of Things How do we design to a networked intelligence? We can start by thinking about How different mediums work and Keeping in mind a user’s experience Service Design @uxbd #respectingsemantics
  16. 16. The Internet of Things “Service Design is the activity of planning and organizing people, infrastructure, communication and material components of a service in order to improve its quality and the interaction between service provider and customers.” – the pedias SaaS? – Software as a Service @uxbd #respectingsemantics
  17. 17. The Internet of Things - Framework for Knowledge Work Analysis (Efimova, 2004) @uxbd #respectingsemantics
  18. 18. The Internet of Things How do we distribute knowledge? integrating knowledge into computer systems through language @uxbd #respectingsemantics
  19. 19. Understanding Development
  20. 20. Understanding Development Why should you care? @uxbd #respectingsemantics
  21. 21. Understanding Development @uxbd #respectingsemantics
  22. 22. Understanding Development Just like software/web development @uxbd #respectingsemantics
  23. 23. Understanding Development @uxbd #respectingsemantics
  24. 24. Understanding Development <link rel="stylesheet" type="text/css" href=”style.css"> @uxbd #respectingsemantics
  25. 25. Understanding Development @uxbd #respectingsemantics
  26. 26. Understanding Development $('#lightSwitch').click(function() { $('#theLights').toggle(’fast', function() { // Yep, That Just Happened. }); }); @uxbd #respectingsemantics
  27. 27. Understanding Development @uxbd #respectingsemantics
  28. 28. Understanding Development Semantics…huh? @uxbd #respectingsemantics
  29. 29. Understanding Development Not Semantic Walk up to the selfcheckout line and what? “I am buying cereal” @uxbd #respectingsemantics
  30. 30. Understanding Development Semantic @uxbd #respectingsemantics
  31. 31. HTML, CSS, JS
  32. 32. HTML, CSS, JS HTML5: <!DOCTYPE html> <html> <head> <title>The Hello World Website</title> </head> <body> <!–- this is a comment and wont show up --> Hello World </body> </html> @uxbd #respectingsemantics
  33. 33. HTML, CSS, JS The Hello World Website Hello World @uxbd #respectingsemantics
  34. 34. HTML, CSS, JS <body> <header> <h1><a href="#">Name Of My Company</a></h1> <nav> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#”>About Us</a></li> <li><a href="#">Very Important Information</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </header> <section> <h2>About Us</h2> <article>This is about my company.</article> </section> </body> @uxbd #respectingsemantics
  35. 35. HTML, CSS, JS External CSS: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href=”style.css"> <title>The Hello World Website</title> </head> <body> Hello World </body> </html> @uxbd #respectingsemantics
  36. 36. HTML, CSS, JS style.css @uxbd #respectingsemantics
  37. 37. HTML, CSS, JS External JS: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <title>The Hello World Website</title> </head> <body> Hello World <script type="text/javascript" src="js/scripts.js"></script> </body> </html> @uxbd #respectingsemantics
  38. 38. HTML, CSS, JS <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <title>The Hello World Website</title> </head> <body> Hello World <script type="text/javascript" src="js/scripts.js"></script> </body> </html> @uxbd #respectingsemantics
  39. 39. Front, Middle, & Back
  40. 40. HTML, CSS, JS, and more… Front-End: ex. HTML, CSS, JS Middle-Tier: ex. PHP, JSP, ASP.Net Back-End: ex. SQL, MySQL, Java @uxbd #respectingsemantics
  41. 41. HTML, CSS, JS, and more… Static Front-End Middle-Tier Web Application Dynamic Back-End @uxbd #respectingsemantics
  42. 42. Templates & Frameworks
  43. 43. Templates & Frameworks @uxbd #respectingsemantics
  44. 44. Templates & Frameworks @uxbd #respectingsemantics
  45. 45. Templates & Frameworks @uxbd #respectingsemantics
  46. 46. UX Semantics
  47. 47. UX Semantics What are UX Semantics? @uxbd #respectingsemantics
  48. 48. Summary
  49. 49. Summary We are service designers and knowledge management engineers working to help people. @uxbd #respectingsemantics
  50. 50. Summary Suggestions: Keep it simple, make it fast, validate all design assumptions, and respect semantics. Remember: There is no such thing as a unicorn, get out of your silo and work together @uxbd #respectingsemantics
  51. 51. References Thank You Questions? Brian Durkin brianjdurkin@gmail.com @uxbd Google Wikipedia http://stackoverflow.com/ http://coding.smashingmagazine.com/ Learn to code: http://www.codecademy.com/ @uxbd #respectingsemantics

×