What is a Persona?
Reposted from Mike’s Musings
After I introduced Personas Interactive, I indicated that my next topic was going to be Enhanced Personas. As I was writing that post, though, I realized that I was putting the cart before the horse. Before I explain how we’ve enhanced Personas, I need to give more detail as to how you can put Personas on your website. Then we can talk about the enhancements we’ve made and how you can use them in your Personas. Remember that to really see these things in action, you need Personas Interactive. You can download it from here.
So what exactly is a Persona? You probably think of a Persona as just an image that goes in the background of your web browser. But Personas are not just the images. They are also a JSON file that gives a little bit of information. Here’s what a bare bones Persona looks like:
{"id":"mypersona@kaply.com",
"name": "My Persona",
"headerURL": "http://kaply.com/images/mypersona.png"
}
To use this Persona in a web page, Firefox introduced an attribute called data-browsertheme. To designate that an element on a web page defines a persona, you add that attribute to any element (usually an image):
<img alt="My Persona"
data-browsertheme='{"id":"mypersona@kaply.com",
"name": "My Persona",
"headerURL": "http://kaply.com/mypersona.png",
}'
src="mypersona.png"
id="mypersona-preview">
Having the data as an attribute on the image isn’t enough, though. We need to have some JavaScript that hooks everything together. Personas works by using custom DOM events to indicate when an image is previewed, installed and reset. Here’s what preview looks like:
var event = document.createEvent("Events");,
event.initEvent("PreviewBrowserTheme", true, false);
document.getElementById('mypersona-preview').dispatchEvent(event);
Writing this code every time would be tedious, so I’ve created helper functions that do this for you. You can download them here. Attaching all the appropriate Persona events to a node is matter of calling attachPersona and passing it the node that you want to use for your Persona preview.
Now you may be thinking that it would be difficult to maintain JSON embedded in a web page, and you would be correct. What we need is an automated process to generate a Personas gallery. At the beginning of this article, I mentioned that Personas are described in a JSON file. What we want to do is store JSON files directly on our server and generate web pages that use the data contained in those JSON files. The reason for this is three fold. First, because it makes it easier to maintain, second because Personas can be updated by pointing to the JSON file directly, and third because we will use those JSON files for site specific Personas which we talked about in the previous post.
I’m a PHP developer, so the example I am going to provide is how to generate a Personas gallery using PHP. For my basic example, I’m using a top level directory with an index.php that will be my gallery and subdirectories that represent each Persona. Those directories are named for the Persona and contains a persona.json file, a PNG file used for preview that is named the same as the directory, and any other supporting images, like the background or icon. To generate a gallery item, you call the function generateGalleryItem passing it the name of the directory. Here’s some PHP code that does this:
<?php
function generateGalleryItem($name) {
$handle = fopen("$name/persona.json", "rb");
$contents = stream_get_contents($handle);
fclose($handle);
$persona = json_decode($contents);
?>
<img alt='<?php echo $persona->name; ?>'
data-browsertheme='<?php echo $contents; ?>'
src='<?php echo $name; ?>/<?php echo $name; ?>.png'
id='<?php echo $name; ?>-preview'>
<script type="text/javascript">
attachPersona(document.getElementById("<?php echo $name; ?>-preview"));
</script>
With these code examples, you should be able to get a Personas gallery working on your website.
Earlier I talked about the fact that I was giving an example of a bare bones Persona. Now would probably be a good time to talk about what else you can specify in a Persona JSON file. Personas support the following attributes which are all strings:
https, but for Personas Interactive, we allow http as well.Site Specific Personas
I mentioned site specific Personas, so I might as well give you that information as well. To enable a site specific Persona, add the following code to the header of your website:
<link rel="persona" type="application/json" href="https://mydomain.com/mypersona/persona.json" />
The href points to the JSON file that describes your Persona. If you want to use a Persona from getpersonas.com, navigate to the Persona and then look at the URL. You’ll see a number at the end of the URL. The format for Persona update URLs is https://www.getpersonas.com/en-US/update_check/%ID%. Just replace %ID% with the number at the end of the URL.
One other thing before I close this out. I find the site JSONLint.com invaluable for debugging my JSON. Not only can you paste JSON there, but if you put a URL to your JSON file, it will read it and check it. I can’t recommend it enough.
I hope this has helped you get started adding Personas to your site. Next post – Enhanced Personas. I promise.
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=e6ec6822-d230-4269-840f-28378bb0af29)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=ab5b7cd0-5315-49be-b8e4-4f521aba9512)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=8abecc13-90bf-471d-aa3c-131639a258c2)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=56600de5-7fa0-49a6-8a17-d29442e1072c)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=eaf954ae-f40f-4bb3-81fc-3b8534d862b6)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=fb407e96-55ab-4805-b1b8-3b12e3fbb9c4)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=9b5399d1-1c49-4daf-94e4-13a846ba565c)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=59f38483-a9e5-47da-8a3b-b27fcc16abd4)
Twitter
YouTube
Facebook