Last Updated

Map

I’ve Joined the Indieweb Movement

Those of you following me on various networks may have noticed a flurry of different types of posts coming through. Taking a moment to explain this.

I recently learned about the Indieweb movement. Their philosophy is based on the idea that you publish on your own site and syndicate elsewhere. This matches up with the philosophy I currently have.

This site, david.shanske.com, has been here for a while, not doing much, and I’ve decided to try and adopt the Indieweb concept and use it as a place to distribute to all of the various social networks. I also want to get into sharing more, and am making an effort to add content/value.

I’m still working on the formatting a bit. So, there will be some changes to site appearance as I play with the site appearance and organization.

The site currently offers multiple different types of content:

  • Articles – longer form content
  • Notes – Notes are short content, and I’ve divided them into some types.
    • Status Updates – much like what you would expect on Facebook/Twitter
    • Photos/Images – Sharing photos
    • Links – sharing a link to a website/story

I am thinking about adding some more types as needed. The types are designed to have different display formats, which is why you would see some experimenting each time I post something, as I’m still trying to get it right. I do like to tinker and changes may come.

So, please pardon our appearance. Under Construction…permanently.

Design Obsession

One of the essential principles of the Indieweb is selfdogfooding: Using your own creations on your own personal site. Those who have been following this effort see I continue to make changes. But, what is interesting as I work on design is how the little details can drive you crazy. It is surprisingly challenging.

 

statustest

This is an example of a standard status update on the site. The blue icon is the comment icon, and next to it, linked to same, is the number of responses. I can’t help thinking that I don’t need both. But the rest of the line has an icon and information: Status and the Status Icon, the Time and a Time Icon, the Shared Icon with the icons of the sites I syndicated the post to.

If you look at this, which I classify as an article, not a status update, some of that information migrates to the top.

I also wanted to add a business card like area in the sidebar.

card

This is not a finished feature…but I’m innovating in public. I spent a lot of time on the other site, but this part is just temporary. You can see the icons that indicate places I syndicate copies of these posts to. I really like the look of those icons, however, they don’t quite fit on the full version on the site. It looks fine if it is on a phone(Yes, the site scales for mobile. Try it.)

Then we get to the profile box. The picture is too big. I probably need a new profile picture anyway, but I’m usually behind the camera, not in front of it. We’ll see what else I can do with this. I’ve been looking at other sites and how people do these sidebar bios.

There actually has to be a picture of me on the front page of the site, much as I don’t really want it, for syndication purposes. The photo is used as an icon for the link should anything I say be replied to elsewhere.

There will likely be more exploratory posts like this. So, here I am, worrying about the smallest detail. No wonder designers boast about chamfered edges and all sort of things users don’t normally focus on. I’ve never heard anyone say…”I see you picked Helvetica as your font. Great choice.”

More on exploring this to come. Feel free to comment on whether you want to hear about it or not. You can comment on the site or over on any of the syndicated networks. It will come back.

 

Memories

I imported all of my old Livejournal posts from a decade ago into WordPress to store them and purge them from Livejournal. Also appears I accidentally autoposted some of them to Twitter and Facebook. I’ve deleted them, but many of you may have seen them.

Something of a stupid mistake. Many of them were private at the time, and were supposed to come unpublished into the system for review. But, it is also evidence of how I’ve matured over the years, I suppose. You come to the realization of how you felt at different times in your life, which is why I moved the old entries in the first place.

It reminds me of why my sharing on the internet is so limited. Once you say something, you can’t unsay it, or delete it.

Getting Started with the Indieweb – Part 1

A segment of a social network

I’ve lately, if you’ve been paying attention to this website, gotten started with a movement called the Indieweb movement. To remind you from last time I mentioned it, the ideas of the movement are:

  • Your content is yours
  • You are better connected
  • You are in control

