Blog|mez.nu

Förutom att vara en användarvänlig platform för vanliga bloggare sÃ¥ erbjuder WordPress en väldigt bra platform för att bygga websidor för företag. Jag har nu ett projekt pÃ¥ mitt bord för att göra just detta – bygga en hemsida för ett företag i WordPress.

Om man helt bortser från blogg-delen av WordPress så har den även en väldigt bra sid-hantering, alltså helt vanliga statiska sidor som de flesta företag faktiskt vill ha. Sen är det ju inte helt vanligt att företag väljer att driva en blogg, just den formen av skriverier är inte riktigt i de flesta företags natur helt enkelt. Däremot är det ganska vanligt att större företag har publika eller interna sektioner med bloggar skrivna av företagets ledning.
Som sagt, om vi helt enkelt bortser ifrån den delen och bara fokuserar oss på de statiska sidorna som man kan använda för statisk eller sällan uppdaterad information så erbjuder den här platformen väldigt enkel hantering. Text-widgets och andra tillbehör erbjuder enkelt stöd för att sålla bort eller visa viss information beroende på vilken sida som man är inne på, eller för att helt enkelt gömma det när man vill ha mer utrymme för sidans innehåll.

Tekniskt sett är det ocksÃ¥ väldigt lätt att underhÃ¥lla WordPress som platform med enkla uppdateringar och ur ett företags-perspektiv är den ocksÃ¥ väldigt billig. Man kan även ta hjälp av den stora samlingen med plugins som finns, till exempel Google Analytics som ger detaljerad information om besöks-statistik. Automatisk integration med Facebook, som ger “Dela”- och “Gilla”-knappar direkt per inlägg eller sida för att användare lätt ska kunna dela med sig av informationen.

Det mesta går att göra med WordPress och för mig så ska det bli väldigt roligt och intressant att utveckla denna lösning åt dem. Inte minst ska det bli roligt att se det färdiga resultatet och hur mycket som det faktiskt kan göra för ett företag med en välutvecklad web-portal.

När jag för flertalet år sedan började att göra hemsidor så gjorde jag det, precis som alla andra, i Adobe Dreamweaver. Det var ett underbart verktyg när man inte kunde någonting om kodning och man kunde efter en del mixtrande och googlande få till sin hemsida med relativt enkla medel.
Jag satt till en början endast i den grafiska-vyn och behandlade hemsidan mer som ett grafiskt dokument än som en hemsida, den enda skillnaden var väll egentligen att man bytte ut indexet till en meny.

Allt eftersom man satt och mixtrade så hittade man vissa saker som det helt enkelt var enklare att skriva direkt i koden så man började använda sig av den delade vyn där man såg både kod och den grafiska layouten. Det som var bra med det, utöver det självklara, var att man då kunde markera det grafiska elementet och således blev även det kod-segmentet markerat. Så man kunde på så sätt lätt identifiera vilket kod-segment som tillhörde vad i det grafiska.
Det här ledde mer och mer till att man började lära sig att känna igen vissa taggar och efter ett tag så blev det lättare att skriva sitt eget table (ja, det här var på den tiden då tables var det bästa alternativet) än att använda Dreamweavers meny-system för att skapa det. Efter att man skrivit den kod man ville ha så såg man direkt resultatet i den grafiska vyn.
Dreamweaver fungerade för mig som ett helt ultimat verktyg då jag använde flertalet funktioner och finesser i det för att överhuvudet taget kunna skapa hemsidor.

Dreamweaver-dödaren för mig var när jag började använda PHP i smått, idag så har de nyare versionerna stöd för att bearbeta PHP i dess grafiska vy, det hade det dock inte då. Det första som jag började använda det till var menyn och då även på ett mycket enkelt sätt.

<?php include('meny.php') ?>

Jag slapp således ändra menyn i fem olika dokument för att lägga till en sida eller liknande. Mycket basic användande men det här skapade problem i mitt förhållande till Dreamweaver då den inte alls kunde visa den här menyn så var jag tvungen att ladda upp det till servern för att se en komplett grafisk vy.
När man sedan började använda PHP mer så förlorade Dreamweavers grafiska vy helt i hållet sin vikt och jag satt till slut bara i kodnings-vyn och laddade upp filer på servern. Det blev som en kombination av Notepad och ett FTP-program, vilket jag under en lång tid även använde det som.

