狠狠撸

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 Developer, etc…
? I like to teach
? I like craft beer

…and I’m a dad

Agenda
? Introduction

? How it works
? Understanding Development
? HTML, CSS, JS
? Front, Middle, & Back
? Templates and Frameworks
? UX Semantics
? Thank You

Intro

- google search


How it Works

Applications

Hardware

Users

Operating Systems

How it Works

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

How: Through language


How it Works

Computer
Communication
Protocol

a description of the rules computers
must follow to communicate with
each other.


How it Works

Examples:
TCP/IP = Transfer Control Protocol/Internet Protocol
HTTP = Hypertext Transfer Protocol
HTML = Hypertext Markup Language


The Internet


The Internet of Things
The convergence of widgets



A Networked Intelligence



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


“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



- Framework for Knowledge Work Analysis (Efimova, 2004)



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


Understanding Development

Why should you care?



Just like software/web development



$('#lightSwitch').click(function() {
$('#theLights').toggle(’fast', function() {
// Yep, That Just Happened.
});
});



Semantics…huh?



Not Semantic

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



Semantic


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>


HTML, CSS, JS
The Hello World Website

Hello World


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>

HTML, CSS, JS
External CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=”style.css">
</head>
<body>
Hello World
</body>
</html>


HTML, CSS, JS
style.css


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

</head>
<body>
Hello World
<script type="text/javascript" src=/slideshow/respecting-semantics/28451261/"js/scripts.js"></script>
</body>
</html>


HTML, CSS, JS

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
Hello World
<script type="text/javascript" src=/slideshow/respecting-semantics/28451261/"js/scripts.js"></script>
</body>

</html>


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


Templates & Frameworks


UX Semantics

What are UX Semantics?


Summary

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


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

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/

狠狠撸

Respecting Semantics

Recommended

More Related Content

What's hot (7)

Similar to Respecting Semantics (20)

Recently uploaded (20)

Respecting Semantics