An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
13. UX DEV
Diagram credit: http://asinthecity.com/
14. Core Topics Covered
Hardware Constraints
Web Constraints
Mobile Web Introduction
Terminology
HTML5 & CSS3 Redlining
Internationalization
JavaScript and jQuery
34. Web Constraints
“Graceful degradation means that your Web
site continues to operate even when viewed
with less-than-optimal software in which
advanced effects don’t work.”
Fluid Thinking, by Peter-Paul Koch
42. Document Object Model
(DOM)
Document Root
<html>
Element Element
<head> <body>
Element Element Element
<title> <h1> <p>
Text Node Text Node Text Node
“My Site!” “Hello, World” “My name is..”
53. Resource Description
Framework in Attributes
(RDFa)
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
My name is <span property="v:name">Bob Smith</span>, but people call me
<span property="v:nickname">Smithy</span>.
Here is my homepage: <a href="http://www.example.com"
rel="v:url">www.example.com</a>.
I live in Albuquerque, NM and work as an <span
property="v:title">engineer</span> at <span property="v:affiliation">ACME
Corp</span>. </div>
55. Microdata
<div itemscope itemtype="http://data-vocabulary.org/Person">
My name is <span itemprop="name">Bob Smith</span> but people call me <span
itemprop="nickname">Smithy</span>.
Here is my home page: <a href="http://www.example.com"
itemprop="url">www.example.com</a>
I live in Albuquerque, NM and work as an <span itemprop="title">engineer</span>
at <span itemprop="affiliation">ACME Corp</span>.
</div>
56. Geolocations
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
58. Pseudoclasses
Pattern Meaning
Matches element E when E
E:first-child is the first child of its
parent.
Matches element E if E is
the source anchor of a
E:link hyperlink of which the
E:visited target is not yet visited
(:link) or already visited
(:visited).
E:active
Matches E during certain
E:hover
user actions.
E:focus
E:nth-of-type(n) an E element, the n-th
sibling of its type
60. Detect device type
In your HTML…
<meta name="viewport" content="width=device-
width,initial-scale=1,user-scalable=no">
In your CSS…
@media only screen and (max-width: 480px), only
screen and (max-device-width: 480px) {
/* CSS overrides for mobile here */
}
61. Frameworks
For Better
Performance & Integration
62. User Experience Designers
must deconstruct
designs and interactions
in order to
effectively communicate
concepts to Developers.
80. Manipulating the DOM
Document Root
<html>
Element Element
<head> <body>
Element Element Element
<title> <h1> <p>
Text Node Text Node Text Node
“My Site!” “Hello, World” “My name is..”
89. “[Programmers] struggle with this idea of
making computers behave more like humans,
because they see humans as weak and
imperfect computing devices”
- Alan Cooper, author of The Inmates are Running the Asylum
90. Now you can…
Effectively share design concepts
Mark up your designs
Speak the Geek Speak (get along with developers)
Do it yourself!
91. Resources
W3C Schools: great tutorials for beginners
jQuery Mobile: awesome resource for web app
development
CSS-Tricks: resource for cool CSS tricks
Lynda.com: nice & informative tutorials
Codecademy: eLearning site for development
Phonegap: converts web-based apps to native