Styla om länkar som knappar

Standardknapparna i html kan vara lite tråkiga. Jag finner mig ofta att använda länkar istället eftersom de vanliga <input type="submit" /> och <Button /> elementen. Det har helt enkelt för dåligt CSS-stöd för att kunna designas i någon större utsträckning. Ett alternativ är ju att använda en bild som knapp. Nackdelen är då att man måste skapa en ny bild för varje ny text man vill ha.

Jag bestämde mig istället för att försöka ändra utseendet på länkarna för att de ska likna knappar och här nedan ser du resultatet. Jag använder en tonad bild bakgrund och vänder på denna när man för markören över (hover).

Detta är ett exempel på en knapp

a.button, a.button:link, a.button:active, a.button:visited {

background-image: url('../images/button_back.gif');
padding:0 5px 0 5px;
background-position:50% 50%;
background-repeat:repeat-x;
border: 2px outset #cccccc;
color: #fff;
font-weight:bold;
text-decoration:none;}
a.button:hover
{
color: #fff;
background-image: url('../images/button_back_hoover.gif');
text-decoration:none; }

By Jesper Lind

Dubbla textrutor, knappar och submit

Jag kommer här skriva lite om automatisk postback vid entertryckning. Detta blir lite snabbare anteckningar så att jag ska kunna skriva om inlägget bättre senare.
public partial class TheClass: System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //Om du vill kunna ha fler än en textruta och submitknapp så måste först en bugg i asp.net forceras. //Lösning - lägg till en hiddenfield längst upp på sidan. string script = "", RegisterStartupScript("submitHack",script); //En sökruta ska trigga en javascript event på enter, fast inte submitta huvudknappen i loginformuläret som ligger längre ner. tbSearch.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13){ custom_search();return false;}"); } }
By Jesper Lind

Lägga till meta data i master page

Så här kan man göra för att dynamiskt lägga in metataggar i masterpages. Då får man en centraliserad plats för att t ex läsa in nyckelorden från en databas.

//Lägg till nyckeord
string strKeywords = "nyckelord1, nyckelord2";
HtmlMeta metaKeywords = new HtmlMeta();
metaKeywords.Name="keywords";
metaKeywords.Content=strKeywords;
Page.Header.Controls.Add(metaKeywords);

//Lägg till beskrivning
string strDescription = "En beskrivning till din webbplats";
HtmlMeta metaDescription = new HtmlMeta();
metaDescription.Name="description";
metaDescription.Content=strDescription;
Page.Header.Controls.Add(metaDescription);

//Skriv ut datum
HtmlMeta metaDate = new HtmlMeta();
metaDate.Name="date";
metaDate.Content=DateTime.Now.ToString("yyyy-MM-dd");
metaDate.Scheme = "YYYY-MM-DD";
Page.Header.Controls.Add(metaDate);

//Exempel för vertifikation för Google tjänster
//Skriv ut google verifikation
HtmlMeta metaVerify = new HtmlMeta();
metaVerify.Name="verify-v1";
metaVerify.Content="JhpBMxYdMJ8ywzA+n5+CCKm+i9SwRUK+hyoxL7tR1Ho=";
Page.Header.Controls.Add(metaVerify);

//Lägg till meta data för hur robotar ska uppföra sig, ändra till "noindex,nofollow" på de som inte ska scannas
string strRobots = "index,follow";
HtmlMeta metaRobots = new HtmlMeta();
metaRobots.Name="robots";
metaRobots.Content=strRobots;
Page.Header.Controls.Add(metaRobots);

Uppdatering:
I exemplet ovan är själva datan hårdkodad. Tanken var att läsa värdena från en databas tabell. Ett annat sätt är att definiera dessa värden i web.sitemap filen. Här nedan är ett exempel för hur man kan läsa värdena.

Ett stort tack till Henrik Feldt på MGT Kompetens AB för bidraget med följande kodstycke.

SiteMapNode node = SiteMap.CurrentNode;
if (node != null)
{
System.Web.UI.Page page = sender as Page;
if (page != null)
{
HtmlMeta metatag;
if (!page.Header.ToString().Contains("name=\"description\""))
{
if (!String.IsNullOrEmpty(node.Description))
{
metatag = new HtmlMeta();
metatag.Name = "description";
metatag.Content = SiteMap.CurrentNode.Description;

page.Header.Controls.Add(metatag);
}
}
if (!page.Header.ToString().Contains("name=\"keywords\""))
{
string keywords = node["keywords"];
if (!String.IsNullOrEmpty(keywords))
{
metatag = new HtmlMeta();
metatag.Name = "keywords";
metatag.Content = keywords;

page.Header.Controls.Add(metatag);
}
}
}
}

By Jesper Lind

Spara variabler i HttpRequest

HttpContext.Current.Items är en av Asp.Net's mindre kända sätt att spara data på. Items är en kollektion av nyckelbaserade data där man kan spara vilken typ av obejkt som helst. Dessa lever sedan under den aktuella HttpRequesten. Perfekt om man vill kunna dela "globala" variabler mellan user controls.

//Spara variabel
string key = "theKey";
int intNumberToSave = 555;
HttpContext.Current.Items[key]=intNumberToSave;

