Arkiv för mars, 2009

« Äldre inlägg

Google-optimerade bildlänkar

måndag, 16 mars, 2009

Att göra snygga menyobjekt är ofta lite krångligt om man vill ha med Google-optimeringen ner i sidstrukturen. Dessutom brukar bildmenyer leda till extremt många request från servern. Om menyobjekten skall innefattas av 3 olika bilder: link, hover och active och det dessutom finns 6 menyobjekt leder detta till 18 förfrågningar mot servern vilket är onödigt och blir slött.

För att slippa det mesta av dessa problem har vi löst det lite annorlunda. Vi utgår från en bild där vi placerar in alla menyobjekts olika faser och sedan använder vi css för att aligna bakgrunderna i de olika faserna. Vi har lagt upp ett exempel på www.meny.welcom.se dock har vi inte gjort mootools funktionen för att aktivera funktionern i IE6. Men alla normala webbläsare klarar av att hantera menyn med bara css. Mootools funktionen som gör detta kommer publiceras snarg här på bloggen.

Css koden för att skapa ett av objekten i menyn ser ut som följande:

li.gaos_top_menu_1 {background-position:0px 0;}
li.gaos_top_menu_1:hover, li.gaos_top_menu_1_over {background-position:0 -23px;}
li.gaos_top_menu_1 a.nav_item, li.gaos_top_menu_1_over a.nav_item {width:90px; height:24px;}
li.gaos_top_menu_1 .menu {left:0; min-width:140px}

För att kunna göra html koden så bra som möjligt så att vi får med indexeringen på texten så lägger vi in en förskjutning på alla <span> som i sin tur ligger innanför länkarna. Förskjutningen görs såhär:

ul#gaos_top_menu a.nav_item span {position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden;}

Resterande kod får ni hämta från meny.welcom.se om ni vill använda den.

Bilden som vi använder i exemplet ser ut såhär: (bilden är 8k)
här skall bakgrundsbilden ligga
Dock använder vi denna på en site som är tvåspråkig så det är därför vi har fler rader med i den.

Etiketter:,
Postat i css, html, nybörjare | Inga kommentarer »

JavaScript, runda hörn och skuggor

måndag, 9 mars, 2009

Runda hörn har, är och kommer alltid vara lite roligare och snyggare än kvadratiska. Att göra hörnen med bilder är ok, men om man pga olika bakgrunder skall blanda in .png bilder så blir det även om det är lösbart alltid lite krångligt och lite tungladdat. Med ett JavaScript som heter shadedborder.js så löser vi våra problem på ett ganska smidigt.

Antingen kan ni köra:
var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
border.render(’classnamn’);

Detta blir dock jobbigt eftersom du måste definiera det för varje element som skall använda skriptet. Betydligt bättre och enklare blir det om ni använder er av Mootools för att generera det på de element som skall köras. JS koden för att använda Mootools för detta skulle kunna se ut såhär:

gaosBorder : function () {
window.addEvent(’domready’, function() {
$$(’.gaosRundaHorn’).each(function(el){
var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
border.render(el.getProperty(’id’));
});});}

Vad vi gör här är att vi hämtar alla element som har class=”gaosRundaHorn”, efter det så hämtar vi det id som dessa classer har, på så sätt blir matchningen unik per element, men det gör att man måste sätta ett unikt id per element som skall använda de snygga runda hörnen. De variabler som sätts är ”corner:8″ och ”shadow:16″, ingen idé att förklara detta det är bättre att du testar.

För att få det att fungera med en bakgrund behöver vi sätta lite css på detta. Det gör vi med:

. gaosRundaHorn, . gaosRundaHorn .sb-inner {background-color:#DDD;}

Självklart kan du göra samma funktion med prototype eller något annat JS bibliotek, men då får du lösa det själv.. ;)

Som exempel kan jag nämna att denna sida som du är på (www.gaos.se) använder inte en enda bild på sidan utan alla hörn är gjorda med just shadedBorder.

Du kan ladda ner shadedborder här

(Jag förstår inte riktigt varför de har låst höjden i ”sb-inner” diven till 2048 px så jag har satt den till 100% ist. Hade lite problem när rutorna blev för långa.. Detta görs i JavaScriptet på rad 154 om ni får problem!)

Etiketter:, , ,
Postat i Mootools, css, html, medel | Inga kommentarer »

Logga MySQL-frågor med PHP och runkit

måndag, 9 mars, 2009

Allt eftersom en webbapplikation växer i storlek kan det vara svårt att hålla ordning på alla databasfrågor som körs vid exekveringen av applikationen. Genom att omdefiniera PHPs databasfunktioner med hjälp av php-modulen runkit kan man skapa en logger som hjälper till att hålla ordning på databasfrågorna i applikationen. Detta har två fördelar:

  1. Man får en överblick av MySQL-frågorna vilket gör utvecklingen av webbapplikationen lättare.
  2. Genom att omstrukturera databasfrågor och undvika redundanta frågor kan databasaktiviteten effektiviseras och minskas.

Så här gör man:


<?php

runkit_function_copy('mysql_query', 'mysql_query_original');

