Runde hjørner med jQuery

jQuery logoPænt afrund­ede hjørner i web­de­sign laves på klas­siske vis med grafik­s­tumper i top og bund af de bokse, der ønskes afrund­ede. Denne metode har imi­dler­tid ofte den ulempe, at den kræver ekstra opmærkn­ing, der ikke nød­vendigvis giver mening, skaber rod i koden samt kræver indlæs­ning af ekstra grafik, som er med til at sløve indlæs­ningsti­den af websitet.

Slip for unødig grafik og HTML
Med javascript kan man imi­dler­tid undgå både ekstra opmærkn­ing og grafik. Dave Methvin har lavet et plu­gin til javascript-biblioteket jQuery, som kan netop dette. jQuery er et glim­rende letvægts-javascript frame­work, der gør det nemt for designere med begrænset kodeer­far­ing at lave rel­a­tivt avanceret funk­tion­alitet i et website.

Fra grafik-pest til javascript-kolera?
Skal man så rode sin kode til med javascript i stedet for grafik og opmærkn­ing, bare for at få runde hjørner? Som sagt kan jQuery bruges til rigtig mange ting. Har man i forve­jen brug for noget af jQuery’s funk­tion­alitet, er det oplagt at anvende til også at lave visse grafiske effek­ter og vil klart være at fore­trække frem­for den ekstra opmærkn­ing og grafik. Jeg vil helt sikkert gøre brug af dette plu­gin i frem­tidige projekter.

Der er en demo af Round Cor­ner plugin’et samt link til down­load af scriptet her.

Ultrakorte uddrag i WordPress

I Word­Press kan man skrive et kort uddrag til de enkelte blogindlæg. Det er ofte anven­deligt på sites, der ikke nød­vendigvis har karak­ter af en typisk weblog, f.eks. jour­nal­is­tiske mag­a­siner, por­taler eller virksomhedssites.

Uddraget har som udgangspunkt en stør­relse på 55 ord og det kan man ikke umid­del­bart ændre på. Men 55 ord kan godt være 40 ord for meget, hvis uddraget ønskes vist på en bestemt måde. Jeg har gravet lidt i uddraget og fun­det frem til en måde at begrænse det på.

The_excerpt() laver for lange uddrag
For at imple­mentere uddraget i tem­platen bruges tag’et the_excerpt() (se doku­men­ta­tion her). Dette tag er imi­dler­tid ikke en streng, men en funk­tion og der­for kan man ikke umid­del­bart splitte det ad med PHP. Jeg fandt dog ud af, at grund­laget for funk­tio­nen the_excerpt() er stren­gen get_the_excerpt() og denne streng kan godt splittes ad.

Vi har altså brug for en funk­tion, der kan splitte ind­holdet i stren­gen op i enkel­tord, tælle antallet af enkel­tord og dernæst sætte det ønskede antal ord sam­men igen. Jeg nåede frem til føl­gende opskrift:

Opskriften på korte uddrag
Put neden­stående funk­tion ind i filen functions.php i dit theme:

<?php
function string_limit_words($string, $word_limit)
{
  $words = explode(' ', $string, ($word_limit + 1));
  if(count($words) > $word_limit)
  array_pop($words);
  return implode(' ', $words);
}
?>

Placér dernæst føl­gende kodes­tump i din tem­plate, der hvor du ønsker at få spyt­tet uddraget ud:

<?php
  $excerpt = get_the_excerpt();
  echo string_limit_words($excerpt,25);
?>

… hvor 25 er antallet af ønskede ord i uddraget. Du kan nu styre, hvor mange ord der skal vises i dit uddrag.

Løs­nin­gen er tillige pub­liceret i Word­Press’ sup­port­fo­rum.

Et par gode CMS plugins til WordPress

Jeg er i øjeb­likket i færd med at udvikle et nyt web­site på min arbe­jd­splads, Hors­ens kom­munes bib­lioteker. Sitet kom­mer til at køre i Word­Press MU, og jo mere man graver i det sys­tem, des mere bliver det klart, at man kan få et ganske vel­fun­gerende CMS ud af det.

Jeg har dog savnet et par funk­tioner, men det findes der heldigvis plu­g­ins til.

Fjern uak­tuelle indlæg
Et indlæg kan sættes til blive udgivet i fremti­den, emn jeg har også behov for, at det automa­tisk kan udløbe, dvs. blive slet­tet når det er uaktuelt.

Til det for­mål er plugin’et Post Expi­ra­tor glim­rende. Post Expi­ra­tor kan automa­tisk enten slette indlæg eller ændre deres sta­tus fra ‘udgivet’ til ‘kladde’, således at de er skjult, på den dato hvor indlægget bliver uaktuelt.

Hent Post Expi­ra­tor her

Omdirigér sider og indlæg
Det er ikke alle punk­ter i menuen, der nød­vendigvis skal linke til en side. F.eks. kan man have behov for at linke til et indlæg eller en emnekat­e­gori. Omvendt kan der være brug for at linke direkte fra en indlægsover­skrift til en side.