//Hämta variabel
Response.Write("Nummer: " + (int)HttpContext.Current.Items[key]);

By Jesper Lind

Botanisera i Google's tjänster

Jag kommer här skriva om några ur den uppsjö av Googles tjänster som de erbjuder för det världsomspännande nätet.

Google Adwords
Med Adwords-tjänsten kan en annonsör köpa annonsplatser från Google. Dessa visas i till höger i Googles sökresultat som sponsrade länkar, eller på andra hemsidor som har en Adsense kampanj.
https://adwords.google.com/

Google Adsense
Med Adsense kan man välja att visa reklam på sin egen sida för andra företag. Man får betalt för hur många gånger annonserna visas samt hur många som klickar på dem. Dessa inkomster är enligt svensk lag beskattningsskyldiga och ska enligt denna diskussionen tas upp i din deklaration som "trafikstyrningsavgifter". https://www.google.com/adsense

Google Alerts
Få email skickade när någon söker på en viss term som man själv kan ange. http://www.google.com/alerts/

Google Analytics
Google Analytics är Googles gratistjänst för att se hur mycket besökartrafik man har på ens hemsida. Tyvärr tar det rätt lång till att få ett konto och man får räkna med några månaders väntetid.
http://www.google.com/analytics/

Google Earth
Google earth finns dels att ladda hem som applikation till PC och dels som sökfunktion på internet. Man kan se sateliltbilder över i stort sätt hela världen, kartor och även 3D byggnader för en del städer.
http://earth.google.com/

Google Moon
Liknade funktion som för Google Earth fast nu bilder från månen men väldigt begränsat.
http://moon.google.com/

Google Code Search
Med denna tjänst kan man söka efter programmeringskod. http://www.google.com/codesearch

Writely
Ett alternativ till Word fast på internet. Absolut inte lika komplett som Word i Microsoft Office men väldigt smidigt om tex två personer ska jobba på samma dokument. http://www.writely.com/

By Jesper Lind

Bestämma hur sessioner ska lagras

Html är ett envägsprotokoll och kan inte hålla reda på från vilken webbläsaren ett anrop kommit från. När man programmerar dynamiska webbplatser är det ofta av stor vikt att man vet vilken användare som surfar på sidan vid ett visst tillfälle. För att hålla reda på dessa sessioner, som de kallas, finns det tre sätt att använda sig av i Asp.Net:
  • In Process (InProc)
  • State Server
  • SQL Server

In Process är det snabbaste och innebär att sessionerna lagras i arbetsprocessen "aspnet_wp.exe". Det har sina nackdelar eftersom alla sessioner försvinner om man startar om applikationen.

SQL Server är den säkraste metoden men kräver att man har en licens för SQL Server.

Vid State Server lagras sessionerna i en speciell process dedikerad till endast detta. Processen heter "aspnet_state.exe" och "aspnet_wp.exe" kommunicerar sedan med denna för att hämta och spara sessionsobjekten. Detta är en något långsammare metod än "In Process" men har sina fördelar i och med att applikationen kan startas om utan att man förlorar sessionosbjekten. Passar även bra vid webbfarmar där många servrar kan dela på samma lagringsplats för sessionerna.

För att ställa in en applikation för "State Server" anger man följande i web.config filen.

. . . mode="StateServer"
stateConnectionString="tcpip=127.0.0.1:42424"
cookieless="false"
timeout="20" />

Ska flera servrar dela på samma State Server så måste man fylla i serveradressen istället för 127.0.0.1. Se även till att servicen "ASP.NET State Service" är igång på servern och inställd på automatisk uppstart.

By Jesper Lind

Internet Explorer 7 (Beta 3) är släppt

http://www.codeodyssey.se/upload/resource/blog/ie7_h2_rgb.png

Jag testade beta 3 lite snabbt och det ser väldigt bra ut. Det är lite irriterande att man inte kan (så vitt jag vet) ha både IE6 och IE7 installerade parallellt på sin dator. Eftersom jag ständigt är i behov av att testa hemsidor på IE6, som de flesta fortfarande använder , avinstallerade jag IE7.

Nu väntar vi ivrigt på att den skarpa versionen kommer ut. Enligt senaste rykten kommer det ske tidigt i höst. Den stora frågan är hur bra denna nya webbläsare från Microsoft kommer följa webbstandarderna skapade av World Wide Web Consortium. Förshoppnings vis kommer det bli en hel del förbättringarna gentemot den gamla IE6.

By Jesper Lind

Skapa kolumner med css utan tabeller

Så här gör man för att skapa två boxar bredvid varandra med css-regler.

<div id="container" style="background-color:red;">

<div id="leftColumn" style="float:left;">
Innehåll i vänster cell
</div>
<div id="rightColumn" style="float:right;">
Innehåll i höger cell
</div>
<div style="clear:both;">&nbsp;</div>
</div>

Att avsluta med en ny div som rensar båda kanter kan vara bra ide. Ibland sträcker sig omgivande cellen inte tillräckligt långt ner på sidan (den jag har kallat "container" i exemplet). Det är framförallt om man bara har bilder inuti cellerna som den omgivande cellen inte går ända ner. Det finns även en bugg i IE6 som löser sig om man har en div längst ner som rensar båda kanter.

By Jesper Lind