Dock är licensen lite väl dyr om detta är allt man använder programmet till. Sen så var det inte heller speciellt effektivt. Man fick öppna, redigera, spara och ladda upp till servern. Sitter man och testar så gör man ju bara små ändringar hela tiden vilket gjorde det väldigt bökigt. Sen ska man ju inte heller glömma bort att förslagen som Dreamweaver kom med när man började skriva en tagg. När man var osäker på kodningen så var det en oerhört värdefull tillgång.

Idag sÃ¥ är detta dock helt onödigt och jag kan förlita mig pÃ¥ gratisprogram för att göra hemsidor – utöver Adobe Photoshop. Idag kör jag Notepad++ med ett FTP-plugin som gör sÃ¥ att jag kan spara dokument till servern. Sen ett gratis FTP program för att ladda upp andra filer med. Ett koncept som är bÃ¥de enkelt, gratis och effektivt.

Dreamweaver är ett bra verktyg att jobba med, när man är osäker på kodning och jag kan tänka mig att många grafiska designers använder sig av det här verktyget av just den anldeningen. Men när man sitter inbiten i koden är det ganska onödigt.

Det är inte allt för vanligt att man ser mig utomhus, speciellt att man ser mig utomhus utan varken dator eller en mobil med mottagning. Så var dock läget nu i helgen när jag begav mig ut till Blidö för att fira midsommar.
Det var en mycket trevlig tillställning men jag tror jag fick någon form av abstinens-dröm natten till Lördagen. Jag drömde att min server dog och likaså dess backup. Datorn hemma brann upp och inget material gick att rädda. Både kod ingen och photoshop-dokumentet (som jag arbetat med i ca 5 månader) var således borta och i min desperation fick jag sätta mig och skriva om allt. Det kändes ganska skönt att vakna efter det och inse att inget av det faktiskt inträffat.

När jag kom hem nu i Söndags så var även bredbandet dött, efter mitt första samtal till BBB så var det tydligen ett uppgraderings arbete som gjordes för att kunna erbjuda upp till 1gbit i mitt hus. De sa att det skulle fungera till kvällen eller morgonen därpå. När det inte kommit igång igår vid lunch så ringde jag igen och fick då höra att det tydligen varit ett åsknedslag (eller liknande) som slagit ut viss utrustning och att det skulle ta ett par dagar och fixa.

Så just nu så ligger jag lågt med mina projekt, känns inte nödvändigt att installera Apache för att kunna utveckla lokalt. Jag ser det som en liten semester och drar igång PS3:an istället.

Avrundade hörn är en snygg lösning när man designar hemsidor, det används nästan hela tiden. Det finns dock problem och det är att det finns så många olika sätt att lösa det på.
För de nyare webbläsarna så kan man bara använda CSS3 på det element som man vill ha det på:

CSS:
.rund {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
}

För de absolut nyaste så behöver man bara ange border-radius, vilket även fungerar i IE9. Men här har vi lämnat ut en hel hög med webbläsare och det finns en stor del användare som faktiskt sitter på IE8 eller tidigare. Då jag helst undviker att använda bilder för att lösa liknande problem så har jag utformat en enkel lösning.

HTML:
<div id="detduvillharundat">
 <ul class="rund-ul">     
  <li class='1'></li>     
  <li class='2'></li>     
  <li class='3'></li>     
  <li class='4'></li>     
  <li><div class='content'>        
   Det som du vill ha i din rundade box lägger du här     
  </div></li>
  <li class='4'></li>
  <li class='3'></li>
  <li class='2'></li>
  <li class='1'></li>
 </ul>
</div></div>

Det här blir ju relativt jobbigt att lägga in i varje div om det är flera som du vill att ska ha den här effekten, det löser vi lätt med PHP. Det finns flera sätt att lösa det på men, jag tycker att det nedstående är lättast.

PHP:
<?php
$rund-top = "<ul class='rund-ul'><li class='1'></li><li class='2'></li><li class='3'></li><li class='4'></li><li><div class='content'>";
$rund-bottom = "</div></li><li class='4'></li><li class='3'></li><li class='2'></li><li class='1'></li></ul>";
?>

Det där sparar den html-kod som vi skrivit i $rund-top och $rund-bottom, då kortar vi effektivt ner html sen för att infoga dessa:

