Archive for the ‘Web’ Category
Ny Twitter-widget i WordPress
Nå kan du vise en interaktiv Twitter-feed i WordPress-bloggen, enten i et innlegg eller i sidekanten eller et annet widget-område, og leserne kan svare på eller retweete innleggene dine slik de gjør på Twitter. (Se nederst i sidefeltet til høyre i denne bloggen.) Den nye widgeten heter “Twitter Timeline”, og den gamle Twitter-widgeten vil snart være historie.
Først må du opprette Twitter-widgeten for å få en widget-ID. Samtidig kan du tilpasse widgeten og velge ny farge og størrelse.
Widget-ID-en er det lange tallet i URL-adressen:
Legg deretter til widgeten (WP-admin > Utseende > Widgeter). Du får da frem widget-innstillingene:
Fyll ut feltene, inkludert ID-en ovenfor.
Du kan også bygge inn Twitter-feeden i et innlegg eller på en side i bloggen. Bruk denne kortkoden:
Bytt ut “1234” med widget-ID-en, og “brukernavn” med Twitter-navnet ditt, uten @.
Resultat:
Tweets by @zolh
#kreativweb nr. 4 er ute. Tema: Fonter
Utvalget av webfonter blir stadig større. Google Fonts inneholder per i dag over 600 gratis fonter. En annen god skriftleverandør er FontSquirrel. Eller hva med Letterhead Fonts, hvis du liker stilen fra 1930-, 40-, 50- eller 60-tallet? Retroskrifter er fortsatt populært.
Hva skal man så velge? I dette nummeret av #kreativweb får du noen vanlige skriftkombinasjoner. Du får også alternativer til Comic Sans – noe å tenke på før din neste presentasjon, kanskje?
Dette er noe av det du kan lese om i #kreativweb nr. 4:
- Webfonter
- 5 tips for god lesbarhet på skjerm
- Serif og Sans serif – 10 kombinasjoner
- 7 “sikre” fonter for presentasjoner
- 10 alternativer til Comic Sans
- Lag en font av håndskriften din
- Kontrast
- Helvetica – alternativer
- Gammeldagse skrivemaskinskrifter
Se alle utgaver av #kreativweb
Les #kreativweb nr. 4 her:
#kreativweb nr. 2 er ute. Tema: Skrive for web
#kreativweb nr. 2/2014 handler om å skrive for nettet. Stikkord: grunnleggende nettskriving, inkludert tekstoppbygging, overskrifter, lesernes interessenivå, universell utforming, søkemotoroptimalisering, infografikk.
Noen konklusjoner:
- Det er en sammenheng mellom høy rangering i søkemotorer og godt innhold.
- Skriv for leserne, tilpass for søkemotorene.
- “Keyword stuffing”, overdreven gjentakelse av nøkkelord i teksten, er ute.
Legg til en flaggteller i bloggen
Sprit opp bloggen din med en flaggteller, i stedet for bare å vise antall sideklikk med tørre tall. Denne er fra Flagcounter.com.
Du limer inn koden for flaggtelleren i en Tekst-widget i sidekolonnen eller toppfeltet eller hvor som helst bloggmalen tillater det.
Slik legger du til en flaggteller i sidekolonnen i en WordPress-blogg:
1. Gå til Flagcounter.com.
2. Velg alternativer for telleren: maksimumsantallet flagg som skal vises i telleren, hvor mange kolonner med flagg som skal vises, og tekstetikett (standardteksten er “Visitors”, som vist på bildet ovenfor). Merk av for Show Country Codes og Show Pageview Count hvis du vil vise en landskode på to bokstaver ved siden av hvert flagg, og antall sideklikk under flaggene. Du kan også velge andre farger.
3. Klikk på Get Your Flag Counter, og velg om du vil registrere telleren. Ved å registrere den får du en konto som du selv kan administrere. Klikk på Continue (Skip hvis du velger ikke å registrere telleren).
4. Kopier koden under Code for websites. Den ser omtrent slik ut:
<a href=”http://s06.flagcounter.com/more/wkoE”><img src=”http://s06.flagcounter.com/count/wkoE/bg=FFFFFF/txt=000000/
border=CCCCCC/columns=2/maxflags=12/viewers=0/labels=1/pageviews=1/”
alt=”free counters” border=”0″></a>
5. Lim inn koden i en Tekst-widget i WordPress på vanlig måte. Her er fremgangsmåten, i tilfelle du har glemt den:
– Gå til bloggens dashboard/kontrollpanel, og velg Widgets/Widgeter under Appearance/Utseende.
– Under Available Widgets/Tilgjengelige widgeter drar du Tekst-widgeten til ønsket sted under Sidebar/Sidekolonne til høyre.
– Klikk på Save/Lagre.
– Telleren vises nå i bloggen.
Du kan redigere koden senere hvis du vil endre utseendet på telleren:
<a href=”http://s06.flagcounter.com/more/wkoE”><img src=”http://s06.flagcounter.com/count/wkoE/bg=FFFFFF/txt=000000/
border=CCCCCC/columns=2/maxflags=12/viewers=0/labels=1/pageviews=1/”
alt=”free counters” border=”0″></a>
bg: FFFFFF, 000000 og CCCCCC er henholdsvis bakgrunns-, tekst- og kantfargen. Spesifiser dine egne farger hvis du vil.
columns: Antallet kolonner i telleren. Velg et tall mellom 1 og 9.
maxflags: Maksimumsantallet flagg som skal vises. Velg et tall mellom 1 og 248.
viewers: Tekstetiketten som vises over flaggene. Standardverdien 0 viser Visitors, som på bildet over, mens 3 fjerner etiketten helt. Skriv eventuelt inn en annen tekst. Hvis du for eksempel vil at tittelen skal være Visitor Flags!, skriver du inn følgende: Visitor+Flags! – plusstegnet konverteres til et mellomrom.
labels: 2-bokstavers landskode ved siden av hvert flagg. 0 = av, 1 = på.
pageviews: Antallet sideklikk under flaggene. 0 = av, 1 = på.
Les mer på Flagcounter.com.
Gammeldagse skrivemaskinskrifter
Jeg har funnet en Typewriter-skrift som inneholder æ, ø og å.
Den heter Typewriter New Roman og ser slik ut:
Det finnes mange gammeldagse skrifter, men ikke alle greier de norske spesialtegnene. Her er noen eksempler:
Kilde: FontSquirrel
Lag menyknapper med CSS
Hvis du ikke vil bruke kompliserte JavaScript-baserte menyer eller grafiske menyknapper, men likevel ønsker en ryddig meny, kan du enkelt lage “menyknapper” ved hjelp av CSS:
Klikk her for å se hvordan menysystemet ser ut på en webside.
Du er velkommen til å kopiere kildekoden og tilpasse den slik du selv vil.
Min favorittside for mer avanserte menysystemer og andre typer skript er Dynamic Drive. Det var der jeg fant “slide-in”-menyen som jeg bruker øverst til venstre på www.transonline.no.
De fire grunnleggende designprinsippene
Tenk: C-R-A-P. Det står for Contrast, Repetition, Alignment og Proximity. Disse prinsippene brukes på alle veldesignede sider, det være seg på papir eller web.
Contrast/kontrast: Unngå elementer som er nesten like. Hvis noen av elementene på siden (skriften, fargen, størrelsen, linjetykkelsen e.l.) ikke er helt like, så gjør dem helt forskjellige. Eksempler på kontraster: kjempestor og liten skrift, lett Garamond (serif) og fet Helvetica (sans serif), tynn og tykk linje. Ikke vær pysete. En 12-punkts og en 14-punkts skrift danner ingen kontrast. Det gjør ikke mørkebrunt og svart heller. Vil du at et bilde skal gå utenfor høyre- eller venstremargen, la det gå så langt utenfor at det ikke ser ut som om du bare har bommet litt på plasseringen.
Repetition/repetisjon: Repeter visuelle designelementer. Du kan for eksempel gjenta en farge, en bestemt form eller figur, en fet skrift, en tykk linje og så videre for å organisere siden og gjøre den mer enhetlig.
Alignment/justering: Ingenting bør plasseres vilkårlig på en side. Hvert element bør ha en visuell forbindelse med noe annet på siden. Dette gir et rent utseende, med en usynlig linje mellom elementene.
Proximity/nærhet: Elementer som hører sammen, bør plasseres nær hverandre. Da danner de én visuell enhet i stedet for flere løsrevne biter. Siden får en klarere struktur og blir lettere å lese. Opplysninger som navn, adresse, telefonnummer og e-postadresse hører naturlig sammen i én gruppe.
Spesielt for websider: Repetisjon er det viktigste prinsippet for websider fordi det gjør det mulig for de besøkende å se at de fremdeles er på samme nettsted. Navigasjonssystemet bør være likt og plassert på samme sted på alle sidene, og den grafiske stilen bør også være lik på alle sidene. Stikkord: gjenkjennelighet. La de samme knappene, fargene, skriftene o.l. gå igjen.
Contrast, Repetition, Alignment, Proximity: C-R-A-P. Det var teorien. Så er det bare å bryte reglene. Det er lettere når man kjenner dem.
Kilde: The Non-Designer’s Design Book av Robin Williams. Anbefales for alle ikke-designere som har behov for å utforme websider, brosjyrer og annet. Williams har også skrevet Design Workshop, The Non-Designer’s Web Book, Web Design Workshop og The Non-Designer’s Type Book.
TransOnline-bloggen: Språk, skriving og e-publisering 