Respecting Semantics

  • 123 views
Uploaded 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, …

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.

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
123
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Respecting Semantics Technology, Development, & UX
  • 2. Who am I? Brian Durkin UX Designer brianjdurkin@gmail.com @uxbd @uxbd #respectingsemantics
  • 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. Agenda • Introduction • How it works • Understanding Development • HTML, CSS, JS • Front, Middle, & Back • Templates and Frameworks • UX Semantics • Thank You @uxbd #respectingsemantics
  • 5. Introduction
  • 6. Intro - google search @uxbd #respectingsemantics
  • 7. How It Works
  • 8. How it Works Applications Hardware Users Operating Systems @uxbd #respectingsemantics
  • 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. How it Works Computer Communication Protocol a description of the rules computers must follow to communicate with each other. @uxbd #respectingsemantics
  • 11. How it Works Examples: TCP/IP = Transfer Control Protocol/Internet Protocol HTTP = Hypertext Transfer Protocol HTML = Hypertext Markup Language @uxbd #respectingsemantics
  • 12. The Internet @uxbd #respectingsemantics
  • 13. The Internet of Things The convergence of widgets @uxbd #respectingsemantics
  • 14. The Internet of Things A Networked Intelligence @uxbd #respectingsemantics
  • 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. 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. The Internet of Things - Framework for Knowledge Work Analysis (Efimova, 2004) @uxbd #respectingsemantics
  • 18. The Internet of Things How do we distribute knowledge? integrating knowledge into computer systems through language @uxbd #respectingsemantics
  • 19. Understanding Development
  • 20. Understanding Development Why should you care? @uxbd #respectingsemantics
  • 21. Understanding Development @uxbd #respectingsemantics
  • 22. Understanding Development Just like software/web development @uxbd #respectingsemantics
  • 23. Understanding Development @uxbd #respectingsemantics
  • 24. Understanding Development <link rel="stylesheet" type="text/css" href=”style.css"> @uxbd #respectingsemantics
  • 25. Understanding Development @uxbd #respectingsemantics
  • 26. Understanding Development $('#lightSwitch').click(function() { $('#theLights').toggle(’fast', function() { // Yep, That Just Happened. }); }); @uxbd #respectingsemantics
  • 27. Understanding Development @uxbd #respectingsemantics
  • 28. Understanding Development Semantics…huh? @uxbd #respectingsemantics
  • 29. Understanding Development Not Semantic Walk up to the selfcheckout line and what? “I am buying cereal” @uxbd #respectingsemantics
  • 30. Understanding Development Semantic @uxbd #respectingsemantics
  • 31. HTML, CSS, JS
  • 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. HTML, CSS, JS The Hello World Website Hello World @uxbd #respectingsemantics
  • 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. 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. HTML, CSS, JS style.css @uxbd #respectingsemantics
  • 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. 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. Front, Middle, & Back
  • 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. HTML, CSS, JS, and more… Static Front-End Middle-Tier Web Application Dynamic Back-End @uxbd #respectingsemantics
  • 42. Templates & Frameworks
  • 43. Templates & Frameworks @uxbd #respectingsemantics
  • 44. Templates & Frameworks @uxbd #respectingsemantics
  • 45. Templates & Frameworks @uxbd #respectingsemantics
  • 46. UX Semantics
  • 47. UX Semantics What are UX Semantics? @uxbd #respectingsemantics
  • 48. Summary
  • 49. Summary We are service designers and knowledge management engineers working to help people. @uxbd #respectingsemantics
  • 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. 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