So, I figured it would be a good idea to write a simple tutorial in case you want to join on this. If you visit the indiewebcamp site, there is a wealth of information. But it seems overwhelming to some. This is my version of things, where I focus on it from the perspective of a non-techie typ. A large portion of the indieweb is about markup. Basically, marking up the elements of your site so they can interoperate with other sites.

  1. Get your own domain name and web hosting. If you want to own your content, you need to rent a place to put it.
  2. Put Up a Site. Will cover more of this. I use WordPress as a platform, which is very simple to set up.
  3. Add Links on the Site to Your Social Network Profiles and Links on your Social Network Profiles to Your Site. These should be marked up with a property called rel-me. This allows you to effectively say that Facebook you, or Twitter you is the same person as your new site, and vice versa. Both have to point to each other to avoid spoofing.
  4. Put up a Bio/About Page – Good to tell people who you are.
  5. Start publishing. What is the point of a worrying about some of this other stuff if you have nothing there.

The above doesn’t get into all the markup I mentioned. This is staking your claim for your little piece of the web. Next, I’ll get into the ‘cooler’ stuff. I’m really enjoying getting involved in this.

This site is running WordPress, which is used by roughly 20% of websites. A lot of the functionality I mentioned, as well as what I’ll be talking about on this in the future, can be put into WordPress using plugins. This includes things like syndicating content to other sites and importing content from those locations. It has given me an excuse to start developing and redeveloping code to support this.

So, some of those who follow me may find me being a bit more techie than normal.

 

Making Fun of SEO Optimization Offers

How to Search Engine Optimization

I got a comment on the sharing of a link on rainy weather in NYC. So…it was just the link and a short comment on it. It was not an article.

Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at.

So, according to Mr. Spammy SEO type, I should spread an H1, H2, and H3 tag in my article. Let’s convert that into English. I should have three levels of headings. Title, subtitle, section?

Then, I should have a keyword in my title and it should appear in the first paragraph and last sentence of the page. This would be basic advice on non-fiction writing dating back long before Google. The title of your article should be relevant to your topic(or keyword). Your first paragraph should set out the point of your entire article. The last sentence of your article should summarize the point you tried to make.

It then tells me there should be an image with an alt tag that has the keyword. Well, people respond to images. I always try to find a random image(and I have a plugin that helps with that) to add a little color. I probably should start searching my own photo archives for photography.

So…what if there was a plugin that could make me more popular, regardless of how horrible my writing is? I think I’ll just try to write well, thank you very much.

Semantic Comments and User Testing

Last month, I unveiled my new theme for this site, which I had spent two weeks working on. There is still a lot I want to fix…not thrilled with the business card in the sidebar and I think it needs work.

But since, I’ve been systematically dismantling everything I built. Not quite. I’ve been taking the theme and breaking off pieces of it into independent plugins. The first of this is the Semantic Comments plugin. This is an extension of the facepile code I created. Facepiles are a row/rows of profile photos of individuals who have completed an action related to the current page…such as Like, Mention, Repost, etc.

It gave me the chance to do something even more geeky. I posted my code to Github. You can visit the repository and download it, criticize it, comment on it, at Semantic Comments. A professional programmer friend of mine told me that you never stop being convinced your code is garbage.

But, one of the more recent decisions I made for this plugin, and thus my site, was inspired by the words of Kartik Prabhu on his site, Parallel Transport, in an article called, “No Comment.”

“Why this expectation that every blog must be a discussion forum? Public discussions can be had on social platforms like Facebook, Twitter, Google+”.

So, comment over there, and I’ll pull your comments in back here. I’ve automated it and it is no trouble. Or comment on your own site. But this is something of a novel idea for people. So I took the comment form out. It was only one line of code anyway. I could change my mind later, I guess.

So, at the bottom of the post, you’ll see some options.

Screenshot from 2014-05-26 20:04:31

Then, below the comments, you’ll see…

Screenshot from 2014-05-26 20:04:36

