What I brought back from Austin
Download as PPT, PDF1 like433 views
The document discusses various topics from the South by Southwest 2010 conference, including iPhone development using HTML/CSS/JavaScript via frameworks like JQTouch, improved web accessibility and semantics in HTML5, and new possibilities with CSS3 properties without using images. It provides examples of using new HTML5 semantic elements like <header>, <footer>, <nav>, <article>, <canvas>, and <video>, as well as features of CSS3 like rounded corners, drop shadows, opacity, and improved specificity with attribute selectors.
What I brought back from Austin
- 1. What I brought back from Austin South by Southwest 2010
- 2. 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
- 3. HTML5 Improved Semantics through new elements Improved Web Forms JSTOR On HTML5
- 4. 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>
- 5. 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>
- 6. 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>
- 7. 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>
- 8. 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.
- 9. Cool Example of Canvas Element Online Drawing Tool: http://mrdoob.com/projects/harmony/#fur
- 10. 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.
- 11. 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
- 12. JSTOR on HTML5 Utilizing new semantic elements for a JSTOR page, including: <header> <footer> <nav> <article> http://usplay.jstor.org:8090/sxsw/index.html
- 13. CSS3 New properties for contemporary aesthetics without images More granular, flexible approach to specificity with new Attribute selectors Cross-browser support
- 14. 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; }
- 15. 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;}
- 16. 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>
- 17. 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">
- 18. 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 Chart http://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 Chart http://www.findmebyip.com/litmus/#target-selector
- 19. Hold the Cocoa: iPhone Development with 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 JQTouch
- 20. 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
- 21. JQTouch CSS Default Themes Three nice themes to quickly apply to your app: Edge to Edge Plastic Metal
- 22. 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
- 23. jQTouch User Interface Functionality Lists Web Forms
- 24. jQTouch Animations Functionality Cool animations to switch between screens that mimic native app behavior, including: Slide Slide Up Dissolve Fade Flip Pop Swap Cube
- 25. 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
- 26. 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.
- 27. Pros and Cons of Native and Web Apps Native App Web App Cosmetics Functionality Ease of Development Ease of Testing Ease of Distribution Ease of Payment
- 28. 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
- 29. The Myth of The Accessible Website Doing away with the idea that a site is either "Accessible" or "Inaccessible" Always improvements to be made on any site Constantly, actively seeking to improve accessibility Accessibility is about more than blindness Other types of impairments that get overlooked: Mobility impairments Cognitive impairments Standards compliant ≠ Accessible Passing an automated test doesn't mean your site is accessible Holistic, human approach to accessibility, ideally including user testing Accessible ≠ Ugly An Accessible, Ugly website is useless Strive to make beautiful, semantic sites and optimize for Accessibility
- 30. Can you have too much Accessibility? Check to see if superfluous accessibility tools are signaling that your site needs an entirely different implementation Too many workaround and accommodations indicates poor design Partial or incorrect accessibility can be worse than no accessibility at all 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 counterintuitive At what point have you made your content more difficult to consume?
- 31. 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.
- 32. Proper Use of Alt Text Represent both the content & function of image Keep in mind how browsers render alt text differently If your image doesn't load, this text may look quite different cross-browser When in doubt, focus on content & functionality 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 text Otherwise, screen reader users will have less information about what they are clicking on Avoid redundant alt text Often, phrases like "Image of" or "Photo of" provide little descriptive value to the user
- 33. Proper use of CAPTCHA Overkill for the vast majority of situations Very few cases warrant this level of security Weigh benefit of security with huge accessibility costs reCaptcha as best option when a captcha is essential for security Best available option for situations where CAPTCHA technology is essential http://recaptcha.net/
- 34. 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.
- 35. 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.
- 36. Bullet-proof Web Design Accept that you cannot control presentation beyond user preferences Do things to optimize experience regardless Avoid very short or long line lengths Focus on content Semantic structure Alt text on images Logical ordering of content
- 37. Balance Cognitive Load & Functionality Striking a happy balance between providing enough functionality and overwhelming the user
- 38. 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...
- 39. 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
- 40. 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 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.
- 41. Keeping Women in the Field Maintaining Open Source communities that are welcoming to women 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 environments 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 see If you see a tech community you believe in failing to live up to these standards, advocate for change
- 42. THANKS!