Respecting Semantics
•Download as PPTX, PDF•
1 like•382 views
The document is a presentation about respecting semantics in technology, development, and user experience (UX). It discusses how the internet works using protocols like TCP/IP and HTTP to allow computers to communicate. It then covers HTML, CSS, and JavaScript as front-end languages, and templates and frameworks that can be used to build websites more quickly. The presentation emphasizes that as service designers and knowledge engineers, respecting semantics is important to help users understand how systems work. It suggests keeping designs simple, fast, and validating assumptions while getting out of silos to work collaboratively.
Recommended
Recommended
More Related Content
What's hot
What's hot (7)
Similar to Respecting Semantics
Similar to Respecting Semantics (20)
Recently uploaded
Recently uploaded (20)
Respecting Semantics
- 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
- 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
- 20. Understanding Development Why should you care? @uxbd #respectingsemantics
- 22. Understanding Development Just like software/web development @uxbd #respectingsemantics
- 24. Understanding Development <link rel="stylesheet" type="text/css" href=”style.css"> @uxbd #respectingsemantics
- 26. Understanding Development $('#lightSwitch').click(function() { $('#theLights').toggle(’fast', function() { // Yep, That Just Happened. }); }); @uxbd #respectingsemantics
- 29. Understanding Development Not Semantic Walk up to the selfcheckout line and what? “I am buying cereal” @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
- 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