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