If it is a full article, you’ll see different Quick Actions. The Favorite, Reply, Repost ones go to Twitter. They are the only ones who support this sort of link without demanding I use their social buttons…you know, the ones everyone has.

Screenshot from 2014-05-26 20:04:45

 

I rearranged the order, I fiddled with the text …and I asked a lot of people if they’d have a look at my test site to see if they understood it. Some of you may have been in that group.

I still haven’t found the magic bullet. Some people told me they thought they needed to paste whatever the link they commented on into the box. Others weren’t sure how they’d respond. It is proof that any new way of doing things may contain a barrier in adoption.

You may have noticed that Twitter, Facebook, Google+, etc all are starting to look very similar. One reason seems to be that people instantly are familiar with portions of the layout.

I’m continuing to iterate, change, try to find the best way to do things, but this is where user testing comes into place. What is missing…what could be better…how can I have the simplest presentation possible with the elements I have?

Thoughts?

Unified and Contextual Communications

A while back, I was reading Tantek Çelik’s attempt to better define People Focused Mobile Communications. I have had the pleasure of meeting Tantek on two separate occasions at Indiewebcamp events. Ever since I missed a discussion on this matter at the end of this month, I’ve been thinking about it, although not just for mobile.

Tantek asked, “What if our mobile devices focused on people first and apps second? Remember when they used to? When you looked up a person first, and decided to txt, call, or email them second?”

I remember when I used Trillian on Windows, and now Pidgin on Linux to unify my instant messaging contacts. I didn’t have to care if Bob was on AIM, YIM, ICQ(dating myself there, aren’t I?).

I don’t mind installing applications as methods of communication, but that is the plumbing. I don’t see people going off and saying they want to know how their water gets to their sink. They just want it to work. But, as time has gone on, companies have moved away from allowing third-party clients, which means that third-party clients that take multiple services and a common interface may not be possible in the future.

So, that means that any people-focused communication has to tell a service to launch their application to handle it. The proposal would have you visiting the person’s website, see their page that shows methods of communications in order of priority, look for the method of communication, tap/click it, and you are taken to the website/native application that handles that service.

And, if you make the site smart enough, it can change the presentation based on availability and other factors. If you want people to authenticate their identity somehow, it could show different presentations to friends over strangers.

It sounds very nice. But how does one build such a thing? Or even start building toward such a thing. I’ve been building things I myself want to have for my site. .

There are two ways for a web browser to register handlers for specific types of communication. One is outlined in this Mozilla document and shows how websites can register themselves. Gmail, for example, offers to registers itself to handle email. The second is the registering of an app to handle these. This is pretty common on Android, for example…that a specific action can launch an external application to handle it. For example, if I click a Youtube link on a webpage on my phone, it will ask me if I want to open it in the Android Youtube app. Until recently, iOS has done this using URL handling schemes, but apparently in iOS 8, they will be getting something called App Extensions that will allow this functionality.

Even Facebook got into the app to app communications issue at their last developer conference with AppLinks.

So, in the end, the barrier is that the desktop experience is fragmented, the mobile experience slightly less so, but there is currently no way to ensure a consistent communications experience. If you don’t believe me…try clicking this email link. Did it open your usual email or webmail client?

If the web is the medium by which we communicate, and the web is being sectioned off into silos or walled gardens…sites whose goal is to keep your communications and activities wholly inside their ecosystem, then how do you make communications transparent so the person trying to reach you doesn’t have to know what medium you prefer, that is all handled for them?

So, let’s go back to how we build such a thing. For now, it is create a space…a website that tells people where to reach you. In the old days, we’d use a business card…but the modern tools have the same utility.

In the below shot, from one of my previous articles on this site, I have a series of social buttons that tell you how to find me on Facebook, Twitter, etc… but not how to communicate with me.

That will be changing…or at least enhancing…as soon as I figure out how to convey that. In the meantime…you are welcome to try and find me whatever way you wish…

card

References