HTML:
<div id="rundat-element">
 <?php echo $rund-top; ?>        
   Det som du vill ha i din rundade box lägger du här     
 <?php echo $rund-bottom; ?>
</div>

Då är vi klara med vad vi behöver skriva i html format, nu till CSS:

CSS:
#detduvillharundat {
 border:none;
 width:100px;
}
.rund-ul li .1, .rund-ul li .2, .rund-ul li .3, .rund-ul li .4 {
 border:none;
 height:1px;
 background:#000; /* Det här väljer du självklart själv */
}
.rund-ul li .1 {
 margin:0 5px 0 5px;
}
.rund-ul li .2 {
 margin:0 3px 0 3px;
}
.rund-ul li .3 {
 margin:0 1px 0 1px;
}
.rund-ul li .4 {
 margin:0 1px 0 1px;
}
.rund-ul div .content {
 background:#000;
 height:50px;
 color:#FFF;
}

Då är det klart. Hoppas det hjälper dig.

Som ni säkert ser så har jag bytt tema på bloggen, det är tillfälligt för att jag håller på att städa upp i min installation av WordPress. Anledningen till det i sin tur är att jag håller på att skriva ett eget tema till wordpress med samma grafiska layout som portfolio-sidan.

WordPress är faktiskt inte alls så avancerat som jag trott från början, men det erbjuder några utmaningar tankemässigt när man lägger upp CSS jämfört med en helt egenskriven sida.
Till exempel, om vi säger att jag har en omslutande div, vilken jag i sin tur har flera andra div-element i. Då skulle jag skriva det såhär:

HTML:
<div id="omslutandediv">
   <div class="litendiv"></div>
   <div class="litendiv"></div>
</div>

CSS:
#omslutandediv {
   width:30px;
   height:50px;
}
.litendiv {
   display:inline-block;
   border:1px solid #000;
}

Men, då man jobbar i WordPress är det flera tillfällen då man inte kan sätta en class på den mindre diven eftersom den skapas då jag kallar på en specifik funktion från wordpress. Lösningen på det är att jag istället får skriva såhär:

HTML:
<div id="omslutandediv">
   <div>Inneh&auml;ll</div>
   <div>Inneh&auml;ll</div>
</div>


CSS:
#omslutandediv {
   width:30px;
   height:50px;
}
#omslutandediv div {
   display:inline-block;
   border:1px solid #000;
}

Där jag vanligtvis brukar säga “sätt dessa style-element pÃ¥ den/de här classerna” sÃ¥ fÃ¥r jag istället säga “sätt dessa style-element pÃ¥ de div-element som ligger i det här omslutande div-elementet”. Det blir ett lite annorlunda sätt att tänka pÃ¥ helt enkelt.

Nu är nästan allt arbete med hemsidan klart, i alla fall själva presentationen och dess utseende och formatering. Det enda som egentligen återstår nu är att fylla den med innhåll och det är väll egentligen det enda som bromsar upp mitt arbete.

Först och främst är min portfolio idag ganska tunn med mycket mindre och ointressanta projekt. Där känner jag mest att innan jag går live med sidan måste jag ha mer material att visa upp.

Sen sÃ¥ har jag kollat lite pÃ¥ andra webb-byrÃ¥er och de tjänster som de erbjuder. Det verkar som ett populärt att paketera det efter storleken med fasta priser. Vilket jag kan förstÃ¥ – det är ett enkelt koncept och det är lätt för en kund att tänka igenom i förväg hur mycket det kommer att kosta om denne väljer ett paket över eller under ett annat.
Men det känns som att ett sånt koncept skulle ta bort lite av den idé jag har. Jag vill kunna vara lyhörd mot kunden och mer skräddarsy en lösning som passar denna bäst. Inte bara erbjuda ett paket med ett visst antal sidor och funktioner.
Den bästa lösningen ligger förmodligen någonstans i mitten av båda dessa konceptlösningar, att kanske påvisa enkla kostnadsförslag och vad det skulle innebära för hemsidans storlekt för att sedan lyfta en konversation med kunden och höra vad det är exakt dom behöver. Det kanske inte är paket 1, 2 eller 3 utan snarare ett mellanting, 1½ eller 3½.

