respecting semantics

Technology, Development, & UXRespecting Semantics

@uxbd #respectingsemantics

Who am I?

Brian Durkin

UX Designer

[email protected]

@uxbd


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


Agenda

• Introduction

• How it works

• Understanding Development

• HTML, CSS, JS

• Front, Middle, & Back

• Templates and Frameworks

• UX Semantics

• Thank You

Introduction


Intro

- google search

How It Works


How it Works

Users

Applications

Operating Systems

Hardware


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 ProtocolHTTP = Hypertext Transfer ProtocolHTML = 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?



Walk up to the self-checkout line and what?

“I am buying cereal”

Not Semantic



Semantic

HTML, CSS, JS


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

Hello World

The Hello World Website


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"><title>The Hello World Website</title></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">


<body>Hello World<script type="text/javascript" src="js/scripts.js"></script>

</body>

</html>


HTML, CSS, JS

<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="mystyle.css">


<body>Hello World<script type="text/javascript" src="js/scripts.js"></script>

</body>

</html>

Front, Middle, & Back


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…

Front-End

Middle-Tier

Back-End

Web Application

Static

Dynamic

Templates & Frameworks

UX Semantics


UX Semantics

What are UX Semantics?

Summary


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


GoogleWikipediahttp://stackoverflow.com/http://coding.smashingmagazine.com/Learn to code:

http://www.codecademy.com/

References

Brian Durkin

[email protected]

@uxbd

Thank YouQuestions?

http://stackoverflow.com/



http://coding.smashingmagazine.com/

http://coding.smashingmagazine.com/



mailto:[email protected]