Baronen

De senaste veckorna har jag till och från skissat, designat och kodat den nya designen till Baronen.  Den uppmärksamma har kanske redan noterat att det har funnits en favicon på sidan ett par dagar redan. Men idag tar jag alltså steget från en ny favicon till en helt ny design, hoppas du gillar den.

Jag märkte på den gamla sidan att det blev lite rörigt och mycket innehåll här och där. Detta har jag försökt förbättra genom att använda en layout med endast två kolumner. Fokus nu ligger helt på posterna.

Annat som är nytt är nyhets/notisdelen, jag har länge velat posta korta allmänna webbnyheter och notiser med inte riktigt känt att de passat in. Jag har därför skapat en nyhets/notiskategori. Dessa poster kommer inte synas i vanliga listan utan presenteras ute i högerkolumnen. Jag hoppas själv att jag kommer använda detta nu och verkligen posta nyheter.

Tyvärr kanske det finns en och annan “bugg” på sidan som undgått mig, jag skulle därför uppskatta om du slänger in en kommentar nedan.

Nu när nya designen är på plats ska jag återgå till att skriva nya poster om webbutveckling, Internet och programmering.

Det har varit ganska tyst kring Utomic ett tag nu. Men idag kan jag presentera ett av våra senaste projekt, toddlr.se. Toddlr är alltså en site med inriktning mot barn och barnkläder.

Webbplatsen är uppdelad i tre olika delar, ett register över barnbutiker, barnkläder och en del för begagnade barnkläder. Tanken är att samla produkter, affärer och webbutiker på ett och samma ställe.

Sidan är precis lanserad så det saknas fortfarande viktig funktionalitet och det kan tyvärr förekomma vissa buggar. Hittar du något som verkar konstigt på sidan får du gärna höra av dig till oss.

Förutom toddlr har vi även lanserat en testsida, nämligen grossistkatalogen. (Tack Jonny för den domänen). Denna sida är ett register över grossister i Sverige indelade på kategori och region.

Jag har de senaste dagarna funderat, tänkt och skissat på en ny design till baronen.org. Nu känns det som jag har fått fram en design och layout som jag gillar.
Läs hela “Snart ny design på baronen“

Undviker du att skriva ut din epostadress på din webbplats på grund av risken för spam? Jag tänkte här gå igenom om hur du kan visa din epostadress som en bild med hjälp av PHP och GD.

För att detta skript ska fungera måste du självklart ha PHP men även GD-biblioteket. Skapa en php_info() och kontrollera att du har GD installerat.

Steg 1
Första steget är att skapa filen ‘display_email.php‘. Det är denna filen som kommer sköta grovjobbet.

header("Content-type: image/png"); //Detta är en PNG-bild
 
if(isset($_GET['email']))
//Dekodar den base64-kodade adressen
$email = base64_decode($_GET['email']);
else
$email = "Skicka med en email";
 
$font = 4; //Sätter teckensnitt till 4
 
//Räknar bredden och höjd på bilden via
//emailens längd o teckensnittet
$imageWidth = (imagefontwidth($font) * strlen($email)) + 5;
$imageHeight = imagefontheight($font) + 5;
 
$im = @imagecreate($imageWidth, $imageHeight) or die("Kan inte skapa bilden");
 
//Allokerar färger, vit och svart
$background_color = imagecolorallocate($im, 255, 255, 255);
$text_color = imagecolorallocate($im, 0, 0, 0);
 
imagestring($im, $font, 2, 2, $email, $text_color); //Skapar texten
 
//Skapar png-bilden
imagepng($im, null, 9);
 
//Förstör bilden
imagedestroy($im);

Kommentarerna i koden är ganska självtalande men vi kan gå igenom lite kort vad som händer. Det första vi gör är att tala om att innehållet är en PNG-bild.

Nästa steg är att ta emot epost-adressen via $_GET[]. Det vi sedan gör är att dekoda den, vi kodar den när vi skriver ut den i html-kod.

Epostadresser är självklart olika långa och eftersom vi inte vill ha en bild på 500px så räknar vi ut bredden och höjden på bilden baserat på antal tecken och teckensnittets storlek.

