Zoeken

AddThis

share

Tools

Speciale tekens

Twee handige text-tooltjes

  • http://www.copypastecharacter.com/
    Klik op een teken en zet het meteen in je tekst. Het gekozen karakter wordt geel en met een klik wordt het op je klembord gezet. In je website code kun je nu Plakken.
  • http://www.unicodetools.com/unicode/convert-to-html.php
    Met deze tool kun je speciale tekens (zoals á è ï ü ñ ) omzetten naar HTML code.
    Om bijvoorbeeld tot een ½ te komen, converteer je naar HTML: ½
    De speciale HTML-codes worden gelezen door de meeste gebruikers, ongeacht welke karakterset wordt gebruikt.
    Nooit meer gekke tekentjes in je teksten!

Aparte lettertypes op je website

Op je website kunt je niet altijd het lettertype toepassen dat je gebruikt voor drukwerk. Je kunt alleen lettertypes  gebruiken die op de computer van je bezoekers geïnstalleerd zijn. Je kunt voor je website wel andere lettertypes gebruiken, maar dan zien bezoekers die dat lettertype niet op hun computer hebben geïnstalleerd de website niet zoals je die hebt bedoeld.

Web-safe fonts

De onderstaande ‘standaard’ fonts kunt je altijd gebruiken, want die zijn op elk platform (Windows, Mac en Linux) beschikbaar. Ze worden ook wel ‘web safe’ fonts genoemd.

  • Arial, Helvetica, sans-serif

  • Arial Black, Gadget, sans-serif

  • Comic Sans MS, Textile, sans-serif

  • Courier New, Courier, monospace

  • Georgia, Times, Times New Roman, serif

  • Impact, Charcoal, sans-serif

  • Lucida Console, Monaco, monospace

  • Lucida Sans Unicode, Lucida Grande, sans-serif

  • MS Sans Serif, Geneva, sans-serif

  • MS Serif, New York, serif

  • Palatino Linotype, Book Antiqua, Palatino, serif

  • Tahoma, Geneva, sans-serif

  • Times New Roman, Times, serif

  • Trebuchet MS, Helvetica, sans-serif

  • Verdana, Geneva, sans-serif

Koppen in het lettertype van je huisstijl

Plaatjes

De beperking in het gebruik van lettertypes geldt alleen voor de hoofdtekst in je website, de tekst die je kunt selecteren met de muis. Voor logo’s, plaatjes en koppen kunt je elk willekeurig lettertype gebruiken, zolang je er maar een plaatje van maakt. Nadeel van het gebruik van plaatjes is dat ze niet leesbaar zijn voor zoekmachines. Beperk daarom het gebruik van plaatjes voor de koppen en de menu’s zo veel mogelijk.

Flash Replacement

sIFR (Scalable Inman Flash Replacement) is een techniek waarbij de teksten van een website door middel van Flash worden omgezet naar het gewenste lettertype, ongeacht of het op de computer van de bezoeker aanwezig is. De kopjes worden bij het gebruik van sIFR opgebouwd uit tekst, maar na het laden van de pagina worden ze met JavaScript vervangen door een Flash-object, waarin wel andere fonts gebruikt kunnen worden dan de ‘web safe’-lettertypes. Een nadeel is dat het standaard font na het laden vervangen wordt door het Flash-object, waardoor de tekst soms flikkert.

Google font directory

Via de Google font directory kunt je een aantal fonts inladen op je website. De lijst met beschikbare fonts is nog wel klein (momenteel 19). De Google font directory is heel gebruiksvriendelijk: met slechts één regel HTML code voegt je één of meerdere fonts toe aan een webpagina.

CSS @font-face

Met @font-face kunt je elk gewenst font direct in je website embedden. Met de handige @font-face generator maakt je in één muisklik een kit met alle nodige formaten van een lettertype. Hier staat een uitgebreide handleiding: Nice Web Type/How to use CSS @font-face.

Typekit

Voor dit artikel heb ik bij Typekit een gratis trial account aangemaakt. Je mag dan op één website 2 (van de 134) fonts gebruiken en moet een reclame button voor lief nemen. Na aanmelding volg je stap voor stap de instructies op de website. Het werkt heel makkelijk. Betaalde accounts zijn zeer redelijk geprijsd. Typekit werkt met javascript en op alle browsers.

Gratis?

Niet ieder lettertype mag je zomaar vrij gebruiken als embedded font op een website. Kijk hiervoor dus eerst de licentie van het font na. Op Font Squirrel staan veel lettertypen die gratis commercieel mogen worden gebruikt.

Voorbeelden

Op mijn website http://www.alva-design.com/tips/aparte-lettertypes-op-uw-website/ staan voorbeelden van Google font directory, CSS @font-face en Typekit.

Google Analytics

Google Analytics (hierna te noemen GA); wat is het nu eigenlijk en, belangrijker, wat kun je er allemaal mee? Daar draaide het allemaal om op zaterdag 27 maart.

De grondbeginselen en belangrijkste quick wins van GA werden ons uit de doeken gedaan door Kristiaan Kremer, onze workshopdocent van deze middag.

Na een voorstelrondje bleek dat bijna iedereen wel een GA account had aangemaakt, maar dat lang niet alle mogelijkheden van dit programma bekend zijn bij de deelnemers.

Het belangrijk je te realiseren dat:

  • Google in feite niets analyseert, maar meetgegevens verzamelt
  • De gebruiker of expert nodig blijft voor de analyse.

GA in Wordpress

In WordPress kun je in je template de code toevoegen, dat kan zowel door de code boven de </body> tag te plakken, als met een plugin. Met een plugin neem je alleen de ID over. Nieuwsgierig of een website GA gebruikt? Kijk in de broncode boven de</body> .

Meten is weten: hoe vergelijk je verschillende perioden met elkaar?

Op het dashboard kun je gebruik maken van een functie om verschillende perioden met elkaar te vergelijken. Klik op de datum rechtsboven, vink "Vergelijken met vorige" aan en voila, je ziet meteen in alle rapporten een vergelijking t.o.v. de vorige periode.

Hoe modern is je bezoeker?

Met browsermogelijkheden kun je zien met welke browserversie je bezoeker je website bekijkt.

Waar wordt er het meest geklikt?

Klikpatronen vind je terug bij Site-overlay. De website opent en toont veldjes over je links. Zo kun je precies zien waar het meest op geklikt wordt. Bij 'Belangrijkste uitstappagina's' vind je het instappen en uitstappen. Waar komt je bezoeker binnen en bij welke pagina haakt hij af? Als iemand heel lang op de pagina blijft hangen, kan dat van alles betekenen. Of diegene is erg op zoek naar iets waarvan hij zeker weet dat het op die pagina staat, maar er kan natuurlijk ook sprake zijn van een sanitaire pauze.

Benchmarketing

Je kunt bijvoorbeeld als doel instellen 'inschrijven nieuwsbrief'
Klik op Analytics-instellingen in de oranje balk bovenin. Profielinstellingen > Profielgegevens bewerken.
Informatie over het hoofdprofiel van de website, daar achter in de grijze balk zie je ‘Bewerken’.
Ga naar 'Sites zoeken' en klik de mogelijkheid 'Zoekopdrachten op de site wel bijhouden’ aan.

Sitesearch: Google zoekfunctie in je site

Bij Sitesearch vind je informatie hoe je een Google zoekfunctie in je site kunt bouwen.Maak daar gebruik van een zoekfunctie, ook een zoekfunctie van WordPress werkt. Bij string vul je een s in.Adwords en Analytics kunnen aan elkaar worden gekoppeld.

Inzicht geeft overzicht: Google URL-maker voor je nieuwsbrieven

Zorg voor inzicht in nieuwsbrieven en banners en gebruik daarvoor het Google hulpprogramma URL-maker. In het Dashboard kun je e-mail overzichten aanmaken en de gegevens worden geëxporteerd in bijvoorbeeld een pdf. Nu kun je wekelijks, maandelijks of hoe vaak je maar wilt, een rapport met de gewenste inhoud naar ieder gewenst mailadres laten sturen, dus ook dat van je klant. Je vindt bij elke pagina binnen GA een button e-mail, net boven de paginatitel.

Nieuwsgierig hoeveel bezoekers een actie op heeft geleverd? Maak een annotatie!

Links onderin een grafiek met bezoeken op een dag. Er klikt een balkje open en je ziet 'annotatie maken'.
Je kunt op die dag bijvoorbeeld invullen, dat je een nieuwsbrief hebt verstuurd. Of dat je website genoemd is in een radioprogramma.

Leads: Wie, o wie bezoekt mijn website?

Bezoekers > Netwerkeigenschappen > Serviceproviders

Een lead is een hulpmiddel bij het bekijken wie op je website terecht komt.

Accounts voor gebruiker

Tip: maak voor iedere website een apart account aan zoals google@domeinnaam.nl en gebruik dat voor je hele campagne. Per klant kun je zo van alle mogelijkheden gebruik maken.

Overige tips en trucs

Vanuit het deelnemersveld:

  • Probeer voor het onthouden en invullen van je wachtwoorden eens een programma als 1Password (kost ongeveer 40 dollar) of KeePass (open source, gratis te gebruiken). http://keepass.info/
  • Met zijn eigen zeer kleurrijke website als voorbeeld laat Kristiaan zien hoe kleuren overkomen op iemand die kleurenblind is. Nieuwsgierig hoe jouw website er uitziet bij kleurenblindheid? Check het op http://www.vischeck.com .

Presentatie

De presentatie van Kristiaan is beschikbaar op deze website via SlideShare:

Bekijk alle presentaties van krstn.

 

Foto's en tweets over de workshop vind je terug op Twitter onder de hashtag #wowga

Al deze kennis en meer doe je op tijdens een WoW Workshop. En dat voor maar 10 euro extra. Zo haal je je lidmaatschap er snel uit!

Joomla installatie - een server op je eigen pc

Je kunt Joomla! meteen online zetten of eerst op je eigen computer draaien. Op je eigen computer installeer je software waarmee je de opmgeving van een webserver nabootst.

Lokaal draaien van een website met Joomla
Je hebt meerdere mogelijkheden om een serveromgeving met de juiste techniek, die Joomla nodig heeft, na te bootsen op je eigen pc. Voor een website met contentmanagementsysteem Joomla gebruik je ook MySQL, phpMyAdmin, PHP en Apache.

  • XAMPP
    Dineke reikte een kleine "tutorial" xampp aan.
  • JSAS
    Joomla Stand Alone Server is een stand alone apache/mysql server voor WinXP. Klik verder voor meer uitleg over lokaal installeren met JSAS.

Firebug en de webdeveloper toolbars voor Firefox en Internet Explorer

Firebug

Wordpress maakt gebruik van veel verschillende stylesheets. In welk css-stylesheet vind je de opmaak van je menu? Firebug kan het voor je vinden!

Firebug is een plugin voor browser Mozilla Firefox. Je kunt de plugin downloaden via Firefox. De plugin spoort fouten op in je webpagina's. Je kunt je CSS onderzoeken.
Je vindt Firebug op www.getfirebug.com of open met de browser Firefox deze link.

Firebug werkt natuurlijk ook op websites zonder Wordpress.

Webdeveloper toolbar

Nu je toch bezig bent met plugins: de webdeveloper toolbar voor browser Firefox wil je zeker niet missen. Je kunt er css mee bekijken, wat zit waar in je stylesheet? En valideren, is je html of css volgens de richtlijnen in elkaar gezet? En nog veel meer.

Een toolbar voor Internet Explorer

Ook voor internet explorer is een toolbar ontwikkeld.
Je kunt het gratis downloaden op http://www.accessibility.nl/internet/tools/toolbar

Quote:
De Web Accessibility Toolbar van het Australische AIS-team (Accessible Information Solutions) van vision australia is een bijzonder handig gratis hulpmiddel om de toegankelijkheid te onderzoeken van webpagina's.

Wij gebruiken graag deze optie: CSS, Toon gebruikte stijlregels. Heel handig is ook het bekijken van je website op venstergrootte 1024 x 768 pixels, of testen of je code voldoet aan de W3C standaarden (validatie).

Bewerken van CSS kan helaas (nog) niet met Internet Explorer 7.

Inhoud syndiceren