Vegetarisk symbol som font och för nerladdning

vegetarian-mark-250
Det finns ingen enhetlig, internationell symbol för att märka vegetarisk mat, och det kommer det nog heller aldrig att finnas; Dels finns det alldeles för många olika definitioner av ”vegetariskt”, och dels är märkningar utan kontrollinstanser oftast ganska meningslösa. Men ofta behövs ändå något som signalerar ”vegetariskt” på restaurangmenyer, i receptsamlingar, etc.

säsongsmat.nu använder vi symbolen , ett grönt v med blad på. Det är, i olika varianter, den kanske mest spridda symbolen, utanför Indien (som har en statligt sanktionerad symbol: ). Faktum är att European Vegetarian Union låtit varumärkesskydda den i flera länder, för att undvika missbruk. Vi har lagt in den i vår webbfont, så att vi kan använda dem över hela sajten utan att behöva klistra in en massa småbilder.

Nu har vi lagt upp samma symbol (tillsammans med den som används i Indien) på en egen sida, Vegetarianmark.com, så att det är enkelt för andra att använda den på samma sätt. Allt du behöver göra är att lägga till den här raden i toppen på sidan, mellan <head> och </head>-taggarna:

<link rel="stylesheet" href="http://static.sasongsmat.nu/fonts/vegetarian.css" />

Med den raden på plats, kan du använda tecknen och på sidan. För användare med sjukt gamla webbläsare, visas tecknet i stället för , och i stället för .

Instruktioner, och bilder för nerladdning, om du vill ha det i stället, finns på Vegetarianmark.com.

Omvandlingstabeller i recepten

Nu har vi äntligen vettiga omvandlingsfunktioner för mått i recepten. Det har stått på att göra-listan länge men aldrig blivit gjort. Om du för muspekaren över ett gul-orange mått i en ingredienslista i ett recept, så får du upp vanliga omvandlingar (klicka med fingret om du har en touchscreen). Alla råvaror har vi förstås inte hunnit ta fram omvandlingstabeller för ännu, men du kan se hur det fungerar i recept som t.ex toscapäron. Även många historiska mått fungerar, som i A. Hollbergs ingefärspäron.

PS. Omvandlingarna är inte tokexakta. Storleken på en ”genomsnittlig potatis” varierar ju t.ex. med sort och årstid.

PPS. Ja, bubblorna är rätt fula, men det får se så ut för ögonblicket.

Ruby (furigana) i html

Eftersom jag både bygger sajter som hobby är språknörd, så blev jag glatt överraskad när jag härom dagen upptäckte att det finns en html-notation i HTML5 för att skriva ruby. Dessutom redan med bra stöd i nya webbläsare.

Ruby är vad typografer kallar de små tecken som används på exempelvis japanska (där kallas de furigana) för att tala om hur tecken ska uttalas, när det inte är uppenbart. Furigana, och motsvarigheterna på kinesiska och andra språk, skrivs med små tecken ovanför huvudtexten (i horisontell skrift) eller till höger om den (i vertikal skrift).

Uppslag ur en japansk bok, med ruby (furigana) på många ord. Heibon av Futabatei Shimei, 1908.

Jag kunde inte låta bli att märka upp japanska översättningar av råvarunamn på Säsongsmat med ruby, bara för att det går.

Syntaxen för ruby i HTML5, som förslaget ser ut nu, är rätt omständlig: För att skriva hakusai (Pak choi) med både kanji och furigana skull koden kunna se ut så här:
<ruby><rb>白</rb><rp>(</rp><rt>ハク</rt><rp>)</rp><rb>菜</rb><rp>(</rp><rt>サイ</rt><rp>)</rp></ruby>

…vilket ger följande resultat:

(ハク)(サイ)

Har du en hyfsat modern webbläsare bör kanjin (de kinesiska tecknen 白菜) ha kompletterats med furigana, en liten rad som anger uttalet ovanför. Här står det ハクサイ, hakusai, med den japanska stavelseskriften katakana. (Just här skulle man nog normalt sett bara ha använt katakana.) I en del versioner av android-webbläsaren verkar det som att ruby-tecknen alltid hamnar till höger, som i vertikal skrift, vilket kan se lite konstigt ut. Om du har en äldre webbläsare, utan stöd för ruby, så bör du se kanjitecknen följda av katakana inom parentes.

