Blog|mez.nu

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.