View
166
Download
0
Category
Preview:
DESCRIPTION
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.
Citation preview
Technology, Development, & UXRespecting Semantics
@uxbd #respectingsemantics
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, Front-End Developer, etc…
• I like to teach
• I like craft beer
…and I’m a dad
@uxbd #respectingsemantics
Agenda
• Introduction
• How it works
• Understanding Development
• HTML, CSS, JS
• Front, Middle, & Back
• Templates and Frameworks
• UX Semantics
• Thank You
Introduction
@uxbd #respectingsemantics
Intro
- google search
How It Works
@uxbd #respectingsemantics
How it Works
Users
Applications
Operating Systems
Hardware
@uxbd #respectingsemantics
How it Works
The Internet
What: It’s a network of computers.
Why: Communicate without having to print.
How: Through language
@uxbd #respectingsemantics
How it Works
Computer Communication Protocol
a description of the rules computers must follow to communicate with each other.
@uxbd #respectingsemantics
How it Works
Examples:
TCP/IP = Transfer Control Protocol/Internet ProtocolHTTP = Hypertext Transfer ProtocolHTML = Hypertext Markup Language
@uxbd #respectingsemantics
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 mediums work and
Keeping in mind a user’s experience
Service Design
@uxbd #respectingsemantics
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
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
Understanding Development
@uxbd #respectingsemantics
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 Just Happened. });});
@uxbd #respectingsemantics
Understanding Development
@uxbd #respectingsemantics
Understanding Development
Semantics…huh?
@uxbd #respectingsemantics
Understanding Development
Walk up to the self-checkout line and what?
“I am buying cereal”
Not Semantic
@uxbd #respectingsemantics
Understanding Development
Semantic
HTML, CSS, JS
@uxbd #respectingsemantics
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
HTML, CSS, JS
Hello World
The Hello World Website
@uxbd #respectingsemantics
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
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
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">
<title>The Hello World Website</title></head>
<body>Hello World<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
@uxbd #respectingsemantics
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>
Front, Middle, & Back
@uxbd #respectingsemantics
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
HTML, CSS, JS, and more…
Front-End
Middle-Tier
Back-End
Web Application
Static
Dynamic
Templates & Frameworks
@uxbd #respectingsemantics
Templates & Frameworks
@uxbd #respectingsemantics
Templates & Frameworks
@uxbd #respectingsemantics
Templates & Frameworks
UX Semantics
@uxbd #respectingsemantics
UX Semantics
What are UX Semantics?
Summary
@uxbd #respectingsemantics
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:There is no such thing as a unicorn, get out of your silo and work together
@uxbd #respectingsemantics
GoogleWikipediahttp://stackoverflow.com/http://coding.smashingmagazine.com/Learn to code:
http://www.codecademy.com/
References
Brian Durkin
brianjdurkin@gmail.com
@uxbd
Thank YouQuestions?
Recommended