What I brought back from Austin
42
What I brought back from Austin South by Southwest 2010
-
Upload
lisa-adkins -
Category
Technology
-
view
1.037 -
download
1
description
Transcript of What I brought back from Austin
What I brought
back from Austin
South by Southwest 2010
Some Things I'd like to share...
iPhone Development with HTML/CSS/JavaScript
Web Accessibility Gone Wild
What Guys are Doing to Get More Girls in Tech!
CSS3
HTML5
HTML5
• Improved Semantics through new elements
• Improved Web Forms
• JSTOR On HTML5
Improved Semantics: <header>
Use <header> to surround non-navigational header content such as banners, branding, logos, h1s, etc.
Example:
<header> <div id="branding"> <img src="logo.gif" alt="Company X Logo" /> <h1>Company X Homepage</h1> </div></header>
Improved Semantics: <footer>
Use <footer> to surround content such as bottom site navigation links, copyright information, etc.
Example:
<footer> <div="copyright">© Copyright 2000-2010 JSTOR.</div> <div id="infoNav" <a href="#">Contact</a> <a href="#">Privacy Policy</a> <a href="#">Site Map</a> </div></footer>
Improved Semantics: <nav>
Use <nav> to surround navigational elements that link within your site.
Example:<nav> <ul id="nav"> <li><a href="#">Product Development</a></li> <li><a href="#">Delivery</a></li> <li><a href="#">Shop Online</a></li> <li><a href="#">Support</a></li> <li><a href="#">Training & Consulting</a></li> </ul> </nav>
Improved Semantics: <article>
Use <article> to surround articles, posts, etc. to delineate between site elements and content.
Example:
<article> <div id="article1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt aliquet purus, eu congue neque tristique adipiscing. Nulla id nisi tortor. In vestibulum lorem vel libero convallis facilisis commodo risus tincidunt. Nulla a commodo ligula. Nulla facilisi. Curabitur ac massa quis mi scelerisque elementum vitae sit amet velit. Vestibulum tortor nisi, faucibus a suscipit at, convallis in enim.</p><p>Nulla molestie, arcu sit amet rhoncus faucibus, turpis elit venenatis turpis, id commodo justo nisl convallis ipsum. Phasellus vel mi urna, eu adipiscing purus. Etiam gravida rutrum orci. Praesent nec urna at dolor pulvinar placerat eu non ligula. Donec rhoncus metus et dui venenatis vitae ornare enim ullamcorper.</p><p>Donec tempus adipiscing sagittis. Integer nulla nisi, rutrum in egestas ut, tincidunt at mi. Suspendisse ac massa id dui accumsan eleifend commodo nec elit. Etiam non urna sit amet magna ultrices laoreet. Sed sit amet nisl quis leo ullamcorper ultrices. Donec at turpis enim, ut vulputate velit.</p </div></article>
Improved Semantics: <canvas>Use <canvas></canvas> as a drawable area, where you can define the height and width attributes and use JavaScript to illustrate within the element.http://usplay.jstor.org:8090/sxsw/canvas.html
Mozilla Developer Center Example:<html> <head> <script type="application/x-javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"> <p>This example requires a browser that supports the <a href="http://www.w3.org/html/wg/html5/">HTML5</a> <canvas> feature.</p> </canvas></body> </html>
The text contained within the element tags is fallback text, displayed only when the user's browser does not support the canvas element.
Cool Example of Canvas Element
Online Drawing Tool: http://mrdoob.com/projects/harmony/#fur
Improved Semantics: <video>
Use video to embed various file formats for multimedia without the use of Flash.
Currently, *.ogg and *.mp4 file formats are in use. • *.ogg is the format associated with Open Source Theora encoding• *.mp4 is the format associated with h.264 encoding, which is more heavily patented
Mozilla Developer Center Example:<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> Your browser does not support the <code>video</code> element.</video>
The text contained within the element tags is fallback text, displayed only when the user's browser does not support the video element.
Improved Web Forms in HTML5
New values for type attribute for inputs provide a lot more out of the box functionality:http://www.brucelawson.co.uk/tests/html5-forms-demo.html
JSTOR on HTML5
Utilizing new semantic elements for a JSTOR page, including:• <header>• <footer>• <nav>• <article>
http://usplay.jstor.org:8090/sxsw/index.html
CSS3
• New properties for contemporary aesthetics without images
• More granular, flexible approach to specificity with new Attribute selectors
• Cross-browser support
No more images: border-radius
No more background images to achieve rounded corners! Use the following CSS properties to specify your border radius in pixels:
-moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
How it's used at JSTOR:#tagsContainer { width: 300px; min-height: 100px; margin: 10px 0 0 10px; padding-bottom: 10px; background: #fff; border: 2px solid #57788c; -moz-border-radius-topleft: 25px; -webkit-border-top-left-radius: 25px; -moz-border-radius-topright: 25px; -webkit-border-top-right-radius: 25px; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; }
No more images: text-shadow
Although this was proposed in CSS2, it is finally receiving widespread support with CSS3 implementation:
Examples from CSS3Preview & http://www.howtocreate.co.uk/
p {text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;}
p {color: white; background-color: white; text-shadow: black 2px 2px 5px;}
No more images: Opacity
Achieve multiple opacities of a single hue with CSS Opacity.
Example from CSS3:<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div> <div style="background: rgb(255, 0, 0) ; opacity: 0.6;"></div> <div style="background: rgb(255, 0, 0) ; opacity: 0.8;"></div> <div style="background: rgb(255, 0, 0) ; opacity: 1;"></div>
Improved Specificity with Attribute Selectors
Leveraging elements' attributes to gain more flexibility in CSS specificity
Using id as en example, we can:
id^="ma" Target elements whose id begins with "ma"id$="nt" Target elements whose id ends with "nt"id*="ain" Target elements whose id contains "ain"
For instance, any of these selectors could be used to target <div id="mainContent"> Only the second would target <div id="content">The first and third would both target <div id="main">
How does your Browser Stack Up?
Cool Test for CSS3 Selector Performance:http://tools.css3.info/selectors-test/test.html
Other Resources for CSS3 Support and Compliance Info:
QuirksMode CSS Compliance Charthttp://www.quirksmode.org/css/contents.html
Smashing Magazine (linked article has cutting edge CSS3 applications)
http://www.smashingmagazine.com/2010/01/25/the-new-hotness-using-css3-visual-effects/
HTML5 and CSS3 Support Charthttp://www.findmebyip.com/litmus/#target-selector
Hold the Cocoa: iPhone Developmentwith only HTML, CSS, and JavaScript
Web Apps as a New Way of Mobile Development• Utilizing commonly known languages to rapidly develop,
test, and launch mobile apps • HTML Provides the structural layer• CSS Provides the presentational layer • JavaScript provides the behavior layer
o JQTouch
JQTouch jQuery Library for iPhone
http://www.jqtouch.com/• jQuery based JavaScript library optimized for iPhone
display• Link to jQTouch .js file and .css file as well as the minified
jQuery library in the head of the document
JQTouch CSS Default Themes
Three nice themes to quickly apply to your app:
Edge to Edge Plastic Metal
JQTouch Functions ready for User
A wide variety of functions for commonly desired mobile app functionality are available in JQTouch out of the box, including:• User Interface layouts• Animations• Callback events• Extensions
jQTouch User Interface Functionality
Lists Web Forms
jQTouch Animations Functionality
Cool animations to switch between screens that mimic native app behavior, including:• Slide• Slide Up• Dissolve• Fade• Flip • Pop• Swap• Cube
jQTouch Extensions
Easy ways to extend your web app to be more like native apps:• Geolocation• Offline utility - preserves data from web app for later use
without requiring network connectivity• Floaty bar - nice information bubble which floats from the top
of the interface to guide users
Test your App with TestiPhone
Once you've utilized all these handy jQTouch features and completed development on your app, you can test it on your phone or online by going to http://testiphone.com and simply entering your URL in the test bar.
Pros and Cons of Native and Web AppsNative App Web App
Cosmetics
Functionality
Ease of Development
Ease of Testing
Ease of Distribution
Ease of Payment
Web Accessibility Gone Wild
By Jared Smith, WebAIM• The myth of the "Accessible Website"• Can you have too much Accessibility?• Build your site once, in an Accessible Manner• Alt Text Usage• CAPTCHA Usage• The more help text, the less accessible the site• Screenreaders do JavaScript• Bullet-proof Web Design• Balance Cognitive Load and Functionality• Don't sweat the small stuff
The Myth of The Accessible Website
• Doing away with the idea that a site is either "Accessible" or "Inaccessible" o Always improvements to be made on any siteo Constantly, actively seeking to improve accessibility
• Accessibility is about more than blindnesso Other types of impairments that get overlooked:
Mobility impairments Cognitive impairments
• Standards compliant ≠ Accessibleo Passing an automated test doesn't mean your site is accessibleo Holistic, human approach to accessibility, ideally including user testing
• Accessible ≠ Uglyo An Accessible, Ugly website is uselesso Strive to make beautiful, semantic sites and optimize for Accessibility
Can you have too much Accessibility?
• Check to see if superfluous accessibility tools are signaling that your site needs an entirely different implementationo Too many workaround and accommodations indicates poor design
• Partial or incorrect accessibility can be worse than no accessibility at allo Making minor changes or partial optimizations can make things even worse
i.e. poor accesskey implementation
• Monitor at what point the accessibility measures taken become counterintuitiveo At what point have you made your content more difficult to consume?
Build it Once, Build it Accessible
If you're building an extra version of your site to be "Accessible", you're doing it wrong.
The design and implementation should be reevaluated if this seems necessary.
Proper Use of Alt Text
• Represent both the content & function of image• Keep in mind how browsers render alt text
differentlyo If your image doesn't load, this text may look quite different cross-browser
• When in doubt, focus on content & functionalityo Avoid extraneous details in the alt text where it doesn't provide great benefit
• Images as the sole content within a link must have alt texto Otherwise, screen reader users will have less information about what they are clicking
on
• Avoid redundant alt texto Often, phrases like "Image of" or "Photo of" provide little descriptive value to the user
Proper use of CAPTCHA
• Overkill for the vast majority of situationso Very few cases warrant this level of security o Weigh benefit of security with huge accessibility costs
• reCaptcha as best option when a captcha is essential for securityo Best available option for situations where CAPTCHA technology is essential o http://recaptcha.net/
The More Help Text, The Less Accessible
If you have to explain it, you probably did it wrong...
Help text complicates and interface which was likely already too complex if it seemed to need help text.
There is an inverse correlation between the inherent usability of a webpage and the amount of help text required.
Screenreaders do JavaScript, Too!
90% of screen reader users have JavaScript enabled
Keeping this in mind, you should not plan on the non-JavaScript version being the "Accessible" version.
Accessibility optimizations should be integrated with your development, not parallel to it.
Bullet-proof Web Design
• Accept that you cannot control presentation beyond user preferences
• Do things to optimize experience regardless o Avoid very short or long line lengthso Focus on content o Semantic structure o Alt text on imageso Logical ordering of content
Balance Cognitive Load & Functionality
Striking a happy balance between providing enough functionality and
overwhelming the user
Don't Sweat the Small Stuff
• Use <acronym> and <abbr> only for the first instance of each term
• Use <fieldset> and <legend> even where not critical visually to ensure clarity of forms
Bear in mind that screenreader users are comfortable in the environment, and things like overuse of definition tags may only annoy them...
What Guys are Doing to Get More Girls in Tech!
A panel discussing approaches men in the tech community can use to draw more women into the field.
Kailya Hamlin, Author of She's Geeky
David Eaves, Entrepreneur
Kevin Marks, VP Web Services @ BT
Obie Fernandez, CEO & Founder @ Hashrocket
Brandon Sheets, New Media Consultant @ tenpeach
Getting More Women Into the Field
• Encouraging girls to get interested in math, science, and technology at young ages.
• Encouraging women to apply for jobs• Helping to put an end to resumé skew
o Study showed that women tend to underestimate their skill level when applying to tech jobs, whereas men tend to overestimate their skill level, which results in skewed hiring.
Keeping Women in the Field
• Maintaining Open Source communities that are welcoming to womeno Obie Fernandez spoke of a recent shift in the Rails community making it hostile to many, and to
women in particular. He contrasted this with the Ruby community, known for being hospitable and welcoming to all talented individuals...
• Avoiding creating or participating in inappropriate or hostile environmentso CouchDB presentation at Golden Gate Ruby Conference
Presentation featuring inappropriate (pornographic) content makes clear statements about the environment in which that community operates, forcing out female talent and gaining a bad reputation.
• Be the change you wish to seeo If you see a tech community you believe in failing to live up to these standards, advocate for
change
THANKS!
