Your SlideShare is downloading. ×
0
Let’s Build Something <ul><li>[email_address] </li></ul><ul><li>Web Services Manager, ICI </li></ul><ul><li>@coburnicus </...
Our Task We are going to build a website to share the work we do here today. The slides, tweets and connect those people w...
Requirements  <ul><li>Accessible </li></ul><ul><li>Responsive </li></ul><ul><li>No programming (it’s Sunday morning) </li>...
 
Our toolbox <ul><li>Chrome web browser </li></ul><ul><li>That’s it. Just Chrome </li></ul>
Using Chrome <ul><li>Chrome Element Inspector (comes with it) </li></ul><ul><li>Web Developer tool bar (dev’s best friend)...
Accessibility  Text “ Web accessibility refers to the  inclusive practice  of making websites usable by  people  of all ab...
Degrading Gracefully “ I like an escalator because an escalator can never break, it can only become stairs. There would ne...
WCAG 2.0 <ul><li>Perceivable, Operable, Understandable, Robust  </li></ul><ul><li>http://www.w3.org/TR/WCAG20/ </li></ul><...
Accessibility  <ul><li>The best strategy is probably not to learn to build accessible websites... </li></ul><ul><li>...It’...
Platform requirements <ul><li>Accessible </li></ul><ul><li>Hosted/Managed  </li></ul><ul><li>Customizable </li></ul><ul><l...
Platform Options <ul><li>SquareSpace </li></ul><ul><li>Drupal (via Drupal Garden) </li></ul><ul><li>Blogger </li></ul><ul>...
Platform Eliminations <ul><li>SquareSpace (not free) </li></ul><ul><li>Drupal (immature, not responsive) </li></ul><ul><li...
Is WordPress Accessible?  <ul><li>You could run WCAG, Bobby, 508 tests </li></ul><ul><li>You learn how to read code and te...
Responsive Design <ul><li>Coined by Ethan Marcotte </li></ul><ul><li>One codebase that “responds” to the screensize and ca...
Wordpress Themes <ul><li>Our requirements: </li></ul><ul><li>Customizable (for branding) </li></ul><ul><li>Responsive  (fo...
Customize Header <ul><li>Strip out what isn’t needed </li></ul><ul><li>Change images to match our brand </li></ul><ul><li>...
Customize Background <ul><li>Colors for branding </li></ul><ul><li>Patterns are ...fun I guess </li></ul>
Customize Layout <ul><li>How Many columns? </li></ul><ul><li>Use sidebar for social media goodness </li></ul>
Widgets  <ul><li>Use them sparingly for effectiveness  </li></ul><ul><li>I think twitter makes a nice news feed or convers...
Add pages <ul><li>Use Order to place them in menu </li></ul><ul><li>Use “Parent” to create dropdowns </li></ul><ul><li>Use...
Make a page  “the front page” hack “the front page” hack <ul><li>Give the page you want to be the front page no title. </l...
Let’s make this a social web app <ul><li>I heard those are hot now </li></ul><ul><li>Many services play nice with each oth...
Wufoo <ul><li>It’s a easy way to collect data </li></ul><ul><li>We’ll use it to collect the names, twitter handles, home s...
Extra Extra Credit <ul><li>Now we’ll export the data from wufoo and import it into Google Fusion Tables. </li></ul><ul><li...
Fin. <ul><li>website and slides at icidemo.wordpress.com </li></ul><ul><li>I am @coburnicus on twitter  </li></ul><ul><li>...
Upcoming SlideShare
Loading in...5
×

Aucd ppt

334

Published on

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
334
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Aucd ppt"

  1. 1. Let’s Build Something <ul><li>[email_address] </li></ul><ul><li>Web Services Manager, ICI </li></ul><ul><li>@coburnicus </li></ul><ul><li>tweet this at #aucd_web </li></ul><ul><li>These slides can be found at: </li></ul>
  2. 2. Our Task We are going to build a website to share the work we do here today. The slides, tweets and connect those people who attended.
  3. 3. Requirements <ul><li>Accessible </li></ul><ul><li>Responsive </li></ul><ul><li>No programming (it’s Sunday morning) </li></ul><ul><li>Cost Nothing (I forgot my wallet). </li></ul><ul><li>Needs to be done in less than 2 hours. </li></ul>
  4. 5. Our toolbox <ul><li>Chrome web browser </li></ul><ul><li>That’s it. Just Chrome </li></ul>
  5. 6. Using Chrome <ul><li>Chrome Element Inspector (comes with it) </li></ul><ul><li>Web Developer tool bar (dev’s best friend) </li></ul><ul><li>Eye Dropper ext for color values </li></ul><ul><li>Pixlr for light graphics editing </li></ul>
  6. 7. Accessibility Text “ Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites a re correctly designed, developed and edited, all users can have equal access to information and functionality.” - http://en.wikipedia.org/wiki/Web_acces sibility
  7. 8. Degrading Gracefully “ I like an escalator because an escalator can never break, it can only become stairs. There would never be an escalator temporarily out of order sign, only an escalator temporarily stairs. Sorry for the convenience.” - Mitch Hedberg
  8. 9. WCAG 2.0 <ul><li>Perceivable, Operable, Understandable, Robust </li></ul><ul><li>http://www.w3.org/TR/WCAG20/ </li></ul><ul><li>Spoiler Alert: </li></ul><ul><li>It’s really boring. </li></ul><ul><li>Like 13,967 words boring. </li></ul>
  9. 10. Accessibility <ul><li>The best strategy is probably not to learn to build accessible websites... </li></ul><ul><li>...It’s probably better to learn how to pick stuff built by people who do know how to build accessible websites </li></ul>
  10. 11. Platform requirements <ul><li>Accessible </li></ul><ul><li>Hosted/Managed </li></ul><ul><li>Customizable </li></ul><ul><li>Robust (plugins, social goodies) </li></ul><ul><li>Base mode is free </li></ul>
  11. 12. Platform Options <ul><li>SquareSpace </li></ul><ul><li>Drupal (via Drupal Garden) </li></ul><ul><li>Blogger </li></ul><ul><li>Wordpress </li></ul>
  12. 13. Platform Eliminations <ul><li>SquareSpace (not free) </li></ul><ul><li>Drupal (immature, not responsive) </li></ul><ul><li>Blogger (Not robust enough) </li></ul><ul><li>Wordpress (You’re the one for us) </li></ul>
  13. 14. Is WordPress Accessible? <ul><li>You could run WCAG, Bobby, 508 tests </li></ul><ul><li>You learn how to read code and test </li></ul><ul><li>or </li></ul><ul><li>Let me google that for you. </li></ul>
  14. 15. Responsive Design <ul><li>Coined by Ethan Marcotte </li></ul><ul><li>One codebase that “responds” to the screensize and capabilities of a device. </li></ul><ul><li>It’s important because less and less of browsing is on traditional computers. </li></ul><ul><li>www.bostonglobe.com </li></ul>
  15. 16. Wordpress Themes <ul><li>Our requirements: </li></ul><ul><li>Customizable (for branding) </li></ul><ul><li>Responsive (for devices and general-badassery™) </li></ul>
  16. 17. Customize Header <ul><li>Strip out what isn’t needed </li></ul><ul><li>Change images to match our brand </li></ul><ul><li>We can use Pixlr , a free web app to do very light graphics ending. </li></ul>
  17. 18. Customize Background <ul><li>Colors for branding </li></ul><ul><li>Patterns are ...fun I guess </li></ul>
  18. 19. Customize Layout <ul><li>How Many columns? </li></ul><ul><li>Use sidebar for social media goodness </li></ul>
  19. 20. Widgets <ul><li>Use them sparingly for effectiveness </li></ul><ul><li>I think twitter makes a nice news feed or conversation tool. </li></ul>
  20. 21. Add pages <ul><li>Use Order to place them in menu </li></ul><ul><li>Use “Parent” to create dropdowns </li></ul><ul><li>Use the more subtle “share button” </li></ul>
  21. 22. Make a page “the front page” hack “the front page” hack <ul><li>Give the page you want to be the front page no title. </li></ul><ul><li>Under Settings -> Reading pick the blank page </li></ul>
  22. 23. Let’s make this a social web app <ul><li>I heard those are hot now </li></ul><ul><li>Many services play nice with each other </li></ul><ul><li>Its done with something called API’s </li></ul><ul><li>Application Programming Interface </li></ul><ul><li>Wordpress also uses something called “short codes” http://en.support.wordpress.com/shortcodes/ </li></ul>
  23. 24. Wufoo <ul><li>It’s a easy way to collect data </li></ul><ul><li>We’ll use it to collect the names, twitter handles, home states, and emails of all of us. </li></ul><ul><li>Then we’ll use short codes to import into WordPress. </li></ul><ul><li>For extra credit we will connect it to another service (MailChimp). Why not? </li></ul>
  24. 25. Extra Extra Credit <ul><li>Now we’ll export the data from wufoo and import it into Google Fusion Tables. </li></ul><ul><li>Then we’ll visualize it over a map of the US. </li></ul>
  25. 26. Fin. <ul><li>website and slides at icidemo.wordpress.com </li></ul><ul><li>I am @coburnicus on twitter </li></ul><ul><li>Disclaimer: I am a very foul-mouthed twitter user. </li></ul><ul><li>email [email_address] </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×