Sedan skapar vi en bild med imagecreate och allokerar färger.

Sedan använder vi funktionen imagestring som skapar texten, denna funktion tar sex parametrar, en bildresurs, teckensnitt, x, y, texten och vilken färg som ska användas.

Sist så skapar vi png-bilden för att sedan förstöra bildresursen.

Nu har vi alltså en fil som klarar att ta emot en epostadress och göra om denna till en bild i rätt storlek.

Steg 2
Det sista vi behöver göra nu är att använda oss av vår ‘display_email’ fil.

<img src="display_email.php?email=<?= base64_encode("min_epostadress@madeup.org") ?>" />

I och med att vi använder funktionen base64_encode så kommer resultatet se ut enligt följande, vilket gör det väldigt svårt för robotar att förstå att detta är en epostadress.
<img src="display_email.php?email=bWluX2Vwb3N0YWRyZXNzQG1hZGV1cC5vcmc=" />

Se Demo eller Ladda ner källkoden här.

Jag skrev tidigare att jag tänkte byta inriktning på bloggen. Här kommer första posten inom denna inriktning, jämför text i PHP.

Joacim har tidigare skrivit “Menar du…?“, här förklarar han två tekniker som används för att räkna ut vad man egentligen menar. Den första är Levenshtein och den andra är N-Grams. Jag kommer i denna post gå igenom hur man använder Levenshtein samt en funktion som heter similar_text.

Levenshtein – Menade du?

Jag tänkte i denna post gå igenom hur man använder Levenshtein för att räkna ut vad man egentligen menar. Metoden i PHP heter Levenshtein och tar emot två parametrar i form av två strängar man vill jämföra.

    $searchPhrase = 'vovlo';
	$words = array('volvo', 'bmw', 'saab', 'skoda', 'chrysler', 'opel', 'mazda');
	$distance = -1;
 
	foreach ($words as $word) {
		$levenshtein = levenshtein($searchPhrase, $word);
 
		if($levenshtein == 0) {
			$closest = $word;
			$distance = 0;
			break;
		}
		if($levenshtein <= $distance || $distance < 0) {
			$closest = $word;
			$distance = $levenshtein;
		}
	}
 
	if($distance === 0)
		echo 'Hittade en korrekt träff, ' . $closest;
	else
		echo 'Menade du... <em>' . $closest . '</em>?';

Vi börjar exemplet med att definiera det ord vi vill söka efter, i detta fall “vovlo”. Nästa steg är att skapa en array som innehåller de ord som vi vill matcha emot. Därefter loopar vi igenom alla ord i arrayen. I loopen använder vi Levenshtein-funktionen för att räkna ut distansen mellan de två orden. Till sist så skriver vi ut det närmsta ordet eller om det var en direkt träff.

Resultat Levenshtein

Din text verkar finnas – similar_text

Den andra funktionen är similar_text. Likt Levenshtein beräknar den likheten mellan två texter. I detta exemplet ska vi beräkna om en text verkar vara en dubblett.

$string1 = "Jag heter Andreas Eriksson och jobbar på Utomic och bloggar på baronen.org"
$string2 = "Jag är Andreas Eriksson och arbetar på Utomic och skriver på baronen"
echo similar_text($string1, $string2);

Detta exempel kommer skriva ut ’57′, det är alltså hur många bokstäver som stämmer överens i de båda strängarna. Det hade varit bättre om vi kunde få ut likheten i procent. Detta gör man genom att skicka med en tredje parameter som sedan får värdet i procent.

$string1 = "Jag heter Andreas Eriksson och jobbar på Utomic och bloggar på baronen.org"
$string2 = "Jag är Andreas Eriksson och arbetar på Utomic och skriver på baronen"
similar_text($string1, $string2, $p);
echo round($p,1). "%"

I och med att vi skickar med $p så kommer $p innehålla likheten mellan de två strängarna i procent. Innan vi skriver ut resultatet använder vi funktionen round som avrundar till en decimal.

Denna teknik kan man till exempel använda för att kontrollera om en text är en dubblett.

Resultat Similar_text

Här har du två olika metoder för att jämföra texter i PHP. Du kan säkert hitta fler användningsområden än de två jag har gått igenom i denna post.

