{"@context":{"rdf":"http://www.w3.org/1999/02/22-rdf-syntax-ns#","rdfs":"http://www.w3.org/2000/01/rdf-schema#","owl":"http://www.w3.org/2002/07/owl#","foaf":"http://xmlns.com/foaf/0.1/","dc":"http://purl.org/dc/elements/1.1/","dct":"http://purl.org/dc/terms/","sioc":"http://rdfs.org/sioc/types#","blog":"http://vocab.amy.so/blog#","as":"https://www.w3.org/ns/activitystreams#","mf2":"http://microformats.org/profile/","ldp":"http://www.w3.org/ns/ldp#","solid":"http://www.w3.org/ns/solid#","view":"https://terms.rhiaro.co.uk/view#","asext":"https://terms.rhiaro.co.uk/as#","dbp":"http://dbpedia.org/property/","geo":"http://www.w3.org/2003/01/geo/wgs84_pos#","doap":"http://usefulinc.com/ns/doap#","time":"http://www.w3.org/2006/time#"},"@graph":[{"@id":"https://rhiaro.co.uk/2010/10/professional-1","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-6437031516942092588","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"
[This post is written as an informal part of a university module]
\r\n
\r\n
\r\nSpeaker: Ken Blair of BMP Recording
\r\nArea: Sound recording/engineer
Although Ken’s area of expertise is not directly relevant to my degree, I have\r\nfrequently worked alongside media students both informally and more recently\r\nas part of a start-up company in Sparkhouse. Thus I am able to relate to many\r\nof the things he discussed about sound engineering, as I have had second-hand\r\nexperience of creating soundscapes for animations, or musical tracks for short\r\nfilms, for example. I wrote lots of notes about the details of the things he\r\ndoes on a regular basis, and the differences between on-location and studio\r\nrecording; between recording pop music and recording classical. But it seems\r\nfruitless to transcribe them all here, when his day-to-day experience, while\r\ninteresting, is of little consequence to me personally.
\r\nHowever what did catch my interest was that Ken started his own company\r\nstraight out of university, similar to what I am involved with in Sparkhouse.\r\nHe discussed the ‘catch twenty-two’ of needing industry experience to find\r\nwork for your company, but people being unwilling to hire because of a\r\nperceived lack of experience. He also affirmed that the decreasing cost of\r\ntechnology has made it easier for people to create their own recording studio\r\nsetups, enabling freelancers to charge the absolute minimum for the work they\r\ndo, causing a very competitive price market.
\r\nI (and the others I am working with in Sparkhouse) have fortunately been able\r\nto take advantage of the latter issue to solve the former. Several years as\r\ninformal student freelancers meant we could afford to charge the minimum, or\r\nwork for free, with the focus being on gaining experience and reputation\r\nrather than worrying about earning money. Now we have started our own company,\r\nwe can start charging ‘real world’ prices to bigger companies, and are able to\r\ndo so supported by a significant portfolio of existing work.
\r\nKnowing that this method has so far worked for myself and others, I feel Ken\r\ncould have offered his hindsight to those in the audience who may not have had\r\nthe same experience. That is, he could have advised to take advantage of the\r\nyears of having a student loan and lots of free time to build up a portfolio\r\nof work and experience relevant to an individuals particular career aims,\r\nwithout needing to worry about taxes and bankruptcy. This would help to avoid\r\nthe problems that his own company had right at the beginning.
\r\nHaving said that, level three is probably too late for students to be hearing\r\nthat kind of advice; it might be more useful, and inspirational, during level\r\none.
\r\nKen did offer advice about writing CVs, for those who do have little industry\r\nexperience - to focus on one’s skills, rather than one’s past jobs - but\r\ncommented that employers of new graduates are sympathetic to the lack-of-\r\nexperience problem, understanding that their job applicants have just come out\r\nof university. I’m not convinced that this is a good message to be sending...\r\nPerhaps employees of sound engineers and audio technicians think differently,\r\nbut my experience so far in the computing industry (mainly software and web\r\ndevelopment areas) has taught me that the new grad job market is so saturated\r\nwith graduates with high calibre degrees that having something on your CV that\r\nyou have done, rather than can do is vital.
\r\nAnyone can list the modules they’ve done, and the programming languages they\r\nhave dabbled in over the course of three years. You stand out if you write\r\nabout the open source project you contributed to in a specific language, or\r\nthe academic poster you presented at a technology conference about your chosen\r\nfield. Listing skills has a lot more impact if you can prove that they really\r\nare your skills.
","as:name":"Professional Practice, guest speaker number one","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2010-10-08T13:41:00.000Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/done"},{"@id":"blog:Done"},{"@id":"https://rhiaro.co.uk/tags/bsc"},{"@id":"https://rhiaro.co.uk/tags/Ken+Blair"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/Lincoln"},{"@id":"https://rhiaro.co.uk/tags/professional+practice"},{"@id":"https://rhiaro.co.uk/tags/lincoln"},{"@id":"https://rhiaro.co.uk/tags/ken+blair"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-04-01T00:15:03.049Z"}},{"@id":"https://rhiaro.co.uk/2010/10/professional-2","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-8361538417984548969","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"[This post is written as an informal part of a university module]
\r\n
\r\n
\r\nSpeaker: Roy Isbell
\r\nArea: Digital security
Depending on your point of view, you can probably claim the company you\r\nstarted was successful if it is eventually bought out by a global giant, such\r\nas Symantec. Roy certainly had this air of success about him as he told us\r\nabout the route he'd taken to get where he is today. But he didn't dwell on\r\nhis life story for the entire hour as we half expected. Instead he gave a\r\nthought provoking presentation about digital security issues, from their\r\norigins in the days when losing your data was the biggest concern, to modern\r\nday crackers, malware and botnets.
\r\nHe emphasised how much of a profitable growth industry digital security is,\r\nfrom both the point of view of those trying to breach the security, and those\r\ntrying to prevent the breaches. Roy mentioned that the UK government has\r\nrecently allocated £8 million to cyber security but a quick search* yielded\r\nnothing to back this particular claim up... Instead I found articles from as\r\nrecently as this afternoon about the £1 billion that will be spent on this\r\nissue, as well as quite a few statistics that reinforce\r\neverything else Roy had to say about the activity and effectiveness of\r\nbotnets.
\r\nSo although I'd heard of most, if not all, of the buzzwords that came out of\r\nRoy's presentation, I'd never really thought about them. That's not entirely\r\ntrue. I use free anti-virus software and common sense when I'm browsing.\r\nGoodness knows data security was hammered into all the new Google interns on\r\nthe day they handed over our shiny new MacBooks. But when you log into your\r\nInternet banking from your own laptop, what could possibly go wrong? How can\r\nthis textbook company you've never used before, that you're putting your card\r\ndetails into right now, possibly not be legitimate? Why would a stranger in\r\nRussia be interested in logging my keystrokes? It's one of those... It'll\r\nnever happen to me situations.
\r\nI paid attention though, because although I've never really built a web\r\napplication big (powerful, used, important) enough to warrant anything more\r\nthan sanitising database entries before, I will be doing this year. So I\r\nshould probably get wise to this network security stuff.
\r\n*A search of thirty seconds or less being all the multi-tasking, attention-deficit 'Internet generation' of today are capable of.
","as:name":"Professional Practice: guest speaker number two","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2010-10-15T21:30:00.000Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/done"},{"@id":"blog:Done"},{"@id":"https://rhiaro.co.uk/tags/bsc"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/professional+practice"},{"@id":"https://rhiaro.co.uk/tags/Roy+Isbell"},{"@id":"https://rhiaro.co.uk/tags/roy+isbell"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-03-31T23:58:40.266Z"}},{"@id":"https://rhiaro.co.uk/2010/10/professional-3","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-4098417616544593468","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"[This post is written as an informal part of a university module]
\r\n
\r\n
\r\nSpeaker: Paul Charman
\r\nArea: CV Writing
I've had so many patronising talks about CV writing in my life that I'll admit\r\nI was dreading yet another. The fact that Paul almost at once acknowledged\r\nthat his slides and advice may be patronising was a good start though, I\r\nsuppose. I have no doubt that for people who have not been subjected to so\r\nmuch identical advice in their lifetime would have found the talk useful and\r\ninformative, but for me it served only to reinforce everything I already knew.
\r\n(Not to mention contradict some of the things the first speaker of this module\r\nsaid, and consequently support some of my comments in my first blog post).
\r\nWith every website, book, tutor and professional giving out matching advice\r\nabout CV writing, it baffles me how people still manage to get it wrong. But I\r\nguess advice is rarely given out for people to take. I do feel I learnt a\r\ngreat deal about the subject over summer, working closely with the staffing\r\nteam at Google (although there are many company-specific quirks, that may not\r\napply to the wider industry). But if I want fresh, new advice about applying\r\nfor jobs, I feel I would seek it from a recruiter, someone in the industry...\r\nsomeone who actually reads and judges the CVs for a living. But even then,\r\nuntil recruitment processes in general get a massive overhaul, there is only\r\nso much anyone can say about the subject.
","as:name":"Professional Practice: guest speaker number three","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2010-10-22T13:27:00.001Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/cv"},{"@id":"https://rhiaro.co.uk/tags/done"},{"@id":"blog:Done"},{"@id":"https://rhiaro.co.uk/tags/bsc"},{"@id":"https://rhiaro.co.uk/tags/careers+advice"},{"@id":"https://rhiaro.co.uk/tags/CV"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/Paul+Charman"},{"@id":"https://rhiaro.co.uk/tags/professional+practice"},{"@id":"https://rhiaro.co.uk/tags/paul+charman"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-03-31T23:58:17.543Z"}},{"@id":"https://rhiaro.co.uk/2010/12/adventures-html5","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-1155962792396230557","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"So I was all excited about block level links.
\r\nBut then Firefox had to go and vomit the DOM all over the\r\nplace.
\r\nWhich, incidentally, screwed with my layout somewhat.
\r\nEverything else could handle it. Including IE6. Grr. For the record, this\r\nwas Firefox 3.6.10, Windows and 3.6.13 on Mac.
\r\nSo I'll be keeping an eye on that one before trying it again.
\r\nYAY FOR LEARNING!
","as:name":"Adventures in HTML5","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2010-12-30T19:00:00.001Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/done"},{"@id":"blog:Done"},{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/HTML5"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/web+dev"},{"@id":"https://rhiaro.co.uk/tags/html5"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-04-01T00:14:52.541Z"}},{"@id":"https://rhiaro.co.uk/2010/12/having-been","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-2313405842757514479","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"I write this as a commitment to producing a number of useful things over the\r\nnext two weeks. And I will read all of Jeremy Keith’s books. And I will make\r\nsure all of my sites validate, even the ones I did in a hurry. And I will\r\nrebuild my portfolio with HTML5, and for mobile.
\r\nI’m going to start tomorrow. Promise*.
\r\nI’m now reading this.
\r\nThings are being learnt.
\r\n[A summary of things I feel about HTML5, from a sleep-deprived mind]
\r\nIt feels like it should be much later... earlier... than that. I’ve spent\r\nhours and hours reading debates about HTML5. Mostly debates in the comments\r\nof blog posts and articles. I feel fairly well versed in two sides of the\r\nargument, the nature of which boils down to “HTML5: What is the point?⁂.
\r\nMy personal view is that progression is good. Development for the sake of\r\ndevelopment is good. Even if you don’t get it right the first time, at least\r\nyou’re doing something, and not just whining about it. Someone (yeah, someone\r\nimportant, I don’t do citations at this time in the morning) said that HTML5\r\nwas being developed for the present, and that it will be rewritten in the\r\nfuture, to meet the needs in the future. Lots of people had a problem with\r\nthat concept, as we should be developing for the future. Lots of people\r\nsupported that concept, as predicting the future is quite a challenge. I\r\nhaven’t decided where I stand yet. Maybe I don’t need to.
\r\nI like the fact things are changing, because it makes me feel excited and\r\nchallenged and all that. It upsets me a little that I’d just got the hang of\r\nall this web development malarky, and now there’s more?! Lots of people seem\r\nto feel the same about the latter. Which is understandable. Understandable\r\nin a world where the web is expected to be a fixed thing, and you make a\r\nwebsite, and it works, and customers are happy, and clients are happy, and it\r\nstays like that forever. But the world and the web (and customers and\r\nclients) are fluid and flowing and flexible and fickle. Peoples’ needs\r\nchange, hardware changes, software changes, businesses change. They always\r\nhave, and always will, so where this idea that the web should whoa slow down a\r\nsecond and wait for the slower ones to catch up has come from, I’m not quite\r\nsure.
\r\nThis makes it sound like HTML5 appeared overnight. Which for me, in a way, it\r\ndid. Appeared to my conscious, concentrating, information-absorbing mind,\r\nanyway.
\r\nBut the part where the HTML5 spec has been under development for like six\r\nyears or something now? Come on guys. I know it’s not easy, but really.\r\nGive the lazy people something to complain about. Or at least make a big deal\r\nout of it from the start. So ‘they’ can start thinking about it from the get-\r\ngo. Maybe a big deal was made, and I just missed it. But I was making\r\nwebsites six years ago, just. So if I missed it, ‘they’ did too.
\r\nThat last paragraph went a bit to the dogs. What I’m trying to say is: the\r\nlittle man on the ground, the guy making the websites day-to-day, the guy\r\ndabbling, the guy fouling up the standard mark-up you hold so dear... Tell him\r\nwhat you’re doing, as you’re doing it, so he’s prepared.
\r\nI know you can’t force change. Hell, outside of term time I still live under\r\na regime where IE6 is deemed a perfectly adequate browser, installing Chrome\r\n‘breaks’ IE, so isn’t allowed, and [insert new web thing since 1997] might be\r\na great feature, but since my father doesn’t explicitly use it, any\r\ndevelopment on that front is pointless. Hey, he even (almost daily) states\r\nangrily that film making companies are at fault because their productions are\r\nshown letterboxed on his 4:3 TV. (I just searched so I could state that\r\nwidescreen TVs have been commonplace since [year], and discovered that films\r\nhave been being made in widescreen since around 1929. HAH. I’ll quote that\r\njuicy fact next time). But this is whole other blog post.
\r\nI was going somewhere with this. Oh yes.
\r\nI still don’t know whether I can put a
\r\nThat’s all I was trying to find out when I stumbled across the various\r\ndebates.
\r\nI’m officially declaring the HTML5 spec subject to interpretation.
\r\nAnd I’m putting the
\r\nPS. Thanks for the great work on developing HTML5, guys. My life would be\r\ndull and repetitive without the likes of you; I’d be reading and writing a lot\r\nmore fiction, and spending far more time with my family. Much obliged.
","as:name":"It's only half past one.","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2010-12-29T02:20:00.006Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/done"},{"@id":"blog:Done"},{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/HTML5"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/progression"},{"@id":"https://rhiaro.co.uk/tags/rant"},{"@id":"https://rhiaro.co.uk/tags/html5"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-03-23T02:18:43.834Z"}},{"@id":"https://rhiaro.co.uk/2011/05/design","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-5487103910304554663","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"At the Future of Web Design conference earlier this month, I was inspired. As\r\na developer primarily and a designer when I have to be, the talks and people\r\nat FOWD were perhaps more valuable to me than if my main focus was on design.\r\nI don't need inspiration to develop, but I do to design.
\r\nBut an incredibly busy week and a bit later, I find I haven't had an\r\nopportunity to really make use of the ideas that were triggered at the\r\nconference; not only that, but the inspiration is beginning to fade. And I\r\nwill struggle to find time to watch the talk videos over the next few weeks.
\r\nI had intended to shove together a new portfolio site, to match my shiny new\r\nbusiness cards, before the first day of FOWD. Naturally I didn't manage to\r\nstick to this deadline, continued to work on the site during the conference,\r\nand to this day the redesign remains unfinished at localhost/. It is so far\r\nresponsive up to iPad dimensions, but the design that I was initially\r\nsatisfied with has fallen out of my favour, so I'm struggling to finish. I've\r\nbeen browsing collections of great web design, like\r\nthis one, as well as staring agonisingly at localhost/, hoping for\r\nre-inspiration.
\r\nTurns out I dislike quite a few of the designs on that list. Some just have\r\ntoo much blank space. Many go way overboard with the 'Web 2.0' look; glossy\r\nbuttons, excessive rounded corners, and the like. Pretty on first glance,\r\nperhaps, but after seeing so many sites in the same style, you suddenly\r\nrealise the genericness of them all; they give an impression of designers who\r\nforgot that the purposes of, or the companies behind the sites have their own\r\npersonalities and branding that can't be represented simply with shiny buttons\r\nand background gradients.
\r\nI am currently a fan of textured backgrounds, and I'll confess I am currently\r\nof the opinion that a text shadow automatically makes almost any header text\r\nlook better. I'm sure this will wear off, just like glossy buttons did. But\r\nI'm still struggling to find a style that suits me personally (and matches my\r\nbusiness cards).
\r\nSo far, just writing about it has helped a little, and I think I have enough\r\nbeginnings of new ideas to push on. Watch this space.
\r\n__
Their previous version of this particular site was the image from the event\r\nposter, with links mapped onto it. It was mere moments before my progressive\r\nenhancement / responsive design OCD kicked in. The site in question is to\r\nadvertise this year's University of Lincoln Grad Ball, and is little more than\r\nan online poster. So here goes.
\r\n1530
\r\nMarked up the page, with HTML5 tags and the content from the poster, using\r\ncurrently non-existent classes where needed, and also including a few non-\r\nexistant images. Added my own mini CSS reset for the elements I was using.
1545
\r\nCut the couple of images I needed out of the poster png and uploaded them.\r\nSpent a while trying to find something to match the obscure Mac font that had\r\nbeen used on the poster. Impact was close, but didn't quite cut it at small\r\nsizes. Played with weighting and letter spacing for ages, but eventually\r\npicked a font from Google Web Fonts that did\r\nthe trick and styled all the typography related stuff.
1605
\r\nAligned, padded, margined and weighted everything as I wanted. Remembered to\r\nuse a HTML5 enabling script so versions of IE lte8 would actually bother to style things properly.
1625
\r\nTook a step back to look at content. The organisation of it was great for a\r\nposter, where you can pretty much see everything at once, but in any scenario\r\nwhere scrolling is a possibility, the most important stuff needs to go at the\r\ntop. So I rearranged some things.
1630
\r\nUsed CSS to hide a couple of elements that would do more harm than good on a\r\ndevice with a small display. Used media queries to show them for displays with\r\na greater width than 480px. With help for IE, of course.
Nasty, dirty cheating
\r\nOne of the images I used consisted mostly of text, with a few images plonked\r\naround it. I didn't have the energy to recreate this in a two-column list,\r\nespecially not with the apparently randomly floating images. The image is\r\nonly used for 480px+ of course. Mobile get a list. Unfortunately, I just\r\nused display:none. So mobile browsers are still loading the image. I hate\r\nme, too. But hey, I had an hour. It's better than the whole site being an\r\nimage.
READ MORE ABOUT RESPONSIVE DESIGN.
\r\nI wrote that in capitals, because it is not a suggestion.
\r\nAnd, if you're University of Lincoln final year student, get your tickets for\r\nthe Grad Ball, and resize your browser\r\nwindow while you're there. It's going to be the best one yet, as they say\r\nevery year.
\r\nIt doesn't really seem like much when summarised like this, but I do wish I\r\nwas paid more than £6 an hour.
","as:name":"Work wanted a website in an hour today.","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2011-05-13T19:27:00.000Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/done"},{"@id":"blog:Done"},{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/lincoln+su"},{"@id":"https://rhiaro.co.uk/tags/Lincoln"},{"@id":"https://rhiaro.co.uk/tags/responsive+design"},{"@id":"https://rhiaro.co.uk/tags/web+development"},{"@id":"https://rhiaro.co.uk/tags/work"},{"@id":"https://rhiaro.co.uk/tags/lincoln"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-03-31T23:57:13.068Z"}},{"@id":"https://rhiaro.co.uk/2012/05/stylesheet","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-979096441285034894","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"About a year and a half ago I realised I needed to get a grip on how to\r\norganise my CSS. I established a template, which I proceeded to change\r\ndrastically with every new project. I noticed recently that I've been reusing\r\na version for the past few projects, with at the most only minor amendments to\r\nthe general structure. I also noticed how quickly I'm rolling out initial\r\ndesigns using this template.
\r\nI have finally reached the point where I figured out what I consistently reuse\r\nacross projects, and finally have a stylesheet structure that makes such\r\nintuitive sense to me I can dart around and make changes with my eyes closed.\r\nI find my stylesheets are much smaller, but even as they grow, I still know\r\nexactly where everything is. I wish I had some statistics to quote about the\r\namount of time spent scrolling through CSS looking for things. I'm confident\r\nit is much reduced.
\r\nSome aspects of my workflow I developed through intuition; I made changes that\r\nfelt right to me at the time, without really consulting anyone else's best\r\npractices. Other things I picked up from here and there. Every now and again\r\nI'd search for 'the right way' of doing this and find processes and systems\r\nthat didn't gel with me (a primary example of this being the number of pre-\r\nbuilt grid systems I tried and hated). Eventually I would give up under the\r\nsheer number of contradicting points of view, but I probably picked up some\r\nsubconscious inspiration on the way.
\r\nI hadn't thought much of this until Chris\r\nEppstein talked about this at\r\nFOWD today. A lot of the\r\nsuggestions he demo'd are very similar to parts of my system (conceptually at\r\nleast; he was discussing SASS and mine is raw CSS). So I figured it's reached\r\nthe point it is worth sharing.
\r\nFirst things first, I start with a basic\r\nInitializr stylesheet; a couple\r\nof minor tweaks, but then I largely accept the helper classes and IE fixes and\r\nhacks (no need to read this; it's just here for completeness):
\r\n/* ====================================================================== \r\nHTML5 Boilerplate CSS: h5bp.com/css \r\n========================================================================== */ \r\n\r\narticle, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } \r\naudio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } \r\naudio:not([controls]) { display: none; } \r\n[hidden] { display: none; } \r\n\r\nhtml { height: 100%, font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } \r\nhtml, button, input, select, textarea { font-family: sans-serif; color: #222; } \r\nbody { height: 100%; margin: 0; padding: 0; font-size: 1em; } \r\n\r\n::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } \r\n::selection { background: #fe57a1; color: #fff; text-shadow: none; } \r\n\r\na { color: #00e; } \r\na:visited { color: #551a8b; } \r\na:hover { color: #06e; } \r\na:focus { outline: thin dotted; } \r\na:hover, a:active { outline: 0; } \r\n\r\nabbr[title] { border-bottom: 1px dotted; } \r\nb, strong { font-weight: bold; } \r\nblockquote { margin: 1em 40px; } \r\ndfn { font-style: italic; } \r\nhr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } \r\nins { background: #ff9; color: #000; text-decoration: none; } \r\nmark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } \r\npre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } \r\npre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } \r\nq { quotes: none; } \r\nq:before, q:after { content: \"\"; content: none; } \r\nsmall { font-size: 85%; } \r\n\r\nsub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } \r\nsup { top: -0.5em; } \r\nsub { bottom: -0.25em; } \r\n\r\nul, ol { margin: 1em 0; padding: 0 0 0 40px; } \r\ndd { margin: 0 0 0 40px; } \r\nnav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } \r\n\r\nimg { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } \r\n\r\nsvg:not(:root) { overflow: hidden; } \r\n\r\nfigure { margin: 0; } \r\n\r\nform { margin: 0; } \r\nfieldset { border: 0; margin: 0; padding: 0; } \r\nlabel { cursor: pointer; } \r\nlegend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } \r\nbutton, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } \r\nbutton, input { line-height: normal; } \r\nbutton, input[type=\"button\"], input[type=\"reset\"], input[type=\"submit\"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } \r\nbutton[disabled], input[disabled] { cursor: default; } \r\ninput[type=\"checkbox\"], input[type=\"radio\"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } \r\ninput[type=\"search\"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } \r\ninput[type=\"search\"]::-webkit-search-decoration, input[type=\"search\"]::-webkit-search-cancel-button { -webkit-appearance: none; } \r\nbutton::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } \r\ntextarea { overflow: auto; vertical-align: top; resize: vertical; } \r\ninput:valid, textarea:valid { } \r\ninput:invalid, textarea:invalid { background-color: #f0dddd; } \r\n\r\ntable { border-collapse: collapse; border-spacing: 0; } \r\ntd { vertical-align: top; } \r\n\r\n.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } \r\n\r\n/* =============== \r\n ALL: IE Fixes \r\n =============== */ \r\n\r\n.ie7 #title{ padding-top:20px; } \r\n\r\n/*******************************************/ \r\n/* */ \r\n/* My styles go here! */ \r\n/* */ \r\n/*******************************************/ \r\n\r\n/* ============================================================================= \r\n Non-Semantic Helper Classes \r\n ========================================================================== */ \r\n\r\n.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } \r\n.ir br { display: none; } \r\n.hidden { display: none !important; visibility: hidden; } \r\n.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } \r\n.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } \r\n.invisible { visibility: hidden; } \r\n.clearfix:before, .clearfix:after { content: \"\"; display: table; } \r\n.clearfix:after { clear: both; } \r\n.clearfix { *zoom: 1; } \r\n\r\n/* ============================================================================= \r\n Print Styles \r\n ========================================================================== */ \r\n\r\n@media print { \r\n * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ \r\n a, a:visited { text-decoration: underline; } \r\n a[href]:after { content: \" (\" attr(href) \")\"; } \r\n abbr[title]:after { content: \" (\" attr(title) \")\"; } \r\n .ir a:after, a[href^=\"javascript:\"]:after, a[href^=\"#\"]:after { content: \"\"; } /* Don't show links for images, or javascript/internal links */ \r\n pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } \r\n thead { display: table-header-group; } /* h5bp.com/t */ \r\n tr, img { page-break-inside: avoid; } \r\n img { max-width: 100% !important; } \r\n @page { margin: 0.5cm; } \r\n p, h2, h3 { orphans: 3; widows: 3; } \r\n h2, h3 { page-break-after: avoid; } \r\n}
\r\nMy template is inserted into the appropriate point of the Initializr\r\nstylesheet. I divide into five sections:
\r\n/* 0 Accessibility */ \r\n\r\n/* 1 Typography */ \r\n\r\n/* 2 Colours & borders */ \r\n\r\n/* 3 Spacing & layout */ \r\n\r\n/* 4 Images & video */
\r\nI start each section with empty media query clauses for 480px and up, 768px\r\nand up, 1024px and up, and 1200px and up. By the time a project is done each\r\nsection will typically have from one to six media query breakpoints in it,\r\naccording to requirements.
\r\n0\\\\\\\\. Accessibility
\r\nA staple of this so far is:
\r\n/** \r\n 0 Accessibility \r\n**/ \r\n.no-css { \r\n /* This class hides stuff that needs to be around for screenreaders or users with no CSS, but not in normal circumstances */ \r\n position: absolute; left: -1000px; \r\n}
\r\nWhich I chuck in when I use visuals to enhance some content, to hide an\r\nappropriately positioned textual equivalent.
\r\nThere's probably more useful stuff that should be here. I'm working on it.\r\n(Suggestions welcome!).
\r\n1\\\\\\\\. Typography
\r\nNot a lot going on here. Some obvious placeholders, plus a couple of classes I\r\nfound myself needing over and over, which should be self explanatory (.win and\r\n.fail are applied to success or error messages; usually a form submission is\r\ninvolved).
\r\n/** \r\n 1 Typography \r\n**/ \r\n\r\nh1 {} \r\nh2 {} \r\nh3 {} \r\nh4 {} \r\n\r\np {} \r\na { text-decoration: inherit; } \r\na:hover { text-decoration: underline; } \r\n\r\n.note { \r\n font-size: 1em; \r\n font-weight: bold; \r\n text-align: right; \r\n} \r\n\r\n.wee { \r\n font-size: 0.8em; \r\n} \r\n\r\n.win, .fail {}
\r\nIn typography, I strictly only include font stuff like faces, sizes,\r\nalignment, decoration and enhancements like text-decoration, font-weight.
\r\n2\\\\\\\\. Colours and borders
\r\nBorder styles go here because they need to be defined before the border\r\ncolours are. Otherwise, just colours go here:
\r\n/* Borders */ \r\n .win, .fail { border: 2px solid; } \r\n\r\n/* Dark */ \r\n .dark { color: #2d2d2d;} \r\n .dark-bg { background-color: #2d2d2d; } \r\n .darker{ color: #000; } \r\n .darker-bg { background-color: #000; } \r\n\r\n/* Primary Color */ \r\n .color1 { color: green; } \r\n .color1-bg { background-color: green; } \r\n .color1-border { border-color: green; } \r\n .color1-texture { } \r\n\r\n/* Secondary Color */ \r\n .color2 { color: yellow; } \r\n .color2-bg { background-color: yellow; } \r\n .color2-border { border-color: yellow; } \r\n .color2-texture { } \r\n\r\n/* Tertiary Color */ \r\n .color3 { color: red; } \r\n .color3-bg { background-color: red; } \r\n .color3-border { border-color: red; } \r\n .color3-texture { } \r\n\r\n/* Light */ \r\n .light { color: #ccc; } \r\n .light-bg { background-color: #ccc; } \r\n .lighter { color: #fff; } \r\n .lighter-bg { background-color: #fff; } \r\n\r\n.note { color: silver; } \r\n\r\n.win { \r\n background-color: #E6EFC2; \r\n color:#264409; \r\n border-color:#C6D880; \r\n} \r\n\r\n.fail { \r\n background:#FBE3E4; \r\n color:#8a1f11; \r\n border-color:#FBC2C4; \r\n}
\r\nAfter border styles, I start with the colour scheme, creating classes for text\r\ncolours, background colours and border colours. It's unusual to need to go\r\nbeyond a tertiary colour, and typically I only have primary and secondary.\r\nThis leaves me with classes I can apply to any elements in my html templates,\r\nmaking it really quick and easy to experiment with different colour\r\ncombinations. The color*-texture classes come in handy when I have textured\r\nbackgrounds that match the colour scheme, and would include the background\r\nimage (a repeating square of noise texture for example) and a background-\r\ncolour as a backup.
\r\nMost of the time I don't want to be applying classes to everything to add\r\ncolour though. I list elements that I'm confident aren't going to change in\r\nthe mark-up which need colours applying to them, for example:
\r\n/** \r\n 2 Colours and borders \r\n**/ \r\n\r\n/* Primary colour */ \r\n .color1, body { color: green; } \r\n .color1-bg, nav, footer { background-color: green; } \r\n\r\n/* Secondary Color */ \r\n .color2, nav { color: yellow; } \r\n .color2-bg, body { background-color: yellow; } \r\n\r\n/* ...etc... */
\r\nI'm a fan of using off-white and off-black, so these are what I originally\r\npicked for my .light and .dark classes, which are always handy to have.\r\nSometimes pure black and white are necessary too though, so the .lighter and\r\n.darker classes were born.
\r\nYou can see .note, .win and .fail show up here too.
\r\nThis pretty much means this is as long as the colours section will ever get. I\r\ndon't apply colours anywhere else in the stylesheet, and it helps to ensure I\r\nstick to a colour scheme and don't get carried away with exceptions.\r\nObviously, this also makes it super easy to change the colour scheme uniformly\r\nin a couple of seconds.
\r\n3\\\\\\\\. Spacing and grid
\r\nAs I already mentioned, I have poked around with some of the existing flexible\r\ngrid frameworks but none of them grabbed me. They all seemed to have too much.\r\nThe minimalist system I came up with has answered all of my needs so far,\r\nalthough I wouldn't claim it's suitable for every project in the world. It's\r\nalso subject to tweaks, depending on the project of the moment.
\r\nI stick with Initializr's .wrapper class, which is 100% width until the\r\nviewport reaches 1024px, when it snaps to 900px wide. This is my default\r\nbecause it's been the most frequently appropriate so far. I have an ongoing\r\nproject at the moment where the target audience are largely gamers, so\r\ncapitalising on the excessive screen real estate they'll probably have means I\r\nstripped out this restriction in favour of a full width multi-column layout\r\nwhen the device allows.
\r\nI haven't yet had a need to go above five columns for my grid. I express my\r\nclass names like fractions, and start off with only the 1/2, 1/3 and 2/3 ones\r\ntaking up the correct proportion of the screen, with the others defaulting to\r\n100%. This then changes for wider-than-small viewports, as you can see.
\r\nThere are a few navigation list related things in there that I often find\r\nmyself duplicating across projects (like a default centre-aligned stacked menu\r\nwhich progresses to a floating horizontal version). I pad my a elements (as\r\nopposed to their containing li elements) to enlarge the touch area for links.\r\nPlus some nth-child stuff for three column layouts, for keeping consistent row\r\nheights when the column heights are different.
\r\n/** \r\n 3 Spacing & Grid \r\n**/ \r\n\r\n.wrapper { \r\n width: 100%; \r\n} \r\n\r\n/* Grid */ \r\n.w1of2 { width: 50%; float: left; } \r\n.w1of3 { width: 33%; float: left; } \r\n.w2of3 { width: 66%; float; left; } \r\n.w1of1, .w1of4, .w1of5, \r\n.w3of4, .w2of5, .w3of5, .w4of5 { \r\n width: 100%; \r\n} \r\n\r\n.inner { \r\n padding: 1em; \r\n} \r\n\r\nnav { \r\n max-width: 100%; \r\n} \r\n\r\nnav a { \r\n display: block; \r\n padding: 0.8em; \r\n} \r\n\r\n.inline { display: inline; } \r\n\r\n.win, .fail { \r\n padding: 0.2em; \r\n display: block; \r\n} \r\n\r\n/* 3.1 */ \r\n @media screen and (min-width: 479px){ \r\n\r\n nav li { float: left; } \r\n } \r\n\r\n/* 3.2 */ \r\n @media screen and (min-width: 768px){ \r\n .w1of2 { width: 50%; float: left; } \r\n .w1of3 { width: 33%; float: left; } \r\n .w1of4 { width: 25%; float: left; } \r\n .w1of5 { width: 20%; float: left; } \r\n .w2of3 { width: 66%; float: left; } \r\n .w3of4 { width: 75%; float: left; } \r\n .w2of5 { width: 40%; float: left; } \r\n .w3of5 { width: 60%; float: left; } \r\n .w4of5 { width: 80%; float: left; } \r\n\r\n .w1of3:nth-child(odd) { clear: none; } \r\n .w1of3:nth-child(3n-2) { clear: both; } \r\n } \r\n\r\n/* 3.3 */ \r\n @media screen and (min-width: 1024px){ \r\n .wrapper { \r\n width: 900px; \r\n margin-left: auto; margin-right: auto; \r\n } \r\n }
\r\nEverything that goes in this section is to do with spacing: padding, margins,\r\npositioning, floating, wrapping... et cetera.
\r\n4\\\\\\\\. Images and video
\r\nMost projects call for tweaks to images that may or may not fit into the other\r\nsections of the stylesheet. Nonetheless, my brain copes better with I group\r\nthem all together. Flexible YouTube video embed lives here too.
\r\n/** \r\n 4.0 Images and video \r\n**/ \r\n\r\n.vid-holder { \r\n position: relative; \r\n padding-bottom: 56.25%; \r\n padding-top: 30px; \r\n height: 0; \r\n overflow: hidden; \r\n} \r\n\r\n.vid-holder iframe, \r\n.vid-holder object, \r\n.vid-holder embed { \r\n position: absolute; \r\n top: 0; \r\n left: 0; \r\n width: 100%; \r\n height: 100%; \r\n} \r\n\r\n/* Full width images on bigger than small screens are dumb. Reset this. */ \r\n@media screen and (max-width: 478px){ \r\n .w1of1 img, .w1of2 img, .w1of3 img, .w1of4 img, .w1of5 img, \r\n .w2of3 img, .w3of4 img, .w2of5 img, .w3of5 img, .w4of5 img { \r\n width: 100%; \r\n } \r\n}
\r\nAnd that's what I start all projects with. Here is it all\r\nassembled, with a few of the classes throw into\r\nthe mark-up so you can see what's going on. If (when) I end up doing another\r\nmajor update, I shall probably write about it again.
","as:name":"Stylesheet organisation","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2012-05-17T16:25:00.000Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/doing"},{"@id":"blog:Doing"},{"@id":"https://rhiaro.co.uk/tags/clean+css"},{"@id":"https://rhiaro.co.uk/tags/cleanstyles"},{"@id":"https://rhiaro.co.uk/tags/css"},{"@id":"https://rhiaro.co.uk/tags/fowd"},{"@id":"https://rhiaro.co.uk/tags/frontend"},{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/stylesheet+organisation"},{"@id":"https://rhiaro.co.uk/tags/web+dev"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-04-01T00:11:02.726Z"}},{"@id":"https://rhiaro.co.uk/2013/03/scotland-public","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-3302927277885043572","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"Tell Me Scotland publish public notices for\r\nthings like traffic, planning permissions... And they have a SPARQL\r\nendpoint!
\r\nI'm hacking around with the ultimate goal of creating an interface that allows\r\npeople to generate a GeoRSS feed for a particular area. Ally of\r\nGreenerLeith suggested this, so that they can\r\nuse this to feed into their own apps. A stage beyond that is to smoosh the\r\nwhole lot into a Wordpress plugin, to make it accessible to anyone (who uses\r\nWP).
\r\nSo far I've got the notices on an\r\nOpenStreetMap. I haven't had a\r\nwhole lot of time, but will make more soon.
\r\nI'm using the PHP library ARC2 to deal with the linked data.
\r\nNB. the TMS endpoint is, at the moment, flaky at best. I think they're\r\nworking on this.
","as:name":"Scotland Public Notices experiments","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-03-05T01:56:00.000Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/doing"},{"@id":"blog:Doing"},{"@id":"https://rhiaro.co.uk/tags/greener+leith"},{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/linked+data"},{"@id":"https://rhiaro.co.uk/tags/open+data"},{"@id":"https://rhiaro.co.uk/tags/openstreetmap"},{"@id":"https://rhiaro.co.uk/tags/rdf"},{"@id":"https://rhiaro.co.uk/tags/sparql"},{"@id":"https://rhiaro.co.uk/tags/tellmescotland"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-03-23T01:57:34.241Z"}},{"@id":"https://rhiaro.co.uk/2013/03/taming-blogger","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-6704022083938612491","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"Experimenting with running this entire website from the age-old Blogger\r\nbackend.
\r\nBeating it gradually into submission with help from Temple of\r\nDoom stripped down Blogger template, and\r\nsome pro tips from Blogger Sentral.
\r\nBecause, why not? I have a lot of stuff on this blog. Time to organise it\r\nhow I want.
","as:name":"Taming Blogger","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-03-23T01:50:00.000Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/doing"},{"@id":"blog:Doing"},{"@id":"https://rhiaro.co.uk/tags/blogger"},{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/learning"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-03-23T01:50:03.469Z"}},{"@id":"https://rhiaro.co.uk/2013/04/not-taming-blogger","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-1900084843425069832","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"Change of plan. Trying to run the whole thing with Blogger templates did not\r\nresult in a happy time. So the main site pulls and manipulates the Blogger\r\nRSS feed, with Simple Pie making that easy.
\r\nI then simplified the actual Blogger template and made it match and stuff.\r\nThe general intention now is that individual posts and comments will be\r\nviewed, if necessary, via Blogger, in a kind of archive-y way, but the content\r\norganised as I see fit exists on the main site as the primary port of call.
\r\nBut my goodness does Blogger automatically add some crap into its templates.\r\nI delete stuff and it comes right back. Pointless classes, and divs, and\r\ngeneral unnecessary bulky markup. I give up with trying to strip all that\r\nout.
\r\nBy the way, the source code for the site is\r\nhere. Share and share alike, yada.
","as:name":"Not taming Blogger after all","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-04-02T20:46:00.001Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/doing"},{"@id":"blog:Doing"},{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/web+development"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-04-02T23:30:33.625Z"}},{"@id":"https://rhiaro.co.uk/2013/07/sssw2013-research","@type":"as:Article","blog:bloggerid":"tag:blogger.com,1999:blog-18505529.post-5969396273262467883","as:actor":{"@id":"http://www.blogger.com/profile/12227954801080178130"},"as:content":"The 10th Summer School for Ontology Engineering and the Semantic Web
\r\n_
\r\n_Sunday
Arriving by train into Cercedilla, north of Madrid, we immediately encountered\r\nother confused looking folk with poster tubes. So we shared taxis (EUR 10)\r\nfrom Cercedilla station to the summer school residence further north, in the\r\nforest.
\r\nAfter getting keys for our pleasant, single, en-suite rooms, arrivals\r\ncongregated in the shade by the building to introduce ourselves.. Again, and\r\nagain, and again, as new people continuously arrived over the space of a few\r\nhours.
\r\nA really broad mix of people are here in terms of nationalities and places\r\nand levels of study, but I still haven't quite got used to the fact that\r\nanswering 'Semantic Web stuff' is not specific enough in this crowd, when\r\nsomeone asks you what your research is about. Nobody needs convincing that\r\nthese technologies are useful!
\r\nLater we received schedules, maps, ill-fitting t-shirts* and very helpful name\r\nbadges, and headed for dinner at the bar down the road.
\r\nAs is traditional when I write about my experiences in new places, I will\r\ndescribe the food every day. It has become apparent, at this residence at\r\nleast, that variety of ingredients is not ordinary, so in this respect meals\r\nare simple. Dinner that first night started with a salad (lettuce, olives,\r\ntomato, onion, shredded beetroot and a single slice of hard boiled egg; no\r\ndressing), followed by - for the majority - slices of meat (beef? Pork? I\r\ndunno..) and fries. Mine was a plate of mushy green vegetables with a little\r\nseasoning, that was pretty tasty. Dessert was a single pear, delivered with\r\nceremony, but otherwise unadorned. Healthy, at least.
\r\nYet we were all (those I sat with at least) were left feeling a little\r\nunsatisfied.
\r\nI shared a table with a French, Spanish, Italian and Irish guy. Conforming\r\nappropriately to stereotypes, and setting up reputations for the rest of the\r\nweek, the French and the Italian shared the bottle of wine on the table; the\r\nrest of us went without.
\r\nI returned to bed after a couple of hours of socialising and enjoying the cool\r\nair in and around the bar.
\r\nMonday
\r\nThe day started early, and with no hot water or wifi for anyone. Breakfast\r\nwas combinations of sweet pastries, coffee, tea, juice and bread.
\r\nPunctuated variously by coffee breaks, the learning began in earnest.
\r\nDuring the introduction by Mathieu D'Aquin, I found out that I am one of 53\r\nstudents selected out of 96 applicants to attend this year's Summer School of\r\nthe Semantic Web! I had no idea it was that selective, or that there had been\r\nthat much competition.
\r\nThe first keynote was by Frank van Harmelen, about all the Semantic Web\r\nquestions we couldn't ask ten years ago.
\r\nSlides:
\r\nSemantic Web questions we couldn't ask 10 years ago from Frank Van Harmelen
\r\nFrank started by saying that the early Semantic Web vision has morphed into\r\nthe more manageable vision of a Web of Data, or a Giant Global Graph, and\r\noutlined the principles of the Semantic Web as they appear to stand at\r\npresent:
\r\n1\\\\\\\\. Give everything a name (entities).
\r\n2\\\\\\\\. Relations form graph between things.
\r\n3\\\\\\\\. Names are addresses on the Web (so we inherit properties of Web like AAA).
\r\n4\\\\\\\\. Add semantics.
Frank pointed out the advantages of the fact the Linked Data crowd, grown\r\nnaturally and not designed, is now so big we don't know how many triples it\r\ncontains, nor how fast it is growing. Companies and organisations (like\r\nGoogle, NXP, BBC, DataGov) are using Semantic Web technologies to achieve\r\ntheir own ends, for a variety of different use cases, without caring much\r\nabout the Semantic Web, and this is contributing to the growth.
\r\nThis growth has given rise to a number of research areas that were impossible\r\nto realisitically ask questions about ten years ago, including self-\r\norganisation, distribution of data, provenance, dynamics and change, errors\r\nand noise (how to deal with disagreements).
\r\nFrank asserted that rules and structures, algorithms and patterns in data,\r\nexist whether we are looking at them or not. He used the analogy that OWL is\r\nour microscope, and it may be the tool that distorts our vision of the\r\ninformation universe rather than properties of what we are looking at (for\r\nexample, structures in data presenting themselves well in some domains but not\r\nothers).
\r\nHe went on to promote the roll of the Informatician to be to test theories,\r\nhypothesis and falsify, as scientists rather than engineers. To discover,\r\nrather than build.
\r\nI struggle with this view of the world, and feel instinctively that theory and\r\npractice are intrinsically linked; one can't exist without the other, not just\r\nin the grand scheme of things, but in day to day work and research. This is\r\none of the main points of contention with my own PhD, and I've no doubt there\r\nwill be many more blog posts about this issue in the near future as I\r\nreconcile my need to create something immediately useful with the necessity of\r\nproducing a contribution to knowledge at large.
\r\nSee my raw notes here.
\r\nWe had an Introduction to Linked Data by Mathieu D'Aquin (raw notes\r\nhere), followed by a workshop. We wrote SPARQL queries to populate a pre-\r\nwritten web page with information about Open University courses, sub-courses\r\nand locations thereof.
\r\nLunch, similar to the previous night's dinner, was a starter salad, an entire\r\nhalf chicken (or something) plus fries for the carnivores and the most\r\nunappealing risotto of my life for (not that I'm ungrateful, but I have never\r\nbeen unable to finish a meal due to boredom before). I went for a walk with\r\nsome others to grab some fresh air before the afternoon's work, and missed out\r\non watermelon.
\r\nManfred Hauswirth presented some really exciting stuff about annotating and\r\nusing streams of data. Particularly challenging is how to integrate this\r\nwith static data and make inferences over the lot. Streams include sensor\r\ndata, as well as ever-flowing social media streams for example; anything that\r\nchanges over time.
\r\nThey've built some systems to process this kind of data, and one of them is\r\navailable as middleware.
\r\n\r\nIn the afternoon we had a poster session, where all participants pinned up\r\nposters about their work, and discussed at length with anyone who was\r\ninterested. Here's evidence that I participated.
\r\n\r\nAnd here's Paolo's:
\r\n\r\nI wrote a few notes about things from other peoples' posters that I need to look\r\nup.
\r\nThe main feedback I received was about making sure I focus, narrow down my\r\ntopic, and concentrate on some evaluatable deliverables that are PhD-worthy.
\r\nQuestions like (paraphrasing) "why should we care about digital creatives?"\r\nthrew me, because I thought the obvious answer - that they are people too,\r\nWeb users, technology users, contributors to culture and an ecosystem of\r\ndigital content and data - was apparently not enough from an academic\r\nstandpoint.
\r\nI was simultaneously told to focus more, and to explain why the problem I'm\r\ntrying to solve is applicable to all domains, not just digital creatives. But\r\nsome of the problems I'm looking at have been (or are being) solved in other\r\ndomains (like e-health, biological research, education) and the reason what\r\nI'm doing is interesting is because none of these solutions quite work for\r\ndigital creatives, and I want to find solutions that do, and try to figure out\r\nwhy.
\r\nI'm still stuck in some sort of struggle between theory and practice; thinking\r\nand doing. And the long-standing problem of how to decide which doing\r\nactually worked.
\r\nI've started scribbling notes about the narrowing down problem. I'll need to\r\nhave this figured out before my first year review in August anyway, so stay\r\ntuned for another post all about it.
\r\nThen I sneaked off for a nap.
\r\nDinner at the bar again; the usual salad, plus some eggy fish thing for most.\r\nI got a plate of artichoke. Artichoke is great, I love it, and I'm all for\r\nsimple meals. But I remain unconvinced that a plate of only artichoke\r\nconstitutes an acceptable level of effort on the part of caterers. And the\r\nsheer quantity made it start to taste a bit funny after a while. But not to\r\nworry; we rounded off with a solitary peach apiece.
\r\nFurther socialising, and appreciation of the night sky, before returning to\r\nbed write blog posts.
I'm super excited and inspired by the talks, work I've heard about so far, and\r\nthe atomsphere of the place. I'm excited to learn a helluva lot, and remind\r\nmyself that I'm not facing impossible problems, and am not facing many\r\nproblems alone. I remember that I am instinctively passionate about the Web\r\nand the possibilities it holds (and indeed has already realised) for the\r\nempowerment of individuals. I remember how lucky I am to be able to sustain\r\nmyself through studying something I love so much, and to have the potential to\r\nmake a change, and through my work maybe even facilitate others to be able to\r\nmake a living doing what they love, as well.
","as:name":"#SSSW2013: Research in theory and practice, and where on earth am I?","as:published":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-07-08T23:30:00.000Z"},"as:tag":[{"@id":"https://rhiaro.co.uk/tags/done"},{"@id":"blog:Done"},{"@id":"https://rhiaro.co.uk/tags/cercedilla"},{"@id":"https://rhiaro.co.uk/tags/events"},{"@id":"https://rhiaro.co.uk/tags/hacking"},{"@id":"https://rhiaro.co.uk/tags/knowledge+engineering"},{"@id":"https://rhiaro.co.uk/tags/learning"},{"@id":"https://rhiaro.co.uk/tags/linked+data"},{"@id":"https://rhiaro.co.uk/tags/madrid"},{"@id":"https://rhiaro.co.uk/tags/ontologies"},{"@id":"https://rhiaro.co.uk/tags/phd"},{"@id":"https://rhiaro.co.uk/tags/poster"},{"@id":"https://rhiaro.co.uk/tags/presenting"},{"@id":"https://rhiaro.co.uk/tags/semantic+web+summer+school"},{"@id":"https://rhiaro.co.uk/tags/spain"},{"@id":"https://rhiaro.co.uk/tags/sssw13"},{"@id":"https://rhiaro.co.uk/tags/sssw2013"},{"@id":"https://rhiaro.co.uk/tags/summer+school"},{"@id":"https://rhiaro.co.uk/tags/travel"}],"as:updated":{"@type":"http://www.w3.org/2001/XMLSchema#datetime","@value":"2013-07-17T14:52:15.424Z"}},{"@id":"https://rhiaro.co.uk/tags/learning","@type":"as:Collection","as:totalItems":{"@type":"http://www.w3.org/2001/XMLSchema#nonNegativeInteger","@value":"29"}},{"@id":"https://rhiaro.co.uk/tags/learning?before=https://rhiaro.co.uk/2013/07/sssw2013-research&limit=16","@type":"as:CollectionPage","as:items":[{"@id":"https://rhiaro.co.uk/2013/07/sssw2013-research"},{"@id":"https://rhiaro.co.uk/2013/04/not-taming-blogger"},{"@id":"https://rhiaro.co.uk/2013/03/taming-blogger"},{"@id":"https://rhiaro.co.uk/2013/03/scotland-public"},{"@id":"https://rhiaro.co.uk/2012/05/stylesheet"},{"@id":"https://rhiaro.co.uk/2011/05/design"},{"@id":"https://rhiaro.co.uk/2011/05/work-wanted"},{"@id":"https://rhiaro.co.uk/2010/12/adventures-html5"},{"@id":"https://rhiaro.co.uk/2010/12/only-half-past"},{"@id":"https://rhiaro.co.uk/2010/12/having-been"},{"@id":"https://rhiaro.co.uk/2010/10/professional-3"},{"@id":"https://rhiaro.co.uk/2010/10/professional-2"},{"@id":"https://rhiaro.co.uk/2010/10/professional-1"}],"as:name":"learning","as:next":{"@id":"https://rhiaro.co.uk/tags/learning?before=https://rhiaro.co.uk/2015/01/permalinks&limit=16"},"as:partOf":{"@id":"https://rhiaro.co.uk/tags/learning"}}]}