Detta har hänt senaste tiden
Länge sedan jag skrev något i bloggen nu, måste ändras och jag lovar att det kommer lite matnyttiga saker senare. Har nämligen ett mindre bibliotek med uppslag som jag vill dela med mig av.
Tänkte ändå passa på att räkna upp lite vad som hänt den senaste tiden.
- Sambon skaffade iPhone 4, jag är avundsjuk och tycker helt plötsligt att min 3GS är extremt gammal.
- Jag skaffade en Cinema Display, storlek 24″, istället för att dämpa min sorger från ovanstående punkt.
- Är sjukt nedgrottad i två större projekt, detaljer kommer avslöjas senare. Spännande är det – jag lovar. Kan säga att ena är baserat på WordPress och alla fina funktioner version 3 erbjuder, det andra är lite mer innovativt med egen skräddarsydd lösning.
- Körde en liten grej för Företagarna via DARRA-projektet.
- Filar på nya upplägg på både den här sidan, Cynatic.se och Journalgrodor (ökad interaktivitet).
Det som kommer härnäst är att WordCamp Stockholm måste få sig ett besök, väntar bara på bekräftelser att jag kan ta mig ner billigare än med SJ den 22 Oktober. Funderade också på Webbdagen i Sveg, men det beror helt på hur kollektivtrafiken löser sig.
PODcasts för webbdesigners
Min iPhone går alltid varm när jag är på språng, men oftast inte med Spotify eller annan musik – utan av PODcasts, jag älskar hobbyprogrammen som folk tar sig tid att göra.
DinTur och deras nya webbplats
DinTur, det “lokala” bussbolaget här i Sundsvall som har hand om alla stadsbussar, landsortsbussar med mera har tydligen försökt byta layout. Läs hela inlägget →
Sökes: intressanta flöden att följa om webbdesign, internet med mera
Det är dags att uppdatera sig lite, jag vill ha många tips på bra bloggar att följa som handlar om Webbdesign, Internet eller mittimellan. Vad det är för ämne är ganska kravlöst – nyckelordet heter webb. Läs hela inlägget →
Coda eller TextMate, nästan ett dött lopp
Det är snart 5 månader sedan jag bytte min kära ASUS till en MacBook Pro och därmed lämnade livet som slav under de enda vettiga kod-applikationerna på system, Notepad++ på Windows och BlueFish på Linux (ja, vi snackar webbdesign och webbutveckling, ingenting annat).
“Behöver inte kunna PHP, jag har WordPress”
Ett citat som jag fick för någon dag sedan som jag har funderat en del över. Tar verkligen WordPress kål på behovet att kunna programmera PHP? Tvärtom skulle jag vilja påstå.
Att använda the_post_thumbnail() i WordPress 2.9
WordPress släpptes för en stund sedan i version 2.9 och med släppet följde en efterlängtad funktion med för de som utvecklar teman, nämligen the_post_thumbnail(). WordPress Codex är dock ganska sena med en bra Wiki-artikel på ämnet så jag tänkte skriva ihop en liten bas-guide till hur den nya funktionen kan användas.
Vad som inte berättas utan krävdes en del sökande för min del är att funktionen först måste aktiveras från functions.php (filen ligger i samma mapp som ditt tema finns i) för att fungera. Anledningen vad jag gissar på är bakåt-kompatibilitet så att funktionen inte används där det inte stöds.
[code lang="php"]add_theme_support( 'post-thumbnails' );
Lägg in raden i functions.php. Stäng dock inte filen än, vi måste också definiera storleken på miniatyr-bilderna. Detta görs med funktionen set_post_thumbnail_size(). Funktionen tar ett par argument int width, int height, bool hardcrop.
[code lang="php"]set_post_thumbnail_size( 250, 150, true );
Använder mig personligen av raden ovan, här sätts höjd och bredd till 250x150 och hardcrop till sant. Hardcrop är dock för mig ett frågetecken än så länge då det inte verkar göra till eller från det jag har testat. Dess egentligen funktion är att beskära bilden snarare än att förändra storleken på den, vilket ger fler valmöjligheter i fråga om höjd/bredd på bilderna man laddar upp än om vi bara skulle förändra dess storlek.
När du experimenterar med storlekarna så rekommenderas det att du installerar tillägget Regenerate thumbnails så du slipper editera om alla miniatyrer i varje inlägg.
För att hämta din miniatyr så måste du först definiera den i en bloggpost, efter att du sparat functions.php och går in i editorn så märker du en ny ruta som heter Post Thumbnail, definiera din miniatyr i den.
Nu är det dags att hämta bilden i vår loop. Jag rekommenderar att du kontrollerar så att inlägget har en minityr först och främst.
[code lang="php"]if ( has_post_thumbnail() ) { the_post_thumbnail(); }
Nu är det dags att utforska the_post_thumbnail(). Funktionen tar en mindre uppsjö med argument, för det första kan du definiera din miniatyr med ett namn: thumbnail, medium, large där thumbnail är standardvärdet i funktionen.
Exempel:
the_post_thumbnail('medium'); hämtar och skriver ut mediumstorleken av bilden.
Är du inte nöjd med standardvärdet av storleken på bilden eller behöver lägga in en css-klass? Funktionen tar även arrays med olika argument.
Ett exempel är:
[code lang="php"]the_post_thumbnail( array(300, 300), array('class' => 'min-class-ett min-class-tva') );
Som du ser så gör jag om miniatyren till en storlek av 300x300 och ger den två klass-attribut, min-klass-ett och min-klass-tva. Du kan även lägga in andra värden som rel, title, alt med mera för större kontroll.
Cache och att uppdatera bilder med jQuery
Tänk dig att du har ska fixa bildeditering på sidan du utvecklar. Tänk att du vill att användaren ska kunna förändra små delar av bilden i webbläsaren och för att få det att gå så smidigt som möjligt så vill du uppdatera bilden utan att webbläsaren laddar om.
Problem: Webbläsarens cache sparar bilden och hämtar den gamla, det går tyvärr inte ens att lita på no-cache/no-store meta-taggarna.
Lösningen: Uppdatera bilden med en query-sträng.
Tänk dig att du har följande HTML:
[code lang="html"]<div>
<img src="bild.jpg" alt="" title="" id="image" />
<input type="button" value="update" id="update" />
</div>
Du vill nu att bilden ska uppdateras så fort någon trycker på knappen. För enkelhetens skull så använder vi jQuery.
[code lang="javascript"]
$('#update').click( function () {
$('#image').attr('src', 'bild.jpg');
});
Javascriptkoden ovan ska enligt reglerna byta ut bild.jpg mot bild.jpg, det vill säga uppdatera bilden från servern igen. Det är vid detta momentet cache-funktionen spökar.
Vad vi gör då är att vi lägger till en querysträng i slutet av bilden.
[code lang="javascript"]
$('#update').click( function () {
var timestamp = new Date().getTime();
$('#image').attr('src', 'bild.jpg?t='+timestamp);
});
Vi lägger alltså till en tidsstämpel som sätts till epoch/unixtid och lägger till den som en sträng efter bilden. Bilden kommer alltså hämtas som bild.jpg?t=123445345 där siffrorna alltid ändras och aldrig är unika.
Vad detta innebär i praktiken är att webbläsaren luras att tro att bilden som hämtas alltid är unik och inte är samma som redans finns lagrad - det vill säga att bilden kommer alltid att förnyas, oavsett cache.
Web Hack Night Sundsvall
Som student i Sundsvall med ganska lågt pengaflöde är det ganska enerverande att se vad som pågår nere i de större städerna (okey, bältet mellan Sthlm och Gbg verkar vara extra aktivt) med diverse WP-fika, Webb-kaffe, allmänna webb-nörd konferenser/möten.
Jag fick då en idé som jag föreslog en blivande webbnörd Jansson, varför inte någon gång i månaden eller varannan månad köra ett Webbhack. Folk som är intresserade kan träffas över någon kaffe eller fyra med laptopsen i knäet och hacka till något kul antingen till träffen eller under träffen. Möjligheterna är enorma med olika teman varje kväll eller bara att brainstorma.
Min tanke att köra kvällen mellan förslagsvis 19.00 fram till 00.00 eller så länge som möjligheten finns. Platsen bör vara någonstans med WiFi, beanbags och möjlighet till kaffeapparat.
Tänkte gå ut med detta bland studenter först och främst då mitt kontaktnät är störst där, men gillar du idén och är från Sundsvalls-området så tveka inte att hojta till. Träffen är värdelös utan folk som vill komma!
Det vore helt perfekt att kunna träffa likasinnade och umgås lite i staden som enbart inhyser statliga myndigheter, och allt tråkigt och stelt som kommer med definitionen.
Idéer, frågetecken eller vill du se detta hända? Skrik till i kommentarerna eller kontakta mig.
Två sajter jag vill utveckla nu men inte hinner
Just nu finns det två saker jag skulle vilja ta mig tid att fixa till och fixa upp. För det första är CSS:ART vilket är tänkt mer som en upplevelse, kul grej och inspirationssajt. Det som i så fall skulle ingå är en slumpgenerator, en jävla massa blockelement och CSS-regler. Som det ser ut i huvudet är det coolt, snyggt och väldigt onödigt.
Den andra delen är lite mer seriös. WP-functions.com köptes för ett antal månader sedan in på fyllan. Idén är en slags databas och registrering för funktioner inom WordPress-communityn för att hantera (och dess främsta mål undvika) kollisioner. Jag har efter dess fått svårt att bestämma vilken riktning sidan ska ta, så idéer finns – men definitionen och målet saknas.
Dygnet bör utökas till 48timmar är mitt förslag. Alternativt att forskare kommer på ett sätt att radera vårt behov av sömn. Sömlöst viloläge någon? När någon del inte används så sover den?
Använd taggar som ditt arkiv i WordPress
De flesta som bloggar eller driver en sida med några slags nyheter har ett arkiv med gamla inlägg. Ett arkiv i sin traditionella mening blir snabbt fullt och oöverskådligt då man listar alla inlägg som någonsin postats. Alla inlägg är även sorterade i kategorier som också blir fulla av inlägg, osorterat och överblicken försvinner.
Min idé är lite annorlunda
Istället för att prompt använda kategorier är min plan att använda taggar som arkiv istället. Istället för att lista alla inlägg på samma sida så visar jag ett tagg-moln vilket dynamiskt visar de ledord jag främst använder på mina inlägg. Fördelarna med detta är många:
- Du hjälper besökaren med överblicken av sidan. Vad som är störst är det som nämns och används mest.
- Du sprider och fördelar din länkjuice bättre, mer länkar = mindre kraft för varje enskild länk (typ SILO).
- En statisk kategori är oftast för generell och trubbig, taggen har en spets som är individuell för varje inlägg.
- Du undviker duplicate content om det används rätt.
- Taggarna är alltid up-to-date.
Arkiv med taggar i praktiken
Först och främst måste du ha All in One SEO installerat på din WordPress-blogg. Markera Use noindex for Categories för att se till att Google m.f inte indexerar dina kategorier längre. Notera att du fortfarande kan ha kvar dina kategorier, se bara till att de “försvinner” från Googles ögon då de kan utgöra en risk för att innehåll kan förekomma flera gånger.
Öppna temafilen archive.php med din favoriteditor, hitta the_loop och ändra the_content() till the_excerpt(). Vad vi gör att istället för att skriva ut hela inlägget i arkivet så skrivs ett utdrag från inlägget ut. Fortfarande så handlar det om risken för dubbla innehåll på sidan.
Öppna file archives.php (Märk skillnaden från ovan). i den här filen kan du ta bort det du känner för, det viktigaste är att infoga till tagg-moln någonstans. Funktionen som kommer användas är wordpress egna, wp_tag_cloud(), vilken är tillräckligt kompetent för det vi ska åstadkomma.
[php]
$args = array(
‘smallest’ => 8,
‘largest’ => 36,
‘unit’ => ‘pt’,
‘number’ => 75,
‘format’ => ‘flat’,
‘separator’ => ‘\n’,
‘orderby’ => ‘name’,
‘order’ => ‘ASC’,
‘link’ => ‘view’,
‘taxonomy’ => ‘post_tag’,
‘echo’ => true
);
wp_tag_cloud( $args);
[/php]
Vad de olika parametrarna gör förklaras mer i länken ovan.
För att fixa till problemet med att alla taggar får samma meta beskrivning så editerar vi header.php, Hittar <meta name=”description” … /> och byter ut mot:
[php] <meta name="description" content="<?php if (is_tag()) { single_tag_title(‘Arkiv: ‘); echo " | "; bloginfo(‘description’); } else { bloginfo(‘description’); } ?>" />[/php]
Detta bör fixa så att Google Webmasters Tool inte klagar för mycket.
Nu bör du ha ett bättre fungerande arkiv. Givetvis bör du komplettera med din populäraste poster, poster som kanske behöver lite extra exponering och en sökfunktion.
Resultatet kan ses live på min Arkivsida eller via skärmdump nedan.
Fortsättning på detta? Kanske ta bort kategorierna helt och enbart använda dem internt och fortsätta optimera så det som är relevant, enkelt och bäst ur de flesta synpunkter (användarsynpunkt/SEO/hantering) kommer fram.
Tips, idéer eller invändningar?
Varning vid konvertering mellan UTF-8 och ANSI
Satt idag och löste ett problem med bloggen i filen header.php. Lösningen som jag tänkte mig innefattade användningen av våra svenska tecken (åäö) och eftersom standardkodningen på filerna i Windows brukar vara ANSI och teckenkodningen i WordPress-sidan brukar vara UTF-8 så tänkte jag att jag kör en konvertering i Notepad++ från ANSI till UTF-8 (ANSI versionen av åäö visas som frågetecken i UTF-8).
Tyvärr skapade detta lite huvudbry, helt plötsligt vid visandet av en ensam artikel så fanns ett glapp längst upp på sidan. Den första tanken är att göra det man ändrat ogjort, så lösningen kommenterades bort. Glappet fanns kvar.
Började senare jämföra källkoden mellan två sidor. Ingenting hittades. Kollade igenom alla plugins jag aktiverat de senaste 4 veckorna, ingenting.
Helt plötsligt slog en snilleblixt ner – dolda tecken. Vid konverteringen till UTF-8 så måste ett tecken i källkoden blivit felaktigt. Tecknet renderas korrekt, det avläses korrekt – men det skapar en felaktighet i koden. Osynliga problem kan man inte lösa direkt så lösningen skrevs om, konverterades tillbaka till ANSI och började fungera igen.
Så håll koll på alla specialtecken vid konvertering. Även om det ser rätt ut så kanske det inte blir rätt.
Vägen mot att bemästra C# och ASP.NET
Håller just nu, via mitt examensarbete, på att ta steg mot att bemästra C# och ASP.NET. Steget var, och är, inte så stort eller svårt som jag tidigare befarat. Java och PHP har jag pillat med en del under mina dagar så grunderna finns men två saker hjälpte mig otroligt mycket mer för att förstå hur språket fungerar och är uppbyggt.
Först hittade jag Microsoft Communityn asp.net och deras videos. Det finns otroligt mycket man kan kolla på och tempot är tillräckligt högt för att inte bli tråkigt, men tillräckligt långsamt för att förstå och hänga med vad som händer och kunna testa själv. Att gå igenom de första filmerna för nybörjare är, om man kan lite sen innan, ganska tråkigt men det är väldigt värt det.
Det andra är att jag håller på att gå igenom den otroligt tjocka boken Proffessional ASP.NET in C# and VB. Boken är på 1600 sidor men förhoppningsvis ska det läras så ska det läras.
Återkommer med fler upptäckter längre fram i mitt utforskande.
Den perfekta balansen inom webbdesign
Du har en webbplats, du har ett mål med webbplatsen med att den ska vara perfekt inom alla områden. Snart inses det dock bland ditt team av webbdesigners, webbutvecklare, seo-magiker och experter inom affiliate och annonsintäkter att det inte går att göra ett område perfekt utan att försaka ett annat.
Stock: sxc.hu
Din webbdesigner har oftast expertis på layout, funktionell och användbar webb. Han säger att allt ska anpassa och fixas så att största möjliga målgruppen ska nås. En meny måste se ut på detta viset och ha visst antal submenyer för att underlätta navigering och framkomlighet. Tekniken måste absolut vara bakåtkompatibel med alla versioner av de flesta webbläsarna.
Din SEO-expert kommer in och säger att så här kan det inte se ut, eftersom Google och bing rankar webbplatser bättre på sätt Y istället för detta sättet – hur bra det ändå må vara mot kunderna – så måste vi ju synas. Rankar vi inte si och så mycket på dessa ord så kommer allt arbete vara bortkastat.
Webbutvecklaren kommer in och säger mer han inte bryr sig så mycket om det här som syns, han vill göra häftigare funktioner och cool dynamik mellan tjänsterna. “Tänk om” samt “Vad häftig om” är vanliga meningar, han kräver att allt som går att göra görs.
Experten på affiliate kommer sedan in och kräver annonsplacering. Han är oftare mer inne på SEO-magikerns spår eftersom “mer trafik, häftiga intäkter och kurvor”. Nej, sidan ska besudlas med så mycket annonser och affiliate-länkar som möjligt. Helst ska många ord länkas så folk klickar bort från sidan så mycket som möjligt.
Texten ovan är smått (ganska) överdriven, men poängen är detsamma. Vad är den perfekta balansen mellan funktion, design, annons, seo och användbarhet?
Relaterade poster i WordPress utan att förstöra kommentarerna
Ett par timmar har gått åt till att få igång en egen relaterade poster funktion till WordPress. Själva scriptet är inte ett dugg konstigt utan kan hittas lite överallt även om jag ville sätta en egen twist på det hela.
Målet var att skapa en funktion som visar bilder samt titeln på inlägget istället för en vanlig tråkig lista. Koden jag använde (utan CSS) blev till slut följande.
[code language="php"]
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'showposts'=>3, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div class="related-posts"><h3>Möjligen relaterat innehåll</h3><ul>';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php echo get_bloginfo('template_url'); ?>/thumb.php?src=<?php echo catch_that_image('default2') ?>&w=150&h=100&zc=0&q=100" alt="<?php the_title(); ?>"/>
<span><?php the_title(); ?></span></a>
</li>
<?php
}
echo '</ul></div>';
}
}
Jag använder helt enkelt den klassiska funktionen catch_that_image(), med en lite twist för att få olika storlekar på defaultbilden, och thumb.php för att visa bilden och sen är resten som vanligt.
Problemet som visade sig var att även att wp_query() kallades med new, vilket i min bok kallas för en ny instans av objektet, så sattes alla kommentarsvariabler till den senaste relaterade posten med kommentarer. Detta är en sidoeffekt som direkt inte är önskvärd.
Lösningen är väldigt enkel: spara variabler och återanvänd dem. Innan jag börjar min nya loop så sparar jag ner ett par variabler från den gamla loopen.
[code language="php"]
$old_comment = $comments; $old_id = $id; $old_post = $post; $old_withcomments = $withcomments;
Och efter loopen återställer jag helt enkelt värdena som de var innan.
[code language="php"]
$comments = $old_comment; $id = $old_id; $post = $old_post; $old_widthcomments = $withcomments;
Nu får vi fram exakt den effekten som önskades från början, allt som krävs är lite CSS-magi. Resultatet kan du se under detta inlägget.
Smidigaste sättet eller är jag fel ute?