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
- No intermediary
- MS offically supports HTML5 on the platform
- 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
- 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])
Questions:
- Where is the grid-layout implemented? Answer: IE10, FF is
looking at it
Going
mobile with ASP.net mvc 4
- Speaker:
- Adaptive rendering
- @media only screen and (max-width: 850px
- 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 -
- Responsive frameworks: twitter bootstrap, zurb,
- Simple-talk.com
Open Spaces - mobile tools
- Mono Touch
- 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"
- Tools
- Contrast - black/white - visual difference between two
elements
- Tables - less lines (light grey) and more content (bold
headers)
- Fonts
- Serif - better on long text blocks
- San-Serif - quick to read
- 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 pieces of a screen
- 3 most important fields in a section