stefft http://stefft.nl persoonlijk stukje web Thu, 02 Sep 2010 20:20:05 +0000 en hourly 1 http://wordpress.org/?v=3.0 To “www” or not to “www” http://stefft.nl/2010/04/to-www-or-not-to-www/ http://stefft.nl/2010/04/to-www-or-not-to-www/#comments Sun, 04 Apr 2010 06:30:23 +0000 admin http://stefft.nl/?p=22 Steeds meer mensen komen er achter dat “www” een onnodige toevoeging is geworden, in feite kan je het zien als een subdomein. Want wat zegt “www” nou? Helemaal niets! De grote websites als NOS.nl of Tweakers.net zijn er al vanaf gestapt. Wanneer volg jij?

No-www: Verwijs http://www.mijndomein.nl nu door naar http://mijndomein.nl:

Maak een .htaccess bestand aan en plak daarin de onderstaande code:

RewriteEngine On

# no-www
RewriteCond %{HTTP_HOST} ^www\.mijndomein\.nl$ [NC]
RewriteRule ^(.*)$ http://mijndomein.nl/$1 [R=301,L]

Hier vangt hij het adres op, bekijkt of het om http://www.mijndomein.nl (NC = niet hoofdletter gevoelig) gaat en verwijst hem vervolgens permanent (R=301) door naar mijndomein.nl.

Of wil je het juist omdraaien?

Yes-www: http://mijndomein.nl verwijst naar http://www.mijndomein.nl:

Maak een .htaccess bestand aan en plak daarin de onderstaande code:

RewriteEngine On

# yes-www
RewriteCond %{HTTP_HOST} ^mijndomein\.nl$ [NC]
RewriteRule ^(.*)$ http://www.mijndomein.nl/$1 [R=301,L]

Hierin vangt hij het adres op, bekijkt of het om mijndomein.nl (NC = niet hoofdletter gevoelig) gaat en verwijst hem vervolgens permanent (R=301) door naar http://www.mijndomein.nl.

Tip
Wil je dat Google je website automatisch zonder of met www gaat weergeven, geef dit dan aan via Google Webmaster Tools. (Hulpprogramma’s -> Voorkeursdomein instellen)

Let op
Er is een kans dat jouw server anders staat ingesteld, dit kun je nagaan door bij jou DNS instellingen te controleren of er voor zowel mijndomein.nl als voor http://www.mijndomein.nl een ‘address’-record is ingesteld.

Verzorg jezelf de server en werkt het niet? Dan kun je zelf de VirtualHost instellen:

<VirtualHost *>
DocumentRoot /home/www/web
ServerName www.mijndomein.nl
ServerAlias mijndomein.nl
</VirtualHost>

Dit artikel verscheen eerder op het weblog van Webmasterplein.

]]> http://stefft.nl/2010/04/to-www-or-not-to-www/feed/ 1 jQuery Happy Shoutbox http://stefft.nl/2010/04/jquery-happy-shoutbox/ http://stefft.nl/2010/04/jquery-happy-shoutbox/#comments Fri, 02 Apr 2010 07:00:18 +0000 admin http://stefft.nl/?p=186 In navolging van mijn eerdere post over jQuery inladen via Google Code, hebben we ook maar daadwerkelijk iets in elkaar geknutseld. Een shoutbox, volledig via AJAX d.m.v. jQuery. Oh, voor wat extra’s heb ik er maar het stempeltje “happy” bij geplakt. Geef me feedback of leer er zelf van!

De demo vindt je hier, de bijbehorende stylesheet hier en de code hieronder:

    <?php
    /* Stef van der Linden 2010 */

    /*

    CREATE TABLE `shoutbox` (
      `shout_id` int(11) NOT NULL AUTO_INCREMENT,
      `username` varchar(25) NOT NULL,
      `message` varchar(140) NOT NULL,
      `date` int(11) NOT NULL,
      `ipaddress` int(15) NOT NULL,
      PRIMARY KEY (`shout_id`)
    ) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

    */

    // mySQL connectie
    if ( !mysql_connect('localhost', '', '') || !mysql_select_db('') ) {
       die('Er is een storing opgetreden, onze excuses voor het ongemak.');
    }

    $action = ( $_GET['do'] ) ? htmlspecialchars(trim($_GET['do'])) : '';
    $colours = array("blue", "green", "purple", "brown", "red", "orange", "green_2", "blue_2", "red_2");

    switch($action) {
       case 'load':
          $sql = "SELECT `username`, `message`, `date`
             FROM `shoutbox`
             ORDER BY `date` DESC";
          $result = mysql_query($sql);
          while ( $row = mysql_fetch_array($result) ) {
             echo '<div class="entry ' . $colours[rand(0,9)] . '"><p>' . stripslashes($row['message']) . '<small>' . stripslashes($row['username']) . ' - ' . date("d/m/Y H:i", $row['date']) . '</small></p></div>';
          }

       exit;
       break;
       case 'save':
          $username = ( isset($_POST['username']) ) ? addslashes(htmlspecialchars($_POST['username'])) : '';
          $message = ( isset($_POST['message']) ) ? addslashes(htmlspecialchars($_POST['message'])) : '';
          $date = time();
          $ipaddress = $_SERVER['REMOTE_ADDR'];

          $sql = "INSERT INTO `shoutbox`
             (`username`, `message`, `date`, `ipaddress`)
             VALUES ('$username', '$message', '$date', '$ipaddress');";
          mysql_query($sql);
          exit;
       break;
    }

    ?>
    <!DOCTYPE html>
    <html lang="nl">
    <head>
       <meta charset="UTF-8" />
       <title>jQuery: Happy Shoutbox</title>
       <link rel="stylesheet" type="text/css" href="./stylesheet.css" />
       <script src="http://www.google.com/jsapi"></script>
       <script language="Javascript" type="text/javascript">

       google.load("jquery", '1');

       function saveShout() {
          if ( document.shoutbox.username.value == '' ) {
             alert('Fill in your username please!');
             document.shoutbox.username.focus();
          } else {
             jQuery.post('./index.php?do=save', { username: document.shoutbox.username.value, message: document.shoutbox.message.value }, function(data) {
                  loadShout();
                document.shoutbox.message.value = '';
             });
          }
       }

       function checkMaxLength(textarea) {
          var maxlength = 140;
          var valuelength = textarea.value.length;

          if ( valuelength > maxlength ) {
             alert('Oops! Only 140 chars max..');
             textarea.value = textarea.value.substring(0, maxlength)
          }
       }

       function loadShout () {
          jQuery("#shouts").load('./index.php?do=load');
       }

         google.setOnLoadCallback(function() {
            loadShout();
       });

       setInterval("loadShout()", 1000);

           </script>
    </head>
    <body>
       <div id="container">
          <h1>happy shoutbox</h1>
          <form name="shoutbox" onsubmit="saveShout(); return false;">
           <fieldset>
              <legend>Try me!</legend>

             <label for="username">username</label>
             <input type="text" name="username" id="username" size="18" maxlength="20" /> <br />
             <label for="message">message</label>
             <textarea name="message" id="message" cols="25" rows="2" onkeyup="return checkMaxLength(this)"></textarea> <br />

             <input type="submit" name="submit" value="Shout!" />
           </fieldset>
          </form>
          <div id="shouts"></div>
         </div>
    </body>
    </html>
]]> http://stefft.nl/2010/04/jquery-happy-shoutbox/feed/ 0 Even snel: Laat Google jQuery hosten http://stefft.nl/2010/03/even-snel-laat-google-jquery-hosten/ http://stefft.nl/2010/03/even-snel-laat-google-jquery-hosten/#comments Wed, 24 Mar 2010 21:12:06 +0000 admin http://stefft.nl/?p=174 Velen hebben geen idee wat er allemaal achter Google Code schuilt, behalve de API’s zit daar nog een schat van informatie en tools. Zoals de mogelijkheid om bestaande “libraries” als jQuery, maar ook MooTools, script.aculo.us via Google in te laden, met de snelle servers van Google kan dat enorm veel laadtijd schelen. Dus waarom niet?

<!DOCTYPE html>
<html lang="nl">
 <head>
    <meta charset="UTF-8" />
    <title>Laat Google jQuery hosten</title>
    <script src="http://www.google.com/jsapi"></script>
    <script language="Javascript" type="text/javascript">

    google.load("jquery", '1');
   
    google.setOnLoadCallback(function() {
        /* jQuery stuff */
    });

        </script>
 </head>

Via google.load(); laad je de library van bijvoorbeeld jQuery binnen. Waarbij eerst wordt gevraagd om de modulenaam in dit geval “jquery” en bij de tweede om de versie van jQuery die je op wilt halen. Met ’1′ pak je de laatste in de 1e versie van jQuery, maar je kunt ook specifiek voor 1.3 kiezen of 1.4.2.

google.load('jquery', '1');
google.load('jquery', '1.3');

Verder lezen? http://code.google.com/intl/nl/apis/ajax/documentation/#GoogleLoad

]]> http://stefft.nl/2010/03/even-snel-laat-google-jquery-hosten/feed/ 1 Koppel mijn blog aan Facebook http://stefft.nl/2010/03/koppel-mijn-blog-aan-facebook/ http://stefft.nl/2010/03/koppel-mijn-blog-aan-facebook/#comments Fri, 12 Mar 2010 06:30:32 +0000 admin http://stefft.nl/?p=32 Ik ben er nog niet uit of Facebook vager in elkaar zit dan Hyves maar makkelijk en duidelijk zijn beide in ieder geval niet. Enfin, je kunt je blog terug laten komen op je FaceBook Page via “Notes”. De stappen:

  1. Login op Facebook
  2. Ga naar je Facebook Page, navigeer naar Notes.
  3. Kies voor “Import a blog”

  4. Je komt op de pagina “Import an External Blog” en daaronder staat een invulvakje “Web URL”.

    5. Hoe kom ik aan de Web URL?
    Iedere blogsoftware heeft de mogelijkheid om een RSS-feed van je berichten te maken, meestal staat die koppeling onderaan met de term ‘RSS’ of ‘feed’. Kopieer deze URL en vul deze bij stap 3 in.

  5. Vul de Web URL in en vink de voorwaarde aan.
  6. Hij geeft een voorproefje en dan moet je hem nog bevestigen. (Confirm Import)

Klaar! Vanaf dat moment komen je nieuwe blogposts automatisch terug in Notes en in je Wall (en bij diegene die fan zijn van je pagina).

Ontkoppelen

Kies bij de tab Notes voor “Edit import settings” en klik op de grote blauwe button “Stop Importing”.

Dit bericht is een onderdeel van de handleiding “een inleiding social media & artiesten” dec. 09.

]]> http://stefft.nl/2010/03/koppel-mijn-blog-aan-facebook/feed/ 0 Koppel YouTube aan Twitter & Facebook http://stefft.nl/2010/03/koppel-youtube-aan-twitter-facebook/ http://stefft.nl/2010/03/koppel-youtube-aan-twitter-facebook/#comments Thu, 11 Mar 2010 06:30:15 +0000 admin http://stefft.nl/?p=34 Altijd al je activiteiten (nieuwe video geüpload, een video als favoriet aangegeven, abonnementen, reacties) willen delen? YouTube geeft heel gemakkelijk de mogelijkheid. Volg de stappen:

  1. Log in op YouTube
  2. Ga op je gebruikersnaam staan, kies voor account en vervolgens links in het menu voor ‘activiteiten delen’ of deze URL.
  3. Eerste kopje geeft aan welke activiteiten je wilt delen, het tweede kopje geeft de mogelijkheid om te kiezen met welke netwerken je het wilt delen, het derde kopje geeft activiteiten van anderen aan. (Maar dat is niet interessant.)

Activiteitenfeed
Je kiest uiteraard voor het delen met anderen, anders heeft de functie weinig nut. Kies vervolgens uit wat je wilt delen. Let er op dat als je zelf YouTube op dit account actief gebruikt je bewuste keuzes moet maken wat wel en niet naar andere gaat.

Opties van Automatisch delen

  • Facebook: Facebook Connect opent en hij vraagt (nadat je bent ingelogd) of je toestemming wilt geven voor deze koppeling: “Allow access”, vervolgens komen een rits van vragen of je toestemming wilt geven of Facebook dit mag toestaan namens YouTube.
  • Twitter: Google Login opent, hij vraagt je in te loggen, hij stuurt hen door naar Twitter Connections, die vraagt (nadat je bent ingelogd) of je toestemming wilt geven (Allow).

Ontkoppelen
Via dezelfde pagina als je koppelt, ontkoppel je beide ook: “Accounts loskoppelen”.

Dit bericht is een onderdeel van de handleiding “een inleiding social media & artiesten” dec. 09.

]]> http://stefft.nl/2010/03/koppel-youtube-aan-twitter-facebook/feed/ 0 Koppel mijn blog aan Hyves http://stefft.nl/2010/03/koppel-mijn-blog-aan-hyves/ http://stefft.nl/2010/03/koppel-mijn-blog-aan-hyves/#comments Tue, 09 Mar 2010 06:30:08 +0000 admin http://stefft.nl/?p=30 Het is tegenwoordig peanuts, door middel van het onderdeel “Koppel content” van Hyves. Heel simpel, hieronder even de juiste stappen:

  1. Inloggen op Hyves.nl
  2. Volg deze URL of navigeer zelf naar Account > Koppel content > Blog
  3. Bij Blog Import, vraagt hij om de URL RSS Feed.

    4. Hoe kom ik aan de URL RSS Feed?

    Iedere blogsoftware heeft de mogelijkheid om een RSS-feed van je berichten te maken, meestal staat die koppeling onderaan met de term ‘RSS’ of ‘feed’. Kopieer deze URL en vul deze bij stap 3 in.

Ontkoppelen
Op dezelfde pagina als waar je een blog toevoegt, staat een URL met de tekst: “Klik hier om de import uit te zetten”.

Dit bericht is een onderdeel van de handleiding “een inleiding social media & artiesten” dec. 09, aangepast 9 maart 2010.

]]> http://stefft.nl/2010/03/koppel-mijn-blog-aan-hyves/feed/ 0 Een favicon, het kroontje op je website http://stefft.nl/2010/03/favicon-het-kroontje-op-je-website/ http://stefft.nl/2010/03/favicon-het-kroontje-op-je-website/#comments Mon, 08 Mar 2010 07:30:38 +0000 admin http://stefft.nl/?p=20 Je kent ze vast wel de bekende iconen in de adresbalk en tabbladen, ze zorgen niet enkel voor een mooi compleet beeld van je website, het zorgt ook voor herkenning in je tabbladenbalk en bladwijzerlijst.

We pakken bijvoorbeeld en je ziet direct dat het van Google afkomstig is. En deze? komt minder bekend voor, valt niet genoeg op, past niet goed genoeg bij het logo en je komt bijna nooit op de website van Microsoft, hij was van Microsoft dus. en jawel… Geenstijl. Kortom een fav(orite)-icoon staat niet alleen leuk, het bouwt ook herkenbaarheid op.

Een favicon voor je website is geen noodzaak, maar het helpt je bezoekers wel jouw website eruit te plukken, in bijvoorbeeld de bladwijzerlijst. Laten we dus uiteenzetten hoe we het favicon plaatsen op je website.

Formaat:
Het favicon bevat altijd de afmeting 16 breed en 16 hoog, dit is het universele formaat waarin je icoon zeker goed wordt weergegeven.

De afbeelding moet worden opgeslagen worden in het ico-formaat hier zijn verschillende programma’s voor:

Plaatsen:
Je favicon plaats je in de root van je website, dus op de plek waar in 9 van de 10 gevallen zich ook het index.html bestand bevind. Zodra je hem hebt geüpload naar de root, zouden browsers hem automatisch moeten herkennen en weergeven.

Gebeurd dit niet of wil je de favicon in een andere directory stallen dan kun je door middel van de link tag hem in je website zetten:

 <link href="./favicon.ico" link rel="shortcut icon" type="image/x-icon" />
<html>
<head>
<title>Mijndomein.nl</title>
<link href="./stylesheet.css" rel="stylesheet" type="text/css" media="all" />
<link href="./favicon.ico" link rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    Opmerking:
    Mocht je het opslaan als ico-formaat lastig vinden, dan wijk je hier vanaf en maak je een gif-afbeelding en vul je in het href-attribuut gewoon: “favicon.gif” in.

    <link href="./favicon.gif" link rel="shortcut icon" type="image/x-icon" />

    Let op: Dan wordt hij niet automatisch door browsers herkent en zul je op iedere pagina deze regel moeten plaatsen.

Tips bij het maken

  1. Trek een gelijkenis met je website; Zorg dat je icoon overeenkomt met je website, is je website simpel en strak? Zorg voor een simpel en strak icoontje. Verwerk de kleuren van je site in het icoon. Of pak de eerste letter van je logo.
  2. Houd het simpel; Je hebt maar 16×16 als grootte, dat is klein en ga dus geen ingewikkelde afbeeldingen er in verwerken die worden meestal niet herkend.
  3. Transparante icoontjes; Onthoud dat met een achtergrondkleur je favicon een blok wordt en dus niet samengaat met je adresbalk.

Inspiratie:
Op het prachtige inspiratieblog Smashing Magazine vind je 5 blogposts om inspiraties op te doen voor jouw eigen unieke favicon:

Deze blogpost verscheen eerder op Webmasterplein Blog.

]]> http://stefft.nl/2010/03/favicon-het-kroontje-op-je-website/feed/ 1 Koppel Flickr aan Hyves http://stefft.nl/2010/03/koppel-flickr-aan-hyves/ http://stefft.nl/2010/03/koppel-flickr-aan-hyves/#comments Fri, 05 Mar 2010 06:30:28 +0000 admin http://stefft.nl/?p=28 In tegenstelling tot de koppeling met Twitter is dit nog houtje-touwtje werk, maar ook hier komen we uit. Volg de stappen:

  1. Log in op Hyves.nl.
  2. Kies voor Foto’s & Video’s op je Hyvespagina.
  3. Vervolgens klik je op “Nieuw album starten”, vul in het venster aan de linker bovenkant een naam in voor het album waar je de foto’s van Flickr in wil plaatsen.
  4. Vervolgens is het belangrijk om alvast 1 afbeelding naar het album te uploaden, die je later weer kan verwijderen.
  5. Zodra je een afbeelding hebt geplaatst keer je terug naar je eigen Hyves, waar je weer voor ‘Foto’s & video’s’ kiest, vervolgens zie je jouw aangemaakte album terug met de geplaatste foto’s. Je album is nu toegankelijk en klik er op.
  6. In het menu daarvan staat: “RSS-feeds (oa voor Flickr)”

  7. Er komt een lightbox die je vraagt om je RSS-feed in te vullen. Let op, je hebt 2 mogelijkheden:
    • Flickr feed met een max. 20 foto’s
    • Aangepast feed met een eigen max. aan foto’s

    8. FlickR feed met max. van 20 foto’s

    Surf naar je photosteam op Flickr (http://www.flickr.com/photos/*jouw gebruikersnaam*) onderaan staat een RSS-ikoon met de tekst Subscribe to Xs photostream. Kopieer de link van “Latest” en vervolg stap 8.

    Aangepaste feed met een eigen max. aan foto’s

    Je maakt nu je eigen Flickr RSS-feed via externe websites, dat is geen probleem. Surf naar Fusr zoals ook Hyves schrijft, vul je gebruikersnaam in om achter je Flickr-ID te komen, vervolg je weg naar Yahoo Pipes vul bij “Flickr user NSID” je Flickr-ID in die je hebt gekregen bij Fusr. Kies het aantal foto’s dat je wil laten terugkomen op je Hyves. Kies voor Rune Pipe en je ziet onderaan je foto’s verschijnen. Kopieer de link “Get as RSS” en vervolg stap 8.

  8. Vul de gekozen RSS-feed in en druk op “Feed toevoegen”, als alles op de juiste manier is gegaan. Zal Hyves deze boven voortaan tonen met een mogelijkheid om de RSS-feed weer te verwijderen.

Klaar! Wat mogelijkheden.

RSS-feed van “Sets”

Ook iedere ‘set’ binnen Flickr heeft een eigen RSS-feed, je zou dus per set ook een album aan kunnen maken. Dan vervalt de mogelijkheid om meer dan 20 foto’s toe te voegen, maar heb je wel mooi onderscheid. Ook zou je een specifieke set van een andere fotograaf zo op kunnen halen.

Meerdere RSS-feeds per album

Heb je meerdere sets, of meerdere Flickr-feeds die je wilt toevoegen, geeft Hyves je (na stap 6) gelijk de mogelijkheid nog een andere feed toe te voegen aan dezelfde album. Zo zou je van meerdere bronnen naar hetzelfde thema album kunnen leiden.

Ontkoppelen

  • Bij de lightbox van stap 7, staat een prullenbak icoon als je daarop klikt verwijdert hij de feed.
  • Verwijder het album.

UPDATE 2 SEPT 2010 Een wijziging in Hyves maakt alles nog omslachtiger, we hebben de extra stappen hiervoor toegevoegd. Met dank aan Ruud.

Dit bericht is een onderdeel van de handleiding “een inleiding social media & artiesten” dec. 09.

]]> http://stefft.nl/2010/03/koppel-flickr-aan-hyves/feed/ 0 Koppel Twitter aan Hyves http://stefft.nl/2010/03/koppel-twitter-aan-hyves/ http://stefft.nl/2010/03/koppel-twitter-aan-hyves/#comments Thu, 04 Mar 2010 06:30:09 +0000 admin http://stefft.nl/?p=26 Het is tegenwoordig peanuts, waarop we vroeger nog gebruik maakte van Oproer’s Twwwitter gebruiken we nu het onderdeel “Koppel content” van Hyves zelf. Heel simpel, hieronder even de juiste stappen:

  1. Inloggen op Hyves.nl
  2. Volg deze URL of navigeer zelf naar Account > Koppel content > Twitter
  3. Via de button ‘Inloggen op Twitter’ maak je contact met connections van Twitter.
  4. Login op Twitter, sta Hyves toe als connection door op ‘Allow’ (Toestaan) te klikken.

Klaar, nu geeft Hyves je nog wat mogelijkheden;

  • Exporteer WWW’s (vanuit Hyves naar Twitter)
  • Exporteer ook geimporteerde status updates van Facebook (vanuit FaceBook naar Hyves door naar Twitter)
  • Importeer tweets (vanuit Twitter naar Hyves)
  • Alleen tweets met “#hyves” of “#h” (let op, zie “Actieve twitteraar?”)

Actieve twitteraar

Ben je van plan om actief te twitteren of je doet dit al actief, bedenk dan in hoeverre jou berichten relevant zijn voor je “vrienden” op Hyves, zouden zij elk bericht mee willen krijgen en plaats je enkele interessante tweets door? Activeer in dat geval binnen de instellingen: “Alleen tweets met “#hyves” of “#h”.

Ontkoppelen

  • Via Twitter verwijder je de koppeling met Hyves via Twitter > Settings > Connections of deze URL. Kies bij Hyves voor “Revoke Access”
  • Via Hyves verwijder je de koppeling met Twitter via Hyves > Account > Koppel content > Twitter of deze URL. Kies bij Twitterprofiel voor “Verwijder”.

Dit bericht is een onderdeel van de handleiding “een inleiding social media & artiesten” dec. 09.

]]> http://stefft.nl/2010/03/koppel-twitter-aan-hyves/feed/ 1 Even snel: Hoe kom ik hoog in Google? http://stefft.nl/2010/03/even-snel-hoe-kom-ik-hoog-in-google/ http://stefft.nl/2010/03/even-snel-hoe-kom-ik-hoog-in-google/#comments Wed, 03 Mar 2010 07:30:46 +0000 admin http://stefft.nl/?p=16 Stop hier. Het gaat niet om Google, het gaat om je bezoeker. Okay?

  1. toegankelijkheid op verschillende platformen (browsers, besturingssystemen, PCs, notebooks, netbooks, mobieltjes)
  2. interessante leesbare stukken tekst
  3. goede navigatiestructuur
  4. Google op jezelf; verbeter je website
  5. Google op je concurrenten/collega’s; verbeter je website
  6. vernieuw je content, niet je website
  7. iedere pagina is uniek
  8. iedere pagina is scanbaar (gebruik kopjes, alinea’s, lijsten, afbeeldingen..)
  9. zorg offline voor online en online voor offline
]]> http://stefft.nl/2010/03/even-snel-hoe-kom-ik-hoog-in-google/feed/ 0