How to be Awesome with Emerging Technologies [SUNYCUAD]

Demonstrate ways to curate content, present information, collaborate with coworkers, and make things interesting using mad skills and disruptive technologies.

Slidedeck from SUNYCUAD in Lake Placid, NY, June 2014. Includes speaker notes with links to all technologies listed.

Transcript

1. HOW TO BE
   EMERGING TECHNOLOGY
   AWESOME
   RENEGADE ELEMENT
   ROBIN SMAIL
   SUNYCUAD L AKE PL ACID, NY JUNE 2014
   WITH
   

   View Slide

2. • OUTSPOKEN
   • USER EXPERIENCE
   • GENERALIST
   • BROWNCOAT
   

   View Slide

3. WEB PROFESSIONALS ARE A
   

   SWISS ARMY
   KNIFE
   — AMANDA COSTELLO
   

   @AMANDAESQUE
   

   View Slide

4. the challenge
   Demonstrate ways to curate content, present
   information, collaborate with coworkers, and
   make things interesting using mad skills and
   disruptive technologies.!
   Go!
   

   View Slide

5. teh twitters
   

   View Slide

6. twitter analytics
   Twitter offers analytics on followers and timeline activity for your account, without having to sign up for advertising.!
   !
   http://ads.twitter.com/login
   

   View Slide

7. twitter analytics
   Additional mentions, follows, unfollows and popular tweet information.
   

   View Slide

8. twitter archive
   How do I request my twitter archive? via your Twitter settings page.!
   !
   https://twitter.com/settings/account
   

   View Slide

9. my mashup geek crush
   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/
   

   View Slide

10. twitter archive via gDrive
    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
    

    View Slide

11. mooc archive via gDrive
    Example of MOOC (massive open online course) archiving demonstrates each student’s participation, class activity, and
    levels of interaction.!
    

    View Slide

12. event archive via gDrive
    Example of event archiving using Hawksey’s basic script for an event’s twitter account..
    

    View Slide

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
    

    View Slide

14. twylah
    Twitter aggregator example, expanded.!
    !
    http://www.twylah.com/

    Example (mine): http://www.twylah.com/robin2go
    

    View Slide

15. snap bird
    Use Snap Bird to search beyond Twitter’s 7 day history.!
    !
    http://snapbird.org/!
    

    View Slide

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/!
    

    View Slide

17. content curation
    

    View Slide

18. epilogger
    A real time event archiving application, aggregating tweets, blog posts, media, geo-checkins, links, and stats.!
    !
    http://epilogger.com/!
    !
    

    View Slide

19. eventifier
    Archive all your event photos, videos, slides, tweets, convos and much more, using event hashtag.!
    !
    http://eventifier.com/
    

    View Slide

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/
    

    View Slide

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/!
    

    View Slide

22. digital hoarding
    

    View Slide

23. instapaper
    Web based, with mobile apps that save web pages and news for offline reading.!
    !
    http://www.instapaper.com/!
    

    View Slide

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/!
    

    View Slide

25. evernote
    Capture ideas, images, notes; access anywhere; find things fast. OCR scans of images too. Freaking awesome!!
    !
    (app, mobile app) http://evernote.com/
    

    View Slide

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/
    

    View Slide

27. gimme bar
    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
    

    View Slide

28. snapguide
    Make and share how to guides for just about anything. Available on iPad, phone.!
    !
    http://snapguide.com/!
    

    View Slide

29. webpage screenshot
    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/!
    !
    

    View Slide

30. keepvid
    Download and save videos from the web (remember to use your technology for good, not evil ).!
    !
    http://keepvid.com/
    

    View Slide

31. dropbox
    Extra space in the cloud; share large files with others. (Apps for iPhone, iPad, Android, Blackberry)!
    !
    http://www.dropbox.com/!
    

    View Slide

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/
    

    View Slide

33. design
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

37. adobe kuler
    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/
    

    View Slide

38. colour lovers
    Open community for creating color trends, palettes, and patterns for designers to explore.!
    !
    http://www.colourlovers.com/
    

    View Slide

39. placekitten
    Allows you to specify image height and width to get perfectly sized placeholder images...of kittens!!
    !
    http://placekitten.com/
    

    View Slide

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/
    

    View Slide

41. bacon ipsum
    Bacon ipsum: a meatier lorem ipsum for placeholder text!
    !
    http://baconipsum.com/
    

    View Slide

42. pixlr
    Free online photo editor allows you to edit, adjust, and filter images; also available as mobile app
    !
    http://pixlr.com/
    

    View Slide

43. social media image maker
    Great tool to resize and retouch your social media images.!
    !
    http://www.autreplanete.com/ap-social-media-image-maker/!
    

    View Slide

44. typography
    

    View Slide

45. what the font
    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/!
    

    View Slide

46. identifont
    Massive directory of fonts, searchable by multiple options -- appearance, name, similarity, picture, designer, or fontsets.!
    !
    http://www.identifont.com/
    

    View Slide

47. font squirrel
    Fonts that are 100% free for commercial use. Our “go to” site for fonts.!
    !
    http://www.fontsquirrel.com/
    

    View Slide

48. font combos
    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
    

    View Slide

49. typetester
    An online application for comparison of fonts for the screen.!
    !
    http://www.typetester.org/!
    

    View Slide

50. developers
    

    View Slide

51. MQtest.io
    A site that displays which media queries your current browser supports.!
    !
    http://mqtest.io.net/
    

    View Slide

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!
    

    View Slide

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/
    

    View Slide

54. brad frost’s ish. 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/!
    

    View Slide

55. code anywhere
    A free browser-based code editor with an integrated ftp client and syntax highlighting, supporting html, php, JavaScript, css,
    xml.!
    !
    https://codeanywhere.net/
    

    View Slide

56. css desk
    Online html/css sandbox. Experiment, see the results live, and share code with others.!
    !
    http://cssdesk.com/
    

    View Slide

57. chop app
    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/
    

    View Slide

58. accessibility
    

    View Slide

59. wave toolbar
    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
    

    View Slide

60. jim thatcher’s favelets
    Allows spot checking for skip navigation, headers, images and more.!
    !
    jimthatcher.com/favelets/!
    

    View Slide

61. web developer
    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/
    

    View Slide

62. juicy studio toolbar
    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/
    

    View Slide

63. process
    

    View Slide

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/!
    

    View Slide

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/!
    !
    

    View Slide

66. idonethis
    An email-based productivity log that motivates and tracks productivity with a daily email reminder.!
    !
    http://idonethis.com/!
    

    View Slide

67. project of how
    An open interactive library of techniques and insights, that makes your creative output better.!
    !
    http://projectofhow.com/
    

    View Slide

68. critical knowledge
    

    View Slide

69. social media policy
    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!
    

    View Slide

70. BE AWESOME.
    RENEGADE ELEMENT
    ROBIN SMAIL
    @ROBIN2GO
    ROBIN2GO.NET
    ROBIN2GO@GMAIL.COM
    ABOUT.ME/ROBIN2GO
    

    View Slide