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
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;}
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.
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.
<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.
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.
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.
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>
Flade är ett actionscript 2.0 bibliotek som simulerar 2D fysik skrivet av Alec Cove. Här under ser ni ett exempel jag gjort med en tank-liknande grej i en ramp.
Instruktioner 1. Klicka en gång på skärmen för att aktivera. 2. Styr med höger<>vänster pilknappar
Upptäckte precis en väldigt intressant tjänst som heter Deleted.se. Där kan man se nyligen utgånga eller nyregistrerade .SE-domäner's datum när deras registrering löper ut, och även sortera dem efter PageRank, antal inkommande länkar med mera.