lillbra.se

Arkiv för the ‘Utveckling’ Category

Idag är det CSS Naked Day 2011

Idag den 9:e april är det den årliga CSS Naked Day, som uppmärksammar nyttan och betydelsen av strukturerad markup, semantisk html och webbstandarder. Så för 5:e året i rad så tar jag bort css:en från denna blogg för att visa min <body> – gör det du också! :)

ps. Nikke Lindqvist har en lista på andra svenska bloggar som firar nakenheten idag.

Mer på lillbra.se om: ,

Andra bloggar om om: , css naked day

Har din sajt en app-ikon för iPhone och Android?

Lägg till på hemskärmen

App-ikoner är de nya fav-ikonerna! Om en smartphone-användare gillar din sajt så kan han/hon välja att bokmärka den genom “Add to Home Screen”, eller “Lägg till på hemskärmen”.
Då skapas ett bokmärke på hemskärmen, som ser ut som en vanligt app, med tillhörande app-ikon. Om din sajt inte har någon app-ikon så skapar telefonen en liten skärmdump som används istället – inte särskilt snyggt. Men detta är snabbt åtgärdat!

För att din sajt ska få en app-ikon i iPhone eller iPad skapar du en bild som du sedan hänvisar till i din html-kod. I head-taggen lägger du in en link med rel-attributet apple-touch-icon:

<link rel="apple-touch-icon" href="/images/touch-icon.png" />

Eftersom de olika varianterna av iPhone och iPad har olika upplösning måste man skapa ikoner med olika storlekar. Bilderna ska ha följande mått, enligt Apples egna dokumentation:

  • iPhone 3GS: 57×57 pixlar
  • iPhone 4: 114×114 pixlar
  • iPad: 58×58 pixlar

Vad jag erfar så räcker det dock med de två översta – iPaden använder verkar använda den största. Måtten anges i ett sizes-attribut. Det fullständiga exemplet ser alltså ut så här:

<link rel="apple-touch-icon" href="/images/touch-icon-small.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/touch-icon-big.png" />

Apple lägger automatiskt till glans och rundade hörn på din ikon. Här ser du ett exempel på hur en ikon ser ut i original, jämfört med hur den visas på användarens hemskärm:

Ikonen i original och på Home Screen

Om du inte vill ha glans och runda hörn på din ikon kan du lägga till ordet precomposed i rel-attributet. Då visas ikonen i sitt originalutseende (via Sarah Parmenter):

<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />

Men, kanske någon undrar, hur gör man då för Android-mobiler? Svaret är enkelt: Man kan göra likadant! Android stöder nämligen också apple-touch-icon-precomposed, så om du använder det kommer din ikon alltså användas för majoriteten av smartphoneanvändare.

Vill du veta ännu mer om att skapa ikoner för iOS? Läs vidare på: How to Design App Icons for iPhone and iPad.

ps. För att uppmärksamma användaren om att de kan bokmärka/lägga till din sajt på hemskärmen kan jag tipsa om add2home.js (via Emil Stenström). Det är ett litet script som öppnar upp ett meddelande i närheten till “Add to Home Screen”-knappen för att upplysa användaren hur de bokmärker din sajt. Snyggt!

Mer på lillbra.se om: , , , , , ,

Andra bloggar om om: , android , app , favicon , ikoner , ipad , iphone

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!

Mer på lillbra.se om: , , ,

Andra bloggar om om: , html , javascript , jquery

Page 1 of 1612345»10...Last »
Rullar på Wordpress med modifierat Guerrilla-tema