respecting semantics
Post on 19-May-2015
161 Views
Preview:
DESCRIPTION
TRANSCRIPT
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?
top related