Grundprincipen är enkel: Hela uttrycket omsluts med ruby.taggar, sedan sätt huvudtecknet inom rb-taggar och rubyn inom rt-taggar. <ruby><rb>白</rb><rt>ハク</rt></ruby> Dessutom finns en rp-tagg för att kunna stoppa in parenteser (eller egentligen vad som helst), för att få ett snyggt och begripligt resultat även i de webbläsare som inte förstår ruby-taggarna. Sådana webbläsare ignorerar bara taggarna, och skriver ut tecknen emellan som de står.

Adding authorship information to MediaWiki pages

The perhaps most visible example of search engines starting to look for semantic data is the author information in Google search results, such as shown in the image above. Here is how we made pages like that one (a ginger bread recipe) on Säsongsmat.nu appear with author information in Google’s search results.

First of all: The whole point with using a wiki is to have many people, or personas, editing pages collaboratively. And Google won’t be able to handle multiple authors, as far as I know. Still, there might be cases where showing a single author is relevant. In our case we have a namespace for recipes, where the creator of an article is by default the only one allowed to make changes, and other people can only fork the recipe to start creating their own version.

So we have pages that make good candidates for author markup, now what? Säsongsmat.nu is heavily based on Semantic MediaWiki, so that’s what we will be using to retrieve and print the author(s). It would, however, not be difficult to write an extension for the same purpose without using Semantic MediaWiki.

Get the authors

To automatically get the list of authors of an article we use an extension called Semantic Extra Special Properties (first version written by us, heavily improved by others), that automatically adds semantic data about things like authors, number of revisions, etc.

If you plan to add authorship information to just an handful of articles, you could skip this step and create the links by hand.

Print out the authors

The way to tell Google that a certain name is refering to the author of an article is to add the attribute rel=author to the link’s html code. This is not something that MediaWiki will allow us to do by default, so we needed to write yet another extension: LinkAttributes. This extension extends MediaWiki’s link syntax so that we can write things like [[User:Leo|Leo|rel=author]]. Changing the wiki syntax is not always a good idea, so you might want to adjust the extension for your own needs (e.g. by creating a parser function instead). This works for us, however.

Next we need to create a template to be included in pages where we want authorship information visible. If you are using the page creator property of SemanticExtraSpecialProperties, you just need to query SMW for it, and put the result in a link. If you want all page contributors, you will need to use the Arrays extensions, like we do in our template:

{{#arraydefine:authors|{{#show:{{FULLPAGENAME}}|?Page contributor|link=none}}}}{{#if:{{#arrayprint:authors}}|
==Authors==
{{#arrayprint:authors||@@@@|{{Author-row|@@@@}}}}
}}}}

And in the template author-row:

[[{{{1|User:Example}}}|{{#replace:{{{1|User:Example}}}|{{ns:User}}:|}}|rel=author]]

Which will produce something like this:

[[Användare:Leo|Leo|rel=author]]
Which will in its turn produce a html output like this:
<a href="http://xn--ssongsmat-v2a.nu/ssm/Användare:Leo" rel="author">Leo</a>

Update: Claus points out in the comments that the #replace parser function is part of the ParserFunctions extension, that needs to be installed. Furthermore $wgPFEnableStringFunctions must be set to true in LocalSettings.php.

Note that it’s also possible to have MediaWiki print out the N last contributors to a page in the footer by setting $wgMaxCredits to N. You could use that output to add this data, by writing your own extension hooking into.

Connect user pages with Google+

To make authors appear in Google search results they need to have a Google+ page. And Google will need to be able to connect the author to that Google+ page. We do that by adding a field to the template that makes up user pages, making room for an optional Google+ profile url, and by, once again, adding an attribute to that url when printing it: rel=me. And while we are on it we add the same attribute to Facebook, blog and Twitter links as well.

Social media links in the user page form
As we are using SemanticForms to edit pages in the wiki, and have set the whole user page namespace to use the same form by default, it’s easy to add and remove templates from each user’s page.

Finally, the user needs to add our site to the list of contributing sites in Google+ (profile/edit)

It can take some time for results to appear in Google search results.

Summary

  • You need MediaWiki with the SemanticMediaWiki, ParserFunctions, SemanticExtraSpecialProperties and LinkAttributes extensions (disclaimer: I wrote the last two, and they most certainly contain some examples of bad coding in them). Make sure $wgPFEnableStringFunctions = true; in LocalSettings.php.
  • You probably want the Array and SemanticForms extensions as well
  • Add a template to query Semantic MediaWiki for author(s), and put the result in a link to the author user page with the rel=author attribute
  • Make sure users use a user page template with a field for Google+ user page url. If you are using SemanticForms, this will be a piece of cake.
  • Tell users that they need to add your site to the list of sites they are contributing to in Google+, in order to be credited in the Google search results.

Säsongsmats iPhone-app som streckkodsläsare


Sedan en vecka eller så finns Säsongsmats första iPhone-app ute. Där ser du vad som är i säsong just nu, får recepttips, och i affären fungerar appen som streckkodsläsare som ger dig mer information varorna i grönsaksdisken (om varukoden finns i vår databas).

Matti Ryhänen, som byggt appen, har gjort ett jättejobb för att få fram en streckkodsläsare som faktiskt fungerar i småskum butiksbelysning och på alla typer av streckkoder. Okända varukoder kan du enkelt koppla till en råvaruartikel i appen. På så vis hopppas vi att streckkodsdatabasen sakta ska byggas upp. Eftersom all data på Säsongsmat.nu är öppen för andra appar och sajter att hämta, kan databasen komma till nytta för fler mat-appar.

Det vi samlar i streckkodsdatabasen är, för att vara riktigt petig, varukoder, och då i första hand varukoder som kan tänkas finnas kodade i streckkoder (t.ex. EAN-koder på förpackningar, hyllkantskoder i butikskedjor). Här finns också t.ex. PLU-koder. Och det vi är intresserade av är förstås färska matvaror, alltså i princip sådant du hittar i grönsaksdisken.

En grönare sajt

Sajter på internet har också en miljöpåverkan, fast det är lätt att glömma bort det. Och dåligt programmerade sajter är faktiskt en del av problemet.

Varje besök på en sajt kräver energi, inte minst för att kyla datorerna 6ndash; både servern och besökarnas datorer. En uppgift som cirkulerar (som jag inte hittat någon källa på) säger att fyra procent av världens elförbrukning går till att driva webben.

Men mycket av den energin används i onödan, på slarvig programkod som tvingar datorerna att jobba mer än nödvändigt. Att optimera programkod gör alltså inte bara sajter snabbare, utan också miljövänligare. Ändå är det inte alltid självklart att man prioriterar optimerad kod. I verkligheten gör nog de flesta ständiga avväganden mellan att få jobbet gjort snabbt, och att göra koden snygg. Allra viktigast är förstås den kod som används som byggsten till många andra sajter. En sådan byggsten är Semantic MediaWiki, som hela Säsongsmat.nu bygger på, liksom tusentals andra sajter på den semantiska webben.

Därför är det kul att ett av projekten som blivit uttagna till Google Summer of Code 2012 är ”Green Semantic MediaWiki”, där den indiske studenten Nischay Nahata med två handledare ska optimera Semantic MediaWiki för att göra sajter som bygger på den snabbare och miljövänligare. Och det finns mycket lågt hängande frukt att plocka, för Semantic MediaWiki är erkänt dåligt optimerat, och för varje besök på Säsongsmat.nu gör en massa onödigt arbete. Det lär det bli ändring på efter sommaren!

Sesongbasert mat?

Ser i besöksstatistiken att fler och fler besökare på Säsongsmat.nu har norska som standardspråk i sin webbläsare. Och googlar man på ”sesong mat” så verkar det finnas mindre skrivet på nätet på norska än på svenska. Kanske dags att börja översätta Säsongsmat.nu till norska också, och att vidga det geografiska området till Norge? Någon som skulle vilja vara med och jobba med det?

Sajten är rent tekniskt väl förberedd för att kunna visas på flera språk. Däremot behöver ju någon börja översätta, och dessutom skulle man behöva fundera på hur zonsystemet bäst utvidgas till Norge. Vi lägger ju bland annat vikt vid vad som faktiskt är tillgängligt i vanliga butiker, för att sajten ska vara så användbar som möjligt för vanliga konsumenter.