I övrigt så har jag börjat att från grunden skriva ett eget wordpress-tema, kommer bli i samma stil som den andra sidan men detta för att i alla fall ha gjort det en gång då wordpress är en väldigt populär plattform att bygga på.
Det som jag tycker är lite tråkigt med WordPress är ju dock att det är långt ifrån samma mängd kodning, vilket jag tycker är kul, än om man skulle ha gjort det själv. Dock så ger man ju kunden en bra plattform och ett användarvänligt interface för uppdatering med wordpress.

I min strävan efter perfektion har jag mer eller mindre dragit mig för att ta tag i kodningen innan jag verkligen fixat allt med designen. Med allt så menar jag verkligen allt, även det som jag inte ens hade kommit på. Jag ville helt enkelt vara rysligt säker på att jag faktiskt hade tänkt på allt från början så att jag inte skulle sitta och efterkonstruera saker, vilket ofta brukar ge varierande resultat.

Idag så lyckades jag utav någon anledning i varje fall ta mig ur den kulan och började så smått att skriva de första strängarna kod när jag kommit hem från jobbet. Det slutade med vad som nu, i skrivande stund, blev en 5 timmars sittning utan vare sig middag eller toalettpaus, helt inne i koden och nu kan jag stolt konstatera att jag har kommit en bra bit på vägen.

Stolt vill jag mer än gärna visa upp vad som har hänt så klicka gärna in på http://ddh.mez.nu och kolla in.

Jag har testat sidan i Chrome, Firefox 3.5+ och IE9 där det flyter på riktigt bra men, ser du något som ser konstigt ut eller liknande får du hemskt gärna lämna det i en kommentar tillsammans med vilken webbläsare du använder dens version.

Slå gärna en titt på förhandsvisningen också så ser du hur det ska se ut.

Sidan börjar mer och mer ta form och även om jag inte har något nytt att visa tänkte jag bara skriva en liten uppdatering för att berätta att den är på väg och att arbetet är i full fart.

Jag har i den här sidan bestämt mig för att använda mig väldigt mycket av jQuery animationer och CSS3 effekter istället för att använda bilder. Vad det kommer betyda i slutändan är att man kommer behöva en av de nyare webbläsarna för att se sidan i sin helhet, för tidigare versioner har jag tänkt att göra en light version av sidan med endast den viktigaste informationen.
Anledningen till att jag väljer att använda mig av jQuery istället för att förlita mig på HTML5 och CSS3 är framförallt kompatibilitets problemen som man undkommer mellan de olika webbläsarna. De effekter av CSS3 som jag har valt att använda kommer ändå resultera i att jag kommer behöva skriva tredubbel kod för vissa segment och om jag skulle göra samma sak för animationerna så skulle arbetet ta mycket längre tid.

I samband med att jag utvecklar den här sidan dokumenterar jag även de stegen jag tar vilket kommer bli de första riktiga artiklarna som jag skriver. De kommer trilla in på den här bloggen i den takt som de färdigställs, förmodligen efter att själva sidan är klar då jag kan skriva utifrån helheten och inte bara de olika delarna.

Mitt mest egocentriska och långdragna projekt någonsin börjar nu ta sin slutgiltiga form. Ni som har hängt med vet säkert vilka högt aspirerande planer jag har haft för det här projektet och det är förmodligen mycket därför som det aldrig har blivit färdigställt.

Efter att ha ransakat mig själv så har jag skalat ner extremt mycket och kommer ha det mer som en personlig presentation, portfolio och lite närliggande artiklar relaterade till min portfolio. Artiklarna kommer att skrivas som instruktioner för hur man kan göra när man bygger en hemsida, från basic till lite mer avancerat. Inledningsvis så kommer artiklarna förklara stegen i att bygga den hemsida som jag ska lägga upp, från de första grova dragen i Photoshop till programeringen av animationerna.

Nog om det, här är ett första smakprov på sidan. Som vanligt tar jag tacksamt emot feedback.

Klicka för större bild.

Den kanske inte ser så mycket ut för världen, men det kommer bli bättre när jag får upp lite innehåll på den och den faktiskt är en hemsida istället för denna bild. Animationer och färg-teman kommer ge sidan mer liv.

Den här bloggen är förövrigt väldigt tom för tillfället, det är för att jag tagit bort alla tidigare artiklar för att bereda plats för bloggens nya roll som artikel-databas. När sidan är klar kommer den att publiceras på mez.nu, designmez.nu och designmez.nu vilket kommer göra att denna blogg blir undanflyttad.