This document provides tips and tools for curating content, presenting information, collaborating, and making things interesting using emerging technologies. It summarizes various social media tools, content curation tools, design tools, developer tools, and offers a 12-word social media policy. The document emphasizes being a generalist and using skills and technologies in a disruptive and renegade manner.
4. thechallenge
Demonstrate ways to curate content, present
information, collaborate with coworkers, and
make things interesting using mad skills and
disruptive technologies.!
Go!
6. twitteranalytics
Twitter offers analytics on followers and timeline activity for your account, without having to sign up for advertising.!
!
http://ads.twitter.com/login
8. twitterarchive
How do I request my twitter archive? via your Twitter settings page.!
!
https://twitter.com/settings/account
9. mymashupgeekcrush
Martin is a technologist from Scotland who is interested in EdTech, mashups, google apps script, datamining/wrangling…
He’s done all the work to create a live twitter archive so you don’t have to; this is the basic link to all his google apps script
work.!
!
http://mashe.hawksey.info/category/google/google-apps-script/
10. twitterarchiveviagDrive
Martin Hawksey how to: http://mashe.hawksey.info/2013/01/sync-twitter-archive-with-google-drive/
Synch and host your Twitter archive on Google Drive using Google Apps script. Accesses the Twitter API and auto update
your twitter archive in a Google Spreadsheet. Store/host it on Google Drive for public access.!
blogpost (start here): http://mashe.hawksey.info/2013/01/sync-twitter-archive-with-google-drive/
google spreadsheet (make copy): https://docs.google.com/spreadsheet/ccc?
key=0AqGkLMU9sHmLdHRtbUF4OGh6ZnBZeFVsSjNhZlc1Z2c#gid=1
how to video (watch this): http://www.youtube.com/watch?v=ce8G3sEOjAY
11. moocarchiveviagDrive
Example of MOOC (massive open online course) archiving demonstrates each student’s participation, class activity, and
levels of interaction.!
13. twylah
Twitter aggregator breaks down your twitterstream into relevant topics; can curate topics and make them sticky. Can also be
used for events. !
!
http://www.twylah.com/
Example (mine): http://www.twylah.com/robin2go
15. snapbird
Use Snap Bird to search beyond Twitter’s 7 day history.!
!
http://snapbird.org/!
16. buffer
Buffer allows scheduling tweets for delivery, as well as making it easy to share what you’re reading and connect to many of
your applications, leveraging your social media presence.!
!
http://bufferapp.com/!
18. epilogger
A real time event archiving application, aggregating tweets, blog posts, media, geo-checkins, links, and stats.!
!
http://epilogger.com/!
!
19. eventifier
Archive all your event photos, videos, slides, tweets, convos and much more, using event hashtag.!
!
http://eventifier.com/
20. tagboard
Live collections of social media posted with hashtags, arranged in a dynamic, visual mosaic. Can get a customizable hub that
matches your brand.!
!
https://tagboard.com/
21. storify
Make the web tell a story. Collect media; publish on Storify; embed anywhere; share and notify sources; go viral. BAM!!
!
http://storify.com/!
23. instapaper
Web based, with mobile apps that save web pages and news for offline reading.!
!
http://www.instapaper.com/!
24. pocket
Another tool for offline access of web pages and news; pocket is more graphically based option. Also both web based and
with mobile access.!
!
http://getpocket.com/!
25. evernote
Capture ideas, images, notes; access anywhere; find things fast. OCR scans of images too. Freaking awesome!!
!
(app, mobile app) http://evernote.com/
26. ifttt
A service that lets you create powerful connections (recipes) between applications (channels) with one simple “if this, then
that” statement. Get as simple or as complex as you need or want. HOLY FREAKING AMAZING.!
!
http://ifttt.com/
27. gimmebar
Gimme bar allows you to store items in a personal library in the cloud, organize it, and share it with the world. Can also view
other user’s public libraries.!
!
https://gimmebar.com/!
my gifs gimmebar: https://gimmebar.com/loves/robin2go
28. snapguide
Make and share how to guides for just about anything. Available on iPad, phone.!
!
http://snapguide.com/!
29. webpagescreenshot
Google Chrome extension. Looks cheesy as hell, but worth it’s weight in gold to capture entire web pages or webcams.!
!
http://www.webpagescreenshot.info/!
!
30. keepvid
Download and save videos from the web (remember to use your technology for good, not evil </PSA disclaimer>).!
!
http://keepvid.com/
31. dropbox
Extra space in the cloud; share large files with others. (Apps for iPhone, iPad, Android, Blackberry)!
!
http://www.dropbox.com/!
32. cheatsheet
A mac-based app that lists all active short cuts of the current application you are working in. Simple as that.!
!
http://www.grandtotal.biz/CheatSheet/
34. gridfox
A grid layout Firefox extension which overlays a grid on any website (works especially well with Firebug plugin to create
gridfox + firebug aligned sites)!
!
http://www.puidokas.com/portfolio/gridfox/
35. firebug
A web development Firefox extension, allows you to inspect and edit html, tweak css, debug JavaScript, find errors, view and
manage cookies, and more. (works especially well with GridFox.)!
!
http://getfirebug.com/
36. gliffy
Web-based diagram editor, allows you to create and share flowcharts, network diagrams, user interface designs, tech
drawings online. !
!
http://www.gliffy.com/
37. adobekuler
Create and share color themes, edit color themes created by others, collaborate with the community. Explore by newest,
most popular, highest rated.!
!
http://kuler.adobe.com/!
tutorial: https://kuler.adobe.com/links/tutorial/
38. colourlovers
Open community for creating color trends, palettes, and patterns for designers to explore.!
!
http://www.colourlovers.com/
39. placekitten
Allows you to specify image height and width to get perfectly sized placeholder images...of kittens!!
!
http://placekitten.com/
40. placezombies
When kittens won’t do. Allows you to specify image height and width to get perfectly sized placeholder images...of zombies!!
!
http://placezombies.com/
45. whatthefont
Matches your image of an unknown font against a font database — or connect with other font-o-philes in the forums.!
!
http://www.myfonts.com/WhatTheFont/!
46. identifont
Massive directory of fonts, searchable by multiple options -- appearance, name, similarity, picture, designer, or fontsets.!
!
http://www.identifont.com/
47. fontsquirrel
Fonts that are 100% free for commercial use. Our “go to” site for fonts.!
!
http://www.fontsquirrel.com/
48. fontcombos
common font pairings — pdf, iphone app!
!
iphone app: http://bonfx.com/font-combinations-app/
blog post: http://bonfx.com/19-top-fonts-in-19-top-combinations/!
19 Top Font Combos pdf: http://bonfx.com/wp-content/uploads/2009/09/19-top-fonts-in-19-top-combinations-chart.pdf
51. MQtest.io
A site that displays which media queries your current browser supports.!
!
http://mqtest.io.net/
52. screensiz.es
An extensive database of screen sizes for popular smartphones, tables and monitors currently available; useful for web
developers designing responsive apps to work across various screensizes. !
!
http://screensiz.es!
53. ami.responsivedesign.is
See how your site looks on multiple common screen sizes. This 4-in-1 viewport tool shows how your site looks on desktop,
laptop, iPad & iPhones.!
!
http://ami.responsivedesign.is/
54. bradfrost’sish.2.0
ish. — yet another viewport resizing tool; focuses on general ranges (small-ish. medium-ish. large-ish.), rather than popular
device widths. “Disco Mode” randomly contorts the viewport to all sorts of random values, which is important to test the
resiliency of your designs.!
!
http://bradfrostweb.com/demo/ish/!
55. codeanywhere
A free browser-based code editor with an integrated ftp client and syntax highlighting, supporting html, php, JavaScript, css,
xml.!
!
https://codeanywhere.net/
57. chopapp
Collaborative space to post code, write notes, share feedback. A little app that lets people slice up bad code and share their
feedback to help put it back together.!
!
http://chopapp.com/
59. wavetoolbar
Web Accessibility Evaluation Tool — free web accessibility evaluation tool shows the original web page with embedded icons
and indicators that reveal the accessibility of the page. Use on URL, file upload, or straight HTML code.!
!
wave.webaim.org/toolbar
61. webdeveloper
Extension adds various web developer tools to a browser; available for Chrome, Firefox and Opera, and will run on any
platform that these browsers support including Windows, OS X and Linux. http://chrispederick.com/work/web-developer/!
!
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
62. juicystudiotoolbar
A toolbar Firefox add-on from Gez Lemon, shows ARIA live regions, ARIA landmarks and roles, provides a table inspector
and a color contrast analyzer.!
!
https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/
64. styletil.es
More than a mood board, less than a full mockup. Style Tiles are a design deliverable consisting of fonts, colors and interface
elements that communicate the essence of a visual brand for the web so you can develop design instead of fixed width.!
!
http://styletil.es/!
65. trello
Web-based project management application that makes it easy for groups to see work in progress, empower them to self
assign project work and get things done by dragging cards across lists to completion. Uses kanban paradigm for managing
projects.!
!
http://trello.com/!
!
69. socialmediapolicy
Don’t lie.
Don’t pry.
Don’t cheat.
Can’t delete.
Don’t steal.
Don’t reveal.
Farris Timimi, M.D., medical director for the Mayo Clinic Center for Social Media.
Best policy ever, boiled down to twelve words. !
!
source: http://socialmedia.mayoclinic.org/2012/04/05/a-twelve-word-social-media-policy/!
slideshare: http://www.slideshare.net/practicalwisdom/12-word-social-media-policy!
Twitter offers analytics on followers and timeline activity for your account, without having to sign up for advertising.
http://ads.twitter.com/login
Additional mentions, follows, unfollows and popular tweet information.
How do I request my twitter archive? via your Twitter settings page.
https://twitter.com/settings/account
Martin is a technologist from Scotland who is interested in EdTech, mashups, google apps script, datamining/wrangling… He’s done all the work to create a live twitter archive so you don’t have to; this is the basic link to all his google apps script work.
http://mashe.hawksey.info/category/google/google-apps-script/
Synch and host your Twitter archive on Google Drive using Google Apps script. Accesses the Twitter API and auto update your twitter archive in a Google Spreadsheet. Store/host it on Google Drive for public access.
blogpost (start here): http://mashe.hawksey.info/2013/01/sync-twitter-archive-with-google-drive/google spreadsheet (make copy): https://docs.google.com/spreadsheet/ccc?key=0AqGkLMU9sHmLdHRtbUF4OGh6ZnBZeFVsSjNhZlc1Z2c#gid=1how to video (watch this): http://www.youtube.com/watch?v=ce8G3sEOjAY
Example of MOOC (massive open online course) archiving demonstrates each student’s participation, class activity, and levels of interaction.
Example of event archiving using Hawksey’s basic script for an event’s twitter account..
Twitter aggregator breaks down your twitterstream into relevant topics; can curate topics and make them sticky. Can also be used for events.
http://www.twylah.com/Example (mine): http://www.twylah.com/robin2go
Twitter aggregator example, expanded.
http://www.twylah.com/Example (mine): http://www.twylah.com/robin2go
Use Snap Bird to search beyond Twitter’s 7 day history.
http://snapbird.org/
Buffer allows scheduling tweets for delivery, as well as making it easy to share what you’re reading and connect to many of your applications, leveraging your social media presence.
http://bufferapp.com/
A real time event archiving application, aggregating tweets, blog posts, media, geo-checkins, links, and stats.
http://epilogger.com/
Archive all your event photos, videos, slides, tweets, convos and much more, using event hashtag.
http://eventifier.com/
Live collections of social media posted with hashtags, arranged in a dynamic, visual mosaic. Can get a customizable hub that matches your brand.
https://tagboard.com/
Make the web tell a story. Collect media; publish on Storify; embed anywhere; share and notify sources; go viral. BAM!
http://storify.com/
Web based, with mobile apps that save web pages and news for offline reading.
http://www.instapaper.com/
Another tool for offline access of web pages and news; pocket is more graphically based option. Also both web based and with mobile access.
http://getpocket.com/
Capture ideas, images, notes; access anywhere; find things fast. OCR scans of images too. Freaking awesome!
(app, mobile app) http://evernote.com/
A service that lets you create powerful connections (recipes) between applications (channels) with one simple “if this, then that” statement. Get as simple or as complex as you need or want. HOLY FREAKING AMAZING.
http://ifttt.com/
Gimme bar allows you to store items in a personal library in the cloud, organize it, and share it with the world. Can also view other user’s public libraries.
https://gimmebar.com/
my gifs gimmebar: https://gimmebar.com/loves/robin2go
Make and share how to guides for just about anything. Available on iPad, phone.
http://snapguide.com/
Google Chrome extension. Looks cheesy as hell, but worth it’s weight in gold to capture entire web pages or webcams.
http://www.webpagescreenshot.info/
Download and save videos from the web (remember to use your technology for good, not evil </PSA disclaimer>).
http://keepvid.com/
Extra space in the cloud; share large files with others. (Apps for iPhone, iPad, Android, Blackberry)
http://www.dropbox.com/
A mac-based app that lists all active short cuts of the current application you are working in. Simple as that.
http://www.grandtotal.biz/CheatSheet/
A grid layout Firefox extension which overlays a grid on any website (works especially well with Firebug plugin to create gridfox + firebug aligned sites)
http://www.puidokas.com/portfolio/gridfox/
A web development Firefox extension, allows you to inspect and edit html, tweak css, debug JavaScript, find errors, view and manage cookies, and more. (works especially well with GridFox.)
http://getfirebug.com/
Web-based diagram editor, allows you to create and share flowcharts, network diagrams, user interface designs, tech drawings online.
http://www.gliffy.com/
Create and share color themes, edit color themes created by others, collaborate with the community. Explore by newest, most popular, highest rated.
http://kuler.adobe.com/
tutorial: https://kuler.adobe.com/links/tutorial/
Open community for creating color trends, palettes, and patterns for designers to explore.
http://www.colourlovers.com/
Allows you to specify image height and width to get perfectly sized placeholder images...of kittens!
http://placekitten.com/
When kittens won’t do. Allows you to specify image height and width to get perfectly sized placeholder images...of zombies!
http://placezombies.com/
Bacon ipsum: a meatier lorem ipsum for placeholder text
http://baconipsum.com/
Free online photo editor allows you to edit, adjust, and filter images; also available as mobile app
http://pixlr.com/
Great tool to resize and retouch your social media images.
http://www.autreplanete.com/ap-social-media-image-maker/
Matches your image of an unknown font against a font database — or connect with other font-o-philes in the forums.
http://www.myfonts.com/WhatTheFont/
Massive directory of fonts, searchable by multiple options -- appearance, name, similarity, picture, designer, or fontsets.
http://www.identifont.com/
Fonts that are 100% free for commercial use. Our “go to” site for fonts.
http://www.fontsquirrel.com/
common font pairings — pdf, iphone app
iphone app: http://bonfx.com/font-combinations-app/blog post: http://bonfx.com/19-top-fonts-in-19-top-combinations/
19 Top Font Combos pdf: http://bonfx.com/wp-content/uploads/2009/09/19-top-fonts-in-19-top-combinations-chart.pdf
An online application for comparison of fonts for the screen.
http://www.typetester.org/
A site that displays which media queries your current browser supports.
http://mqtest.io.net/
An extensive database of screen sizes for popular smartphones, tables and monitors currently available; useful for web developers designing responsive apps to work across various screensizes.
http://screensiz.es
See how your site looks on multiple common screen sizes. This 4-in-1 viewport tool shows how your site looks on desktop, laptop, iPad & iPhones.
http://ami.responsivedesign.is/
ish. — yet another viewport resizing tool; focuses on general ranges (small-ish. medium-ish. large-ish.), rather than popular device widths. “Disco Mode” randomly contorts the viewport to all sorts of random values, which is important to test the resiliency of your designs.
http://bradfrostweb.com/demo/ish/
A free browser-based code editor with an integrated ftp client and syntax highlighting, supporting html, php, JavaScript, css, xml.
https://codeanywhere.net/
Online html/css sandbox. Experiment, see the results live, and share code with others.
http://cssdesk.com/
Collaborative space to post code, write notes, share feedback. A little app that lets people slice up bad code and share their feedback to help put it back together.
http://chopapp.com/
Web Accessibility Evaluation Tool — free web accessibility evaluation tool shows the original web page with embedded icons and indicators that reveal the accessibility of the page. Use on URL, file upload, or straight HTML code.
wave.webaim.org/toolbar
Allows spot checking for skip navigation, headers, images and more.
jimthatcher.com/favelets/
Extension adds various web developer tools to a browser; available for Chrome, Firefox and Opera, and will run on any platform that these browsers support including Windows, OS X and Linux. http://chrispederick.com/work/web-developer/
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
A toolbar Firefox add-on from Gez Lemon, shows ARIA live regions, ARIA landmarks and roles, provides a table inspector and a color contrast analyzer.
https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/
More than a mood board, less than a full mockup. Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web so you can develop design instead of fixed width.
http://styletil.es/
Web-based project management application that makes it easy for groups to see work in progress, empower them to self assign project work and get things done by dragging cards across lists to completion. Uses kanban paradigm for managing projects.
http://trello.com/
An email-based productivity log that motivates and tracks productivity with a daily email reminder.
http://idonethis.com/
An open interactive library of techniques and insights, that makes your creative output better.
http://projectofhow.com/
Best policy ever, boiled down to twelve words.
source: http://socialmedia.mayoclinic.org/2012/04/05/a-twelve-word-social-media-policy/
slideshare: http://www.slideshare.net/practicalwisdom/12-word-social-media-policy