Bloggposter taggade som ‘html’
Att skapa och lägga till html-element med jQuery
Det finns många olika sätt att skapa nya html-element på en sida med hjälp av jQuery. För att, till exempel, skapa en länk kan du skriva så här:
link = $('<a href="http://lillbra.se">Min blogg</a>');
$('body').append(link);
Eller så kan du infoga en html-sträng direkt, så här:
$('body').append('<a href="http://lillbra.se">Min blogg</a>');
Men om elementet man skapar ska ha många attribut, blir det ofta kladdigt i koden med långa strängar. Så med jQuery kan du skicka med attribut, och även fästa events, till elementet genom en hashmap direkt när du skapar det:
var link = $('<a />', {
className: 'close',
href: '#',
text: "Hide more info",
click: function(e){
e.preventDefault();
$(this).parent().slideToggle();
}
});
Snyggt och överskådligt! Se fler exempel på detta här: Beatiful Element Creation With jQuery (via Jonathan Cristopher).
Även detta sätt kan dock bli rörigt om man ska bygga en större html-struktur, med nästlade element.
Då kan man använda templates. Tanken med templates att du skapar en mall, i form av en html-struktur, som du sedan fyller med data, t.ex. ett eller flera json-objekt. jQuery har sitt eget template-plugin, men det finns även andra som Mustache och Underscore.
Först skapar man alltså mallen – den kan ligga inline som en script-tagg i html-koden:
<script id="vcard-template" type="text/x-jquery-tmpl">
<div class="vcard">
<a class="fn url" href="${ website }">${ name }</a>
<span class="org">${ company }</span>
</div>
</script>
Sedan hämtar man ut mallen och fyller den med sitt data, för att sedan infoga det på sidan:
author = { name : 'Jonatan Larsson',
website: 'http://lillbra.se',
company: 'Valtech' };
$('#vcard-template').tmpl(author).appendTo('#contact');
Se fler exempel på hur du använder jQuerys templates här.
När man infogar element på sidan bör man tänka på att uppdatera DOM-trädet så få gånger som möjligt. Om man t.ex. skapar en lista så ska man undvika att infoga ett li-element åt gången:
list = $('#my-list');
for (var i=0; i<items.length; i++){
list.append('<li>' + items[i] + '</li>');
}
Istället kan man skapa html för alla li-element och sedan injecta dom en enda gång:
htmlItems = '';
for (var i=0; i<items.length; i++){
htmlItems += '<li>' + items[i] + '</li>');
}
$('#my-list').html(htmlItems);
Angående prestanda kan det ibland också vara bättre att skapa eller infoga element med native javascript, till exempel använda .innerHTML() istället för .html(), eller .createElement() istället för strängar. Den nyfikne kan även kolla in prestandamätningar mellan olika template-plugins här. Lycka till!
Så bestämmer du bild för din sajt vid Facebook-delning
När man delar en länk på Facebook så visas en tumnagel eller ikon för url:en. Facebook letar efter en passande bild på den inlänkade sajten och infogar den, vilket ibland kan tyckas aningen slumpmässigt. Men du kan själv styra vilken bild som visas.
Facebook har skapat OpenGraph, ett metadata-protokoll för att beskriva sidor och relationer på webben. Så för att ange vilken bild Facebook ska använda lägger du in följande meta-tagg i din head-tagg:
<meta property="og:image" content="http://lillbra.se/images/facebook-thumbnail.png"/>
Du måste dessutom specificera namespace för protokollet på detta sätt:
<html xmlns:og="http://ogp.me/ns#">
Bilden du använder ska vara minst 50×50 pixlar stor och ha en ratio på högst 3:1. Filformat som stöds är png, jpeg och gif.
OpenGraph-protokollet har utöver og:image, tre andra egenskaper som är obligatoriska att ha på sidan: title, type och url. Så det fullständiga exemplet ser ut så här:
<html xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:title" content="Lillbra.se"/>
<meta property="og:type" content="blog"/>
<meta property="og:url" content="http://lillbra.se"/>
<meta property="og:image" content="http://lillbra.se/images/facebook-thumbnail.png"/>
Läs mer om OpenGraph och på vilka sätt Facebook använder det här.
OpenGraph och HTML5-validering
Om du använder HTML5 som doctype (och det gör du väl!?) kommer ovanstående exempel att orsaka valideringsfel. Jag har hittat tre metoder att hantera detta problem:
Antingen kan du se till att endast skriva ut meta-taggarna för Facebook, genom att kontrollera user-agent-strängen. För alla andra besökare serveras alltså valid html utan OpenGraph-element. Ett exempel på hur du gör detta hittar du här.
Ett annat alternativ är att använda det gamla sättet att peka ut bilden med en link-tagg istället för en meta-tagg. Så här:
<link rel="image_src" href="/images/facebook-thumbnail.png" />
Detta sätt rekommenderades innan OpenGraph fanns, men fungerar fortfarande. Hur länge Facebook stöder detta är dock oklart.
Det tredje och sista alternativet är att använda HTML+RDFa – en standard för att använda RDFa (där du kan definiera xml-namespaces) tillsammans med HTML5. Då skriver du så här (via Semantic Overflow 1 & 2):
<!DOCTYPE html>
<html version="HTML+RDFa 1.1" xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:image" content="http://lillbra.se/images/facebook-thumbnail.png"/>
HTML+RDFa är dock en working draft och W3Cs validator stöder inte HTML+RDFa, och därför kommer du inte kunna validera din kod med den.
Annat att tänka på
Många rapporterar problem med att Facebook inte visar rätt bild, både när man använt OpenGraph och det gamla sättet. Själv har jag inte stött på några problem, bara man följer ovan beskrivna regler. Och Facebook har en egen länk-inspektor där du kan ange en url och få ett resultat på vilken metadata Facebook kan hämta för den sidan. Lycka till!
ps. Om du använder WordPress hittar du en enkel steg-för-steg guide till hur du implementerar OpenGraph här.
Kom igång med WAI-ARIA
WAI-ARIA (Accessible Rich Internet Applications) är en standard från W3C för ökad tillgänglighet på javascript-tunga webbplatser. Den beskriver hur man ska hantera innehåll i html som är dynamiskt och ändras, till exempel genom AJAX.
Standarden har två huvuddelar: roller (roles) och tillstånd & egenskaper (states & properties).
Roller
Roller kan användas för att beskriva vilken roll (duh!) en viss del eller visst element har på sidan eller i applikationen. Du använder roller genom att lägga till attributet role i din html-kod, t.ex:
<div role="banner">
Det finns 61 stycken roller, mer eller mindre självförklarande, som t.ex. alertdialog, tabpanel, progressbar.
De mest övergripande rollerna kallas landmarks och kan användas av skärmläsare för att navigera runt till huvuddelarna av dokumentet, d.v.s. samma användning som en “Hoppa till innehållet”-länk. Landmarks-rollerna är följande:
- application – del av sidan som anses vara mer applikation än dokument
- banner – t.ex. sidhuvud som beskriver webbplatsen
- complementary – stödmaterial till huvudinnehållet som även är meningfullt om det skulle vara fristående
- contentinfo – metadata om huvudinformationen
- main – huvudinnehållet på sidan
- navigation – navigationsmeny
- search – sökfunktion
Som synes har några av rollerna stora likheter med betydelsen av vissa html5-element. Steve Faulkner har en bra jämförelsetabell mellan landmark roles och html-taggar där du kan se förhållandet mellan dem (via Bruce Lawson).
För samtliga roller bör man tänka på att inte sätta ut roller som konkurrerar med html-elementets semantiska betydelse (via html5doctor). Till exempel ska ett button-element inte ha något annat än en button-roll.
Egenskaper och tillstånd
Egenskaper och tillstånd används för att meddela en skärmläsare eller annat hjälpmedel när förändringar görs på sidan. Egenskaper och tillstånds sätts genom attribut med formatet aria-*. Till exempel:
<div aria-hidden="true">
Man kan använda flera attribut på samma element och de ska med fördel kombineras med roll-attributet. T.ex:
<a role="button" aria-haspopup="true" aria-owns="minPopup">
Skillnaden mellan egenskaper och tillstånd är att egenskaperna (t.ex. aria-labelledby) oftast inte ändras för ett element, medan tillstånd (t.ex. aria-checked) ändras löpande då användaren interagerar på sidan.
Det finns totalt 35 stycken egenskaper och tilstånd. Några av de, i mina ögon, viktigaste är:
- aria-live – Indikerar att ett område eller element kommer att uppdateras. Värde: off/polite/assertive, beroende på om användaren ska meddelas vid en uppdatering eller ej.
- aria-describedby – Hänvisning till ett annat element som innehåller mer information som användaren kan behöva för att använda elementet. Värde: element-id.
- aria-hidden – Om ett element är gömt eller inte. Värde: true/false.
- aria-selected – Om ett element är valt eller inte. Värde: true/false.
- aria-owns – Visar att ett element hör ihop med ett annat element, även om DOM-trädet inte avspeglar denna relation. Värde: element-id.
- aria-expanded – Om ett element, eller annat element som det kontrollerar, betraktas som utfällt eller inte. Värde: true/false.
- aria-haspopup – Om ett element har en popup-/dropdown-meny kopplad till sig. Värde: true/false.
Verktyg för utvecklare
Om du använder WAI-ARIA och vill testa resultatet för användaren kan du använda dessa verktyg (via eutveckling.se):
- Juciy Studio accessibility toolbar Firefox plugin – plugin som känner av och tolkar WAI-ARIA-attribut
- Validator SAC – en validator som har WAI-ARIA-stöd
Läs mer om hur du kommer igång med WAI-ARIA i artikeln Introduction to WAI ARIA på dev.opera.com. Lycka till!
Jag heter Jonatan Larsson och jobbar som webbutvecklare. Det här är min blogg om webbutveckling och webb- trender. Du kan läsa mer om mig här.