Sedan en tid tillbaka har Google börjat köra sin kampanj “Let’s make the web faster“, där släpper de lite tips om hur du kan förbättra din webbplats. De har lite olika artiklar om hur du snabbar upp din javascriptkod, hur du optimerar bilder och hur du förbättrar din PHP-kod.

Det tog inte många dagar innan bloggposter och artiklar kom ut på nätet som sågade Googles tips och menar att de flesta tipsen är helt fel.

Ett av tipsen från Google var att inte kopiera variabler, enligt Google ska detta fördubbla minnesanvändningen. Grejen är den är PHP tillämpar något som kallas “copy-on-write”. Med detta menas att variabeln kopieras bara om du ändrar den.

The Zend Engine at the core of PHP 4 and 5 uses a technique known as
“copy-on-write” memory management. This means that no matter how many
times you assign the value of a variable to another variable, the data
is not copied until you change it.

Andra tips som tas upp är att använda “Switch” istället för “If/Else” och att använda “echo” istället för “print”.

Jag har hittat två stycken artiklar som bevisar att de flesta av Googles tips inte stämmer. Den första är PHP 10.0 bloggen och den andra en en diskussion på Google Group.

Om man tar detta ett steg längre, hur påverkar detta utvecklingen och hastigheten på Internet i förlängningen när ett företag som Google går ut och säger att “så här gör man, (fast det är inte det bästa sättet)”. Vad tror du?

Så här i mitten av sommaren 2009 känner jag att det är dags att uppdatera er om läget och vad som hänt den senaste tiden. Jag har nämligen endast varit ledig en vecka sedan jag slutade på HIK så det har hänt lite.

Nästan hela sommaren har vi lagt fokus på Utomic (Joacims och mitt nya företag) och kundjobb. Vi har slutfört totalt tre jobb och har två nya på gång in varav ett är riktigt spännande, dock handlar det inte så mycket om webbutveckling, utan snarare grafik och tryck. Vi har även börja komma på plats och känna oss ganska hemma på kontoret, även om vi sitter fyra personer på 14kvm. (Jag insåg precis att jag inte har skrivit om kontoret och inflyttningen på Kalmar Science Park här. Ta gärna en titt på Utomic Startup blog för att läsa vad som hänt på företagsbiten.)

Denna vecka har även jag och Nicklas dragit vårt strå till stacken gentemot Webbprogrammeringsprogrammet i Kalmar genom att ringa och välkomna de nya ettorna som ska börja i höst. Det har varit helt ok och jag önskar de nya ettorna stort lycka till och hoppas att de lär sig lika mycket som jag har gjort.

Om jag fortsätter lite på temat webbprogrammeringsprogrammet så startade jag den här bloggen för att skriva om mitt liv som student (jag tycker jag lyckades relativt bra). Denna tid är (tyvärr) över, så vad händer med bloggen nu? Min plan är att dela med mig av min kunskap, alltså skriva mer om webbutveckling, programmering och applikationer men även att behålla lite av det privata. Hur låter detta? Något speciellt ni vill läsa om?

I två år har jag läst webbprogrammering på Högskolan i Kalmar, ifall det är någon som har missat det. Men igår var dessa två år över. Jag har nu en högskoleexamen i Datateknik med inriktning webbprogrammering.

Dagen började med lite mingel för att följas av en traditionell fotograferingssession. Därefter var det dags att äta lite lunch. Efter lunchen började själva ceremonin där Johan Leitet, programansvarig höll ett mycket bra tal där han sa att vi är den sociala klassen och drog paralleller till att vi fungerar som en MVC applikation. Jag tror alla klassen kunde känna igen sig i talet.

Den tappra skaran av campus-studenter som är kvar är nog överlag mycket nöjda med dessa två år. Jag vill passa på att tacka de lärare som gjort utbildningen till det den är.

Tar emot mitt diplom av Johan under ceremonin

Delar av klassen

Nyblivna webbprogrammerare, Campus och Distans

Jag kommer förmodligen skriva en mer utförlig post om mina två år på HIK inom en snar framtid.

Vidare läsning

Läs mer hos barometern