runkit_function_redefine('mysql_query', '$q', '$dump = debug_backtrace(); $a["query"] = $q; $a["file"] = basename($dump[0]["file"]); $a["line"] = $dump[0]["line"]; array_push($GLOBALS["queries"], $a); return mysql_query_original($q);'));

print_r($GLOBALS['queries']);

?>

I första steget kopieras originaldefinitionen av mysql_query till en annan funktion mysql_query_original. Därefter omdefinieras mysql_query till att logga all queries i en global variabel innan de utförs. Till sist är det bara att skriva ut den globala variabeln för att se samtliga frågor som har körts så långt i exekveringen.

Voila! Vi har en komplett mysql-logger som sparar alla dina queries, vilken fil de körs i och vilken rad i filen. Det är bara att börja optimera!

En problem med denna metod är att runkit normalt inte ingår i en PHP-installation. Modulen måste antingen kompileras med PHP eller laddas dynamisk vid runtime eller statiskt i php.ini, vilket förmodligen får de flesta webbhotelladministratörer att se rött. Dock är denna teknik främst användbar under utvecklingen av en applikation (p.g.a. den introducerade overheaden). Så om man sköter utvecklingen på en egen utvecklingsserver så är det inga problem att installera modulen.

Länk till runkit.

Etiketter:, ,
Postat i PHP, avancerat | Inga kommentarer »

Table är bra, men inte till allt!

söndag, 8 mars, 2009

<table> är en fantastisk html tag som är extremt bra på att hantera just tabeller. Problemet med taggen är att taggen fungerar lite för bra, detta har gjort att många använder den för att åstadkomma andra effekter. Ni som känner er slagna av anklagelsen skall veta att felaktigt användande av table  ofta genererar andra problem. T.ex.

-Sidor vars design är kodad med tables ofta väldiga problem när det kommer till att skrivas ut.
-Tables är långsamma och genererar mängder av html kod.
-CSS stödet från tabeller är krångligt och generar ännu mer kod.

Och till alla er som inte tror att det går att centrera en sida utan tables. DET GÅR..! För er som inte tror mig gällande det sista påståendet kommer här koden för att göra det..

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Text i mitten</title>
</head>
<body style=”margin:0px; padding:0px;background-color:red; text-align:center;”>
<div id=”page” style=”width:300px; height:300px;text-align:left; margin:0px auto; background-color:white;”>Text i mitten fast vänsterjusterat.</div>
</body>
</html>

En liten utläggning till krävs i detta kapitel.. Ni som håller på med emailutskick i html kan glömma allt jag skrivit här.. Satt för ett par veckor sedan och skulle formatera lite html för lotus notes.. det var inte helt enkelt. Nästa gång jag gör något liknande kommer det upp här på bloggen!

Etiketter:, ,
Postat i html, nybörjare | Inga kommentarer »

Safari 4 Beta

lördag, 7 mars, 2009

Apple släppte i början av veckan en ny version av Safari, det är fortfarande en beta version med den fungerar enligt mig mycket bra. Sedan två år tillbaka är jag hängiven appleanvändare, men Safari har hittils inte lyckats få mig att överge Firefox. Plugin som Firebug och webdeveloper har gjort det som ett självklart val när det kommer till webbutveckling. Efter att nu ha testkört Safari 4 under snart en vecka kan jag stilla konstatera att valet nu inte kommer vara lika självklart. Den inbyggda ”Wed Inspektorn” är mycket bra, och felkonsolen är också välfungerande, behöver testa dessa lite mer innan jag uttalar mig mer om det men det kommer snart mer information..

En mycket användbar funktion (om den hade fungerat) är den som gör att man kan välja vilken webbläsare som skall generera hemsidan! I listan bland väljbara webbläsare finns alla större utgåvor av ie, ff, Safari, Opera och iphone-Safari. Tyvärr är jag mycket tveksam om detta fungerar.. Visst genererar de koden olika men den enda webbläsaren som jag tror fungerar är iphone-Safari. Men det kanske förbättras tills beta versionen blir 4.0.

För er som använder Itunes och Finder (om ni är macanvändare) så kommer ni genast gilla vad de har gjort med bokmärken och historik. Nu scrollar man genom de olika valen med Cover Flow.

Återigen så bygger apple sin realese på hastighet. Deras nya ”Nitro Engine” som tydligen kör JS 30 gånger snabbare än ie7 är det som trycks på. Jag gillar tanken på att utveckling sker på detta område men jag förstår inte att de försöker sälja in webbläsaren med de argumenten, 99 % av användare på internet tror jag inte har en aning om vad det betyder ändå.. Och sanningen är den att jag känner ingen större skillnad på den.

Det finns en hel massa nya funktioner här kommer ett litet urval:

- En grym zoom funktion.
- CSS 3 support.
- En funktion som heter ”Top Sites” som listar dina favoritsidor på ett Cool Iris liknande vis.

Efter en veckas användning har jag inte riktigt övertygats om att jag borde byta standardläsare. Men jag skall ge Safari lite mer chans, för den är verkligen inte dålig, kan konstatera att det är ett lyft på många fronter. Framförallt gillar jag debuggerna och Cover Flow som gör det mycket enkelt att använda historiken!

Etiketter:, ,
Postat i Information, Tips, html | Inga kommentarer »

« Äldre inlägg