#indiewebcamp 2012-08-31

2012-08-31 UTC
spinnerin, Alphi, edrex, tantek and adactio joined the channel
#
andyhume.net edited /2012/UK/Guest_List (+290) "/* Creators */" (view diff)
danbri and barnabywalters joined the channel
#
Loqi barnabywalters: aaronpk left you a message on 8/30 at 4:04pm: Thanks for the tip! I cleaned up the markup a bit!
danbri, spinnerin, spinnerin_, barnabywalters_ and barnabywalters joined the channel
#
barnabywalters aaronpk: I stole your .minicard css — it's v. effective. If other people like it, shall we informally declare that the standard small block markup for profiles?
#
barnabywalters it would also be useful to come up with standard markup for inline people references — Probably minicard but without the url and with a tiny profile photo
#
barnabywalters .microcard
tantek_, danbri_ and danbri joined the channel
#
barnabywalters the next thing after that is to implement an indieweb version of @anywhere
#
barnabywalters perhaps with bootstrap popovers
#
barnabywalters no need to make up something new
#
aaronpk great!
#
aaronpk indieweb @anywhere would be really interesting!
#
barnabywalters aaronpk: I need some practise doing front end dev, so I'm going to hack something together this evening
#
barnabywalters was also thinking of making a really nice h-card generator where it gives you different layouts (full, minicard, microcard) and control over back compatibility
#
barnabywalters aaronpk and tantek_: can you have a look at the microcard on http://test.waterpigs.co.uk/activity/ and let me know what you think re UX, styling and markup?
#
barnabywalters may have to empty cache, I've only just pushed new stylesheet
#
aaronpk ah there it goes, nice
#
aaronpk the inline one is nice!
#
barnabywalters thanks, that's the microcard
#
barnabywalters that's what indieweb @anywhere (name ideas?) will use, then a popover on hover
#
barnabywalters just having tea, bbiab
barnabywalters joined the channel
#
barnabywalters just tested that styling with multiple font sizes - it scales quite nicely, but the image and the border go out of sync above a certain size
#
barnabywalters I'm not overly fussed about fixing that right now
danbri, lmorchard, dascher, dascher_ and tantek joined the channel
#
tantek barnabywalters - indieweb @anywhere is basically just hCard + a little JS
#
tantek you should totally fork the hCard creator and go have fun with it
#
tantek re: thinking of making a really nice h-card generator where it gives you different layouts (full, minicard, microcard) and control over back compatibility
#
Loqi I agree
#
tantek thanks Loqi
#
Loqi you're welcome
#
tantek barnabywalters, re the "microcard"
#
tantek you mean this?
#
tantek <a class="microcard h-card"><img class="photo logo u-photo" alt="Barnaby Walters" src="/img/photos/meRaglan100.jpg" /> Barnaby Walters</a>
#
tantek a few things:
#
tantek 1. the alt is redundant since you have your name following
#
tantek (imagine a voice browser just reading your name twice - not helpful)
#
aaronpk what about html validators complaining about missing alt tags?
#
tantek if that's the only semantic conveyed - "here is this person", you can just use alt="" to indicate that the image is representative of the same thing as already visible text
#
tantek alt="" is how you explicitly indicate that semantic, that the image is representative of the same thing as already visible text
#
tantek alt="" is also used for purely decorative images that have no semantic
#
aaronpk aha
#
tantek though technically you should use CSS bg images for that
#
tantek 2. you should decide explicitly if you want uf2 only (which is fine I think for such minimal hCards) or both uf1 and uf2
#
tantek assuming you want only uf2
#
tantek checks http://microformats.org/wiki/microformats-2-implied-properties
#
tantek ok, for now:
#
tantek <span class="microcard h-card"><a class="p-name u-url"><img class="u-photo u-logo" src="/img/photos/meRaglan100.jpg" /> Barnaby Walters</a></span>
#
tantek but your original markup pattern (without classes) is so close to an existing uf2 implied properties example: http://microformats.org/wiki/microformats-2-implied-properties#hyperlinked_image_and_name_photo_url_properties
#
tantek that I'm wondering if you we should add your markup pattern as another one for implied properties consideration
#
tantek in fact I'll just add it for consideration
#
tantek since you came up with the markup pattern yourself, unprompted, in a real world situation
#
@erinjo @dreev I remember looking at it when we were at IndieWebCamp. I should definitely give that a try too.
dascher and spinnerin joined the channel