1. posted #WDC14 talk "The Once and Future #IndieWeb" slides: tantek.com/presentations/2014/05/indieweb/?full#cover and notes+Q&A etherpad.mozilla.org/wdc14

    Twitter post 462485392005271552
  2. Thanks @maxine @johnallsopp! Had fun with #WDC14 closing keynote. Everyone has their #indieweb homework assignment. :)

    Twitter post 462409572083585024
  3. great #WDC14 @bbinto talk: bbinto.wordpress.com/2014/04/30/follow-up-3rd-party-footprint/ Removed home page Twitter follow button & JS. Hyperlink sufficient.

    Twitter post 461721877363576832
  4. Markup For People Focused Mobile Communication

    All functionality on web pages and applications starts with markup. The previous post in this series, URLs For People Focused Mobile Communication, documented the various URL schemes for launching the communication apps shown in the mockups, as well as results of testing them on mobile devices. Those tests used minimal markup.

    This post documents and explains that markup, building up element by element from a simple hyperlink to the structure implied by this mockup:

    mobile website icon header

    Or if you want, you may jump directly to the complete markup example.

    A hyperlink provides a way for the user to navigate to other web pages. Using a URL scheme for a communication app, a hyperlink can start a message, resume a conversation, or start an audio/video call. Here's a simple hyperlink that uses the first URL scheme documented in the previous post, sms:

    <a href="sms:user@example.com">txt message</a>

    Live example: txt message

    Activating that live example likely won't do much, as user@example.com does not belong to anyone. Example.com is a domain registered purely for the purpose of examples like this one. To make this hyperlink work, you'd have to use a registered AppleID email address, which would send a txt on iOS, and fallback to email via phone provider on Android.

    Action labels not app names

    I use the link text "txt message" to indicate its user-centered function: the action of creating a txt message, from one human to another.

    Contrast that with the mockup above (which I "built" using an iOS7 home screen folder), which uses the label "Messages", the name of the application it launches.

    This deliberate change from "Messages" (application) to "txt message" (action) reflects the larger purpose of this exercise: people-focused rather than app-focused communication. Subsequent labels follow a similar approach.

    An image hyperlink

    A simple text hyperlink is functional, yet does not provide the immediate association and recognition conveyed by the Messages icon in the mockup. There are two methods of providing an image hyperlink:

    • An <img> element inside the hyperlink
    • A CSS background-image

    The question of when to use markup for an image and when to use CSS is usually easily answered by the question: is the image meaningful content (like a photograph) or purely decorative (like a flourish)? Or by asking, is any meaning lost if the image is dropped?

    The Messages image is neither content nor decorative. It's a button, and it's also a standard iOS user interface element, which means it does convey meaning to those users, above and beyond any text label. Here's the minimum markup for an image hyperlink, with the link text moved into the alt attribute as a fallback:

    <a href="sms:user@example.com">
      <img src="ios7-messages-icon.png" 
           alt="txt message"/>

    Live example:

    txt message

    Image and text hyperlink

    There is a third option, as implied by the mockup, and that is to use both an image and a text label. That's a simple matter of moving the alt text outside the image:

    <a href="sms:user@example.com">
      <img src="ios7-messages-icon.png" 
      txt message

    Live example:

    txt message

    The alt attribute is left deliberately empty since putting anything there would not add to the usability of the link, and could in fact detract from it.

    Unlike the mockup, the link text is next to (instead of underneath) the image, and is blue & underlined. These are all presentational aspects and will be addressed in the next post on CSS for People Focused Mobile Communication.

    A list of communication options

    The mockup also shows multiple communication buttons in a list laid out as a grid. We can assign meaning to the order of the buttons - the site owner's preferred order of communication methods. Thus we use an ordered list to convey that their order is significant. Here's a few image+text links wrapped in list items inside an ordered list:

      <li><a href="sms:user@example.com">
          <img src="ios7-messages-icon.png" 
          txt message
      <li><a href="fb-messenger://user-thread/4">
          <img src="fb-messenger-icon.png" 
          <abbr title="Facebook">FB</abbr> message
      <li><a href="aim:goim?screenname=tantekc&message=hi">
          <img src="aim-icon.png" 
          AIM chat

    Note the use of an <abbr> element to abbreviate "Facebook" just to "FB" to shorten the overall "FB message" link text.

    Live example:

    1. txt message
    2. FB message
    3. AIM chat

    Just as in the previous URLs post, the FB message link uses Zuck's ID, and the AIM chat link uses the same nickname I've had in the sidebar for a while.

    List heading

    The mockup labels the entire grid "Contact" (also deliberately chosen as an action, rather than the "Contacts" application). This makes sense as a heading, and in the context of a home page, a second level heading:


    No need for a separate live example - the subheads above are all <h2> elements. As is this one:

    Putting it all together

    Combining the Contact heading with the previous ordered list, and adding the remaining buttons:

      <li><a href="sms:user@example.com">
          <img src="ios7-messages-icon.png" 
          txt message
      <li><a href="fb-messenger://user-thread/4">
          <img src="fb-messenger-icon.png" 
          <abbr title="Facebook">FB</abbr> message
      <li><a href="aim:goim?screenname=tantekc&message=hi">
          <img src="aim-icon.png" 
          AIM chat
      <li><a href="facetime:user@example.com">
          <img src="facetime-icon.png" 
          FaceTime call
      <li><a href="skype:echo123?call">
          <img src="skype-icon.png" 
          Skype call
      <li><a href="https://mobile.twitter.com/t/messages">
          <img src="twitter-dm-icon.png" 
          Twitter DM

    In this final code example I've highlighted (using orange bold tags), the key pieces you need to change to your own identifiers on each service.

    Live example once more, including heading:


    1. txt message
    2. FB message
    3. AIM chat
    4. FaceTime call
    5. Skype call
    6. Twitter DM

    I dropped the Google Hangouts icon since that application lacks support for any URL schemes (as noted in the previous post). Also I've re-ordered a bit from the mockup, having found that I prefer FaceTime over Skype. Pick your own from among the documented URL schemes, and order them to your preference.

    Next Steps

    All the essential structure is there, yet it clearly needs some CSS. There's plenty to fix from inconsistent image sizes (all but the Messages & FaceTime icons are from Apple's iTunes store web pages), to blue underlined link text. And there's plenty to clean up to approach the look of the mockup: from the clustered center-aligned image+text button layout, to the grid layout of the buttons, to white text on the gray rounded corner ordered list background.

    That's all for the next post in this series.

    Twitter post 461583676816764929
  5. Thanks @jeremyzilar @nytimes for hosting @IndieWebCamp NYC, lunches sponsor @andyet, and @Mozilla for Saturday dinner!

    Twitter post 460889754956226560
  6. @ftrain great meeting you @indiewebcamp! True about XSLT. It's the reliable smarts behind h2vx.com.

    2014-118 7:23 in reply to: https://twitter.com/ftrain/status/460508592488316928 using BBEdit.
    Twitter post 460786701573844993In reply to: https://twitter.com/ftrain/status/460508592488316928
  7. Remembering BostonStrong, Meeting PavementRunner & Sam, Learning About NovemberProject

    One year and five days ago I bicycled from work to Crissy Field because my friend Julie Logan invited me out to #BostonStrongSF, a run in support of the Boston community, and runners in particular, one week after last year's Boston Marathon attack.

    Fastwalking in solidarity

    I had stress-fractured my left ankle two months before, and having originally misdiagnosed it as a sprain, was still recovering and unable to run. I went anyway, to fastwalk (you know that goofy looking walk) the 3-4 miles solidarity run. My podiatrist had cleared me to fastwalk as fast as I wanted, as long as it didn't hurt.

    I didn't care if I was the last person to finish. My injury was trivial compared to what so many had suffered a week before. I knew I would fully recover, I couldn't stop thinking about the runners and others who had lost a limb, or their lives.

    I fastwalked as quick as I could, almost keeping up with the tail end of runners, and returned to the finishing area where I found my friend Julie. She was literally the only person I knew there. But she was very happy to see me, and introduced me to her crowd of Nike Ambassador friends.

    Meeting PavementRunner

    Julie also introduced me to Brian AKA PavementRunner, who had proposed the Boston Strong series of runs across cities, and organized #BostonStrongSF in particular. Brian is an amazing person: kind, understated, and warm-hearted. I was reminded of this when I got to catchup with Brian this past Monday night at Chipotle, having dinner with him and few NovemberProject friends after this year's Nike #StrongerEveryRun run.

    Get to know Brian and you'll learn he's passionate and bold as well, just the type of individual to not only come up with a powerful idea like #BostonStrong<city>, but to inspire others, follow it through, and make it happen. One person can make a difference. Brian did.

    #BostonStrongSF runners

    Meeting Sam Livermore

    Julie introduced me to a lot of people, but one in particular stood out. If you've met her you know what I mean. She introduced me to Sam Livermore, who is one of the most enthusiastically kind people I've ever met. You know how some people instantly make you feel worthy and appreciated? That's Sam.

    Sam encouraged me to friend her on Facebook so I did and didn't think much of it. I think we started following each others' Instagrams also. We didn't really cross paths but occassionally her posts would pop up when I checked the Facebook home page and they always reminded me just how warm and welcoming she had been that Monday evening.

    Learning About NovemberProject

    I don't remember if I first saw the chalkmarks in Golden Gate park ("NovemberProject 6:30am Kezar!" - back when it was there), or if I first saw postings from Sam & Julie about it. But it was seeing them talk about it that stuck in my head.

    I point this out because it was meeting Sam, then seeing her & Julie enthusiastically mention NovemberProject in their posts that somehow made it click six months later. Last October I looked up the details, and last Wednesday of last October I managed to wake up at 6am and jog over to Alamo Square and made it in time for my first NovemberProject workout, not knowing anyone there except Sam. But that experience is a different story.

    A year ago I don't think I could have predicted where I would be now. That I would have finished two half marathons and would be considering running two more by year's end.

    Looking back on the #BostonStrongSF event & photos I'm amazed how many now familiar faces I see. I am grateful for meeting PavementRunner and Sam just over a year ago.

    Sam Livermore and PavementRunner

    Sam and PavementRunner after a recent NovemberProjectSF workout. Oh, and little Barnum too.

    I'm also very thankful for Julie & Sam's encouragement to checkout NovemberProject. I'm doing my best to pass it on. If you're any level of runner or jogger in SF, join us in the middle of Alamo Square, Wednesday morning 6:25am rain or shine. You can count on me to be there when I'm in town.


    Twitter post 460471064733417473
  8. Wonderful article on @trammell @portia #tramwells http://www.nytimes.com/2014/04/27/fashion/weddings/on-the-road-to-matrimony-a-detour-for-a-president.html?_r=0 Magical weekend. So much love. http://instagram.com/p/nFIeOBA9Y-/ http://photos-b.ak.instagram.com/hphotos-ak-frc/10296936_1443792352530521_1514625285_n.jpg

    Twitter post 460464542666227712
  9. Meanwhile @IndieWebCamp: @ftrain uses an Android to ssh, emacs add rel=me to ftrain.com, works first time.

    Twitter post 460459551381544960
  10. Congratulations to Nike Women's Half Marathon DC finishers! @saminal_ @thegreenK @eflandro @nikoletteray Chau Vu!

    Twitter post 460456015071563777
  11. @aaronpk as I heard from the cashier at a late night JFK diner last night when their cc service was down, cash is king

    2014-116 8:09 in reply to: http://aaronparecki.com/notes/2014/04/24/1/ https://twitter.com/aaronpk/status/459513202645028864 using BBEdit.
    Twitter post 460073134096662529In reply to: https://twitter.com/aaronpk/status/459513202645028864
  12. Boarded. See you soon New York City. #indiewebcamp Bloggers, blog, link to, pingback http://indiewebcamp.com/2014/NYC/Guest_List to RSVP.

    Twitter post 459805099096039424
  13. @ftrain sorry to hear that! May your twin toddlers get well soon.

    2014-115 13:23 in reply to: https://twitter.com/ftrain/status/459788926547664896 using BBEdit.
    Twitter post 459789945411223553In reply to: https://twitter.com/ftrain/status/459788926547664896
  14. @zeldman @kottke @ginatrapani @ftrain @anildash Independent Web pioneers, join us this weekend: indiewebcamp.com/2014/NYC/Guest_List

    Twitter post 459788033760722944
  15. Writing & *doing*: @dangillmor post on his own site about #indieweb: dangillmor.com/2014/04/25/indie-web-important/ and syndicates to Slate.

    2014-115 12:12 in reply to: http://dangillmor.com/2014/04/25/indie-web-important/ http://tantek.com/2014/115/t1/hack-tools-liberating-from-centralized-control https://twitter.com/t/status/459768698933608448 using BBEdit.
    Twitter post 459772054884335616In reply to: https://twitter.com/t/status/459768698933608448
  16. “gather to hack together tools aimed at liberating us … from centralized control” slate.com/blogs/future_tense/2014/04/25/indiewebcamps_create_tools_for_a_new_internet.html #indiewebcamp

    Twitter post 459768698933608448
  17. @Arty2 @aral agreed. Helping #indie generations: indiewebcamp.com/generations Nice #indieweb article: kartikprabhu.com/article/indieweb-love-blog

    2014-114 16:45 in reply to: https://twitter.com/Arty2/status/459290833897156608 using BBEdit.
    Twitter post 459478355080146944In reply to: https://twitter.com/Arty2/status/459290833897156608
  18. Should be sleeping. Blogging instead.

    Twitter post 458864275340406784
  19. @aral gah. I omitted a ;) for intended jest, failed horribly :( My bad. I owe you at least a pint for that. Apologies.

    2014-112 23:31 in reply to: https://twitter.com/aral/status/458484590261571584 using BBEdit.
    Twitter post 458855703068028928In reply to: https://twitter.com/aral/status/458484590261571584
  20. @davidmead nice permashortlink you got there :) However, @Medium > MSWord. Great post by @ev: https://medium.com/about/df8eac9f4a5e

    2014-112 20:22 in reply to: https://twitter.com/davidmead/status/458801108073205760 using BBEdit.
    Twitter post 458808119439925248In reply to: https://twitter.com/davidmead/status/458801108073205760
  21. @jalbertbowdenii @thewendee so much positive potential in web components. Both excited and hopeful for implementation iteration based on web developer experience (i.e. not get locked into bugwards compatibility with who ships what first). I trust smart folks like @dglazkov @hober @tabatkins @fantasai to wrestle out the details of web components, shadow DOM, CSS selectors thereof etc.

    2014-112 20:02 in reply to: https://twitter.com/jalbertbowdenii/status/458797852953948161 using BBEdit.
    Twitter post 458803008860852224In reply to: https://twitter.com/jalbertbowdenii/status/458797852953948161
  22. How to markup X? Best approach I've found: * the minimum semantic markup that * would not completely suck without CSS

    Twitter post 458797376720080897
  23. @mterenzio specifically content editing/publishing/commenting UX innovations. Happy to learn of any open web examples.

    2014-112 15:40 in reply to: https://twitter.com/mterenzio/status/458722111310553088 using BBEdit.
    Twitter post 458737119960506368In reply to: https://twitter.com/mterenzio/status/458722111310553088
  24. @anildash @ginatrapani consider this a +1. Would be GREAT to have you @IndieWebCamp NYC. All sign-up rants accepted ;)

    2014-112 15:03 in reply to: https://twitter.com/anildash/status/458721363117998080 using BBEdit.
    Twitter post 458727897608781824In reply to: https://twitter.com/anildash/status/458721363117998080
  25. If your goal is better #indieweb UX, start by copying the best innovations from those silos to your site. #selfdogfood

    2014-112 14:30 in reply to: http://tantek.com/2014/112/t2/silos-content-ux-innovations https://twitter.com/t/status/458714326640369664 using BBEdit.
    Twitter post 458719596846276608In reply to: https://twitter.com/t/status/458714326640369664
  26. It's easy to bash silos, yet past 10y of content #UX innovations come from @Facebook @Flickr @Twitter @Tumblr @Medium.

    Twitter post 458714326640369664
  27. @adactio I failed to append ;) Notes are a building block of every #indieweb post type. *A* good start but certainly not the only, nor essential, as you've demonstrated with adding a composite stream, webmention support, and linkblogging to your own site, omitting short plain text notes (hopefully only for now and you'll own your tweets at some point :)

    2014-112 12:43 in reply to: https://twitter.com/adactio/status/458512701736902656 using BBEdit.
    Twitter post 458692616109195264In reply to: https://twitter.com/adactio/status/458512701736902656
  28. going to the first #IndieWebCamp NYC in six days. #NYC creators & bloggers, join us! RSVP: indiewebcamp.com/2014/NYC/Guest_List

    2014-111 17:24 in reply to: http://werd.io/2014/indiewebcamp-nyc using BBEdit.
    Twitter post 458401038345977856
  29. @dsearls @aral Want to be "indie"? Tweet from your own domain. Til then it's all tweet no action. #indieweb cc: @haxor

    2014-111 15:49 in reply to: http://tantek.com/2014/111/t3/indie-is-generic-prefix-ship-code-not-trademarks https://twitter.com/t/status/458375088312942592 using BBEdit.
    Twitter post 458377124005826560In reply to: https://twitter.com/t/status/458375088312942592
  30. @dsearls @aral I agree with @haxor. Indie is a generic prefix: enwp.org/indie Also, ship code, not trademarks.

    2014-111 15:41 in reply to: https://twitter.com/haxor/status/458295968534773760 using BBEdit.
    Twitter post 458375088312942592In reply to: https://twitter.com/haxor/status/458295968534773760
  31. going to Homebrew Website Club, 2014-04-23 18:30 @MozSF. indieweb: werd.io/2014/homebrew-website-club-3 silo: fb.com/events/245194522349191/

    2014-111 11:16 in reply to: http://werd.io/2014/homebrew-website-club-3 using BBEdit.
    Twitter post 458308409558040577
  32. thoughts with #BostonMarathon runners, especially @Nov_Project_SF Amy Connor Laura Molly & 2013 runners @dens @chelsa

    Twitter post 458265876949893120
  33. planned to publish next mobile comms post days ago, but life had a way of happily happening. home now. maybe tonight.

    Twitter post 458064747620216832
  34. name of illusion causing proponents of a concept to see most things as that concept? e.g. webintents,annotations,cards

    Twitter post 456552583499243521
  35. Kept up on warmup laps, so I ran 2x400s at #trackattack start+end. #levelingup http://instagram.com/p/m0G89jg9To/ http://distilleryimage4.ak.instagram.com/83a1969ec4ab11e3ac3e0002c954a104_8.jpg Love this crew: http://instagram.com/p/m0HtqwA1V4/ distilleryimage8.ak.instagram.com/74c1a834c4ac11e39ce80002c9c88468_8.jpg Started coming to track six weeks ago, doing just outside laps: http://tantek.com/2014/064/t2/yesterday-npsf-track-kezar-trackattack

    Twitter post 456106145191845889
  36. @chrismessina ideas concepts R&D is nice. Happy to incorporate as we #execute on the #IndieWeb. #yoursilotweetsarecute

    2014-105 9:04 in reply to: https://twitter.com/chrismessina/status/456075138803326976 using BBEdit.
    Twitter post 456100865137737730In reply to: https://twitter.com/chrismessina/status/456075138803326976
  37. Great having @cbeard back @Mozilla as interim CEO. Still disappointed in 2 weeks of name-calling & press inaccuracies.

    Twitter post 455862065279029249
  38. going to Homebrew Website Club, 2014-04-09 18:30 @MozSF. indieweb: werd.io/2014/homebrew-website-club-2 silo: fb.com/events/1438031876437815/

    2014-098 19:46 in reply to: http://werd.io/2014/homebrew-website-club-2 using BBEdit.
    Twitter post 453725596879966208
  39. in day 1 of @W3C HTML WG meeting in San Jose. Agenda & bits of live minutes: https://www.w3.org/wiki/HTML/wg/2014-04-Agenda#Agenda_April_8

    Twitter post 453666318672465920
  40. After a race is before a race. 40 days til #BaytoBreakers #b2b103. Time for track tuesday.

    Twitter post 453513137011302400
  41. On the otherhand, just had a superb above & beyond SF Apple Store experience. Service counts for a lot. Thanks Lorl!

    Twitter post 453315870593650688
  42. Eye-opening watching dad use new iPhone 5S. So many problems * text/buttons/keyboard too small * touch too sensitive * unforgiving UI flow Prime example: Google Maps for iOS - so bad. * Street names are unreadably small * UI flow incredibly difficult to figure out. When you tap a button or option, there is no obvious way how to get back. Thus unforgiving: you accidentally tap something, you're lost. * Unforgiving UI flow = scares user away from trying things and learning. * Open from sleep (lock screen) frustrating - loses state, whether in directions, or zoomed in on a map to a specific location, etc. This is unacceptable. Web browsers figured this out years ago. When you re-open a mobile browser it brings you back to exactly the page you were on. Google Maps is just another kind of browser. It should support history (*without* any need to login) just like any other browser does. Perhaps Google Maps could use URLs internally and re-use history code from Chrome for iOS.

    Twitter post 453251323975462912
  43. finished #RnRSF 2:29, 7min slower than Kaiser. Ran all hills, sprinted last 1km. Thanks #NPSF @rk @kh for hugs+cheers!

    Twitter post 452956008676335616
  44. "There is no someday. There's only today." http://youtu.be/FZk40J_drws from @rwbhutch. Thanks Andrew.

    Twitter post 452697953749458944
  45. running #RnRSF tomorrow, my 2nd half marathon, 1st with dad who's run 21 fulls, 12 halfs. just want to make him proud.

    Twitter post 452691909614796800
  46. That said, Dear #Mozilla Board: I think @JaySullivan would be a great CEO. Inspiring, hardworking, broadly respected.

    Twitter post 452235612574478336
  47. Disappointed how people & press treated #Mozilla. I respect @BrendanEich's decision. Sad to see him & @jaysullivan go.

    Twitter post 452234602758029312
  48. my comments during the #ianno14 @W3C Web #Annotation Workshop: tantek.com/2014/092/ & stats: tantek.com/2014/093/t1/web-annotations-workshop-stats-ianno14

    Twitter post 451791711799631872
  49. @W3C Web Annotations Workshop stats annotations about it during it * 138 #ianno14 tweets * 122 #annotation @kevinmarks tweets * 1 hackpad: * hackpad.com/Annotator-at-I-Annotate-2014-ksUGlRnOq3j * 1 Tumblr post (was cross-tweeted) * 0 blog posts Explicitly not double-counting: * 7 original notes POSSE copied from my site to among those 139 #ianno14 tweets: * http://tantek.com/2014/092/ * 1 @kevinmarks summary post: * http://kevinmarks.com/w3cannotation.html Method used to count tweets: Twitter search, omitting results obviously from before/after workshop start/end by timestamp, omitting Tumblr cross-tweet. If I'm missing any other *web* annotations created by workshop attendees, please reply and link to them so I can update these stats. There was lots of annotation use-case *talk* at the workshop, but was the actual annotation *walk* during the ~8 hours workshop? 260 tweet annotations 2 non-tweet annotations (hackpad, tumblr) Tweet "comments" were the 99% use-case of web annotations. This is what I previously* meant by High Frequency Annotations (HFAs). When we measure what workshop participants *did* as opposed to what they *said* they wanted, these comments (posted as tweets) about the event (using a hashtag as a proxy event GUID reference) were the most frequent type of web annotation made by attendees. Not counted, but would make for interesting additional data: Second-order annotations of those tweets, e.g.: * # of retweets: a full requote of a comment * # of favorites: like +1/starring a comment * # of replies: comments on comments of those 260 tweets. *Previously: tantek.com/2014/092/t5/ianno14-high-frequency-annotations-do-today

    2014-093 11:05 in reply to: http://tantek.com/2014/092/t5/ianno14-high-frequency-annotations-do-today https://twitter.com/t/status/451512311212408832 using BBEdit.
    Twitter post 451782684386529280In reply to: https://twitter.com/t/status/451512311212408832
  50. #ianno14 3. #Indieweb Annotations Focus. Our "itches" focus has solved HFA use-cases + others like RSVPs, invitations.

    2014-092 17:38 in reply to: http://tantek.com/2014/092/t2/ianno14-thought-provoking-discussions-add https://twitter.com/t/status/451496495125372928 using BBEdit.
    Twitter post 451519042059509760In reply to: https://twitter.com/t/status/451496495125372928
  51. @nickstenning high frequency literally as in time, i.e. what annotations did #ianno14 folks most *create* today. :)

    2014-092 17:23 in reply to: https://twitter.com/nickstenning/status/451513176895418368 using BBEdit.
    Twitter post 451515394025881600In reply to: https://twitter.com/nickstenning/status/451513176895418368
  52. #ianno14 2. High Frequency Annotations. Heard talk of use-cases, but what did people *do* today? Needs HFAs blog post.

    2014-092 17:11 in reply to: http://tantek.com/2014/092/t2/ianno14-thought-provoking-discussions-add https://twitter.com/t/status/451496495125372928 using BBEdit.
    Twitter post 451512311212408832In reply to: https://twitter.com/t/status/451496495125372928
  53. #ianno14 ... despite shutdown, @Readmill exports can inform data models, highlights, locators: indiewebcamp.com/Readmill

    2014-092 16:41 in reply to: http://tantek.com/2014/092/t3/ianno14-annotation-servers-fragile-readmill https://twitter.com/t/status/451501824412229632 using BBEdit.
    Twitter post 451504750534860800In reply to: https://twitter.com/t/status/451501824412229632
  54. #ianno14 1. Annotation servers fragile til proven otherwise. E.g. @Readmill shutdown 2014-07-01 indiewebcamp.com/site-deaths#Readmill

    2014-092 16:29 in reply to: http://tantek.com/2014/092/t2/ianno14-thought-provoking-discussions-add https://twitter.com/t/status/451496495125372928 using BBEdit.
    Twitter post 451501824412229632In reply to: https://twitter.com/t/status/451496495125372928
  55. #ianno14: Lots of thought-provoking talks and discussions. Kudos to program committee curation. Few things I'd add ...

    Twitter post 451496495125372928
  56. #ianno14 @W3C Web Annotations Workshop: great @tilgovi intro noted #webmention & #microformats. GDoc slides: https://docs.google.com/presentation/d/1fKcTKwcglQ3bIJjBGuAvnpqK6TOEtZwuIJ5YHXuIK0w

    Twitter post 451398336156016640
  57. I marched & voted AGAINST prop8, strongly support =rights, & I think @BrendanEich will be a supportive inclusive #Mozilla CEO

    Twitter post 451027955729567744
  58. 33:06 #NPSF PR (cut 3min) in the rain! #weatherproof with first-timer @caseorganic. Previously: tantek.com/2014/057/b1/rain-sweat-tears-novemberprojectsf-pr

    Twitter post 448883770519982080
  59. URLs For People Focused Mobile Communication

    The key to making icons of communication applications actually work on a website, and open communications (whether text, voice, or video) are special kinds of URLs that launch those applications. This post is third in a series.

    From the mockups:

    mobile website icon header

    In the order presented from left to right, top to bottom, here are example URLs for each of the icons, with expected actions, test results notes from iOS & Android, and links to more info:

    • sms:user@example.com iOS7 Messages icon
      Start a new txt message to user@example.com
      It opens the "Messages" SMS/texting app directly into a message to the AppleID user@example.com (and existing conversation if any). You don't need a phone number to text. Note: avoid using ?body=hello, as that causes iOS not recognize the address.
      It opens the SMS app with a new message, which the app then sends as email through the provider (e.g. T-Mobile's tmomail.net).
      More info:
      Wikipedia URI scheme sms
    • fb-messenger://user-thread/4 Facebook Messenger icon
      Start (resume) a Facebook Messenger conversation with FB user id 4, which is Zuck's. Find yours at graph.facebook.com/username
      iOS &
      If the Facebook Messenger app is installed, it opens with a new message window e with to: prefilled, message input box selected.
      More info:
      Stack Overflow: Facebook URL scheme to post a new message
    • gtalk:chat?jid=user@example.com iOS7 Hangouts icon
      Start (resume) a Gtalk conversation with user@example.com
      iOS &
      Failure even with Google's "Hangouts" app installed. "address is invalid" and "can't load page" errors, respectively. It appears Hangouts does not handle "gtalk:" URLs, which, as the replacement for Google Talk, it should. I've reported bugs to folks at Google. Avoid "gtalk:" URLs until they're fixed.
      More info:
      Wikipedia URI scheme gtalk
    • aim:goim?screenname=tantekc iOS AIM icon
      Start (resume) an AIM conversation with AIM user tantekc
      iOS &
      If the AIM app is installed, it's opened as expected. If not, the browsers give an unfriendly error like "address is invalid" or "can't load page".
      More info:
      Wikipedia AOL IM URI scheme
    • skype:echo123?call iOS7 Skype icon
      Start a Skype call with Skype user echo123
      iOS &
      A skype call is immediately initiated without prompting, if the Skype app is installed. If not, the browsers give an unfriendly error like "address is invalid" or "can't load page".
      More info:
      Wikipedia URI scheme skype
    • https://mobile.twitter.com/t/messages Twitter Direct Message icon
      View conversation, start a new direct message to Twitter user @t
      All platforms:
      The browser will simply navigate directly to a new Twitter direct message page, if the user is logged in. If not, Twitter will first redirect to a login page.
      More info:
      None. I discovered this URL for directly creating Twitter direct messages with my own iPod experiments.
  60. facetime:user@example.com iOS7 FaceTime icon
    Start a FaceTime call with user@example.com
    Presents a dialog
    [ Cancel ][ FaceTime ]  
    that requires the user click/tap the "FaceTime" button/link to initiate the call.
    No support for FaceTime. Error: "can't load page". Thus this link should be hidden from non-iOS users (since mobile comms are the goal, it's ok to hide it from MacOS users too)
    More info:
    Wikipedia URI scheme facetime
  61. And that's it for the communication applications in the mockup. However, there are some variants of those URL schemes worth considering.

    URL Scheme Options

    There are a couple of options for the above URL schemes, e.g. Gtalk can be used for making calls (instead of just instant messaging), and Skype can be used for instant messaging (instead of just calls):

    • gtalk:call?jid=user@example.com iOS7 Hangouts icon
      It should initiate a GTalk call.
      iOS &
      Again, even with Google's "Hangouts" app installed, it fails to register to handle the gtalk: URL scheme. And again the same errors: "address is invalid" or "can't load page". Same conclusion: avoid gtalk: URLs for now.
      More info:
      Wikipedia URI scheme gtalk
    • skype:echo123?chat iOS7 Skype icon
      Starts a Skype chat with user echo123.
      iOS &
      A skype chat is started if the Skype app is installed. If not, the browsers give an unfriendly error like "address is invalid" or "can't load page".
      More info:
      Wikipedia URI scheme skype

    While the Gtalk variant is not immediately useful, the Skype chat option could be useful during:

    • Default sleeping hours. You could configure your server with your default sleeping / do not disturb hours and have it use the "chat" option during those times.
    • Event busy times. Your server could automatically check your online calendar and use the "chat" instead of "call" option when your calendar indicates that you're busy and/or in a meeting.
    • Do Not Disturb. A more advanced option would be to have your mobile device's "Do Not Disturb" action automatically notify your server, and have it switch from "call" to "chat" accordingly, until switched off or perhaps your next waking time.

    These same contexts could also be used to conditionally show or hide a FaceTime: URL (in addition to showing them only for iOS browsers).

    20th Century Schemes

    There's also tel:18008765309, fax:18008765309, and mailto:fail@example.com URLs for phone calls, faxes, and email. However:

    • Pricey phone carriers. Though providers in many countries offer free or nearly free domestic calls, international and roaming calls tend to be pricey. International SMS to actual phone numbers is also often costly as well (when it even works!), sometimes between carriers in the same country!
    • Fax machines maybe ... for businesses. I don't know any individuals with phone numbers set up to receive faxes. Perhaps there is an underground network of hipsters with fax machines and landlines, and they're just too obscure for me to have heard of them.
    • Email Efail. Email, beyond the unnecessary cognitive load of subject plus message body, encourages excessively long messages and has numerous other problems. Better to avoid it for personal communications, and use it for working hour (not personal) communications.

    Thus I discourage using these, but they're there if you're feeling nostalgic for 20th century communication tools, services, and regulated national oligopolies.

    What About WebRTC?

    WebRTC is perhaps the biggest absence from this list of communication methods, and unfortunately that's because despite the interoperability at the API level, at a high level, WebRTC does not have a simple URL solution unlike the others above. There is no "webrtc://" URL scheme with parameters that will automatically open a WebRTC call to your mobile device. WebRTC needs a simple URL scheme like that to "just work" like the alternatives above - without needing any script. Robert O'Callahan blogged some thoughts on WebRTC and I look forward to seeing this figured out.

    What About FirefoxOS and others?

    Lastly, I haven't yet had a chance to see how well these URLs could work on FirefoxOS (unknown schemes appear to do nothing in the browser), nor found applications that explicitly register support for Web Activities for those URLs.

    For now, try experimenting with the URLs in the above list on your own devices, operating systems, and browsers, and report your own results.

    Thanks to help from:

    If you have different results or results for additional platforms, let me know!

    Next Steps

    The next building block will be figuring out minimal semantic markup for representing these communication actions.

    However, as is often the case when figuring out the individual pieces of a problem, the analysis of these URL building blocks has revealed at least one or two more to figure out:

    • iOS client detection - for conditional FaceTime links at a minimum. Perhaps just minimal client platform detection for platform dependent URL schemes in general.
    • Contextual tests - a potentially open ended set of building blocks, for time of day, calendar busy checks, client "Do Not Disturb" notifications, etc.

    I've added these to the building blocks post accordingly.

    Twitter post 448685406167760896
  62. going to Homebrew Website Club, 2014-03-26 18:30 @MozSF. indieweb: werd.io/2014/homebrew-website-club-1 silo: fb.com/events/1409507205977978

    2014-083 16:14 in reply to: http://werd.io/2014/homebrew-website-club-1 using BBEdit.
    Twitter post 448236415886053376
  63. @nrrrdcore I see @harthvader & @lsblakk are on it! 100+ @MozSF 1st fl. Can also livestream & host archives @airmozilla

    2014-079 11:46 in reply to: https://twitter.com/lsblakk/status/446413629110231040 using BBEdit.
    Twitter post 446719578539032576In reply to: https://twitter.com/lsblakk/status/446413629110231040
  64. Good first steps: @GitHub CEO @defunkt's "Update on Julie Horvath's Departure" https://github.com/blog/1800-update-on-julie-horvath-s-departure Fix it Chris!

    Twitter post 445495494929031168
  65. When did someone "speak up" last "cry wolf"? Right. Adjust Bayesian priors accordingly, avoid "Fair & Balanced" trap.

    Twitter post 445486875818852352
  66. Aphorism fallacies "takes two to tango" "always two sides to the story" No. Abuse is typically 1-sided, e.g. bullying.

    Twitter post 445479100233572352
  67. Actions (or failures to act) have consequences. Awaiting @GitHub response; planning regardless. techcrunch.com/2014/03/15/julie-ann-horvath-describes-sexism-and-intimidation-behind-her-github-exit/

    Twitter post 445266944254828545
  68. Thanks @ArezuAghasey & @InfoBerkeley; @anirvan @davelester @leslieeechen @theguice @npdoty @Lexin8r @rchoi @seekshreyas @ishawithaneye @raymonst @AJRenold @kfhusain @sirgalahad88 @JakeHartnell @TylerHenj for the tweets; and everyone who contributed to the Etherpad: https://etherpad.mozilla.org/infoberkeley Great notes and questions. Will blog it tomorrow. Until then: Reframe, Rebuild, and Resist.

    Twitter post 445045953717088256
  69. Speaking @infoberkeley 13:15 @UCBerkeley South Hall. 11:30 #barcamp session pitches Come on by! berkeley.infocamp.org

    Twitter post 444896557507567616
  70. Only met you once @nrrrdcore (prev Passion Projects w @lauraglu). Immediately impressed, respect you & what you built.

    Twitter post 444674558311010304
  71. Thoughts with those @SXSW music. Have walked those very streets many times in years past. http://thelede.blogs.nytimes.com/2014/03/13/fatal-crash-at-south-by-southwest-festival-was-a-one-minute-event/

    Twitter post 444281502474719234
  72. @benward save me a seat. Be right there. @pubstandardssf @pubstandards

    2014-072 12:12 in reply to: https://twitter.com/benward/status/444185985698369536 using BBEdit.
    Twitter post 444189208031559681In reply to: https://twitter.com/benward/status/444185985698369536
  73. @rk also I miss working with you and having these conversations in person. Looking forward to seeing what you do next.

    2014-072 12:11 in reply to: https://twitter.com/rk/status/443919233450139648 using BBEdit.
    Twitter post 444188986756829184In reply to: https://twitter.com/rk/status/443919233450139648
  74. @mmealling current standards call them URLs again :) http://url.spec.whatwg.org/ @urlstandard cc: @rk @kevinmarks @annevk

    2014-072 9:26 in reply to: https://twitter.com/mmealling/status/444057597470330880 using BBEdit.
    Twitter post 444147430112907264In reply to: https://twitter.com/mmealling/status/444057597470330880
  75. Genius: "all URLS are launchers, many just launch a browser" -@rk Let's call them all Uniform Resource Launchers then.

    2014-071 20:06 in reply to: https://twitter.com/rk/status/443919233450139648 using BBEdit.
    Twitter post 443946247104503808In reply to: https://twitter.com/rk/status/443919233450139648
  76. Want to discuss URLs more? Come by tonight's Homebrew Website Club meetup 18:30 @MozSF @MozPDX indiewebcamp.com/events/2014-03-12-homebrew-website-club

    Twitter post 443907904748675072
  77. @t re: that "new reason for just URL": schemes like sms: gtalk: aim: facetime: skype: are Uniform Resource *Launchers*

    2014-071 17:25 in reply to: http://tantek.com/2014/071/t2/new-reason-just-url https://twitter.com/t/status/443890173047484416 using BBEdit.
    Twitter post 443905739388895233In reply to: https://twitter.com/t/status/443890173047484416
  78. @joshuajuran: in prose "RFC 1738" works, or search for that for the canonical URL: http://www.rfc-editor.org/rfc/rfc1738.txt

    2014-071 17:17 in reply to: https://twitter.com/joshuajuran/status/443899431822168064 using BBEdit.
    Twitter post 443903738890432512In reply to: https://twitter.com/joshuajuran/status/443899431822168064
  79. @t URI unnecessary cont'd: 2. Tried "URI" for comms services/apps links, e.g. sms:, realized they are not identifiers but *launchers*, could even be called Uniform Resource Launchers, and thus again, just URLs.

    2014-071 17:02 in reply to: http://tantek.com/2014/071/t4/urns-ignorable-not-web-rejected-by-doi https://twitter.com/t/status/443898179034304512 using BBEdit.
    Twitter post 443899901265850370In reply to: https://twitter.com/t/status/443898179034304512
  80. @t URNs ignorable 1. URNs are not used on the web, were rejected by DOI which uses URLs for names. Citations: http://en.wikipedia.org/wiki/Uniform_resource_name#Absence_of_DOI_namespace http://en.wikipedia.org/wiki/Digital_object_identifier#Resolution

    2014-071 16:55 in reply to: http://tantek.com/2014/071/t2/new-reason-just-url https://twitter.com/t/status/443890173047484416 using BBEdit.
    Twitter post 443898179034304512In reply to: https://twitter.com/t/status/443890173047484416
  81. @darrel_miller: 1. XMLNS dead on web 2. link rels in ufs.cc/w/rels or use http URLs 3. URNs debunked next...

    2014-071 16:52 in reply to: https://twitter.com/darrel_miller/status/443891484304371712 using BBEdit.
    Twitter post 443897487913648128In reply to: https://twitter.com/darrel_miller/status/443891484304371712
  82. Yesterday I tried again to find a good use for "URI" (vs "URL") and found a new reason for just "URL". #nerdproblems

    Twitter post 443890173047484416
  83. Thankful for birthday wishes! What I would like: Install me. * Go to tantek.com * Select the rectangle or square with an arrow coming out of it * Tap "Add to Home Screen" * Tap the "Add" button in the top right corner. For now you'll just immediately see what I've most recently written. Within a couple of days if not 24 hours you'll be able to use that icon on your home screen to contact me. And yes this is iOS-only for now. More soon.

    Twitter post 443643038100123648
  84. Starting another lap around the sun by running laps before dawn at Kezar: instagram.com/p/lZ8fAIA9dN/ Also the earliest I have ever had Happy Birthday sung to me. distilleryimage11.ak.instagram.com/00ad77caa92711e3b7650e1e7e7c6e3f_8.jpg So thankful. @Nov_Project_SF november-project.com

    Twitter post 443408716839542784
  85. Mockups For People Focused Mobile Communication

    I've been iterating on mockups for people focused mobile communication for a while on the IndieWebCamp wiki for my own publishing tool Falcon, but the mockups deserve a blog post of their own.

    Going back to the original people focused mobile communication experience, we've already figured out how to add a personal icon to your site so that visitors can choose "Add to Home Screen" (or similar menu option) to add icons of people (represented by their site) directly to their mobile home screens where they normally organize their apps.

    screenshot of an iPod touch home screen with two rows of people icons

    The next step is to mockup what happens when they select an icon of a person and it launches their website.

    Home page for iOS7

    I started with a mockup for how I could present communication options on my home page when viewed on an iOS7 mobile device, figuring if I can create a seamless experience there, adapting it to other mobile devices, desktop etc. would be fairly straightforward.

    Thus when someone selects an icon of a person and it launches their website, they might see a home page view like this:

    mobile website icon header

    mobile website content

    This is a hybrid approach, providing a look and feel familiar to the user from their "native" environment (smooth, seamless, confidence invoking), with very simply styled web content right below it so if that's all they want, they get it immediately.

    Home with contact options

    Continuing with the user flow, since they want to contact you, they select the "Contact" folder, which opens up accordingly. From there the user selects which "app" they want and it launches automatically into a new message/connection, skipping any distracting inboxes.

    mobile website icon header

    mobile website content

    The various contact options are presented in preference order of the contactee.

    Each of these can be optionally hidden based on presence status / availability, or time of day.

    A subset of these could also be presented publicly, with others (e.g. perhaps Facetime and Skype) only shown when the visitor identifies themselves (e.g. with IndieAuth). The non-public options could either be hidden, or perhaps shown disabled, and selecting them would be discoverable way to request the visitor identify themselves.

    This is enough of a mockup to get started with the other building blocks so I'm going to stop there.

    I've started a wiki page on "communication" and will be iterating on the mockups there.

    Got other thoughts? Upload your mockups to indiewebcamp.com and add them to the communication page as well. Let's build on each other's ideas in a spirit of open source design.

    Twitter post 442467913048793088
  86. Building Blocks For People Focused Mobile Communication

    I'm at IndieWebCampSF and today, day 2, is "hack" or "create" day so I'm working on prototyping people focused mobile communication on my own website.

    A few months ago I wrote about my frustrations with distracting app-centric communication interfaces, and how a people-focused mobile communication experience could not only solve that problem, but provide numerous other advantages as well.

    Yesterday I led a discussion & brainstorming session on the subject, hashtagged #indiecomms, and it became clear that there were several pieces we needed to figure out:

    • Mockups for what it would look like
    • URLs for each communication service/app
    • Markup for the collections of links and labels
    • CSS for presenting it like the mockups
    • Logic for presence / availability for each service

    So that's what I'm working on and will blog each building block as I get figure it out and create it.

    Twitter post 442434125728071680
  87. Amazing work already @IndieWebCamp SF hack day, e.g. @dangillmor added full POSSE roundtrip: dangillmor.com/2014/03/08/learning-about-and-deploying-indieweb-tools/

    2014-067 12:16 in reply to: http://dangillmor.com/2014/03/08/learning-about-and-deploying-indieweb-tools/ https://twitter.com/dangillmor/status/442375457778827264 using BBEdit.
    Twitter post 442393568679051264In reply to: https://twitter.com/dangillmor/status/442375457778827264
  88. ran from Haight to the top of Bernal Heights in <40 min yesterday morning and saw: http://instagram.com/p/lPxKkXg9WR/ http://distilleryimage11.ak.instagram.com/4bc15330a60c11e3a1af0ea229d20f9b_8.jpg then ran up and down Bernal Heights Park for 25 minutes of #NovemberProjectSF #hillsforbreakfast. Legs still sore today.

    Twitter post 442324094152081409
  89. Did #indiewebcampsf sessions on #indiecomms #https #yourfriendthesilo #possepatterns #wordpress. #brainfull #indieweb

    Twitter post 442187357958455296
  90. @caseorganic is doing an awesome demonstration of POSSE @indiewebcamp SF!

    2014-066 10:44 in reply to: http://caseorganic.com/notes/2014/03/07/1/indiewebcampsf https://twitter.com/caseorganic/status/442007207500996608 using BBEdit.
    Twitter post 442007991421009921In reply to: https://twitter.com/caseorganic/status/442007207500996608
  91. 73 days til #BaytoBreakers: http://fb.com/events/230371807134645 Start practicing Hayes Hill. Just 5 blocks. #hillsforbreakfast

    Twitter post 441629484765421568
  92. IndieWebCampSF is more than half full! Want to work on your own site? Join us Friday & Saturday: http://indiewebcamp.com/2014/SF

    Twitter post 441601578496438272
  93. Today: finished hosting a 2 day @W3CAB meeting @MozSF. Covered a lot, went well, took a photo: https://www.w3.org/wiki/AB

    Twitter post 441463844729520128
  94. Yesterday: #NPSF track, ran laps+sprints at Kezar while others did #trackattack: http://instagram.com/p/lIC5lYg9dZ/ http://distilleryimage1.ak.instagram.com/246143f2a3b111e39bbc126affa70b6d_8.jpg I went because another participant commented on the workout announcement that she was going to just run laps in the outside lanes, and I felt like I could do that too. Even before dawn, in the rain. This is a fast group. I couldn't even keep up with their warm-up lap. Still, I ran laps (lost count) for about 40-45 minutes straight, including some sprints on the straights (jogging the corners), and joined the planking/ab workout at the end. I had a great time and will be back to keep working on my pace. When I can keep up on the warmup laps, I'll step it up to the full track workouts. http://instagram.com/p/lIBqanFgyg/ http://distilleryimage1.ak.instagram.com/103de5b2a3af11e3a802125c560acf71_8.jpg

    Twitter post 441380780204642304
  95. #indieweb #5by5tv with @caseorganic live now http://5by5.tv/live!

    Twitter post 441252213277859840
  96. The very first IndieWebCampSF is this Friday & Saturday. Very limited space. RSVP and join us: indiewebcamp.com/2014/SF/Guest_List

    Twitter post 440528697217798144