A pencast overview (with audio and recorded visual diagrams) of IndieWeb technologies

I’ve seen a bunch of new folks coming into the IndieWeb community recently who are a bit overwhelmed with the somewhat steep learning curve of both new jargon as well as new ideas and philosophies of what it means to have one’s own domain and presence on the internet.

While parts of the IndieWeb’s overall idea are quite simple, where the actual rubber meets the road things can be a bit overwhelming, and more so if you’re a non-technical person. This doesn’t have to be the case. Generally I’d recommend to people to begin attending local Homebrew Website Clubs or, even better, to attend an IndieWebCamp in person to get a one day crash course followed by a day of building and help. Sadly, life can intervene making these not as quick and immediate a reality as one might otherwise like.

So toward the end of making the crash course to explain in relatively broad terms some of the basic terminology as well as some of the bigger individual pieces and what’s happening when using an IndieWeb site with most of the major new functionality built in, I’ve made a short pencast of what is going on. Naturally there’s still a tremendous amount to learn and do, and a million things which could always be better or improved, but if you’re setting up a site using WordPress this overview will hopefully get you a lot further a lot faster. (It may also be useful for those setting up Known or even something for micro.blog, though those will have different plugins and other small quirks that aren’t covered here.)

What is a Pencast?

Pencast?! What is that? It’s a technology that has been around for a while courtesy of Livescribe.com digital pens which not only record an audio file of what is being said, but also record penstroke by penstroke what is being written. Even better the audio and the penstrokes are crosslinked, so you can more easily jump around within a lecture or talk.

To do this you should download the version of the notes in Livescribe’s custom Pencast .pdf format. This seems like a standard .pdf file but it’s a bit larger in size because it has an embedded audio file in it that is playable with the free Adobe Reader X (or above) installed. With this version of the notes, you should be able to toggle the settings in the file (see below) to read and listen to the notes almost as if you were sitting with me in person and I was drawing it out in front of you as I spoke. You can also use your mouse to jump around within the pencast by touching/mousing to particular areas or by jumping forward and back by means of the audio bar. If you need to, also feel free to zoom in on the page to have a closer look.

Pencast version

An IndieWeb Crash Course [14.9MB .pdf with embedded audio]

Viewing and Playing a Pencast PDF

Pencast PDF is a new format of notes and audio that can play in Adobe Reader X or above.

You can open a Pencast PDF as you would other PDF files in Adobe Reader X. The main difference is that a Pencast PDF can contain ink that has associated audio—called “active ink”. Click active ink to play its audio. This is just like playing a Pencast from Livescribe Online or in Livescribe Desktop. When you first view a notebook page, active ink appears in green type. When you click active ink, it turns gray and the audio starts playing. As audio playback continues, the gray ink turns green in synchronization with the audio. Non-active ink (ink without audio) is black and does not change appearance.

Audio Control Bar

Pencast PDFs have an audio control bar for playing, pausing, and stopping audio playback. The control bar also has jump controls, bookmarks (stars), and an audio timeline control.

Active Ink View Button

There is also an active ink view button. Click this button to toggle the “unwritten” color of active ink from gray to invisible. In the default (gray) setting, the gray words turn green as the audio plays. In the invisible setting, green words seem to write themselves on blank paper as the audio plays.

 
If you have comments or feedback, I’m thrilled to receive it. Feel free to comment below, or if you’ve already IndieWebified your site, write your comment there and send it to me via webmention, or add your permalink to the box below. Ideally this version of the pencast is a first draft and I’ll put something more polished together at a later date, but I wanted to get this out there to have a few people test-drive it to get some feedback.

Thanks!​​​​​​​​​

Syndicated copies to:

Reply to Bridgy Registration

Replied to Bridgy Registration · Issue #102 · indieweb/wordpress-indieweb (GitHub)

I have some functionality in the Bridgy app that allows someone to register for Bridgy for various services. I'm thinking of moving this functionality into the Indieweb plugin. All it is is a series of links that redirect you to the Bridgy site and redirect back when done.

That seems like Indieweb plugin territory.

I think there’s certainly a case to be made that it may make sense to include it in the IndieWeb plugin, particularly as it’s often a one time set up operation.

I also think that it might make a lot of sense to put that piece into the Syndication Links plugin as well since that’s a piece that directly relates to something Brid.gy is looking for to do backfeed. Doing this may also make even more sense if Syndication Links becomes a tool for POSSE as well. It would be nice to have a definitive one-stop-shop for syndication and backfeed related functionality.

As a “throw-away” aside, if you’re looking for a good name for such a thing, perhaps Boomerang? Throw your content out there and all the responses return back to your site?

 

 

Syndicated copies to:

Setting up WordPress for IndieWeb use

I spent some time this morning doing a dry run through setting up a suite of IndieWeb plugins on a fresh WordPress installation. Going off of a scant outline I talked for almost two hours describing IndieWeb functionality as I set it all up. Hopefully it will provide a useful guide to newcomers to the space until I can write up a more solid outline and take a more polished approach. Apologies in advance for the roughness of the audio, lack of quality, and even live mistakes. Hopefully folks won’t mind suffering through until we can come up with some better tutorials.

As prerequisites, I assume you’ve already got your own domain and have installed WordPress on a server or other host. I actually finish setting up the WordPress install as I start the video and then sign in for the first time as we begin.

While many of the core plugins are straightforward, there is a huge amount of leeway in how folks can choose (or not) to syndicate to sites like Twitter, Facebook, and others. Here I make the choice to use the Bridgy Publish plugin and only demonstrate it with Twitter. With one example shown, hopefully other silos can be set up with Brid.gy as well. The IndieWeb wiki details other options for those who want other methods.

At the end I walk through creating and syndicating a post to Twitter. Then I demonstrate commenting on that post using another CMS (WithKnown) from a separate domain.

I do my best to provide verbal descriptions and visual examples, but these can certainly be supplemented with further detail on the IndieWeb wiki. I hope to come back and add some diagrams at a later date, but this will have to suffice for now.​​​​​​​​​

For those who would like an audio only version of this talk, you can listen here (.mp3):

Syndicated copies to:

Feature Idea: UI code to create an original-of page and/or widget

Filed an Issue Syndication Links Plugin for WordPress (dshanske/syndication-links) (GitHub)
Add and Display Syndication Links https://wordpress.org/plugins/syndication-links/

I noticed that Kartik has an an original-of page at https://kartikprabhu.com/original-of which may have inspired the original-of URL functionality for use in Syndication Links.

For improved UI, is there a code snippet that could be created (or which already exists?) that could be added to a custom page to allow the creation for a simple search for such things the way Kartik has done? I’m thinking of something along the lines of <?php get_search_form(); ?> which can be added to 404 page templates to allow the addition of a search box on such a page to get the user moving in the right direction.

This type of original-of search functionality could also be added to a simple widget as well so that one doesn’t need an entire page for it. Suggested verbiage: “Have a social media permalink for a piece of content? Use it here to search for the original version on this site.”

Syndicated copies to:
Replied to Support for importing syndication links for Mastodon Autopost · Issue #75 · dshanske/syndication-links by Chris Aldrich (GitHub)
Now that SL has the Mastodon icon (#66), I'll also note that the latest version of Mastodon Autopost plugin should now also support importing the URL for the last successful toot to allow the closure of automating the POSSE loop.

I’m verifying, for the tape since I know you don’t use Mastodon Autopost, that this works as expected now.

Syndicated copies to: