Rundade hörn med CSS

Jag har tidigare skrivit om hur man kan göra rundade hörn på html objekt utan att använda bilder. I den posten hänvisade jag till Nifty Corners.

Nu har Alessandro Fulciniti som ligger bakom tekniken släppt en ny uppdaterad version som han kallar Nifty Corners Tube. Nu kan man även skapa kolumner knappar och hela layouter med scriptet. Funktionaliteten finns i ett javascript som man kan ladda ner gratis och är släppt under GNU GPL licens.

Jag tycker Nifty Corners Tube är ett väldigt bra skript som jag själv har testat. Det finns dock mängder av andra tekniker och SmileCat.com har sammanställt en fin lista på andra sätt att göra rundade hörn.

By Jesper Lind

Tagga upp nätet

Att låta användarna sköta om klassificeringen av ett systems data har blivit väldigt populärt i och med ankomsten av webbplatser som Flickr och Del.icio.us. Den nya användarstyrda modellen kallas för "folksonomier". Folksonomier är ett relativt nytt begrepp och finns att läsa mer om på Jonasweb.nu som skriver så här om det:

Folksonomier (folksonomy på engelska, ibland även "collaborative tagging") och taggonomier (tagsonomy) är namn på sådana metoder eller klassificeringssystem. "Folk+onomi" och "taggonomi" anspelar på orden "folk" och "taxonomi". En taxonomi är en professionell och ofta kommersiell kategorisering av data.

Och visar på skillnaden mellan Taggonomi och Folksonomier.

Ibland används "folksonomi" för att beteckna klassificering för allmänt bruk - för "folk i allmnhet". Taggonomi blir då ett personligt (eller privat) klassificeringssystem.

Båda begreppen är alltså varianter på publik- och intern uppmärkning kan man säga. Nu menar experterna att ett sådant system även kan gynna företagsvärlden genom att t ex låta sina anställda hjälpa till att tagga data i sina intranät. Möjligheten att skapa egna innehållsbeskrivningar ger en känsla av delaktighet i företaget eller sajten. Jag kan rekommendera denna artikeln om du tänkt införa ett användarstyrt taggningssystem i dina projekt. Gillar speciellt ideén att ha privata och publika taggar. 

By Jesper Lind

Ange relativa fontstorlekar på webben

Jag har tidigare skrivit om vilka typsnitt som är säkra att använda på webben om man vill ha samma resultat på alla olika system. Nu tänkte förklara lite om hur man anger storleken på typsnittet. I CSS har man följande storlekar att välja bland.

* px - pixels, bildskärmspunkter * pt - points, typografiska punkter * pc - picas, typografiska "punkter" * mm - millimeter * cm - centimeter * in - inches, tum * em - typografisk fyrkant * ex - x-höjd

Glöm punkter på skärmar
För det första, glöm bort att visa typsnitt i punkter eller picas. Folk är vana vid att arbeta med punkter i program som Word och Photoshop, och sedan felaktigt använt det för att beskriva textstorlekar på webben. Dessa bör inte användas för skärmvisning. Centimeter, Millimeter och Tum bör också undvikas. Den enda gång man ska ange storlek i punkter är i separata stilmappar för sidor som ska skrivas ut på en skrivare.

Fasta enheter
cm - centimeter
mm - millimeter
in - tum - 1in = 2.54 cm
pc - picas - 1pc = 12 pt
pt - punkter - 1pt=0.353 mm

CSS referens för värden

Pixlar eller em?
Pixlar är ju den naturliga enheten på skärmar och lämpar sig väldigt bra. När det gäller typsnitt har det länge vart populärt att ange storleken i pixlar. Oftast vill designers ha lite mindre text och väljer något mellan 9-11 pixlar på brödtexten. En nackdel med detta är att i vissa webbläsare går det då inte att ändra storleken genom inställningarna (t ex IE6).

Relativa storlekar är bästa valet
Fler och fler webbplatser inser nu fördelarna med att ange typsnittstorlekarna i em eller % istället för i fasta pixlar. Vad betyder då em? Den typografiska fyrkanten är olika stor beroende på vilket teckensnitt man använder. Den utgår nämligen från bokstaven M i valt teckensnitt. Detta innebär alltså att måttet em varken är beroende av skärmens upplösning eller vilket operativsystem man använder. Det som styr är i stället besökarens egna inställningar för teckenstorleken.

Ett exempel
I följande exempel visas all text i 75% av användarens standardinställning. Radhöjden är 133% för att få in lite luft mellan raderna. Rubriken h3 visas i 200% i relation till det värde vi angett i body.

body { font:0.75em/1.3em Arial, Helvetica, sans-serif; }
h3 {font-size:2em;}

Mer läsning
http://www.gilbertson.nu/019.htm
http://www.jonasweb.nu/sidor/stylesheets/font.html

By Jesper Lind

Google slår på stort - köper YouTube

Spekulationerna har varit många om vem som skulle köpa YouTube.com. Vissa analytiker har ansett att det vore en riktigt dålig affär att ta över YouTube. De tror att stämningar snart kommer börja rulla in för att det finns så mycket upphovsrättsskyddat material från sajten.

Nu meddelas det dock att jätteaffären är klar. Motsvarande 12 miljarder svenska kronor gick kalaset på och är den största affären i Googles 8 år långa historia. De båda bolagen kommer i fortsättningen drivas separat. - Man vill bevara dess framgångsrika varumärke och passionerade användarbas, säger Google i ett uttalande.

By Jesper Lind

Hur man använder ExpressionBuilder

Ibland känns det naturligt att skriva kod enligt följande:

<asp:Label id="lblUserName" runat="server" Text='<%= CurrentUserName %>' />

Men då får man felet: "Server tags cannot contain constructs".

Infinitiesloop finns det en artikel hur man kan använda ExpressionBuilder att komma runt problemet. Då kan man använda liknande uttyck så här:

<asp:Label id="lblUserName" runat="server" Text=<%$ Code: CurrentUserName %> />

För att detta ska bli möjligt måste man först registrera expressionBuildern i Web.Config:

<compilation debug="true">
    <expressionBuilders>
    <add expressionPrefix="Code" type="CodeExpressionBuilder"/> </expressionBuilders>
</compilation>

Sedan skapar man en klass i App_Code som döps till CodeExpressionBuilder.cs:

using System;
using System.CodeDom;
using System.Web.UI;
using System.ComponentModel;
using System.Web.Compilation;
[ExpressionPrefix("Code")]

public class CodeExpressionBuilder : ExpressionBuilder
{
public override CodeExpression GetCodeExpression(BoundPropertyEntry entry, object parsedData, ExpressionBuilderContext context)
{
return new CodeSnippetExpression(entry.Expression);
}
}

Då kan man sedan använda uttryck som dessa, direkt i ens kontroller. Coolt!

<%$ Code: DateTime.Now.AddDays(1) %>
<%$ Code: "Hello World, " + CurrentUserName %>
<%$ Code: CurrentUserName.ToUpper() %>
<%$ Code: "Page compiled as: " + this.GetType().AssemblyQualifiedName %>

Mer läsning finns hos Fredrik Normén

By Jesper Lind

Hämta aktuella växelkurser med Web Service

Uppdatering: Web servicen som används i detta exemplet verkar inte finnas kvar längre på nätet.

Inspirerad av en artikel om växelkurser på Code Project har jag gjort ett eget exempel. Jag använder en web service som finns xmethods.net.

Registrera tjänsten
Först måste man använda Visual Studio till att lägga till en referens till servicen.

1. Högerklicka på rooten i Solution Explorern
2. Välj "Add Web Reference"
3. Skriv in url till tjänsten. I vårt fall: http://www.xmethods.net/sd/2001/CurrencyExchangeService.wsdl
4. Skriv in "Web Reference Name". Vi döper den till Rate_WS
5. Då skapas en ny mapp som heter "App_WebReferences" i projektet.

När du har gjort ovanstående så kan man använda tjänsten från sin kod. Här följer ett enkelt exempel som skriver ut några växelkurser.

<%@ Page Language="C#" Trace="true" validateRequest="false" EnableSessionState="True" EnableViewState="true" SmartNavigation="false"%>
<script Language="c#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
try
{
Rate_WS.CurrencyExchangeService to_currency = new Rate_WS.CurrencyExchangeService();
float Euro_Dollar = to_currency.getRate("euro", "united states");
float Dollar_Sek = to_currency.getRate("united states", "sweden");
float Euro_Sek = to_currency.getRate("euro", "sweden");
float Sek_Yen = to_currency.getRate("sweden", "japan");

lblEuro_Sek.Text = Euro_Sek.ToString();
lblDollar_Sek.Text = Dollar_Sek.ToString();
lblEuro_Dollar.Text = Euro_Dollar.ToString();
lblSek_Yen.Text = Sek_Yen.ToString();
}
catch (Exception) { }
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Currency converter in ASP.NET</title>
<link rel="stylesheet" href="../example.css" type="text/css" />

</head>

<body>
<div id="content">
<b>Currency example using web service</b>
<br /><br />

1 US Dollar = <asp:Label ID="lblDollar_Sek" runat="server" /> SEK
<br /><br />
1 Euro = <asp:Label ID="lblEuro_Sek" runat="server" /> SEK
<br /><br />
1 Euro = <asp:Label ID="lblEuro_Dollar" runat="server" /> US Dollar
<br /><br />
1 SEK = <asp:Label ID="lblSek_Yen" runat="server" /> Yen

</div>
</body>
</html>

Länk till sida som visar kurser i real-tid (Exemplet är nedtaget eftersom web servicen inte längre finns på nätet)

Mer läsning:
Läs även den danska bloggen Walk the walk som i ett exempel konsumerar en tjänst på Webservicex.net. Den verkar bra eftersom man anger valutabetäckningen (SEK, USD, DKK osv) som inparameter.

By Jesper Lind

Skapa en favicon.ico till din webbplats

Detta är en beskrivning om hur man gör en liten ikon som syns bredvid adressen i webbläsaren och i bokmärkena. Filen ska vara 16x16 pixlar och av typen ico. Skapa ikonen Börja med att skapa själva bilden i ett bildprogram t ex Photoshop. Ett tips är att först göra bilden i 64x64 pixlar och förminska bilden med inställnngen "Bicubic Sharper". Läs mer på denna artikel, där finns även lite felsökningstips. För att spara bilden i rätt format i photoshop behöver du ett plugin från Telegraphics. Ett annat enkelt sätt är att spara i PNG och använda denna webbtjänsten för att skapa din favicon.ico. Där kan man även skapa animerade ikoner med scrollande text. png2ico är ett gratisprogram som du kan ladda hem för att konvertera från PNG till ICO. Ladda upp ikonen För att bilden ska synas på din webbsida laddar du sen upp ikonen i rootmappen. Då får alla dina sidor samma ikon. I detta fall måste ikonen heta favicon.ico. Om du vill ha olika ikoner på olika sidor kan du ange detta i head taggen, du kan nu variera filnamnet.
Eller genom att ange full url:
By Jesper Lind

Pinga Googles Blog Search

Nu är det möjligt att pinga Googles Blog Search med en url eller rss till din blogg. Många av de vanligaste bloggmotorerna stödjer automatisk ping till valfria tjänster. Hoppas detta blir det nya sättet som man meddelar Google om förändringar på sin sida, inte bara vid bloggar. Att skapa en Google Sitemap är lite omständigt, speciellt om man har en dynamisk webbplats.

Mer info:
Läs mer om hur man pingar Google
Google Blog Search Ping Service

By Jesper Lind

Scrollbars på html-element

Så här gör man för att få fram scrollbars på ett visst element i html.


<div id="d1" style="overflow: auto; width: 300px; height: 300px; text-align: left" align="center">
This content will be scrollable when filled with too much content.
</div>

By Jesper Lind