Web Development for UX Designers

WEB DEVELOPMENT for UX DESIGNERSAshlimarie DongFormer HCDE Student

<life>

Web Developer Since 2005

Programming forDesign’s Sake

Then College Happened

I DiscoveredUser Experience!And it was amazing.

Why shouldUX Designers care?

Why should UX Designers care? Complex Storyboarding =?

Why should UX Designers care? Understanding Browser Constraints

Why should UX Designers care?Creating Something Usable Not reusable Axure rendered HTML

Why should UX Designers care? Empathizing with Developers

PMUX DEV

UX DEVDiagram credit: http://asinthecity.com/

Core Topics CoveredHardware ConstraintsWeb ConstraintsMobile Web IntroductionTerminologyHTML5 & CSS3 RedliningInternationalizationJavaScript and jQuery

HardwareConstraints

Waiting sucks

Resource Hogs

Internet connection

Platform vs

RAM and Virtual Memory

There are solutions!

Solutions to Hardware Constraints Caching Data

Solutions to Hardware Constraints Prefetching <link rel="prefetch" href="http://www.example.com/">

Solutions to Hardware Constraints Touch Screen Devices

Solutions to Hardware Constraints: Touch Screen Devices Swiping

Solutions to Hardware Constraints: Touch Screen Devices No hover state

Solutions to Hardware Constraints: Touch Screen Devices Ario’s Law Look out, Fitts’ Law!

Web Constraints

ResolutionsUsing this font size,this sentence canfit a screen with aresolution like this. But doesn’t mean it will fit a screen size like …

Web Constraints Cross-browser Compatibility One version to rule them all.

Web Constraints Graceful Degradation

Web Constraints“Graceful degradation means that your Website continues to operate even when viewedwith less-than-optimal software in whichadvanced effects don’t work.” Fluid Thinking, by Peter-Paul Koch

IE9 IE7

Guilty!

Web Constraints But… That doesn’t mean you have to build for the oldest of the old. http://www.microsoft.com/typography/web/fonts/comicsns

Mobile Focus.

Web vs Native Appshttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development

CommonTerminology

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..”

Function Callsfunction doEquation() { alert(3+ 20);}<script type=“text/javascript”>doEquation();</script>

Classes and IDsHi, I’m a class! Hi, I’m an ID!I’m seen multiple I’m unique intimes in a a webpage!webpage..className #idName

API vs SDKApplicationProgrammingInterface(API)

API vs SDKSoftwareDevelopmentKit (SDK)

HTML History

W3C andWHATWG

http://evolutionofweb.appspot.com/

HTML5 is Rich

Content has more meaning

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 <spanproperty="v:title">engineer</span> at <span property="v:affiliation">ACMECorp</span>. </div>

Microformats<div class="vcard"><img class="photo"src="www.example.com/bobsmith.jpg" /><strong class="fn">Bob Smith</strong><span class="title">Senior editor</span> at <spanclass="org">ACME Reviews</span><span class="locality">Desertville</span>, <spanclass="region">AZ</span></div>

Microdata<div itemscope itemtype="http://data-vocabulary.org/Person">My name is <span itemprop="name">Bob Smith</span> but people call me <spanitemprop="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>

Geolocationsvar 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; }

PseudoclassesPattern Meaning Matches element E when EE:first-child is the first child of its parent. Matches element E if E is the source anchor of aE:link hyperlink of which theE:visited target is not yet visited (:link) or already visited (:visited).E:active Matches E during certainE:hover user actions.E:focusE:nth-of-type(n) an E element, the n-th sibling of its type

Typography@font-face { font-family: <a-remote-font-name>; src: <source>; font-weight: <weight>; font-style: <style>;}

Detect device typeIn 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), onlyscreen and (max-device-width: 480px) { /* CSS overrides for mobile here */}

Frameworks For BetterPerformance & Integration

User Experience Designers must deconstruct designs and interactions in order toeffectively communicate concepts to Developers.

Redlining

http://www.currybet.net/cbet_blog/2010/05/will-we-need-to-specify-html5.php

Develop efficiently.

Develop efficiently.<div><h1>Formatting</h1></div>

Develop efficiently.

Develop efficiently.Most importantly:Know the standards.

Develop efficiently.Tables are SO2004.* * Tables should be used for tabular data, not site layouts.

WebInternationalization

Single Byte vs Double Byte

<html lang="en">http://www.w3schools.com/tags/ref_language_codes.asp

Do itYourself.

Lab 1Redlining, HTML5, CSS3

JavaScript

Client-side Languagehttp://contentdeliverance.com/2011/client-server-architecture/

http://red27.net/2010/12/15/what-makes-web-applications-work/

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..”

jQuerya JavaScript Library. (There are many out there)

Cross-browserCross-language Consistent Quick

Animations!$(#clickMe).click(function() {$(#goAnimate).animate({opacity: 0.25,left: +=50,height: toggle }, 5000});

Slideshows http://slidesjs.com/ http://galleria.io/http://manos.malihu.gr/tuts/sideways_jquery_fullscreen_image_gallery_nativescrollbars_clickm ode.html

Asynchronous JavaScript and HTML (AJAX)$.ajax({ url: "test.html", context: document.body}).done(function() { $(this).addClass("done");});

Plug-ins

Easy-to-use Interface$(function(){ $("#slides").slides({ preload: true, preloadImage: /img/loading.gif, play: 5000, pause: 2500, hoverPause: true });});http://slidesjs.com/#docs

Lab 2Animations and Plug-ins

“[Programmers] struggle with this idea ofmaking computers behave more like humans,because they see humans as weak andimperfect computing devices”- Alan Cooper, author of The Inmates are Running the Asylum

Now you can…Effectively share design conceptsMark up your designsSpeak the Geek Speak (get along with developers)Do it yourself!

ResourcesW3C Schools: great tutorials for beginnersjQuery Mobile: awesome resource for web appdevelopmentCSS-Tricks: resource for cool CSS tricksLynda.com: nice & informative tutorialsCodecademy: eLearning site for developmentPhonegap: converts web-based apps to native

Thanks!Follow me via Twitter: @designdaisukiOr e-mail me at ashlimarie@gmail.com

http://dev-three.koka-produktion.de	1617
http://blog.dreamcss.com	402
http://umesh.shareist.com	74
http://www.palgreen.co.jp	59
http://ifattituoi.wordpress.com	34
http://test.itfglobal.org	29
http://sites.dev.shareist.net	22
http://www.shareist.com	17
http://webpub.jacieyang.com	17
http://www.markovation.com	15
http://loongtoom.blogspot.com	7
http://localhost	5
http://2012edn6102s.wikispaces.com	5
http://www.bravenewtalent.com	4
http://core.traackr.com	4
http://www.linkedin.com	3
http://us-w1.rockmelt.com	3
http://www.dev.shareist.net	3
http://127.0.0.1	3
http://cbshare.wordpress.com	2
http://translate.googleusercontent.com	2
http://nodeslide.herokuapp.com	1
http://proba	1
http://blog.exercisetherpg.com	1
http://vedruna2esoaignacio.blogspot.com.es	1

Web Development for UX Designers

by Ashlimarie on Jun 01, 2012

Accessibility

Categories

Upload Details

Usage Rights

25 Embeds 2,331

Statistics

Web Development for UX Designers Presentation Transcript