Page Links To er et plu­gin, der gør netop dette muligt. I admin­is­tra­tio­nen af det enkelte indlæg eller den enkelte side giver plugin’et mulighed for at ind­taste den URL, man ønsker, der i stedet skal linkes til.

Hent Page Links To her

Skjul bestemte sider fra menuen
Det kan nogle gang være nød­vendigt at skjule bestemte sider fra en menu. Skal man f.eks. bruge en bekræf­telses­side til for­mu­la­rer bør den ikke nød­vendigvis fremgå af menuen.

Det kan man gøre med plugin’et Exclude Pages. Plugin’et skjuler ganske enkelte nærmere bestemte sider fra sidenavigationen.

Hent Exclude Pages her

Få søgeboksen til at foreslå resultater on the fly

Kender du Google Sug­gest? Google’s forsøgsvise funk­tion­alitet, der vha. AJAX kan forslå søgere­sul­tater imens brugeren skriver i søge­fel­tet. Nu kan du nemt selv lave en lig­nende funk­tion på dit eget web­site, helt uden pro­gram­mer­ing. Sik­box har nem­lig lavet koden for dig.

Sik­box leveres som stan­dard med 6 forskel­lige “skins”, men kan styles efter for­godt­befind­ende med CSS. Sik­box er baseret på jQuery og får sine resul­tater fra Yahoo’s søgemaskine.

Lav live søgere­sul­tater med Sik­box her.

Forslag til søgeresultater med Sikbox

Fun­det via CrazyLeaf Design Blog.

BlendFu — Photoshop og GIMP brushes og patterns

Er lige faldet over BlendFu, en stor sam­ling brushes og pat­terns til Pho­to­shop og the GIMP. Her er masser af brushes og pat­terns i både høj kvalitet og høj opløs­ning. Alle brushes kan gen­nem­ses med en glim­rende preview-funktion, der kan udvides og klappes sam­men, mens man bladrer igen­nem samlingen.

Sitet er i sig selv ikke lige­frem øjeguf, men BlendFu er en fin ressource, hvis man står og man­gler gode grafiske ele­menter til det næste design. Find gode brushes og pat­ternes til Pho­to­shop på BlendFu.

Fun­det via My Ink Blog.

Jason Santa Maria

Jason Santa Maria er grafisk designer og Cre­ative Direc­tor i webdesign-bureauet Happy Cog Stu­dios. RSS feed’et fra Jason’s blog har en særlig plads i min feed reader. Det er nem­lig abso­lut nød­vendigt at besøge bloggen, hver gang der kom­mer nye indlæg, for det er ikke kun selve ind­holdet, der er interessant.

Jason gen­nemde­signer mange af sine indlæg helt fra bun­den, lige fra lay­out over illus­tra­tioner til typografi. Og det passer altid sam­men med bloggens overordnede udtryk. Sitet er altid et beøg værd. Se Jason Santa Maria’s blog her.

Herun­der dumps fra et par af Jason’s indlæg:

Haunted - af Jason Santa Maria

Haunted — af Jason Santa Maria

Cheesesteak Crawl - af Jason Santa Maria

Cheeses­teak Crawl — af Jason Santa Maria

WebAppers — Open Source ressourcer for webudviklere

Jeg faldt lige over WebAppers.com, mens jeg snusede gen­nem web­de­sign indlæggene i min feed reader. WebAp­pers er endnu en blog i rækken af blogs, der han­dler om web­de­sign og –udvikling, men denne gør det til sin fornem­ste opgave at støve de bed­ste open source ressourcer op, der kan gøre livet let­tere for webudviklere.

Her sam­les der op på alskens lækkerier, lige fra script– og pro­gram­s­tumper over fonts til vek­tor­grafik og ikoner.

Bloggens ejer, Ray Che­ung, skriver:

I have seen lots of ‘999+ Ajax Resources’ and ‘888+ Web Devel­oper Resources’. In my opin­ion, we do not need a list of resources, spend­ing so much time on pick­ing the use­ful ones. What we need is a list of the top qual­ity resources, so that we can spend more time on our web devel­op­ment. WebAp­pers does just that.

Snekrystaller med Illustrator og Photoshop

Jeg har før forsøgt at lave iskrys­taller i Illus­tra­tor uden stort held. Nu er jeg faldet over en glim­rende opskrift, der oven i købet fin­pudser sagen i Photoshop.

Se tuto­r­ial på MyInkBlog.

Lækre, gratis ikonsæt fra IconEden

IconE­den laver sprøde ikoner til app­lika­tioner, web­sites og andre brugergrænseflader.

Foru­den deres premium-icons tilby­der de også 3 gratis ikon­sæt, der må bruges både pri­vat og på kom­mer­cielle sites.

FRESH Add-on

Milky — Et gratis vek­tor ikon­sæt

Bright! — Et gratis vek­tor ikon­sæt