thatConference.com - Monday 13th

posted on: Friday, August 17, 2012 by: jhildeman

Keynote - Leon Gersing, "YOU"

Monday, August 13th, 9am

Speaker:

 Notes:

  • Boundaries
    • Most people's boundaries are "too loose" or "too rigid"
    • Help others understand what you need and "know thyself"
    • Be Honest - communicate what you want/need
    • Be Flexible and Receptive
    • Unhealthy Boundaries
      • Walls - put up barriers to keep people out
      • Triangulation - two gang up on one
      • Control - has to be in charge
      • Isolation
        • Just go "talk to the person"
        • Programmers:  "You're not going to die from communicating with someone"
  • Choices
    • In most cases, "you've already made your choice, now understand it"
    • Introspection happens outside of you - share what you're thinking/deciding
    • You always have a choice
    • You're never as trapped as you think you are
    • Own your choices
  • Words Matter
    • Empathy - seek to understand others you work with, ask what is it they need?
    • Hear - hear why they saying certain things.  Is it because of fear, feeling I'm lost, feeling I don't matter
  • Change
    • You only have so many heartbeats
    • Start doing what you want to do TODAY!
    • Change is possible with understanding
    • Understand why you make choices
    • I make choices because of values and concern over perceptions
  • Failure
    • Fail early and fail often!
    • Create a culture where people aren't afraid to say "I don't know that"
    • Create an environment where it's OK to fail and learn from others
    • Experts fail too
    • Code is a living representation of you, right now.  Not a year from now, but right now.
    • "I've yet to meet a developer showing off their code, who didn't start with an apology."  -Awesome quote!

 

 

How HTML5 makes Windows suck less

Brandon Satrap

Monday, August 13, 2012

2:38 PM

@Brandonsatrom

Userinexperience.com

brandon@kendoui.com

 

History

  • Text Links Academic --> Yahoo Directory --> jGoogle, -->  eCommerce business Amazon --> outlook web access --> 
  • 2008: html 4.01 and css, talking about XHTML  which "gladly died"

 

HTML5

  • Frameworks: KendoUI mobile(try.kendoui.com) - compares with PhoneGap and Appcellerator
  • Any application that can be written in Javascript - no seriously
  • Developers do love complexity, but simplicity always wins out.
  • To do App devleopment for IOS, Android and WP
    • Need an API
    • Intermediate compile
    • Deploy and/or compile/deploy
  • Windows 8
    • HTML5, Javascript, CSS
    • Native API
    • No intermediary
    • MS offically supports HTML5 on the platform
    • Semantic Markup
      • <header><h1><
    • Data- attributes
    • Validator.nu - Windows 8 HTML markup is completely valid
    • SVG is resolution independent - resizing doesn't loss resolution
    • CSS3 Grid Layout - like 960 grid
    • CSS3 Flexbox -
      • ms-flex-direction
      • ms-flex-align
    • Media Queries
    • Animations
      • CSS3 Animations - #keyframes slize {
        from { transform...
    • WinJS
      • WinJS.Namespace.define("Game", {
      • XHR - like jquery $.ajax("")
      • WinJS.UI.Animation.fadeIn(originalImg);
      • WinJS.UI.Animation.fadeOut(originalImg)
      • Adds CSS3 animations behind the scenes for you
      • WinJS.UI.Animation.enterPage([main], [source, target])
      • WinJS.xhr(call, [promise worked], [promise failed])
    • WinRT Projections
      • WinRT Accellarometer
      • Compass
    • Future

 

Questions:

  • Where is the grid-layout implemented?  Answer: IE10, FF is looking at it

 

Going mobile with ASP.net mvc 4

  • Speaker: 
    • Steve bodner
    • @stevebodner
    • Adaptive rendering
      • @media only screen and (max-width: 850px
      • { header: centered}
    • Mobile first Design
      • Define the most important content and get that to mobile devices
      • Then, build up to more capable devices
    • Media queries in html4 and css2
      • Braille, handheld, print, projection, screen, tty, tv
    • LESS: CSS compiler with variables
    • Graceful degradation - old concept
    • Feature detection - new concept
    • Adaptive
    • Responsive design -
    • Mobile First
    • Responsive frameworks: twitter bootstrap, zurb,
    • Simple-talk.com 

Open Spaces - mobile tools

  • Mono Touch
    • Great performance
    • Totally worth the $
    • One codebase + UI in native tools = native experience
    • Edit UI using native tools but store in shared file area within Visual Studio project directory
    • Mono Wraps camera, contacts, geo-location etc
    • If it's not in the API, direct native API access is always available
    • "Test flight" is better than Titanium
  • Mono Touch Dialog
    • Nice solution for tables and forms
    • Table layout and hierarchy
  • Titanium by AppCelerator
    • Need to rebuild each native UI
    • Javascript based solution
    • Abstraction for contacts etc
    • Cloud database
  • PhoneGap
    • Abstracts away what device you're on
    • If it's not in the API, you're out of luck
    • Lowest common denominator approac
  • Eclipse is really buggy and not a great IDE
  • Development Approach

UI Made easy

Speaker:

  • Jon VonGiller
  • @vongiller
  • Blog.nitriq.com

 

Page One

  • "Visual weight should match information relevance!"
  • UI Metrics
    • Keystrokes
    • Mouse travel distance
    • Gaze shifts
      • Humans scan "top-to-bottom" faster than "left-to-right".
    • Mental Delays
      • Compound interest that can bankrupt you
      • Recall
      • "user mental model not developers"
  • Good UI
    • Clear
    • Consistent
    • Concise
  • Tools
    • Contrast - black/white - visual difference between two elements
    • Color -
      • Hue - Blue vs. Teal
      • Saturation - Vibrance
      • Value - dark/light
    • Tables - less lines (light grey) and more content (bold headers)
    • Fonts
      • Serif - better on long text blocks
      • San-Serif - quick to read
    • Shapes
      • Arrows
      • Squares
    • Motion
      • Easing should be 200-400ms
      • Fade in/out should not change the flow of the page
  • References:
    • Use a CSS framework: SASS and LESS
    • Snook.ca - color contrast checker (bit.ly/E53L)
    • Kuler.adobe.com
  • Examples
    • (Bad) Don't use multiple colors when asking the user to choose "shape labels"
    • (Good) Labels on checkboxes should always be clickable

 

Page Two

  • Whenever possible do things "in parallel" not "serial" (i.e. no modal)
  • Use list boxes over combo boxes (drop down is an extra step)
  • Glow
    • Use glow on text to make readable over multi-color background
    • Dark/light background = dark text over light glow
  • Gradients - help transfer "gaze"
  • Proximity - similar data close, similar functions close
  • Immediate Feedback
  • Telemetry - what is a user doing?
    • Crazy Egg
    • Google Analytics
  • UI Checklist
    • 3 most important screens
    • 3 most important pieces of a screen
    • 3 most important fields in a section

0 comment(s) for thatConference.com - Monday 13th

Leave a comment:

NOTE: Blog comments are moderated so your comments may not appear immediately.

Name:  

Email:  

Website:

Comment:  

Enter the code shown: